@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.06b2ede40f

package/components/IconPicker/IconPickerTab.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Icon } from "./types";
+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,159 @@
+import React, { Fragment } from "react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { List } from "react-virtualized";
+import groupBy from "lodash/groupBy";
+import { Text, DelayedOnChange, Input, Tabs, Icon as IconComponent } from "@webiny/admin-ui";
+import { makeDecoratable } from "@webiny/react-composition";
+import { useIconPicker } from "./IconPickerPresenterProvider";
+import { useIconType } from "./config/IconType";
+import { IconPickerCell, IconPickerRow } from "./components";
+import { ICON_PICKER_SIZE } from "./types";
+const COLUMN_COUNT = 8;
+export const IconPickerTabRenderer = makeDecoratable("IconPickerTabRenderer", () => null);
+const getRows = (icons, size) => {
+  // Group the icons by their category.
+  const groupedObjects = groupBy(icons, "category");
+  const rows = [];
+
+  // Iterate over each category in the grouped icons.
+  for (const key in groupedObjects) {
+    // Skip any group where the key is `undefined` (these icons will be handled separately).
+    if (key !== "undefined") {
+      const rowIcons = groupedObjects[key];
+
+      // Add a row for the category name.
+      rows.push({
+        type: "category-name",
+        name: key
+      });
+
+      // Split the icons in this category into groups of COLUMN_COUNT and add them as rows.
+      while (rowIcons.length) {
+        rows.push({
+          type: "icons",
+          icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
+        });
+      }
+    }
+  }
+
+  // Handle icons that don't have a category (key is `undefined`).
+  if (groupedObjects.undefined) {
+    const rowIcons = groupedObjects.undefined;
+
+    // Add a row for the `Uncategorized` category name.
+    rows.push({
+      type: "category-name",
+      name: "Uncategorized"
+    });
+
+    // Split these icons into groups of COLUMN_COUNT and add them as rows.
+    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: rows.length === 0,
+    rows,
+    rowCount: rows.length
+  };
+};
+const RowRenderer = ({
+  row,
+  style,
+  cellDecorator,
+  onIconClick
+}) => {
+  const presenter = useIconPicker();
+  const value = presenter.vm.selectedIcon;
+  if (row.type === "category-name") {
+    return /*#__PURE__*/React.createElement(IconPickerRow, {
+      style: style
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-uppercase wby-self-end wby-text-neutral-muted wby-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;
+export 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: "wby-flex wby-items-center wby-justify-center wby-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(IconComponent, {
+        icon: /*#__PURE__*/React.createElement(SearchIcon, null),
+        label: "Search icons"
+      })
+    })), actions ? /*#__PURE__*/React.createElement("div", null, actions) : null), /*#__PURE__*/React.createElement("div", {
+      className: "wby-relative"
+    }, isEmpty ? /*#__PURE__*/React.createElement("div", {
+      className: "wby-pt-md wby-text-neutral-strong"
+    }, /*#__PURE__*/React.createElement(Text, null, "No results found.")) : /*#__PURE__*/React.createElement(List, {
+      className: "wby-outline-none",
+      rowRenderer: ({
+        key,
+        ...props
+      }) => /*#__PURE__*/React.createElement(RowRenderer, Object.assign({
+        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
+    })))
+  });
+};
+
+//# sourceMappingURL=IconPickerTab.js.map

