@webiny/app-admin 0.0.0-unstable.b14eaecf38 → 0.0.0-unstable.b6d7105cee

package/components/IconPicker/config/IconType.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export type IconTypeProps = {
+    name: string;
+    before?: string;
+    after?: string;
+    remove?: boolean;
+    children?: React.ReactNode;
+};
+interface IconTypeContext {
+    type: string;
+}
+declare const IconTypeContext: React.Context<IconTypeContext | undefined>;
+interface IconTypeProviderProps {
+    type: string;
+    children: React.ReactNode;
+}
+export declare const IconTypeProvider: ({ type, children }: IconTypeProviderProps) => React.JSX.Element;
+export declare function useIconType(): IconTypeContext;
+export interface IconType extends React.FC<IconTypeProps> {
+    Icon: typeof Icon;
+    Tab: typeof Tab;
+}
+export declare const IconType: IconType;
+export type IconProps = {
+    element: React.ReactElement;
+};
+export declare const Icon: ({ element }: IconProps) => React.JSX.Element;
+export type TabProps = {
+    element: React.ReactElement;
+};
+export declare const Tab: ({ element }: TabProps) => React.JSX.Element;
+export {};

package/components/IconPicker/config/IconType.js

@@ -0,0 +1,57 @@
+import react from "react";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+import { IconRenderer as external_IconRenderer_js_IconRenderer, useIcon } from "../IconRenderer.js";
+import { IconPickerTabRenderer as external_IconPickerTab_js_IconPickerTabRenderer } from "../IconPickerTab.js";
+const IconTypeContext = /*#__PURE__*/ react.createContext(void 0);
+const IconTypeProvider = ({ type, children })=>/*#__PURE__*/ react.createElement(IconTypeContext.Provider, {
+        value: {
+            type
+        }
+    }, children);
+function useIconType() {
+    const context = react.useContext(IconTypeContext);
+    if (!context) throw Error("Missing <IconTypeProvider> in the component tree!");
+    return context;
+}
+const IconType = ({ name, before, after, remove = false, children })=>{
+    const getId = useIdGenerator("iconType");
+    const placeBefore = void 0 !== before ? getId(before) : void 0;
+    const placeAfter = void 0 !== after ? getId(after) : void 0;
+    return /*#__PURE__*/ react.createElement(IconTypeProvider, {
+        type: name
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name),
+        name: "iconTypes",
+        before: placeBefore,
+        after: placeAfter,
+        remove: remove,
+        array: true
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: getId(name, "name"),
+        name: "name",
+        value: name
+    }), children));
+};
+const Icon = ({ element })=>{
+    const { type: configType } = useIconType();
+    const IconDecorator = external_IconRenderer_js_IconRenderer.createDecorator((Original)=>function() {
+            const { icon } = useIcon();
+            if (icon.type !== configType) return /*#__PURE__*/ react.createElement(Original, null);
+            return element;
+        });
+    return /*#__PURE__*/ react.createElement(IconDecorator, null);
+};
+const Tab = ({ element })=>{
+    const { type: configType } = useIconType();
+    const IconPickerTabDecorator = external_IconPickerTab_js_IconPickerTabRenderer.createDecorator((Original)=>function() {
+            const { type } = useIconType();
+            if (type !== configType) return /*#__PURE__*/ react.createElement(Original, null);
+            return /*#__PURE__*/ react.createElement(react.Fragment, null, element);
+        });
+    return /*#__PURE__*/ react.createElement(IconPickerTabDecorator, null);
+};
+IconType.Icon = Icon;
+IconType.Tab = Tab;
+export { Icon, IconType, IconTypeProvider, Tab, useIconType };
+
+//# sourceMappingURL=IconType.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/config/IconType.js","sources":["../../../../src/components/IconPicker/config/IconType.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\n\nimport { IconRenderer, useIcon } from \"../IconRenderer.js\";\nimport { IconPickerTabRenderer } from \"../IconPickerTab.js\";\n\nexport type IconTypeProps = {\n    name: string;\n    before?: string;\n    after?: string;\n    remove?: boolean;\n    children?: React.ReactNode;\n};\n\ninterface IconTypeContext {\n    type: string;\n}\n\nconst IconTypeContext = React.createContext<IconTypeContext | undefined>(undefined);\n\ninterface IconTypeProviderProps {\n    type: string;\n    children: React.ReactNode;\n}\n\nexport const IconTypeProvider = ({ type, children }: IconTypeProviderProps) => {\n    return <IconTypeContext.Provider value={{ type }}>{children}</IconTypeContext.Provider>;\n};\n\nexport function useIconType() {\n    const context = React.useContext(IconTypeContext);\n    if (!context) {\n        throw Error(`Missing <IconTypeProvider> in the component tree!`);\n    }\n    return context;\n}\n\nexport interface IconType extends React.FC<IconTypeProps> {\n    Icon: typeof Icon;\n    Tab: typeof Tab;\n}\n\nexport const IconType: IconType = ({\n    name,\n    before = undefined,\n    after = undefined,\n    remove = false,\n    children\n}) => {\n    const getId = useIdGenerator(\"iconType\");\n\n    const placeBefore = before !== undefined ? getId(before) : undefined;\n    const placeAfter = after !== undefined ? getId(after) : undefined;\n\n    return (\n        <IconTypeProvider type={name}>\n            <Property\n                id={getId(name)}\n                name={\"iconTypes\"}\n                before={placeBefore}\n                after={placeAfter}\n                remove={remove}\n                array={true}\n            >\n                <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n                {children}\n            </Property>\n        </IconTypeProvider>\n    );\n};\n\nexport type IconProps = {\n    element: React.ReactElement;\n};\n\nexport const Icon = ({ element }: IconProps) => {\n    const { type: configType } = useIconType();\n\n    const IconDecorator = IconRenderer.createDecorator(Original => {\n        return function IconRenderer() {\n            const { icon } = useIcon();\n\n            if (icon.type !== configType) {\n                return <Original />;\n            }\n\n            return element;\n        };\n    });\n\n    return <IconDecorator />;\n};\n\nexport type TabProps = {\n    element: React.ReactElement;\n};\n\nexport const Tab = ({ element }: TabProps) => {\n    const { type: configType } = useIconType();\n\n    const IconPickerTabDecorator = IconPickerTabRenderer.createDecorator(Original => {\n        return function IconPickerTabRenderer() {\n            const { type } = useIconType();\n\n            if (type !== configType) {\n                return <Original />;\n            }\n\n            return <>{element}</>;\n        };\n    });\n\n    return <IconPickerTabDecorator />;\n};\n\nIconType.Icon = Icon;\nIconType.Tab = Tab;\n"],"names":["IconTypeContext","React","undefined","IconTypeProvider","type","children","useIconType","context","Error","IconType","name","before","after","remove","getId","useIdGenerator","placeBefore","placeAfter","Property","Icon","element","configType","IconDecorator","IconRenderer","Original","icon","useIcon","Tab","IconPickerTabDecorator","IconPickerTabRenderer"],"mappings":";;;;AAmBA,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,aAAmB,CAA8BC;AAOlE,MAAMC,mBAAmB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAyB,GAC/D,WAAP,GAAO,oBAACL,gBAAgB,QAAQ;QAAC,OAAO;YAAEI;QAAK;OAAIC;AAGhD,SAASC;IACZ,MAAMC,UAAUN,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACO,SACD,MAAMC,MAAM;IAEhB,OAAOD;AACX;AAOO,MAAME,WAAqB,CAAC,EAC/BC,IAAI,EACJC,MAAkB,EAClBC,KAAiB,EACjBC,SAAS,KAAK,EACdR,QAAQ,EACX;IACG,MAAMS,QAAQC,eAAe;IAE7B,MAAMC,cAAcL,AAAWT,WAAXS,SAAuBG,MAAMH,UAAUT;IAC3D,MAAMe,aAAaL,AAAUV,WAAVU,QAAsBE,MAAMF,SAASV;IAExD,OAAO,WAAP,GACI,oBAACC,kBAAgBA;QAAC,MAAMO;qBACpB,oBAACQ,UAAQA;QACL,IAAIJ,MAAMJ;QACV,MAAM;QACN,QAAQM;QACR,OAAOC;QACP,QAAQJ;QACR,OAAO;qBAEP,oBAACK,UAAQA;QAAC,IAAIJ,MAAMJ,MAAM;QAAS,MAAM;QAAQ,OAAOA;QACvDL;AAIjB;AAMO,MAAMc,OAAO,CAAC,EAAEC,OAAO,EAAa;IACvC,MAAM,EAAE,MAAMC,UAAU,EAAE,GAAGf;IAE7B,MAAMgB,gBAAgBC,sCAAAA,eAA4B,CAACC,CAAAA,WACxC;YACH,MAAM,EAAEC,IAAI,EAAE,GAAGC;YAEjB,IAAID,KAAK,IAAI,KAAKJ,YACd,OAAO,WAAP,GAAO,oBAACG,UAAAA;YAGZ,OAAOJ;QACX;IAGJ,OAAO,WAAP,GAAO,oBAACE,eAAAA;AACZ;AAMO,MAAMK,MAAM,CAAC,EAAEP,OAAO,EAAY;IACrC,MAAM,EAAE,MAAMC,UAAU,EAAE,GAAGf;IAE7B,MAAMsB,yBAAyBC,gDAAAA,eAAqC,CAACL,CAAAA,WAC1D;YACH,MAAM,EAAEpB,IAAI,EAAE,GAAGE;YAEjB,IAAIF,SAASiB,YACT,OAAO,WAAP,GAAO,oBAACG,UAAAA;YAGZ,OAAO,WAAP,GAAO,0CAAGJ;QACd;IAGJ,OAAO,WAAP,GAAO,oBAACQ,wBAAAA;AACZ;AAEAnB,SAAS,IAAI,GAAGU;AAChBV,SAAS,GAAG,GAAGkB"}

