@webiny/app-admin 0.0.0-unstable.615a930a68 → 0.0.0-unstable.61c048f412

package/components/FloatingPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","createPortal","Draggable","Resizable","useKeyHandler","PanelRoot","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ResizeHandle","FloatingPanel","dragHandle","shortcut","children","isVisible","setIsVisible","size","setSize","width","height","position","setPosition","x","y","addKeyHandler","removeKeyHandler","e","preventDefault","onDragStop","_","data","onResize","createElement","Fragment","handle","onStop","className","style","display","document","body"],"sources":["FloatingPanel.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Draggable, { type DraggableEventHandler } from \"react-draggable\";\nimport type { ResizableProps } from \"react-resizable\";\nimport { Resizable } from \"react-resizable\";\nimport styled from \"@emotion/styled\";\nimport { useKeyHandler } from \"~/hooks/index.js\";\n\nconst PanelRoot = styled.div`\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 100000;\n    width: 0;\n    height: 0;\n`;\n\nconst ResizeHandle = styled.div`\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    bottom: 0;\n    right: 0;\n    padding: 0 3px 3px 0;\n    background: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=\")\n        no-repeat bottom right;\n    background-origin: content-box;\n    box-sizing: border-box;\n    cursor: se-resize;\n`;\n\nexport interface FloatingPanelRenderProp {\n    (params: { height: number; width: number }): React.ReactNode;\n}\n\nexport interface FloatingPanelProps {\n    shortcut: string;\n    dragHandle: string;\n    children: FloatingPanelRenderProp;\n}\n\nexport const FloatingPanel = ({ dragHandle, shortcut, children }: FloatingPanelProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    const [size, setSize] = useState({ width: 700, height: 600 });\n    const [position, setPosition] = useState({ x: 100, y: 100 });\n    const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n    useEffect(() => {\n        addKeyHandler(shortcut, e => {\n            e.preventDefault();\n            setIsVisible(isVisible => !isVisible);\n        });\n\n        return () => removeKeyHandler(shortcut);\n    }, [setIsVisible]);\n\n    const onDragStop: DraggableEventHandler = (_, data) => {\n        setPosition({ x: data.x, y: data.y });\n    };\n\n    const onResize: ResizableProps[\"onResize\"] = (_, { size }) => {\n        setSize({ width: size.width, height: size.height });\n    };\n\n    return createPortal(\n        <>\n            <PanelRoot>\n                <Draggable handle={dragHandle} onStop={onDragStop} position={position}>\n                    <Resizable\n                        width={size.width}\n                        height={size.height}\n                        onResize={onResize}\n                        handle={<ResizeHandle />}\n                    >\n                        <div\n                            className={\"bg-neutral-base relative border-sm border-accent-default\"}\n                            style={{\n                                display: isVisible ? \"block\" : \"none\",\n                                width: size.width + \"px\",\n                                height: size.height + \"px\"\n                            }}\n                        >\n                            <div className={\"floating-panel\"}>{children(size)}</div>\n                        </div>\n                    </Resizable>\n                </Draggable>\n            </PanelRoot>\n        </>,\n        document.body\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconPicker.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { IconPickerProps } from "./IconPickerComponent.js";
+import type { Icon } from "./types.js";
+declare const IconPicker: {
+    (props: IconPickerProps): React.JSX.Element;
+    Icon: ({ icon, ...props }: IconRendererWithProviderProps) => React.JSX.Element | null;
+    IconPickerTab: ({ label, value, actions, onChange, cellDecorator }: import("./IconPickerTab.js").IconPickerTabProps) => React.JSX.Element;
+};
+interface IconRendererWithProviderProps {
+    icon?: Icon;
+    size?: number;
+}
+export { IconPicker };

package/components/IconPicker/IconPicker.js

