@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/components/Dialogs/DialogsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Dialogs/DialogsContext.js","sources":["../../../src/components/Dialogs/DialogsContext.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useState } from \"react\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { createProvider } from \"@webiny/app\";\nimport { generateId } from \"@webiny/utils\";\nimport { useSnackbar } from \"~/hooks/index.js\";\nimport { Dialog, type DialogProps } from \"./Dialog.js\";\nimport { DialogParamsContext } from \"./DialogParamsContext.js\";\nimport { useAdminConfig } from \"~/config/AdminConfig.js\";\n\ninterface ShowDialogParams {\n    title: ReactNode;\n    description?: ReactNode;\n    dismissible?: boolean;\n    content: ReactNode;\n    actions?: React.JSX.Element;\n    icon?: React.JSX.Element;\n    info?: ReactNode;\n    acceptLabel?: ReactNode;\n    cancelLabel?: ReactNode;\n    loadingLabel?: string;\n    dataLoadingLabel?: string;\n    onAccept?: (data: GenericFormData) => void;\n    onClose?: () => void;\n    formData?: DialogProps[\"formData\"];\n    size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n}\n\nexport interface DialogsContext {\n    showDialog: (params: ShowDialogParams) => () => void;\n    closeAllDialogs: () => void;\n    openNamedDialog: (name: string, params: Record<string, unknown>) => void;\n    closeNamedDialog: () => void;\n}\n\ninterface DialogsProviderProps {\n    children: ReactNode;\n}\n\ninterface DialogState extends ShowDialogParams {\n    id: string;\n    open: boolean;\n    loading: boolean;\n    element?: React.JSX.Element;\n}\n\nexport const initializeState = (params: Partial<DialogState> = {}): DialogState => ({\n    id: `dialog-${generateId()}`,\n    title: params.title ?? `Confirmation`,\n    description: params.description,\n    dismissible: params.dismissible,\n    icon: params.icon,\n    info: params.info,\n    content: params.content,\n    acceptLabel: params.acceptLabel === null ? null : (params.acceptLabel ?? `Confirm`),\n    cancelLabel: params.cancelLabel === null ? null : (params.cancelLabel ?? `Cancel`),\n    loadingLabel: params.loadingLabel ?? `Loading...`,\n    dataLoadingLabel: params.dataLoadingLabel ?? `Loading...`,\n    onAccept: params.onAccept,\n    onClose: params.onClose,\n    open: params.open ?? false,\n    loading: params.loading ?? false,\n    element: params.element,\n    formData: params.formData ?? {},\n    size: params.size ?? \"md\"\n});\n\nexport const DialogsContext = React.createContext<DialogsContext | undefined>(undefined);\n\ninterface NamedDialogIntent {\n    name: string;\n    params: Record<string, unknown>;\n}\n\nexport const DialogsProvider = ({ children }: DialogsProviderProps) => {\n    const { showSnackbar } = useSnackbar();\n    const [dialogs, setDialogs] = useState<Map<string, DialogState>>(new Map());\n    const [namedDialogIntent, setNamedDialogIntent] = useState<NamedDialogIntent | null>(null);\n    const { dialogs: registeredDialogs } = useAdminConfig();\n\n    const showDialog = (params: ShowDialogParams) => {\n        const newDialog = initializeState({ ...params, open: true });\n        setDialogs(dialogs => new Map(dialogs).set(newDialog.id, newDialog));\n        return () => closeDialog(newDialog.id);\n    };\n\n    const closeDialog = (id: string) => {\n        const dialog = dialogs.get(id);\n\n        // Call the onClose callback if it exists\n        if (dialog?.onClose && typeof dialog.onClose === \"function\") {\n            try {\n                dialog.onClose();\n            } catch (error) {\n                // Log error but don't prevent dialog cleanup\n                console.error(\"Error in dialog onClose callback:\", error);\n            }\n        }\n\n        setDialogs(dialogs => {\n            const newDialogs = new Map(dialogs);\n            newDialogs.delete(id);\n            return newDialogs;\n        });\n    };\n\n    const closeAllDialogs = () => {\n        setDialogs(new Map());\n    };\n\n    const openNamedDialog = (name: string, params: Record<string, unknown>) => {\n        setNamedDialogIntent({ name, params });\n    };\n\n    const closeNamedDialog = () => {\n        setNamedDialogIntent(null);\n    };\n\n    const onSubmit = async (id: string, data: GenericFormData) => {\n        const dialog = dialogs.get(id);\n        if (!dialog) {\n            return;\n        }\n\n        try {\n            if (typeof dialog.onAccept === \"function\") {\n                setDialogs(dialogs => {\n                    const newDialogs = new Map(dialogs);\n                    newDialogs.set(id, { ...dialog, loading: true });\n                    return newDialogs;\n                });\n\n                await dialog.onAccept(data);\n            }\n        } catch (error) {\n            showSnackbar(error.message);\n        } finally {\n            setDialogs(dialogs => {\n                const newDialogs = new Map(dialogs);\n                newDialogs.set(id, { ...dialog, loading: false });\n                return newDialogs;\n            });\n            closeDialog(id);\n        }\n    };\n\n    const context = {\n        showDialog,\n        closeDialog,\n        closeAllDialogs,\n        openNamedDialog,\n        closeNamedDialog\n    };\n\n    return (\n        <DialogsContext.Provider value={context}>\n            {children}\n            {Array.from(dialogs.values()).map(dialog => (\n                <Dialog\n                    key={dialog.id}\n                    description={dialog.description}\n                    dismissible={dialog.dismissible ?? true}\n                    icon={dialog.icon ?? <></>}\n                    title={dialog.title}\n                    content={dialog.content}\n                    open={dialog.open}\n                    info={dialog.info}\n                    acceptLabel={dialog.acceptLabel}\n                    cancelLabel={dialog.cancelLabel}\n                    loadingLabel={dialog.loadingLabel}\n                    dataLoadingLabel={dialog.dataLoadingLabel}\n                    loading={dialog.loading}\n                    closeDialog={() => {\n                        closeDialog(dialog.id);\n                        dialog.onClose && dialog.onClose();\n                    }}\n                    onSubmit={data => onSubmit(dialog.id, data)}\n                    formData={dialog.formData}\n                    size={dialog.size}\n                />\n            ))}\n            {namedDialogIntent &&\n                (() => {\n                    const registration = registeredDialogs.find(\n                        d => d.name === namedDialogIntent.name\n                    );\n                    if (!registration) {\n                        return null;\n                    }\n                    return (\n                        <DialogParamsContext.Provider\n                            value={{\n                                params: namedDialogIntent.params,\n                                closeDialog: closeNamedDialog\n                            }}\n                        >\n                            {registration.element}\n                        </DialogParamsContext.Provider>\n                    );\n                })()}\n        </DialogsContext.Provider>\n    );\n};\n\nexport const createDialogsProvider = () => {\n    return createProvider(Component => {\n        return function DialogsProviderDecorator({ children }: DialogsProviderProps) {\n            return (\n                <DialogsProvider>\n                    <Component>{children}</Component>\n                </DialogsProvider>\n            );\n        };\n    });\n};\n"],"names":["initializeState","params","generateId","DialogsContext","React","undefined","DialogsProvider","children","showSnackbar","useSnackbar","dialogs","setDialogs","useState","Map","namedDialogIntent","setNamedDialogIntent","registeredDialogs","useAdminConfig","showDialog","newDialog","closeDialog","id","dialog","error","console","newDialogs","closeAllDialogs","openNamedDialog","name","closeNamedDialog","onSubmit","data","context","Array","Dialog","registration","d","DialogParamsContext","createDialogsProvider","createProvider","Component"],"mappings":"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"}

