@webiny/app-admin 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/components/IconPicker/config/index.js

@@ -1,6 +1,6 @@
-import React, { useMemo } from "react";
+import react, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
-import { IconPackProvider as IconPack } from "./IconPackProvider.js";
+import { IconPackProvider } from "./IconPackProvider.js";
 import { IconType } from "./IconType.js";
 import { SimpleIconPlugin } from "../plugins/iconsPlugin.js";
 import { EmojiPlugin } from "../plugins/emojisPlugin.js";
@@ -9,37 +9,34 @@ import { createProvider } from "@webiny/app";
 import { Emojis } from "./Emojis.js";
 import { FontAwesomeIcons } from "./FontAwesomeIcons.js";
 const base = createConfigurableComponent("IconPicker");
-export const IconPickerConfig = Object.assign(base.Config, {
-  IconPack,
-  IconType
+const IconPickerConfig = Object.assign(base.Config, {
+    IconPack: IconPackProvider,
+    IconType: IconType
 });
-export const IconPickerWithConfig = base.WithConfig;
-export const IconPickerConfigProvider = createProvider(Original => {
-  return function IconPickerConfigProvider({
-    children
-  }) {
-    return /*#__PURE__*/React.createElement(IconPickerWithConfig, null, /*#__PURE__*/React.createElement(Original, null, children));
-  };
-});
-class IconPackProvider {
-  constructor(name, loader) {
-    this.name = name;
-    this.loader = loader;
-  }
-  getIcons() {
-    return this.loader();
-  }
+const IconPickerWithConfig = base.WithConfig;
+const config_IconPickerConfigProvider = createProvider((Original)=>function({ children }) {
+        return /*#__PURE__*/ react.createElement(IconPickerWithConfig, null, /*#__PURE__*/ react.createElement(Original, null, children));
+    });
+class config_IconPackProvider {
+    constructor(name, loader){
+        this.name = name;
+        this.loader = loader;
+    }
+    getIcons() {
+        return this.loader();
+    }
 }
-export function useIconPickerConfig() {
-  const config = base.useConfig();
-  const iconPackProviders = config.iconPackProviders || [];
-  return useMemo(() => ({
-    iconTypes: config.iconTypes || [],
-    iconPackProviders: iconPackProviders.map(provider => new IconPackProvider(provider.name, provider.load))
-  }), [config]);
+function useIconPickerConfig() {
+    const config = base.useConfig();
+    const iconPackProviders = config.iconPackProviders || [];
+    return useMemo(()=>({
+            iconTypes: config.iconTypes || [],
+            iconPackProviders: iconPackProviders.map((provider)=>new config_IconPackProvider(provider.name, provider.load))
+        }), [
+        config
+    ]);
 }
-export const DefaultIcons = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleIconPlugin, null), /*#__PURE__*/React.createElement(EmojiPlugin, null), /*#__PURE__*/React.createElement(CustomIconPlugin, null), /*#__PURE__*/React.createElement(Emojis, null), /*#__PURE__*/React.createElement(FontAwesomeIcons, null));
-};
+const DefaultIcons = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SimpleIconPlugin, null), /*#__PURE__*/ react.createElement(EmojiPlugin, null), /*#__PURE__*/ react.createElement(CustomIconPlugin, null), /*#__PURE__*/ react.createElement(Emojis, null), /*#__PURE__*/ react.createElement(FontAwesomeIcons, null));
+export { DefaultIcons, IconPickerConfig, IconPickerWithConfig, config_IconPickerConfigProvider as IconPickerConfigProvider, useIconPickerConfig };
 
 //# sourceMappingURL=index.js.map

