@thangnqdev/ui 0.1.2 → 0.2.0

package/src/navigation/DropdownMenu.tsx

@@ -1,160 +1,244 @@
-import React, { createContext, useContext, useState, useRef, useEffect, forwardRef } 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;
-}
-
-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);
-
-  return (
-    <DropdownContext.Provider value={{ isOpen, setIsOpen, triggerRect, setTriggerRect }}>
-      <div className="relative inline-block text-left">{children}</div>
-    </DropdownContext.Provider>
-  );
-}
-
-export const DropdownMenuTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ children, onClick, ...props }, ref) => {
-    const { isOpen, setIsOpen, setTriggerRect } = useDropdown();
-    const triggerRef = useRef<HTMLDivElement>(null);
-
-    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      if (triggerRef.current) {
-        setTriggerRect(triggerRef.current.getBoundingClientRect());
-      }
-      setIsOpen(!isOpen);
-      onClick?.(e);
-    };
-
-    return (
-      <div ref={triggerRef} onClick={handleClick} className="inline-flex cursor-pointer" {...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 } = useDropdown();
-    const menuRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      const handleOutside = (e: MouseEvent) => {
-        if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-          setIsOpen(false);
-        }
-      };
-      if (isOpen) {
-        document.addEventListener('mousedown', handleOutside);
-      }
-      return () => document.removeEventListener('mousedown', handleOutside);
-    }, [isOpen, setIsOpen]);
-
-    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={menuRef}
-          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',
-            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}
-        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)] disabled:pointer-events-none disabled:opacity-50 text-left',
-          destructive && 'text-[var(--ui-error)] hover: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} 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';

package/src/navigation/Pagination.tsx

@@ -1,114 +1,114 @@
-import React, { forwardRef } from 'react';
-import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import { Button } from '../buttons/Button';
-import { cn } from '../utils/cn';
-
-export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  siblingCount?: number;
-}
-
-export const Pagination = forwardRef<HTMLElement, PaginationProps>(
-  ({ className, currentPage, totalPages, onPageChange, siblingCount = 1, ...props }, ref) => {
-    const generatePages = () => {
-      const totalPageNumbers = siblingCount * 2 + 5;
-
-      if (totalPages <= totalPageNumbers) {
-        return Array.from({ length: totalPages }, (_, i) => i + 1);
-      }
-
-      const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-      const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-
-      const shouldShowLeftDots = leftSiblingIndex > 2;
-      const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
-
-      if (!shouldShowLeftDots && shouldShowRightDots) {
-        const leftItemCount = 3 + 2 * siblingCount;
-        const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
-        return [...leftRange, 'DOTS', totalPages];
-      }
-
-      if (shouldShowLeftDots && !shouldShowRightDots) {
-        const rightItemCount = 3 + 2 * siblingCount;
-        const rightRange = Array.from(
-          { length: rightItemCount },
-          (_, i) => totalPages - rightItemCount + i + 1
-        );
-        return [1, 'DOTS', ...rightRange];
-      }
-
-      if (shouldShowLeftDots && shouldShowRightDots) {
-        const middleRange = Array.from(
-          { length: rightSiblingIndex - leftSiblingIndex + 1 },
-          (_, i) => leftSiblingIndex + i
-        );
-        return [1, 'DOTS', ...middleRange, 'DOTS', totalPages];
-      }
-
-      return [];
-    };
-
-    const pages = generatePages();
-
-    return (
-      <nav
-        ref={ref}
-        role="navigation"
-        aria-label="Pagination"
-        className={cn('flex items-center justify-center gap-1.5', className)}
-        {...props}
-      >
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={currentPage <= 1}
-          onClick={() => onPageChange(currentPage - 1)}
-          aria-label="Go to previous page"
-        >
-          <ChevronLeft className="w-4 h-4" />
-        </Button>
-
-        {pages.map((p, index) => {
-          if (p === 'DOTS') {
-            return (
-              <span key={`dots-${index}`} className="flex items-center justify-center w-8 h-8 text-[var(--ui-text-muted)]">
-                <MoreHorizontal className="w-4 h-4" />
-              </span>
-            );
-          }
-
-          const pageNum = Number(p);
-          const isActive = pageNum === currentPage;
-
-          return (
-            <Button
-              key={pageNum}
-              variant={isActive ? 'primary' : 'ghost'}
-              size="sm"
-              aria-current={isActive ? 'page' : undefined}
-              onClick={() => onPageChange(pageNum)}
-              className="w-8 h-8 p-0 text-xs font-semibold"
-            >
-              {pageNum}
-            </Button>
-          );
-        })}
-
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={currentPage >= totalPages}
-          onClick={() => onPageChange(currentPage + 1)}
-          aria-label="Go to next page"
-        >
-          <ChevronRight className="w-4 h-4" />
-        </Button>
-      </nav>
-    );
-  }
-);
-
-Pagination.displayName = 'Pagination';
+import React, { forwardRef } from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Button } from '../buttons/Button';
+import { cn } from '../utils/cn';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+}
+
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  ({ className, currentPage, totalPages, onPageChange, siblingCount = 1, ...props }, ref) => {
+    const generatePages = () => {
+      const totalPageNumbers = siblingCount * 2 + 5;
+
+      if (totalPages <= totalPageNumbers) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+      }
+
+      const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+      const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+      const shouldShowLeftDots = leftSiblingIndex > 2;
+      const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+
+      if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftItemCount = 3 + 2 * siblingCount;
+        const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+        return [...leftRange, 'DOTS', totalPages];
+      }
+
+      if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightItemCount = 3 + 2 * siblingCount;
+        const rightRange = Array.from(
+          { length: rightItemCount },
+          (_, i) => totalPages - rightItemCount + i + 1
+        );
+        return [1, 'DOTS', ...rightRange];
+      }
+
+      if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = Array.from(
+          { length: rightSiblingIndex - leftSiblingIndex + 1 },
+          (_, i) => leftSiblingIndex + i
+        );
+        return [1, 'DOTS', ...middleRange, 'DOTS', totalPages];
+      }
+
+      return [];
+    };
+
+    const pages = generatePages();
+
+    return (
+      <nav
+        ref={ref}
+        role="navigation"
+        aria-label="Pagination"
+        className={cn('flex items-center justify-center gap-1.5', className)}
+        {...props}
+      >
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage <= 1}
+          onClick={() => onPageChange(currentPage - 1)}
+          aria-label="Go to previous page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+
+        {pages.map((p, index) => {
+          if (p === 'DOTS') {
+            return (
+              <span key={`dots-${index}`} className="flex items-center justify-center w-8 h-8 text-[var(--ui-text-muted)]">
+                <MoreHorizontal className="w-4 h-4" />
+              </span>
+            );
+          }
+
+          const pageNum = Number(p);
+          const isActive = pageNum === currentPage;
+
+          return (
+            <Button
+              key={pageNum}
+              variant={isActive ? 'primary' : 'ghost'}
+              size="sm"
+              aria-current={isActive ? 'page' : undefined}
+              onClick={() => onPageChange(pageNum)}
+              className="w-8 h-8 p-0 text-xs font-semibold"
+            >
+              {pageNum}
+            </Button>
+          );
+        })}
+
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage >= totalPages}
+          onClick={() => onPageChange(currentPage + 1)}
+          aria-label="Go to next page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = 'Pagination';