@webiny/admin-ui 6.4.0-beta.2 → 6.4.0-beta.4

package/Drawer/Drawer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer/Drawer.stories.js","sources":["../../src/Drawer/Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Drawer } from \"./Drawer.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as DoorbellIcon } from \"@webiny/icons/ring_volume.svg\";\n\nconst meta: Meta<typeof Drawer> = {\n    title: \"Components/Drawer\",\n    component: Drawer,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Drawer>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Drawer Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md\"}>\n                    The amazing, splendid, and most useful umbrella, resistant to rain and friendly\n                    to winds, is something that deserves all admiration. Crafted with perfect\n                    textures, it bravely withstands storms and gently shades the rays of the sun. A\n                    remarkable innovation, with an ergonomically designed grip most suited to the\n                    hand, it remains stable even in the fiercest weather.\n                </p>\n                <p className={\"mb-md\"}>\n                    Its fabric, woven from the highest quality materials, ensures that you stay dry,\n                    no matter the intensity of the rain. With a frame engineered for strength yet\n                    lightweight enough to carry with ease, this umbrella is a marvel of modern\n                    design. Not just a shield against the elements, but a companion in your everyday\n                    journey, it provides peace of mind, knowing you’re prepared for whatever the\n                    skies may bring.\n                </p>\n                <p className={\"mb-md\"}>\n                    The sleek, stylish design complements any outfit, making it not only a practical\n                    accessory but also a fashion statement. With its smooth opening mechanism, you\n                    can effortlessly transition from a sunny day to a rainy one without missing a\n                    beat. Whether you are navigating through a busy city street or enjoying a quiet\n                    stroll in the park, this umbrella offers unmatched comfort and protection.\n                </p>\n                <p className={\"mb-md\"}>\n                    Indeed, it is not just an umbrella — it is an experience. One that elevates your\n                    daily routine, making every step in both sun and storm feel just a little bit\n                    brighter.\n                </p>\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Drawer is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Drawer\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer&apos;s visibility is controlled by the open state.</>\n    }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Drawer\"}\n                        content={\"Open Drawer\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Drawer {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: {\n        ...Default.args,\n        showCloseButton: false,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const CustomWidth: Story = {\n    args: {\n        ...Default.args,\n        width: 1000,\n        children: <>This drawer has a custom width of 1000px, making it wider than the default.</>\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        headerSeparator: false,\n        children: (\n            <>\n                <Tabs\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key=\"account\"\n                            value=\"account\"\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"company\"\n                            value=\"company\"\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"security\"\n                            value=\"security\"\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"development\"\n                            value=\"development\"\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDrawer: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item content={\"Billing\"} />\n                    <DropdownMenu.Item content={\"Settings\"} />\n                    <DropdownMenu.Item content={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Drawer.Icon icon={<DoorbellIcon />} label={\"Icon label...\"} />,\n        children: <>The icon helps to visually identify the purpose of this drawer.</>\n    }\n};\n\nexport const AsModal: Story = {\n    args: {\n        ...Default.args,\n        modal: true,\n        children: (\n            <>\n                This drawer has modal=true, which means it will show an overlay behind it and\n                prevent interaction with the content underneath.\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Drawer\" onClick={() => setOpen(true)} />\n\n                <Drawer {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Drawer Title\",\n        description: \"A short drawer description.\",\n        showCloseButton: true,\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true,\n        side: \"right\",\n        modal: false,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md, mt-md\"}>\n                    This is the drawer content area. You can place any content here including forms,\n                    text, images, or other components.\n                </p>\n                <p className={\"mb-md\"}>\n                    Drawers are useful for displaying additional information or actions without\n                    navigating away from the current page.\n                </p>\n            </>\n        ),\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        width: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        side: {\n            description: \"Side from which the drawer appears\",\n            control: \"select\",\n            options: [\"left\", \"right\"],\n            defaultValue: \"right\"\n        },\n        size: {\n            description: \"Controls the size of the drawer\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        showCloseButton: {\n            description: \"Show close button in the top-right corner\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        modal: {\n            description: \"Whether the drawer should behave as a modal\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        bodyPadding: {\n            description: \"Add padding to the drawer body\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        headerSeparator: {\n            description: \"Show separator below the header\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        footerSeparator: {\n            description: \"Show separator above the footer\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        width: {\n            description:\n                'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like \"80%\", \"50vw\", \"auto\", etc., following React.CSSProperties[\"width\"] types.'\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\"\n        },\n        children: {\n            description:\n                \"Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\"\n        }\n    }\n};\n"],"names":["meta","Drawer","Default","Button","opened","console","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","ControlledVisibility","props","open","setOpen","React","WithOpenCloseEventHandler","WithDropdownMenu","DropdownMenu","WithoutCloseButton","CustomWidth","WithTabs","Tabs","DropdownMenuInDrawer","WithIcon","DoorbellIcon","AsModal","Documentation","args","undefined"],"mappings":"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"}
+{"version":3,"file":"Drawer/Drawer.stories.js","sources":["../../src/Drawer/Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Drawer } from \"./Drawer.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as DoorbellIcon } from \"@webiny/icons/ring_volume.svg\";\n\nconst meta: Meta<typeof Drawer> = {\n    title: \"Components/Drawer\",\n    component: Drawer,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Drawer>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Drawer Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md\"}>\n                    The amazing, splendid, and most useful umbrella, resistant to rain and friendly\n                    to winds, is something that deserves all admiration. Crafted with perfect\n                    textures, it bravely withstands storms and gently shades the rays of the sun. A\n                    remarkable innovation, with an ergonomically designed grip most suited to the\n                    hand, it remains stable even in the fiercest weather.\n                </p>\n                <p className={\"mb-md\"}>\n                    Its fabric, woven from the highest quality materials, ensures that you stay dry,\n                    no matter the intensity of the rain. With a frame engineered for strength yet\n                    lightweight enough to carry with ease, this umbrella is a marvel of modern\n                    design. Not just a shield against the elements, but a companion in your everyday\n                    journey, it provides peace of mind, knowing you’re prepared for whatever the\n                    skies may bring.\n                </p>\n                <p className={\"mb-md\"}>\n                    The sleek, stylish design complements any outfit, making it not only a practical\n                    accessory but also a fashion statement. With its smooth opening mechanism, you\n                    can effortlessly transition from a sunny day to a rainy one without missing a\n                    beat. Whether you are navigating through a busy city street or enjoying a quiet\n                    stroll in the park, this umbrella offers unmatched comfort and protection.\n                </p>\n                <p className={\"mb-md\"}>\n                    Indeed, it is not just an umbrella — it is an experience. One that elevates your\n                    daily routine, making every step in both sun and storm feel just a little bit\n                    brighter.\n                </p>\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Drawer is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Drawer\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer&apos;s visibility is controlled by the open state.</>\n    }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Drawer\"}\n                        content={\"Open Drawer\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Drawer {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: {\n        ...Default.args,\n        showCloseButton: false,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const CustomWidth: Story = {\n    args: {\n        ...Default.args,\n        width: 1000,\n        children: <>This drawer has a custom width of 1000px, making it wider than the default.</>\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        headerSeparator: false,\n        children: (\n            <>\n                <Tabs\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key=\"account\"\n                            value=\"account\"\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"company\"\n                            value=\"company\"\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"security\"\n                            value=\"security\"\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"development\"\n                            value=\"development\"\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDrawer: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item content={\"Billing\"} />\n                    <DropdownMenu.Item content={\"Settings\"} />\n                    <DropdownMenu.Item content={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Drawer.Icon icon={<DoorbellIcon />} label={\"Icon label...\"} />,\n        children: <>The icon helps to visually identify the purpose of this drawer.</>\n    }\n};\n\nexport const AsModal: Story = {\n    args: {\n        ...Default.args,\n        modal: true,\n        children: (\n            <>\n                This drawer has modal=true, which means it will show an overlay behind it and\n                prevent interaction with the content underneath.\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Drawer\" onClick={() => setOpen(true)} />\n\n                <Drawer {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Drawer Title\",\n        description: \"A short drawer description.\",\n        showCloseButton: true,\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true,\n        side: \"right\",\n        modal: false,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md, mt-md\"}>\n                    This is the drawer content area. You can place any content here including forms,\n                    text, images, or other components.\n                </p>\n                <p className={\"mb-md\"}>\n                    Drawers are useful for displaying additional information or actions without\n                    navigating away from the current page.\n                </p>\n            </>\n        ),\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        width: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        side: {\n            description: \"Side from which the drawer appears\",\n            control: \"select\",\n            options: [\"left\", \"right\"],\n            defaultValue: \"right\"\n        },\n        size: {\n            description: \"Controls the size of the drawer\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        showCloseButton: {\n            description: \"Show close button in the top-right corner\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        modal: {\n            description: \"Whether the drawer should behave as a modal\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        bodyPadding: {\n            description: \"Add padding to the drawer body\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        headerSeparator: {\n            description: \"Show separator below the header\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        footerSeparator: {\n            description: \"Show separator above the footer\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        width: {\n            description:\n                'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like \"80%\", \"50vw\", \"auto\", etc., following React.CSSProperties[\"width\"] types.'\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\"\n        },\n        children: {\n            description:\n                \"Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\"\n        }\n    }\n};\n"],"names":["meta","Drawer","Default","Button","opened","console","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","ControlledVisibility","props","open","setOpen","React","WithOpenCloseEventHandler","WithDropdownMenu","DropdownMenu","WithoutCloseButton","CustomWidth","WithTabs","Tabs","DropdownMenuInDrawer","WithIcon","DoorbellIcon","AsModal","Documentation","args","undefined"],"mappings":"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"}

