@webiny/app-admin 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/components/IconPicker/IconPickerPresenter.test.js

@@ -0,0 +1,84 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { IconPickerPresenter } from "./IconPickerPresenter.js";
+import { IconRepository } from "./IconRepository.js";
+const mockIconTypes = [
+    {
+        name: "icon"
+    },
+    {
+        name: "emoji"
+    },
+    {
+        name: "custom"
+    }
+];
+const mockIcons = [
+    {
+        type: "emoji",
+        name: "thumbs_up",
+        value: "👍",
+        category: "People & Body",
+        skinToneSupport: true
+    },
+    {
+        type: "icon",
+        name: "regular_address-book",
+        value: '<path fill="currentColor" d="M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z"/>',
+        category: "Business"
+    }
+];
+const mockIconPackProviders = [
+    {
+        name: "mock_icons",
+        getIcons: async ()=>mockIcons
+    }
+];
+describe("IconPickerPresenter", ()=>{
+    const icon = {
+        type: "icon",
+        name: "solid_bullseye",
+        value: '<path fill="currentColor" d="M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z"/>',
+        category: "Business",
+        color: "#282fe6"
+    };
+    let presenter;
+    beforeEach(()=>{
+        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+        presenter = new IconPickerPresenter(repository);
+    });
+    it("should create an IconPickerPresenter with the `vm` definition", async ()=>{
+        await presenter.load(icon);
+        expect(presenter.vm.selectedIcon).toEqual(icon);
+        expect(presenter.vm.icons).toEqual(mockIcons);
+    });
+    it("should be able to select an icon", async ()=>{
+        await presenter.load();
+        presenter.setIcon(presenter.vm.icons[0]);
+        expect(presenter.vm.selectedIcon).toEqual(presenter.vm.icons[0]);
+    });
+    it("should be able to add an icon", async ()=>{
+        await presenter.load();
+        presenter.addIcon(icon);
+        expect(presenter.vm.icons.length).toBe(3);
+        expect(presenter.vm.icons).toEqual([
+            ...mockIcons,
+            icon
+        ]);
+    });
+    it("should be able to filter icons by name", async ()=>{
+        await presenter.load();
+        presenter.setFilter("book");
+        expect(presenter.vm.icons.length).toBe(1);
+        expect(presenter.vm.icons[0]).toEqual(mockIcons[1]);
+    });
+    it("should be able to set active tab on menu open", async ()=>{
+        await presenter.load(mockIcons[0]);
+        expect(presenter.vm.isMenuOpened).toBe(false);
+        expect(presenter.vm.activeTab).toBe(void 0);
+        presenter.openMenu();
+        expect(presenter.vm.isMenuOpened).toBe(true);
+        expect(presenter.vm.activeTab).toBe("emoji");
+    });
+});
+
+//# sourceMappingURL=IconPickerPresenter.test.js.map

