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

package/IconPicker/IconPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","library","fas","IconPicker","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","add","Default","icons","prefix","name","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleChange","newValue","undefined"],"sources":["IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n    title: \"Components/Form/IconPicker\",\n    component: IconPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <IconPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || null);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || null);\n        }, [args.value]);\n\n        const handleChange = (newValue: any) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && !newValue) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <IconPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select an Icon\",\n        required: true,\n        disabled: false,\n        description: \"Choose an icon for your button\",\n        note: \"Note: The selected icon will be displayed on your button\",\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" }\n        ],\n        value: null,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the icon picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the icon picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        icons: {\n            description: \"Array of available icons with prefix and name properties\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The selected icon value (in format 'prefix/name')\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when an icon is selected\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"IconPicker/IconPicker.stories.js","sources":["../../src/IconPicker/IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n    title: \"Components/Form/IconPicker\",\n    component: IconPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <IconPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || null);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || null);\n        }, [args.value]);\n\n        const handleChange = (newValue: any) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && !newValue) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <IconPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select an Icon\",\n        required: true,\n        disabled: false,\n        description: \"Choose an icon for your button\",\n        note: \"Note: The selected icon will be displayed on your button\",\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" }\n        ],\n        value: null,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the icon picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the icon picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        icons: {\n            description: \"Array of available icons with prefix and name properties\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The selected icon value (in format 'prefix/name')\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when an icon is selected\"\n        }\n    }\n};\n"],"names":["meta","IconPicker","args","value","setValue","useState","library","fas","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}

package/IconPicker/domains/IconPickerFontAwesome.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=IconPickerFontAwesome.js.map

package/IconPicker/domains/IconPickerIcon.js

@@ -1,34 +1,34 @@
-export class IconPickerIcon {
-  constructor(data) {
-    this._prefix = data.prefix;
-    this._name = data.name;
-  }
-  static create(data) {
-    return new IconPickerIcon({
-      prefix: data.prefix,
-      name: data.name
-    });
-  }
-  static createFromString(value) {
-    if (typeof value === "string" && value.includes("/")) {
-      const values = value.split("/");
-      return new IconPickerIcon({
-        prefix: values[0],
-        name: values[1]
-      });
-    } else {
-      return new IconPickerIcon({
-        prefix: "fas",
-        name: "star"
-      });
+class IconPickerIcon {
+    constructor(data){
+        this._prefix = data.prefix;
+        this._name = data.name;
+    }
+    static create(data) {
+        return new IconPickerIcon({
+            prefix: data.prefix,
+            name: data.name
+        });
+    }
+    static createFromString(value) {
+        if (!("string" == typeof value && value.includes("/"))) return new IconPickerIcon({
+            prefix: "fas",
+            name: "star"
+        });
+        {
+            const values = value.split("/");
+            return new IconPickerIcon({
+                prefix: values[0],
+                name: values[1]
+            });
+        }
+    }
+    get prefix() {
+        return this._prefix;
+    }
+    get name() {
+        return this._name;
     }
-  }
-  get prefix() {
-    return this._prefix;
-  }
-  get name() {
-    return this._name;
-  }
 }
+export { IconPickerIcon };
 
 //# sourceMappingURL=IconPickerIcon.js.map

package/IconPicker/domains/IconPickerIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["IconPickerIcon","constructor","data","_prefix","prefix","_name","name","create","createFromString","value","includes","values","split"],"sources":["IconPickerIcon.tsx"],"sourcesContent":["import type { IconPickerIconDto } from \"./IconPickerIconDto.js\";\n\nexport class IconPickerIcon {\n    private readonly _prefix: string;\n    private readonly _name: string;\n\n    protected constructor(data: { prefix: string; name: string }) {\n        this._prefix = data.prefix;\n        this._name = data.name;\n    }\n\n    static create(data: IconPickerIconDto) {\n        return new IconPickerIcon({\n            prefix: data.prefix,\n            name: data.name\n        });\n    }\n\n    static createFromString(value?: string) {\n        if (typeof value === \"string\" && value.includes(\"/\")) {\n            const values = value.split(\"/\");\n            return new IconPickerIcon({\n                prefix: values[0],\n                name: values[1]\n            });\n        } else {\n            return new IconPickerIcon({\n                prefix: \"fas\",\n                name: \"star\"\n            });\n        }\n    }\n\n    get prefix() {\n        return this._prefix;\n    }\n\n    get name() {\n        return this._name;\n    }\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAc,CAAC;EAIdC,WAAWA,CAACC,IAAsC,EAAE;IAC1D,IAAI,CAACC,OAAO,GAAGD,IAAI,CAACE,MAAM;IAC1B,IAAI,CAACC,KAAK,GAAGH,IAAI,CAACI,IAAI;EAC1B;EAEA,OAAOC,MAAMA,CAACL,IAAuB,EAAE;IACnC,OAAO,IAAIF,cAAc,CAAC;MACtBI,MAAM,EAAEF,IAAI,CAACE,MAAM;MACnBE,IAAI,EAAEJ,IAAI,CAACI;IACf,CAAC,CAAC;EACN;EAEA,OAAOE,gBAAgBA,CAACC,KAAc,EAAE;IACpC,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAClD,MAAMC,MAAM,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC;MAC/B,OAAO,IAAIZ,cAAc,CAAC;QACtBI,MAAM,EAAEO,MAAM,CAAC,CAAC,CAAC;QACjBL,IAAI,EAAEK,MAAM,CAAC,CAAC;MAClB,CAAC,CAAC;IACN,CAAC,MAAM;MACH,OAAO,IAAIX,cAAc,CAAC;QACtBI,MAAM,EAAE,KAAK;QACbE,IAAI,EAAE;MACV,CAAC,CAAC;IACN;EACJ;EAEA,IAAIF,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACD,OAAO;EACvB;EAEA,IAAIG,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACD,KAAK;EACrB;AACJ","ignoreList":[]}
+{"version":3,"file":"IconPicker/domains/IconPickerIcon.js","sources":["../../../src/IconPicker/domains/IconPickerIcon.tsx"],"sourcesContent":["import type { IconPickerIconDto } from \"./IconPickerIconDto.js\";\n\nexport class IconPickerIcon {\n    private readonly _prefix: string;\n    private readonly _name: string;\n\n    protected constructor(data: { prefix: string; name: string }) {\n        this._prefix = data.prefix;\n        this._name = data.name;\n    }\n\n    static create(data: IconPickerIconDto) {\n        return new IconPickerIcon({\n            prefix: data.prefix,\n            name: data.name\n        });\n    }\n\n    static createFromString(value?: string) {\n        if (typeof value === \"string\" && value.includes(\"/\")) {\n            const values = value.split(\"/\");\n            return new IconPickerIcon({\n                prefix: values[0],\n                name: values[1]\n            });\n        } else {\n            return new IconPickerIcon({\n                prefix: \"fas\",\n                name: \"star\"\n            });\n        }\n    }\n\n    get prefix() {\n        return this._prefix;\n    }\n\n    get name() {\n        return this._name;\n    }\n}\n"],"names":["IconPickerIcon","data","value","values"],"mappings":"AAEO,MAAMA;IAIT,YAAsBC,IAAsC,CAAE;QAC1D,IAAI,CAAC,OAAO,GAAGA,KAAK,MAAM;QAC1B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;IAC1B;IAEA,OAAO,OAAOA,IAAuB,EAAE;QACnC,OAAO,IAAID,eAAe;YACtB,QAAQC,KAAK,MAAM;YACnB,MAAMA,KAAK,IAAI;QACnB;IACJ;IAEA,OAAO,iBAAiBC,KAAc,EAAE;QACpC,KAAI,CAAiB,YAAjB,OAAOA,SAAsBA,MAAM,QAAQ,CAAC,IAAG,GAO/C,OAAO,IAAIF,eAAe;YACtB,QAAQ;YACR,MAAM;QACV;QAVkD;YAClD,MAAMG,SAASD,MAAM,KAAK,CAAC;YAC3B,OAAO,IAAIF,eAAe;gBACtB,QAAQG,MAAM,CAAC,EAAE;gBACjB,MAAMA,MAAM,CAAC,EAAE;YACnB;QACJ;IAMJ;IAEA,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,OAAO;IACvB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;AACJ"}

package/IconPicker/domains/IconPickerIconDto.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=IconPickerIconDto.js.map

package/IconPicker/domains/IconPickerIconFormatter.js

@@ -1,13 +1,14 @@
-export class IconPickerIconFormatter {
-  static formatFontAwesome(icon) {
-    return {
-      prefix: icon.prefix,
-      name: icon.name
-    };
-  }
-  static formatStringValue(icon) {
-    return `${icon.prefix}/${icon.name}`;
-  }
+class IconPickerIconFormatter {
+    static formatFontAwesome(icon) {
+        return {
+            prefix: icon.prefix,
+            name: icon.name
+        };
+    }
+    static formatStringValue(icon) {
+        return `${icon.prefix}/${icon.name}`;
+    }
 }
+export { IconPickerIconFormatter };
 
 //# sourceMappingURL=IconPickerIconFormatter.js.map

package/IconPicker/domains/IconPickerIconFormatter.js.map

@@ -1 +1 @@
-{"version":3,"names":["IconPickerIconFormatter","formatFontAwesome","icon","prefix","name","formatStringValue"],"sources":["IconPickerIconFormatter.tsx"],"sourcesContent":["import type { IconPickerIcon } from \"./IconPickerIcon.js\";\nimport type { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\nimport type { IconPickerFontAwesome } from \"./IconPickerFontAwesome.js\";\n\nexport class IconPickerIconFormatter {\n    static formatFontAwesome(icon: IconPickerIcon): IconPickerFontAwesome {\n        return {\n            prefix: icon.prefix as IconPrefix,\n            name: icon.name as IconName\n        };\n    }\n\n    static formatStringValue(icon: IconPickerIcon | IconPickerFontAwesome) {\n        return `${icon.prefix}/${icon.name}`;\n    }\n}\n"],"mappings":"AAIA,OAAO,MAAMA,uBAAuB,CAAC;EACjC,OAAOC,iBAAiBA,CAACC,IAAoB,EAAyB;IAClE,OAAO;MACHC,MAAM,EAAED,IAAI,CAACC,MAAoB;MACjCC,IAAI,EAAEF,IAAI,CAACE;IACf,CAAC;EACL;EAEA,OAAOC,iBAAiBA,CAACH,IAA4C,EAAE;IACnE,OAAO,GAAGA,IAAI,CAACC,MAAM,IAAID,IAAI,CAACE,IAAI,EAAE;EACxC;AACJ","ignoreList":[]}
+{"version":3,"file":"IconPicker/domains/IconPickerIconFormatter.js","sources":["../../../src/IconPicker/domains/IconPickerIconFormatter.tsx"],"sourcesContent":["import type { IconPickerIcon } from \"./IconPickerIcon.js\";\nimport type { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\nimport type { IconPickerFontAwesome } from \"./IconPickerFontAwesome.js\";\n\nexport class IconPickerIconFormatter {\n    static formatFontAwesome(icon: IconPickerIcon): IconPickerFontAwesome {\n        return {\n            prefix: icon.prefix as IconPrefix,\n            name: icon.name as IconName\n        };\n    }\n\n    static formatStringValue(icon: IconPickerIcon | IconPickerFontAwesome) {\n        return `${icon.prefix}/${icon.name}`;\n    }\n}\n"],"names":["IconPickerIconFormatter","icon"],"mappings":"AAIO,MAAMA;IACT,OAAO,kBAAkBC,IAAoB,EAAyB;QAClE,OAAO;YACH,QAAQA,KAAK,MAAM;YACnB,MAAMA,KAAK,IAAI;QACnB;IACJ;IAEA,OAAO,kBAAkBA,IAA4C,EAAE;QACnE,OAAO,GAAGA,KAAK,MAAM,CAAC,CAAC,EAAEA,KAAK,IAAI,EAAE;IACxC;AACJ"}

package/IconPicker/domains/ListCache.js

@@ -1,45 +1,53 @@
 import { makeAutoObservable, runInAction, toJS } from "mobx";
-export class ListCache {
-  constructor() {
-    this.state = [];
-    makeAutoObservable(this);
-  }
-  count() {
-    return this.state.length;
-  }
-  clear() {
-    runInAction(() => {
-      this.state = [];
-    });
-  }
-  hasItems() {
-    return this.state.length > 0;
-  }
-  getItems(predicate) {
-    if (predicate) {
-      return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];
-    }
-    return [...this.state.map(item => toJS(item))];
-  }
-  getItem(predicate) {
-    const item = this.state.find(item => predicate(item));
-    return item ? toJS(item) : undefined;
-  }
-  addItems(items) {
-    runInAction(() => {
-      this.state = [...this.state, ...items];
-    });
-  }
-  updateItems(updater) {
-    runInAction(() => {
-      this.state = [...this.state.map(item => updater(item))];
-    });
-  }
-  removeItems(predicate) {
-    runInAction(() => {
-      this.state = this.state.filter(item => !predicate(item));
-    });
-  }
+class ListCache {
+    constructor(){
+        this.state = [];
+        makeAutoObservable(this);
+    }
+    count() {
+        return this.state.length;
+    }
+    clear() {
+        runInAction(()=>{
+            this.state = [];
+        });
+    }
+    hasItems() {
+        return this.state.length > 0;
+    }
+    getItems(predicate) {
+        if (predicate) return [
+            ...this.state.filter((item)=>predicate(item)).map((item)=>toJS(item))
+        ];
+        return [
+            ...this.state.map((item)=>toJS(item))
+        ];
+    }
+    getItem(predicate) {
+        const item = this.state.find((item)=>predicate(item));
+        return item ? toJS(item) : void 0;
+    }
+    addItems(items) {
+        runInAction(()=>{
+            this.state = [
+                ...this.state,
+                ...items
+            ];
+        });
+    }
+    updateItems(updater) {
+        runInAction(()=>{
+            this.state = [
+                ...this.state.map((item)=>updater(item))
+            ];
+        });
+    }
+    removeItems(predicate) {
+        runInAction(()=>{
+            this.state = this.state.filter((item)=>!predicate(item));
+        });
+    }
 }
+export { ListCache };
 
 //# sourceMappingURL=ListCache.js.map

package/IconPicker/domains/ListCache.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","runInAction","toJS","ListCache","constructor","state","count","length","clear","hasItems","getItems","predicate","filter","item","map","getItem","find","undefined","addItems","items","updateItems","updater","removeItems"],"sources":["ListCache.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, toJS } from \"mobx\";\n\nexport type Constructor<T> = new (...args: any[]) => T;\n\nexport interface IListCachePredicate<T> {\n    (item: T): boolean;\n}\n\nexport interface IListCacheItemUpdater<T> {\n    (item: T): T;\n}\n\nexport interface IListCache<T> {\n    count(): number;\n    clear(): void;\n    hasItems(): boolean;\n    getItems(predicate?: IListCachePredicate<T>): T[];\n    getItem(predicate: IListCachePredicate<T>): T | undefined;\n    addItems(items: T[]): void;\n    updateItems(updater: IListCacheItemUpdater<T>): void;\n    removeItems(predicate: IListCachePredicate<T>): void;\n}\n\nexport class ListCache<T> implements IListCache<T> {\n    private state: T[];\n\n    constructor() {\n        this.state = [];\n\n        makeAutoObservable(this);\n    }\n\n    count() {\n        return this.state.length;\n    }\n\n    clear() {\n        runInAction(() => {\n            this.state = [];\n        });\n    }\n\n    hasItems() {\n        return this.state.length > 0;\n    }\n\n    getItems(predicate?: IListCachePredicate<T>): T[] {\n        if (predicate) {\n            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];\n        }\n\n        return [...this.state.map(item => toJS(item))];\n    }\n\n    getItem(predicate: IListCachePredicate<T>): T | undefined {\n        const item = this.state.find(item => predicate(item));\n\n        return item ? toJS(item) : undefined;\n    }\n\n    addItems(items: T[]) {\n        runInAction(() => {\n            this.state = [...this.state, ...items];\n        });\n    }\n\n    updateItems(updater: IListCacheItemUpdater<T>) {\n        runInAction(() => {\n            this.state = [...this.state.map(item => updater(item))];\n        });\n    }\n\n    removeItems(predicate: IListCachePredicate<T>) {\n        runInAction(() => {\n            this.state = this.state.filter(item => !predicate(item));\n        });\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,WAAW,EAAEC,IAAI,QAAQ,MAAM;AAuB5D,OAAO,MAAMC,SAAS,CAA6B;EAG/CC,WAAWA,CAAA,EAAG;IACV,IAAI,CAACC,KAAK,GAAG,EAAE;IAEfL,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAM,KAAKA,CAAA,EAAG;IACJ,OAAO,IAAI,CAACD,KAAK,CAACE,MAAM;EAC5B;EAEAC,KAAKA,CAAA,EAAG;IACJP,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,EAAE;IACnB,CAAC,CAAC;EACN;EAEAI,QAAQA,CAAA,EAAG;IACP,OAAO,IAAI,CAACJ,KAAK,CAACE,MAAM,GAAG,CAAC;EAChC;EAEAG,QAAQA,CAACC,SAAkC,EAAO;IAC9C,IAAIA,SAAS,EAAE;MACX,OAAO,CAAC,GAAG,IAAI,CAACN,KAAK,CAACO,MAAM,CAACC,IAAI,IAAIF,SAAS,CAACE,IAAI,CAAC,CAAC,CAACC,GAAG,CAACD,IAAI,IAAIX,IAAI,CAACW,IAAI,CAAC,CAAC,CAAC;IAClF;IAEA,OAAO,CAAC,GAAG,IAAI,CAACR,KAAK,CAACS,GAAG,CAACD,IAAI,IAAIX,IAAI,CAACW,IAAI,CAAC,CAAC,CAAC;EAClD;EAEAE,OAAOA,CAACJ,SAAiC,EAAiB;IACtD,MAAME,IAAI,GAAG,IAAI,CAACR,KAAK,CAACW,IAAI,CAACH,IAAI,IAAIF,SAAS,CAACE,IAAI,CAAC,CAAC;IAErD,OAAOA,IAAI,GAAGX,IAAI,CAACW,IAAI,CAAC,GAAGI,SAAS;EACxC;EAEAC,QAAQA,CAACC,KAAU,EAAE;IACjBlB,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,EAAE,GAAGc,KAAK,CAAC;IAC1C,CAAC,CAAC;EACN;EAEAC,WAAWA,CAACC,OAAiC,EAAE;IAC3CpB,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,CAACS,GAAG,CAACD,IAAI,IAAIQ,OAAO,CAACR,IAAI,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC;EACN;EAEAS,WAAWA,CAACX,SAAiC,EAAE;IAC3CV,WAAW,CAAC,MAAM;MACd,IAAI,CAACI,KAAK,GAAG,IAAI,CAACA,KAAK,CAACO,MAAM,CAACC,IAAI,IAAI,CAACF,SAAS,CAACE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;EACN;AACJ","ignoreList":[]}
+{"version":3,"file":"IconPicker/domains/ListCache.js","sources":["../../../src/IconPicker/domains/ListCache.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, toJS } from \"mobx\";\n\nexport type Constructor<T> = new (...args: any[]) => T;\n\nexport interface IListCachePredicate<T> {\n    (item: T): boolean;\n}\n\nexport interface IListCacheItemUpdater<T> {\n    (item: T): T;\n}\n\nexport interface IListCache<T> {\n    count(): number;\n    clear(): void;\n    hasItems(): boolean;\n    getItems(predicate?: IListCachePredicate<T>): T[];\n    getItem(predicate: IListCachePredicate<T>): T | undefined;\n    addItems(items: T[]): void;\n    updateItems(updater: IListCacheItemUpdater<T>): void;\n    removeItems(predicate: IListCachePredicate<T>): void;\n}\n\nexport class ListCache<T> implements IListCache<T> {\n    private state: T[];\n\n    constructor() {\n        this.state = [];\n\n        makeAutoObservable(this);\n    }\n\n    count() {\n        return this.state.length;\n    }\n\n    clear() {\n        runInAction(() => {\n            this.state = [];\n        });\n    }\n\n    hasItems() {\n        return this.state.length > 0;\n    }\n\n    getItems(predicate?: IListCachePredicate<T>): T[] {\n        if (predicate) {\n            return [...this.state.filter(item => predicate(item)).map(item => toJS(item))];\n        }\n\n        return [...this.state.map(item => toJS(item))];\n    }\n\n    getItem(predicate: IListCachePredicate<T>): T | undefined {\n        const item = this.state.find(item => predicate(item));\n\n        return item ? toJS(item) : undefined;\n    }\n\n    addItems(items: T[]) {\n        runInAction(() => {\n            this.state = [...this.state, ...items];\n        });\n    }\n\n    updateItems(updater: IListCacheItemUpdater<T>) {\n        runInAction(() => {\n            this.state = [...this.state.map(item => updater(item))];\n        });\n    }\n\n    removeItems(predicate: IListCachePredicate<T>) {\n        runInAction(() => {\n            this.state = this.state.filter(item => !predicate(item));\n        });\n    }\n}\n"],"names":["ListCache","makeAutoObservable","runInAction","predicate","item","toJS","undefined","items","updater"],"mappings":";AAuBO,MAAMA;IAGT,aAAc;QACV,IAAI,CAAC,KAAK,GAAG,EAAE;QAEfC,mBAAmB,IAAI;IAC3B;IAEA,QAAQ;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM;IAC5B;IAEA,QAAQ;QACJC,YAAY;YACR,IAAI,CAAC,KAAK,GAAG,EAAE;QACnB;IACJ;IAEA,WAAW;QACP,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG;IAC/B;IAEA,SAASC,SAAkC,EAAO;QAC9C,IAAIA,WACA,OAAO;eAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAACC,CAAAA,OAAQD,UAAUC,OAAO,GAAG,CAACA,CAAAA,OAAQC,KAAKD;SAAO;QAGlF,OAAO;eAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,CAAAA,OAAQC,KAAKD;SAAO;IAClD;IAEA,QAAQD,SAAiC,EAAiB;QACtD,MAAMC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAACA,CAAAA,OAAQD,UAAUC;QAE/C,OAAOA,OAAOC,KAAKD,QAAQE;IAC/B;IAEA,SAASC,KAAU,EAAE;QACjBL,YAAY;YACR,IAAI,CAAC,KAAK,GAAG;mBAAI,IAAI,CAAC,KAAK;mBAAKK;aAAM;QAC1C;IACJ;IAEA,YAAYC,OAAiC,EAAE;QAC3CN,YAAY;YACR,IAAI,CAAC,KAAK,GAAG;mBAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAACE,CAAAA,OAAQI,QAAQJ;aAAO;QAC3D;IACJ;IAEA,YAAYD,SAAiC,EAAE;QAC3CD,YAAY;YACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAACE,CAAAA,OAAQ,CAACD,UAAUC;QACtD;IACJ;AACJ"}

package/IconPicker/domains/index.js

@@ -1,5 +1,3 @@
 export * from "./IconPickerIcon.js";
 export * from "./IconPickerIconFormatter.js";
 export * from "./ListCache.js";
-
-//# sourceMappingURL=index.js.map

package/IconPicker/index.js

@@ -1,4 +1 @@
 export * from "./IconPicker.js";
-export {};
-
-//# sourceMappingURL=index.js.map

package/IconPicker/primitives/IconPickerPrimitive.js

@@ -1,71 +1,65 @@
-import React, { useEffect, useRef } from "react";
+import react, { useEffect, useRef } from "react";
 import { inputVariants } from "../../Input/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
 import { cn, cva } from "../../utils.js";
 import { IconPickerGrid, IconPickerInput, IconPickerTrigger } from "./components/index.js";
 import { useIconPicker } from "./useIconPicker.js";
 const iconPickerVariants = cva("cursor-pointer text-neutral-strong", {
-  variants: {
-    size: {
-      md: "w-16",
-      lg: "w-16",
-      xl: "w-20"
+    variants: {
+        size: {
+            md: "w-16",
+            lg: "w-16",
+            xl: "w-20"
+        },
+        disabled: {
+            true: "pointer-events-none"
+        }
     },
-    disabled: {
-      true: "pointer-events-none"
+    defaultVariants: {
+        size: "lg"
     }
-  },
-  defaultVariants: {
-    size: "lg"
-  }
 });
-const IconPickerPrimitive = props => {
-  const {
-    vm,
-    setListOpenState,
-    searchIcon,
-    setSelectedIcon
-  } = useIconPicker(props);
-  // TODO figure out a better way to type this ref, without using `as unknown as`
-  const inputRef = useRef(null);
-  useEffect(() => {
-    setTimeout(() => {
-      if (vm.open && inputRef.current) {
-        inputRef.current.focus();
-      }
-    }, 50);
-  }, [vm.open]);
-  return /*#__PURE__*/React.createElement(PopoverPrimitive, {
-    open: vm.open,
-    onOpenChange: setListOpenState
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement("button", {
-    "data-disabled": props.disabled,
-    className: cn(inputVariants({
-      size: props.size,
-      variant: props.variant,
-      invalid: props.invalid
-    }), iconPickerVariants({
-      size: props.size,
-      disabled: props.disabled
-    }))
-  }, /*#__PURE__*/React.createElement(IconPickerTrigger, {
-    value: props.value,
-    size: props.size
-  }))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
-    align: "start",
-    className: "min-w-96",
-    onWheel: e => e.stopPropagation() // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.
-  }, /*#__PURE__*/React.createElement(IconPickerInput, {
-    value: vm.searchQuery,
-    onChange: searchIcon,
-    inputRef: inputRef
-  }), /*#__PURE__*/React.createElement(IconPickerGrid, {
-    icons: vm.icons,
-    iconsLength: vm.iconsLength,
-    onIconSelect: setSelectedIcon
-  })));
+const IconPickerPrimitive = (props)=>{
+    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);
+    const inputRef = useRef(null);
+    useEffect(()=>{
+        setTimeout(()=>{
+            if (vm.open && inputRef.current) inputRef.current.focus();
+        }, 50);
+    }, [
+        vm.open
+    ]);
+    return /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: vm.open,
+        onOpenChange: setListOpenState
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("button", {
+        "data-disabled": props.disabled,
+        className: cn(inputVariants({
+            size: props.size,
+            variant: props.variant,
+            invalid: props.invalid
+        }), iconPickerVariants({
+            size: props.size,
+            disabled: props.disabled
+        }))
+    }, /*#__PURE__*/ react.createElement(IconPickerTrigger, {
+        value: props.value,
+        size: props.size
+    }))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start",
+        className: "min-w-96",
+        onWheel: (e)=>e.stopPropagation()
+    }, /*#__PURE__*/ react.createElement(IconPickerInput, {
+        value: vm.searchQuery,
+        onChange: searchIcon,
+        inputRef: inputRef
+    }), /*#__PURE__*/ react.createElement(IconPickerGrid, {
+        icons: vm.icons,
+        iconsLength: vm.iconsLength,
+        onIconSelect: setSelectedIcon
+    })));
 };
 export { IconPickerPrimitive };
 