package/components/Dialogs/useDialogs.d.ts

@@ -0,0 +1,2 @@
+import { DialogsContext } from "./DialogsContext.js";
+export declare const useDialogs: () => DialogsContext;

package/components/Dialogs/useDialogs.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { DialogsContext } from "./DialogsContext.js";
+const useDialogs = ()=>{
+    const context = useContext(DialogsContext);
+    if (!context) throw new Error("useDialogs must be used within a DialogsContext.Provider");
+    return context;
+};
+export { useDialogs };
+
+//# sourceMappingURL=useDialogs.js.map

package/components/Dialogs/useDialogs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Dialogs/useDialogs.js","sources":["../../../src/components/Dialogs/useDialogs.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { DialogsContext } from \"./DialogsContext.js\";\n\nexport const useDialogs = () => {\n    const context = useContext(DialogsContext);\n\n    if (!context) {\n        throw new Error(\"useDialogs must be used within a DialogsContext.Provider\");\n    }\n\n    return context;\n};\n"],"names":["useDialogs","context","useContext","DialogsContext","Error"],"mappings":";;AAIO,MAAMA,aAAa;IACtB,MAAMC,UAAUC,WAAWC;IAE3B,IAAI,CAACF,SACD,MAAM,IAAIG,MAAM;IAGpB,OAAOH;AACX"}