package/components/IconPicker/IconPickerPresenter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/IconPickerPresenter.test.js","sources":["../../../src/components/IconPicker/IconPickerPresenter.test.ts"],"sourcesContent":["import { describe, it, expect, beforeEach } from \"vitest\";\nimport { IconPickerPresenter } from \"./IconPickerPresenter.js\";\nimport { IconRepository } from \"./IconRepository.js\";\nimport type { Icon } from \"./types.js\";\n\nconst mockIconTypes = [{ name: \"icon\" }, { name: \"emoji\" }, { name: \"custom\" }];\n\nconst mockIcons: Icon[] = [\n    {\n        type: \"emoji\",\n        name: \"thumbs_up\",\n        value: \"👍\",\n        category: \"People & Body\",\n        skinToneSupport: true\n    },\n    {\n        type: \"icon\",\n        name: \"regular_address-book\",\n        value: '<path fill=\"currentColor\" d=\"M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z\"/>',\n        category: \"Business\"\n    }\n];\n\nconst mockIconPackProviders = [\n    {\n        name: \"mock_icons\",\n        getIcons: async () => {\n            return mockIcons;\n        }\n    }\n];\n\ndescribe(\"IconPickerPresenter\", () => {\n    const icon: Icon = {\n        type: \"icon\",\n        name: \"solid_bullseye\",\n        value: '<path fill=\"currentColor\" d=\"M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z\"/>',\n        category: \"Business\",\n        color: \"#282fe6\"\n    };\n\n    let presenter: IconPickerPresenter;\n\n    beforeEach(() => {\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n        presenter = new IconPickerPresenter(repository);\n    });\n\n    it(\"should create an IconPickerPresenter with the `vm` definition\", async () => {\n        // let's load icons and set a predefined `selectedIcon`\n        await presenter.load(icon);\n\n        // `vm` should have the expected `selectedIcon` definition\n        expect(presenter.vm.selectedIcon).toEqual(icon);\n\n        // `vm` should have the expected `icons` definition\n        expect(presenter.vm.icons).toEqual(mockIcons);\n    });\n\n    it(\"should be able to select an icon\", async () => {\n        // let's load icons\n        await presenter.load();\n\n        // should be able to set the icon\n        presenter.setIcon(presenter.vm.icons[0]);\n\n        // `vm` should have the expected `selectedIcon` value\n        expect(presenter.vm.selectedIcon).toEqual(presenter.vm.icons[0]);\n    });\n\n    it(\"should be able to add an icon\", async () => {\n        // let's load icons\n        await presenter.load();\n\n        // should be able to set the icon\n        presenter.addIcon(icon);\n\n        // `vm` should have three icons\n        expect(presenter.vm.icons.length).toBe(3);\n\n        // `vm` should have the expected `icons` value\n        expect(presenter.vm.icons).toEqual([...mockIcons, icon]);\n    });\n\n    it(\"should be able to filter icons by name\", async () => {\n        // let's load icons\n        await presenter.load();\n\n        // should be able to set the filter\n        presenter.setFilter(\"book\");\n\n        // `vm` should have only one icon\n        expect(presenter.vm.icons.length).toBe(1);\n\n        // `vm` should have filtered icon\n        expect(presenter.vm.icons[0]).toEqual(mockIcons[1]);\n    });\n\n    it(\"should be able to set active tab on menu open\", async () => {\n        // let's load icons and set a predefined `selectedIcon`\n        await presenter.load(mockIcons[0]);\n\n        // default `isMenuOpened` should be false\n        expect(presenter.vm.isMenuOpened).toBe(false);\n\n        // default `activeTab` should be handled by the component itself\n        expect(presenter.vm.activeTab).toBe(undefined);\n\n        // should be able to set `isMenuOpened`\n        // should be able to set `activeTab` based on `selectedIcon` type\n        presenter.openMenu();\n\n        // `vm` should have the expected `isMenuOpened` value\n        expect(presenter.vm.isMenuOpened).toBe(true);\n\n        // `vm` should have the expected `activeTab` value\n        expect(presenter.vm.activeTab).toBe(\"emoji\");\n    });\n});\n"],"names":["mockIconTypes","mockIcons","mockIconPackProviders","describe","icon","presenter","beforeEach","repository","IconRepository","IconPickerPresenter","it","expect","undefined"],"mappings":";;;AAKA,MAAMA,gBAAgB;IAAC;QAAE,MAAM;IAAO;IAAG;QAAE,MAAM;IAAQ;IAAG;QAAE,MAAM;IAAS;CAAE;AAE/E,MAAMC,YAAoB;IACtB;QACI,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;QACV,iBAAiB;IACrB;IACA;QACI,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;IACd;CACH;AAED,MAAMC,wBAAwB;IAC1B;QACI,MAAM;QACN,UAAU,UACCD;IAEf;CACH;AAEDE,SAAS,uBAAuB;IAC5B,MAAMC,OAAa;QACf,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;QACV,OAAO;IACX;IAEA,IAAIC;IAEJC,WAAW;QACP,MAAMC,aAAa,IAAIC,eAAeR,eAAeE;QACrDG,YAAY,IAAII,oBAAoBF;IACxC;IAEAG,GAAG,iEAAiE;QAEhE,MAAML,UAAU,IAAI,CAACD;QAGrBO,OAAON,UAAU,EAAE,CAAC,YAAY,EAAE,OAAO,CAACD;QAG1CO,OAAON,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,CAACJ;IACvC;IAEAS,GAAG,oCAAoC;QAEnC,MAAML,UAAU,IAAI;QAGpBA,UAAU,OAAO,CAACA,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE;QAGvCM,OAAON,UAAU,EAAE,CAAC,YAAY,EAAE,OAAO,CAACA,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE;IACnE;IAEAK,GAAG,iCAAiC;QAEhC,MAAML,UAAU,IAAI;QAGpBA,UAAU,OAAO,CAACD;QAGlBO,OAAON,UAAU,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;QAGvCM,OAAON,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;eAAIJ;YAAWG;SAAK;IAC3D;IAEAM,GAAG,0CAA0C;QAEzC,MAAML,UAAU,IAAI;QAGpBA,UAAU,SAAS,CAAC;QAGpBM,OAAON,UAAU,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;QAGvCM,OAAON,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,OAAO,CAACJ,SAAS,CAAC,EAAE;IACtD;IAEAS,GAAG,iDAAiD;QAEhD,MAAML,UAAU,IAAI,CAACJ,SAAS,CAAC,EAAE;QAGjCU,OAAON,UAAU,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC;QAGvCM,OAAON,UAAU,EAAE,CAAC,SAAS,EAAE,IAAI,CAACO;QAIpCP,UAAU,QAAQ;QAGlBM,OAAON,UAAU,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC;QAGvCM,OAAON,UAAU,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC;IACxC;AACJ"}

package/components/IconPicker/IconPickerPresenterProvider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { IconPickerPresenterInterface } from "./IconPickerPresenter.js";
+interface IconPickerPresenterProviderProps {
+    presenter: IconPickerPresenterInterface;
+    children: React.ReactNode;
+}
+export declare const IconPickerPresenterProvider: ({ presenter, children }: IconPickerPresenterProviderProps) => React.JSX.Element;
+export declare function useIconPicker(): IconPickerPresenterInterface;
+export {};

package/components/IconPicker/IconPickerPresenterProvider.js

@@ -0,0 +1,13 @@
+import react from "react";
+const IconPickerPresenterContext = /*#__PURE__*/ react.createContext(void 0);
+const IconPickerPresenterProvider = ({ presenter, children })=>/*#__PURE__*/ react.createElement(IconPickerPresenterContext.Provider, {
+        value: presenter
+    }, children);
+function useIconPicker() {
+    const context = react.useContext(IconPickerPresenterContext);
+    if (!context) throw Error("Missing <IconPickerPresenterProvider> in the component tree!");
+    return context;
+}
+export { IconPickerPresenterProvider, useIconPicker };
+
+//# sourceMappingURL=IconPickerPresenterProvider.js.map

