@webiny/app-admin 6.3.0 → 6.4.0-beta.0

package/components/IconPicker/IconPicker.js

@@ -1,36 +1,34 @@
-import React, { useMemo, useEffect } from "react";
+import react, { useEffect, useMemo } 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 IconPicker = (props)=>{
+    const { iconTypes, iconPackProviders } = useIconPickerConfig();
+    const repository = iconRepositoryFactory.getRepository(iconTypes, iconPackProviders);
+    const presenter = useMemo(()=>new IconPickerPresenter(repository, props.size), [
+        repository,
+        props.size
+    ]);
+    useEffect(()=>{
+        presenter.load(props.value);
+    }, [
+        repository,
+        props.value
+    ]);
+    return /*#__PURE__*/ react.createElement(IconPickerComponent, {
+        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));
+const IconRendererWithProvider = ({ icon, ...props })=>{
+    if (!icon) return null;
+    return /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon,
+        ...props
+    }, /*#__PURE__*/ react.createElement(IconRenderer, null));
 };
 IconPicker.Icon = IconRendererWithProvider;
 IconPicker.IconPickerTab = IconPickerTab;

package/components/IconPicker/IconPicker.js.map

@@ -1 +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":[]}
+{"version":3,"file":"components/IconPicker/IconPicker.js","sources":["../../../src/components/IconPicker/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"],"names":["IconPicker","props","iconTypes","iconPackProviders","useIconPickerConfig","repository","iconRepositoryFactory","presenter","useMemo","IconPickerPresenter","useEffect","IconPickerComponent","IconRendererWithProvider","icon","IconProvider","IconRenderer","IconPickerTab"],"mappings":";;;;;;;AAUA,MAAMA,aAAa,CAACC;IAChB,MAAM,EAAEC,SAAS,EAAEC,iBAAiB,EAAE,GAAGC;IACzC,MAAMC,aAAaC,sBAAsB,aAAa,CAACJ,WAAWC;IAElE,MAAMI,YAAYC,QAAQ,IACf,IAAIC,oBAAoBJ,YAAYJ,MAAM,IAAI,GACtD;QAACI;QAAYJ,MAAM,IAAI;KAAC;IAE3BS,UAAU;QACNH,UAAU,IAAI,CAACN,MAAM,KAAK;IAC9B,GAAG;QAACI;QAAYJ,MAAM,KAAK;KAAC;IAE5B,OAAO,WAAP,GAAO,oBAACU,qBAAmBA;QAAC,WAAWJ;QAAY,GAAGN,KAAK;;AAC/D;AAOA,MAAMW,2BAA2B,CAAC,EAAEC,IAAI,EAAE,GAAGZ,OAAsC;IAC/E,IAAI,CAACY,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACC,cAAYA;QAAC,MAAMD;QAAO,GAAGZ,KAAK;qBAC/B,oBAACc,cAAYA;AAGzB;AAEAf,WAAW,IAAI,GAAGY;AAClBZ,WAAW,aAAa,GAAGgB"}

package/components/IconPicker/IconPickerComponent.js

@@ -1,81 +1,65 @@
-import React, { useEffect, useCallback, useMemo } from "react";
+import react, { useCallback, useEffect, 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
-  }));
+const IconPickerComponent = observer(({ presenter, label, description, removable, required, disabled, ...props })=>{
+    const { value, onChange } = props;
+    const { isValid: validationIsValid, message: validationMessage } = props.validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        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(void 0);
+        }
+    }, [
+        onChange
+    ]);
+    const handleOnOpenChange = useCallback((open)=>{
+        if (open) return presenter.openMenu();
+        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
+    }));
 });
+export { IconPickerComponent };
 
 //# sourceMappingURL=IconPickerComponent.js.map

package/components/IconPicker/IconPickerComponent.js.map

