@fpkit/acss 0.5.11 → 0.5.13

package/src/components/dialog/dialog-modal.tsx

@@ -1,61 +1,57 @@
-// Dialog.tsx
-import React from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import Dialog from "./dialog";
 import Button from "#components/buttons/button.jsx";
+import type { DialogModalProps } from "./dialog.types";
 
 /**
- * Additional props for the DialogModal component, extending the props of the Dialog component.
+ * DialogModal - A wrapper component that manages dialog state and provides a trigger button.
  *
- * @property {string} [className] - Optional className for the dialog content wrapper.
- * @property {string} [btnLabel] - Label for the button that opens the dialog.
- * @property {() => void} [btnOnClick] - Callback function to be called when the button is clicked.
- * @property {"sm" | "md" | "lg"} [btnSize] - Size of the button that opens the dialog.
- */
-interface DialogModalProps extends React.ComponentProps<typeof Dialog> {
-  /** Optional className for the dialog content wrapper */
-  className?: string;
-  btnLabel?: string;
-  btnOnClick?: () => void;
-  btnSize?: "sm" | "md" | "lg";
-  btnProps?: React.ComponentProps<typeof Button>;
-}
-
-/**
- * A modal dialog component that provides an accessible overlay with an optional trigger button.
- * Extends the base Dialog component with additional button control functionality.
+ * This is an **uncontrolled** component wrapper around the controlled Dialog component.
+ * It manages the dialog's open/closed state internally and provides a button to trigger it.
+ *
+ * **Use this when:**
+ * - You want a simple dialog with a trigger button
+ * - You don't need to control the dialog state externally
+ * - You want automatic focus restoration to the trigger button
+ *
+ * **Use the base Dialog component instead when:**
+ * - You need to control dialog state from parent component
+ * - You have a custom trigger mechanism
+ * - You need to open dialog programmatically from multiple places
  *
  * @component
- * @param {Object} props - Component props
- * @param {boolean} [props.isAlertDialog] - Whether this is an alert dialog requiring user action
- * @param {() => void} [props.onClose] - Callback when dialog is closed
- * @param {string} [props.dialogTitle] - Title displayed in dialog header
- * @param {string} [props.dialogLabel] - Accessible label for the dialog
+ * @param {DialogModalProps} props - Component props
+ * @param {string} props.dialogTitle - Title displayed in dialog header
+ * @param {ReactNode} props.children - Content to display inside the dialog
  * @param {string} [props.btnLabel="Open Dialog"] - Text label for the trigger button
- * @param {"sm" | "md" | "lg"} [props.btnSize="md"] - Size of the trigger button
- * @param {() => void} [props.btnOnClick] - Callback when trigger button is clicked
- * @param {React.ReactNode} props.children - Content to display inside the dialog
- * @param {() => void} [props.onConfirm] - Callback when confirm button is clicked (for alert dialogs)
- * @param {string} [props.confirmLabel="Confirm"] - Text for the confirm button
- * @param {string} [props.cancelLabel="Cancel"] - Text for the cancel button
- * @param {string} [props.className] - Additional CSS class for the dialog wrapper
- * @param {React.ComponentProps<typeof Button>} [props.btnProps] - Additional props for the trigger button
- * @returns {JSX.Element} A dialog component with a trigger button
+ * @param {"sm" | "md" | "lg"} [props.btnSize="sm"] - Size variant for the trigger button
+ * @param {() => void} [props.btnOnClick] - Callback fired when trigger button is clicked (before opening)
+ * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert
+ * @param {() => void} [props.onClose] - Callback fired when dialog is closed
+ * @param {() => void | Promise<void>} [props.onConfirm] - Callback when confirm button is clicked
+ * @param {string} [props.confirmLabel="Confirm"] - Text label for confirm button
+ * @param {string} [props.cancelLabel="Cancel"] - Text label for cancel button
+ * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons
+ * @param {string} [props.className] - Additional CSS classes for the dialog
+ * @param {string} [props.dialogLabel] - Optional aria-label for the dialog
+ * @returns {JSX.Element} A dialog with trigger button and automatic state management
  *
  * @example
- * ```jsx
+ * ```tsx
  * <DialogModal
- *   dialogTitle="Confirm Action"
- *   btnLabel="Open Modal"
- *   btnSize="lg"
- *   onClose={() => console.log('Dialog closed')}
+ *   dialogTitle="Confirm Delete"
+ *   btnLabel="Delete Item"
+ *   btnSize="md"
+ *   onConfirm={async () => await deleteItem()}
+ *   confirmLabel="Delete"
+ *   cancelLabel="Cancel"
  * >
- *   <p>Dialog content goes here</p>
+ *   Are you sure you want to delete this item? This action cannot be undone.
  * </DialogModal>
  * ```
  */