package/DropdownMenu/DropdownMenu.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { DropdownMenu } from "./DropdownMenu.js";
 declare const meta: Meta<typeof DropdownMenu>;
 export default meta;

package/DropdownMenu/DropdownMenu.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu/DropdownMenu.stories.js","sources":["../../src/DropdownMenu/DropdownMenu.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { DropdownMenu } from \"./DropdownMenu.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { ReactComponent as Cloud } from \"@webiny/icons/cloud.svg\";\nimport { ReactComponent as LogOut } from \"@webiny/icons/logout.svg\";\nimport { ReactComponent as LifeBuoy } from \"@webiny/icons/safety_check.svg\";\nimport { ReactComponent as CreditCard } from \"@webiny/icons/credit_score.svg\";\nimport { ReactComponent as Plus } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusCircle } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as Settings } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as Users } from \"@webiny/icons/people.svg\";\nimport { ReactComponent as UserPlus } from \"@webiny/icons/person_add.svg\";\nimport { ReactComponent as User } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as Keyboard } from \"@webiny/icons/keyboard.svg\";\nimport { ReactComponent as Mail } from \"@webiny/icons/mail.svg\";\nimport { ReactComponent as MessageSquare } from \"@webiny/icons/chat_bubble.svg\";\nimport { ReactComponent as LinkIcon } from \"@webiny/icons/link.svg\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DropdownMenu> = {\n    title: \"Components/Dropdown Menu\",\n    component: DropdownMenu,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof DropdownMenu>;\n\nconst { Label, Separator, Group, Item, Link, CheckboxItem } = DropdownMenu;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2 (target: _blank)\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                    target={\"_blank\"}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SimpleMenuWithIcons: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithSubMenus: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon element={<User />} label={\"Profile\"} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon label={\"Team\"} element={<Users />} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon label={\"Invite user\"} element={<UserPlus />} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        >\n                            <Item\n                                icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                                text={\"Email\"}\n                            />\n                            <Item\n                                icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                                text={\"Message\"}\n                            />\n                            <Separator />\n                            <Item\n                                icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                                text={\"More...\"}\n                            />\n                        </Item>\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nconst TARGET_LEVELS = [\n    {\n        id: \"viewer\",\n        label: \"Viewer\",\n        description: \"Can view content, but not modify it\"\n    },\n    {\n        id: \"editor\",\n        label: \"Editor\",\n        description: \"Can view and modify content\"\n    },\n    {\n        id: \"owner\",\n        label: \"Owner\",\n        description: \"Can edit and manage content permissions\"\n    }\n];\n\nexport const WithCheckboxItems: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                {TARGET_LEVELS.map(level => (\n                    <CheckboxItem\n                        key={level.id}\n                        checked={level.id === \"viewer\"}\n                        text={\n                            <div>\n                                <Text as={\"div\"}>{level.label}</Text>\n                                <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                                    {level.description}\n                                </Text>\n                            </div>\n                        }\n                        onClick={() => {\n                            console.log(\"Selected level:\", level.id);\n                        }}\n                    />\n                ))}\n                <DropdownMenu.Separator />\n                <DropdownMenu.Item text={\"Remove access\"} />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithOnOpenChange: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        onOpenChange: opened => {\n            console.log(`Menu is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const Documentation: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The trigger element that opens the menu. Please refer to the example code for details.\"\n        },\n        children: {\n            description: \"The content of the menu. Please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","DropdownMenu","Label","Separator","Group","Item","Link","CheckboxItem","Default","Button","User","CreditCard","Settings","Keyboard","Users","UserPlus","Mail","MessageSquare","PlusCircle","Plus","LifeBuoy","Cloud","LogOut","LinkIcon","SimpleMenuWithIcons","WithSubMenus","TARGET_LEVELS","WithCheckboxItems","level","Text","console","WithOnOpenChange","opened","Documentation"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu/DropdownMenu.stories.js","sources":["../../src/DropdownMenu/DropdownMenu.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { DropdownMenu } from \"./DropdownMenu.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { ReactComponent as Cloud } from \"@webiny/icons/cloud.svg\";\nimport { ReactComponent as LogOut } from \"@webiny/icons/logout.svg\";\nimport { ReactComponent as LifeBuoy } from \"@webiny/icons/safety_check.svg\";\nimport { ReactComponent as CreditCard } from \"@webiny/icons/credit_score.svg\";\nimport { ReactComponent as Plus } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusCircle } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as Settings } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as Users } from \"@webiny/icons/people.svg\";\nimport { ReactComponent as UserPlus } from \"@webiny/icons/person_add.svg\";\nimport { ReactComponent as User } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as Keyboard } from \"@webiny/icons/keyboard.svg\";\nimport { ReactComponent as Mail } from \"@webiny/icons/mail.svg\";\nimport { ReactComponent as MessageSquare } from \"@webiny/icons/chat_bubble.svg\";\nimport { ReactComponent as LinkIcon } from \"@webiny/icons/link.svg\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DropdownMenu> = {\n    title: \"Components/Dropdown Menu\",\n    component: DropdownMenu,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof DropdownMenu>;\n\nconst { Label, Separator, Group, Item, Link, CheckboxItem } = DropdownMenu;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2 (target: _blank)\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                    target={\"_blank\"}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SimpleMenuWithIcons: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithSubMenus: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon element={<User />} label={\"Profile\"} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon label={\"Team\"} element={<Users />} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon label={\"Invite user\"} element={<UserPlus />} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        >\n                            <Item\n                                icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                                text={\"Email\"}\n                            />\n                            <Item\n                                icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                                text={\"Message\"}\n                            />\n                            <Separator />\n                            <Item\n                                icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                                text={\"More...\"}\n                            />\n                        </Item>\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nconst TARGET_LEVELS = [\n    {\n        id: \"viewer\",\n        label: \"Viewer\",\n        description: \"Can view content, but not modify it\"\n    },\n    {\n        id: \"editor\",\n        label: \"Editor\",\n        description: \"Can view and modify content\"\n    },\n    {\n        id: \"owner\",\n        label: \"Owner\",\n        description: \"Can edit and manage content permissions\"\n    }\n];\n\nexport const WithCheckboxItems: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                {TARGET_LEVELS.map(level => (\n                    <CheckboxItem\n                        key={level.id}\n                        checked={level.id === \"viewer\"}\n                        text={\n                            <div>\n                                <Text as={\"div\"}>{level.label}</Text>\n                                <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                                    {level.description}\n                                </Text>\n                            </div>\n                        }\n                        onClick={() => {\n                            console.log(\"Selected level:\", level.id);\n                        }}\n                    />\n                ))}\n                <DropdownMenu.Separator />\n                <DropdownMenu.Item text={\"Remove access\"} />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithOnOpenChange: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        onOpenChange: opened => {\n            console.log(`Menu is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const Documentation: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The trigger element that opens the menu. Please refer to the example code for details.\"\n        },\n        children: {\n            description: \"The content of the menu. Please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","DropdownMenu","Label","Separator","Group","Item","Link","CheckboxItem","Default","Button","User","CreditCard","Settings","Keyboard","Users","UserPlus","Mail","MessageSquare","PlusCircle","Plus","LifeBuoy","Cloud","LogOut","LinkIcon","SimpleMenuWithIcons","WithSubMenus","TARGET_LEVELS","WithCheckboxItems","level","Text","console","WithOnOpenChange","opened","Documentation"],"mappings":"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"}