@@ -1 +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":[]}
+{"version":3,"file":"components/IconPicker/IconPickerComponent.js","sources":["../../../src/components/IconPicker/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"],"names":["IconPickerComponent","observer","presenter","label","description","removable","required","disabled","props","value","onChange","validationIsValid","validationMessage","invalid","useMemo","activeTab","isMenuOpened","isLoading","iconTypes","selectedIcon","size","useEffect","isEqual","JSON","removeIcon","useCallback","undefined","handleOnOpenChange","open","IconPickerPresenterProvider","FormComponentLabel","FormComponentDescription","PopoverPrimitive","IconPickerTrigger","ICON_PICKER_SIZE","IconPickerContent","FormComponentErrorMessage"],"mappings":";;;;;;;AA2BO,MAAMA,sBAAsBC,SAC/B,CAAC,EACGC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACoB;IACvB,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAC5B,MAAM,EAAE,SAASG,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGJ,MAAM,UAAU,IAAI,CAAC;IACxF,MAAMK,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAC9E,MAAM,EAAEI,SAAS,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAEC,YAAY,EAAEC,IAAI,EAAE,GAAGlB,UAAU,EAAE;IAE1FmB,UAAU;QACN,IAAIX,YAAYS,gBAAgB,CAACG,QAAQH,cAAcV,QACnDC,SAASS;IAEjB,GAAG;QAACI,KAAK,SAAS,CAACJ;KAAc;IAEjC,MAAMK,aAAaC,YAAY;QAC3B,IAAIf,UAAU;YACVR,UAAU,OAAO,CAAC;YAClBQ,SAASgB;QACb;IACJ,GAAG;QAAChB;KAAS;IAEb,MAAMiB,qBAAqBF,YACvB,CAACG;QACG,IAAIA,MACA,OAAO1B,UAAU,QAAQ;QAEzB,OAAOA,UAAU,SAAS;IAElC,GACA;QAACA,UAAU,QAAQ;QAAEA,UAAU,SAAS;KAAC;IAG7C,OAAO,WAAP,GACI,oBAAC2B,6BAA2BA;QAAC,WAAW3B;qBACpC,oBAAC4B,oBAAkBA;QAAC,MAAM3B;QAAO,UAAUG;QAAU,UAAUC;sBAC/D,oBAACwB,0BAAwBA;QAAC,MAAM3B;sBAChC,oBAAC4B,kBAAgBA;QAAC,MAAMhB;QAAc,cAAcW;qBAChD,oBAACK,iBAAiB,OAAO,sBACrB,oBAACC,mBAAiBA;QAAC,MAAMd;uBAE7B,oBAACa,iBAAiB,OAAO;QACrB,OAAO;YAAE,OAAOZ,SAASc,iBAAiB,KAAK,GAAG,UAAU;QAAQ;qBAEpE,oBAACC,mBAAiBA;QACd,SAASlB;QACT,WAAWR,SAASJ;QACpB,WAAWa;QACX,WAAWH;QACX,YAAYS;wBAIxB,oBAACY,2BAAyBA;QAAC,MAAMxB;QAAmB,SAASC;;AAGzE"}

package/components/IconPicker/IconPickerPresenter.js

@@ -1,77 +1,71 @@
 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;
