Adaptive Actions

1'use client'
2 
3import {
4  createContext,
5  forwardRef,
6  useCallback,
7  useContext,
8  useEffect,
9  useId,
10  useLayoutEffect,
11  useMemo,
12  useRef,
13  useState,
14  type HTMLAttributes,
15  type ReactNode,
16} from 'react'
17import { createPortal } from 'react-dom'
18import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
19import { cn } from '@/lib/utils'
20 
21export interface ActionItem {
22  /** Stable unique identifier for the action. */
23  id: string
24  /** Accessible label — rendered as visible text or `aria-label` for icon-only. */
25  label: string
26  /** Icon rendered inside the button (decorative, `aria-hidden`). */
27  icon?: ReactNode
28  /** Disables this action. */
29  disabled?: boolean
30  /** Marks action as destructive (applies destructive color tokens). */
31  destructive?: boolean
32  /** Priority determines overflow order. Higher priority items overflow last. Default 0. */
33  priority?: number
34  /** When true, this item never overflows into the menu regardless of space. */
35  pinned?: boolean
36  /** Invoked on activation (click / Enter / Space). */
37  onSelect?: () => void
38}
39 
40export interface AdaptiveActionsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
41  /** The actions to render. */
42  actions: ActionItem[]
43  /** Accessible label for the toolbar. Defaults to 'Actions'. */
44  label?: string
45  /** Localized label for the overflow trigger button. Defaults to 'More actions'. */
46  moreLabel?: string
47  /** Render a custom trigger for the overflow menu. Receives the count of hidden items. */
48  renderMoreTrigger?: (count: number) => ReactNode
49  /** Maximum visible items before overflow — independent of inline measurement. Optional. */
50  maxVisible?: number
51}
52 
53interface AdaptiveActionsContextValue {
54  rovingIndex: number
55  setRovingIndex: (i: number) => void
56  itemCount: number
57}
58 
59const AdaptiveActionsContext = createContext<AdaptiveActionsContextValue | null>(null)
60 
61function useAdaptiveActionsCtx() {
62  const ctx = useContext(AdaptiveActionsContext)
63  if (!ctx) throw new Error('AdaptiveActions compound child used outside AdaptiveActions')
64  return ctx
65}
66 
67const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
68 
69interface OverflowMenuProps {
70  actions: ActionItem[]
71  triggerId: string
72  contentId: string
73  moreLabel: string
74  renderMoreTrigger?: (count: number) => ReactNode
75  triggerTabIndex: number
76}
77 
78function OverflowMenu({
79  actions,
80  triggerId,
81  contentId,
82  moreLabel,
83  renderMoreTrigger,
84// … truncated