package/FilePicker/FilePicker.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { FilePicker } from "../FilePicker/index.js";
 declare const meta: Meta<typeof FilePicker>;
 export default meta;

package/FilePicker/FilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.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 Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.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 [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file 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 file 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        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.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 Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.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 [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file 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 file 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        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}

package/FilePicker/domains/FileItem.js

@@ -8,10 +8,11 @@ class FileItem {
         this._size = data.size;
     }
     static create(data) {
+        const url = "url" in data ? data.url : data.src;
         return new FileItem({
             id: generateId(data.id),
-            name: data.name ?? data.url,
-            url: data.url,
+            name: data.name ?? url,
+            url,
             mimeType: data.mimeType ?? this.getDefaultMimeType(),
             size: data.size ?? 0
         });

package/FilePicker/domains/FileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/domains/FileItem.js","sources":["../../../src/FilePicker/domains/FileItem.ts"],"sourcesContent":["import type { FileItemDto } from \"./FileItemDto.js\";\nimport { generateId } from \"~/utils.js\";\n\nexport class FileItem {\n    private readonly _id: string;\n    private readonly _name: string;\n    private readonly _url: string;\n    private readonly _mimeType: string;\n    private readonly _size: number;\n\n    protected constructor(data: {\n        id: string;\n        name: string;\n        url: string;\n        mimeType: string;\n        size: number;\n    }) {\n        this._id = data.id;\n        this._name = data.name;\n        this._url = data.url;\n        this._mimeType = data.mimeType;\n        this._size = data.size;\n    }\n\n    static create(data: FileItemDto): FileItem {\n        return new FileItem({\n            id: generateId(data.id),\n            name: data.name ?? data.url,\n            url: data.url,\n            mimeType: data.mimeType ?? this.getDefaultMimeType(),\n            size: data.size ?? 0\n        });\n    }\n\n    static createFromUrl(url: string): FileItem {\n        const documentUrl = new URL(url);\n        const pathname = documentUrl.pathname;\n        const name = pathname.substring(pathname.lastIndexOf(\"/\") + 1);\n        const extension = name.split(\".\").pop()?.toLowerCase() || \"\";\n\n        // Map extensions to mimetypes\n        const mimeTypes: Record<string, string> = {\n            // Images\n            jpg: \"image/jpeg\",\n            jpeg: \"image/jpeg\",\n            png: \"image/png\",\n            gif: \"image/gif\",\n            bmp: \"image/bmp\",\n            webp: \"image/webp\",\n            svg: \"image/svg+xml\",\n            ico: \"image/x-icon\",\n            tif: \"image/tiff\",\n            tiff: \"image/tiff\",\n\n            // Documents\n            pdf: \"application/pdf\",\n            txt: \"text/plain\",\n            csv: \"text/csv\",\n            json: \"application/json\",\n            xml: \"application/xml\",\n            html: \"text/html\",\n            xhtml: \"application/xhtml+xml\",\n            md: \"text/markdown\",\n\n            // Microsoft Office\n            doc: \"application/msword\",\n            docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n            xls: \"application/vnd.ms-excel\",\n            xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n            ppt: \"application/vnd.ms-powerpoint\",\n            pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n\n            // Open Document Format\n            odt: \"application/vnd.oasis.opendocument.text\",\n            ods: \"application/vnd.oasis.opendocument.spreadsheet\",\n            odp: \"application/vnd.oasis.opendocument.presentation\",\n\n            // Audio\n            mp3: \"audio/mpeg\",\n            wav: \"audio/wav\",\n            ogg: \"audio/ogg\",\n            flac: \"audio/flac\",\n            aac: \"audio/aac\",\n            m4a: \"audio/mp4\",\n\n            // Video\n            mp4: \"video/mp4\",\n            avi: \"video/x-msvideo\",\n            mov: \"video/quicktime\",\n            mkv: \"video/x-matroska\",\n            webm: \"video/webm\",\n            flv: \"video/x-flv\",\n            wmv: \"video/x-ms-wmv\",\n\n            // Archives & Compressed\n            zip: \"application/zip\",\n            rar: \"application/vnd.rar\",\n            tar: \"application/x-tar\",\n            gz: \"application/gzip\",\n            bz2: \"application/x-bzip2\",\n            \"7z\": \"application/x-7z-compressed\",\n\n            // Code & Scripts\n            js: \"application/javascript\",\n            ts: \"application/typescript\",\n            css: \"text/css\",\n            py: \"text/x-python\",\n            java: \"text/x-java-source\",\n            c: \"text/x-c\",\n            cpp: \"text/x-c++\",\n            sh: \"application/x-sh\",\n            php: \"application/x-httpd-php\",\n            rb: \"application/x-ruby\",\n            go: \"text/x-go\",\n            swift: \"text/x-swift\"\n        };\n\n        return new FileItem({\n            id: generateId(),\n            name,\n            url,\n            mimeType: mimeTypes[extension] ?? this.getDefaultMimeType(),\n            size: 0\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get name() {\n        return this._name;\n    }\n\n    get url() {\n        return this._url;\n    }\n\n    get size() {\n        return this._size;\n    }\n\n    get mimeType() {\n        return this._mimeType;\n    }\n\n    private static getDefaultMimeType(): string {\n        return \"application/octet-stream\";\n    }\n}\n"],"names":["FileItem","data","generateId","url","documentUrl","URL","pathname","name","extension","mimeTypes"],"mappings":";AAGO,MAAMA;IAOT,YAAsBC,IAMrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;QACtB,IAAI,CAAC,IAAI,GAAGA,KAAK,GAAG;QACpB,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;IAC1B;IAEA,OAAO,OAAOA,IAAiB,EAAY;QACvC,OAAO,IAAID,SAAS;YAChB,IAAIE,WAAWD,KAAK,EAAE;YACtB,MAAMA,KAAK,IAAI,IAAIA,KAAK,GAAG;YAC3B,KAAKA,KAAK,GAAG;YACb,UAAUA,KAAK,QAAQ,IAAI,IAAI,CAAC,kBAAkB;YAClD,MAAMA,KAAK,IAAI,IAAI;QACvB;IACJ;IAEA,OAAO,cAAcE,GAAW,EAAY;QACxC,MAAMC,cAAc,IAAIC,IAAIF;QAC5B,MAAMG,WAAWF,YAAY,QAAQ;QACrC,MAAMG,OAAOD,SAAS,SAAS,CAACA,SAAS,WAAW,CAAC,OAAO;QAC5D,MAAME,YAAYD,KAAK,KAAK,CAAC,KAAK,GAAG,IAAI,iBAAiB;QAG1D,MAAME,YAAoC;YAEtC,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YAGN,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,MAAM;YACN,OAAO;YACP,IAAI;YAGJ,KAAK;YACL,MAAM;YACN,KAAK;YACL,MAAM;YACN,KAAK;YACL,MAAM;YAGN,KAAK;YACL,KAAK;YACL,KAAK;YAGL,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YAGL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YAGL,KAAK;YACL,KAAK;YACL,KAAK;YACL,IAAI;YACJ,KAAK;YACL,MAAM;YAGN,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,IAAI;YACJ,MAAM;YACN,GAAG;YACH,KAAK;YACL,IAAI;YACJ,KAAK;YACL,IAAI;YACJ,IAAI;YACJ,OAAO;QACX;QAEA,OAAO,IAAIT,SAAS;YAChB,IAAIE;YACJK;YACAJ;YACA,UAAUM,SAAS,CAACD,UAAU,IAAI,IAAI,CAAC,kBAAkB;YACzD,MAAM;QACV;IACJ;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,IAAI;IACpB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,OAAe,qBAA6B;QACxC,OAAO;IACX;AACJ"}
+{"version":3,"file":"FilePicker/domains/FileItem.js","sources":["../../../src/FilePicker/domains/FileItem.ts"],"sourcesContent":["import type { FileItemDto } from \"./FileItemDto.js\";\nimport { generateId } from \"~/utils.js\";\n\nexport class FileItem {\n    private readonly _id: string;\n    private readonly _name: string;\n    private readonly _url: string;\n    private readonly _mimeType: string;\n    private readonly _size: number;\n\n    protected constructor(data: {\n        id: string;\n        name: string;\n        url: string;\n        mimeType: string;\n        size: number;\n    }) {\n        this._id = data.id;\n        this._name = data.name;\n        this._url = data.url;\n        this._mimeType = data.mimeType;\n        this._size = data.size;\n    }\n\n    static create(data: FileItemDto): FileItem {\n        const url = \"url\" in data ? data.url : data.src;\n        return new FileItem({\n            id: generateId(data.id),\n            name: data.name ?? url,\n            url,\n            mimeType: data.mimeType ?? this.getDefaultMimeType(),\n            size: data.size ?? 0\n        });\n    }\n\n    static createFromUrl(url: string): FileItem {\n        const documentUrl = new URL(url);\n        const pathname = documentUrl.pathname;\n        const name = pathname.substring(pathname.lastIndexOf(\"/\") + 1);\n        const extension = name.split(\".\").pop()?.toLowerCase() || \"\";\n\n        // Map extensions to mimetypes\n        const mimeTypes: Record<string, string> = {\n            // Images\n            jpg: \"image/jpeg\",\n            jpeg: \"image/jpeg\",\n            png: \"image/png\",\n            gif: \"image/gif\",\n            bmp: \"image/bmp\",\n            webp: \"image/webp\",\n            svg: \"image/svg+xml\",\n            ico: \"image/x-icon\",\n            tif: \"image/tiff\",\n            tiff: \"image/tiff\",\n\n            // Documents\n            pdf: \"application/pdf\",\n            txt: \"text/plain\",\n            csv: \"text/csv\",\n            json: \"application/json\",\n            xml: \"application/xml\",\n            html: \"text/html\",\n            xhtml: \"application/xhtml+xml\",\n            md: \"text/markdown\",\n\n            // Microsoft Office\n            doc: \"application/msword\",\n            docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n            xls: \"application/vnd.ms-excel\",\n            xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n            ppt: \"application/vnd.ms-powerpoint\",\n            pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n\n            // Open Document Format\n            odt: \"application/vnd.oasis.opendocument.text\",\n            ods: \"application/vnd.oasis.opendocument.spreadsheet\",\n            odp: \"application/vnd.oasis.opendocument.presentation\",\n\n            // Audio\n            mp3: \"audio/mpeg\",\n            wav: \"audio/wav\",\n            ogg: \"audio/ogg\",\n            flac: \"audio/flac\",\n            aac: \"audio/aac\",\n            m4a: \"audio/mp4\",\n\n            // Video\n            mp4: \"video/mp4\",\n            avi: \"video/x-msvideo\",\n            mov: \"video/quicktime\",\n            mkv: \"video/x-matroska\",\n            webm: \"video/webm\",\n            flv: \"video/x-flv\",\n            wmv: \"video/x-ms-wmv\",\n\n            // Archives & Compressed\n            zip: \"application/zip\",\n            rar: \"application/vnd.rar\",\n            tar: \"application/x-tar\",\n            gz: \"application/gzip\",\n            bz2: \"application/x-bzip2\",\n            \"7z\": \"application/x-7z-compressed\",\n\n            // Code & Scripts\n            js: \"application/javascript\",\n            ts: \"application/typescript\",\n            css: \"text/css\",\n            py: \"text/x-python\",\n            java: \"text/x-java-source\",\n            c: \"text/x-c\",\n            cpp: \"text/x-c++\",\n            sh: \"application/x-sh\",\n            php: \"application/x-httpd-php\",\n            rb: \"application/x-ruby\",\n            go: \"text/x-go\",\n            swift: \"text/x-swift\"\n        };\n\n        return new FileItem({\n            id: generateId(),\n            name,\n            url,\n            mimeType: mimeTypes[extension] ?? this.getDefaultMimeType(),\n            size: 0\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get name() {\n        return this._name;\n    }\n\n    get url() {\n        return this._url;\n    }\n\n    get size() {\n        return this._size;\n    }\n\n    get mimeType() {\n        return this._mimeType;\n    }\n\n    private static getDefaultMimeType(): string {\n        return \"application/octet-stream\";\n    }\n}\n"],"names":["FileItem","data","url","generateId","documentUrl","URL","pathname","name","extension","mimeTypes"],"mappings":";AAGO,MAAMA;IAOT,YAAsBC,IAMrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;QACtB,IAAI,CAAC,IAAI,GAAGA,KAAK,GAAG;QACpB,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;IAC1B;IAEA,OAAO,OAAOA,IAAiB,EAAY;QACvC,MAAMC,MAAM,SAASD,OAAOA,KAAK,GAAG,GAAGA,KAAK,GAAG;QAC/C,OAAO,IAAID,SAAS;YAChB,IAAIG,WAAWF,KAAK,EAAE;YACtB,MAAMA,KAAK,IAAI,IAAIC;YACnBA;YACA,UAAUD,KAAK,QAAQ,IAAI,IAAI,CAAC,kBAAkB;YAClD,MAAMA,KAAK,IAAI,IAAI;QACvB;IACJ;IAEA,OAAO,cAAcC,GAAW,EAAY;QACxC,MAAME,cAAc,IAAIC,IAAIH;QAC5B,MAAMI,WAAWF,YAAY,QAAQ;QACrC,MAAMG,OAAOD,SAAS,SAAS,CAACA,SAAS,WAAW,CAAC,OAAO;QAC5D,MAAME,YAAYD,KAAK,KAAK,CAAC,KAAK,GAAG,IAAI,iBAAiB;QAG1D,MAAME,YAAoC;YAEtC,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YAGN,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,MAAM;YACN,OAAO;YACP,IAAI;YAGJ,KAAK;YACL,MAAM;YACN,KAAK;YACL,MAAM;YACN,KAAK;YACL,MAAM;YAGN,KAAK;YACL,KAAK;YACL,KAAK;YAGL,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YAGL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;YACN,KAAK;YACL,KAAK;YAGL,KAAK;YACL,KAAK;YACL,KAAK;YACL,IAAI;YACJ,KAAK;YACL,MAAM;YAGN,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,IAAI;YACJ,MAAM;YACN,GAAG;YACH,KAAK;YACL,IAAI;YACJ,KAAK;YACL,IAAI;YACJ,IAAI;YACJ,OAAO;QACX;QAEA,OAAO,IAAIT,SAAS;YAChB,IAAIG;YACJI;YACAL;YACA,UAAUO,SAAS,CAACD,UAAU,IAAI,IAAI,CAAC,kBAAkB;YACzD,MAAM;QACV;IACJ;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,IAAI;IACpB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,OAAe,qBAA6B;QACxC,OAAO;IACX;AACJ"}

