mautourco-components 0.2.4 → 0.2.7

package/src/components/organisms/Dialog/Dialog.tsx

@@ -1,352 +1,352 @@
-import React, { useEffect, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { useMobile } from '../../../hooks/useMobile';
-import Button from '../../atoms/Button/Button';
-import Icon from '../../atoms/Icon/Icon';
-import '../../../styles/components/organism/dialog.css';
-
-/**
- * Size variants for the Dialog component
- */
-export type DialogSize = 'desktop' | 'tablet' | 'mobile' | 'full' | 'responsive';
-
-/**
- * Props for the Dialog component
- */
-export interface DialogProps {
-  /**
-   * Whether the dialog is open
-   */
-  isOpen: boolean;
-  /**
-   * Callback when the dialog should close
-   */
-  onClose: () => void;
-  /**
-   * Title displayed in the dialog header
-   */
-  title: string;
-  /**
-   * Content to be rendered in the dialog body
-   */
-  children: React.ReactNode;
-  /**
-   * Footer content or buttons. If not provided, default Cancel/Save buttons are shown
-   */
-  footer?: React.ReactNode;
-  /**
-   * Size variant of the dialog
-   * @default 'responsive'
-   */
-  size?: DialogSize;
-  /**
-   * Text for the primary action button (when using default footer)
-   * @default 'Save and update'
-   */
-  primaryButtonText?: string;
-  /**
-   * Text for the secondary action button (when using default footer)
-   * @default 'Cancel'
-   */
-  secondaryButtonText?: string;
-  /**
-   * Callback for primary button click (when using default footer)
-   */
-  onPrimaryClick?: () => void;
-  /**
-   * Callback for secondary button click (when using default footer)
-   */
-  onSecondaryClick?: () => void;
-  /**
-   * Whether to show the footer
-   * @default true
-   */
-  showFooter?: boolean;
-  /**
-   * Whether to show the close button in the header
-   * @default true
-   */
-  showCloseButton?: boolean;
-  /**
-   * Whether clicking the overlay closes the dialog
-   * @default true
-   */
-  closeOnOverlayClick?: boolean;
-  /**
-   * Whether pressing Escape closes the dialog
-   * @default true
-   */
-  closeOnEscape?: boolean;
-  /**
-   * Additional CSS classes for the dialog content
-   */
-  className?: string;
-  /**
-   * ID for aria-labelledby
-   */
-  ariaLabelledBy?: string;
-  /**
-   * ID for aria-describedby
-   */
-  ariaDescribedBy?: string;
-}
-
-/**
- * Dialog component - A modal dialog that adapts to different screen sizes
- *
- * @example
- * ```tsx
- * <Dialog
- *   isOpen={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   title="Edit Information"
- *   onPrimaryClick={handleSave}
- * >
- *   <p>Your content here</p>
- * </Dialog>
- * ```
- */
-export const Dialog: React.FC<DialogProps> = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  footer,
-  size = 'responsive',
-  primaryButtonText = 'Save and update',
-  secondaryButtonText = 'Cancel',
-  onPrimaryClick,
-  onSecondaryClick,
-  showFooter = true,
-  showCloseButton = true,
-  closeOnOverlayClick = true,
-  closeOnEscape = true,
-  className = '',
-  ariaLabelledBy,
-  ariaDescribedBy,
-}) => {
-  const { isMobile, isTablet, isDesktop } = useMobile();
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
-
-  // Determine the actual size based on responsive setting
-  const getActualSize = (): Exclude<DialogSize, 'responsive'> => {
-    if (size !== 'responsive') return size;
-    if (isMobile) return 'mobile';
-    if (isTablet) return 'tablet';
-    return 'desktop';
-  };
-
-  const actualSize = getActualSize();
-  const isMobileSize = actualSize === 'mobile';
-  const isTabletSize = actualSize === 'tablet';
-
-  // Handle escape key
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (closeOnEscape && event.key === 'Escape') {
-        onClose();
-      }
-    },
-    [closeOnEscape, onClose]
-  );
-
-  // Handle overlay click
-  const handleOverlayClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (closeOnOverlayClick && event.target === event.currentTarget) {
-        onClose();
-      }
-    },
-    [closeOnOverlayClick, onClose]
-  );
-
-  // Focus management and scroll lock
-  useEffect(() => {
-    if (isOpen) {
-      // Store current focus
-      previousFocusRef.current = document.activeElement as HTMLElement;
-
-      // Focus the dialog
-      if (dialogRef.current) {
-        dialogRef.current.focus();
-      }
-
-      // Lock body scroll
-      document.body.style.overflow = 'hidden';
-
-      // Add escape listener
-      document.addEventListener('keydown', handleKeyDown);
-    } else {
-      // Unlock body scroll
-      document.body.style.overflow = '';
-
-      // Restore focus
-      if (previousFocusRef.current) {
-        previousFocusRef.current.focus();
-      }
-    }
-
-    return () => {
-      document.body.style.overflow = '';
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, handleKeyDown]);
-
-  // Handle secondary button click
-  const handleSecondaryClick = () => {
-    if (onSecondaryClick) {
-      onSecondaryClick();
-    } else {
-      onClose();
-    }
-  };
-
-  // Handle primary button click
-  const handlePrimaryClick = () => {
-    if (onPrimaryClick) {
-      onPrimaryClick();
-    }
-  };
-
-  // Generate unique IDs for accessibility
-  const titleId = ariaLabelledBy || `dialog-title-${title.replace(/\s+/g, '-').toLowerCase()}`;
-  const bodyId = ariaDescribedBy || `dialog-body-${title.replace(/\s+/g, '-').toLowerCase()}`;
-
-  // Build class names
-  const contentClasses = [
-    'dialog__content',
-    `dialog__content--${actualSize}`,
-    size === 'responsive' ? 'dialog__content--responsive' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const headerClasses = [
-    'dialog__header',
-    isMobileSize ? 'dialog__header--mobile' : '',
-    size === 'responsive' ? 'dialog__header--responsive' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const titleClasses = [
-    'dialog__title',
-    isMobileSize ? 'dialog__title--mobile' : '',
-    isTabletSize ? 'dialog__title--tablet' : '',
-    size === 'responsive' ? 'dialog__title--responsive' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const closeButtonClasses = 'dialog__close-button';
-
-  const bodyClasses = [
-    'dialog__body',
-    isMobileSize ? 'dialog__body--mobile' : '',
-    size === 'responsive' ? 'dialog__body--responsive' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const footerClasses = [
-    'dialog__footer',
-    isMobileSize ? 'dialog__footer--mobile' : '',
-    size === 'responsive' ? 'dialog__footer--responsive' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const footerButtonsClasses = [
-    'dialog__footer-buttons',
-    isMobileSize ? 'dialog__footer-buttons--mobile' : '',
-    size === 'responsive' ? 'dialog__footer-buttons--responsive' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const dialogContent = (
-    <>
-      {/* Overlay */}
-      <div
-        className="dialog-overlay"
-        onClick={handleOverlayClick}
-        aria-hidden="true"
-      />
-
-      {/* Dialog container */}
-      <div
-        className="dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        aria-describedby={bodyId}
-        ref={dialogRef}
-        tabIndex={-1}
-        onClick={handleOverlayClick}
-      >
-        {/* Dialog content */}
-        <div className={contentClasses}>
-          {/* Header */}
-          <div className={headerClasses}>
-            <h2 id={titleId} className={titleClasses}>
-              {title}
-            </h2>
-            {showCloseButton && (
-              <button
-                type="button"
-                className={closeButtonClasses}
-                onClick={onClose}
-                aria-label="Close dialog"
-              >
-                <Icon name="close" size="md" />
-              </button>
-            )}
-          </div>
-
-          {/* Body */}
-          <div id={bodyId} className={bodyClasses}>
-            <div className="dialog__body-content">{children}</div>
-          </div>
-
-          {/* Footer */}
-          {showFooter && (
-            <div className={footerClasses}>
-              {footer ? (
-                footer
-              ) : (
-                <div className={footerButtonsClasses}>
-                  <Button
-                    variant="outline-secondary"
-                    size={isMobileSize ? 'sm' : 'md'}
-                    onClick={handleSecondaryClick}
-                  >
-                    {secondaryButtonText}
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    size={isMobileSize ? 'sm' : 'md'}
-                    onClick={handlePrimaryClick}
-                  >
-                    {primaryButtonText}
-                  </Button>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-
-  // Use portal to render at the document body level
-  return createPortal(dialogContent, document.body);
-};
-
-export default Dialog;
-
+import React, { useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useMobile } from '../../../hooks/useMobile';
+import Button from '../../atoms/Button/Button';
+import Icon from '../../atoms/Icon/Icon';
+import '../../../styles/components/organism/dialog.css';
+
+/**
+ * Size variants for the Dialog component
+ */
+export type DialogSize = 'desktop' | 'tablet' | 'mobile' | 'full' | 'responsive';
+
+/**
+ * Props for the Dialog component
+ */
+export interface DialogProps {
+  /**
+   * Whether the dialog is open
+   */
+  isOpen: boolean;
+  /**
+   * Callback when the dialog should close
+   */
+  onClose: () => void;
+  /**
+   * Title displayed in the dialog header
+   */
+  title: string;
+  /**
+   * Content to be rendered in the dialog body
+   */
+  children: React.ReactNode;
+  /**
+   * Footer content or buttons. If not provided, default Cancel/Save buttons are shown
+   */
+  footer?: React.ReactNode;
+  /**
+   * Size variant of the dialog
+   * @default 'responsive'
+   */
+  size?: DialogSize;
+  /**
+   * Text for the primary action button (when using default footer)
+   * @default 'Save and update'
+   */
+  primaryButtonText?: string;
+  /**
+   * Text for the secondary action button (when using default footer)
+   * @default 'Cancel'
+   */
+  secondaryButtonText?: string;
+  /**
+   * Callback for primary button click (when using default footer)
+   */
+  onPrimaryClick?: () => void;
+  /**
+   * Callback for secondary button click (when using default footer)
+   */
+  onSecondaryClick?: () => void;
+  /**
+   * Whether to show the footer
+   * @default true
+   */
+  showFooter?: boolean;
+  /**
+   * Whether to show the close button in the header
+   * @default true
+   */
+  showCloseButton?: boolean;
+  /**
+   * Whether clicking the overlay closes the dialog
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * Whether pressing Escape closes the dialog
+   * @default true
+   */
+  closeOnEscape?: boolean;
+  /**
+   * Additional CSS classes for the dialog content
+   */
+  className?: string;
+  /**
+   * ID for aria-labelledby
+   */
+  ariaLabelledBy?: string;
+  /**
+   * ID for aria-describedby
+   */
+  ariaDescribedBy?: string;
+}
+
+/**
+ * Dialog component - A modal dialog that adapts to different screen sizes
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Edit Information"
+ *   onPrimaryClick={handleSave}
+ * >
+ *   <p>Your content here</p>
+ * </Dialog>
+ * ```
+ */
+export const Dialog: React.FC<DialogProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  size = 'responsive',
+  primaryButtonText = 'Save and update',
+  secondaryButtonText = 'Cancel',
+  onPrimaryClick,
+  onSecondaryClick,
+  showFooter = true,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  className = '',
+  ariaLabelledBy,
+  ariaDescribedBy,
+}) => {
+  const { isMobile, isTablet, isDesktop } = useMobile();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  // Determine the actual size based on responsive setting
+  const getActualSize = (): Exclude<DialogSize, 'responsive'> => {
+    if (size !== 'responsive') return size;
+    if (isMobile) return 'mobile';
+    if (isTablet) return 'tablet';
+    return 'desktop';
+  };
+
+  const actualSize = getActualSize();
+  const isMobileSize = actualSize === 'mobile';
+  const isTabletSize = actualSize === 'tablet';
+
+  // Handle escape key
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (closeOnEscape && event.key === 'Escape') {
+        onClose();
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+
+  // Handle overlay click
+  const handleOverlayClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (closeOnOverlayClick && event.target === event.currentTarget) {
+        onClose();
+      }
+    },
+    [closeOnOverlayClick, onClose]
+  );
+
+  // Focus management and scroll lock
+  useEffect(() => {
+    if (isOpen) {
+      // Store current focus
+      previousFocusRef.current = document.activeElement as HTMLElement;
+
+      // Focus the dialog
+      if (dialogRef.current) {
+        dialogRef.current.focus();
+      }
+
+      // Lock body scroll
+      document.body.style.overflow = 'hidden';
+
+      // Add escape listener
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      // Unlock body scroll
+      document.body.style.overflow = '';
+
+      // Restore focus
+      if (previousFocusRef.current) {
+        previousFocusRef.current.focus();
+      }
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, handleKeyDown]);
+
+  // Handle secondary button click
+  const handleSecondaryClick = () => {
+    if (onSecondaryClick) {
+      onSecondaryClick();
+    } else {
+      onClose();
+    }
+  };
+
+  // Handle primary button click
+  const handlePrimaryClick = () => {
+    if (onPrimaryClick) {
+      onPrimaryClick();
+    }
+  };
+
+  // Generate unique IDs for accessibility
+  const titleId = ariaLabelledBy || `dialog-title-${title.replace(/\s+/g, '-').toLowerCase()}`;
+  const bodyId = ariaDescribedBy || `dialog-body-${title.replace(/\s+/g, '-').toLowerCase()}`;
+
+  // Build class names
+  const contentClasses = [
+    'dialog__content',
+    `dialog__content--${actualSize}`,
+    size === 'responsive' ? 'dialog__content--responsive' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const headerClasses = [
+    'dialog__header',
+    isMobileSize ? 'dialog__header--mobile' : '',
+    size === 'responsive' ? 'dialog__header--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const titleClasses = [
+    'dialog__title',
+    isMobileSize ? 'dialog__title--mobile' : '',
+    isTabletSize ? 'dialog__title--tablet' : '',
+    size === 'responsive' ? 'dialog__title--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const closeButtonClasses = 'dialog__close-button';
+
+  const bodyClasses = [
+    'dialog__body',
+    isMobileSize ? 'dialog__body--mobile' : '',
+    size === 'responsive' ? 'dialog__body--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const footerClasses = [
+    'dialog__footer',
+    isMobileSize ? 'dialog__footer--mobile' : '',
+    size === 'responsive' ? 'dialog__footer--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const footerButtonsClasses = [
+    'dialog__footer-buttons',
+    isMobileSize ? 'dialog__footer-buttons--mobile' : '',
+    size === 'responsive' ? 'dialog__footer-buttons--responsive' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const dialogContent = (
+    <>
+      {/* Overlay */}
+      <div
+        className="dialog-overlay"
+        onClick={handleOverlayClick}
+        aria-hidden="true"
+      />
+
+      {/* Dialog container */}
+      <div
+        className="dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={bodyId}
+        ref={dialogRef}
+        tabIndex={-1}
+        onClick={handleOverlayClick}
+      >
+        {/* Dialog content */}
+        <div className={contentClasses}>
+          {/* Header */}
+          <div className={headerClasses}>
+            <h2 id={titleId} className={titleClasses}>
+              {title}
+            </h2>
+            {showCloseButton && (
+              <button
+                type="button"
+                className={closeButtonClasses}
+                onClick={onClose}
+                aria-label="Close dialog"
+              >
+                <Icon name="close" size="md" />
+              </button>
+            )}
+          </div>
+
+          {/* Body */}
+          <div id={bodyId} className={bodyClasses}>
+            <div className="dialog__body-content">{children}</div>
+          </div>
+
+          {/* Footer */}
+          {showFooter && (
+            <div className={footerClasses}>
+              {footer ? (
+                footer
+              ) : (
+                <div className={footerButtonsClasses}>
+                  <Button
+                    variant="outline-secondary"
+                    size={isMobileSize ? 'sm' : 'md'}
+                    onClick={handleSecondaryClick}
+                  >
+                    {secondaryButtonText}
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size={isMobileSize ? 'sm' : 'md'}
+                    onClick={handlePrimaryClick}
+                  >
+                    {primaryButtonText}
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+
+  // Use portal to render at the document body level
+  return createPortal(dialogContent, document.body);
+};
+
+export default Dialog;
+