package/components/IconPicker/IconPickerPresenterProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/IconPickerPresenterProvider.js","sources":["../../../src/components/IconPicker/IconPickerPresenterProvider.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { IconPickerPresenterInterface } from \"./IconPickerPresenter.js\";\n\ninterface IconPickerPresenterProviderProps {\n    presenter: IconPickerPresenterInterface;\n    children: React.ReactNode;\n}\n\nconst IconPickerPresenterContext = React.createContext<IconPickerPresenterInterface | undefined>(\n    undefined\n);\n\nexport const IconPickerPresenterProvider = ({\n    presenter,\n    children\n}: IconPickerPresenterProviderProps) => {\n    return (\n        <IconPickerPresenterContext.Provider value={presenter}>\n            {children}\n        </IconPickerPresenterContext.Provider>\n    );\n};\n\nexport function useIconPicker() {\n    const context = React.useContext(IconPickerPresenterContext);\n    if (!context) {\n        throw Error(`Missing <IconPickerPresenterProvider> in the component tree!`);\n    }\n    return context;\n}\n"],"names":["IconPickerPresenterContext","React","undefined","IconPickerPresenterProvider","presenter","children","useIconPicker","context","Error"],"mappings":";AASA,MAAMA,6BAA6B,WAAHA,GAAGC,MAAAA,aAAmB,CAClDC;AAGG,MAAMC,8BAA8B,CAAC,EACxCC,SAAS,EACTC,QAAQ,EACuB,GACxB,WAAP,GACI,oBAACL,2BAA2B,QAAQ;QAAC,OAAOI;OACvCC;AAKN,SAASC;IACZ,MAAMC,UAAUN,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACO,SACD,MAAMC,MAAM;IAEhB,OAAOD;AACX"}

package/components/IconPicker/IconPickerTab.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Icon } from "./types.js";
+export declare const IconPickerTabRenderer: (() => null) & {
+    original: () => null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (() => null) & {
+        original: () => null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => null) & {
+        original: () => null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface CellDecorator {
+    (cell: React.ReactElement): React.ReactElement;
+}
+export interface IconPickerTabProps {
+    label: string;
+    value: string;
+    onChange: (icon: Icon) => void;
+    actions?: React.ReactElement;
+    cellDecorator?: CellDecorator;
+}
+export declare const IconPickerTab: ({ label, value, actions, onChange, cellDecorator }: IconPickerTabProps) => React.JSX.Element;
+export {};

package/components/IconPicker/IconPickerTab.js

@@ -0,0 +1,116 @@
+import react, { Fragment } from "react";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { List } from "react-virtualized";
+import groupBy from "lodash/groupBy.js";
+import { DelayedOnChange, Icon, Input, Tabs, Text } from "@webiny/admin-ui";
+import { makeDecoratable } from "@webiny/react-composition";
+import { useIconPicker } from "./IconPickerPresenterProvider.js";
+import { useIconType } from "./config/IconType.js";
+import { IconPickerCell, IconPickerRow } from "./components/index.js";
+import { ICON_PICKER_SIZE } from "./types.js";
+const COLUMN_COUNT = 8;
+const IconPickerTabRenderer = makeDecoratable("IconPickerTabRenderer", ()=>null);
+const getRows = (icons, size)=>{
+    const groupedObjects = groupBy(icons, "category");
+    const rows = [];
+    for(const key in groupedObjects)if ("undefined" !== key) {
+        const rowIcons = groupedObjects[key];
+        rows.push({
+            type: "category-name",
+            name: key
+        });
+        while(rowIcons.length)rows.push({
+            type: "icons",
+            icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
+        });
+    }
+    if (groupedObjects.undefined) {
+        const rowIcons = groupedObjects.undefined;
+        rows.push({
+            type: "category-name",
+            name: "Uncategorized"
+        });
+        while(rowIcons.length)rows.push({
+            type: "icons",
+            icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
+        });
+    }
+    return rows;
+};
+const useIconTypeRows = (type)=>{
+    const presenter = useIconPicker();
+    const icons = presenter.vm.icons.filter((icon)=>icon.type === type);
+    const rows = getRows(icons, presenter.vm.size);
+    return {
+        isEmpty: 0 === rows.length,
+        rows,
+        rowCount: rows.length
+    };
+};
+const RowRenderer = ({ row, style, cellDecorator, onIconClick })=>{
+    const presenter = useIconPicker();
+    const value = presenter.vm.selectedIcon;
+    if ("category-name" === row.type) return /*#__PURE__*/ react.createElement(IconPickerRow, {
+        style: style
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "uppercase self-end text-neutral-muted mb-sm"
+    }, row.name));
+    return /*#__PURE__*/ react.createElement(IconPickerRow, {
+        style: style
+    }, row.icons.map((item, itemKey)=>/*#__PURE__*/ react.createElement(Fragment, {
+            key: itemKey
+        }, cellDecorator(/*#__PURE__*/ react.createElement(IconPickerCell, {
+            key: itemKey,
+            icon: item,
+            isActive: item.name === value?.name,
+            onIconClick: ()=>onIconClick(item)
+        })))));
+};
+const noopDecorator = (cell)=>cell;
+const IconPickerTab = ({ label, value, actions, onChange, cellDecorator = noopDecorator })=>{
+    const { type } = useIconType();
+    const { isEmpty, rowCount, rows } = useIconTypeRows(type);
+    const presenter = useIconPicker();
+    const size = presenter.vm.size;
+    return /*#__PURE__*/ react.createElement(Tabs.Tab, {
+        value: value,
+        trigger: label,
+        content: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-center gap-sm"
+        }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
+            value: presenter.vm.filter,
+            onChange: (value)=>presenter.setFilter(value)
+        }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(Input, {
+                value: value,
+                onChange: (value)=>onChange(value),
+                placeholder: "Search icons...",
+                variant: "secondary",
+                size: "md",
+                startIcon: /*#__PURE__*/ react.createElement(Icon, {
+                    icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                    label: "Search icons"
+                })
+            })), actions ? /*#__PURE__*/ react.createElement("div", null, actions) : null), /*#__PURE__*/ react.createElement("div", {
+            className: "relative"
+        }, isEmpty ? /*#__PURE__*/ react.createElement("div", {
+            className: "pt-md text-neutral-strong"
+        }, /*#__PURE__*/ react.createElement(Text, null, "No results found.")) : /*#__PURE__*/ react.createElement(List, {
+            className: "outline-none",
+            rowRenderer: ({ key, ...props })=>/*#__PURE__*/ react.createElement(RowRenderer, {
+                    key: key,
+                    row: rows[props.index],
+                    cellDecorator: cellDecorator,
+                    onIconClick: onChange,
+                    ...props
+                }),
+            width: size === ICON_PICKER_SIZE.SMALL ? 232 : 312,
+            height: size === ICON_PICKER_SIZE.SMALL ? 240 : 350,
+            rowCount: rowCount,
+            rowHeight: 40
+        })))
+    });
+};
+export { IconPickerTab, IconPickerTabRenderer };
+
+//# sourceMappingURL=IconPickerTab.js.map