@@ -0,0 +1,39 @@
+import React, { useMemo, useEffect } from "react";
+import { useIconPickerConfig } from "./config/index.js";
+import { iconRepositoryFactory } from "./IconRepositoryFactory.js";
+import { IconPickerPresenter } from "./IconPickerPresenter.js";
+import { IconPickerComponent } from "./IconPickerComponent.js";
+import { IconProvider, IconRenderer } from "./IconRenderer.js";
+import { IconPickerTab } from "./IconPickerTab.js";
+const IconPicker = props => {
+  const {
+    iconTypes,
+    iconPackProviders
+  } = useIconPickerConfig();
+  const repository = iconRepositoryFactory.getRepository(iconTypes, iconPackProviders);
+  const presenter = useMemo(() => {
+    return new IconPickerPresenter(repository, props.size);
+  }, [repository, props.size]);
+  useEffect(() => {
+    presenter.load(props.value);
+  }, [repository, props.value]);
+  return /*#__PURE__*/React.createElement(IconPickerComponent, Object.assign({
+    presenter: presenter
+  }, props));
+};
+const IconRendererWithProvider = ({
+  icon,
+  ...props
+}) => {
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(IconProvider, Object.assign({
+    icon: icon
+  }, props), /*#__PURE__*/React.createElement(IconRenderer, null));
+};
+IconPicker.Icon = IconRendererWithProvider;
+IconPicker.IconPickerTab = IconPickerTab;
+export { IconPicker };
+
+//# sourceMappingURL=IconPicker.js.map

package/components/IconPicker/IconPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useEffect","useIconPickerConfig","iconRepositoryFactory","IconPickerPresenter","IconPickerComponent","IconProvider","IconRenderer","IconPickerTab","IconPicker","props","iconTypes","iconPackProviders","repository","getRepository","presenter","size","load","value","createElement","Object","assign","IconRendererWithProvider","icon","Icon"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useMemo, useEffect } from \"react\";\nimport { useIconPickerConfig } from \"./config/index.js\";\nimport { iconRepositoryFactory } from \"./IconRepositoryFactory.js\";\nimport { IconPickerPresenter } from \"./IconPickerPresenter.js\";\nimport type { IconPickerProps } from \"./IconPickerComponent.js\";\nimport { IconPickerComponent } from \"./IconPickerComponent.js\";\nimport { IconProvider, IconRenderer } from \"./IconRenderer.js\";\nimport { IconPickerTab } from \"./IconPickerTab.js\";\nimport type { Icon } from \"./types.js\";\n\nconst IconPicker = (props: IconPickerProps) => {\n    const { iconTypes, iconPackProviders } = useIconPickerConfig();\n    const repository = iconRepositoryFactory.getRepository(iconTypes, iconPackProviders);\n\n    const presenter = useMemo(() => {\n        return new IconPickerPresenter(repository, props.size);\n    }, [repository, props.size]);\n\n    useEffect(() => {\n        presenter.load(props.value);\n    }, [repository, props.value]);\n\n    return <IconPickerComponent presenter={presenter} {...props} />;\n};\n\ninterface IconRendererWithProviderProps {\n    icon?: Icon;\n    size?: number;\n}\n\nconst IconRendererWithProvider = ({ icon, ...props }: IconRendererWithProviderProps) => {\n    if (!icon) {\n        return null;\n    }\n\n    return (\n        <IconProvider icon={icon} {...props}>\n            <IconRenderer />\n        </IconProvider>\n    );\n};\n\nIconPicker.Icon = IconRendererWithProvider;\nIconPicker.IconPickerTab = IconPickerTab;\n\nexport { IconPicker };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,SAAS,QAAQ,OAAO;AACjD,SAASC,mBAAmB;AAC5B,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAE5B,SAASC,mBAAmB;AAC5B,SAASC,YAAY,EAAEC,YAAY;AACnC,SAASC,aAAa;AAGtB,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EAC3C,MAAM;IAAEC,SAAS;IAAEC;EAAkB,CAAC,GAAGV,mBAAmB,CAAC,CAAC;EAC9D,MAAMW,UAAU,GAAGV,qBAAqB,CAACW,aAAa,CAACH,SAAS,EAAEC,iBAAiB,CAAC;EAEpF,MAAMG,SAAS,GAAGf,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAII,mBAAmB,CAACS,UAAU,EAAEH,KAAK,CAACM,IAAI,CAAC;EAC1D,CAAC,EAAE,CAACH,UAAU,EAAEH,KAAK,CAACM,IAAI,CAAC,CAAC;EAE5Bf,SAAS,CAAC,MAAM;IACZc,SAAS,CAACE,IAAI,CAACP,KAAK,CAACQ,KAAK,CAAC;EAC/B,CAAC,EAAE,CAACL,UAAU,EAAEH,KAAK,CAACQ,KAAK,CAAC,CAAC;EAE7B,oBAAOnB,KAAA,CAAAoB,aAAA,CAACd,mBAAmB,EAAAe,MAAA,CAAAC,MAAA;IAACN,SAAS,EAAEA;EAAU,GAAKL,KAAK,CAAG,CAAC;AACnE,CAAC;AAOD,MAAMY,wBAAwB,GAAGA,CAAC;EAAEC,IAAI;EAAE,GAAGb;AAAqC,CAAC,KAAK;EACpF,IAAI,CAACa,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIxB,KAAA,CAAAoB,aAAA,CAACb,YAAY,EAAAc,MAAA,CAAAC,MAAA;IAACE,IAAI,EAAEA;EAAK,GAAKb,KAAK,gBAC/BX,KAAA,CAAAoB,aAAA,CAACZ,YAAY,MAAE,CACL,CAAC;AAEvB,CAAC;AAEDE,UAAU,CAACe,IAAI,GAAGF,wBAAwB;AAC1Cb,UAAU,CAACD,aAAa,GAAGA,aAAa;AAExC,SAASC,UAAU","ignoreList":[]}

