@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/Dialog/Dialog.js

@@ -1,17 +1,19 @@
 import * as React from "react";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { DialogContent } from "./components/DialogContent";
-import { DialogHeader } from "./components/DialogHeader";
-import { DialogBody } from "./components/DialogBody";
-import { DialogFooter } from "./components/DialogFooter";
-import { DialogOverlay } from "./components/DialogOverlay";
-import { DialogPortal } from "./components/DialogPortal";
-import { DialogRoot } from "./components/DialogRoot";
-import { DialogTrigger } from "./components/DialogTrigger";
-import { Icon } from "./components/Icon";
-import { ConfirmButton } from "./components/ConfirmButton";
-import { CancelButton } from "./components/CancelButton";
-import { DialogClose } from "./components/DialogClose";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { OverlayLoader } from "../Loader/index.js";
+import { DialogContent } from "./components/DialogContent.js";
+import { DialogHeader } from "./components/DialogHeader.js";
+import { DialogBody } from "./components/DialogBody.js";
+import { DialogFooter } from "./components/DialogFooter.js";
+import { DialogOverlay } from "./components/DialogOverlay.js";
+import { DialogPortal } from "./components/DialogPortal.js";
+import { DialogRoot } from "./components/DialogRoot.js";
+import { DialogTrigger } from "./components/DialogTrigger.js";
+import { Icon } from "./components/Icon.js";
+import { ConfirmAction } from "./components/ConfirmAction.js";
+import { CancelAction } from "./components/CancelAction.js";
+import { CloseDialogIconButton } from "./components/CloseDialogIconButton.js";
+import { DialogClose } from "./components/DialogClose.js";
 const DialogBase = props => {
   const {
     rootProps,
@@ -42,9 +44,13 @@ const DialogBase = props => {
       // Body props.
       children,
       bodyPadding,
+      scrollable,
       // Footer props.
       actions,
       info,
+      // Overlay props.
+      loading,
+      overlay,
       // Close button props.
       showCloseButton = true,
       // Content props.
@@ -61,13 +67,26 @@ const DialogBase = props => {
         onOpen();
       }
     };
+    const resolvedOverlay = (() => {
+      if (overlay) {
+        return overlay;
+      }
+      if (!loading) {
+        return undefined;
+      }
+      const text = typeof loading === "object" ? loading.text : undefined;
+      return /*#__PURE__*/React.createElement(OverlayLoader, {
+        text: text
+      });
+    })();
     return {
       rootProps: {
         defaultOpen,
         open,
         onOpenChange,
         modal,
-        dir
+        dir,
+        size
       },
       triggerProps: {
         // Temporary fix. We need this because `ref` doesn't get passed to components
@@ -83,6 +102,7 @@ const DialogBase = props => {
       bodyProps: {
         children,
         bodyPadding,
+        scrollable,
         size
       },
       footerProps: {
@@ -96,22 +116,31 @@ const DialogBase = props => {
       },
       contentProps: {
         ...rest,
-        size
+        size,
+        overlay: resolvedOverlay
       }
     };
   }, [props]);
   return /*#__PURE__*/React.createElement(DialogRoot, rootProps, triggerProps.children && /*#__PURE__*/React.createElement(DialogTrigger, Object.assign({}, triggerProps, {
     asChild: true
-  })), /*#__PURE__*/React.createElement(DialogPortal, null, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogContent, contentProps, /*#__PURE__*/React.createElement(DialogHeader, headerProps), /*#__PURE__*/React.createElement(DialogBody, bodyProps), /*#__PURE__*/React.createElement(DialogFooter, footerProps), closeButtonProps.show && /*#__PURE__*/React.createElement(DialogClose, {
-    size: closeButtonProps.size
-  }))));
+  })), /*#__PURE__*/React.createElement(DialogPortal, null, /*#__PURE__*/React.createElement("div", {
+    "data-role": "dialog",
+    className: "z-overlay absolute"
+  }, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogContent, Object.assign({}, contentProps, {
+    header: /*#__PURE__*/React.createElement(DialogHeader, headerProps),
+    footer: /*#__PURE__*/React.createElement(DialogFooter, footerProps),
+    closeButton: closeButtonProps.show ? /*#__PURE__*/React.createElement(CloseDialogIconButton, {
+      size: closeButtonProps.size
+    }) : undefined
+  }), /*#__PURE__*/React.createElement(DialogBody, bodyProps)))));
 };
 DialogBase.displayName = "Dialog";
 const DecoratableDialog = makeDecoratable("Dialog", DialogBase);
 const Dialog = withStaticProps(DecoratableDialog, {
-  ConfirmButton,
-  CancelButton,
-  Icon
+  ConfirmAction,
+  CancelAction,
+  Icon,
+  Close: DialogClose
 });
 export { Dialog };
 

