@rovula/ui 0.1.37 → 0.1.39

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,17 @@ 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, onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    document.body.style.pointerEvents = "auto";
+                }, 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.37",
+  "version": "0.1.39",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

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,24 @@ 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}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          document.body.style.pointerEvents = "auto";
+        }}
+      >
+        <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 +180,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
           </FormRoot>
         )}
 
-        <AlertDialogFooter>
+        <AlertDialogFooter className={footerClassName}>
           {!hideCancelButton && (
             <AlertDialogCancel
               className={cancelClassName}