package/components/IconPicker/IconPickerTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/IconPickerTab.js","sources":["../../../src/components/IconPicker/IconPickerTab.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { List } from \"react-virtualized\";\nimport groupBy from \"lodash/groupBy.js\";\n\nimport { Text, DelayedOnChange, Input, Tabs, Icon as IconComponent } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nimport { useIconPicker } from \"./IconPickerPresenterProvider.js\";\nimport { useIconType } from \"./config/IconType.js\";\nimport { IconPickerCell, IconPickerRow } from \"./components/index.js\";\nimport type { Icon, IconPickerGridRow } from \"./types.js\";\nimport { ICON_PICKER_SIZE } from \"./types.js\";\n\nconst COLUMN_COUNT = 8;\n\nexport const IconPickerTabRenderer = makeDecoratable(\"IconPickerTabRenderer\", () => null);\n\nconst getRows = (icons: Icon[], size?: string) => {\n    // Group the icons by their category.\n    const groupedObjects = groupBy(icons, \"category\");\n    const rows: IconPickerGridRow[] = [];\n\n    // Iterate over each category in the grouped icons.\n    for (const key in groupedObjects) {\n        // Skip any group where the key is `undefined` (these icons will be handled separately).\n        if (key !== \"undefined\") {\n            const rowIcons = groupedObjects[key];\n\n            // Add a row for the category name.\n            rows.push({ type: \"category-name\", name: key });\n\n            // Split the icons in this category into groups of COLUMN_COUNT and add them as rows.\n            while (rowIcons.length) {\n                rows.push({\n                    type: \"icons\",\n                    icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n                });\n            }\n        }\n    }\n\n    // Handle icons that don't have a category (key is `undefined`).\n    if (groupedObjects.undefined) {\n        const rowIcons = groupedObjects.undefined;\n\n        // Add a row for the `Uncategorized` category name.\n        rows.push({ type: \"category-name\", name: \"Uncategorized\" });\n\n        // Split these icons into groups of COLUMN_COUNT and add them as rows.\n        while (rowIcons.length) {\n            rows.push({\n                type: \"icons\",\n                icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n            });\n        }\n    }\n\n    return rows;\n};\n\nconst useIconTypeRows = (type: string) => {\n    const presenter = useIconPicker();\n    const icons = presenter.vm.icons.filter(icon => icon.type === type);\n    const rows = getRows(icons, presenter.vm.size);\n\n    return {\n        isEmpty: rows.length === 0,\n        rows,\n        rowCount: rows.length\n    };\n};\n\ninterface RenderRowProps {\n    onIconClick: (icon: Icon) => void;\n    style: Record<string, any>;\n    row: IconPickerGridRow;\n    cellDecorator: CellDecorator;\n}\n\nconst RowRenderer = ({ row, style, cellDecorator, onIconClick }: RenderRowProps) => {\n    const presenter = useIconPicker();\n    const value = presenter.vm.selectedIcon;\n\n    if (row.type === \"category-name\") {\n        return (\n            <IconPickerRow style={style}>\n                <Text size={\"sm\"} className={\"uppercase self-end text-neutral-muted mb-sm\"}>\n                    {row.name}\n                </Text>\n            </IconPickerRow>\n        );\n    }\n\n    return (\n        <IconPickerRow style={style}>\n            {row.icons.map((item, itemKey) => (\n                <Fragment key={itemKey}>\n                    {cellDecorator(\n                        <IconPickerCell\n                            key={itemKey}\n                            icon={item}\n                            isActive={item.name === value?.name}\n                            onIconClick={() => onIconClick(item)}\n                        />\n                    )}\n                </Fragment>\n            ))}\n        </IconPickerRow>\n    );\n};\n\ninterface CellDecorator {\n    (cell: React.ReactElement): React.ReactElement;\n}\n\nconst noopDecorator: CellDecorator = cell => cell;\n\nexport interface IconPickerTabProps {\n    label: string;\n    value: string;\n    onChange: (icon: Icon) => void;\n    actions?: React.ReactElement;\n    cellDecorator?: CellDecorator;\n}\n\nexport const IconPickerTab = ({\n    label,\n    value,\n    actions,\n    onChange,\n    cellDecorator = noopDecorator\n}: IconPickerTabProps) => {\n    const { type } = useIconType();\n    const { isEmpty, rowCount, rows } = useIconTypeRows(type);\n    const presenter = useIconPicker();\n    const size = presenter.vm.size;\n\n    return (\n        <Tabs.Tab\n            value={value}\n            trigger={label}\n            content={\n                <div>\n                    <div className={\"flex items-center justify-center gap-sm\"}>\n                        <DelayedOnChange\n                            value={presenter.vm.filter}\n                            onChange={value => presenter.setFilter(value)}\n                        >\n                            {({ value, onChange }) => (\n                                <Input\n                                    value={value}\n                                    onChange={value => onChange(value as unknown as string)}\n                                    placeholder={\"Search icons...\"}\n                                    variant={\"secondary\"}\n                                    size={\"md\"}\n                                    startIcon={\n                                        <IconComponent\n                                            icon={<SearchIcon />}\n                                            label={\"Search icons\"}\n                                        />\n                                    }\n                                />\n                            )}\n                        </DelayedOnChange>\n                        {actions ? <div>{actions}</div> : null}\n                    </div>\n                    <div className={\"relative\"}>\n                        {isEmpty ? (\n                            <div className={\"pt-md text-neutral-strong\"}>\n                                <Text>{\"No results found.\"}</Text>\n                            </div>\n                        ) : (\n                            <List\n                                className={\"outline-none\"}\n                                rowRenderer={({ key, ...props }) => (\n                                    <RowRenderer\n                                        key={key}\n                                        row={rows[props.index]}\n                                        cellDecorator={cellDecorator}\n                                        onIconClick={onChange}\n                                        {...props}\n                                    />\n                                )}\n                                width={size === ICON_PICKER_SIZE.SMALL ? 232 : 312}\n                                height={size === ICON_PICKER_SIZE.SMALL ? 240 : 350}\n                                rowCount={rowCount}\n                                rowHeight={40}\n                            />\n                        )}\n                    </div>\n                </div>\n            }\n        />\n    );\n};\n"],"names":["COLUMN_COUNT","IconPickerTabRenderer","makeDecoratable","getRows","icons","size","groupedObjects","groupBy","rows","key","rowIcons","ICON_PICKER_SIZE","useIconTypeRows","type","presenter","useIconPicker","icon","RowRenderer","row","style","cellDecorator","onIconClick","value","IconPickerRow","Text","item","itemKey","Fragment","IconPickerCell","noopDecorator","cell","IconPickerTab","label","actions","onChange","useIconType","isEmpty","rowCount","Tabs","DelayedOnChange","Input","IconComponent","SearchIcon","List","props"],"mappings":"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"}

