@rovula/ui 0.1.25 → 0.1.27

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

@@ -21,6 +21,8 @@ export type ConfirmDialogProps = {
      * When true, hides the cancel button — useful for info/error alerts that only need one action.
      */
     hideCancelButton?: boolean;
+    /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
+    isLoading?: boolean;
     testId?: string;
     cancelClassName?: string;
     confirmClassName?: string;

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

@@ -22,6 +22,7 @@ declare const meta: {
         trigger?: React.ReactNode;
         typeToConfirm?: string | undefined;
         hideCancelButton?: boolean | undefined;
+        isLoading?: boolean | undefined;
         testId?: string | undefined;
         cancelClassName?: string | undefined;
         confirmClassName?: string | undefined;
@@ -55,3 +56,5 @@ export declare const WithoutCancelButton: Story;
 export declare const RequireConfirmText: Story;
 export declare const FigmaDefaultOpen: Story;
 export declare const FigmaRequirePasswordDefaultOpen: Story;
+export declare const WithLoading: Story;
+export declare const WithLoadingAndTypeToConfirm: Story;

package/dist/index.d.ts

@@ -1318,6 +1318,8 @@ type ConfirmDialogProps = {
      * When true, hides the cancel button — useful for info/error alerts that only need one action.
      */
     hideCancelButton?: boolean;
+    /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
+    isLoading?: boolean;
     testId?: string;
     cancelClassName?: string;
     confirmClassName?: string;

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

@@ -5,8 +5,8 @@ import * as yup from "yup";
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, AlertDialogTrigger, } from "@/components/AlertDialog/AlertDialog";
 import { useControlledForm, Field } from "@/components/Form";
 import { TextInput } from "@/components/TextInput/TextInput";
-export const ConfirmDialog = ({ open, onOpenChange, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, testId, cancelClassName, confirmClassName, }) => {
-    const formId = React.useId();
+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, }) => {
     const requiresInput = !!typeToConfirm;
     const validationSchema = React.useMemo(() => yup.object({
         confirmInput: yup
@@ -21,25 +21,41 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, children
         reValidateMode: "onChange",
     });
     const isFormValid = methods.formState.isValid;
+    React.useEffect(() => {
+        if (!open) {
+            methods.reset();
+        }
+    }, [open]);
     const handleOpenChange = (nextOpen) => {
+        if (isLoading)
+            return;
         if (!nextOpen) {
-            methods.reset();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
     };
     const handleCancel = () => {
-        methods.reset();
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    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, { id: formId, className: "flex flex-col gap-4 w-full", onSubmit: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
+    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: {
                                     label: "Type to confirm",
                                     required: true,
                                     hasClearIcon: true,
                                     keepFooterSpace: true,
                                     fullwidth: true,
                                     testId: testId && `${testId}-type-to-confirm-input`,
-                                } })] })), _jsxs(AlertDialogFooter, { children: [!hideCancelButton && (_jsx(AlertDialogCancel, { className: cancelClassName, "data-testid": testId && `${testId}-cancel-button`, onClick: handleCancel, children: cancelLabel })), _jsx(AlertDialogAction, { type: "submit", form: requiresInput ? formId : undefined, disabled: requiresInput && !isFormValid, onClick: requiresInput ? undefined : () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), className: confirmClassName, "data-testid": testId && `${testId}-confirm-button`, children: confirmLabel })] })] })] }));
+                                }, 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) => {
+                                    e.preventDefault();
+                                    if (requiresInput) {
+                                        methods.handleSubmit(handleSubmit)();
+                                    }
+                                    else {
+                                        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                                    }
+                                }, className: confirmClassName, "data-testid": testId && `${testId}-confirm-button`, children: [isLoading && _jsx(Loading, {}), confirmLabel] })] })] })] }));
 };
 ConfirmDialog.displayName = "ConfirmDialog";

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

@@ -101,3 +101,36 @@ export const FigmaRequirePasswordDefaultOpen = {
         return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => updateArgs({ open: false }), onCancel: () => updateArgs({ open: false }) })));
     },
 };
+export const WithLoading = {
+    args: {
+        open: false,
+        title: "Delete project?",
+        description: "This action cannot be undone.",
+        confirmLabel: "Delete",
+        cancelLabel: "Cancel",
+    },
+    render: (args) => {
+        const [{ open, isLoading }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, isLoading: isLoading, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => {
+                updateArgs({ isLoading: true });
+                setTimeout(() => updateArgs({ isLoading: false, open: false }), 2000);
+            }, onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, color: "error", onClick: () => updateArgs({ open: true, isLoading: false }), children: "Delete" }) })));
+    },
+};
+export const WithLoadingAndTypeToConfirm = {
+    args: {
+        open: false,
+        title: "Delete project?",
+        description: "This action cannot be undone.",
+        confirmLabel: "Delete",
+        cancelLabel: "Cancel",
+        typeToConfirm: "delete",
+    },
+    render: (args) => {
+        const [{ open, isLoading }, updateArgs] = useArgs();
+        return (_jsx(ConfirmDialog, Object.assign({}, args, { open: open, isLoading: isLoading, onOpenChange: (next) => updateArgs({ open: next }), onConfirm: () => {
+                updateArgs({ isLoading: true });
+                setTimeout(() => updateArgs({ isLoading: false, open: false }), 5000);
+            }, onCancel: () => updateArgs({ open: false }), trigger: _jsx(Button, { fullwidth: false, color: "error", onClick: () => updateArgs({ open: true, isLoading: false }), children: "Delete (type to confirm)" }) })));
+    },
+};