package/components/EmptyView.d.ts

@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 export interface EmptyViewProps {
     icon?: ReactElement;
     title: string;
-    action: ReactElement | null;
+    action?: ReactElement | null;
 }
-declare const EmptyView: React.FC<EmptyViewProps>;
-export default EmptyView;
+export declare const EmptyView: ({ icon, title, action }: EmptyViewProps) => React.JSX.Element;

package/components/EmptyView.js

@@ -1,70 +1,29 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _Typography = require("@webiny/ui/Typography");
-
-var _touch_app = require("../assets/icons/touch_app.svg");
-
-var EmptyViewWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eu81oh40",
-  label: "EmptyViewWrapper"
-})({
-  width: "100%",
-  height: "80%",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  "& .media": {
-    "& svg": {
-      width: 75,
-      height: 75,
-      fill: "var(--mdc-theme-text-icon-on-background)"
-    },
-    marginBottom: 30
-  },
-  "& .title__container": {
-    maxWidth: 276,
-    textAlign: "center",
-    marginBottom: 24,
-    "& .title": {
-      color: "var(--mdc-theme-text-secondary-on-background)"
-    }
-  },
-  "& .action__container": {
-    "& .mdc-button": {
-      padding: "0px 16px",
-      backgroundColor: "var(--mdc-theme-surface)"
-    }
-  }
-});
-
-var EmptyView = function EmptyView(_ref) {
-  var _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_touch_app.ReactComponent, null) : _ref$icon,
-      title = _ref.title,
-      action = _ref.action;
-  return /*#__PURE__*/_react.default.createElement(EmptyViewWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "media"
-  }, icon), /*#__PURE__*/_react.default.createElement("div", {
-    className: "title__container"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "subtitle1",
-    className: "title"
-  }, title)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "action__container"
-  }, action));
-};
-
-var _default = EmptyView;
-exports.default = _default;
+import react from "react";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/description.svg";
+const EmptyView = ({ icon = /*#__PURE__*/ react.createElement(ReactComponent, null), title, action })=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-full h-full flex flex-col items-center justify-center gap-md"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center"
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            width: 128,
+            height: 128
+        },
+        className: "flex justify-center items-center bg-neutral-dimmed rounded-full fill-neutral-strong [&_svg]:size-xxl"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: icon,
+        label: "Empty"
+    }))), /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "text-center text-neutral-strong",
+        as: "div",
+        style: {
+            maxWidth: 276
+        }
+    }, title), action && /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center gap-sm"
+    }, action));
+export { EmptyView };
+
+//# sourceMappingURL=EmptyView.js.map

package/components/EmptyView.js.map