package/components/IconPicker/IconPickerComponent.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { FormComponentProps } from "@webiny/admin-ui";
+import type { IconPickerPresenter } from "./IconPickerPresenter.js";
+import type { Icon } from "./types.js";
+import { ICON_PICKER_SIZE } from "./types.js";
+export interface IconPickerProps extends FormComponentProps {
+    size?: ICON_PICKER_SIZE;
+    removable?: boolean;
+    value?: Icon;
+    onChange?: (value: Icon | undefined) => void;
+}
+export interface IconPickerComponentProps extends IconPickerProps {
+    presenter: IconPickerPresenter;
+}
+export declare const IconPickerComponent: (({ presenter, label, description, removable, required, disabled, ...props }: IconPickerComponentProps) => React.JSX.Element) & {
+    displayName: string;
+};

package/components/IconPicker/IconPickerComponent.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useCallback, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import isEqual from "lodash/isEqual.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, PopoverPrimitive } from "@webiny/admin-ui";
+import { IconPickerContent, IconPickerTrigger } from "./components/index.js";
+import { IconPickerPresenterProvider } from "./IconPickerPresenterProvider.js";
+import { ICON_PICKER_SIZE } from "./types.js";
+export const IconPickerComponent = observer(({
+  presenter,
+  label,
+  description,
+  removable,
+  required,
+  disabled,
+  ...props
+}) => {
+  const {
+    value,
+    onChange
+  } = props;
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = props.validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  const {
+    activeTab,
+    isMenuOpened,
+    isLoading,
+    iconTypes,
+    selectedIcon,
+    size
+  } = presenter.vm;
+  useEffect(() => {
+    if (onChange && selectedIcon && !isEqual(selectedIcon, value)) {
+      onChange(selectedIcon);
+    }
+  }, [JSON.stringify(selectedIcon)]);
+  const removeIcon = useCallback(() => {
+    if (onChange) {
+      presenter.setIcon(null);
+      onChange(undefined);
+    }
+  }, [onChange]);
+  const handleOnOpenChange = useCallback(open => {
+    if (open) {
+      return presenter.openMenu();
+    } else {
+      return presenter.closeMenu();
+    }
+  }, [presenter.openMenu, presenter.closeMenu]);
+  return /*#__PURE__*/React.createElement(IconPickerPresenterProvider, {
+    presenter: presenter
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    required: required,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description
+  }), /*#__PURE__*/React.createElement(PopoverPrimitive, {
+    open: isMenuOpened,
+    onOpenChange: handleOnOpenChange
+  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, null, /*#__PURE__*/React.createElement(IconPickerTrigger, {
+    icon: selectedIcon
+  })), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
+    style: {
+      width: size === ICON_PICKER_SIZE.SMALL ? "248px" : "328px"
+    }
+  }, /*#__PURE__*/React.createElement(IconPickerContent, {
+    loading: isLoading,
+    removable: value && removable,
+    iconTypes: iconTypes,
+    activeTab: activeTab,
+    removeIcon: removeIcon
+  }))), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid
+  }));
+});
+
+//# sourceMappingURL=IconPickerComponent.js.map