package/components/IconPicker/config/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","createConfigurableComponent","IconPackProvider","IconPack","IconType","SimpleIconPlugin","EmojiPlugin","CustomIconPlugin","createProvider","Emojis","FontAwesomeIcons","base","IconPickerConfig","Object","assign","Config","IconPickerWithConfig","WithConfig","IconPickerConfigProvider","Original","children","createElement","constructor","name","loader","getIcons","useIconPickerConfig","config","useConfig","iconPackProviders","iconTypes","map","provider","load","DefaultIcons","Fragment"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { createConfigurableComponent } from \"@webiny/react-properties\";\nimport { IconPackProvider as IconPack } from \"./IconPackProvider.js\";\nimport { IconType } from \"./IconType.js\";\nimport { SimpleIconPlugin } from \"../plugins/iconsPlugin.js\";\nimport { EmojiPlugin } from \"../plugins/emojisPlugin.js\";\nimport { CustomIconPlugin } from \"../plugins/customPlugin.js\";\nimport type { Icon } from \"../types.js\";\nimport { createProvider } from \"@webiny/app\";\nimport { Emojis } from \"./Emojis.js\";\nimport { FontAwesomeIcons } from \"./FontAwesomeIcons.js\";\n\nconst base = createConfigurableComponent<IconPickerConfig>(\"IconPicker\");\n\nexport const IconPickerConfig = Object.assign(base.Config, { IconPack, IconType });\nexport const IconPickerWithConfig = base.WithConfig;\n\nexport const IconPickerConfigProvider = createProvider(Original => {\n    return function IconPickerConfigProvider({ children }) {\n        return (\n            <IconPickerWithConfig>\n                <Original>{children}</Original>\n            </IconPickerWithConfig>\n        );\n    };\n});\n\nexport interface IconPackLoader {\n    (): Promise<Icon[]>;\n}\n\ninterface IconTypeInterface {\n    name: string;\n}\n\nexport type { IconTypeInterface as IconType };\n\ninterface IconPickerConfig {\n    iconTypes: IconTypeInterface[];\n    iconPackProviders: {\n        name: string;\n        load: IconPackLoader;\n    }[];\n}\n\nexport interface IconPackProviderInterface {\n    name: string;\n    getIcons(): Promise<Icon[]>;\n}\n\nclass IconPackProvider implements IconPackProviderInterface {\n    public readonly name: string;\n    private readonly loader: IconPackLoader;\n\n    constructor(name: string, loader: IconPackLoader) {\n        this.name = name;\n        this.loader = loader;\n    }\n\n    getIcons(): Promise<Icon[]> {\n        return this.loader();\n    }\n}\n\nexport function useIconPickerConfig() {\n    const config = base.useConfig();\n\n    const iconPackProviders = config.iconPackProviders || [];\n\n    return useMemo(\n        () => ({\n            iconTypes: config.iconTypes || [],\n            iconPackProviders: iconPackProviders.map(\n                provider => new IconPackProvider(provider.name, provider.load)\n            )\n        }),\n        [config]\n    );\n}\n\nexport const DefaultIcons = () => {\n    return (\n        <>\n            <SimpleIconPlugin />\n            <EmojiPlugin />\n            <CustomIconPlugin />\n            <Emojis />\n            <FontAwesomeIcons />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,2BAA2B,QAAQ,0BAA0B;AACtE,SAASC,gBAAgB,IAAIC,QAAQ;AACrC,SAASC,QAAQ;AACjB,SAASC,gBAAgB;AACzB,SAASC,WAAW;AACpB,SAASC,gBAAgB;AAEzB,SAASC,cAAc,QAAQ,aAAa;AAC5C,SAASC,MAAM;AACf,SAASC,gBAAgB;AAEzB,MAAMC,IAAI,GAAGV,2BAA2B,CAAmB,YAAY,CAAC;AAExE,OAAO,MAAMW,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,EAAE;EAAEZ,QAAQ;EAAEC;AAAS,CAAC,CAAC;AAClF,OAAO,MAAMY,oBAAoB,GAAGL,IAAI,CAACM,UAAU;AAEnD,OAAO,MAAMC,wBAAwB,GAAGV,cAAc,CAACW,QAAQ,IAAI;EAC/D,OAAO,SAASD,wBAAwBA,CAAC;IAAEE;EAAS,CAAC,EAAE;IACnD,oBACIrB,KAAA,CAAAsB,aAAA,CAACL,oBAAoB,qBACjBjB,KAAA,CAAAsB,aAAA,CAACF,QAAQ,QAAEC,QAAmB,CACZ,CAAC;EAE/B,CAAC;AACL,CAAC,CAAC;AAyBF,MAAMlB,gBAAgB,CAAsC;EAIxDoB,WAAWA,CAACC,IAAY,EAAEC,MAAsB,EAAE;IAC9C,IAAI,CAACD,IAAI,GAAGA,IAAI;IAChB,IAAI,CAACC,MAAM,GAAGA,MAAM;EACxB;EAEAC,QAAQA,CAAA,EAAoB;IACxB,OAAO,IAAI,CAACD,MAAM,CAAC,CAAC;EACxB;AACJ;AAEA,OAAO,SAASE,mBAAmBA,CAAA,EAAG;EAClC,MAAMC,MAAM,GAAGhB,IAAI,CAACiB,SAAS,CAAC,CAAC;EAE/B,MAAMC,iBAAiB,GAAGF,MAAM,CAACE,iBAAiB,IAAI,EAAE;EAExD,OAAO7B,OAAO,CACV,OAAO;IACH8B,SAAS,EAAEH,MAAM,CAACG,SAAS,IAAI,EAAE;IACjCD,iBAAiB,EAAEA,iBAAiB,CAACE,GAAG,CACpCC,QAAQ,IAAI,IAAI9B,gBAAgB,CAAC8B,QAAQ,CAACT,IAAI,EAAES,QAAQ,CAACC,IAAI,CACjE;EACJ,CAAC,CAAC,EACF,CAACN,MAAM,CACX,CAAC;AACL;AAEA,OAAO,MAAMO,YAAY,GAAGA,CAAA,KAAM;EAC9B,oBACInC,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAoC,QAAA,qBACIpC,KAAA,CAAAsB,aAAA,CAAChB,gBAAgB,MAAE,CAAC,eACpBN,KAAA,CAAAsB,aAAA,CAACf,WAAW,MAAE,CAAC,eACfP,KAAA,CAAAsB,aAAA,CAACd,gBAAgB,MAAE,CAAC,eACpBR,KAAA,CAAAsB,aAAA,CAACZ,MAAM,MAAE,CAAC,eACVV,KAAA,CAAAsB,aAAA,CAACX,gBAAgB,MAAE,CACrB,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/config/index.js","sources":["../../../../src/components/IconPicker/config/index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { createConfigurableComponent } from \"@webiny/react-properties\";\nimport { IconPackProvider as IconPack } from \"./IconPackProvider.js\";\nimport { IconType } from \"./IconType.js\";\nimport { SimpleIconPlugin } from \"../plugins/iconsPlugin.js\";\nimport { EmojiPlugin } from \"../plugins/emojisPlugin.js\";\nimport { CustomIconPlugin } from \"../plugins/customPlugin.js\";\nimport type { Icon } from \"../types.js\";\nimport { createProvider } from \"@webiny/app\";\nimport { Emojis } from \"./Emojis.js\";\nimport { FontAwesomeIcons } from \"./FontAwesomeIcons.js\";\n\nconst base = createConfigurableComponent<IconPickerConfig>(\"IconPicker\");\n\nexport const IconPickerConfig = Object.assign(base.Config, { IconPack, IconType });\nexport const IconPickerWithConfig = base.WithConfig;\n\nexport const IconPickerConfigProvider = createProvider(Original => {\n    return function IconPickerConfigProvider({ children }) {\n        return (\n            <IconPickerWithConfig>\n                <Original>{children}</Original>\n            </IconPickerWithConfig>\n        );\n    };\n});\n\nexport interface IconPackLoader {\n    (): Promise<Icon[]>;\n}\n\ninterface IconTypeInterface {\n    name: string;\n}\n\nexport type { IconTypeInterface as IconType };\n\ninterface IconPickerConfig {\n    iconTypes: IconTypeInterface[];\n    iconPackProviders: {\n        name: string;\n        load: IconPackLoader;\n    }[];\n}\n\nexport interface IconPackProviderInterface {\n    name: string;\n    getIcons(): Promise<Icon[]>;\n}\n\nclass IconPackProvider implements IconPackProviderInterface {\n    public readonly name: string;\n    private readonly loader: IconPackLoader;\n\n    constructor(name: string, loader: IconPackLoader) {\n        this.name = name;\n        this.loader = loader;\n    }\n\n    getIcons(): Promise<Icon[]> {\n        return this.loader();\n    }\n}\n\nexport function useIconPickerConfig() {\n    const config = base.useConfig();\n\n    const iconPackProviders = config.iconPackProviders || [];\n\n    return useMemo(\n        () => ({\n            iconTypes: config.iconTypes || [],\n            iconPackProviders: iconPackProviders.map(\n                provider => new IconPackProvider(provider.name, provider.load)\n            )\n        }),\n        [config]\n    );\n}\n\nexport const DefaultIcons = () => {\n    return (\n        <>\n            <SimpleIconPlugin />\n            <EmojiPlugin />\n            <CustomIconPlugin />\n            <Emojis />\n            <FontAwesomeIcons />\n        </>\n    );\n};\n"],"names":["base","createConfigurableComponent","IconPickerConfig","Object","IconPack","IconType","IconPickerWithConfig","IconPickerConfigProvider","createProvider","Original","children","IconPackProvider","name","loader","useIconPickerConfig","config","iconPackProviders","useMemo","provider","DefaultIcons","SimpleIconPlugin","EmojiPlugin","CustomIconPlugin","Emojis","FontAwesomeIcons"],"mappings":";;;;;;;;;;AAYA,MAAMA,OAAOC,4BAA8C;AAEpD,MAAMC,mBAAmBC,OAAO,MAAM,CAACH,KAAK,MAAM,EAAE;IAAEI,UAAQA;IAAEC,UAAQA;AAAC;AACzE,MAAMC,uBAAuBN,KAAK,UAAU;AAE5C,MAAMO,kCAA2BC,eAAeC,CAAAA,WAC5C,SAAkC,EAAEC,QAAQ,EAAE;QACjD,OAAO,WAAP,GACI,oBAACJ,sBAAoBA,MAAAA,WAAAA,GACjB,oBAACG,UAAAA,MAAUC;IAGvB;AA0BJ,MAAMC;IAIF,YAAYC,IAAY,EAAEC,MAAsB,CAAE;QAC9C,IAAI,CAAC,IAAI,GAAGD;QACZ,IAAI,CAAC,MAAM,GAAGC;IAClB;IAEA,WAA4B;QACxB,OAAO,IAAI,CAAC,MAAM;IACtB;AACJ;AAEO,SAASC;IACZ,MAAMC,SAASf,KAAK,SAAS;IAE7B,MAAMgB,oBAAoBD,OAAO,iBAAiB,IAAI,EAAE;IAExD,OAAOE,QACH,IAAO;YACH,WAAWF,OAAO,SAAS,IAAI,EAAE;YACjC,mBAAmBC,kBAAkB,GAAG,CACpCE,CAAAA,WAAY,IAAIP,wBAAiBO,SAAS,IAAI,EAAEA,SAAS,IAAI;QAErE,IACA;QAACH;KAAO;AAEhB;AAEO,MAAMI,eAAe,IACjB,WAAP,GACI,wDACI,oBAACC,kBAAgBA,OAAAA,WAAAA,GACjB,oBAACC,aAAWA,OAAAA,WAAAA,GACZ,oBAACC,kBAAgBA,OAAAA,WAAAA,GACjB,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,kBAAgBA"}