package/components/IconPicker/config/index.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { IconPackProvider as IconPack } from "./IconPackProvider.js";
+import { IconType } from "./IconType.js";
+import type { Icon } from "../types.js";
+export declare const IconPickerConfig: (({ priority, children }: import("@webiny/react-properties").ConfigProps) => React.JSX.Element) & {
+    IconPack: typeof IconPack;
+    IconType: IconType;
+};
+export declare const IconPickerWithConfig: ({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => React.JSX.Element;
+export declare const IconPickerConfigProvider: import("@webiny/app").Decorator<import("@webiny/app").GenericComponent<import("@webiny/app").ChildrenProps>>;
+export interface IconPackLoader {
+    (): Promise<Icon[]>;
+}
+interface IconTypeInterface {
+    name: string;
+}
+export type { IconTypeInterface as IconType };
+export interface IconPackProviderInterface {
+    name: string;
+    getIcons(): Promise<Icon[]>;
+}
+declare class IconPackProvider implements IconPackProviderInterface {
+    readonly name: string;
+    private readonly loader;
+    constructor(name: string, loader: IconPackLoader);
+    getIcons(): Promise<Icon[]>;
+}
+export declare function useIconPickerConfig(): {
+    iconTypes: IconTypeInterface[];
+    iconPackProviders: IconPackProvider[];
+};
+export declare const DefaultIcons: () => React.JSX.Element;

package/components/IconPicker/config/index.js

@@ -0,0 +1,42 @@
+import react, { useMemo } from "react";
+import { createConfigurableComponent } from "@webiny/react-properties";
+import { IconPackProvider } from "./IconPackProvider.js";
+import { IconType } from "./IconType.js";
+import { SimpleIconPlugin } from "../plugins/iconsPlugin.js";
+import { EmojiPlugin } from "../plugins/emojisPlugin.js";
+import { CustomIconPlugin } from "../plugins/customPlugin.js";
+import { createProvider } from "@webiny/app";
+import { Emojis } from "./Emojis.js";
+import { FontAwesomeIcons } from "./FontAwesomeIcons.js";
+const base = createConfigurableComponent("IconPicker");
+const IconPickerConfig = Object.assign(base.Config, {
+    IconPack: IconPackProvider,
+    IconType: IconType
+});
+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();
+    }
+}
+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
+    ]);
+}
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,6 @@
+export declare const defaultIcon: {
+    type: string;
+    name: string;
+    value: string;
+    width: number;
+};