package/components/IconPicker/IconPickerTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","ReactComponent","SearchIcon","List","groupBy","Text","DelayedOnChange","Input","Tabs","Icon","IconComponent","makeDecoratable","useIconPicker","useIconType","IconPickerCell","IconPickerRow","ICON_PICKER_SIZE","COLUMN_COUNT","IconPickerTabRenderer","getRows","icons","size","groupedObjects","rows","key","rowIcons","push","type","name","length","splice","SMALL","undefined","useIconTypeRows","presenter","vm","filter","icon","isEmpty","rowCount","RowRenderer","row","style","cellDecorator","onIconClick","value","selectedIcon","createElement","className","map","item","itemKey","isActive","noopDecorator","cell","IconPickerTab","label","actions","onChange","Tab","trigger","content","setFilter","placeholder","variant","startIcon","rowRenderer","props","Object","assign","index","width","height","rowHeight"],"sources":["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\";\n\nimport { Text, DelayedOnChange, Input, Tabs, Icon as IconComponent } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nimport { useIconPicker } from \"./IconPickerPresenterProvider\";\nimport { useIconType } from \"./config/IconType\";\nimport { IconPickerCell, IconPickerRow } from \"./components\";\nimport type { Icon, IconPickerGridRow } from \"./types\";\nimport { ICON_PICKER_SIZE } from \"./types\";\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\n                    size={\"sm\"}\n                    className={\"wby-uppercase wby-self-end wby-text-neutral-muted wby-mb-sm\"}\n                >\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={\"wby-flex wby-items-center wby-justify-center wby-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={\"wby-relative\"}>\n                        {isEmpty ? (\n                            <div className={\"wby-pt-md wby-text-neutral-strong\"}>\n                                <Text>{\"No results found.\"}</Text>\n                            </div>\n                        ) : (\n                            <List\n                                className={\"wby-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"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconRenderer.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { Icon } from "./types";
+export declare const IconRenderer: ((props: unknown) => JSX.Element | null) & {
+    original: (props: unknown) => JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: unknown) => JSX.Element | null) & {
+        original: (props: unknown) => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: unknown) => JSX.Element | null) & {
+        original: (props: unknown) => 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,27 @@
+import React from "react";
+import { toJS } from "mobx";
+import { makeDecoratable, createVoidComponent } from "@webiny/react-composition";
+export const IconRenderer = makeDecoratable("IconPickerIcon", createVoidComponent());
+const IconContext = /*#__PURE__*/React.createContext(undefined);
+export const IconProvider = ({
+  icon,
+  size = 32,
+  children
+}) => {
+  // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.
+  return /*#__PURE__*/React.createElement(IconContext.Provider, {
+    value: {
+      icon: toJS(icon),
+      size
+    }
+  }, children);
+};
+export function useIcon() {
+  const context = React.useContext(IconContext);
+  if (!context) {
+    throw Error(`Missing <IconProvider> in the component tree!`);
+  }
+  return context;
+}
+
+//# sourceMappingURL=IconRenderer.js.map

package/components/IconPicker/IconRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","toJS","makeDecoratable","createVoidComponent","IconRenderer","IconContext","createContext","undefined","IconProvider","icon","size","children","createElement","Provider","value","useIcon","context","useContext","Error"],"sources":["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\";\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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,MAAM;AAE3B,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,2BAA2B;AAIhF,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC,gBAAgB,EAAEC,mBAAmB,CAAC,CAAC,CAAC;AAOpF,MAAME,WAAW,gBAAGL,KAAK,CAACM,aAAa,CAA0BC,SAAS,CAAC;AAQ3E,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,IAAI,GAAG,EAAE;EAAEC;AAA4B,CAAC,KAAK;EAC9E;EACA,oBACIX,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACQ,QAAQ;IAACC,KAAK,EAAE;MAAEL,IAAI,EAAER,IAAI,CAACQ,IAAI,CAAC;MAAEC;IAAK;EAAE,GAAEC,QAA+B,CAAC;AAElG,CAAC;AAED,OAAO,SAASI,OAAOA,CAAA,EAA0C;EAC7D,MAAMC,OAAO,GAAGhB,KAAK,CAACiB,UAAU,CAACZ,WAAW,CAAC;EAC7C,IAAI,CAACW,OAAO,EAAE;IACV,MAAME,KAAK,CAAC,+CAA+C,CAAC;EAChE;EACA,OAAOF,OAAO;AAClB","ignoreList":[]}

package/components/IconPicker/IconRepository.d.ts

