@thangnqdev/ui 0.2.0 → 0.2.2

package/src/buttons/SplitButton.tsx

@@ -1,186 +1,186 @@
-import React, { forwardRef, useState, useRef, useEffect, useId } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { Button, ButtonProps } from './Button';
-import { cn } from '../utils/cn';
-
-export interface SplitButtonItem {
-  label: React.ReactNode;
-  icon?: React.ReactNode;
-  onClick: () => void;
-  disabled?: boolean;
-}
-
-export interface SplitButtonProps extends Omit<ButtonProps, 'onClick'> {
-  items: SplitButtonItem[];
-  onMainClick?: () => void;
-  menuAriaLabel?: string;
-}
-
-export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
-  (
-    {
-      className,
-      items,
-      onMainClick,
-      variant = 'primary',
-      size = 'md',
-      children,
-      disabled,
-      menuAriaLabel = 'More actions',
-      ...props
-    },
-    ref
-  ) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [focusedIndex, setFocusedIndex] = useState<number>(0);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const triggerBtnRef = useRef<HTMLButtonElement>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const menuId = `split-button-menu-${useId()}`;
-
-    const enabledItemsIndices = items
-      .map((item, idx) => (!item.disabled ? idx : -1))
-      .filter((idx) => idx !== -1);
-
-    useEffect(() => {
-      const handleOutside = (e: MouseEvent) => {
-        if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-          setIsOpen(false);
-        }
-      };
-      if (isOpen) {
-        document.addEventListener('mousedown', handleOutside);
-      }
-      return () => document.removeEventListener('mousedown', handleOutside);
-    }, [isOpen]);
-
-    // Auto-focus first item when menu opens
-    useEffect(() => {
-      if (isOpen && enabledItemsIndices.length > 0) {
-        setFocusedIndex(enabledItemsIndices[0]);
-        const timer = setTimeout(() => {
-          const itemEl = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])');
-          itemEl?.focus();
-        }, 10);
-        return () => clearTimeout(timer);
-      }
-    }, [isOpen]);
-
-    const handleMenuKeyDown = (e: React.KeyboardEvent) => {
-      if (!isOpen) return;
-
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
-        const nextPos = (currentPos + 1) % enabledItemsIndices.length;
-        const nextIdx = enabledItemsIndices[nextPos];
-        setFocusedIndex(nextIdx);
-        const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
-        buttons?.[nextIdx]?.focus();
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
-        const prevPos = (currentPos - 1 + enabledItemsIndices.length) % enabledItemsIndices.length;
-        const prevIdx = enabledItemsIndices[prevPos];
-        setFocusedIndex(prevIdx);
-        const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
-        buttons?.[prevIdx]?.focus();
-      } else if (e.key === 'Home') {
-        e.preventDefault();
-        if (enabledItemsIndices.length > 0) {
-          const firstIdx = enabledItemsIndices[0];
-          setFocusedIndex(firstIdx);
-          const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
-          buttons?.[firstIdx]?.focus();
-        }
-      } else if (e.key === 'End') {
-        e.preventDefault();
-        if (enabledItemsIndices.length > 0) {
-          const lastIdx = enabledItemsIndices[enabledItemsIndices.length - 1];
-          setFocusedIndex(lastIdx);
-          const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
-          buttons?.[lastIdx]?.focus();
-        }
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        setIsOpen(false);
-        triggerBtnRef.current?.focus();
-      }
-    };
-
-    return (
-      <div ref={containerRef} className={cn('relative inline-flex', className)}>
-        <div ref={ref} className="inline-flex rounded-[var(--ui-radius-md)] shadow-sm">
-          <Button
-            variant={variant}
-            size={size}
-            disabled={disabled}
-            onClick={onMainClick}
-            className="rounded-r-none border-r border-white/20 dark:border-black/20"
-            {...props}
-          >
-            {children}
-          </Button>
-
-          <Button
-            ref={triggerBtnRef}
-            variant={variant}
-            size={size}
-            disabled={disabled}
-            onClick={() => setIsOpen(!isOpen)}
-            onKeyDown={(e) => {
-              if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                setIsOpen(true);
-              }
-            }}
-            aria-expanded={isOpen}
-            aria-haspopup="menu"
-            aria-controls={isOpen ? menuId : undefined}
-            aria-label={menuAriaLabel}
-            className="rounded-l-none px-2 cursor-pointer"
-          >
-            <ChevronDown className={cn('w-4 h-4 transition-transform duration-200', isOpen && 'rotate-180')} />
-          </Button>
-        </div>
-
-        {isOpen && (
-          <div
-            ref={menuRef}
-            id={menuId}
-            role="menu"
-            aria-orientation="vertical"
-            tabIndex={-1}
-            onKeyDown={handleMenuKeyDown}
-            className="absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95 focus:outline-none"
-          >
-            {items.map((item, i) => (
-              <button
-                key={i}
-                type="button"
-                role="menuitem"
-                tabIndex={focusedIndex === i ? 0 : -1}
-                aria-disabled={item.disabled}
-                disabled={item.disabled}
-                onClick={() => {
-                  item.onClick();
-                  setIsOpen(false);
-                  triggerBtnRef.current?.focus();
-                }}
-                className={cn(
-                  'w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] focus:outline-none disabled:opacity-50 disabled:pointer-events-none transition-colors cursor-pointer',
-                  focusedIndex === i && 'bg-[var(--ui-bg-tertiary)]'
-                )}
-              >
-                {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
-                <span className="flex-1 truncate">{item.label}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-SplitButton.displayName = 'SplitButton';
+import React, { forwardRef, useState, useRef, useEffect, useId } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Button, ButtonProps } from './Button';
+import { cn } from '../utils/cn';
+
+export interface SplitButtonItem {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export interface SplitButtonProps extends Omit<ButtonProps, 'onClick'> {
+  items: SplitButtonItem[];
+  onMainClick?: () => void;
+  menuAriaLabel?: string;
+}
+
+export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
+  (
+    {
+      className,
+      items,
+      onMainClick,
+      variant = 'primary',
+      size = 'md',
+      children,
+      disabled,
+      menuAriaLabel = 'More actions',
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState<number>(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const triggerBtnRef = useRef<HTMLButtonElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const menuId = `split-button-menu-${useId()}`;
+
+    const enabledItemsIndices = items
+      .map((item, idx) => (!item.disabled ? idx : -1))
+      .filter((idx) => idx !== -1);
+
+    useEffect(() => {
+      const handleOutside = (e: MouseEvent) => {
+        if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleOutside);
+      }
+      return () => document.removeEventListener('mousedown', handleOutside);
+    }, [isOpen]);
+
+    // Auto-focus first item when menu opens
+    useEffect(() => {
+      if (isOpen && enabledItemsIndices.length > 0) {
+        setFocusedIndex(enabledItemsIndices[0]);
+        const timer = setTimeout(() => {
+          const itemEl = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])');
+          itemEl?.focus();
+        }, 10);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+
+    const handleMenuKeyDown = (e: React.KeyboardEvent) => {
+      if (!isOpen) return;
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
+        const nextPos = (currentPos + 1) % enabledItemsIndices.length;
+        const nextIdx = enabledItemsIndices[nextPos];
+        setFocusedIndex(nextIdx);
+        const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+        buttons?.[nextIdx]?.focus();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
+        const prevPos = (currentPos - 1 + enabledItemsIndices.length) % enabledItemsIndices.length;
+        const prevIdx = enabledItemsIndices[prevPos];
+        setFocusedIndex(prevIdx);
+        const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+        buttons?.[prevIdx]?.focus();
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        if (enabledItemsIndices.length > 0) {
+          const firstIdx = enabledItemsIndices[0];
+          setFocusedIndex(firstIdx);
+          const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+          buttons?.[firstIdx]?.focus();
+        }
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        if (enabledItemsIndices.length > 0) {
+          const lastIdx = enabledItemsIndices[enabledItemsIndices.length - 1];
+          setFocusedIndex(lastIdx);
+          const buttons = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+          buttons?.[lastIdx]?.focus();
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setIsOpen(false);
+        triggerBtnRef.current?.focus();
+      }
+    };
+
+    return (
+      <div ref={containerRef} className={cn('relative inline-flex', className)}>
+        <div ref={ref} className="inline-flex rounded-[var(--ui-radius-md)] shadow-sm">
+          <Button
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            onClick={onMainClick}
+            className="rounded-r-none border-r border-white/20 dark:border-black/20"
+            {...props}
+          >
+            {children}
+          </Button>
+
+          <Button
+            ref={triggerBtnRef}
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            onClick={() => setIsOpen(!isOpen)}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setIsOpen(true);
+              }
+            }}
+            aria-expanded={isOpen}
+            aria-haspopup="menu"
+            aria-controls={isOpen ? menuId : undefined}
+            aria-label={menuAriaLabel}
+            className="rounded-l-none px-2 cursor-pointer"
+          >
+            <ChevronDown className={cn('w-4 h-4 transition-transform duration-200', isOpen && 'rotate-180')} />
+          </Button>
+        </div>
+
+        {isOpen && (
+          <div
+            ref={menuRef}
+            id={menuId}
+            role="menu"
+            aria-orientation="vertical"
+            tabIndex={-1}
+            onKeyDown={handleMenuKeyDown}
+            className="absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95 focus:outline-none"
+          >
+            {items.map((item, i) => (
+              <button
+                key={i}
+                type="button"
+                role="menuitem"
+                tabIndex={focusedIndex === i ? 0 : -1}
+                aria-disabled={item.disabled}
+                disabled={item.disabled}
+                onClick={() => {
+                  item.onClick();
+                  setIsOpen(false);
+                  triggerBtnRef.current?.focus();
+                }}
+                className={cn(
+                  'w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] focus:outline-none disabled:opacity-50 disabled:pointer-events-none transition-colors cursor-pointer',
+                  focusedIndex === i && 'bg-[var(--ui-bg-tertiary)]'
+                )}
+              >
+                {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+                <span className="flex-1 truncate">{item.label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SplitButton.displayName = 'SplitButton';