@thangnqdev/ui 0.2.0 → 0.2.2

package/src/navigation/DropdownMenu.tsx

@@ -1,244 +1,244 @@
-import React, { createContext, useContext, useState, useRef, useEffect, forwardRef, useId } from 'react';
-import { Portal } from '../overlays/Portal';
-import { cn } from '../utils/cn';
-
-interface DropdownContextType {
-  isOpen: boolean;
-  setIsOpen: (val: boolean) => void;
-  triggerRect: DOMRect | null;
-  setTriggerRect: (rect: DOMRect | null) => void;
-  triggerRef: React.RefObject<HTMLDivElement | null>;
-  menuId: string;
-}
-
-const DropdownContext = createContext<DropdownContextType | null>(null);
-
-export function useDropdown() {
-  const context = useContext(DropdownContext);
-  if (!context) throw new Error('DropdownMenu components must be used within <DropdownMenu />');
-  return context;
-}
-
-export interface DropdownMenuProps {
-  children: React.ReactNode;
-}
-
-export function DropdownMenu({ children }: DropdownMenuProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
-  const triggerRef = useRef<HTMLDivElement | null>(null);
-  const menuId = useId();
-
-  return (
-    <DropdownContext.Provider value={{ isOpen, setIsOpen, triggerRect, setTriggerRect, triggerRef, menuId }}>
-      <div className="relative inline-block text-left">{children}</div>
-    </DropdownContext.Provider>
-  );
-}
-
-export const DropdownMenuTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ children, onClick, onKeyDown, ...props }, ref) => {
-    const { isOpen, setIsOpen, setTriggerRect, triggerRef, menuId } = useDropdown();
-
-    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      if (triggerRef.current) {
-        setTriggerRect(triggerRef.current.getBoundingClientRect());
-      }
-      setIsOpen(!isOpen);
-      onClick?.(e);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-      onKeyDown?.(e);
-      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        if (triggerRef.current) {
-          setTriggerRect(triggerRef.current.getBoundingClientRect());
-        }
-        setIsOpen(true);
-      }
-    };
-
-    return (
-      <div
-        ref={(node) => {
-          (triggerRef as any).current = node;
-          if (typeof ref === 'function') ref(node);
-          else if (ref) (ref as any).current = node;
-        }}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        role="button"
-        tabIndex={0}
-        aria-haspopup="menu"
-        aria-expanded={isOpen}
-        aria-controls={isOpen ? `menu-${menuId}` : undefined}
-        className="inline-flex cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-[var(--ui-radius-sm)]"
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
-
-export interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  align?: 'start' | 'end';
-}
-
-export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ className, align = 'start', children, ...props }, ref) => {
-    const { isOpen, setIsOpen, triggerRect, triggerRef, menuId } = useDropdown();
-    const menuRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      if (!isOpen) return;
-
-      // Auto-focus first menuitem
-      const timer = setTimeout(() => {
-        const firstItem = menuRef.current?.querySelector<HTMLButtonElement>('[role="menuitem"]:not([disabled])');
-        firstItem?.focus();
-      }, 10);
-
-      const handleOutside = (e: MouseEvent) => {
-        if (
-          menuRef.current &&
-          !menuRef.current.contains(e.target as Node) &&
-          !triggerRef.current?.contains(e.target as Node)
-        ) {
-          setIsOpen(false);
-        }
-      };
-
-      const handleKeyDown = (e: KeyboardEvent) => {
-        if (!menuRef.current) return;
-        const items = Array.from(
-          menuRef.current.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not([disabled])')
-        );
-        if (items.length === 0) return;
-
-        const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
-
-        if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
-          items[nextIndex]?.focus();
-        } else if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          const prevIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
-          items[prevIndex]?.focus();
-        } else if (e.key === 'Home') {
-          e.preventDefault();
-          items[0]?.focus();
-        } else if (e.key === 'End') {
-          e.preventDefault();
-          items[items.length - 1]?.focus();
-        } else if (e.key === 'Escape') {
-          e.preventDefault();
-          setIsOpen(false);
-          triggerRef.current?.focus();
-        }
-      };
-
-      document.addEventListener('mousedown', handleOutside);
-      window.addEventListener('keydown', handleKeyDown);
-
-      return () => {
-        clearTimeout(timer);
-        document.removeEventListener('mousedown', handleOutside);
-        window.removeEventListener('keydown', handleKeyDown);
-      };
-    }, [isOpen, setIsOpen, triggerRef]);
-
-    if (!isOpen || !triggerRect) return null;
-
-    const top = triggerRect.bottom + window.scrollY + 6;
-    const left =
-      align === 'end'
-        ? triggerRect.right + window.scrollX
-        : triggerRect.left + window.scrollX;
-
-    return (
-      <Portal>
-        <div
-          ref={(node) => {
-            (menuRef as any).current = node;
-            if (typeof ref === 'function') ref(node);
-            else if (ref) (ref as any).current = node;
-          }}
-          id={`menu-${menuId}`}
-          role="menu"
-          tabIndex={-1}
-          style={{
-            position: 'absolute',
-            top: `${top}px`,
-            left: `${left}px`,
-          }}
-          className={cn(
-            'z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95 focus:outline-none',
-            align === 'end' && '-translate-x-full',
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </Portal>
-    );
-  }
-);
-DropdownMenuContent.displayName = 'DropdownMenuContent';
-
-export interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: React.ReactNode;
-  shortcut?: string;
-  destructive?: boolean;
-}
-
-export const DropdownMenuItem = forwardRef<HTMLButtonElement, DropdownMenuItemProps>(
-  ({ className, icon, shortcut, destructive = false, children, onClick, ...props }, ref) => {
-    const { setIsOpen } = useDropdown();
-
-    return (
-      <button
-        ref={ref}
-        role="menuitem"
-        type="button"
-        onClick={(e) => {
-          onClick?.(e);
-          setIsOpen(false);
-        }}
-        className={cn(
-          'relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left',
-          destructive && 'text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)] focus:bg-[var(--ui-error-subtle)]',
-          className
-        )}
-        {...props}
-      >
-        {icon && <span className="flex-shrink-0 text-current">{icon}</span>}
-        <span className="flex-1 truncate">{children}</span>
-        {shortcut && <span className="ml-auto text-[10px] text-[var(--ui-text-muted)] tracking-widest">{shortcut}</span>}
-      </button>
-    );
-  }
-);
-DropdownMenuItem.displayName = 'DropdownMenuItem';
-
-export const DropdownMenuSeparator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    return <div ref={ref} role="separator" className={cn('-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]', className)} {...props} />;
-  }
-);
-DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
-
-export const DropdownMenuLabel = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('px-2.5 py-1.5 text-[11px] font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider', className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+import React, { createContext, useContext, useState, useRef, useEffect, forwardRef, useId } from 'react';
+import { Portal } from '../overlays/Portal';
+import { cn } from '../utils/cn';
+
+interface DropdownContextType {
+  isOpen: boolean;
+  setIsOpen: (val: boolean) => void;
+  triggerRect: DOMRect | null;
+  setTriggerRect: (rect: DOMRect | null) => void;
+  triggerRef: React.RefObject<HTMLDivElement | null>;
+  menuId: string;
+}
+
+const DropdownContext = createContext<DropdownContextType | null>(null);
+
+export function useDropdown() {
+  const context = useContext(DropdownContext);
+  if (!context) throw new Error('DropdownMenu components must be used within <DropdownMenu />');
+  return context;
+}
+
+export interface DropdownMenuProps {
+  children: React.ReactNode;
+}
+
+export function DropdownMenu({ children }: DropdownMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const menuId = useId();
+
+  return (
+    <DropdownContext.Provider value={{ isOpen, setIsOpen, triggerRect, setTriggerRect, triggerRef, menuId }}>
+      <div className="relative inline-block text-left">{children}</div>
+    </DropdownContext.Provider>
+  );
+}
+
+export const DropdownMenuTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, onClick, onKeyDown, ...props }, ref) => {
+    const { isOpen, setIsOpen, setTriggerRect, triggerRef, menuId } = useDropdown();
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (triggerRef.current) {
+        setTriggerRect(triggerRef.current.getBoundingClientRect());
+      }
+      setIsOpen(!isOpen);
+      onClick?.(e);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(e);
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (triggerRef.current) {
+          setTriggerRect(triggerRef.current.getBoundingClientRect());
+        }
+        setIsOpen(true);
+      }
+    };
+
+    return (
+      <div
+        ref={(node) => {
+          (triggerRef as any).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) (ref as any).current = node;
+        }}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? `menu-${menuId}` : undefined}
+        className="inline-flex cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-[var(--ui-radius-sm)]"
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+
+export interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  align?: 'start' | 'end';
+}
+
+export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ className, align = 'start', children, ...props }, ref) => {
+    const { isOpen, setIsOpen, triggerRect, triggerRef, menuId } = useDropdown();
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (!isOpen) return;
+
+      // Auto-focus first menuitem
+      const timer = setTimeout(() => {
+        const firstItem = menuRef.current?.querySelector<HTMLButtonElement>('[role="menuitem"]:not([disabled])');
+        firstItem?.focus();
+      }, 10);
+
+      const handleOutside = (e: MouseEvent) => {
+        if (
+          menuRef.current &&
+          !menuRef.current.contains(e.target as Node) &&
+          !triggerRef.current?.contains(e.target as Node)
+        ) {
+          setIsOpen(false);
+        }
+      };
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (!menuRef.current) return;
+        const items = Array.from(
+          menuRef.current.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not([disabled])')
+        );
+        if (items.length === 0) return;
+
+        const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
+
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          const prevIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          items[prevIndex]?.focus();
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          setIsOpen(false);
+          triggerRef.current?.focus();
+        }
+      };
+
+      document.addEventListener('mousedown', handleOutside);
+      window.addEventListener('keydown', handleKeyDown);
+
+      return () => {
+        clearTimeout(timer);
+        document.removeEventListener('mousedown', handleOutside);
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [isOpen, setIsOpen, triggerRef]);
+
+    if (!isOpen || !triggerRect) return null;
+
+    const top = triggerRect.bottom + window.scrollY + 6;
+    const left =
+      align === 'end'
+        ? triggerRect.right + window.scrollX
+        : triggerRect.left + window.scrollX;
+
+    return (
+      <Portal>
+        <div
+          ref={(node) => {
+            (menuRef as any).current = node;
+            if (typeof ref === 'function') ref(node);
+            else if (ref) (ref as any).current = node;
+          }}
+          id={`menu-${menuId}`}
+          role="menu"
+          tabIndex={-1}
+          style={{
+            position: 'absolute',
+            top: `${top}px`,
+            left: `${left}px`,
+          }}
+          className={cn(
+            'z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95 focus:outline-none',
+            align === 'end' && '-translate-x-full',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </Portal>
+    );
+  }
+);
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+export interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode;
+  shortcut?: string;
+  destructive?: boolean;
+}
+
+export const DropdownMenuItem = forwardRef<HTMLButtonElement, DropdownMenuItemProps>(
+  ({ className, icon, shortcut, destructive = false, children, onClick, ...props }, ref) => {
+    const { setIsOpen } = useDropdown();
+
+    return (
+      <button
+        ref={ref}
+        role="menuitem"
+        type="button"
+        onClick={(e) => {
+          onClick?.(e);
+          setIsOpen(false);
+        }}
+        className={cn(
+          'relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left',
+          destructive && 'text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)] focus:bg-[var(--ui-error-subtle)]',
+          className
+        )}
+        {...props}
+      >
+        {icon && <span className="flex-shrink-0 text-current">{icon}</span>}
+        <span className="flex-1 truncate">{children}</span>
+        {shortcut && <span className="ml-auto text-[10px] text-[var(--ui-text-muted)] tracking-widest">{shortcut}</span>}
+      </button>
+    );
+  }
+);
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+export const DropdownMenuSeparator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} role="separator" className={cn('-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]', className)} {...props} />;
+  }
+);
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+export const DropdownMenuLabel = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('px-2.5 py-1.5 text-[11px] font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';