@rovula/ui 0.1.36 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import * as yup from "yup";
 import {
@@ -16,6 +16,7 @@ import { Label } from "../Label/Label";
 import { Input } from "../Input/Input";
 import { Field, Form, ValidationHintList, ValidationHintRule } from "../Form";
 import PasswordInput from "../PasswordInput";
+import { Menu } from "@/patterns/menu/Menu";
 
 const meta = {
   title: "Components/Dialog",
@@ -219,36 +220,75 @@ export const FigmaFunctionForm = {
 } satisfies StoryObj;
 
 export const FigmaFunctionFormWithAction = {
-  render: () => (
-    <div className="flex w-full">
-      <Dialog defaultOpen>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Title</DialogTitle>
-            <DialogDescription>Subtitle description</DialogDescription>
-          </DialogHeader>
-          <DialogBody>
-            <div className="flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm">
-              <p className="typography-body3 text-text-contrast-max">
-                Content - Form Area
-              </p>
-            </div>
-          </DialogBody>
-          <DialogFooter className="justify-between">
-            <Button variant="outline" color="secondary" fullwidth={false}>
-              Medium
-            </Button>
-            <div className="flex items-center gap-4">
-              <Button variant="outline" color="primary" fullwidth={false}>
-                Cancel
-              </Button>
-              <Button disabled fullwidth={false}>
-                Confirm
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = (open: boolean) => {
+      setOpen(open);
+    };
+    const handleCancel = () => {
+      setOpen(false);
+    };
+    const handleConfirm = () => {
+      setOpen(false);
+    };
+
+    return (
+      <div className="flex w-full">
+        <Menu
+          items={[
+            {
+              type: "item",
+              item: {
+                value: "edit",
+                label: "Edit",
+                onClick: () => handleOpenChange(true),
+              },
+            },
+            {
+              type: "item",
+              item: {
+                value: "delete",
+                label: "Delete",
+                onClick: () => handleOpenChange(true),
+              },
+            },
+          ]}
+          trigger={<Button variant="outline">Open</Button>}
+        />
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Title</DialogTitle>
+              <DialogDescription>Subtitle description</DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm">
+                <p className="typography-body3 text-text-contrast-max">
+                  Content - Form Area
+                </p>
+              </div>
+            </DialogBody>
+            <DialogFooter className="justify-between">
+              <Button variant="outline" color="secondary" fullwidth={false}>
+                Medium
               </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  ),
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="outline"
+                  color="primary"
+                  fullwidth={false}
+                  onClick={handleCancel}
+                >
+                  Cancel
+                </Button>
+                <Button disabled fullwidth={false} onClick={handleConfirm}>
+                  Confirm
+                </Button>
+              </div>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
 } satisfies StoryObj;

package/src/components/Dialog/Dialog.tsx

@@ -55,6 +55,12 @@ const DialogContent = React.forwardRef<
           className,
         )}
         {...props}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          document.body.style.pointerEvents = "auto";
+
+          props?.onCloseAutoFocus?.(event);
+        }}
       >
         {children}
         {showCloseButton && (