package/components/IconPicker/defaultIcon.js

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,7 @@
+export { IconPicker } from "./IconPicker.js";
+export { IconPickerConfig } from "./config/index.js";
+export { useIcon } from "./IconRenderer.js";
+export { useIconPicker } from "./IconPickerPresenterProvider.js";
+export { useIconType } from "./config/IconType.js";
+export { defaultIcon } from "./defaultIcon.js";
+export type { Icon } from "./types.js";

package/components/IconPicker/index.js

@@ -0,0 +1,6 @@
+export { IconPicker } from "./IconPicker.js";
+export { IconPickerConfig } from "./config/index.js";
+export { useIcon } from "./IconRenderer.js";
+export { useIconPicker } from "./IconPickerPresenterProvider.js";
+export { useIconType } from "./config/IconType.js";
+export { defaultIcon } from "./defaultIcon.js";

package/components/IconPicker/plugins/customPlugin.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CustomIconPlugin: () => React.JSX.Element;

package/components/IconPicker/plugins/customPlugin.js

@@ -0,0 +1,104 @@
+import react from "react";
+import { useApolloClient } from "@apollo/react-hooks";
+import { observer } from "mobx-react-lite";
+import { Button } from "@webiny/admin-ui";
+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";
+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 })=>/*#__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();
+                }
+            })
+    });
+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
+        });
+        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
+        })
+    });
+});
+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)
+    })));
+};
+export { CustomIconPlugin };
+
+//# sourceMappingURL=customPlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/plugins/customPlugin.js","sources":["../../../../src/components/IconPicker/plugins/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"],"names":["CustomIcon","icon","size","useIcon","IconFilePicker","onUpload","onChange","FileManager","file","showFileManager","Button","CustomIconTab","observer","presenter","useIconPicker","onIconSelect","onIconFileSelect","onIconFileUpload","IconPickerTab","CustomIconPlugin","client","useApolloClient","IconPickerConfig","response","LIST_CUSTOM_ICONS","Error","data","error","customIcon"],"mappings":";;;;;;;;;;AAqBA,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,MAAMC,SAASC;IAEf,OAAO,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QACtB,MAAK;QACL,UAAU;YACN,MAAM,EAAE,MAAMC,QAAQ,EAAE,GAAG,MAAMH,OAAO,KAAK,CAA+B;gBACxE,OAAOI;gBACP,WAAW;oBACP,OAAO;gBACX;YACJ;YAEA,IAAI,CAACD,UACD,MAAM,IAAIE,MAAM;YAGpB,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ,SAAS,WAAW,CAAC,SAAS;YAEtD,IAAI,CAACG,MACD,MAAM,IAAID,MAAME,OAAO,WAAW;YAGtC,OAAOD,KAAK,GAAG,CAACE,CAAAA,aAAe;oBAC3B,MAAM;oBACN,MAAMA,WAAW,IAAI;oBACrB,OAAOA,WAAW,GAAG;gBACzB;QACJ;sBAEJ,oBAACN,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.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const EmojiPlugin: () => React.JSX.Element;

package/components/IconPicker/plugins/emojisPlugin.js

@@ -0,0 +1,102 @@
+import react, { useState } from "react";
+import { observer } from "mobx-react-lite";
+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 = [
+    "",
+    "\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);
+};
+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;
+};
+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 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/plugins/emojisPlugin.js","sources":["../../../../src/components/IconPicker/plugins/emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { IconProvider } from \"../IconRenderer.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\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\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"bg-neutral-base grid gap-xs p-xs text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["SKIN_TONES","SkinToneSelectWrapper","props","cn","Emoji","icon","size","useIcon","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","useState","isEmoji","IconProvider","PopoverPrimitive","skinTone","index","EmojiTab","observer","presenter","useIconPicker","selectedIcon","onSkinToneChange","onIconSelect","IconPickerTab","EmojiPlugin","IconPickerConfig"],"mappings":";;;;;;;;AAUA,MAAMA,aAAa;IAAC;IAAI;IAAa;IAAa;IAAa;IAAa;CAAY;AAExF,MAAMC,wBAAwB,CAACC,QACpB,WAAP,GACI,oBAAC;QACG,WAAWC,GACP;OAGHD,MAAM,QAAQ;AAiB3B,MAAME,QAAQ;IACV,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,OAAO,GAAGD,KAAK,EAAE,CAAC;YAClB,QAAQ,GAAGA,KAAK,EAAE,CAAC;YACnB,UAAU,GAAIA,AAAO,IAAPA,OAAY,EAAE,EAAE,CAAC;YAC/B,YAAY,GAAGA,KAAK,EAAE,CAAC;YACvB,OAAO;QACX;OAECD,KAAK,QAAQ,GAAGA,KAAK,KAAK,GAAGA,KAAK,QAAQ,GAAGA,KAAK,KAAK;AAGpE;AAQA,MAAMG,iBAAiB,CAAC,EAAEH,IAAI,EAAEI,kBAAkB,EAAEC,QAAQ,EAAuB;IAC/E,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,IAAI,CAACR,QAAQ,CAACS,QAAQT,OAClB,OAAO,WAAP,GAAO,oBAACJ,uBAAqBA;IAGjC,IAAI,CAACQ,oBACD,OAAO,WAAP,GACI,oBAACR,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACc,cAAYA;QAAC,MAAMV;QAAM,MAAM;qBAC5B,oBAACD,OAAKA;IAMtB,OAAO,WAAP,GACI,oBAACY,kBAAgBA;QAAC,MAAML;QAAM,cAAcA,CAAAA,OAAQC,QAAQD;qBACxD,oBAACK,iBAAiB,OAAO;QAAC,WAAW;qBACjC,oBAACf,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACc,cAAYA;QAAC,MAAMV;QAAM,MAAM;qBAC5B,oBAACD,OAAKA,UAAAA,WAAAA,GAIlB,oBAACY,iBAAiB,OAAO,sBACrB,oBAAC;QAAI,WAAW;OACXhB,WAAW,GAAG,CAAC,CAACiB,UAAUC,QAAAA,WAAAA,GACvB,oBAAC;YACG,KAAKA;YACL,SAAS;gBACLR,SAASO;YACb;YACA,WAAW;yBAEX,oBAACF,cAAYA;YAAC,MAAM;gBAAE,GAAGV,IAAI;gBAAEY;YAAS;YAAG,MAAM;yBAC7C,oBAACb,OAAKA;AAQtC;AAKA,MAAMU,UAAU,CAACT;IACb,IAAI,CAACA,MACD,OAAO;IAEX,OAAOA,AAAc,YAAdA,KAAK,IAAI;AACpB;AAEA,MAAMc,WAAWC,SAAS;IACtB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGF,UAAU,EAAE;IAErC,MAAMG,mBAAmB,CAACP;QACtB,IAAIH,QAAQS,eACRF,UAAU,OAAO,CAAC;YAAE,GAAGE,YAAY;YAAEN;QAAS;IAEtD;IAEA,MAAMQ,eAAe,CAACpB;QAClBgB,UAAU,OAAO,CAAChB;QAClBgB,UAAU,SAAS;IACvB;IAEA,MAAMZ,qBAAqBK,QAAQS,gBAAgBA,aAAa,eAAe,GAAG;IAElF,OAAO,WAAP,GACI,oBAACG,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUD;QACV,uBACI,oBAACjB,gBAAcA;YACX,MAAMe;YACN,oBAAoBd;YACpB,UAAUe;;;AAK9B;AAEO,MAAMG,cAAc,IAChB,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACxB,OAAKA;sBAC/C,oBAACwB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACT,UAAQA"}

package/components/IconPicker/plugins/graphql.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ###########################
+ * List Custom Icons Query Response
+ */
+export interface ListCustomIconsQueryResponse {
+    fileManager: {
+        listFiles: {
+            data: [{
+                name: string;
+                src: string;
+            }] | null;
+            error: {
+                message: string;
+                data: Record<string, any>;
+                code: string;
+            } | null;
+        };
+    };
+}
+export declare const LIST_CUSTOM_ICONS: import("graphql").DocumentNode;