@@ -1 +1 @@
-{"version":3,"names":["EmptyViewWrapper","styled","width","height","display","flexDirection","alignItems","justifyContent","fill","marginBottom","maxWidth","textAlign","color","padding","backgroundColor","EmptyView","icon","title","action"],"sources":["EmptyView.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as TouchIcon } from \"../assets/icons/touch_app.svg\";\n\nconst EmptyViewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"80%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"& .media\": {\n        \"& svg\": {\n            width: 75,\n            height: 75,\n            fill: \"var(--mdc-theme-text-icon-on-background)\"\n        },\n        marginBottom: 30\n    },\n    \"& .title__container\": {\n        maxWidth: 276,\n        textAlign: \"center\",\n        marginBottom: 24,\n        \"& .title\": {\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        }\n    },\n    \"& .action__container\": {\n        \"& .mdc-button\": {\n            padding: \"0px 16px\",\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\nexport interface EmptyViewProps {\n    icon?: ReactElement;\n    title: string;\n    action: ReactElement | null;\n}\nconst EmptyView: React.FC<EmptyViewProps> = ({ icon = <TouchIcon />, title, action }) => {\n    return (\n        <EmptyViewWrapper>\n            <div className={\"media\"}>{icon}</div>\n            <div className=\"title__container\">\n                <Typography use={\"subtitle1\"} className={\"title\"}>\n                    {title}\n                </Typography>\n            </div>\n            <div className=\"action__container\">{action}</div>\n        </EmptyViewWrapper>\n    );\n};\n\nexport default EmptyView;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,gBAAgB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACnCC,KAAK,EAAE,MAD4B;EAEnCC,MAAM,EAAE,KAF2B;EAGnCC,OAAO,EAAE,MAH0B;EAInCC,aAAa,EAAE,QAJoB;EAKnCC,UAAU,EAAE,QALuB;EAMnCC,cAAc,EAAE,QANmB;EAQnC,YAAY;IACR,SAAS;MACLL,KAAK,EAAE,EADF;MAELC,MAAM,EAAE,EAFH;MAGLK,IAAI,EAAE;IAHD,CADD;IAMRC,YAAY,EAAE;EANN,CARuB;EAgBnC,uBAAuB;IACnBC,QAAQ,EAAE,GADS;IAEnBC,SAAS,EAAE,QAFQ;IAGnBF,YAAY,EAAE,EAHK;IAInB,YAAY;MACRG,KAAK,EAAE;IADC;EAJO,CAhBY;EAwBnC,wBAAwB;IACpB,iBAAiB;MACbC,OAAO,EAAE,UADI;MAEbC,eAAe,EAAE;IAFJ;EADG;AAxBW,CAAjB,CAAtB;;AAoCA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,OAA6C;EAAA,qBAA1CC,IAA0C;EAAA,IAA1CA,IAA0C,uCAAnC,6BAAC,yBAAD,OAAmC;EAAA,IAApBC,KAAoB,QAApBA,KAAoB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACrF,oBACI,6BAAC,gBAAD,qBACI;IAAK,SAAS,EAAE;EAAhB,GAA0BF,IAA1B,CADJ,eAEI;IAAK,SAAS,EAAC;EAAf,gBACI,6BAAC,sBAAD;IAAY,GAAG,EAAE,WAAjB;IAA8B,SAAS,EAAE;EAAzC,GACKC,KADL,CADJ,CAFJ,eAOI;IAAK,SAAS,EAAC;EAAf,GAAoCC,MAApC,CAPJ,CADJ;AAWH,CAZD;;eAceH,S"}
+{"version":3,"file":"components/EmptyView.js","sources":["../../src/components/EmptyView.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as FileIcon } from \"@webiny/icons/description.svg\";\n\nexport interface EmptyViewProps {\n    icon?: ReactElement;\n    title: string;\n    action?: ReactElement | null;\n}\n\nexport const EmptyView = ({ icon = <FileIcon />, title, action }: EmptyViewProps) => {\n    return (\n        <div className=\"w-full h-full flex flex-col items-center justify-center gap-md\">\n            <div className=\"flex justify-center\">\n                <div\n                    style={{ width: 128, height: 128 }}\n                    className=\"flex justify-center items-center bg-neutral-dimmed rounded-full fill-neutral-strong [&_svg]:size-xxl\"\n                >\n                    <Icon icon={icon} label={\"Empty\"} />\n                </div>\n            </div>\n            <Text\n                size={\"md\"}\n                className={\"text-center text-neutral-strong\"}\n                as={\"div\"}\n                style={{ maxWidth: 276 }}\n            >\n                {title}\n            </Text>\n            {action && <div className={\"flex justify-center gap-sm\"}>{action}</div>}\n        </div>\n    );\n};\n"],"names":["EmptyView","icon","FileIcon","title","action","Icon","Text"],"mappings":";;;AAWO,MAAMA,YAAY,CAAC,EAAEC,OAAO,WAAPA,GAAO,oBAACC,gBAAQA,KAAG,EAAEC,KAAK,EAAEC,MAAM,EAAkB,GACrE,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAAC;QACG,OAAO;YAAE,OAAO;YAAK,QAAQ;QAAI;QACjC,WAAU;qBAEV,oBAACC,MAAIA;QAAC,MAAMJ;QAAM,OAAO;wBAGjC,oBAACK,MAAIA;QACD,MAAM;QACN,WAAW;QACX,IAAI;QACJ,OAAO;YAAE,UAAU;QAAI;OAEtBH,QAEJC,UAAU,WAAVA,GAAU,oBAAC;QAAI,WAAW;OAA+BA"}

package/components/Filters/Filters.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { FormOnSubmit, FormProps, GenericFormData } from "@webiny/form";
+type Filter = {
+    name: string;
+    element: React.ReactElement;
+};
+export type GenericFiltersData = GenericFormData;
+export type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;
+export interface FiltersProps<T extends GenericFormData = GenericFormData> extends Pick<FormProps<T>, "data" | "onChange"> {
+    filters: Filter[];
+    show: boolean;
+    children?: React.ReactNode;
+    ["data-testid"]?: string;
+}
+export declare const Filters: <T extends GenericFiltersData = GenericFiltersData>(props: FiltersProps<T>) => React.JSX.Element | null;
+export {};

package/components/Filters/Filters.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { Separator } from "@webiny/admin-ui";
+import { Form } from "@webiny/form";
+const Filters = (props)=>{
+    if (!props.show || !props.filters.length) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full bg-neutral-base px-md my-sm",
+        "data-testid": props["data-testid"] || "filters-container"
+    }, /*#__PURE__*/ react.createElement(Form, {
+        data: props.data,
+        onChange: props.onChange
+    }, ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "w-full flex gap-sm flex-wrap"
+        }, props.filters.map((filter)=>/*#__PURE__*/ react.createElement("div", {
+                key: filter.name
+            }, filter.element)), props.children))), /*#__PURE__*/ react.createElement(Separator, null));
+};
+export { Filters };
+
+//# sourceMappingURL=Filters.js.map