package/components/IconPicker/defaultIcon.js

@@ -1,8 +1,9 @@
-export const defaultIcon = {
-  type: "icon",
-  name: "regular_star",
-  value: '<path fill="currentColor" d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3l153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4L459.8 484c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6l68.6-141.3C270.4 5.2 278.7 0 287.9 0zm0 79l-52.5 108.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9l85.9 85.1c5.5 5.5 8.1 13.3 6.8 21l-20.3 119.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2l-20.2-119.6c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1l-118.3-17.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/>',
-  width: 576
+const defaultIcon = {
+    type: "icon",
+    name: "regular_star",
+    value: '<path fill="currentColor" d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3l153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4L459.8 484c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6l68.6-141.3C270.4 5.2 278.7 0 287.9 0zm0 79l-52.5 108.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9l85.9 85.1c5.5 5.5 8.1 13.3 6.8 21l-20.3 119.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2l-20.2-119.6c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1l-118.3-17.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/>',
+    width: 576
 };
+export { defaultIcon };
 
 //# sourceMappingURL=defaultIcon.js.map

package/components/IconPicker/defaultIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultIcon","type","name","value","width"],"sources":["defaultIcon.ts"],"sourcesContent":["export const defaultIcon = {\n    type: \"icon\",\n    name: \"regular_star\",\n    value: '<path fill=\"currentColor\" d=\"M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3l153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4L459.8 484c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6l68.6-141.3C270.4 5.2 278.7 0 287.9 0zm0 79l-52.5 108.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9l85.9 85.1c5.5 5.5 8.1 13.3 6.8 21l-20.3 119.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2l-20.2-119.6c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1l-118.3-17.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z\"/>',\n    width: 576\n};\n"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAG;EACvBC,IAAI,EAAE,MAAM;EACZC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,+mBAA+mB;EACtnBC,KAAK,EAAE;AACX,CAAC","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/defaultIcon.js","sources":["../../../src/components/IconPicker/defaultIcon.ts"],"sourcesContent":["export const defaultIcon = {\n    type: \"icon\",\n    name: \"regular_star\",\n    value: '<path fill=\"currentColor\" d=\"M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3l153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4L459.8 484c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6l68.6-141.3C270.4 5.2 278.7 0 287.9 0zm0 79l-52.5 108.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9l85.9 85.1c5.5 5.5 8.1 13.3 6.8 21l-20.3 119.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2l-20.2-119.6c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1l-118.3-17.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z\"/>',\n    width: 576\n};\n"],"names":["defaultIcon"],"mappings":"AAAO,MAAMA,cAAc;IACvB,MAAM;IACN,MAAM;IACN,OAAO;IACP,OAAO;AACX"}

package/components/IconPicker/index.js

@@ -4,5 +4,3 @@ export { useIcon } from "./IconRenderer.js";
 export { useIconPicker } from "./IconPickerPresenterProvider.js";
 export { useIconType } from "./config/IconType.js";
 export { defaultIcon } from "./defaultIcon.js";
-
-//# sourceMappingURL=index.js.map

package/components/IconPicker/plugins/customPlugin.js

@@ -1,127 +1,89 @@
-import React from "react";
-import { useApolloClient } from "@apollo/react-hooks";
+import react from "react";
 import { observer } from "mobx-react-lite";
 import { Button } from "@webiny/admin-ui";
+import { useFeature } from "@webiny/app";
 import { FileManager } from "../../../base/ui/FileManager.js";
 import { IconPickerTab } from "../IconPickerTab.js";
 import { useIcon } from "../index.js";
 import { useIconPicker } from "../IconPickerPresenterProvider.js";
 import { IconPickerConfig } from "../config/index.js";
-import { LIST_CUSTOM_ICONS } from "./graphql.js";
-/**
- * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
- * This is crucial for serializing component rendering into a string value as plain HTML,
- * which is necessary for usage in the website application. Please use inline styles here
- * to ensure proper serialization.
- */
-
-const CustomIcon = () => {
-  const {
-    icon,
-    size
-  } = useIcon();
-  return /*#__PURE__*/React.createElement("img", {
-    width: size,
-    height: size,
-    src: icon.value,
-    alt: icon.name,
-    style: {
-      verticalAlign: "middle"
-    }
-  });
-};
-const IconFilePicker = ({
-  onUpload,
-  onChange
-}) => {
-  return /*#__PURE__*/React.createElement(FileManager, {
-    onUploadCompletion: ([file]) => {
-      onUpload(file);
-    },
-    onChange: onChange,
-    scope: "scope:iconPicker",
-    accept: ["image/svg+xml"],
-    render: ({
-      showFileManager
-    }) => /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Browse",
-      onClick: () => {
-        showFileManager();
-      }
-    })
-  });
+import { CustomIconsPresenterFeature } from "../../../presentation/iconPicker/customIcons/feature.js";
+const CustomIcon = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("img", {
+        width: size,
+        height: size,
+        src: icon.value,
+        alt: icon.name,
+        style: {
+            verticalAlign: "middle"
+        }
+    });
 };