+class IconPickerPresenter {
+    constructor(repository, size){
+        this.selectedIcon = null;
+        this.filter = "";
+        this.activeTab = void 0;
+        this.isMenuOpened = false;
+        this.repository = repository;
+        this.size = size;
+        makeAutoObservable(this);
     }
-    await this.repository.loadIcons();
-    if (icon && !icon?.value) {
-      this.detectSelectedIcon(icon);
+    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;
+    get vm() {
+        return {
+            activeTab: this.activeTab,
+            isMenuOpened: this.isMenuOpened,
+            isLoading: this.repository.getLoading().isLoading,
+            icons: this.getFilteredIcons(),
+            iconTypes: this.repository.getIconTypes(),
+            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;
     }
-  }
 }
+export { IconPickerPresenter };
 
 //# sourceMappingURL=IconPickerPresenter.js.map

package/components/IconPicker/IconPickerPresenter.js.map

@@ -1 +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":[]}
+{"version":3,"file":"components/IconPicker/IconPickerPresenter.js","sources":["../../../src/components/IconPicker/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"],"names":["IconPickerPresenter","repository","size","undefined","makeAutoObservable","icon","toJS","value","hyphenUnderscoreRegex","icons","type","iconTypes","iconType","iconsByType","iconByName","x"],"mappings":";AA0BO,MAAMA;IAQT,YAAYC,UAA0B,EAAEC,IAAa,CAAE;aAN/C,YAAY,GAAgB;aAC5B,MAAM,GAAG;aACT,SAAS,GAAuBC;aAChC,YAAY,GAAG;QAInB,IAAI,CAAC,UAAU,GAAGF;QAClB,IAAI,CAAC,IAAI,GAAGC;QACZE,mBAAmB,IAAI;IAC3B;IAEA,MAAM,KAAKC,OAAoB,IAAI,EAAE;QACjC,IAAIA,MAAM,OACN,IAAI,CAAC,YAAY,GAAGA;QAGxB,MAAM,IAAI,CAAC,UAAU,CAAC,SAAS;QAE/B,IAAIA,QAAQ,CAACA,MAAM,OACf,IAAI,CAAC,kBAAkB,CAACA;IAEhC;IAEA,IAAI,KAAK;QACL,OAAO;YACH,WAAW,IAAI,CAAC,SAAS;YACzB,cAAc,IAAI,CAAC,YAAY;YAC/B,WAAW,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,SAAS;YACjD,OAAO,IAAI,CAAC,gBAAgB;YAC5B,WAAW,IAAI,CAAC,UAAU,CAAC,YAAY;YAEvC,cAAcC,KAAK,IAAI,CAAC,YAAY;YACpC,QAAQ,IAAI,CAAC,MAAM;YACnB,MAAM,IAAI,CAAC,IAAI;QACnB;IACJ;IAEA,QAAQD,IAAU,EAAE;QAChB,IAAI,CAAC,UAAU,CAAC,OAAO,CAACA;IAC5B;IAEA,YAAkB;QACd,IAAI,CAAC,YAAY,GAAG;IACxB;IAEA,WAAiB;QACb,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,cAAc;IACvB;IAEA,aAAaE,KAAc,EAAE;QACzB,IAAI,CAAC,SAAS,GAAGA;IACrB;IAEA,QAAQF,IAAiB,EAAE;QACvB,IAAI,CAAC,YAAY,GAAGA;IACxB;IAEA,UAAUE,KAAa,EAAE;QACrB,IAAI,CAAC,MAAM,GAAGA;IAClB;IAEQ,mBAAmB;QACvB,MAAMC,wBAAwB;QAC9B,MAAMC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ;QAEtC,OAAOA,MAAM,MAAM,CAACJ,CAAAA,OAChBA,KAAK,IAAI,CACJ,OAAO,CAACG,uBAAuB,KAC/B,WAAW,GACX,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW;IAE7C;IAEQ,mBAAmBE,IAAY,EAAE;QACrC,MAAMC,YAAY,IAAI,CAAC,UAAU,CAAC,YAAY;QAC9C,MAAMC,WAAWD,UAAU,IAAI,CAACE,CAAAA,cAAeA,YAAY,IAAI,KAAKH;QAEpE,OAAOE,UAAU,QAAQD,SAAS,CAAC,EAAE,CAAC,IAAI;IAC9C;IAEQ,gBAAgB;QACpB,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,IAAI;IACjD;IAEQ,iBAAiB;QACrB,IAAI,CAAC,YAAY,CACb,IAAI,CAAC,YAAY,GACX,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAC9C,IAAI,CAAC,aAAa;IAEhC;IAEQ,mBAAmBN,IAAU,EAAE;QACnC,MAAMS,aAAa,IAAI,CAAC,UAAU,CAC7B,QAAQ,GACR,IAAI,CAACC,CAAAA,IAAKA,EAAE,IAAI,KAAKV,KAAK,IAAI,IAAIA,KAAK,IAAI,KAAKU,EAAE,IAAI;QAE3D,IAAID,YACA,IAAI,CAAC,YAAY,GAAGA;IAE5B;AACJ"}