package/components/Filters/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Filters/Filters.js","sources":["../../../src/components/Filters/Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"@webiny/admin-ui\";\nimport type { FormOnSubmit, FormProps, GenericFormData } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\n\ntype Filter = {\n    name: string;\n    element: React.ReactElement;\n};\n\nexport type GenericFiltersData = GenericFormData;\n\nexport type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;\n\nexport interface FiltersProps<T extends GenericFormData = GenericFormData> extends Pick<\n    FormProps<T>,\n    \"data\" | \"onChange\"\n> {\n    filters: Filter[];\n    show: boolean;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\n\nexport const Filters = <T extends GenericFiltersData = GenericFiltersData>(\n    props: FiltersProps<T>\n) => {\n    if (!props.show || !props.filters.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <div\n                className={\"w-full bg-neutral-base px-md my-sm\"}\n                data-testid={props[\"data-testid\"] || \"filters-container\"}\n            >\n                <Form data={props.data} onChange={props.onChange}>\n                    {() => (\n                        <div className={\"w-full flex gap-sm flex-wrap\"}>\n                            {props.filters.map(filter => (\n                                <div key={filter.name}>{filter.element}</div>\n                            ))}\n                            {props.children}\n                        </div>\n                    )}\n                </Form>\n            </div>\n            <Separator />\n        </>\n    );\n};\n"],"names":["Filters","props","Form","filter","Separator"],"mappings":";;;AAwBO,MAAMA,UAAU,CACnBC;IAEA,IAAI,CAACA,MAAM,IAAI,IAAI,CAACA,MAAM,OAAO,CAAC,MAAM,EACpC,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAAC;QACG,WAAW;QACX,eAAaA,KAAK,CAAC,cAAc,IAAI;qBAErC,oBAACC,MAAIA;QAAC,MAAMD,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;OAC3C,kBACG,oBAAC;YAAI,WAAW;WACXA,MAAM,OAAO,CAAC,GAAG,CAACE,CAAAA,SAAAA,WAAAA,GACf,oBAAC;gBAAI,KAAKA,OAAO,IAAI;eAAGA,OAAO,OAAO,IAEzCF,MAAM,QAAQ,mBAK/B,oBAACG,WAASA;AAGtB"}

