@thangnqdev/ui 0.1.2 → 0.2.0

package/src/overlays/Modal.tsx

@@ -1,219 +1,296 @@
-import React, { forwardRef, createContext, useContext, useEffect } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import { Portal } from './Portal';
-import { FocusTrap } from './FocusTrap';
-import { cn } from '../utils/cn';
-
-interface ModalContextType {
-  isOpen: boolean;
-  onClose: () => void;
-  closeOnOverlayClick?: boolean;
-}
-
-const ModalContext = createContext<ModalContextType | null>(null);
-
-export function useModal() {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error('Modal compound components must be used within a <Modal />');
-  }
-  return context;
-}
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  closeOnEsc?: boolean;
-  closeOnOverlayClick?: boolean;
-}
-
-export function Modal({
-  isOpen,
-  onClose,
-  children,
-  closeOnEsc = true,
-  closeOnOverlayClick = true,
-}: ModalProps) {
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (closeOnEsc && e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = originalOverflow;
-    };
-  }, [isOpen, closeOnEsc, onClose]);
-
-  if (!isOpen) return null;
-
-  return (
-    <Portal>
-      <ModalContext.Provider value={{ isOpen, onClose, closeOnOverlayClick }}>
-        <FocusTrap active={isOpen}>
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
-            role="dialog"
-            aria-modal="true"
-          >
-            {children}
-          </div>
-        </FocusTrap>
-      </ModalContext.Provider>
-    </Portal>
-  );
-}
-
-export interface ModalOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(
-  ({ className, onClick, ...props }, ref) => {
-    const { onClose, closeOnOverlayClick } = useModal();
-
-    return (
-      <div
-        ref={ref}
-        aria-hidden="true"
-        onClick={(e) => {
-          onClick?.(e);
-          if (closeOnOverlayClick) onClose();
-        }}
-        className={cn(
-          'fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200',
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-);
-ModalOverlay.displayName = 'ModalOverlay';
-
-export const modalContentVariants = cva(
-  'relative w-full max-w-lg rounded-[var(--ui-radius-xl)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] p-6 text-[var(--ui-text-primary)] shadow-2xl transition-all animate-in zoom-in-95 duration-200 z-10',
-  {
-    variants: {
-      size: {
-        sm: 'max-w-sm',
-        md: 'max-w-md',
-        lg: 'max-w-lg',
-        xl: 'max-w-xl',
-        '2xl': 'max-w-2xl',
-        full: 'max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-    },
-  }
-);
-
-export interface ModalContentProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof modalContentVariants> {}
-
-export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
-  ({ className, size, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(modalContentVariants({ size }), className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-ModalContent.displayName = 'ModalContent';
-
-export const ModalHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('flex flex-col space-y-1.5 mb-4', className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-ModalHeader.displayName = 'ModalHeader';
-
-export const ModalTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <h2 ref={ref} className={cn('text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
-        {children}
-      </h2>
-    );
-  }
-);
-ModalTitle.displayName = 'ModalTitle';
-
-export const ModalDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <p ref={ref} className={cn('text-sm text-[var(--ui-text-muted)]', className)} {...props}>
-        {children}
-      </p>
-    );
-  }
-);
-ModalDescription.displayName = 'ModalDescription';
-
-export const ModalBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('py-2', className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-ModalBody.displayName = 'ModalBody';
-
-export const ModalFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('flex items-center justify-end gap-3 mt-6 pt-4 border-t border-[var(--ui-border-subtle)]', className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-ModalFooter.displayName = 'ModalFooter';
-
-export const ModalCloseButton = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
-  ({ className, onClick, ...props }, ref) => {
-    const { onClose } = useModal();
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        onClick={(e) => {
-          onClick?.(e);
-          onClose();
-        }}
-        aria-label="Close dialog"
-        className={cn(
-          'absolute top-4 right-4 p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors',
-          className
-        )}
-        {...props}
-      >
-        <X className="w-4 h-4" />
-      </button>
-    );
-  }
-);
-ModalCloseButton.displayName = 'ModalCloseButton';
+import React, { forwardRef, createContext, useContext, useEffect, useId, useState, useCallback } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { Portal } from './Portal';
+import { FocusTrap } from './FocusTrap';
+import { lockBodyScroll, unlockBodyScroll } from '../utils/scroll-lock';
+import { cn } from '../utils/cn';
+
+interface ModalContextType {
+  isOpen: boolean;
+  onClose: () => void;
+  closeOnOverlayClick?: boolean;
+  titleId: string;
+  descriptionId: string;
+  registerTitle: (id?: string) => () => void;
+  registerDescription: (id?: string) => () => void;
+}
+
+const ModalContext = createContext<ModalContextType | null>(null);
+
+export function useModal() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error('Modal compound components must be used within a <Modal />');
+  }
+  return context;
+}
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  closeOnEsc?: boolean;
+  closeOnOverlayClick?: boolean;
+  role?: 'dialog' | 'alertdialog';
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  closeOnEsc = true,
+  closeOnOverlayClick = true,
+  role = 'dialog',
+  'aria-label': ariaLabel,
+  'aria-labelledby': customLabelledBy,
+  'aria-describedby': customDescribedBy,
+}: ModalProps) {
+  const generatedId = useId();
+  const titleId = customLabelledBy || `modal-title-${generatedId}`;
+  const descriptionId = customDescribedBy || `modal-desc-${generatedId}`;
+
+  const [mountedTitleId, setMountedTitleId] = useState<string | null>(null);
+  const [mountedDescId, setMountedDescId] = useState<string | null>(null);
+
+  const registerTitle = useCallback(
+    (id?: string) => {
+      const activeId = id || titleId;
+      setMountedTitleId(activeId);
+      return () => setMountedTitleId(null);
+    },
+    [titleId]
+  );
+
+  const registerDescription = useCallback(
+    (id?: string) => {
+      const activeId = id || descriptionId;
+      setMountedDescId(activeId);
+      return () => setMountedDescId(null);
+    },
+    [descriptionId]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    lockBodyScroll();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (closeOnEsc && e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      unlockBodyScroll();
+    };
+  }, [isOpen, closeOnEsc, onClose]);
+
+  if (!isOpen) return null;
+
+  const resolvedLabelledBy = customLabelledBy || (ariaLabel ? undefined : (mountedTitleId || undefined));
+  const resolvedDescribedBy = customDescribedBy || (mountedDescId || undefined);
+
+  return (
+    <Portal>
+      <ModalContext.Provider
+        value={{
+          isOpen,
+          onClose,
+          closeOnOverlayClick,
+          titleId,
+          descriptionId,
+          registerTitle,
+          registerDescription,
+        }}
+      >
+        <FocusTrap active={isOpen} restoreFocus={true}>
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
+            role={role}
+            aria-modal="true"
+            aria-label={ariaLabel}
+            aria-labelledby={resolvedLabelledBy}
+            aria-describedby={resolvedDescribedBy}
+          >
+            {children}
+          </div>
+        </FocusTrap>
+      </ModalContext.Provider>
+    </Portal>
+  );
+}
+
+export interface ModalOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose, closeOnOverlayClick } = useModal();
+
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        onClick={(e) => {
+          onClick?.(e);
+          if (closeOnOverlayClick) onClose();
+        }}
+        className={cn(
+          'fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+ModalOverlay.displayName = 'ModalOverlay';
+
+export const modalContentVariants = cva(
+  'relative w-full max-w-lg rounded-[var(--ui-radius-xl)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] p-6 text-[var(--ui-text-primary)] shadow-2xl transition-all animate-in zoom-in-95 duration-200 z-10',
+  {
+    variants: {
+      size: {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        full: 'max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export interface ModalContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof modalContentVariants> {}
+
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  ({ className, size, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(modalContentVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ModalContent.displayName = 'ModalContent';
+
+export const ModalHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex flex-col space-y-1.5 mb-4', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, id, ...props }, ref) => {
+    const { titleId, registerTitle } = useModal();
+    const activeId = id || titleId;
+
+    useEffect(() => {
+      return registerTitle(activeId);
+    }, [registerTitle, activeId]);
+
+    return (
+      <h2
+        ref={ref}
+        id={activeId}
+        className={cn('text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]', className)}
+        {...props}
+      >
+        {children}
+      </h2>
+    );
+  }
+);
+ModalTitle.displayName = 'ModalTitle';
+
+export const ModalDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, id, ...props }, ref) => {
+    const { descriptionId, registerDescription } = useModal();
+    const activeId = id || descriptionId;
+
+    useEffect(() => {
+      return registerDescription(activeId);
+    }, [registerDescription, activeId]);
+
+    return (
+      <p
+        ref={ref}
+        id={activeId}
+        className={cn('text-sm text-[var(--ui-text-muted)]', className)}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+ModalDescription.displayName = 'ModalDescription';
+
+export const ModalBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('py-2', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalBody.displayName = 'ModalBody';
+
+export const ModalFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex items-center justify-end gap-3 mt-6 pt-4 border-t border-[var(--ui-border-subtle)]', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalFooter.displayName = 'ModalFooter';
+
+export const ModalCloseButton = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose } = useModal();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={(e) => {
+          onClick?.(e);
+          onClose();
+        }}
+        aria-label="Close dialog"
+        className={cn(
+          'absolute top-4 right-4 p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
+          className
+        )}
+        {...props}
+      >
+        <X className="w-4 h-4" />
+      </button>
+    );
+  }
+);
+ModalCloseButton.displayName = 'ModalCloseButton';

package/src/overlays/Popover.tsx

@@ -1,11 +1,15 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Portal } from './Portal';
 import { cn } from '../utils/cn';
+import { useControllableState } from '../utils/useControllableState';
 
 export interface PopoverProps {
   trigger: React.ReactNode;
   children: React.ReactNode;
-  isOpen?: boolean;
+  open?: boolean;
+  isOpen?: boolean; // Legacy alias
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
   onClose?: () => void;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   className?: string;
@@ -14,19 +18,39 @@ export interface PopoverProps {
 export const Popover = ({
   trigger,
   children,
-  isOpen: controlledIsOpen,
+  open: controlledOpen,
+  isOpen: legacyIsOpen,
+  defaultOpen = false,
+  onOpenChange,
   onClose,
   placement = 'bottom',
   className,
 }: PopoverProps) => {
-  const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  // Resolve controlled open state with legacy support
+  const activeControlled = controlledOpen !== undefined ? controlledOpen : legacyIsOpen;
+
+  const handleStateChange = useCallback(
+    (nextOpen: boolean) => {
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        onClose?.();
+      }
+    },
+    [onOpenChange, onClose]
+  );
+
+  const [isOpen, setIsOpen] = useControllableState<boolean>({
+    value: activeControlled,
+    defaultValue: defaultOpen,
+    onChange: handleStateChange,
+    name: 'Popover',
+  });
 
   const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
   const triggerRef = useRef<HTMLDivElement | null>(null);
   const popoverRef = useRef<HTMLDivElement | null>(null);
 
-  const calculatePosition = () => {
+  const calculatePosition = useCallback(() => {
     if (triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       let top = 0;
@@ -48,26 +72,24 @@ export const Popover = ({
 
       setCoords({ top, left });
     }
-  };
+  }, [placement]);
 
   const handleToggle = () => {
     if (!isOpen) {
       calculatePosition();
     }
-    if (controlledIsOpen !== undefined) {
-      if (isOpen) onClose?.();
-    } else {
-      setInternalIsOpen(!internalIsOpen);
-    }
+    setIsOpen(!isOpen);
   };
 
   useEffect(() => {
     if (isOpen) {
       calculatePosition();
     }
-  }, [isOpen]);
+  }, [isOpen, calculatePosition]);
 
   useEffect(() => {
+    if (!isOpen) return;
+
     const handleOutside = (e: MouseEvent) => {
       if (
         popoverRef.current &&
@@ -75,29 +97,37 @@ export const Popover = ({
         triggerRef.current &&
         !triggerRef.current.contains(e.target as Node)
       ) {
-        if (controlledIsOpen !== undefined) {
-          onClose?.();
-        } else {
-          setInternalIsOpen(false);
-        }
+        setIsOpen(false);
       }
     };
 
-    if (isOpen) {
-      document.addEventListener('mousedown', handleOutside);
-      window.addEventListener('resize', calculatePosition);
-      window.addEventListener('scroll', calculatePosition);
-    }
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('resize', calculatePosition);
+    window.addEventListener('scroll', calculatePosition);
+
     return () => {
       document.removeEventListener('mousedown', handleOutside);
+      document.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('resize', calculatePosition);
       window.removeEventListener('scroll', calculatePosition);
     };
-  }, [isOpen, controlledIsOpen, onClose]);
+  }, [isOpen, setIsOpen, calculatePosition]);
 
   return (
     <>
-      <div ref={triggerRef} onClick={handleToggle} className="w-full inline-block cursor-pointer">
+      <div
+        ref={triggerRef}
+        onClick={handleToggle}
+        className="w-full inline-block cursor-pointer"
+        aria-expanded={isOpen}
+      >
         {trigger}
       </div>