-const CustomIconTab = observer(() => {
-  const presenter = useIconPicker();
-  const onIconSelect = icon => {
-    presenter.setIcon(icon);
-    presenter.closeMenu();
-  };
-  const onIconFileSelect = file => {
-    presenter.setIcon({
-      type: "custom",
-      name: file.name,
-      value: file.src
+const IconFilePicker = ({ onUpload, onChange })=>/*#__PURE__*/ react.createElement(FileManager, {
+        onUploadCompletion: ([file])=>{
+            onUpload(file);
+        },
+        onChange: onChange,
+        scope: "scope:iconPicker",
+        accept: [
+            "image/svg+xml"
+        ],
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Browse",
+                onClick: ()=>{
+                    showFileManager();
+                }
+            })
     });
-    presenter.closeMenu();
-  };
-  const onIconFileUpload = file => {
-    const icon = {
-      type: "custom",
-      name: file.name,
-      value: file.src
+const CustomIconTab = observer(()=>{
+    const presenter = useIconPicker();
+    const onIconSelect = (icon)=>{
+        presenter.setIcon(icon);
+        presenter.closeMenu();
     };
-    presenter.addIcon(icon);
-    presenter.setIcon(icon);
-    presenter.closeMenu();
-  };
-  return /*#__PURE__*/React.createElement(IconPickerTab, {
-    value: "custom",
-    label: "Custom",
-    onChange: onIconSelect,
-    actions: /*#__PURE__*/React.createElement(IconFilePicker, {
-      onChange: onIconFileSelect,
-      onUpload: onIconFileUpload
-    })
-  });
+    const onIconFileSelect = (file)=>{
+        presenter.setIcon({
+            type: "custom",
+            name: file.name,
+            value: file.src
+        });
+        presenter.closeMenu();
+    };
+    const onIconFileUpload = (file)=>{
+        const icon = {
+            type: "custom",
+            name: file.name,
+            value: file.src
+        };
+        presenter.addIcon(icon);
+        presenter.setIcon(icon);
+        presenter.closeMenu();
+    };
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "custom",
+        label: "Custom",
+        onChange: onIconSelect,
+        actions: /*#__PURE__*/ react.createElement(IconFilePicker, {
+            onChange: onIconFileSelect,
+            onUpload: onIconFileUpload
+        })
+    });
 });
-export const CustomIconPlugin = () => {
-  const client = useApolloClient();
-  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconPack, {
-    name: "custom",
-    provider: async () => {
-      const {
-        data: response
-      } = await client.query({
-        query: LIST_CUSTOM_ICONS,
-        variables: {
-          limit: 10000
-        }
-      });
-      if (!response) {
-        throw new Error("Network error while listing custom icons.");
-      }
-      const {
-        data,
-        error
-      } = response.fileManager.listFiles;
-      if (!data) {
-        throw new Error(error?.message || "Could not fetch custom icons.");
-      }
-      return data.map(customIcon => ({
-        type: "custom",
-        name: customIcon.name,
-        value: customIcon.src
-      }));
-    }
-  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
-    name: "custom"
-  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
-    element: /*#__PURE__*/React.createElement(CustomIcon, null)
-  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
-    element: /*#__PURE__*/React.createElement(CustomIconTab, null)
-  })));
+const CustomIconPlugin = ()=>{
+    const { presenter } = useFeature(CustomIconsPresenterFeature);
+    return /*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconPack, {
+        name: "custom",
+        provider: ()=>presenter.load()
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "custom"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(CustomIcon, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(CustomIconTab, null)
+    })));
 };
+export { CustomIconPlugin };
 
 //# sourceMappingURL=customPlugin.js.map

package/components/IconPicker/plugins/customPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useApolloClient","observer","Button","FileManager","IconPickerTab","useIcon","useIconPicker","IconPickerConfig","LIST_CUSTOM_ICONS","CustomIcon","icon","size","createElement","width","height","src","value","alt","name","style","verticalAlign","IconFilePicker","onUpload","onChange","onUploadCompletion","file","scope","accept","render","showFileManager","variant","text","onClick","CustomIconTab","presenter","onIconSelect","setIcon","closeMenu","onIconFileSelect","type","onIconFileUpload","addIcon","label","actions","CustomIconPlugin","client","IconPack","provider","data","response","query","variables","limit","Error","error","fileManager","listFiles","message","map","customIcon","IconType","Icon","element","Tab"],"sources":["customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIcon } from \"../index.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { ListCustomIconsQueryResponse } from \"./graphql.js\";\nimport { LIST_CUSTOM_ICONS } from \"./graphql.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n            render={({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        ></FileManager>\n    );\n};\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        presenter.setIcon({\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const icon = {\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const client = useApolloClient();\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack\n                name=\"custom\"\n                provider={async () => {\n                    const { data: response } = await client.query<ListCustomIconsQueryResponse>({\n                        query: LIST_CUSTOM_ICONS,\n                        variables: {\n                            limit: 10000\n                        }\n                    });\n\n                    if (!response) {\n                        throw new Error(\"Network error while listing custom icons.\");\n                    }\n\n                    const { data, error } = response.fileManager.listFiles;\n\n                    if (!data) {\n                        throw new Error(error?.message || \"Could not fetch custom icons.\");\n                    }\n\n                    return data.map(customIcon => ({\n                        type: \"custom\",\n                        name: customIcon.name,\n                        value: customIcon.src\n                    }));\n                }}\n            />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/plugins/customPlugin.js","sources":["../../../../src/components/IconPicker/plugins/customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIcon } from \"../index.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport { CustomIconsPresenterFeature } from \"~/presentation/iconPicker/customIcons/feature.js\";\nimport type { Icon } from \"../types.js\";\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n            render={({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        ></FileManager>\n    );\n};\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        presenter.setIcon({\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const icon = {\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const { presenter } = useFeature(CustomIconsPresenterFeature);\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack name=\"custom\" provider={() => presenter.load()} />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["CustomIcon","icon","size","useIcon","IconFilePicker","onUpload","onChange","FileManager","file","showFileManager","Button","CustomIconTab","observer","presenter","useIconPicker","onIconSelect","onIconFileSelect","onIconFileUpload","IconPickerTab","CustomIconPlugin","useFeature","CustomIconsPresenterFeature","IconPickerConfig"],"mappings":";;;;;;;;;;AAaA,MAAMA,aAAa;IACf,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAOD;QACP,QAAQA;QACR,KAAKD,KAAK,KAAK;QACf,KAAKA,KAAK,IAAI;QACd,OAAO;YACH,eAAe;QACnB;;AAGZ;AAOA,MAAMG,iBAAiB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAuB,GACxD,WAAP,GACI,oBAACC,aAAWA;QACR,oBAAoB,CAAC,CAACC,KAAK;YACvBH,SAASG;QACb;QACA,UAAUF;QACV,OAAM;QACN,QAAQ;YAAC;SAAgB;QACzB,QAAQ,CAAC,EAAEG,eAAe,EAAE,iBACxB,oBAACC,QAAMA;gBACH,SAAS;gBACT,MAAM;gBACN,SAAS;oBACLD;gBACJ;;;AAOpB,MAAME,gBAAgBC,SAAS;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,eAAe,CAACd;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,MAAMG,mBAAmB,CAACR;QACtBK,UAAU,OAAO,CAAC;YACd,MAAM;YACN,MAAML,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QACAK,UAAU,SAAS;IACvB;IAEA,MAAMI,mBAAmB,CAACT;QACtB,MAAMP,OAAO;YACT,MAAM;YACN,MAAMO,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QAEAK,UAAU,OAAO,CAACZ;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,OAAO,WAAP,GACI,oBAACK,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUH;QACV,uBAAS,oBAACX,gBAAcA;YAAC,UAAUY;YAAkB,UAAUC;;;AAG3E;AAEO,MAAME,mBAAmB;IAC5B,MAAM,EAAEN,SAAS,EAAE,GAAGO,WAAWC;IAEjC,OAAO,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAK;QAAS,UAAU,IAAMT,UAAU,IAAI;sBACvE,oBAACS,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACtB,YAAUA;sBACpD,oBAACsB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACX,eAAaA;;AAItE"}

package/components/IconPicker/plugins/emojisPlugin.js

@@ -1,127 +1,102 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { cn, PopoverPrimitive } from "@webiny/admin-ui";
+import { PopoverPrimitive, cn } from "@webiny/admin-ui";
 import { useIcon } from "../index.js";
 import { IconPickerTab } from "../IconPickerTab.js";
 import { IconProvider } from "../IconRenderer.js";
 import { useIconPicker } from "../IconPickerPresenterProvider.js";
 import { IconPickerConfig } from "../config/index.js";
-const SKIN_TONES = ["", "\u{1f3fb}", "\u{1f3fc}", "\u{1f3fd}", "\u{1f3fe}", "\u{1f3ff}"];
-const SkinToneSelectWrapper = props => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn("size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center")
-  }, props.children);
+const SKIN_TONES = [
+    "",
+    "\uD83C\uDFFB",
+    "\uD83C\uDFFC",
+    "\uD83C\uDFFD",
+    "\uD83C\uDFFE",
+    "\uD83C\uDFFF"
+];
+const SkinToneSelectWrapper = (props)=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center")
+    }, props.children);
+const Emoji = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "inline-block",
+            width: `${size}px`,
+            height: `${size}px`,
+            fontSize: `${4 * size / 5}px`,
+            lineHeight: `${size}px`,
+            color: "black"
+        }
+    }, icon.skinTone ? icon.value + icon.skinTone : icon.value);
 };
-
-/**
- * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
- * This is crucial for serializing component rendering into a string value as plain HTML,
- * which is necessary for usage in the website application. Please use inline styles here
- * to ensure proper serialization.
- */
-
-const Emoji = () => {
-  const {
-    icon,
-    size
-  } = useIcon();
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "inline-block",
-      width: `${size}px`,
-      height: `${size}px`,
-      fontSize: `${size * 4 / 5}px`,
-      lineHeight: `${size}px`,
-      color: "black"
-    }
-  }, icon.skinTone ? icon.value + icon.skinTone : icon.value);
+const SkinToneSelect = ({ icon, hasSkinToneSupport, onChange })=>{
+    const [open, setOpen] = useState(false);
+    if (!icon || !isEmoji(icon)) return /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null);
+    if (!hasSkinToneSupport) return /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon,
+        size: 24
+    }, /*#__PURE__*/ react.createElement(Emoji, null)));
+    return /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: (open)=>setOpen(open)
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
+        className: "outline-none"
+    }, /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon,
+        size: 24
+    }, /*#__PURE__*/ react.createElement(Emoji, null)))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-base grid gap-xs p-xs text-center"
+    }, SKIN_TONES.map((skinTone, index)=>/*#__PURE__*/ react.createElement("div", {
+            key: index,
+            onClick: ()=>{
+                onChange(skinTone);
+            },
+            className: "cursor-pointer"
+        }, /*#__PURE__*/ react.createElement(IconProvider, {
+            icon: {
+                ...icon,
+                skinTone
+            },
+            size: 24
+        }, /*#__PURE__*/ react.createElement(Emoji, null)))))));
 };