package/components/IconPicker/IconPickerComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useCallback","useMemo","observer","isEqual","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","PopoverPrimitive","IconPickerContent","IconPickerTrigger","IconPickerPresenterProvider","ICON_PICKER_SIZE","IconPickerComponent","presenter","label","description","removable","required","disabled","props","value","onChange","isValid","validationIsValid","message","validationMessage","validation","invalid","activeTab","isMenuOpened","isLoading","iconTypes","selectedIcon","size","vm","JSON","stringify","removeIcon","setIcon","undefined","handleOnOpenChange","open","openMenu","closeMenu","createElement","text","onOpenChange","Trigger","icon","Content","style","width","SMALL","loading"],"sources":["IconPickerComponent.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport isEqual from \"lodash/isEqual.js\";\nimport type { FormComponentProps } from \"@webiny/admin-ui\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    PopoverPrimitive\n} from \"@webiny/admin-ui\";\nimport { IconPickerContent, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerPresenter } from \"./IconPickerPresenter.js\";\nimport { IconPickerPresenterProvider } from \"./IconPickerPresenterProvider.js\";\nimport type { Icon } from \"./types.js\";\nimport { ICON_PICKER_SIZE } from \"./types.js\";\n\nexport interface IconPickerProps extends FormComponentProps {\n    size?: ICON_PICKER_SIZE;\n    removable?: boolean;\n    value?: Icon;\n    onChange?: (value: Icon | undefined) => void;\n}\n\nexport interface IconPickerComponentProps extends IconPickerProps {\n    presenter: IconPickerPresenter;\n}\n\nexport const IconPickerComponent = observer(\n    ({\n        presenter,\n        label,\n        description,\n        removable,\n        required,\n        disabled,\n        ...props\n    }: IconPickerComponentProps) => {\n        const { value, onChange } = props;\n        const { isValid: validationIsValid, message: validationMessage } = props.validation || {};\n        const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n        const { activeTab, isMenuOpened, isLoading, iconTypes, selectedIcon, size } = presenter.vm;\n\n        useEffect(() => {\n            if (onChange && selectedIcon && !isEqual(selectedIcon, value)) {\n                onChange(selectedIcon);\n            }\n        }, [JSON.stringify(selectedIcon)]);\n\n        const removeIcon = useCallback(() => {\n            if (onChange) {\n                presenter.setIcon(null);\n                onChange(undefined);\n            }\n        }, [onChange]);\n\n        const handleOnOpenChange = useCallback(\n            (open: boolean) => {\n                if (open) {\n                    return presenter.openMenu();\n                } else {\n                    return presenter.closeMenu();\n                }\n            },\n            [presenter.openMenu, presenter.closeMenu]\n        );\n\n        return (\n            <IconPickerPresenterProvider presenter={presenter}>\n                <FormComponentLabel text={label} required={required} disabled={disabled} />\n                <FormComponentDescription text={description} />\n                <PopoverPrimitive open={isMenuOpened} onOpenChange={handleOnOpenChange}>\n                    <PopoverPrimitive.Trigger>\n                        <IconPickerTrigger icon={selectedIcon} />\n                    </PopoverPrimitive.Trigger>\n                    <PopoverPrimitive.Content\n                        style={{ width: size === ICON_PICKER_SIZE.SMALL ? \"248px\" : \"328px\" }}\n                    >\n                        <IconPickerContent\n                            loading={isLoading}\n                            removable={value && removable}\n                            iconTypes={iconTypes}\n                            activeTab={activeTab}\n                            removeIcon={removeIcon}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive>\n                <FormComponentErrorMessage text={validationMessage} invalid={invalid} />\n            </IconPickerPresenterProvider>\n        );\n    }\n);\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconPickerPresenter.d.ts