package/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","DialogContent","DialogHeader","DialogBody","DialogFooter","DialogOverlay","DialogPortal","DialogRoot","DialogTrigger","Icon","ConfirmButton","CancelButton","DialogClose","DialogBase","props","rootProps","triggerProps","contentProps","headerProps","bodyProps","footerProps","closeButtonProps","useMemo","defaultOpen","open","onOpenChange","originalOnOpenChange","onClose","onOpen","modal","dir","size","trigger","title","icon","description","children","bodyPadding","actions","info","showCloseButton","rest","createElement","show","Object","assign","asChild","displayName","DecoratableDialog","Dialog"],"sources":["Dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { DialogContent } from \"./components/DialogContent\";\nimport { DialogHeader } from \"~/Dialog/components/DialogHeader\";\nimport { DialogBody } from \"~/Dialog/components/DialogBody\";\nimport { DialogFooter } from \"~/Dialog/components/DialogFooter\";\nimport { DialogOverlay } from \"~/Dialog/components/DialogOverlay\";\nimport { DialogPortal } from \"./components/DialogPortal\";\nimport { DialogRoot } from \"./components/DialogRoot\";\nimport { DialogTrigger } from \"./components/DialogTrigger\";\nimport { Icon } from \"./components/Icon\";\nimport { ConfirmButton } from \"./components/ConfirmButton\";\nimport { CancelButton } from \"./components/CancelButton\";\nimport { DialogClose } from \"~/Dialog/components/DialogClose\";\n\ninterface DialogProps\n    extends React.ComponentPropsWithoutRef<typeof DialogRoot>,\n        Omit<React.ComponentPropsWithoutRef<typeof DialogContent>, \"title\"> {\n    trigger?: React.ReactNode;\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    showCloseButton?: boolean;\n    dismissible?: boolean;\n    bodyPadding?: boolean;\n    description?: React.ReactNode;\n    children: React.ReactNode;\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    onClose?: () => void;\n    onOpen?: () => void;\n}\n\nconst DialogBase = (props: DialogProps) => {\n    const {\n        rootProps,\n        triggerProps,\n        contentProps,\n        headerProps,\n        bodyProps,\n        footerProps,\n        closeButtonProps\n    } = React.useMemo(() => {\n        const {\n            // Root props.\n            defaultOpen,\n            open,\n            onOpenChange: originalOnOpenChange,\n            onClose,\n            onOpen,\n            modal,\n            dir,\n\n            // Shared props.\n            size,\n\n            // Trigger props.\n            trigger,\n\n            // Header props.\n            title,\n            icon,\n            description,\n\n            // Body props.\n            children,\n            bodyPadding,\n\n            // Footer props.\n            actions,\n            info,\n\n            // Close button props.\n            showCloseButton = true,\n\n            // Content props.\n            ...rest\n        } = props;\n\n        // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed\n        const onOpenChange = (open: boolean) => {\n            originalOnOpenChange && originalOnOpenChange(open);\n\n            if (onClose && !open) {\n                onClose();\n            }\n\n            if (onOpen && open) {\n                onOpen();\n            }\n        };\n\n        return {\n            rootProps: {\n                defaultOpen,\n                open,\n                onOpenChange,\n                modal,\n                dir\n            },\n            triggerProps: {\n                // Temporary fix. We need this because `ref` doesn't get passed to components\n                // that are decorated with `makeDecoratable`. This will be fixed in the future.\n                children: <div>{trigger}</div>\n            },\n            headerProps: { title, icon, description, size },\n            bodyProps: { children, bodyPadding, size },\n            footerProps: { info, actions, size },\n            closeButtonProps: { show: showCloseButton, size },\n            contentProps: { ...rest, size }\n        };\n    }, [props]);\n\n    return (\n        <DialogRoot {...rootProps}>\n            {triggerProps.children && <DialogTrigger {...triggerProps} asChild />}\n            <DialogPortal>\n                <DialogOverlay />\n                <DialogContent {...contentProps}>\n                    <DialogHeader {...headerProps} />\n                    <DialogBody {...bodyProps} />\n                    <DialogFooter {...footerProps} />\n                    {closeButtonProps.show && <DialogClose size={closeButtonProps.size} />}\n                </DialogContent>\n            </DialogPortal>\n        </DialogRoot>\n    );\n};\n\nDialogBase.displayName = \"Dialog\";\n\nconst DecoratableDialog = makeDecoratable(\"Dialog\", DialogBase);\n\nconst Dialog = withStaticProps(DecoratableDialog, {\n    ConfirmButton,\n    CancelButton,\n    Icon\n});\n\nexport { Dialog, type DialogProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","OverlayLoader","DialogContent","DialogHeader","DialogBody","DialogFooter","DialogOverlay","DialogPortal","DialogRoot","DialogTrigger","Icon","ConfirmAction","CancelAction","CloseDialogIconButton","DialogClose","DialogBase","props","rootProps","triggerProps","contentProps","headerProps","bodyProps","footerProps","closeButtonProps","useMemo","defaultOpen","open","onOpenChange","originalOnOpenChange","onClose","onOpen","modal","dir","size","trigger","title","icon","description","children","bodyPadding","scrollable","actions","info","loading","overlay","showCloseButton","rest","resolvedOverlay","undefined","text","createElement","show","Object","assign","asChild","className","header","footer","closeButton","displayName","DecoratableDialog","Dialog","Close"],"sources":["Dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { OverlayLoader } from \"~/Loader/index.js\";\nimport { DialogContent } from \"./components/DialogContent.js\";\nimport { DialogHeader } from \"~/Dialog/components/DialogHeader.js\";\nimport { DialogBody } from \"~/Dialog/components/DialogBody.js\";\nimport { DialogFooter } from \"~/Dialog/components/DialogFooter.js\";\nimport { DialogOverlay } from \"~/Dialog/components/DialogOverlay.js\";\nimport { DialogPortal } from \"./components/DialogPortal.js\";\nimport { DialogRoot } from \"./components/DialogRoot.js\";\nimport { DialogTrigger } from \"./components/DialogTrigger.js\";\nimport { Icon } from \"./components/Icon.js\";\nimport { ConfirmAction } from \"./components/ConfirmAction.js\";\nimport { CancelAction } from \"./components/CancelAction.js\";\nimport { CloseDialogIconButton } from \"~/Dialog/components/CloseDialogIconButton.js\";\nimport { DialogClose } from \"~/Dialog/components/DialogClose.js\";\n\ninterface DialogProps\n    extends\n        React.ComponentPropsWithoutRef<typeof DialogRoot>,\n        Omit<React.ComponentPropsWithoutRef<typeof DialogContent>, \"title\"> {\n    trigger?: React.ReactNode;\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    showCloseButton?: boolean;\n    dismissible?: boolean;\n    bodyPadding?: boolean;\n    scrollable?: boolean;\n    description?: React.ReactNode;\n    children: React.ReactNode;\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    loading?: boolean | { text?: string };\n    overlay?: React.ReactNode;\n    onClose?: () => void;\n    onOpen?: () => void;\n}\n\nconst DialogBase = (props: DialogProps) => {\n    const {\n        rootProps,\n        triggerProps,\n        contentProps,\n        headerProps,\n        bodyProps,\n        footerProps,\n        closeButtonProps\n    } = React.useMemo(() => {\n        const {\n            // Root props.\n            defaultOpen,\n            open,\n            onOpenChange: originalOnOpenChange,\n            onClose,\n            onOpen,\n            modal,\n            dir,\n\n            // Shared props.\n            size,\n\n            // Trigger props.\n            trigger,\n\n            // Header props.\n            title,\n            icon,\n            description,\n\n            // Body props.\n            children,\n            bodyPadding,\n            scrollable,\n\n            // Footer props.\n            actions,\n            info,\n\n            // Overlay props.\n            loading,\n            overlay,\n\n            // Close button props.\n            showCloseButton = true,\n\n            // Content props.\n            ...rest\n        } = props;\n\n        // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed\n        const onOpenChange = (open: boolean) => {\n            originalOnOpenChange && originalOnOpenChange(open);\n\n            if (onClose && !open) {\n                onClose();\n            }\n\n            if (onOpen && open) {\n                onOpen();\n            }\n        };\n\n        const resolvedOverlay = (() => {\n            if (overlay) {\n                return overlay;\n            }\n            if (!loading) {\n                return undefined;\n            }\n            const text = typeof loading === \"object\" ? loading.text : undefined;\n            return <OverlayLoader text={text} />;\n        })();\n\n        return {\n            rootProps: {\n                defaultOpen,\n                open,\n                onOpenChange,\n                modal,\n                dir,\n                size\n            },\n            triggerProps: {\n                // Temporary fix. We need this because `ref` doesn't get passed to components\n                // that are decorated with `makeDecoratable`. This will be fixed in the future.\n                children: <div>{trigger}</div>\n            },\n            headerProps: { title, icon, description, size },\n            bodyProps: { children, bodyPadding, scrollable, size },\n            footerProps: { info, actions, size },\n            closeButtonProps: { show: showCloseButton, size },\n            contentProps: { ...rest, size, overlay: resolvedOverlay }\n        };\n    }, [props]);\n\n    return (\n        <DialogRoot {...rootProps}>\n            {triggerProps.children && <DialogTrigger {...triggerProps} asChild />}\n            <DialogPortal>\n                <div data-role=\"dialog\" className={\"z-overlay absolute\"}>\n                    <DialogOverlay />\n                    <DialogContent\n                        {...contentProps}\n                        header={<DialogHeader {...headerProps} />}\n                        footer={<DialogFooter {...footerProps} />}\n                        closeButton={\n                            closeButtonProps.show ? (\n                                <CloseDialogIconButton size={closeButtonProps.size} />\n                            ) : undefined\n                        }\n                    >\n                        <DialogBody {...bodyProps} />\n                    </DialogContent>\n                </div>\n            </DialogPortal>\n        </DialogRoot>\n    );\n};\n\nDialogBase.displayName = \"Dialog\";\n\nconst DecoratableDialog = makeDecoratable(\"Dialog\", DialogBase);\n\nconst Dialog = withStaticProps(DecoratableDialog, {\n    ConfirmAction,\n    CancelAction,\n    Icon,\n    Close: DialogClose\n});\n\nexport { Dialog, type DialogProps };\n"],"mappings":"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","ignoreList":[]}

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,14 +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";
-
-// @ts-expect-error
+import { Tabs } from "../Tabs/index.js";
+import { IconPicker } from "../IconPicker/index.js";
 library.add(fas);
 const meta = {
   title: "Components/Dialog",
@@ -32,7 +30,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 +143,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 +277,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 +325,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 +357,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."
     }
   }
 };