@@ -0,0 +1,19 @@
+import type { IconPackProviderInterface as IconPackProvider, IconType } from "./config";
+import type { Icon } from "./types";
+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,47 @@
+import cloneDeep from "lodash/cloneDeep";
+import { makeAutoObservable, runInAction } from "mobx";
+import { Loading } from "./Loading";
+export class IconRepository {
+  icons = [];
+  constructor(iconTypes, iconPackProviders) {
+    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(() => {
+      // Make sure we only work with known icon types.
+      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);
+  }
+}
+
+//# sourceMappingURL=IconRepository.js.map

package/components/IconPicker/IconRepository.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneDeep","makeAutoObservable","runInAction","Loading","IconRepository","icons","constructor","iconTypes","iconPackProviders","loading","loadIcons","length","runWithLoading","Promise","all","map","provider","getIcons","flat","iconType","name","filter","icon","includes","type","addIcon","getIconTypes","getLoading","isLoading","loadingLabel","message","feedback","action","successMessage","failureMessage","runCallbackWithLoading"],"sources":["IconRepository.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport { makeAutoObservable, runInAction } from \"mobx\";\n\nimport { Loading } from \"./Loading\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config\";\nimport type { Icon } from \"./types\";\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"],"mappings":"AAAA,OAAOA,SAAS,MAAM,kBAAkB;AACxC,SAASC,kBAAkB,EAAEC,WAAW,QAAQ,MAAM;AAEtD,SAASC,OAAO;AAIhB,OAAO,MAAMC,cAAc,CAAC;EAIhBC,KAAK,GAAW,EAAE;EAE1BC,WAAWA,CAACC,SAAqB,EAAEC,iBAAqC,EAAE;IACtE,IAAI,CAACD,SAAS,GAAGA,SAAS;IAC1B,IAAI,CAACE,OAAO,GAAG,IAAIN,OAAO,CAAC,IAAI,CAAC;IAChC,IAAI,CAACK,iBAAiB,GAAGA,iBAAiB;IAC1CP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,MAAMS,SAASA,CAAA,EAAG;IACd,IAAI,IAAI,CAACL,KAAK,CAACM,MAAM,GAAG,CAAC,EAAE;MACvB;IACJ;IAEA,MAAMN,KAAK,GAAG,MAAM,IAAI,CAACO,cAAc,CAAC,YAAY;MAChD,MAAMP,KAAK,GAAG,MAAMQ,OAAO,CAACC,GAAG,CAC3B,IAAI,CAACN,iBAAiB,CAACO,GAAG,CAACC,QAAQ,IAAIA,QAAQ,CAACC,QAAQ,CAAC,CAAC,CAC9D,CAAC;MACD,OAAOZ,KAAK,CAACa,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAMX,SAAS,GAAG,IAAI,CAACA,SAAS,CAACQ,GAAG,CAACI,QAAQ,IAAIA,QAAQ,CAACC,IAAI,CAAC;IAE/DlB,WAAW,CAAC,MAAM;MACd;MACA,IAAI,CAACG,KAAK,GAAGA,KAAK,CAACgB,MAAM,CAACC,IAAI,IAAIf,SAAS,CAACgB,QAAQ,CAACD,IAAI,CAACE,IAAI,CAAC,CAAC;IACpE,CAAC,CAAC;EACN;EAEAP,QAAQA,CAAA,EAAG;IACP,OAAOjB,SAAS,CAAC,IAAI,CAACK,KAAK,CAAC;EAChC;EAEAoB,OAAOA,CAACH,IAAU,EAAE;IAChB,IAAI,CAACjB,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,EAAEiB,IAAI,CAAC;EACtC;EAEAI,YAAYA,CAAA,EAAG;IACX,OAAO,IAAI,CAACnB,SAAS;EACzB;EAEAoB,UAAUA,CAAA,EAAG;IACT,OAAO;MACHC,SAAS,EAAE,IAAI,CAACnB,OAAO,CAACmB,SAAS;MACjCC,YAAY,EAAE,IAAI,CAACpB,OAAO,CAACoB,YAAY;MACvCC,OAAO,EAAE,IAAI,CAACrB,OAAO,CAACsB;IAC1B,CAAC;EACL;EAEA,MAAcnB,cAAcA,CACxBoB,MAAwB,EACxBH,YAAqB,EACrBI,cAAuB,EACvBC,cAAuB,EACzB;IACE,OAAO,MAAM,IAAI,CAACzB,OAAO,CAAC0B,sBAAsB,CAC5CH,MAAM,EACNH,YAAY,EACZI,cAAc,EACdC,cACJ,CAAC;EACL;AACJ","ignoreList":[]}

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

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