package/components/IconPicker/IconRenderer.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { Icon } from "./types.js";
+export declare const IconRenderer: ((props: unknown) => React.JSX.Element | null) & {
+    original: (props: unknown) => React.JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: unknown) => React.JSX.Element | null) & {
+        original: (props: unknown) => React.JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: unknown) => React.JSX.Element | null) & {
+        original: (props: unknown) => React.JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface IconContext<T extends Icon = Icon> {
+    icon: T;
+    size: number;
+}
+declare const IconContext: React.Context<IconContext<Icon> | undefined>;
+interface IconProviderProps {
+    icon: Icon;
+    size?: number;
+    children: React.ReactNode;
+}
+export declare const IconProvider: ({ icon, size, children }: IconProviderProps) => React.JSX.Element;
+export declare function useIcon<T extends Icon = Icon>(): IconContext<T>;
+export {};

package/components/IconPicker/IconRenderer.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { toJS } from "mobx";
+import { createVoidComponent, makeDecoratable } from "@webiny/react-composition";
+const IconRenderer = makeDecoratable("IconPickerIcon", createVoidComponent());
+const IconContext = /*#__PURE__*/ react.createContext(void 0);
+const IconProvider = ({ icon, size = 32, children })=>/*#__PURE__*/ react.createElement(IconContext.Provider, {
+        value: {
+            icon: toJS(icon),
+            size
+        }
+    }, children);
+function useIcon() {
+    const context = react.useContext(IconContext);
+    if (!context) throw Error("Missing <IconProvider> in the component tree!");
+    return context;
+}
+export { IconProvider, IconRenderer, useIcon };
+
+//# sourceMappingURL=IconRenderer.js.map

package/components/IconPicker/IconRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/IconRenderer.js","sources":["../../../src/components/IconPicker/IconRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { toJS } from \"mobx\";\n\nimport { makeDecoratable, createVoidComponent } from \"@webiny/react-composition\";\n\nimport type { Icon } from \"./types.js\";\n\nexport const IconRenderer = makeDecoratable(\"IconPickerIcon\", createVoidComponent());\n\ninterface IconContext<T extends Icon = Icon> {\n    icon: T;\n    size: number;\n}\n\nconst IconContext = React.createContext<IconContext | undefined>(undefined);\n\ninterface IconProviderProps {\n    icon: Icon;\n    size?: number;\n    children: React.ReactNode;\n}\n\nexport const IconProvider = ({ icon, size = 32, children }: IconProviderProps) => {\n    // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.\n    return (\n        <IconContext.Provider value={{ icon: toJS(icon), size }}>{children}</IconContext.Provider>\n    );\n};\n\nexport function useIcon<T extends Icon = Icon>(): IconContext<T> {\n    const context = React.useContext(IconContext);\n    if (!context) {\n        throw Error(`Missing <IconProvider> in the component tree!`);\n    }\n    return context as IconContext<T>;\n}\n"],"names":["IconRenderer","makeDecoratable","createVoidComponent","IconContext","React","undefined","IconProvider","icon","size","children","toJS","useIcon","context","Error"],"mappings":";;;AAOO,MAAMA,eAAeC,gBAAgB,kBAAkBC;AAO9D,MAAMC,cAAc,WAAHA,GAAGC,MAAAA,aAAmB,CAA0BC;AAQ1D,MAAMC,eAAe,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAE,EAAEC,QAAQ,EAAqB,GAElE,WAAP,GACI,oBAACN,YAAY,QAAQ;QAAC,OAAO;YAAE,MAAMO,KAAKH;YAAOC;QAAK;OAAIC;AAI3D,SAASE;IACZ,MAAMC,UAAUR,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACS,SACD,MAAMC,MAAM;IAEhB,OAAOD;AACX"}

