@rovula/ui 0.1.36 → 0.1.38

package/dist/esm/types/patterns/confirm-dialog/ConfirmDialog.d.ts

@@ -24,6 +24,11 @@ export type ConfirmDialogProps = {
     /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
     isLoading?: boolean;
     testId?: string;
+    contentClassName?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    footerClassName?: string;
     cancelClassName?: string;
     confirmClassName?: string;
 };

package/dist/esm/types/patterns/confirm-dialog/ConfirmDialog.stories.d.ts

@@ -24,6 +24,11 @@ declare const meta: {
         hideCancelButton?: boolean | undefined;
         isLoading?: boolean | undefined;
         testId?: string | undefined;
+        contentClassName?: string | undefined;
+        headerClassName?: string | undefined;
+        titleClassName?: string | undefined;
+        descriptionClassName?: string | undefined;
+        footerClassName?: string | undefined;
         cancelClassName?: string | undefined;
         confirmClassName?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/index.d.ts

@@ -1699,6 +1699,11 @@ type ConfirmDialogProps = {
     /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
     isLoading?: boolean;
     testId?: string;
+    contentClassName?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    footerClassName?: string;
     cancelClassName?: string;
     confirmClassName?: string;
 };

package/dist/patterns/confirm-dialog/ConfirmDialog.js

@@ -6,7 +6,7 @@ import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, A
 import { useControlledForm, Field } from "@/components/Form";
 import { TextInput } from "@/components/TextInput/TextInput";
 import Loading from "@/components/Loading/Loading";
-export const ConfirmDialog = ({ open, onOpenChange, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, isLoading = false, testId, cancelClassName, confirmClassName, }) => {
+export const ConfirmDialog = ({ open, onOpenChange, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, isLoading = false, testId, contentClassName, headerClassName, titleClassName, descriptionClassName, footerClassName, cancelClassName, confirmClassName, }) => {
     const requiresInput = !!typeToConfirm;
     const validationSchema = React.useMemo(() => yup.object({
         confirmInput: yup
@@ -41,14 +41,14 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, children
     const handleSubmit = () => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
     };
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { "data-testid": testId, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children, requiresInput && (_jsxs(FormRoot, { className: "flex flex-col gap-4 w-full", onSubmit: handleSubmit, children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { className: contentClassName, "data-testid": testId, children: [_jsxs(AlertDialogHeader, { className: headerClassName, children: [_jsx(AlertDialogTitle, { className: titleClassName, "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { className: descriptionClassName, "data-testid": testId && `${testId}-description`, children: description }))] }), children, requiresInput && (_jsxs(FormRoot, { className: "flex flex-col gap-4 w-full", onSubmit: handleSubmit, children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
                                     label: "Type to confirm",
                                     required: true,
                                     hasClearIcon: true,
                                     keepFooterSpace: true,
                                     fullwidth: true,
                                     testId: testId && `${testId}-type-to-confirm-input`,
-                                }, disabled: isLoading })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { className: cancelClassName, "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, disabled: isLoading, children: cancelLabel })), _jsxs(AlertDialogAction, { type: "button", disabled: isLoading || (requiresInput && !isFormValid), onClick: (e) => {
+                                }, disabled: isLoading })] })), _jsxs(AlertDialogFooter, { className: footerClassName, children: [!hideCancelButton && (_jsx(AlertDialogCancel, { className: cancelClassName, "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, disabled: isLoading, children: cancelLabel })), _jsxs(AlertDialogAction, { type: "button", disabled: isLoading || (requiresInput && !isFormValid), onClick: (e) => {
                                     e.preventDefault();
                                     if (requiresInput) {
                                         methods.handleSubmit(handleSubmit)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "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 && (

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -42,6 +42,11 @@ export type ConfirmDialogProps = {
   /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
   isLoading?: boolean;
   testId?: string;
+  contentClassName?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  footerClassName?: string;
   cancelClassName?: string;
   confirmClassName?: string;
 };
@@ -64,6 +69,11 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   hideCancelButton = false,
   isLoading = false,
   testId,
+  contentClassName,
+  headerClassName,
+  titleClassName,
+  descriptionClassName,
+  footerClassName,
   cancelClassName,
   confirmClassName,
 }) => {
@@ -119,13 +129,17 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
       {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}
-      <AlertDialogContent data-testid={testId}>
-        <AlertDialogHeader>
-          <AlertDialogTitle data-testid={testId && `${testId}-title`}>
+      <AlertDialogContent className={contentClassName} data-testid={testId}>
+        <AlertDialogHeader className={headerClassName}>
+          <AlertDialogTitle
+            className={titleClassName}
+            data-testid={testId && `${testId}-title`}
+          >
             {title}
           </AlertDialogTitle>
           {description && (
             <AlertDialogDescription
+              className={descriptionClassName}
               data-testid={testId && `${testId}-description`}
             >
               {description}
@@ -159,7 +173,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
           </FormRoot>
         )}
 
-        <AlertDialogFooter>
+        <AlertDialogFooter className={footerClassName}>
           {!hideCancelButton && (
             <AlertDialogCancel
               className={cancelClassName}