package/IconPicker/primitives/IconPickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","inputVariants","PopoverPrimitive","cn","cva","IconPickerGrid","IconPickerInput","IconPickerTrigger","useIconPicker","iconPickerVariants","variants","size","md","lg","xl","disabled","true","defaultVariants","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","inputRef","setTimeout","open","current","focus","createElement","onOpenChange","Trigger","asChild","className","variant","invalid","value","Content","align","onWheel","e","stopPropagation","searchQuery","onChange","icons","iconsLength","onIconSelect"],"sources":["IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content\n                align={\"start\"}\n                className={\"min-w-96\"}\n                onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n            >\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,aAAa;AACtB,SAASC,gBAAgB;AACzB,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,cAAc,EAAEC,eAAe,EAAEC,iBAAiB;AAE3D,SAASC,aAAa;AAEtB,MAAMC,kBAAkB,GAAGL,GAAG,CAAC,oCAAoC,EAAE;EACjEM,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE;IACR,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AA+BF,MAAMO,mBAAmB,GAAIC,KAA+B,IAAK;EAC7D,MAAM;IAAEC,EAAE;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAgB,CAAC,GAAGf,aAAa,CAACW,KAAK,CAAC;EAClF;EACA,MAAMK,QAAQ,GAAGxB,MAAM,CAAmB,IAAmC,CAAC;EAE9ED,SAAS,CAAC,MAAM;IACZ0B,UAAU,CAAC,MAAM;MACb,IAAIL,EAAE,CAACM,IAAI,IAAIF,QAAQ,CAACG,OAAO,EAAE;QAC7BH,QAAQ,CAACG,OAAO,CAACC,KAAK,CAAC,CAAC;MAC5B;IACJ,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAACR,EAAE,CAACM,IAAI,CAAC,CAAC;EAEb,oBACI5B,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;IAACwB,IAAI,EAAEN,EAAE,CAACM,IAAK;IAACI,YAAY,EAAET;EAAiB,gBAC5DvB,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB,CAAC6B,OAAO;IAACC,OAAO;EAAA,gBAC7BlC,KAAA,CAAA+B,aAAA;IACI,iBAAeV,KAAK,CAACJ,QAAS;IAC9BkB,SAAS,EAAE9B,EAAE,CACTF,aAAa,CAAC;MACVU,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAChBuB,OAAO,EAAEf,KAAK,CAACe,OAAO;MACtBC,OAAO,EAAEhB,KAAK,CAACgB;IACnB,CAAC,CAAC,EACF1B,kBAAkB,CAAC;MAAEE,IAAI,EAAEQ,KAAK,CAACR,IAAI;MAAEI,QAAQ,EAAEI,KAAK,CAACJ;IAAS,CAAC,CACrE;EAAE,gBAEFjB,KAAA,CAAA+B,aAAA,CAACtB,iBAAiB;IAAC6B,KAAK,EAAEjB,KAAK,CAACiB,KAAM;IAACzB,IAAI,EAAEQ,KAAK,CAACR;EAAK,CAAE,CACtD,CACc,CAAC,eAC3Bb,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB,CAACmC,OAAO;IACrBC,KAAK,EAAE,OAAQ;IACfL,SAAS,EAAE,UAAW;IACtBM,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,eAAe,CAAC,CAAE,CAAC;EAAA,gBAEnC3C,KAAA,CAAA+B,aAAA,CAACvB,eAAe;IAAC8B,KAAK,EAAEhB,EAAE,CAACsB,WAAY;IAACC,QAAQ,EAAErB,UAAW;IAACE,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpF1B,KAAA,CAAA+B,aAAA,CAACxB,cAAc;IACXuC,KAAK,EAAExB,EAAE,CAACwB,KAAM;IAChBC,WAAW,EAAEzB,EAAE,CAACyB,WAAY;IAC5BC,YAAY,EAAEvB;EAAgB,CACjC,CACqB,CACZ,CAAC;AAE3B,CAAC;AAED,SAASL,mBAAmB","ignoreList":[]}
+{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content\n                align={\"start\"}\n                className={\"min-w-96\"}\n                onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n            >\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"names":["iconPickerVariants","cva","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","useIconPicker","inputRef","useRef","useEffect","setTimeout","PopoverPrimitive","cn","inputVariants","IconPickerTrigger","e","IconPickerInput","IconPickerGrid"],"mappings":";;;;;;AASA,MAAMA,qBAAqBC,IAAI,sCAAsC;IACjE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA+BA,MAAMC,sBAAsB,CAACC;IACzB,MAAM,EAAEC,EAAE,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,eAAe,EAAE,GAAGC,cAAcL;IAE5E,MAAMM,WAAWC,OAAyB;IAE1CC,UAAU;QACNC,WAAW;YACP,IAAIR,GAAG,IAAI,IAAIK,SAAS,OAAO,EAC3BA,SAAS,OAAO,CAAC,KAAK;QAE9B,GAAG;IACP,GAAG;QAACL,GAAG,IAAI;KAAC;IAEZ,OAAO,WAAP,GACI,oBAACS,kBAAgBA;QAAC,MAAMT,GAAG,IAAI;QAAE,cAAcC;qBAC3C,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAeV,MAAM,QAAQ;QAC7B,WAAWW,GACPC,cAAc;YACV,MAAMZ,MAAM,IAAI;YAChB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;QAC1B,IACAH,mBAAmB;YAAE,MAAMG,MAAM,IAAI;YAAE,UAAUA,MAAM,QAAQ;QAAC;qBAGpE,oBAACa,mBAAiBA;QAAC,OAAOb,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;wBAG/D,oBAACU,iBAAiB,OAAO;QACrB,OAAO;QACP,WAAW;QACX,SAASI,CAAAA,IAAKA,EAAE,eAAe;qBAE/B,oBAACC,iBAAeA;QAAC,OAAOd,GAAG,WAAW;QAAE,UAAUE;QAAY,UAAUG;sBACxE,oBAACU,gBAAcA;QACX,OAAOf,GAAG,KAAK;QACf,aAAaA,GAAG,WAAW;QAC3B,cAAcG;;AAKlC"}