package/components/IconPicker/IconRepository.test.js

@@ -0,0 +1,66 @@
+import { IconRepository } from "./IconRepository";
+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 () => {
+    return 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 () => {
+    // create repository
+    const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+
+    // repository should get the expected iconTypes array
+    expect(repository.getIconTypes()).toEqual(mockIconTypes);
+
+    // getIcons should return empty array
+    expect(repository.getIcons()).toEqual([]);
+
+    // load icons
+    await repository.loadIcons();
+
+    // getIcons should return the expected icons array
+    expect(repository.getIcons()).toEqual(mockIcons);
+  });
+  it("should create an IconRepository and add icon", () => {
+    // create repository
+    const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+
+    // getIcons should return empty array
+    expect(repository.getIcons()).toEqual([]);
+
+    // add icon
+    repository.addIcon(icon);
+
+    // getIcons should return the expected icons array
+    expect(repository.getIcons()).toEqual([icon]);
+  });
+});
+
+//# sourceMappingURL=IconRepository.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["IconRepository","mockIconTypes","name","mockIcons","type","value","category","skinToneSupport","mockIconPackProviders","getIcons","describe","icon","color","it","repository","expect","getIconTypes","toEqual","loadIcons","addIcon"],"sources":["IconRepository.test.ts"],"sourcesContent":["import { IconRepository } from \"./IconRepository\";\nimport type { Icon } from \"./types\";\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"],"mappings":"AAAA,SAASA,cAAc;AAGvB,MAAMC,aAAa,GAAG,CAAC;EAAEC,IAAI,EAAE;AAAO,CAAC,EAAE;EAAEA,IAAI,EAAE;AAAQ,CAAC,EAAE;EAAEA,IAAI,EAAE;AAAS,CAAC,CAAC;AAE/E,MAAMC,SAAiB,GAAG,CACtB;EACIC,IAAI,EAAE,OAAO;EACbF,IAAI,EAAE,WAAW;EACjBG,KAAK,EAAE,IAAI;EACXC,QAAQ,EAAE,eAAe;EACzBC,eAAe,EAAE;AACrB,CAAC,EACD;EACIH,IAAI,EAAE,MAAM;EACZF,IAAI,EAAE,sBAAsB;EAC5BG,KAAK,EAAE,inBAAinB;EACxnBC,QAAQ,EAAE;AACd,CAAC,CACJ;AAED,MAAME,qBAAqB,GAAG,CAC1B;EACIN,IAAI,EAAE,YAAY;EAClBO,QAAQ,EAAE,MAAAA,CAAA,KAAY;IAClB,OAAON,SAAS;EACpB;AACJ,CAAC,CACJ;AAEDO,QAAQ,CAAC,gBAAgB,EAAE,MAAM;EAC7B,MAAMC,IAAU,GAAG;IACfP,IAAI,EAAE,MAAM;IACZF,IAAI,EAAE,gBAAgB;IACtBG,KAAK,EAAE,wQAAwQ;IAC/QC,QAAQ,EAAE,UAAU;IACpBM,KAAK,EAAE;EACX,CAAC;EAEDC,EAAE,CAAC,8DAA8D,EAAE,YAAY;IAC3E;IACA,MAAMC,UAAU,GAAG,IAAId,cAAc,CAACC,aAAa,EAAEO,qBAAqB,CAAC;;IAE3E;IACAO,MAAM,CAACD,UAAU,CAACE,YAAY,CAAC,CAAC,CAAC,CAACC,OAAO,CAAChB,aAAa,CAAC;;IAExD;IACAc,MAAM,CAACD,UAAU,CAACL,QAAQ,CAAC,CAAC,CAAC,CAACQ,OAAO,CAAC,EAAE,CAAC;;IAEzC;IACA,MAAMH,UAAU,CAACI,SAAS,CAAC,CAAC;;IAE5B;IACAH,MAAM,CAACD,UAAU,CAACL,QAAQ,CAAC,CAAC,CAAC,CAACQ,OAAO,CAACd,SAAS,CAAC;EACpD,CAAC,CAAC;EAEFU,EAAE,CAAC,8CAA8C,EAAE,MAAM;IACrD;IACA,MAAMC,UAAU,GAAG,IAAId,cAAc,CAACC,aAAa,EAAEO,qBAAqB,CAAC;;IAE3E;IACAO,MAAM,CAACD,UAAU,CAACL,QAAQ,CAAC,CAAC,CAAC,CAACQ,OAAO,CAAC,EAAE,CAAC;;IAEzC;IACAH,UAAU,CAACK,OAAO,CAACR,IAAI,CAAC;;IAExB;IACAI,MAAM,CAACD,UAAU,CAACL,QAAQ,CAAC,CAAC,CAAC,CAACQ,OAAO,CAAC,CAACN,IAAI,CAAC,CAAC;EACjD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/components/IconPicker/IconRepositoryFactory.d.ts