package/components/IconPicker/IconRepository.d.ts

@@ -0,0 +1,19 @@
+import type { IconPackProviderInterface as IconPackProvider, IconType } from "./config/index.js";
+import type { Icon } from "./types.js";
+export declare class IconRepository {
+    private readonly iconPackProviders;
+    private readonly iconTypes;
+    private loading;
+    private icons;
+    constructor(iconTypes: IconType[], iconPackProviders: IconPackProvider[]);
+    loadIcons(): Promise<void>;
+    getIcons(): Icon[];
+    addIcon(icon: Icon): void;
+    getIconTypes(): IconType[];
+    getLoading(): {
+        isLoading: boolean;
+        loadingLabel: string;
+        message: string;
+    };
+    private runWithLoading;
+}

package/components/IconPicker/IconRepository.js

@@ -0,0 +1,48 @@
+import cloneDeep from "lodash/cloneDeep.js";
+import { makeAutoObservable, runInAction } from "mobx";
+import { Loading } from "./Loading.js";
+class IconRepository {
+    constructor(iconTypes, iconPackProviders){
+        this.icons = [];
+        this.iconTypes = iconTypes;
+        this.loading = new Loading(true);
+        this.iconPackProviders = iconPackProviders;
+        makeAutoObservable(this);
+    }
+    async loadIcons() {
+        if (this.icons.length > 0) return;
+        const icons = await this.runWithLoading(async ()=>{
+            const icons = await Promise.all(this.iconPackProviders.map((provider)=>provider.getIcons()));
+            return icons.flat();
+        });
+        const iconTypes = this.iconTypes.map((iconType)=>iconType.name);
+        runInAction(()=>{
+            this.icons = icons.filter((icon)=>iconTypes.includes(icon.type));
+        });
+    }
+    getIcons() {
+        return cloneDeep(this.icons);
+    }
+    addIcon(icon) {
+        this.icons = [
+            ...this.icons,
+            icon
+        ];
+    }
+    getIconTypes() {
+        return this.iconTypes;
+    }
+    getLoading() {
+        return {
+            isLoading: this.loading.isLoading,
+            loadingLabel: this.loading.loadingLabel,
+            message: this.loading.feedback
+        };
+    }
+    async runWithLoading(action, loadingLabel, successMessage, failureMessage) {
+        return await this.loading.runCallbackWithLoading(action, loadingLabel, successMessage, failureMessage);
+    }
+}
+export { IconRepository };
+
+//# sourceMappingURL=IconRepository.js.map

package/components/IconPicker/IconRepository.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/IconRepository.js","sources":["../../../src/components/IconPicker/IconRepository.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep.js\";\nimport { makeAutoObservable, runInAction } from \"mobx\";\n\nimport { Loading } from \"./Loading.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\nimport type { Icon } from \"./types.js\";\n\nexport class IconRepository {\n    private readonly iconPackProviders: IconPackProvider[];\n    private readonly iconTypes: IconType[];\n    private loading: Loading;\n    private icons: Icon[] = [];\n\n    constructor(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        this.iconTypes = iconTypes;\n        this.loading = new Loading(true);\n        this.iconPackProviders = iconPackProviders;\n        makeAutoObservable(this);\n    }\n\n    async loadIcons() {\n        if (this.icons.length > 0) {\n            return;\n        }\n\n        const icons = await this.runWithLoading(async () => {\n            const icons = await Promise.all(\n                this.iconPackProviders.map(provider => provider.getIcons())\n            );\n            return icons.flat();\n        });\n\n        const iconTypes = this.iconTypes.map(iconType => iconType.name);\n\n        runInAction(() => {\n            // Make sure we only work with known icon types.\n            this.icons = icons.filter(icon => iconTypes.includes(icon.type));\n        });\n    }\n\n    getIcons() {\n        return cloneDeep(this.icons);\n    }\n\n    addIcon(icon: Icon) {\n        this.icons = [...this.icons, icon];\n    }\n\n    getIconTypes() {\n        return this.iconTypes;\n    }\n\n    getLoading() {\n        return {\n            isLoading: this.loading.isLoading,\n            loadingLabel: this.loading.loadingLabel,\n            message: this.loading.feedback\n        };\n    }\n\n    private async runWithLoading<T>(\n        action: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ) {\n        return await this.loading.runCallbackWithLoading(\n            action,\n            loadingLabel,\n            successMessage,\n            failureMessage\n        );\n    }\n}\n"],"names":["IconRepository","iconTypes","iconPackProviders","Loading","makeAutoObservable","icons","Promise","provider","iconType","runInAction","icon","cloneDeep","action","loadingLabel","successMessage","failureMessage"],"mappings":";;;AAOO,MAAMA;IAMT,YAAYC,SAAqB,EAAEC,iBAAqC,CAAE;aAFlE,KAAK,GAAW,EAAE;QAGtB,IAAI,CAAC,SAAS,GAAGD;QACjB,IAAI,CAAC,OAAO,GAAG,IAAIE,QAAQ;QAC3B,IAAI,CAAC,iBAAiB,GAAGD;QACzBE,mBAAmB,IAAI;IAC3B;IAEA,MAAM,YAAY;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GACpB;QAGJ,MAAMC,QAAQ,MAAM,IAAI,CAAC,cAAc,CAAC;YACpC,MAAMA,QAAQ,MAAMC,QAAQ,GAAG,CAC3B,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAACC,CAAAA,WAAYA,SAAS,QAAQ;YAE5D,OAAOF,MAAM,IAAI;QACrB;QAEA,MAAMJ,YAAY,IAAI,CAAC,SAAS,CAAC,GAAG,CAACO,CAAAA,WAAYA,SAAS,IAAI;QAE9DC,YAAY;YAER,IAAI,CAAC,KAAK,GAAGJ,MAAM,MAAM,CAACK,CAAAA,OAAQT,UAAU,QAAQ,CAACS,KAAK,IAAI;QAClE;IACJ;IAEA,WAAW;QACP,OAAOC,UAAU,IAAI,CAAC,KAAK;IAC/B;IAEA,QAAQD,IAAU,EAAE;QAChB,IAAI,CAAC,KAAK,GAAG;eAAI,IAAI,CAAC,KAAK;YAAEA;SAAK;IACtC;IAEA,eAAe;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,aAAa;QACT,OAAO;YACH,WAAW,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,cAAc,IAAI,CAAC,OAAO,CAAC,YAAY;YACvC,SAAS,IAAI,CAAC,OAAO,CAAC,QAAQ;QAClC;IACJ;IAEA,MAAc,eACVE,MAAwB,EACxBC,YAAqB,EACrBC,cAAuB,EACvBC,cAAuB,EACzB;QACE,OAAO,MAAM,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAC5CH,QACAC,cACAC,gBACAC;IAER;AACJ"}

