customise MultiSelect add item icons from theme

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",

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>
+            ),
+          },
+        },
+      },
     },
   };
 };

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"