@@ -0,0 +1,53 @@
+import type { IconRepository } from "./IconRepository.js";
+import type { Icon } from "./types.js";
+import type { IconType } from "./config/index.js";
+export interface IconPickerPresenterInterface {
+    load(icon: Icon): Promise<void>;
+    setIcon(icon: Icon): void;
+    addIcon(icon: Icon): void;
+    setFilter(value: string): void;
+    setActiveTab(index: string): void;
+    openMenu(): void;
+    closeMenu(): void;
+    get vm(): {
+        isLoading: boolean;
+        activeTab?: string;
+        isMenuOpened: boolean;
+        icons: Icon[];
+        iconTypes: IconType[];
+        selectedIcon: Icon | null;
+        filter: string;
+        size?: string;
+    };
+}
+export declare class IconPickerPresenter implements IconPickerPresenterInterface {
+    private repository;
+    private selectedIcon;
+    private filter;
+    private activeTab;
+    private isMenuOpened;
+    private size;
+    constructor(repository: IconRepository, size?: string);
+    load(icon?: Icon | null): Promise<void>;
+    get vm(): {
+        activeTab: string | undefined;
+        isMenuOpened: boolean;
+        isLoading: boolean;
+        icons: Icon[];
+        iconTypes: IconType[];
+        selectedIcon: Icon | null;
+        filter: string;
+        size: string | undefined;
+    };
+    addIcon(icon: Icon): void;
+    closeMenu(): void;
+    openMenu(): void;
+    setActiveTab(value?: string): void;
+    setIcon(icon: Icon | null): void;
+    setFilter(value: string): void;
+    private getFilteredIcons;
+    private getActiveTabByType;
+    private getDefaultTab;
+    private resetActiveTab;
+    private detectSelectedIcon;
+}

package/components/IconPicker/IconPickerPresenter.js

@@ -0,0 +1,77 @@
+import { makeAutoObservable, toJS } from "mobx";
+export class IconPickerPresenter {
+  selectedIcon = null;
+  filter = "";
+  activeTab = undefined;
+  isMenuOpened = false;
+  constructor(repository, size) {
+    this.repository = repository;
+    this.size = size;
+    makeAutoObservable(this);
+  }
+  async load(icon = null) {
+    if (icon?.value) {
+      this.selectedIcon = icon;
+    }
+    await this.repository.loadIcons();
+    if (icon && !icon?.value) {
+      this.detectSelectedIcon(icon);
+    }
+  }
+  get vm() {
+    return {
+      activeTab: this.activeTab,
+      isMenuOpened: this.isMenuOpened,
+      isLoading: this.repository.getLoading().isLoading,
+      icons: this.getFilteredIcons(),
+      iconTypes: this.repository.getIconTypes(),
+      // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.
+      selectedIcon: toJS(this.selectedIcon),
+      filter: this.filter,
+      size: this.size
+    };
+  }
+  addIcon(icon) {
+    this.repository.addIcon(icon);
+  }
+  closeMenu() {
+    this.isMenuOpened = false;
+  }
+  openMenu() {
+    this.isMenuOpened = true;
+    this.resetActiveTab();
+  }
+  setActiveTab(value) {
+    this.activeTab = value;
+  }
+  setIcon(icon) {
+    this.selectedIcon = icon;
+  }
+  setFilter(value) {
+    this.filter = value;
+  }
+  getFilteredIcons() {
+    const hyphenUnderscoreRegex = /[-_]/g;
+    const icons = this.repository.getIcons();
+    return icons.filter(icon => icon.name.replace(hyphenUnderscoreRegex, " ").toLowerCase().includes(this.filter.toLowerCase()));
+  }
+  getActiveTabByType(type) {
+    const iconTypes = this.repository.getIconTypes();
+    const iconType = iconTypes.find(iconsByType => iconsByType.name === type);
+    return iconType?.name || iconTypes[0].name;
+  }
+  getDefaultTab() {
+    return this.repository.getIconTypes()[0].name;
+  }
+  resetActiveTab() {
+    this.setActiveTab(this.selectedIcon ? this.getActiveTabByType(this.selectedIcon.type) : this.getDefaultTab());
+  }
+  detectSelectedIcon(icon) {
+    const iconByName = this.repository.getIcons().find(x => x.name === icon.name && icon.type === x.type);
+    if (iconByName) {
+      this.selectedIcon = iconByName;
+    }
+  }
+}
+
+//# sourceMappingURL=IconPickerPresenter.js.map