package/FilePicker/domains/FileItemDto.d.ts

@@ -1,7 +1,14 @@
-export interface FileItemDto {
+interface BaseFileItemDto {
     id?: string;
     name?: string;
-    url: string;
     mimeType?: string;
     size?: number;
 }
+interface SrcFileItemDto extends BaseFileItemDto {
+    src: string;
+}
+interface UrlFileItemDto extends BaseFileItemDto {
+    url: string;
+}
+export type FileItemDto = SrcFileItemDto | UrlFileItemDto;
+export {};

package/FilePicker/primitives/FilePickerPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { FilePickerPrimitive } from "./FilePickerPrimitive.js";
 declare const meta: Meta<typeof FilePickerPrimitive>;
 export default meta;

package/FilePicker/primitives/FilePickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/FilePickerPrimitive.stories.js","sources":["../../../src/FilePicker/primitives/FilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { FilePickerPrimitive } from \"./FilePickerPrimitive.js\";\nimport type { FileItemDto } from \"~/FilePicker//index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePickerPrimitive> = {\n    title: \"Components/Form Primitives/FilePicker\",\n    component: FilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePickerPrimitive\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Upload background image\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        value: {\n            name: \"export.csv\",\n            url: \"export.csv\",\n            mimeType: \"text/csv\",\n            size: 100000\n        },\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePickerPrimitive","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}
+{"version":3,"file":"FilePicker/primitives/FilePickerPrimitive.stories.js","sources":["../../../src/FilePicker/primitives/FilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { FilePickerPrimitive } from \"./FilePickerPrimitive.js\";\nimport type { FileItemDto } from \"~/FilePicker//index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePickerPrimitive> = {\n    title: \"Components/Form Primitives/FilePicker\",\n    component: FilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePickerPrimitive\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Upload background image\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        value: {\n            name: \"export.csv\",\n            url: \"export.csv\",\n            mimeType: \"text/csv\",\n            size: 100000\n        },\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePickerPrimitive","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}

package/FilePicker/primitives/components/previews/FilePreview.js

@@ -1,8 +1,10 @@
-import { RichItemPreview, TextOnlyPreview } from "./index.js";
+import { RichItemPreview } from "./index.js";
 import * as __rspack_external_react from "react";
 const FilePreview = ({ type, renderFilePreview, ...props })=>{
-    if ("function" == typeof renderFilePreview) return renderFilePreview(props);
-    if ("compact" === type) return /*#__PURE__*/ __rspack_external_react.createElement(TextOnlyPreview, props);
+    if ("function" == typeof renderFilePreview) return renderFilePreview({
+        type,
+        ...props
+    });
     return /*#__PURE__*/ __rspack_external_react.createElement(RichItemPreview, props);
 };
 export { FilePreview };

package/FilePicker/primitives/components/previews/FilePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/FilePreview.js","sources":["../../../../../src/FilePicker/primitives/components/previews/FilePreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type VariantProps } from \"~/utils.js\";\nimport type { filePickerVariants } from \"~/FilePicker/index.js\";\nimport type { FilePreviewDefaultProps } from \"../types.js\";\nimport { RichItemPreview, TextOnlyPreview } from \"../previews/index.js\";\n\ntype FilePreviewProps = FilePreviewDefaultProps & {\n    type: VariantProps<typeof filePickerVariants>[\"type\"];\n    renderFilePreview?: (props: any) => React.ReactElement<any>;\n};\n\nconst FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {\n    if (typeof renderFilePreview === \"function\") {\n        return renderFilePreview(props);\n    }\n\n    if (type === \"compact\") {\n        return <TextOnlyPreview {...props} />;\n    }\n\n    return <RichItemPreview {...props} />;\n};\n\nexport { FilePreview, type FilePreviewProps };\n"],"names":["FilePreview","type","renderFilePreview","props","TextOnlyPreview","RichItemPreview"],"mappings":";;AAWA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGC,OAAyB;IACxE,IAAI,AAA6B,cAA7B,OAAOD,mBACP,OAAOA,kBAAkBC;IAG7B,IAAIF,AAAS,cAATA,MACA,OAAO,WAAP,GAAO,sCAACG,iBAAoBD;IAGhC,OAAO,WAAP,GAAO,sCAACE,iBAAoBF;AAChC"}
+{"version":3,"file":"FilePicker/primitives/components/previews/FilePreview.js","sources":["../../../../../src/FilePicker/primitives/components/previews/FilePreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type VariantProps } from \"~/utils.js\";\nimport type { filePickerVariants } from \"~/FilePicker/index.js\";\nimport type { FilePreviewDefaultProps } from \"../types.js\";\nimport { RichItemPreview } from \"../previews/index.js\";\n\ntype FilePreviewProps = FilePreviewDefaultProps & {\n    type: VariantProps<typeof filePickerVariants>[\"type\"];\n    renderFilePreview?: (props: any) => React.ReactElement<any>;\n};\n\nconst FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {\n    if (typeof renderFilePreview === \"function\") {\n        return renderFilePreview({ type, ...props });\n    }\n\n    return <RichItemPreview {...props} />;\n};\n\nexport { FilePreview, type FilePreviewProps };\n"],"names":["FilePreview","type","renderFilePreview","props","RichItemPreview"],"mappings":";;AAWA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGC,OAAyB;IACxE,IAAI,AAA6B,cAA7B,OAAOD,mBACP,OAAOA,kBAAkB;QAAED;QAAM,GAAGE,KAAK;IAAC;IAG9C,OAAO,WAAP,GAAO,sCAACC,iBAAoBD;AAChC"}

