@mihcm/ui 0.14.1

package/src/DropdownMenu.native.tsx

@@ -0,0 +1,258 @@
+/**
+ * DropdownMenu (React Native variant).
+ *
+ * Uses Modal for the overlay and Pressable for items.
+ * Same sub-component API as the web variant.
+ *
+ * Wiki: docs/components/DropdownMenu.md
+ */
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import {
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Context ───────────────────────────────────────────────────────── */
+
+interface DropdownMenuContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null);
+
+function useDropdownMenuContext() {
+  const ctx = useContext(DropdownMenuContext);
+  if (!ctx) throw new Error('DropdownMenu sub-components must be used within <DropdownMenu>.');
+  return ctx;
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface DropdownMenuProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}
+
+export function DropdownMenu({ open, onOpenChange, children }: DropdownMenuProps) {
+  const setOpen = useCallback(
+    (next: boolean) => {
+      onOpenChange(next);
+    },
+    [onOpenChange],
+  );
+
+  return (
+    <DropdownMenuContext.Provider value={{ open, setOpen }}>
+      {children}
+    </DropdownMenuContext.Provider>
+  );
+}
+
+/* ── Trigger ───────────────────────────────────────────────────────── */
+
+export interface DropdownMenuTriggerProps extends ClassedViewProps {
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export const DropdownMenuTrigger = forwardRef<View, DropdownMenuTriggerProps>(
+  function DropdownMenuTrigger({ className, disabled, children, ...props }, ref) {
+    const ctx = useDropdownMenuContext();
+
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!disabled, expanded: ctx.open }}
+        disabled={disabled}
+        onPress={() => {
+          if (!disabled) ctx.setOpen(!ctx.open);
+        }}
+        className={cn(
+          'flex-row items-center justify-center gap-2 rounded-lg border border-secondary bg-muted px-3 py-2',
+          disabled && 'opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <Text className="text-sm text-foreground">{children}</Text>
+        <Text className="text-xs text-muted-foreground">{'▾'}</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Content (Modal overlay) ──────────────────────────────────────── */
+
+export interface DropdownMenuContentProps extends ClassedViewProps {}
+
+export const DropdownMenuContent = forwardRef<View, DropdownMenuContentProps>(
+  function DropdownMenuContent({ className, children, ...props }, ref) {
+    const ctx = useDropdownMenuContext();
+
+    return (
+      <Modal
+        visible={ctx.open}
+        transparent
+        animationType="fade"
+        onRequestClose={() => ctx.setOpen(false)}
+        statusBarTranslucent
+      >
+        <Pressable
+          onPress={() => ctx.setOpen(false)}
+          className="flex-1 justify-center items-center bg-black/40"
+          accessibilityRole="none"
+        >
+          <Pressable onPress={(e) => e.stopPropagation()}>
+            <View
+              ref={ref}
+              accessibilityRole="menu"
+              className={cn(
+                'min-w-[200px] rounded-xl border border-border bg-card p-1 shadow-lg',
+                className,
+              )}
+              {...props}
+            >
+              {children}
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    );
+  },
+);
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+export const dropdownMenuItemVariants = cva(
+  'flex-row items-center rounded-lg px-3 py-3',
+  {
+    variants: {
+      variant: {
+        default: '',
+        destructive: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface DropdownMenuItemProps
+  extends ClassedViewProps,
+    VariantProps<typeof dropdownMenuItemVariants> {
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+}
+
+export const DropdownMenuItem = forwardRef<View, DropdownMenuItemProps>(
+  function DropdownMenuItem({ className, variant, disabled, onClick, children, ...props }, ref) {
+    const ctx = useDropdownMenuContext();
+
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="menuitem"
+        accessibilityState={{ disabled: !!disabled }}
+        disabled={disabled}
+        onPress={() => {
+          if (!disabled) {
+            onClick?.();
+            ctx.setOpen(false);
+          }
+        }}
+        className={cn(
+          dropdownMenuItemVariants({ variant }),
+          disabled && 'opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <Text
+          className={cn(
+            'flex-1 text-sm',
+            variant === 'destructive' ? 'text-destructive' : 'text-foreground',
+          )}
+          numberOfLines={1}
+        >
+          {children}
+        </Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Group ─────────────────────────────────────────────────────────── */
+
+export interface DropdownMenuGroupProps extends ClassedViewProps {}
+
+export const DropdownMenuGroup = forwardRef<View, DropdownMenuGroupProps>(
+  function DropdownMenuGroup({ className, ...props }, ref) {
+    return <View ref={ref} className={cn('py-1', className)} {...props} />;
+  },
+);
+
+/* ── Label ─────────────────────────────────────────────────────────── */
+
+export interface DropdownMenuLabelProps extends ClassedViewProps {
+  children: ReactNode;
+}
+
+export const DropdownMenuLabel = forwardRef<View, DropdownMenuLabelProps>(
+  function DropdownMenuLabel({ className, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('px-3 py-1.5', className)} {...props}>
+        <Text className="text-xs font-semibold text-muted-foreground">{children}</Text>
+      </View>
+    );
+  },
+);
+
+/* ── Separator ─────────────────────────────────────────────────────── */
+
+export interface DropdownMenuSeparatorProps extends ClassedViewProps {}
+
+export const DropdownMenuSeparator = forwardRef<View, DropdownMenuSeparatorProps>(
+  function DropdownMenuSeparator({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('my-1 h-px bg-border', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Shortcut ─────────────────────────────────────────────────────── */
+
+export interface DropdownMenuShortcutProps extends ClassedViewProps {
+  children: ReactNode;
+}
+
+export const DropdownMenuShortcut = forwardRef<View, DropdownMenuShortcutProps>(
+  function DropdownMenuShortcut({ className, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('ml-auto pl-4', className)} {...props}>
+        <Text className="text-xs tracking-widest text-muted-foreground">{children}</Text>
+      </View>
+    );
+  },
+);

package/src/DropdownMenu.tsx

@@ -0,0 +1,387 @@
+'use client';
+
+/**
+ * DropdownMenu (web variant — React DOM).
+ *
+ * A menu of actions triggered by a button click. Composable sub-components.
+ *
+ * Usage:
+ *   <DropdownMenu open={open} onOpenChange={setOpen}>
+ *     <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+ *     <DropdownMenuContent>
+ *       <DropdownMenuItem onClick={handleEdit}>Edit</DropdownMenuItem>
+ *       <DropdownMenuSeparator />
+ *       <DropdownMenuItem variant="destructive" onClick={handleDelete}>Delete</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenu>
+ *
+ * Controlled-only: pass `open` / `onOpenChange`.
+ * Keyboard: ArrowDown/Up navigate items, Enter/Space activates, Escape closes.
+ * WCAG 2.1 AA: role="menu" on content, role="menuitem" on items.
+ *
+ * Wiki: docs/components/DropdownMenu.md
+ */
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ── Context ───────────────────────────────────────────────────────── */
+
+interface DropdownMenuContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  setTriggerRef: (el: HTMLButtonElement | null) => void;
+}
+
+const DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null);
+
+function useDropdownMenuContext() {
+  const ctx = useContext(DropdownMenuContext);
+  if (!ctx) throw new Error('DropdownMenu sub-components must be used within <DropdownMenu>.');
+  return ctx;
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface DropdownMenuProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}
+
+export function DropdownMenu({ open, onOpenChange, children }: DropdownMenuProps) {
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const setTriggerRef = useCallback((el: HTMLButtonElement | null) => {
+    triggerRef.current = el;
+  }, []);
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      onOpenChange(next);
+    },
+    [onOpenChange],
+  );
+
+  return (
+    <DropdownMenuContext.Provider value={{ open, setOpen, triggerRef, setTriggerRef }}>
+      <div className="relative inline-block">{children}</div>
+    </DropdownMenuContext.Provider>
+  );
+}
+
+/* ── Trigger ───────────────────────────────────────────────────────── */
+
+export interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+  disabled?: boolean | undefined;
+}
+
+export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(
+  function DropdownMenuTrigger({ className, disabled, children, ...props }, ref) {
+    const ctx = useDropdownMenuContext();
+
+    const handleClick = useCallback(() => {
+      if (disabled) return;
+      ctx.setOpen(!ctx.open);
+    }, [ctx, disabled]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (!ctx.open) ctx.setOpen(true);
+        }
+      },
+      [ctx],
+    );
+
+    // Merge refs
+    const setRef = useCallback(
+      (el: HTMLButtonElement | null) => {
+        ctx.setTriggerRef(el);
+        if (typeof ref === 'function') ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el;
+      },
+      [ctx, ref],
+    );
+
+    return (
+      <button
+        ref={setRef}
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={ctx.open}
+        disabled={disabled}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'inline-flex items-center justify-center gap-2 rounded-lg border border-secondary bg-muted px-3 py-2 text-body-sm text-foreground',
+          'transition-colors duration-150',
+          'hover:bg-muted/80',
+          'focus-visible:outline-none focus-visible:border-primary',
+          'disabled:pointer-events-none disabled:opacity-50',
+          'select-none whitespace-nowrap',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <svg
+          aria-hidden
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          className={cn(
+            'h-4 w-4 shrink-0 opacity-50 transition-transform duration-200',
+            ctx.open && 'rotate-180',
+          )}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6l4 4 4-4" />
+        </svg>
+      </button>
+    );
+  },
+);
+
+/* ── Content ───────────────────────────────────────────────────────── */
+
+export interface DropdownMenuContentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  function DropdownMenuContent({ className, children, ...props }, ref) {
+    const ctx = useDropdownMenuContext();
+    const contentRef = useRef<HTMLDivElement | null>(null);
+    const focusedIndexRef = useRef(-1);
+
+    // Close on click outside
+    useEffect(() => {
+      if (!ctx.open) return;
+      function handleClickOutside(e: MouseEvent) {
+        const target = e.target as Node;
+        if (
+          contentRef.current &&
+          !contentRef.current.contains(target) &&
+          ctx.triggerRef.current &&
+          !ctx.triggerRef.current.contains(target)
+        ) {
+          ctx.setOpen(false);
+        }
+      }
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [ctx]);
+
+    // Keyboard navigation within the menu
+    useEffect(() => {
+      if (!ctx.open) return;
+      function handleKeyDown(e: KeyboardEvent) {
+        const items = contentRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])');
+        if (!items?.length) return;
+
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          ctx.setOpen(false);
+          ctx.triggerRef.current?.focus();
+          return;
+        }
+
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          focusedIndexRef.current = Math.min(focusedIndexRef.current + 1, items.length - 1);
+          items[focusedIndexRef.current]?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          focusedIndexRef.current = Math.max(focusedIndexRef.current - 1, 0);
+          items[focusedIndexRef.current]?.focus();
+        }
+      }
+      document.addEventListener('keydown', handleKeyDown);
+      return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [ctx]);
+
+    // Focus first item on open, return focus to trigger on close
+    useEffect(() => {
+      if (!ctx.open) return;
+      focusedIndexRef.current = -1;
+      // Small timeout to allow the menu to render before focusing
+      const id = requestAnimationFrame(() => {
+        const first = contentRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])');
+        first?.focus();
+        if (first) focusedIndexRef.current = 0;
+      });
+      return () => cancelAnimationFrame(id);
+    }, [ctx.open]);
+
+    // Return focus to trigger on close
+    useEffect(() => {
+      if (ctx.open) return;
+      // Only return focus if we were previously open (the trigger exists)
+      ctx.triggerRef.current?.focus();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ctx.open]);
+
+    // Merge refs
+    const setRef = useCallback(
+      (el: HTMLDivElement | null) => {
+        contentRef.current = el;
+        if (typeof ref === 'function') ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      },
+      [ref],
+    );
+
+    if (!ctx.open) return null;
+
+    return (
+      <div
+        ref={setRef}
+        role="menu"
+        className={cn(
+          'absolute left-0 top-full z-50 mt-1 min-w-[8rem] overflow-hidden rounded-lg',
+          'border border-border bg-card text-card-foreground shadow-md',
+          'animate-dropdown-in',
+          className,
+        )}
+        {...props}
+      >
+        <div className="p-1">{children}</div>
+      </div>
+    );
+  },
+);
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+export const dropdownMenuItemVariants = cva(
+  'relative flex cursor-pointer items-center rounded-md px-2 py-1.5 text-body-sm outline-none ' +
+    'transition-colors duration-150 ' +
+    'select-none',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-muted focus:bg-muted',
+        destructive:
+          'text-destructive hover:bg-destructive/10 focus:bg-destructive/10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface DropdownMenuItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>,
+    VariantProps<typeof dropdownMenuItemVariants> {
+  disabled?: boolean | undefined;
+  onClick?: (() => void) | undefined;
+}
+
+export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
+  function DropdownMenuItem({ className, variant, disabled, onClick, children, ...props }, ref) {
+    const ctx = useDropdownMenuContext();
+
+    const handleClick = useCallback(() => {
+      if (disabled) return;
+      onClick?.();
+      ctx.setOpen(false);
+    }, [ctx, disabled, onClick]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      [handleClick],
+    );
+
+    return (
+      <div
+        ref={ref}
+        role="menuitem"
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? undefined : -1}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          dropdownMenuItemVariants({ variant }),
+          disabled && 'pointer-events-none opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/* ── Group ─────────────────────────────────────────────────────────── */
+
+export interface DropdownMenuGroupProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupProps>(
+  function DropdownMenuGroup({ className, ...props }, ref) {
+    return <div ref={ref} role="group" className={cn('py-1', className)} {...props} />;
+  },
+);
+
+/* ── Label ─────────────────────────────────────────────────────────── */
+
+export interface DropdownMenuLabelProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const DropdownMenuLabel = forwardRef<HTMLDivElement, DropdownMenuLabelProps>(
+  function DropdownMenuLabel({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('px-2 py-1.5 text-xs font-semibold text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Separator ─────────────────────────────────────────────────────── */
+
+export interface DropdownMenuSeparatorProps extends HTMLAttributes<HTMLHRElement> {}
+
+export const DropdownMenuSeparator = forwardRef<HTMLHRElement, DropdownMenuSeparatorProps>(
+  function DropdownMenuSeparator({ className, ...props }, ref) {
+    return (
+      <hr
+        ref={ref}
+        className={cn('-mx-1 my-1 border-t border-border', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Shortcut ─────────────────────────────────────────────────────── */
+
+export interface DropdownMenuShortcutProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const DropdownMenuShortcut = forwardRef<HTMLSpanElement, DropdownMenuShortcutProps>(
+  function DropdownMenuShortcut({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        className={cn('ml-auto pl-4 text-xs tracking-widest text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);