package/components/Filters/FiltersToggle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface FiltersToggleProps {
+    onFiltersToggle: () => void;
+    showingFilters: boolean;
+    "data-testid"?: string;
+}
+export declare const FiltersToggle: (props: FiltersToggleProps) => React.JSX.Element;

package/components/Filters/FiltersToggle.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/filter_list.svg";
+import { ReactComponent as filter_list_off_svg_ReactComponent } from "@webiny/icons/filter_list_off.svg";
+const Icon = ({ showingFilters })=>showingFilters ? /*#__PURE__*/ react.createElement(filter_list_off_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(ReactComponent, null);
+const IconComponent = /*#__PURE__*/ react.memo(Icon);
+const FiltersToggle = (props)=>/*#__PURE__*/ react.createElement(Tooltip, {
+        side: "bottom",
+        content: props.showingFilters ? "Hide filters" : "Show filters",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            icon: /*#__PURE__*/ react.createElement(IconComponent, {
+                showingFilters: props.showingFilters
+            }),
+            onClick: props.onFiltersToggle,
+            "data-testid": props["data-testid"]
+        })
+    });
+export { FiltersToggle };
+
+//# sourceMappingURL=FiltersToggle.js.map

package/components/Filters/FiltersToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Filters/FiltersToggle.js","sources":["../../../src/components/Filters/FiltersToggle.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/filter_list.svg\";\nimport { ReactComponent as CloseFilterIcon } from \"@webiny/icons/filter_list_off.svg\";\n\ninterface IconProps {\n    showingFilters?: boolean;\n}\n\nconst Icon = ({ showingFilters }: IconProps) => {\n    return showingFilters ? <CloseFilterIcon /> : <FilterIcon />;\n};\nconst IconComponent = React.memo(Icon);\n\nexport interface FiltersToggleProps {\n    onFiltersToggle: () => void;\n    showingFilters: boolean;\n    \"data-testid\"?: string;\n}\n\nexport const FiltersToggle = (props: FiltersToggleProps) => {\n    return (\n        <Tooltip\n            side={\"bottom\"}\n            content={props.showingFilters ? \"Hide filters\" : \"Show filters\"}\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    icon={<IconComponent showingFilters={props.showingFilters} />}\n                    onClick={props.onFiltersToggle}\n                    data-testid={props[\"data-testid\"]}\n                />\n            }\n        />\n    );\n};\n"],"names":["Icon","showingFilters","CloseFilterIcon","FilterIcon","IconComponent","React","FiltersToggle","props","Tooltip","IconButton"],"mappings":";;;;AASA,MAAMA,OAAO,CAAC,EAAEC,cAAc,EAAa,GAChCA,iBAAiB,WAAjBA,GAAiB,oBAACC,oCAAeA,QAAAA,WAAAA,GAAM,oBAACC,gBAAUA;AAE7D,MAAMC,gBAAgB,WAAHA,GAAGC,MAAAA,IAAU,CAACL;AAQ1B,MAAMM,gBAAgB,CAACC,QACnB,WAAP,GACI,oBAACC,SAAOA;QACJ,MAAM;QACN,SAASD,MAAM,cAAc,GAAG,iBAAiB;QACjD,uBACI,oBAACE,YAAUA;YACP,SAAS;YACT,oBAAM,oBAACL,eAAaA;gBAAC,gBAAgBG,MAAM,cAAc;;YACzD,SAASA,MAAM,eAAe;YAC9B,eAAaA,KAAK,CAAC,cAAc"}

package/components/Filters/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Filters.js";
+export * from "./FiltersToggle.js";

package/components/Filters/index.js

@@ -0,0 +1,2 @@
+export * from "./Filters.js";
+export * from "./FiltersToggle.js";