package/FilePicker/primitives/useFilePicker.js

@@ -1,7 +1,9 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
 import { FilePickerPresenter } from "./presenters/index.js";
+import { useAdminUi } from "../../AdminUiProvider/index.js";
 const useFilePicker = (props)=>{
+    const { fileUrlFormatter } = useAdminUi();
     const params = useMemo(()=>({
             value: props.value
         }), [
@@ -19,8 +21,29 @@ const useFilePicker = (props)=>{
         }), [
         presenter
     ]);
+    const formattedVm = useMemo(()=>{
+        if (!vm.file) return vm;
+        try {
+            const url = new URL(vm.file.url);
+            fileUrlFormatter.format(url, {
+                width: 128
+            });
+            return {
+                ...vm,
+                file: {
+                    ...vm.file,
+                    url: url.toString()
+                }
+            };
+        } catch  {
+            return vm;
+        }
+    }, [
+        vm,
+        fileUrlFormatter
+    ]);
     return {
-        vm
+        vm: formattedVm
     };
 };
 export { useFilePicker };

package/FilePicker/primitives/useFilePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/useFilePicker.js","sources":["../../../src/FilePicker/primitives/useFilePicker.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport { FilePickerPresenter, type FilePickerPresenterParams } from \"./presenters/index.js\";\nimport type { FilePickerPrimitiveProps } from \"~/FilePicker/index.js\";\n\ntype IFilePickerPrimitiveProps = Pick<FilePickerPrimitiveProps, \"value\">;\n\nexport const useFilePicker = (props: IFilePickerPrimitiveProps) => {\n    const params: FilePickerPresenterParams = useMemo(\n        () => ({\n            value: props.value\n        }),\n        [props.value]\n    );\n\n    const presenter = useMemo(() => {\n        return new FilePickerPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm\n    };\n};\n"],"names":["useFilePicker","props","params","useMemo","presenter","FilePickerPresenter","vm","setVm","useState","useEffect","autorun"],"mappings":";;;AAOO,MAAMA,gBAAgB,CAACC;IAC1B,MAAMC,SAAoCC,QACtC,IAAO;YACH,OAAOF,MAAM,KAAK;QACtB,IACA;QAACA,MAAM,KAAK;KAAC;IAGjB,MAAMG,YAAYD,QAAQ,IACf,IAAIE,uBACZ,EAAE;IAEL,MAAM,CAACC,IAAIC,MAAM,GAAGC,SAASJ,UAAU,EAAE;IAEzCK,UAAU;QACNL,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;KAAO;IAEXO,UAAU,IACCC,QAAQ;YACXH,MAAMH,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QACHE;IACJ;AACJ"}
+{"version":3,"file":"FilePicker/primitives/useFilePicker.js","sources":["../../../src/FilePicker/primitives/useFilePicker.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport { FilePickerPresenter, type FilePickerPresenterParams } from \"./presenters/index.js\";\nimport type { FilePickerPrimitiveProps } from \"~/FilePicker/index.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\ntype IFilePickerPrimitiveProps = Pick<FilePickerPrimitiveProps, \"value\">;\n\nexport const useFilePicker = (props: IFilePickerPrimitiveProps) => {\n    const { fileUrlFormatter } = useAdminUi();\n\n    const params: FilePickerPresenterParams = useMemo(\n        () => ({\n            value: props.value\n        }),\n        [props.value]\n    );\n\n    const presenter = useMemo(() => {\n        return new FilePickerPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    const formattedVm = useMemo(() => {\n        if (!vm.file) {\n            return vm;\n        }\n        try {\n            const url = new URL(vm.file.url);\n            fileUrlFormatter.format(url, { width: 128 });\n            return { ...vm, file: { ...vm.file, url: url.toString() } };\n        } catch {\n            return vm;\n        }\n    }, [vm, fileUrlFormatter]);\n\n    return {\n        vm: formattedVm\n    };\n};\n"],"names":["useFilePicker","props","fileUrlFormatter","useAdminUi","params","useMemo","presenter","FilePickerPresenter","vm","setVm","useState","useEffect","autorun","formattedVm","url","URL"],"mappings":";;;;AAQO,MAAMA,gBAAgB,CAACC;IAC1B,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAE7B,MAAMC,SAAoCC,QACtC,IAAO;YACH,OAAOJ,MAAM,KAAK;QACtB,IACA;QAACA,MAAM,KAAK;KAAC;IAGjB,MAAMK,YAAYD,QAAQ,IACf,IAAIE,uBACZ,EAAE;IAEL,MAAM,CAACC,IAAIC,MAAM,GAAGC,SAASJ,UAAU,EAAE;IAEzCK,UAAU;QACNL,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;KAAO;IAEXO,UAAU,IACCC,QAAQ;YACXH,MAAMH,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,MAAMO,cAAcR,QAAQ;QACxB,IAAI,CAACG,GAAG,IAAI,EACR,OAAOA;QAEX,IAAI;YACA,MAAMM,MAAM,IAAIC,IAAIP,GAAG,IAAI,CAAC,GAAG;YAC/BN,iBAAiB,MAAM,CAACY,KAAK;gBAAE,OAAO;YAAI;YAC1C,OAAO;gBAAE,GAAGN,EAAE;gBAAE,MAAM;oBAAE,GAAGA,GAAG,IAAI;oBAAE,KAAKM,IAAI,QAAQ;gBAAG;YAAE;QAC9D,EAAE,OAAM;YACJ,OAAON;QACX;IACJ,GAAG;QAACA;QAAIN;KAAiB;IAEzB,OAAO;QACH,IAAIW;IACR;AACJ"}