package/components/IconPicker/IconPickerPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","toJS","IconPickerPresenter","selectedIcon","filter","activeTab","undefined","isMenuOpened","constructor","repository","size","load","icon","value","loadIcons","detectSelectedIcon","vm","isLoading","getLoading","icons","getFilteredIcons","iconTypes","getIconTypes","addIcon","closeMenu","openMenu","resetActiveTab","setActiveTab","setIcon","setFilter","hyphenUnderscoreRegex","getIcons","name","replace","toLowerCase","includes","getActiveTabByType","type","iconType","find","iconsByType","getDefaultTab","iconByName","x"],"sources":["IconPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\n\nimport type { IconRepository } from \"./IconRepository.js\";\nimport type { Icon } from \"./types.js\";\nimport type { IconType } from \"./config/index.js\";\n\nexport interface IconPickerPresenterInterface {\n    load(icon: Icon): Promise<void>;\n    setIcon(icon: Icon): void;\n    addIcon(icon: Icon): void;\n    setFilter(value: string): void;\n    setActiveTab(index: string): void;\n    openMenu(): void;\n    closeMenu(): void;\n    get vm(): {\n        isLoading: boolean;\n        activeTab?: string;\n        isMenuOpened: boolean;\n        icons: Icon[];\n        iconTypes: IconType[];\n        selectedIcon: Icon | null;\n        filter: string;\n        size?: string;\n    };\n}\n\nexport class IconPickerPresenter implements IconPickerPresenterInterface {\n    private repository: IconRepository;\n    private selectedIcon: Icon | null = null;\n    private filter = \"\";\n    private activeTab: string | undefined = undefined;\n    private isMenuOpened = false;\n    private size: string | undefined;\n\n    constructor(repository: IconRepository, size?: string) {\n        this.repository = repository;\n        this.size = size;\n        makeAutoObservable(this);\n    }\n\n    async load(icon: Icon | null = null) {\n        if (icon?.value) {\n            this.selectedIcon = icon;\n        }\n\n        await this.repository.loadIcons();\n\n        if (icon && !icon?.value) {\n            this.detectSelectedIcon(icon);\n        }\n    }\n\n    get vm() {\n        return {\n            activeTab: this.activeTab,\n            isMenuOpened: this.isMenuOpened,\n            isLoading: this.repository.getLoading().isLoading,\n            icons: this.getFilteredIcons(),\n            iconTypes: this.repository.getIconTypes(),\n            // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.\n            selectedIcon: toJS(this.selectedIcon),\n            filter: this.filter,\n            size: this.size\n        };\n    }\n\n    addIcon(icon: Icon) {\n        this.repository.addIcon(icon);\n    }\n\n    closeMenu(): void {\n        this.isMenuOpened = false;\n    }\n\n    openMenu(): void {\n        this.isMenuOpened = true;\n        this.resetActiveTab();\n    }\n\n    setActiveTab(value?: string) {\n        this.activeTab = value;\n    }\n\n    setIcon(icon: Icon | null) {\n        this.selectedIcon = icon;\n    }\n\n    setFilter(value: string) {\n        this.filter = value;\n    }\n\n    private getFilteredIcons() {\n        const hyphenUnderscoreRegex = /[-_]/g;\n        const icons = this.repository.getIcons();\n\n        return icons.filter(icon =>\n            icon.name\n                .replace(hyphenUnderscoreRegex, \" \")\n                .toLowerCase()\n                .includes(this.filter.toLowerCase())\n        );\n    }\n\n    private getActiveTabByType(type: string) {\n        const iconTypes = this.repository.getIconTypes();\n        const iconType = iconTypes.find(iconsByType => iconsByType.name === type);\n\n        return iconType?.name || iconTypes[0].name;\n    }\n\n    private getDefaultTab() {\n        return this.repository.getIconTypes()[0].name;\n    }\n\n    private resetActiveTab() {\n        this.setActiveTab(\n            this.selectedIcon\n                ? this.getActiveTabByType(this.selectedIcon.type)\n                : this.getDefaultTab()\n        );\n    }\n\n    private detectSelectedIcon(icon: Icon) {\n        const iconByName = this.repository\n            .getIcons()\n            .find(x => x.name === icon.name && icon.type === x.type);\n\n        if (iconByName) {\n            this.selectedIcon = iconByName;\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/components/IconPicker/IconPickerPresenter.test.js