package/components/IconPicker/IconRepository.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/IconPicker/IconRepository.test.js

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { IconRepository } from "./IconRepository.js";
+const mockIconTypes = [
+    {
+        name: "icon"
+    },
+    {
+        name: "emoji"
+    },
+    {
+        name: "custom"
+    }
+];
+const mockIcons = [
+    {
+        type: "emoji",
+        name: "thumbs_up",
+        value: "👍",
+        category: "People & Body",
+        skinToneSupport: true
+    },
+    {
+        type: "icon",
+        name: "regular_address-book",
+        value: '<path fill="currentColor" d="M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z"/>',
+        category: "Business"
+    }
+];
+const mockIconPackProviders = [
+    {
+        name: "mock_icons",
+        getIcons: async ()=>mockIcons
+    }
+];
+describe("IconRepository", ()=>{
+    const icon = {
+        type: "icon",
+        name: "solid_bullseye",
+        value: '<path fill="currentColor" d="M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z"/>',
+        category: "Business",
+        color: "#282fe6"
+    };
+    it("should create an IconRepository and load icons and iconTypes", async ()=>{
+        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+        expect(repository.getIconTypes()).toEqual(mockIconTypes);
+        expect(repository.getIcons()).toEqual([]);
+        await repository.loadIcons();
+        expect(repository.getIcons()).toEqual(mockIcons);
+    });
+    it("should create an IconRepository and add icon", ()=>{
+        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+        expect(repository.getIcons()).toEqual([]);
+        repository.addIcon(icon);
+        expect(repository.getIcons()).toEqual([
+            icon
+        ]);
+    });
+});
+
+//# sourceMappingURL=IconRepository.test.js.map

package/components/IconPicker/IconRepository.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/IconRepository.test.js","sources":["../../../src/components/IconPicker/IconRepository.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { IconRepository } from \"./IconRepository.js\";\nimport type { Icon } from \"./types.js\";\n\nconst mockIconTypes = [{ name: \"icon\" }, { name: \"emoji\" }, { name: \"custom\" }];\n\nconst mockIcons: Icon[] = [\n    {\n        type: \"emoji\",\n        name: \"thumbs_up\",\n        value: \"👍\",\n        category: \"People & Body\",\n        skinToneSupport: true\n    },\n    {\n        type: \"icon\",\n        name: \"regular_address-book\",\n        value: '<path fill=\"currentColor\" d=\"M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z\"/>',\n        category: \"Business\"\n    }\n];\n\nconst mockIconPackProviders = [\n    {\n        name: \"mock_icons\",\n        getIcons: async () => {\n            return mockIcons;\n        }\n    }\n];\n\ndescribe(\"IconRepository\", () => {\n    const icon: Icon = {\n        type: \"icon\",\n        name: \"solid_bullseye\",\n        value: '<path fill=\"currentColor\" d=\"M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z\"/>',\n        category: \"Business\",\n        color: \"#282fe6\"\n    };\n\n    it(\"should create an IconRepository and load icons and iconTypes\", async () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // repository should get the expected iconTypes array\n        expect(repository.getIconTypes()).toEqual(mockIconTypes);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // load icons\n        await repository.loadIcons();\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual(mockIcons);\n    });\n\n    it(\"should create an IconRepository and add icon\", () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // add icon\n        repository.addIcon(icon);\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual([icon]);\n    });\n});\n"],"names":["mockIconTypes","mockIcons","mockIconPackProviders","describe","icon","it","repository","IconRepository","expect"],"mappings":";;AAIA,MAAMA,gBAAgB;IAAC;QAAE,MAAM;IAAO;IAAG;QAAE,MAAM;IAAQ;IAAG;QAAE,MAAM;IAAS;CAAE;AAE/E,MAAMC,YAAoB;IACtB;QACI,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;QACV,iBAAiB;IACrB;IACA;QACI,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;IACd;CACH;AAED,MAAMC,wBAAwB;IAC1B;QACI,MAAM;QACN,UAAU,UACCD;IAEf;CACH;AAEDE,SAAS,kBAAkB;IACvB,MAAMC,OAAa;QACf,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;QACV,OAAO;IACX;IAEAC,GAAG,gEAAgE;QAE/D,MAAMC,aAAa,IAAIC,eAAeP,eAAeE;QAGrDM,OAAOF,WAAW,YAAY,IAAI,OAAO,CAACN;QAG1CQ,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAAC,EAAE;QAGxC,MAAMA,WAAW,SAAS;QAG1BE,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAACL;IAC1C;IAEAI,GAAG,gDAAgD;QAE/C,MAAMC,aAAa,IAAIC,eAAeP,eAAeE;QAGrDM,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAAC,EAAE;QAGxCA,WAAW,OAAO,CAACF;QAGnBI,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAAC;YAACF;SAAK;IAChD;AACJ"}