package/components/IconPicker/plugins/graphql.js

@@ -0,0 +1,22 @@
+import graphql_tag from "graphql-tag";
+const LIST_CUSTOM_ICONS = graphql_tag`
+    query ListCustomIcons($limit: Int!) {
+        fileManager {
+            listFiles(where: { tags_startsWith: "scope:iconPicker" }, limit: $limit) {
+                data {
+                    name
+                    src
+                    tags
+                }
+                error {
+                    code
+                    data
+                    message
+                }
+            }
+        }
+    }
+`;
+export { LIST_CUSTOM_ICONS };
+
+//# sourceMappingURL=graphql.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/plugins/graphql.js","sources":["../../../../src/components/IconPicker/plugins/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\n/**\n * ###########################\n * List Custom Icons Query Response\n */\nexport interface ListCustomIconsQueryResponse {\n    fileManager: {\n        listFiles: {\n            data: [{ name: string; src: string }] | null;\n            error: { message: string; data: Record<string, any>; code: string } | null;\n        };\n    };\n}\n\nexport const LIST_CUSTOM_ICONS = gql`\n    query ListCustomIcons($limit: Int!) {\n        fileManager {\n            listFiles(where: { tags_startsWith: \"scope:iconPicker\" }, limit: $limit) {\n                data {\n                    name\n                    src\n                    tags\n                }\n                error {\n                    code\n                    data\n                    message\n                }\n            }\n        }\n    }\n`;\n"],"names":["LIST_CUSTOM_ICONS","gql"],"mappings":";AAeO,MAAMA,oBAAoBC,WAAG,CAAC;;;;;;;;;;;;;;;;;AAiBrC,CAAC"}