-const SkinToneSelect = ({
-  icon,
-  hasSkinToneSupport,
-  onChange
-}) => {
-  const [open, setOpen] = useState(false);
-  if (!icon || !isEmoji(icon)) {
-    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null);
-  }
-  if (!hasSkinToneSupport) {
-    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
-      icon: icon,
-      size: 24
-    }, /*#__PURE__*/React.createElement(Emoji, null)));
-  }
-  return /*#__PURE__*/React.createElement(PopoverPrimitive, {
-    open: open,
-    onOpenChange: open => setOpen(open)
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
-    className: "outline-none"
-  }, /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
-    icon: icon,
-    size: 24
-  }, /*#__PURE__*/React.createElement(Emoji, null)))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-base grid gap-xs p-xs text-center"
-  }, SKIN_TONES.map((skinTone, index) => /*#__PURE__*/React.createElement("div", {
-    key: index,
-    onClick: () => {
-      onChange(skinTone);
-    },
-    className: "cursor-pointer"
-  }, /*#__PURE__*/React.createElement(IconProvider, {
-    icon: {
-      ...icon,
-      skinTone
-    },
-    size: 24
-  }, /*#__PURE__*/React.createElement(Emoji, null)))))));
+const isEmoji = (icon)=>{
+    if (!icon) return false;
+    return "emoji" === icon.type;
 };