package/components/FloatingActionButton.d.ts

@@ -1,3 +1,6 @@
 import * as React from "react";
-declare const FloatingActionButton: React.FC;
+interface FloatingActionButtonProps {
+    children: React.ReactNode;
+}
+declare const FloatingActionButton: (props: FloatingActionButtonProps) => React.JSX.Element;
 export { FloatingActionButton };

package/components/FloatingActionButton.js

@@ -1,29 +1,16 @@
-"use strict";
+import { IconButton } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import * as __rspack_external_react from "react";
+const FloatingActionButton = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        style: {
+            position: "absolute",
+            bottom: 20,
+            right: 20
+        }
+    }, /*#__PURE__*/ __rspack_external_react.createElement(IconButton, {
+        ...props,
+        icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null)
+    }));
+export { FloatingActionButton };
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FloatingActionButton = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _Button = require("@webiny/ui/Button");
-
-var _roundAdd24px = require("../assets/icons/round-add-24px.svg");
-
-// Set "styles" inline, since no customizations are possible / needed here.
-var FloatingActionButton = function FloatingActionButton(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      bottom: 20,
-      right: 20
-    }
-  }, /*#__PURE__*/React.createElement(_Button.ButtonFloating, Object.assign({}, props, {
-    icon: /*#__PURE__*/React.createElement(_roundAdd24px.ReactComponent, null)
-  })));
-};
-
-exports.FloatingActionButton = FloatingActionButton;
+//# sourceMappingURL=FloatingActionButton.js.map

package/components/FloatingActionButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["FloatingActionButton","props","position","bottom","right"],"sources":["FloatingActionButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ButtonFloating } from \"@webiny/ui/Button\";\nimport { ReactComponent as AddIcon } from \"../assets/icons/round-add-24px.svg\";\n\n// Set \"styles\" inline, since no customizations are possible / needed here.\nconst FloatingActionButton: React.FC = props => {\n    return (\n        <div\n            style={{\n                position: \"absolute\",\n                bottom: 20,\n                right: 20\n            }}\n        >\n            <ButtonFloating {...props} icon={<AddIcon />} />\n        </div>\n    );\n};\n\nexport { FloatingActionButton };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;AACA,IAAMA,oBAA8B,GAAG,SAAjCA,oBAAiC,CAAAC,KAAK,EAAI;EAC5C,oBACI;IACI,KAAK,EAAE;MACHC,QAAQ,EAAE,UADP;MAEHC,MAAM,EAAE,EAFL;MAGHC,KAAK,EAAE;IAHJ;EADX,gBAOI,oBAAC,sBAAD,oBAAoBH,KAApB;IAA2B,IAAI,eAAE,oBAAC,4BAAD;EAAjC,GAPJ,CADJ;AAWH,CAZD"}
+{"version":3,"file":"components/FloatingActionButton.js","sources":["../../src/components/FloatingActionButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface FloatingActionButtonProps {\n    children: React.ReactNode;\n}\n\n// Set \"styles\" inline, since no customizations are possible / needed here.\nconst FloatingActionButton = (props: FloatingActionButtonProps) => {\n    return (\n        <div\n            style={{\n                position: \"absolute\",\n                bottom: 20,\n                right: 20\n            }}\n        >\n            <IconButton {...props} icon={<AddIcon />} />\n        </div>\n    );\n};\n\nexport { FloatingActionButton };\n"],"names":["FloatingActionButton","props","IconButton","AddIcon"],"mappings":";;;AASA,MAAMA,uBAAuB,CAACC,QACnB,WAAP,GACI,sCAAC;QACG,OAAO;YACH,UAAU;YACV,QAAQ;YACR,OAAO;QACX;qBAEA,sCAACC,YAAUA;QAAE,GAAGD,KAAK;QAAE,oBAAM,sCAACE,gBAAOA"}

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,37 @@
+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(()=>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, {
+        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,"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.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,65 @@
+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";
+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

@@ -0,0 +1 @@
+{"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.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,71 @@
+import { makeAutoObservable, toJS } from "mobx";
+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);
+    }
+    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(),
+            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