package/package.json

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

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

@@ -191,3 +191,74 @@ export const FigmaRequirePasswordDefaultOpen: Story = {
     );
   },
 };
+
+export const WithLoading: Story = {
+  args: {
+    open: false,
+    title: "Delete project?",
+    description: "This action cannot be undone.",
+    confirmLabel: "Delete",
+    cancelLabel: "Cancel",
+  },
+  render: (args) => {
+    const [{ open, isLoading }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        isLoading={isLoading}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => {
+          updateArgs({ isLoading: true });
+          setTimeout(() => updateArgs({ isLoading: false, open: false }), 2000);
+        }}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button
+            fullwidth={false}
+            color="error"
+            onClick={() => updateArgs({ open: true, isLoading: false })}
+          >
+            Delete
+          </Button>
+        }
+      />
+    );
+  },
+};
+
+export const WithLoadingAndTypeToConfirm: Story = {
+  args: {
+    open: false,
+    title: "Delete project?",
+    description: "This action cannot be undone.",
+    confirmLabel: "Delete",
+    cancelLabel: "Cancel",
+    typeToConfirm: "delete",
+  },
+  render: (args) => {
+    const [{ open, isLoading }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        isLoading={isLoading}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => {
+          updateArgs({ isLoading: true });
+          setTimeout(() => updateArgs({ isLoading: false, open: false }), 5000);
+        }}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button
+            fullwidth={false}
+            color="error"
+            onClick={() => updateArgs({ open: true, isLoading: false })}
+          >
+            Delete (type to confirm)
+          </Button>
+        }
+      />
+    );
+  },
+};

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

@@ -15,6 +15,7 @@ import {
 } from "@/components/AlertDialog/AlertDialog";
 import { useControlledForm, Field } from "@/components/Form";
 import { TextInput } from "@/components/TextInput/TextInput";
+import Loading from "@/components/Loading/Loading";
 
 export type ConfirmDialogProps = {
   open?: boolean;
@@ -38,6 +39,8 @@ export type ConfirmDialogProps = {
    * When true, hides the cancel button — useful for info/error alerts that only need one action.
    */
   hideCancelButton?: boolean;
+  /** When true, shows a loading spinner on the confirm button and disables all interactive controls. */
+  isLoading?: boolean;
   testId?: string;
   cancelClassName?: string;
   confirmClassName?: string;
@@ -59,11 +62,11 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   trigger,
   typeToConfirm,
   hideCancelButton = false,
+  isLoading = false,
   testId,
   cancelClassName,
   confirmClassName,
 }) => {
-  const formId = React.useId();
   const requiresInput = !!typeToConfirm;
 
   const validationSchema = React.useMemo(
@@ -90,20 +93,29 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 
   const isFormValid = methods.formState.isValid;
 
+  React.useEffect(() => {
+    if (!open) {
+      methods.reset();
+    }
+  }, [open]);
+
   const handleOpenChange = (nextOpen: boolean) => {
+    if (isLoading) return;
     if (!nextOpen) {
-      methods.reset();
       onClose?.();
     }
     onOpenChange?.(nextOpen);
   };
 
   const handleCancel = () => {
-    methods.reset();
     onCancel?.();
     onClose?.();
   };
 
+  const handleSubmit = () => {
+    onConfirm?.();
+  };
+
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
       {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}
@@ -113,7 +125,9 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
             {title}
           </AlertDialogTitle>
           {description && (
-            <AlertDialogDescription data-testid={testId && `${testId}-description`}>
+            <AlertDialogDescription
+              data-testid={testId && `${testId}-description`}
+            >
               {description}
             </AlertDialogDescription>
           )}
@@ -123,9 +137,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 
         {requiresInput && (
           <FormRoot
-            id={formId}
             className="flex flex-col gap-4 w-full"
-            onSubmit={() => onConfirm?.()}
+            onSubmit={handleSubmit}
           >
             <p className="typography-small1 text-text-contrast-max">
               Type &ldquo;{typeToConfirm}&rdquo; to proceed.
@@ -141,6 +154,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                 fullwidth: true,
                 testId: testId && `${testId}-type-to-confirm-input`,
               }}
+              disabled={isLoading}
             />
           </FormRoot>
         )}
@@ -151,18 +165,27 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
               className={cancelClassName}
               data-testid={testId && `${testId}-cancel-button`}
               onClick={handleCancel}
+              disabled={isLoading}
             >
               {cancelLabel}
             </AlertDialogCancel>
           )}
           <AlertDialogAction
-            type="submit"
-            form={requiresInput ? formId : undefined}
-            disabled={requiresInput && !isFormValid}
-            onClick={requiresInput ? undefined : () => onConfirm?.()}
+            type="button"
+            disabled={isLoading || (requiresInput && !isFormValid)}
+            onClick={(e) => {
+              e.preventDefault();
+
+              if (requiresInput) {
+                methods.handleSubmit(handleSubmit)();
+              } else {
+                onConfirm?.();
+              }
+            }}
             className={confirmClassName}
             data-testid={testId && `${testId}-confirm-button`}
           >
+            {isLoading && <Loading />}
             {confirmLabel}
           </AlertDialogAction>
         </AlertDialogFooter>