@@ -0,0 +1,110 @@
+import { describe, it, expect, beforeEach } 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 () => {
+    return 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 () => {
+    // let's load icons and set a predefined `selectedIcon`
+    await presenter.load(icon);
+
+    // `vm` should have the expected `selectedIcon` definition
+    expect(presenter.vm.selectedIcon).toEqual(icon);
+
+    // `vm` should have the expected `icons` definition
+    expect(presenter.vm.icons).toEqual(mockIcons);
+  });
+  it("should be able to select an icon", async () => {
+    // let's load icons
+    await presenter.load();
+
+    // should be able to set the icon
+    presenter.setIcon(presenter.vm.icons[0]);
+
+    // `vm` should have the expected `selectedIcon` value
+    expect(presenter.vm.selectedIcon).toEqual(presenter.vm.icons[0]);
+  });
+  it("should be able to add an icon", async () => {
+    // let's load icons
+    await presenter.load();
+
+    // should be able to set the icon
+    presenter.addIcon(icon);
+
+    // `vm` should have three icons
+    expect(presenter.vm.icons.length).toBe(3);
+
+    // `vm` should have the expected `icons` value
+    expect(presenter.vm.icons).toEqual([...mockIcons, icon]);
+  });
+  it("should be able to filter icons by name", async () => {
+    // let's load icons
+    await presenter.load();
+
+    // should be able to set the filter
+    presenter.setFilter("book");
+
+    // `vm` should have only one icon
+    expect(presenter.vm.icons.length).toBe(1);
+
+    // `vm` should have filtered icon
+    expect(presenter.vm.icons[0]).toEqual(mockIcons[1]);
+  });
+  it("should be able to set active tab on menu open", async () => {
+    // let's load icons and set a predefined `selectedIcon`
+    await presenter.load(mockIcons[0]);
+
+    // default `isMenuOpened` should be false
+    expect(presenter.vm.isMenuOpened).toBe(false);
+
+    // default `activeTab` should be handled by the component itself
+    expect(presenter.vm.activeTab).toBe(undefined);
+
+    // should be able to set `isMenuOpened`
+    // should be able to set `activeTab` based on `selectedIcon` type
+    presenter.openMenu();
+
+    // `vm` should have the expected `isMenuOpened` value
+    expect(presenter.vm.isMenuOpened).toBe(true);
+
+    // `vm` should have the expected `activeTab` value
+    expect(presenter.vm.activeTab).toBe("emoji");
+  });
+});
+
+//# sourceMappingURL=IconPickerPresenter.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","beforeEach","IconPickerPresenter","IconRepository","mockIconTypes","name","mockIcons","type","value","category","skinToneSupport","mockIconPackProviders","getIcons","icon","color","presenter","repository","load","vm","selectedIcon","toEqual","icons","setIcon","addIcon","length","toBe","setFilter","isMenuOpened","activeTab","undefined","openMenu"],"sources":["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"],"mappings":"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","ignoreList":[]}

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,19 @@
+import React from "react";
+const IconPickerPresenterContext = /*#__PURE__*/React.createContext(undefined);
+export const IconPickerPresenterProvider = ({
+  presenter,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(IconPickerPresenterContext.Provider, {
+    value: presenter
+  }, children);
+};
+export function useIconPicker() {
+  const context = React.useContext(IconPickerPresenterContext);
+  if (!context) {
+    throw Error(`Missing <IconPickerPresenterProvider> in the component tree!`);
+  }
+  return context;
+}
+
+//# sourceMappingURL=IconPickerPresenterProvider.js.map

package/components/IconPicker/IconPickerPresenterProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconPickerPresenterContext","createContext","undefined","IconPickerPresenterProvider","presenter","children","createElement","Provider","value","useIconPicker","context","useContext","Error"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,MAAMC,0BAA0B,gBAAGD,KAAK,CAACE,aAAa,CAClDC,SACJ,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGA,CAAC;EACxCC,SAAS;EACTC;AAC8B,CAAC,KAAK;EACpC,oBACIN,KAAA,CAAAO,aAAA,CAACN,0BAA0B,CAACO,QAAQ;IAACC,KAAK,EAAEJ;EAAU,GACjDC,QACgC,CAAC;AAE9C,CAAC;AAED,OAAO,SAASI,aAAaA,CAAA,EAAG;EAC5B,MAAMC,OAAO,GAAGX,KAAK,CAACY,UAAU,CAACX,0BAA0B,CAAC;EAC5D,IAAI,CAACU,OAAO,EAAE;IACV,MAAME,KAAK,CAAC,8DAA8D,CAAC;EAC/E;EACA,OAAOF,OAAO;AAClB","ignoreList":[]}

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 {};