@@ -0,0 +1,9 @@
+import { IconRepository } from "./IconRepository";
+import type { IconPackProviderInterface as IconPackProvider, IconType } from "./config";
+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,17 @@
+import { IconRepository } from "./IconRepository";
+class IconRepositoryFactory {
+  cache = new Map();
+  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("#");
+  }
+}
+export const iconRepositoryFactory = new IconRepositoryFactory();
+
+//# sourceMappingURL=IconRepositoryFactory.js.map

package/components/IconPicker/IconRepositoryFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconRepository","IconRepositoryFactory","cache","Map","getRepository","iconTypes","iconPackProviders","cacheKey","getCacheKey","has","set","get","map","iconType","name","sort","provider","join","iconRepositoryFactory"],"sources":["IconRepositoryFactory.ts"],"sourcesContent":["import { IconRepository } from \"./IconRepository\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config\";\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"],"mappings":"AAAA,SAASA,cAAc;AAGvB,MAAMC,qBAAqB,CAAC;EAChBC,KAAK,GAAgC,IAAIC,GAAG,CAAC,CAAC;EAEtDC,aAAaA,CAACC,SAAqB,EAAEC,iBAAqC,EAAE;IACxE,MAAMC,QAAQ,GAAG,IAAI,CAACC,WAAW,CAACH,SAAS,EAAEC,iBAAiB,CAAC;IAE/D,IAAI,CAAC,IAAI,CAACJ,KAAK,CAACO,GAAG,CAACF,QAAQ,CAAC,EAAE;MAC3B,IAAI,CAACL,KAAK,CAACQ,GAAG,CAACH,QAAQ,EAAE,IAAIP,cAAc,CAACK,SAAS,EAAEC,iBAAiB,CAAC,CAAC;IAC9E;IAEA,OAAO,IAAI,CAACJ,KAAK,CAACS,GAAG,CAACJ,QAAQ,CAAC;EACnC;EAEQC,WAAWA,CAACH,SAAqB,EAAEC,iBAAqC,EAAE;IAC9E,OAAO,CACH,GAAGD,SAAS,CAACO,GAAG,CAACC,QAAQ,IAAIA,QAAQ,CAACC,IAAI,CAAC,CAACC,IAAI,CAAC,CAAC,EAClD,GAAGT,iBAAiB,CAACM,GAAG,CAACI,QAAQ,IAAIA,QAAQ,CAACF,IAAI,CAAC,CAACC,IAAI,CAAC,CAAC,CAC7D,CAACE,IAAI,CAAC,GAAG,CAAC;EACf;AACJ;AAEA,OAAO,MAAMC,qBAAqB,GAAG,IAAIjB,qBAAqB,CAAC,CAAC","ignoreList":[]}

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,50 @@
+import { makeAutoObservable } from "mobx";
+export 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;
+    }
+  }
+}
+
+//# sourceMappingURL=Loading.js.map