-
-/**
- * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
- */
-const isEmoji = icon => {
-  if (!icon) {
-    return false;
-  }
-  return icon.type === "emoji";
-};
-const EmojiTab = observer(() => {
-  const presenter = useIconPicker();
-  const {
-    selectedIcon
-  } = presenter.vm;
-  const onSkinToneChange = skinTone => {
-    if (isEmoji(selectedIcon)) {
-      presenter.setIcon({
-        ...selectedIcon,
-        skinTone
-      });
-    }
-  };
-  const onIconSelect = icon => {
-    presenter.setIcon(icon);
-    presenter.closeMenu();
-  };
-  const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
-  return /*#__PURE__*/React.createElement(IconPickerTab, {
-    value: "emoji",
-    label: "Emojis",
-    onChange: onIconSelect,
-    actions: /*#__PURE__*/React.createElement(SkinToneSelect, {
-      icon: selectedIcon,
-      hasSkinToneSupport: hasSkinToneSupport,
-      onChange: onSkinToneChange
-    })
-  });
+const EmojiTab = observer(()=>{
+    const presenter = useIconPicker();
+    const { selectedIcon } = presenter.vm;
+    const onSkinToneChange = (skinTone)=>{
+        if (isEmoji(selectedIcon)) presenter.setIcon({
+            ...selectedIcon,
+            skinTone
+        });
+    };
+    const onIconSelect = (icon)=>{
+        presenter.setIcon(icon);
+        presenter.closeMenu();
+    };
+    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "emoji",
+        label: "Emojis",
+        onChange: onIconSelect,
+        actions: /*#__PURE__*/ react.createElement(SkinToneSelect, {
+            icon: selectedIcon,
+            hasSkinToneSupport: hasSkinToneSupport,
+            onChange: onSkinToneChange
+        })
+    });
 });
-export const EmojiPlugin = () => {
-  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
-    name: "emoji"
-  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
-    element: /*#__PURE__*/React.createElement(Emoji, null)
-  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
-    element: /*#__PURE__*/React.createElement(EmojiTab, null)
-  })));
-};
+const EmojiPlugin = ()=>/*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "emoji"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(Emoji, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(EmojiTab, null)
+    })));
+export { EmojiPlugin };
 
 //# sourceMappingURL=emojisPlugin.js.map