package/components/IconPicker/plugins/iconsPlugin.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SimpleIconPlugin: () => React.JSX.Element;

package/components/IconPicker/plugins/iconsPlugin.js

@@ -0,0 +1,84 @@
+import react, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { ColorPicker, DelayedOnChange } from "@webiny/admin-ui";
+import { useIcon } from "../index.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
+const IconSvg = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("svg", {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${icon.width || 512} 512`,
+        color: icon?.color || "inherit",
+        dangerouslySetInnerHTML: {
+            __html: icon.value || ""
+        },
+        style: {
+            verticalAlign: "middle",
+            width: "100%",
+            height: "100%"
+        }
+    });
+};
+const IconColorPicker = ({ color, onChange })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: color,
+        onChange: onChange
+    }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(ColorPicker, {
+            align: "end",
+            value: value,
+            onChange: onChange
+        }));
+const isSimpleIcon = (icon)=>{
+    if (!icon) return false;
+    return "icon" === icon.type;
+};
+const IconTab = observer(()=>{
+    const presenter = useIconPicker();
+    const { selectedIcon } = presenter.vm;
+    const [color, setColor] = useState("inherit");
+    useEffect(()=>{
+        if ("inherit" === color && isSimpleIcon(selectedIcon)) setColor(selectedIcon.color);
+    }, [
+        selectedIcon
+    ]);
+    const onColorChange = (color)=>{
+        setColor(color);
+        if (isSimpleIcon(selectedIcon)) presenter.setIcon({
+            ...selectedIcon,
+            color
+        });
+    };
+    const onIconSelect = (icon)=>{
+        presenter.setIcon({
+            ...icon,
+            color
+        });
+        presenter.closeMenu();
+    };
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "icon",
+        label: "Icons",
+        onChange: onIconSelect,
+        cellDecorator: (cell)=>/*#__PURE__*/ react.createElement("span", {
+                style: {
+                    color
+                }
+            }, cell),
+        actions: /*#__PURE__*/ react.createElement(IconColorPicker, {
+            color: color,
+            onChange: onColorChange
+        })
+    });
+});
+const SimpleIconPlugin = ()=>/*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "icon"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(IconSvg, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(IconTab, null)
+    })));
+export { SimpleIconPlugin };
+
+//# sourceMappingURL=iconsPlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/plugins/iconsPlugin.js","sources":["../../../../src/components/IconPicker/plugins/iconsPlugin.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DelayedOnChange, ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.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\ninterface SimpleIcon extends Icon {\n    color: string;\n}\n\nconst IconSvg = () => {\n    const { icon, size } = useIcon<SimpleIcon>();\n\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox={`0 0 ${icon.width || 512} 512`}\n            color={icon?.color || \"inherit\"}\n            dangerouslySetInnerHTML={{ __html: icon.value || \"\" }}\n            style={{\n                verticalAlign: \"middle\",\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        />\n    );\n};\n\ninterface IconColorPickerProps {\n    color: string;\n    onChange: (value: string) => void;\n}\n\nconst IconColorPicker = ({ color, onChange }: IconColorPickerProps) => {\n    return (\n        <DelayedOnChange value={color} onChange={onChange}>\n            {({ value, onChange }) => (\n                <ColorPicker align={\"end\"} value={value} onChange={onChange} />\n            )}\n        </DelayedOnChange>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isSimpleIcon = (icon: Icon | null): icon is SimpleIcon => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"icon\";\n};\n\nconst IconTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const [color, setColor] = useState(\"inherit\");\n\n    useEffect(() => {\n        if (color === \"inherit\" && isSimpleIcon(selectedIcon)) {\n            setColor(selectedIcon.color);\n        }\n    }, [selectedIcon]);\n\n    const onColorChange = (color: string) => {\n        setColor(color);\n\n        if (isSimpleIcon(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, color });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        // Set icon and assign current color.\n        presenter.setIcon({ ...icon, color });\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"icon\"}\n            label={\"Icons\"}\n            onChange={onIconSelect}\n            cellDecorator={cell => <span style={{ color }}>{cell}</span>}\n            actions={<IconColorPicker color={color} onChange={onColorChange} />}\n        />\n    );\n});\n\nexport const SimpleIconPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"icon\"}>\n                <IconPickerConfig.IconType.Icon element={<IconSvg />} />\n                <IconPickerConfig.IconType.Tab element={<IconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["IconSvg","icon","size","useIcon","IconColorPicker","color","onChange","DelayedOnChange","value","ColorPicker","isSimpleIcon","IconTab","observer","presenter","useIconPicker","selectedIcon","setColor","useState","useEffect","onColorChange","onIconSelect","IconPickerTab","cell","SimpleIconPlugin","IconPickerConfig"],"mappings":";;;;;;;AAqBA,MAAMA,UAAU;IACZ,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAOD;QACP,QAAQA;QACR,SAAS,CAAC,IAAI,EAAED,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC;QACvC,OAAOA,MAAM,SAAS;QACtB,yBAAyB;YAAE,QAAQA,KAAK,KAAK,IAAI;QAAG;QACpD,OAAO;YACH,eAAe;YACf,OAAO;YACP,QAAQ;QACZ;;AAGZ;AAOA,MAAMG,kBAAkB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAwB,GACvD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOF;QAAO,UAAUC;OACpC,CAAC,EAAEE,KAAK,EAAEF,QAAQ,EAAE,iBACjB,oBAACG,aAAWA;YAAC,OAAO;YAAO,OAAOD;YAAO,UAAUF;;AASnE,MAAMI,eAAe,CAACT;IAClB,IAAI,CAACA,MACD,OAAO;IAEX,OAAOA,AAAc,WAAdA,KAAK,IAAI;AACpB;AAEA,MAAMU,UAAUC,SAAS;IACrB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGF,UAAU,EAAE;IAErC,MAAM,CAACR,OAAOW,SAAS,GAAGC,SAAS;IAEnCC,UAAU;QACN,IAAIb,AAAU,cAAVA,SAAuBK,aAAaK,eACpCC,SAASD,aAAa,KAAK;IAEnC,GAAG;QAACA;KAAa;IAEjB,MAAMI,gBAAgB,CAACd;QACnBW,SAASX;QAET,IAAIK,aAAaK,eACbF,UAAU,OAAO,CAAC;YAAE,GAAGE,YAAY;YAAEV;QAAM;IAEnD;IAEA,MAAMe,eAAe,CAACnB;QAElBY,UAAU,OAAO,CAAC;YAAE,GAAGZ,IAAI;YAAEI;QAAM;QACnCQ,UAAU,SAAS;IACvB;IAEA,OAAO,WAAP,GACI,oBAACQ,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUD;QACV,eAAeE,CAAAA,OAAAA,WAAAA,GAAQ,oBAAC;gBAAK,OAAO;oBAAEjB;gBAAM;eAAIiB;QAChD,uBAAS,oBAAClB,iBAAeA;YAAC,OAAOC;YAAO,UAAUc;;;AAG9D;AAEO,MAAMI,mBAAmB,IACrB,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACxB,SAAOA;sBACjD,oBAACwB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACb,SAAOA"}