package/components/IconPicker/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","Loading","constructor","isLoading","_isLoading","_loadingLabel","_feedback","_success","startLoading","label","stopLoadingWithSuccess","message","stopLoadingWithError","loadingLabel","feedback","runCallbackWithLoading","callback","successMessage","failureMessage","result","e"],"sources":["Loading.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\n\nexport class Loading {\n    private _isLoading: boolean;\n    private _loadingLabel: string;\n    private _feedback: string;\n    private _success: boolean;\n\n    constructor(isLoading = false) {\n        this._isLoading = isLoading;\n        this._loadingLabel = \"\";\n        this._feedback = \"\";\n        this._success = false;\n        makeAutoObservable(this);\n    }\n\n    startLoading(label?: string) {\n        this._isLoading = true;\n        this._loadingLabel = label || \"\";\n        this._feedback = \"\";\n        this._success = false;\n    }\n\n    stopLoadingWithSuccess(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = true;\n    }\n\n    stopLoadingWithError(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = false;\n    }\n\n    get isLoading() {\n        return this._isLoading;\n    }\n\n    get loadingLabel() {\n        return this._loadingLabel;\n    }\n\n    get feedback() {\n        return this._feedback;\n    }\n\n    async runCallbackWithLoading<T>(\n        callback: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ): Promise<T> {\n        try {\n            this.startLoading(loadingLabel);\n            const result = await callback();\n            this.stopLoadingWithSuccess(successMessage);\n            return result;\n        } catch (e) {\n            this.stopLoadingWithError(e.message || failureMessage);\n            throw e;\n        }\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,OAAO,MAAMC,OAAO,CAAC;EAMjBC,WAAWA,CAACC,SAAS,GAAG,KAAK,EAAE;IAC3B,IAAI,CAACC,UAAU,GAAGD,SAAS;IAC3B,IAAI,CAACE,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAG,EAAE;IACnB,IAAI,CAACC,QAAQ,GAAG,KAAK;IACrBP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAQ,YAAYA,CAACC,KAAc,EAAE;IACzB,IAAI,CAACL,UAAU,GAAG,IAAI;IACtB,IAAI,CAACC,aAAa,GAAGI,KAAK,IAAI,EAAE;IAChC,IAAI,CAACH,SAAS,GAAG,EAAE;IACnB,IAAI,CAACC,QAAQ,GAAG,KAAK;EACzB;EAEAG,sBAAsBA,CAACC,OAAgB,EAAE;IACrC,IAAI,CAACP,UAAU,GAAG,KAAK;IACvB,IAAI,CAACC,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAGK,OAAO,IAAI,EAAE;IAC9B,IAAI,CAACJ,QAAQ,GAAG,IAAI;EACxB;EAEAK,oBAAoBA,CAACD,OAAgB,EAAE;IACnC,IAAI,CAACP,UAAU,GAAG,KAAK;IACvB,IAAI,CAACC,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAGK,OAAO,IAAI,EAAE;IAC9B,IAAI,CAACJ,QAAQ,GAAG,KAAK;EACzB;EAEA,IAAIJ,SAASA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACC,UAAU;EAC1B;EAEA,IAAIS,YAAYA,CAAA,EAAG;IACf,OAAO,IAAI,CAACR,aAAa;EAC7B;EAEA,IAAIS,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACR,SAAS;EACzB;EAEA,MAAMS,sBAAsBA,CACxBC,QAA0B,EAC1BH,YAAqB,EACrBI,cAAuB,EACvBC,cAAuB,EACb;IACV,IAAI;MACA,IAAI,CAACV,YAAY,CAACK,YAAY,CAAC;MAC/B,MAAMM,MAAM,GAAG,MAAMH,QAAQ,CAAC,CAAC;MAC/B,IAAI,CAACN,sBAAsB,CAACO,cAAc,CAAC;MAC3C,OAAOE,MAAM;IACjB,CAAC,CAAC,OAAOC,CAAC,EAAE;MACR,IAAI,CAACR,oBAAoB,CAACQ,CAAC,CAACT,OAAO,IAAIO,cAAc,CAAC;MACtD,MAAME,CAAC;IACX;EACJ;AACJ","ignoreList":[]}

package/components/IconPicker/components/IconPickerCell.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type VariantProps } from "@webiny/admin-ui";
+import type { Icon } from "..";
+declare const iconPickerCellVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface IconPickerCellProps extends VariantProps<typeof iconPickerCellVariants> {
+    icon: Icon;
+    onIconClick: (icon: Icon) => void;
+}
+declare const IconPickerCell: ({ isActive, icon, onIconClick }: IconPickerCellProps) => React.JSX.Element;
+export { IconPickerCell, IconPickerCellProps };