package/components/IconPicker/IconRepositoryFactory.d.ts

@@ -0,0 +1,9 @@
+import { IconRepository } from "./IconRepository.js";
+import type { IconPackProviderInterface as IconPackProvider, IconType } from "./config/index.js";
+declare class IconRepositoryFactory {
+    private cache;
+    getRepository(iconTypes: IconType[], iconPackProviders: IconPackProvider[]): IconRepository;
+    private getCacheKey;
+}
+export declare const iconRepositoryFactory: IconRepositoryFactory;
+export {};

package/components/IconPicker/IconRepositoryFactory.js

@@ -0,0 +1,21 @@
+import { IconRepository } from "./IconRepository.js";
+class IconRepositoryFactory {
+    getRepository(iconTypes, iconPackProviders) {
+        const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);
+        if (!this.cache.has(cacheKey)) this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));
+        return this.cache.get(cacheKey);
+    }
+    getCacheKey(iconTypes, iconPackProviders) {
+        return [
+            ...iconTypes.map((iconType)=>iconType.name).sort(),
+            ...iconPackProviders.map((provider)=>provider.name).sort()
+        ].join("#");
+    }
+    constructor(){
+        this.cache = new Map();
+    }
+}
+const iconRepositoryFactory = new IconRepositoryFactory();
+export { iconRepositoryFactory };
+
+//# sourceMappingURL=IconRepositoryFactory.js.map

package/components/IconPicker/IconRepositoryFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/IconRepositoryFactory.js","sources":["../../../src/components/IconPicker/IconRepositoryFactory.ts"],"sourcesContent":["import { IconRepository } from \"./IconRepository.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\n\nclass IconRepositoryFactory {\n    private cache: Map<string, IconRepository> = new Map();\n\n    getRepository(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);\n\n        if (!this.cache.has(cacheKey)) {\n            this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));\n        }\n\n        return this.cache.get(cacheKey) as IconRepository;\n    }\n\n    private getCacheKey(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        return [\n            ...iconTypes.map(iconType => iconType.name).sort(),\n            ...iconPackProviders.map(provider => provider.name).sort()\n        ].join(\"#\");\n    }\n}\n\nexport const iconRepositoryFactory = new IconRepositoryFactory();\n"],"names":["IconRepositoryFactory","iconTypes","iconPackProviders","cacheKey","IconRepository","iconType","provider","Map","iconRepositoryFactory"],"mappings":";AAGA,MAAMA;IAGF,cAAcC,SAAqB,EAAEC,iBAAqC,EAAE;QACxE,MAAMC,WAAW,IAAI,CAAC,WAAW,CAACF,WAAWC;QAE7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC,WAChB,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,UAAU,IAAIC,eAAeH,WAAWC;QAG3D,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC;IAC1B;IAEQ,YAAYF,SAAqB,EAAEC,iBAAqC,EAAE;QAC9E,OAAO;eACAD,UAAU,GAAG,CAACI,CAAAA,WAAYA,SAAS,IAAI,EAAE,IAAI;eAC7CH,kBAAkB,GAAG,CAACI,CAAAA,WAAYA,SAAS,IAAI,EAAE,IAAI;SAC3D,CAAC,IAAI,CAAC;IACX;;aAjBQ,KAAK,GAAgC,IAAIC;;AAkBrD;AAEO,MAAMC,wBAAwB,IAAIR"}

package/components/IconPicker/Loading.d.ts

@@ -0,0 +1,14 @@
+export declare class Loading {
+    private _isLoading;
+    private _loadingLabel;
+    private _feedback;
+    private _success;
+    constructor(isLoading?: boolean);
+    startLoading(label?: string): void;
+    stopLoadingWithSuccess(message?: string): void;
+    stopLoadingWithError(message?: string): void;
+    get isLoading(): boolean;
+    get loadingLabel(): string;
+    get feedback(): string;
+    runCallbackWithLoading<T>(callback: () => Promise<T>, loadingLabel?: string, successMessage?: string, failureMessage?: string): Promise<T>;
+}

package/components/IconPicker/Loading.js

@@ -0,0 +1,51 @@
+import { makeAutoObservable } from "mobx";
+class Loading {
+    constructor(isLoading = false){
+        this._isLoading = isLoading;
+        this._loadingLabel = "";
+        this._feedback = "";
+        this._success = false;
+        makeAutoObservable(this);
+    }
+    startLoading(label) {
+        this._isLoading = true;
+        this._loadingLabel = label || "";
+        this._feedback = "";
+        this._success = false;
+    }
+    stopLoadingWithSuccess(message) {
+        this._isLoading = false;
+        this._loadingLabel = "";
+        this._feedback = message || "";
+        this._success = true;
+    }
+    stopLoadingWithError(message) {
+        this._isLoading = false;
+        this._loadingLabel = "";
+        this._feedback = message || "";
+        this._success = false;
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get loadingLabel() {
+        return this._loadingLabel;
+    }
+    get feedback() {
+        return this._feedback;
+    }
+    async runCallbackWithLoading(callback, loadingLabel, successMessage, failureMessage) {
+        try {
+            this.startLoading(loadingLabel);
+            const result = await callback();
+            this.stopLoadingWithSuccess(successMessage);
+            return result;
+        } catch (e) {
+            this.stopLoadingWithError(e.message || failureMessage);
+            throw e;
+        }
+    }
+}
+export { Loading };
+
+//# sourceMappingURL=Loading.js.map