-
 export const DialogModal: React.FC<DialogModalProps> = ({
-  isAlertDialog,
+  isAlertDialog = false,
   onClose,
   dialogTitle,
   dialogLabel,
@@ -67,21 +63,48 @@ export const DialogModal: React.FC<DialogModalProps> = ({
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   className,
+  hideFooter = false,
   btnProps,
 }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const lastFocusedElement = useRef<HTMLElement | null>(null);
 
-  const handleClose = () => {
-    setIsOpen(false);
-    onClose?.();
-  };
-  const handleButtonClick = () => {
+  // Handle dialog state changes
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      // If closing, call the onClose callback
+      if (!open && onClose) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  // Handle trigger button click
+  const handleButtonClick = useCallback(() => {
+    // Store the currently focused element (should be the trigger button)
+    lastFocusedElement.current = document.activeElement as HTMLElement;
     setIsOpen(true);
-    btnOnClick?.();
-  };
+    // Call optional pre-open callback
+    if (btnOnClick) {
+      btnOnClick();
+    }
+  }, [btnOnClick]);
+
+  // Restore focus to trigger button when dialog closes
+  useEffect(() => {
+    if (!isOpen && lastFocusedElement.current) {
+      // Small delay to ensure dialog has fully closed
+      const timeoutId = setTimeout(() => {
+        lastFocusedElement.current?.focus();
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isOpen]);
 
-  const dialogBtnProps = {
-    type: "button" as "button" | "submit" | "reset",
+  const triggerButtonProps = {
+    type: "button" as const,
     onClick: handleButtonClick,
     "data-btn": btnSize,
     ...btnProps,
@@ -89,18 +112,18 @@ export const DialogModal: React.FC<DialogModalProps> = ({
 
   return (
     <>
-      <Button {...dialogBtnProps}>{btnLabel}</Button>
+      <Button {...triggerButtonProps}>{btnLabel}</Button>
       <Dialog
-        showDialog={isOpen}
+        isOpen={isOpen}
+        onOpenChange={handleOpenChange}
         dialogTitle={dialogTitle}
-        onClose={handleClose}
-        title={dialogTitle}
         dialogLabel={dialogLabel}
         className={className}
         isAlertDialog={isAlertDialog}
         onConfirm={onConfirm}
         confirmLabel={confirmLabel}
         cancelLabel={cancelLabel}
+        hideFooter={hideFooter}
       >
         {children}
       </Dialog>

package/src/components/dialog/dialog.scss

@@ -13,6 +13,23 @@
   --dialog-button-hover-bg: whitesmoke;
   --dialog-display: flex;
   --dialog-flex-direction: column;
+
+  /* Focus and accessibility */
+  --dialog-focus-color: #0066cc;
+  --dialog-focus-width: 0.125rem;
+  --dialog-focus-offset: 0.125rem;
+  --dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  :root {
+    --dialog-border-color: currentColor;
+    --dialog-border-width: 0.125rem;
+    --dialog-close-color: currentColor;
+    --dialog-button-border: currentColor 0.125rem solid;
+    --dialog-focus-width: 0.1875rem;
+  }
 }
 
 dialog {
@@ -22,13 +39,20 @@ dialog {
   border: var(--dialog-border-color) var(--dialog-border-width) solid;
   border-radius: var(--dialog-border-radius);
   padding: var(--dialog-padding);
-  padding-block-start: calc(var(--dialog-padding) - 0rem);
+  padding-block-start: var(--dialog-padding);
+
+  /* Focus visible for keyboard navigation */
+  &:focus-visible {
+    outline: var(--dialog-focus-outline);
+    outline-offset: var(--dialog-focus-offset);
+  }
 
   &[open] {
     display: var(--dialog-display);
     flex-direction: var(--dialog-flex-direction);
     gap: var(--dialog-gap);
   }
+
   section {
     width: 100%;
     display: flex;
@@ -46,22 +70,38 @@ dialog {
   align-items: center;
   width: 100%;
   min-width: 100%;
+
   h3 {
     margin-block-start: 0;
     margin-block-end: 0;
   }
+
   .dialog-close {
     margin-block-end: 0;
   }
+
   button[type="button"] {
     background-color: var(--dialog-button-bg);
     border: var(--dialog-button-border);
     cursor: pointer;
-    &:hover,
-    &:focus {
+
+    &:hover {
       border-color: var(--dialog-close-color);
       background-color: var(--dialog-button-hover-bg);
     }
+
+    /* Keyboard focus indicator */
+    &:focus-visible {
+      outline: var(--dialog-focus-outline);
+      outline-offset: var(--dialog-focus-offset);
+      border-color: var(--dialog-focus-color);
+      background-color: var(--dialog-button-hover-bg);
+    }
+
+    /* Remove default focus for mouse users */
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
   }
 }
 
@@ -73,4 +113,14 @@ dialog {
   justify-content: var(--dialog-footer-justify, flex-end);
   gap: var(--dialog-gap);
   width: 100%;
+
+  /* Focus styles for footer buttons */
+  button:focus-visible {
+    outline: var(--dialog-focus-outline);
+    outline-offset: var(--dialog-focus-offset);
+  }
+
+  button:focus:not(:focus-visible) {
+    outline: none;
+  }
 }

package/src/components/dialog/dialog.stories.tsx

@@ -15,8 +15,8 @@ const buttonDecorator = [
         <button onClick={() => setIsOpen(true)}>Open Dialog</button>
         <Story
           args={{
-            showDialog: isOpen,
-            onClose: () => setIsOpen(false),
+            isOpen: isOpen,
+            onOpenChange: setIsOpen,
             dialogTitle: "Dialog Button",
             children: content,
           }}
@@ -67,18 +67,20 @@ type Story = StoryObj<typeof Dialog>;
 export const BasicDialog: Story = {
   args: {
     isAlertDialog: false,
-    showDialog: true,
+    isOpen: true,
+    onOpenChange: () => {},
     dialogTitle: "Basic Dialog",
   },
 } as Story;
 
 /**
- * Show the dialog by default
- * set the showDialog prop to true
+ * Non-modal inline alert dialog
+ * Uses dialog.show() instead of dialog.showModal()
  */
 export const NonModalDialog: Story = {
   args: {
-    showDialog: true,
+    isOpen: true,
+    onOpenChange: () => {},
     isAlertDialog: true,
     dialogTitle: "Non Modal Dialog",
   },
@@ -95,7 +97,8 @@ export const DialogWithButton: Story = {
 export const DialogInteractions: Story = {
   args: {
     isAlertDialog: false,
-    showDialog: true,
+    isOpen: true,
+    onOpenChange: () => {},
     dialogTitle: "Dialog Interactions",
   },
   play: async ({ canvasElement, step }) => {