package/components/IconPicker/components/IconPickerCell.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { cn, cva } from "@webiny/admin-ui";
+import { IconProvider, IconRenderer } from "../IconRenderer";
+const iconPickerCellVariants = cva(["wby-flex wby-justify-center wby-items-center", "wby-rounded-md wby-cursor-pointer wby-size-xl wby-p-xs", "hover:wby-bg-neutral-dimmed wby-transition-all wby-duration-500 wby-ease-out"], {
+  variants: {
+    isActive: {
+      true: "wby-bg-neutral-dimmed"
+    }
+  }
+});
+const IconPickerCell = ({
+  isActive,
+  icon,
+  onIconClick
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(iconPickerCellVariants({
+      isActive
+    })),
+    onClick: () => onIconClick(icon)
+  }, /*#__PURE__*/React.createElement(IconProvider, {
+    icon: icon
+  }, /*#__PURE__*/React.createElement(IconRenderer, null)));
+};
+export { IconPickerCell };
+
+//# sourceMappingURL=IconPickerCell.js.map

package/components/IconPicker/components/IconPickerCell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","IconProvider","IconRenderer","iconPickerCellVariants","variants","isActive","true","IconPickerCell","icon","onIconClick","createElement","className","onClick"],"sources":["IconPickerCell.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"@webiny/admin-ui\";\nimport type { Icon } from \"~/components/IconPicker\";\nimport { IconProvider, IconRenderer } from \"~/components/IconPicker/IconRenderer\";\n\nconst iconPickerCellVariants = cva(\n    [\n        \"wby-flex wby-justify-center wby-items-center\",\n        \"wby-rounded-md wby-cursor-pointer wby-size-xl wby-p-xs\",\n        \"hover:wby-bg-neutral-dimmed wby-transition-all wby-duration-500 wby-ease-out\"\n    ],\n    {\n        variants: {\n            isActive: {\n                true: \"wby-bg-neutral-dimmed\"\n            }\n        }\n    }\n);\n\ninterface IconPickerCellProps extends VariantProps<typeof iconPickerCellVariants> {\n    icon: Icon;\n    onIconClick: (icon: Icon) => void;\n}\n\nconst IconPickerCell = ({ isActive, icon, onIconClick }: IconPickerCellProps) => {\n    return (\n        <div className={cn(iconPickerCellVariants({ isActive }))} onClick={() => onIconClick(icon)}>\n            <IconProvider icon={icon}>\n                <IconRenderer />\n            </IconProvider>\n        </div>\n    );\n};\n\nexport { IconPickerCell, IconPickerCellProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,QAA2B,kBAAkB;AAE7D,SAASC,YAAY,EAAEC,YAAY;AAEnC,MAAMC,sBAAsB,GAAGH,GAAG,CAC9B,CACI,8CAA8C,EAC9C,wDAAwD,EACxD,8EAA8E,CACjF,EACD;EACII,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAOD,MAAMC,cAAc,GAAGA,CAAC;EAAEF,QAAQ;EAAEG,IAAI;EAAEC;AAAiC,CAAC,KAAK;EAC7E,oBACIX,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAEZ,EAAE,CAACI,sBAAsB,CAAC;MAAEE;IAAS,CAAC,CAAC,CAAE;IAACO,OAAO,EAAEA,CAAA,KAAMH,WAAW,CAACD,IAAI;EAAE,gBACvFV,KAAA,CAAAY,aAAA,CAACT,YAAY;IAACO,IAAI,EAAEA;EAAK,gBACrBV,KAAA,CAAAY,aAAA,CAACR,YAAY,MAAE,CACL,CACb,CAAC;AAEd,CAAC;AAED,SAASK,cAAc","ignoreList":[]}

package/components/IconPicker/components/IconPickerContent.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { IconType } from "../config";
+interface IconPickerContentProps {
+    loading?: boolean;
+    iconTypes: IconType[];
+    activeTab?: string;
+    removeIcon: () => void;
+    removable?: boolean;
+}
+declare const IconPickerContent: ({ activeTab, iconTypes, loading, removeIcon, removable }: IconPickerContentProps) => React.JSX.Element;
+export { IconPickerContent, type IconPickerContentProps };