From a32c7a0c5b481b23977b551c1b19df4662167384 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 29 Sep 2021 10:40:44 +1000
Subject: [PATCH] customise MultiSelect add item icons from theme

---
 package.json             |  3 +--
 src/theme/components.tsx | 27 +++++++++++++++++++++++++++
 yarn.lock                |  8 ++++----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d0062e3b..0a27d64c 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,7 @@
     "@mui/lab": "^5.0.0-alpha.47",
     "@mui/material": "^5.0.0",
     "@mui/styles": "^5.0.0",
-    "@rowy/form-builder": "^0.1.2",
-    "@rowy/multiselect": "^0.1.12",
+    "@rowy/multiselect": "^0.2.0",
     "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",
     "ansi-to-react": "^6.1.5",
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 55442d2f..7f1ff186 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -1,10 +1,13 @@
 import { Theme, ThemeOptions } from "@mui/material/styles";
 import type {} from "@mui/lab/themeAugmentation";
+import { MultiSelectProps } from "@rowy/multiselect";
 import { toRem } from "./typography";
 
 import RadioIcon from "theme/RadioIcon";
 import CheckboxIcon from "theme/CheckboxIcon";
 import CheckboxIndeterminateIcon from "theme/CheckboxIndeterminateIcon";
+import AddCircleIcon from "@mui/icons-material/AddCircleOutline";
+import { SvgIcon } from "@mui/material";
 
 import { colord, extend } from "colord";
 import mixPlugin from "colord/plugins/mix";
@@ -16,6 +19,17 @@ declare module "@mui/material/styles/createTransitions" {
   }
 }
 
+declare module "@mui/material/styles" {
+  interface Components {
+    RowyMultiSelect?: {
+      defaultProps?: Omit<
+        MultiSelectProps<any>,
+        "multiple" | "value" | "onChange" | "options"
+      >;
+    };
+  }
+}
+
 export const components = (theme: Theme): ThemeOptions => {
   const buttonPrimaryHover = colord(theme.palette.primary.main)
     .mix(theme.palette.primary.contrastText, 0.12)
@@ -901,6 +915,19 @@ export const components = (theme: Theme): ThemeOptions => {
           },
         },
       },
+
+      RowyMultiSelect: {
+        defaultProps: {
+          AddButtonProps: {
+            singleIcon: <AddCircleIcon />,
+            multipleIcon: (
+              <SvgIcon>
+                <path d="M17 3a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10Zm0 2H7a2 2 0 0 0-1.995 1.85L5 7v10a2 2 0 0 0 1.85 1.995L7 19h10a2 2 0 0 0 1.995-1.85L19 17V7a2 2 0 0 0-1.85-1.995L17 5Zm-6 12h2v-4h4v-2h-4V7h-2v4H7v2h4v4Z" />
+              </SvgIcon>
+            ),
+          },
+        },
+      },
     },
   };
 };
diff --git a/yarn.lock b/yarn.lock
index d995a16f..8d81228d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2672,10 +2672,10 @@
     use-debounce "^3.4.3"
     yup "^0.32.9"
 
-"@rowy/multiselect@^0.1.12":
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.1.12.tgz#03380ceaaed9f6847c59b6ccae6d216ce149d95a"
-  integrity sha512-1JmH5EDt0OSxcUWjQXfqGwp4w2xDJ5OjfS1uV9pXv7AcTw++RqwQKsF15llKYyatvpZohSyaVQIogPh7Zzpe/g==
+"@rowy/multiselect@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.2.0.tgz#b915d3cfcd5f7fc2947e97d242510894e454281e"
+  integrity sha512-PAQ6LCMkEbAS558krXq8UyI8/9rZ/jmNU9cxSyvtnjHF7GVS7ZIRFDU8InV+nzYHsJWF/QYtH7o3X64kRmDrgQ==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"