@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/Dialog/Dialog.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as DialogStories from './Dialog.stories';
+import * as DialogStories from "./Dialog.stories";
 
 <Meta of={DialogStories} />
 
@@ -15,7 +15,7 @@ import React, { useState } from "react";
 import { Dialog, Button } from "@webiny/admin-ui";
 
 const DialogExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -33,8 +33,8 @@ const DialogExample = () => {
                 info={<>Learn more about this <a href={"#"}>here</a>.</>}
                 actions={
                     <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton />
+                        <Dialog.CancelAction />
+                        <Dialog.ConfirmAction />
                     </>
                 }
                 showCloseButton={true}
@@ -45,61 +45,62 @@ const DialogExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default DialogExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Dialog/Dialog.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Dialog/Dialog.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={DialogStories.Documentation} exclude={["onOpenChange", "trigger"]}/>
+<Controls of={DialogStories.Documentation} exclude={["onOpenChange", "trigger"]} />
 
 ```tsx
 import React, { useState } from "react";
 import { Dialog, Button } from "@webiny/admin-ui";
 
 const DialogExample = () => {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <>
-            <Button
-                variant="primary"
-                text="Open Dialog"
-                onClick={() => setOpen(true)}
-            />
-
-            <Dialog
-                open={open}
-                onOpenChange={open => setOpen(open)}
-                title="Dialog Title"
-                description="A short dialog description."
-                info={<>Learn more about this <a href={"#"}>here</a>.</>}
-                actions={
-                    <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton />
-                    </>
-                }
-                showCloseButton={true}
-                dismissible={true}
-            >
-                This is the dialog content area. You can place any content here including
-                forms, text, images, or other components.
-            </Dialog>
-        </>
-    );
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="primary" text="Open Dialog" onClick={() => setOpen(true)} />
+
+      <Dialog
+        open={open}
+        onOpenChange={open => setOpen(open)}
+        title="Dialog Title"
+        description="A short dialog description."
+        info={
+          <>
+            Learn more about this <a href={"#"}>here</a>.
+          </>
+        }
+        actions={
+          <>
+            <Dialog.CancelAction />
+            <Dialog.ConfirmAction />
+          </>
+        }
+        showCloseButton={true}
+        dismissible={true}
+      >
+        This is the dialog content area. You can place any content here including forms, text,
+        images, or other components.
+      </Dialog>
+    </>
+  );
 };
 
 export default DialogExample;
@@ -116,7 +117,7 @@ import React, { useState } from "react";
 import { Dialog, Button } from "@webiny/admin-ui";
 
 const ControlledVisibilityExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -137,8 +138,8 @@ const ControlledVisibilityExample = () => {
                 description="A short dialog description."
                 actions={
                     <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton />
+                        <Dialog.CancelAction />
+                        <Dialog.ConfirmAction />
                     </>
                 }
             >
@@ -146,6 +147,7 @@ const ControlledVisibilityExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default ControlledVisibilityExample;
@@ -158,7 +160,7 @@ import React, { useState } from "react";
 import { Dialog, Button, DropdownMenu } from "@webiny/admin-ui";
 
 const WithDropdownMenuExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -173,8 +175,8 @@ const WithDropdownMenuExample = () => {
                 description="A short dialog description."
                 actions={
                     <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton />
+                        <Dialog.CancelAction />
+                        <Dialog.ConfirmAction />
                     </>
                 }
             >
@@ -182,6 +184,7 @@ const WithDropdownMenuExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default WithDropdownMenuExample;
@@ -194,7 +197,7 @@ import React, { useState } from "react";
 import { Dialog, Button } from "@webiny/admin-ui";
 
 const WithoutCloseButtonExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -212,8 +215,8 @@ const WithoutCloseButtonExample = () => {
                 showCloseButton={false}
                 actions={
                     <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton />
+                        <Dialog.CancelAction />
+                        <Dialog.ConfirmAction />
                     </>
                 }
             >
@@ -221,6 +224,7 @@ const WithoutCloseButtonExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default WithoutCloseButtonExample;
@@ -233,7 +237,7 @@ import React, { useState } from "react";
 import { Dialog, Button } from "@webiny/admin-ui";
 
 const AlertDialogExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -251,8 +255,8 @@ const AlertDialogExample = () => {
                 showCloseButton={false}
                 actions={
                     <>
-                        <Dialog.CancelButton text="Cancel" />
-                        <Dialog.ConfirmButton text="Delete" />
+                        <Dialog.CancelAction text="Cancel" />
+                        <Dialog.ConfirmAction text="Delete" />
                     </>
                 }
             >
@@ -261,6 +265,7 @@ const AlertDialogExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default AlertDialogExample;
@@ -274,7 +279,7 @@ import { Dialog, Button } from "@webiny/admin-ui";
 import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
 
 const WithIconExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -292,8 +297,8 @@ const WithIconExample = () => {
                 icon={<Dialog.Icon icon={<DoorbellIcon />} label="Title icon" />}
                 actions={
                     <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton />
+                        <Dialog.CancelAction />
+                        <Dialog.ConfirmAction />
                     </>
                 }
             >
@@ -301,6 +306,7 @@ const WithIconExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default WithIconExample;
@@ -313,7 +319,7 @@ import React, { useState } from "react";
 import { Dialog, Button } from "@webiny/admin-ui";
 
 const PreventOutsideDismissExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -331,8 +337,8 @@ const PreventOutsideDismissExample = () => {
                 dismissible={false}
                 actions={
                     <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton />
+                        <Dialog.CancelAction />
+                        <Dialog.ConfirmAction />
                     </>
                 }
             >
@@ -341,6 +347,7 @@ const PreventOutsideDismissExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default PreventOutsideDismissExample;
@@ -353,7 +360,7 @@ import React, { useState } from "react";
 import { Dialog, Button, Tabs } from "@webiny/admin-ui";
 
 const WithTabsExample = () => {
-    const [open, setOpen] = useState(false);
+const [open, setOpen] = useState(false);
 
     return (
         <>
@@ -371,8 +378,8 @@ const WithTabsExample = () => {
                 bodyPadding={false}
                 actions={
                     <>
-                        <Dialog.CancelButton />
-                        <Dialog.ConfirmButton text="Save" />
+                        <Dialog.CancelAction />
+                        <Dialog.ConfirmAction text="Save" />
                     </>
                 }
             >
@@ -408,6 +415,7 @@ const WithTabsExample = () => {
             </Dialog>
         </>
     );
+
 };
 
 export default WithTabsExample;
@@ -416,10 +424,16 @@ export default WithTabsExample;
 ## Anatomy
 
 ### Dialog Construction
-<img src="/images/storybook/dialog/anatomy.png" alt="Anatomy"/>
+
+<img src="/images/storybook/dialog/anatomy.png" alt="Anatomy" />
 
 ### Overlay and Positioning
-<img src="/images/storybook/dialog/overlay-and-positioning.png" alt="Dialog Overlay and Positioning"/>
+
+<img
+  src="/images/storybook/dialog/overlay-and-positioning.png"
+  alt="Dialog Overlay and Positioning"
+/>
 
 ## Usage
-<img src="/images/storybook/dialog/usage.png" alt="Usage"/>
+
+<img src="/images/storybook/dialog/usage.png" alt="Usage" />

package/Dialog/Dialog.stories.d.ts

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

package/Dialog/Dialog.stories.js

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
-import { Dialog } from "./Dialog";
-import { Button } from "../Button";
-import { DropdownMenu } from "../DropdownMenu";
+import { Dialog } from "./Dialog.js";
+import { Button } from "../Button/index.js";
+import { DropdownMenu } from "../DropdownMenu/index.js";
 import { ReactComponent as NotificationIcon } from "@webiny/icons/notifications_active.svg";
-import { Tabs } from "../Tabs";
-import { IconPicker } from "../IconPicker";
+import { Tabs } from "../Tabs/index.js";
+import { IconPicker } from "../IconPicker/index.js";
 
 // @ts-expect-error
 library.add(fas);
@@ -32,7 +32,7 @@ export const Default = {
     onOpenChange: opened => {
       console.log(`Dialog is ${opened ? "opened" : "closed"}.`);
     },
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelButton, null), /*#__PURE__*/React.createElement(Dialog.ConfirmButton, null))
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, null), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, null))
   },
   argTypes: {}
 };
@@ -145,11 +145,11 @@ export const DropdownMenuInDialog = {
         text: "Open"
       })
     }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Billing"
+      text: "Billing"
     }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Settings"
+      text: "Settings"
     }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Keyboard shortcuts"
+      text: "Keyboard shortcuts"
     })))
   }
 };
@@ -279,6 +279,7 @@ export const WithTabs = {
     ...Default.args,
     bodyPadding: false,
     children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
+      separator: true,
       spacing: "lg",
       tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
         key: "account",
@@ -326,7 +327,7 @@ export const Documentation = {
       href: "#"
     }, "here"), "."),
     children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is the dialog content area. You can place any content here including forms, text, images, or other components."),
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelButton, null), /*#__PURE__*/React.createElement(Dialog.ConfirmButton, null))
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, null), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, null))
   },
   argTypes: {
     title: {
@@ -358,16 +359,13 @@ export const Documentation = {
       defaultValue: true
     },
     info: {
-      description: "Additional info displayed below the description, please refer to the example below for details.",
-      control: "none"
+      description: "Additional info displayed below the description, please refer to the example below for details."
     },
     children: {
-      description: "Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.",
-      control: "none"
+      description: "Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details."
     },
     actions: {
-      description: "Actions displayed in the footer, please refer to the code example for details.",
-      control: "none"
+      description: "Actions displayed in the footer, please refer to the code example for details."
     }
   }
 };

package/Dialog/Dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","library","fas","Dialog","Button","DropdownMenu","ReactComponent","NotificationIcon","Tabs","IconPicker","add","meta","title","component","argTypes","Default","args","size","trigger","createElement","variant","text","description","info","Fragment","href","children","onOpenChange","opened","console","log","actions","CancelButton","ConfirmButton","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","render","props","open","setOpen","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","value","setValue","icons","prefix","name","onChange","WithIcon","icon","Icon","label","PreventOutsideDismiss","dismissible","WithTabs","bodyPadding","spacing","tabs","Tab","key","Documentation","control","options","defaultValue"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Dialog } from \"./Dialog\";\nimport { Button } from \"~/Button\";\nimport { DropdownMenu } from \"~/DropdownMenu\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs\";\nimport { IconPicker } from \"~/IconPicker\";\n\n// @ts-expect-error\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n    title: \"Components/Dialog\",\n    component: Dialog,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n    args: {\n        size: \"md\",\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Dialog 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                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Dialog.CancelButton />\n                <Dialog.ConfirmButton />\n            </>\n        )\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 SizeFullScreen: Story = {\n    args: {\n        ...Default.args,\n        size: \"full\"\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                <Dialog\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\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 Dialog\"}\n                        content={\"Open Dialog\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n    args: {\n        ...Default.args,\n        info: null,\n        showCloseButton: false,\n        title: \"Confirm Action\",\n        description: \"Are you sure you want to delete this item?\",\n        children: (\n            <>\n                <p>This action cannot be undone.</p>\n                <p>Deleted items cannot be recovered.</p>\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDialog: 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 DropdownIconPickerInDialog: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        return (\n            <Dialog {...args}>\n                <IconPicker\n                    icons={[\n                        { prefix: \"fas\", name: \"trash-restore-alt\" },\n                        { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n                        { prefix: \"fas\", name: \"naira-sign\" },\n                        { prefix: \"fas\", name: \"cart-arrow-down\" },\n                        { prefix: \"fas\", name: \"walkie-talkie\" },\n                        { prefix: \"fas\", name: \"file-edit\" },\n                        { prefix: \"fas\", name: \"file-pen\" },\n                        { prefix: \"fas\", name: \"receipt\" },\n                        { prefix: \"fas\", name: \"pen-square\" },\n                        { prefix: \"fas\", name: \"pencil-square\" },\n                        { prefix: \"fas\", name: \"square-pen\" },\n                        { prefix: \"fas\", name: \"suitcase-rolling\" },\n                        { prefix: \"fas\", name: \"person-circle-exclamation\" },\n                        { prefix: \"fas\", name: \"chevron-down\" },\n                        { prefix: \"fas\", name: \"battery\" },\n                        { prefix: \"fas\", name: \"battery-5\" },\n                        { prefix: \"fas\", name: \"battery-full\" },\n                        { prefix: \"fas\", name: \"skull-crossbones\" },\n                        { prefix: \"fas\", name: \"code-compare\" },\n                        { prefix: \"fas\", name: \"list-dots\" },\n                        { prefix: \"fas\", name: \"list-ul\" },\n                        { prefix: \"fas\", name: \"school-lock\" },\n                        { prefix: \"fas\", name: \"tower-cell\" },\n                        { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n                        { prefix: \"fas\", name: \"down-long\" },\n                        { prefix: \"fas\", name: \"ranking-star\" },\n                        { prefix: \"fas\", name: \"chess-king\" },\n                        { prefix: \"fas\", name: \"person-harassing\" },\n                        { prefix: \"fas\", name: \"brazilian-real-sign\" },\n                        { prefix: \"fas\", name: \"landmark-alt\" }\n                    ]}\n                    value={value}\n                    onChange={value => {\n                        console.log(\"Selected icon:\", value);\n                        setValue(value);\n                    }}\n                />\n            </Dialog>\n        );\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const PreventOutsideDismiss: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: 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 Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n                <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        showCloseButton: true,\n        dismissible: true,\n        bodyPadding: true,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                This is the dialog content area. You can place any content here including forms,\n                text, images, or other components.\n            </>\n        ),\n        actions: (\n            <>\n                <Dialog.CancelButton />\n                <Dialog.ConfirmButton />\n            </>\n        )\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        size: {\n            description: \"Controls the size of the dialog\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        dismissible: {\n            description:\n                \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        bodyPadding: {\n            description: \"Add padding to the Dialog body.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\",\n            control: \"none\"\n        },\n        children: {\n            description:\n                \"Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\",\n            control: \"none\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","library","fas","Dialog","Button","DropdownMenu","ReactComponent","NotificationIcon","Tabs","IconPicker","add","meta","title","component","argTypes","Default","args","size","trigger","createElement","variant","text","description","info","Fragment","href","children","onOpenChange","opened","console","log","actions","CancelAction","ConfirmAction","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","render","props","open","setOpen","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","value","setValue","icons","prefix","name","onChange","WithIcon","icon","Icon","label","PreventOutsideDismiss","dismissible","WithTabs","bodyPadding","separator","spacing","tabs","Tab","key","Documentation","control","options","defaultValue"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Dialog } from \"./Dialog.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\n// @ts-expect-error\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n    title: \"Components/Dialog\",\n    component: Dialog,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n    args: {\n        size: \"md\",\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Dialog 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                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\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 SizeFullScreen: Story = {\n    args: {\n        ...Default.args,\n        size: \"full\"\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                <Dialog\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\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 Dialog\"}\n                        content={\"Open Dialog\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n    args: {\n        ...Default.args,\n        info: null,\n        showCloseButton: false,\n        title: \"Confirm Action\",\n        description: \"Are you sure you want to delete this item?\",\n        children: (\n            <>\n                <p>This action cannot be undone.</p>\n                <p>Deleted items cannot be recovered.</p>\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDialog: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const DropdownIconPickerInDialog: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        return (\n            <Dialog {...args}>\n                <IconPicker\n                    icons={[\n                        { prefix: \"fas\", name: \"trash-restore-alt\" },\n                        { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n                        { prefix: \"fas\", name: \"naira-sign\" },\n                        { prefix: \"fas\", name: \"cart-arrow-down\" },\n                        { prefix: \"fas\", name: \"walkie-talkie\" },\n                        { prefix: \"fas\", name: \"file-edit\" },\n                        { prefix: \"fas\", name: \"file-pen\" },\n                        { prefix: \"fas\", name: \"receipt\" },\n                        { prefix: \"fas\", name: \"pen-square\" },\n                        { prefix: \"fas\", name: \"pencil-square\" },\n                        { prefix: \"fas\", name: \"square-pen\" },\n                        { prefix: \"fas\", name: \"suitcase-rolling\" },\n                        { prefix: \"fas\", name: \"person-circle-exclamation\" },\n                        { prefix: \"fas\", name: \"chevron-down\" },\n                        { prefix: \"fas\", name: \"battery\" },\n                        { prefix: \"fas\", name: \"battery-5\" },\n                        { prefix: \"fas\", name: \"battery-full\" },\n                        { prefix: \"fas\", name: \"skull-crossbones\" },\n                        { prefix: \"fas\", name: \"code-compare\" },\n                        { prefix: \"fas\", name: \"list-dots\" },\n                        { prefix: \"fas\", name: \"list-ul\" },\n                        { prefix: \"fas\", name: \"school-lock\" },\n                        { prefix: \"fas\", name: \"tower-cell\" },\n                        { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n                        { prefix: \"fas\", name: \"down-long\" },\n                        { prefix: \"fas\", name: \"ranking-star\" },\n                        { prefix: \"fas\", name: \"chess-king\" },\n                        { prefix: \"fas\", name: \"person-harassing\" },\n                        { prefix: \"fas\", name: \"brazilian-real-sign\" },\n                        { prefix: \"fas\", name: \"landmark-alt\" }\n                    ]}\n                    value={value}\n                    onChange={value => {\n                        console.log(\"Selected icon:\", value);\n                        setValue(value);\n                    }}\n                />\n            </Dialog>\n        );\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const PreventOutsideDismiss: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        children: (\n            <>\n                <Tabs\n                    separator={true}\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 Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n                <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        showCloseButton: true,\n        dismissible: true,\n        bodyPadding: true,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                This is the dialog content area. You can place any content here including forms,\n                text, images, or other components.\n            </>\n        ),\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\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        size: {\n            description: \"Controls the size of the dialog\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        dismissible: {\n            description:\n                \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        bodyPadding: {\n            description: \"Add padding to the Dialog body.\",\n            control: \"boolean\",\n            defaultValue: true\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 dialog, 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"],"mappings":"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","ignoreList":[]}

package/Dialog/components/CancelAction.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ButtonProps } from "../../Button/index.js";
+export declare const CancelAction: ((props: ButtonProps) => React.JSX.Element) & {
+    original: (props: ButtonProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: ButtonProps) => React.JSX.Element) & {
+        original: (props: ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
+        original: (props: ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

package/Dialog/components/CancelAction.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { makeDecoratable } from "../../utils.js";
+import { DialogClose } from "./DialogClose.js";
+import { Button } from "../../Button/index.js";
+const CancelActionBase = props => /*#__PURE__*/React.createElement(DialogClose, {
+  asChild: true
+}, /*#__PURE__*/React.createElement(Button, Object.assign({
+  text: "Cancel"
+}, props, {
+  variant: "secondary"
+})));
+export const CancelAction = makeDecoratable("CancelAction", CancelActionBase);
+
+//# sourceMappingURL=CancelAction.js.map

package/Dialog/components/CancelAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","DialogClose","Button","CancelActionBase","props","createElement","asChild","Object","assign","text","variant","CancelAction"],"sources":["CancelAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { DialogClose } from \"./DialogClose.js\";\nimport type { ButtonProps } from \"~/Button/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst CancelActionBase = (props: ButtonProps) => (\n    <DialogClose asChild>\n        <Button text={\"Cancel\"} {...props} variant=\"secondary\" />\n    </DialogClose>\n);\n\nexport const CancelAction = makeDecoratable(\"CancelAction\", CancelActionBase);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AACxB,SAASC,WAAW;AAEpB,SAASC,MAAM;AAEf,MAAMC,gBAAgB,GAAIC,KAAkB,iBACxCL,KAAA,CAAAM,aAAA,CAACJ,WAAW;EAACK,OAAO;AAAA,gBAChBP,KAAA,CAAAM,aAAA,CAACH,MAAM,EAAAK,MAAA,CAAAC,MAAA;EAACC,IAAI,EAAE;AAAS,GAAKL,KAAK;EAAEM,OAAO,EAAC;AAAW,EAAE,CAC/C,CAChB;AAED,OAAO,MAAMC,YAAY,GAAGX,eAAe,CAAC,cAAc,EAAEG,gBAAgB,CAAC","ignoreList":[]}

package/Dialog/components/CloseDialogIconButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type CloseDialogIconButtonProps = {
+    size: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+};
+export declare const CloseDialogIconButton: ({ size }: CloseDialogIconButtonProps) => React.JSX.Element;
+export {};

package/Dialog/components/CloseDialogIconButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { IconButton } from "../../Button/index.js";
+import { DialogClose } from "./DialogClose.js";
+export const CloseDialogIconButton = ({
+  size
+}) => {
+  const buttonSize = React.useMemo(() => {
+    return size && ["lg", "xl", "full"].includes(size) ? "md" : "sm";
+  }, [size]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-md right-md"
+  }, /*#__PURE__*/React.createElement(DialogClose, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: buttonSize,
+    iconSize: "lg",
+    variant: "ghost",
+    icon: /*#__PURE__*/React.createElement(XIcon, null)
+  })));
+};
+
+//# sourceMappingURL=CloseDialogIconButton.js.map

package/Dialog/components/CloseDialogIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","XIcon","IconButton","DialogClose","CloseDialogIconButton","size","buttonSize","useMemo","includes","createElement","className","asChild","iconSize","variant","icon"],"sources":["CloseDialogIconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { DialogClose } from \"./DialogClose.js\";\n\ntype CloseDialogIconButtonProps = {\n    size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | null | undefined;\n};\n\nexport const CloseDialogIconButton = ({ size }: CloseDialogIconButtonProps) => {\n    const buttonSize = React.useMemo(() => {\n        return size && [\"lg\", \"xl\", \"full\"].includes(size) ? \"md\" : \"sm\";\n    }, [size]);\n\n    return (\n        <div className={\"absolute top-md right-md\"}>\n            <DialogClose asChild>\n                <IconButton size={buttonSize} iconSize=\"lg\" variant={\"ghost\"} icon={<XIcon />} />\n            </DialogClose>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASC,UAAU;AACnB,SAASC,WAAW;AAMpB,OAAO,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAAiC,CAAC,KAAK;EAC3E,MAAMC,UAAU,GAAGP,KAAK,CAACQ,OAAO,CAAC,MAAM;IACnC,OAAOF,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAACG,QAAQ,CAACH,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI;EACpE,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACIN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAA2B,gBACvCX,KAAA,CAAAU,aAAA,CAACN,WAAW;IAACQ,OAAO;EAAA,gBAChBZ,KAAA,CAAAU,aAAA,CAACP,UAAU;IAACG,IAAI,EAAEC,UAAW;IAACM,QAAQ,EAAC,IAAI;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,eAAEf,KAAA,CAAAU,aAAA,CAACR,KAAK,MAAE;EAAE,CAAE,CACvE,CACZ,CAAC;AAEd,CAAC","ignoreList":[]}

package/Dialog/components/ConfirmAction.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ButtonProps } from "../../Button/index.js";
+export declare const ConfirmAction: ((props: ButtonProps) => React.JSX.Element) & {
+    original: (props: ButtonProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: ButtonProps) => React.JSX.Element) & {
+        original: (props: ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
+        original: (props: ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};