@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/overlay/CommandPalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.js","sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\nimport {\n  defaultCommandFilter,\n  filterCommandGroups,\n  firstEnabledIndex,\n  flattenCommands,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  type CommandFilter,\n  type CommandGroup,\n  type CommandItem,\n} from \"./CommandPalette.model\";\n\nexport type {\n  CommandFilter,\n  CommandGroup,\n  CommandItem,\n  CommandSelectContext,\n} from \"./CommandPalette.model\";\n\nconst SIZE_CLASS = {\n  md: \"max-w-[40rem]\",\n  lg: \"max-w-[48rem]\",\n} as const;\n\nexport type CommandPaletteProps = {\n  /**\n   * Controls visibility. Omit to run uncontrolled — the palette then owns its\n   * open state and the built-in hotkey works with no wiring beyond mounting it.\n   */\n  open?: boolean;\n  /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */\n  onOpenChange?: (open: boolean) => void;\n  /** Command groups, rendered top to bottom in array order. */\n  groups: CommandGroup[];\n  /** Controlled query. Omit to let the palette own the input. */\n  query?: string;\n  /** Called with the next query on every keystroke. Required for server-side search. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Global shortcut that opens (and, while open, closes) the palette, in\n   * `useHotkey` syntax — `\"mod+k\"` by default, where `mod` is ⌘ on macOS and\n   * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.\n   */\n  hotkey?: string | null;\n  /** Ghost text in the search input. Defaults to \"Type a command or search…\". */\n  placeholder?: string;\n  /** Shows a loading row instead of the empty state while results are in flight. */\n  loading?: boolean;\n  /** Replaces the default \"No results\" body. */\n  emptyState?: ReactNode;\n  /** Non-interactive hint strip pinned below the list. */\n  footer?: ReactNode;\n  /**\n   * How rows are matched. Defaults to a case-insensitive substring match over\n   * label, description and keywords, ranked by hit position. Pass `false` when\n   * the caller already filtered `groups` server-side.\n   */\n  filter?: CommandFilter | false;\n  /** Fallback handler for items with no own `onSelect`. */\n  onSelect?: (context: { item: CommandItem; query: string; close: () => void }) => void;\n  /** Close after a successful activation. Defaults to true. */\n  closeOnSelect?: boolean;\n  /** Clear the query when the palette closes. Defaults to true. */\n  resetQueryOnClose?: boolean;\n  /** Panel width preset. Defaults to \"md\". */\n  size?: \"md\" | \"lg\";\n  /** Distance from the viewport top. Defaults to \"12vh\". Applied as an inline style. */\n  topOffset?: string | number;\n  /** Max height of the scrolling list. Defaults to \"min(24rem, 50dvh)\". Inline style. */\n  listMaxHeight?: string | number;\n  /** Accessible name for the dialog. Defaults to \"Command palette\". */\n  ariaLabel?: string;\n  /** Classes applied to the palette panel. */\n  className?: string;\n};\n\n/**\n * A ⌘K command palette: a top-anchored overlay with a search field over a\n * grouped, keyboard-navigable command list.\n *\n * It renders its own portal rather than building on `Modal`, which centres its\n * panel, focuses the dialog element instead of an input, forces body padding,\n * and pins an inline max-height — none of which a palette can override. The\n * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the\n * `zIndex` scale), so a palette opened over a modal sits above it and Escape\n * still dismisses exactly one layer.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  query,\n  onQueryChange,\n  hotkey = \"mod+k\",\n  placeholder = \"Type a command or search…\",\n  loading,\n  emptyState,\n  footer,\n  filter = defaultCommandFilter,\n  onSelect,\n  closeOnSelect = true,\n  resetQueryOnClose = true,\n  size = \"md\",\n  topOffset = \"12vh\",\n  listMaxHeight = \"min(24rem, 50dvh)\",\n  ariaLabel = \"Command palette\",\n  className,\n}: CommandPaletteProps) {\n  const baseId = useId();\n  const [selfOpen, setSelfOpen] = useState(false);\n  const [selfQuery, setSelfQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? selfOpen;\n  const currentQuery = query ?? selfQuery;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setSelfOpen(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  const setQuery = useCallback(\n    (next: string) => {\n      if (query === undefined) setSelfQuery(next);\n      onQueryChange?.(next);\n    },\n    [query, onQueryChange],\n  );\n\n  const visibleGroups = useMemo(\n    () => filterCommandGroups(groups, currentQuery, filter),\n    [groups, currentQuery, filter],\n  );\n  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);\n\n  // Priority keeps the palette ahead of any page-level ⌘K search field, whose\n  // binding would otherwise win purely by mounting later.\n  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });\n  useEscapeLayer(isOpen, () => setOpen(false));\n\n  const { depth } = useModalStack(isOpen);\n\n  // Enter-runs-the-top-result is the point of a palette, so the active row\n  // resets to the first selectable one whenever the result set changes.\n  useEffect(() => {\n    setActiveIndex(firstEnabledIndex(items));\n  }, [items]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      if (resetQueryOnClose && query === undefined) setSelfQuery(\"\");\n      restoreFocusRef.current?.focus?.();\n      restoreFocusRef.current = null;\n      return;\n    }\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    inputRef.current?.focus();\n  }, [isOpen, resetQueryOnClose, query]);\n\n  // Keep the active row in view without stealing focus from the input.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const option = listRef.current?.querySelectorAll('[role=\"option\"]')[activeIndex];\n    // jsdom does not implement scrollIntoView; scrolling is a progressive\n    // enhancement, so skip it rather than crash a consumer's test run.\n    if (option instanceof HTMLElement && typeof option.scrollIntoView === \"function\") {\n      option.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  const optionId = useCallback((item: CommandItem) => `${baseId}-option-${item.id}`, [baseId]);\n\n  const activate = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      const close = () => setOpen(false);\n      const context = { item, query: currentQuery.trim(), close };\n      if (item.onSelect) item.onSelect(context);\n      else onSelect?.(context);\n      if (closeOnSelect) close();\n    },\n    [currentQuery, onSelect, closeOnSelect, setOpen],\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabledIndex(items));\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabledIndex(items));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);\n        const item = index >= 0 ? items[index] : undefined;\n        if (item) activate(item);\n        break;\n      }\n      case \"Tab\":\n        // Nothing else in the panel is focusable, and letting Tab escape an\n        // aria-modal dialog would strand focus behind the backdrop.\n        if (!footer) event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;\n  const listId = `${baseId}-list`;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex justify-center p-density-4\",\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      role=\"presentation\"\n      onClick={() => setOpen(false)}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className={cn(\n          \"flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          SIZE_CLASS[size],\n          className,\n        )}\n        style={{ marginTop: topOffset }}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <div className=\"flex items-center gap-density-2 border-b border-border px-density-3\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeItem ? optionId(activeItem) : undefined}\n            aria-label={ariaLabel}\n            value={currentQuery}\n            placeholder={placeholder}\n            onChange={(event) => setQuery(event.target.value)}\n            onKeyDown={onKeyDown}\n            className=\"h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder\"\n          />\n        </div>\n\n        <CommandPaletteList\n          groups={visibleGroups}\n          items={items}\n          activeIndex={activeIndex}\n          listId={listId}\n          optionId={optionId}\n          onActivate={activate}\n          onHover={setActiveIndex}\n          listRef={listRef}\n          loading={loading}\n          emptyState={emptyState}\n          listMaxHeight={listMaxHeight}\n        />\n\n        {footer && (\n          <div className=\"border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return createPortal(overlay, document.body);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommandPalette.js","sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\nimport {\n  defaultCommandFilter,\n  filterCommandGroups,\n  firstEnabledIndex,\n  flattenCommands,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  type CommandFilter,\n  type CommandGroup,\n  type CommandItem,\n} from \"./CommandPalette.model\";\n\nexport type {\n  CommandFilter,\n  CommandGroup,\n  CommandItem,\n  CommandSelectContext,\n} from \"./CommandPalette.model\";\n\nconst SIZE_CLASS = {\n  md: \"max-w-[40rem]\",\n  lg: \"max-w-[48rem]\",\n} as const;\n\nexport type CommandPaletteProps = {\n  /**\n   * Controls visibility. Omit to run uncontrolled — the palette then owns its\n   * open state and the built-in hotkey works with no wiring beyond mounting it.\n   */\n  open?: boolean;\n  /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */\n  onOpenChange?: (open: boolean) => void;\n  /** Command groups, rendered top to bottom in array order. */\n  groups: CommandGroup[];\n  /** Controlled query. Omit to let the palette own the input. */\n  query?: string;\n  /** Called with the next query on every keystroke. Required for server-side search. */\n  onQueryChange?: (query: string) => void;\n  /** Replaces the built-in search field while preserving the palette and result list. */\n  customInput?: ReactNode;\n  /** Changing this value focuses the result list for keyboard selection. */\n  focusListKey?: number;\n  /**\n   * Global shortcut that opens (and, while open, closes) the palette, in\n   * `useHotkey` syntax — `\"mod+k\"` by default, where `mod` is ⌘ on macOS and\n   * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.\n   */\n  hotkey?: string | null;\n  /** Ghost text in the search input. Defaults to \"Type a command or search…\". */\n  placeholder?: string;\n  /** Shows a loading row instead of the empty state while results are in flight. */\n  loading?: boolean;\n  /** Replaces the default \"No results\" body. */\n  emptyState?: ReactNode;\n  /** Non-interactive hint strip pinned below the list. */\n  footer?: ReactNode;\n  /**\n   * How rows are matched. Defaults to a case-insensitive substring match over\n   * label, description and keywords, ranked by hit position. Pass `false` when\n   * the caller already filtered `groups` server-side.\n   */\n  filter?: CommandFilter | false;\n  /** Fallback handler for items with no own `onSelect`. */\n  onSelect?: (context: { item: CommandItem; query: string; close: () => void }) => void;\n  /** Close after a successful activation. Defaults to true. */\n  closeOnSelect?: boolean;\n  /** Clear the query when the palette closes. Defaults to true. */\n  resetQueryOnClose?: boolean;\n  /** Panel width preset. Defaults to \"md\". */\n  size?: \"md\" | \"lg\";\n  /** Distance from the viewport top. Defaults to \"12vh\". Applied as an inline style. */\n  topOffset?: string | number;\n  /** Max height of the scrolling list. Defaults to \"min(24rem, 50dvh)\". Inline style. */\n  listMaxHeight?: string | number;\n  /** Accessible name for the dialog. Defaults to \"Command palette\". */\n  ariaLabel?: string;\n  /** Classes applied to the palette panel. */\n  className?: string;\n};\n\n/**\n * A ⌘K command palette: a top-anchored overlay with a search field over a\n * grouped, keyboard-navigable command list.\n *\n * It renders its own portal rather than building on `Modal`, which centres its\n * panel, focuses the dialog element instead of an input, forces body padding,\n * and pins an inline max-height — none of which a palette can override. The\n * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the\n * `zIndex` scale), so a palette opened over a modal sits above it and Escape\n * still dismisses exactly one layer.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  query,\n  onQueryChange,\n  customInput,\n  focusListKey,\n  hotkey = \"mod+k\",\n  placeholder = \"Type a command or search…\",\n  loading,\n  emptyState,\n  footer,\n  filter = defaultCommandFilter,\n  onSelect,\n  closeOnSelect = true,\n  resetQueryOnClose = true,\n  size = \"md\",\n  topOffset = \"12vh\",\n  listMaxHeight = \"min(24rem, 50dvh)\",\n  ariaLabel = \"Command palette\",\n  className,\n}: CommandPaletteProps) {\n  const baseId = useId();\n  const [selfOpen, setSelfOpen] = useState(false);\n  const [selfQuery, setSelfQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? selfOpen;\n  const currentQuery = query ?? selfQuery;\n  const usesCustomInput = customInput !== undefined;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setSelfOpen(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  const setQuery = useCallback(\n    (next: string) => {\n      if (query === undefined) setSelfQuery(next);\n      onQueryChange?.(next);\n    },\n    [query, onQueryChange],\n  );\n\n  const visibleGroups = useMemo(\n    () => filterCommandGroups(groups, currentQuery, filter),\n    [groups, currentQuery, filter],\n  );\n  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);\n\n  // Priority keeps the palette ahead of any page-level ⌘K search field, whose\n  // binding would otherwise win purely by mounting later.\n  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });\n  useEscapeLayer(isOpen, () => setOpen(false));\n\n  const { depth } = useModalStack(isOpen);\n\n  // Enter-runs-the-top-result is the point of a palette, so the active row\n  // resets to the first selectable one whenever the result set changes.\n  useEffect(() => {\n    setActiveIndex(firstEnabledIndex(items));\n  }, [items]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      if (resetQueryOnClose && query === undefined) setSelfQuery(\"\");\n      restoreFocusRef.current?.focus?.();\n      restoreFocusRef.current = null;\n      return;\n    }\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    inputRef.current?.focus();\n  }, [isOpen, resetQueryOnClose, query, usesCustomInput]);\n\n  useEffect(() => {\n    if (isOpen && focusListKey !== undefined) listRef.current?.focus();\n  }, [isOpen, focusListKey]);\n\n  // Keep the active row in view without stealing focus from the input.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const option = listRef.current?.querySelectorAll('[role=\"option\"]')[activeIndex];\n    // jsdom does not implement scrollIntoView; scrolling is a progressive\n    // enhancement, so skip it rather than crash a consumer's test run.\n    if (option instanceof HTMLElement && typeof option.scrollIntoView === \"function\") {\n      option.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  const optionId = useCallback((item: CommandItem) => `${baseId}-option-${item.id}`, [baseId]);\n\n  const activate = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      const close = () => setOpen(false);\n      const context = { item, query: currentQuery.trim(), close };\n      if (item.onSelect) item.onSelect(context);\n      else onSelect?.(context);\n      if (closeOnSelect) close();\n    },\n    [currentQuery, onSelect, closeOnSelect, setOpen],\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabledIndex(items));\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabledIndex(items));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);\n        const item = index >= 0 ? items[index] : undefined;\n        if (item) activate(item);\n        break;\n      }\n      case \"Tab\":\n        // Nothing else in the panel is focusable, and letting Tab escape an\n        // aria-modal dialog would strand focus behind the backdrop.\n        if (!footer) event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;\n  const listId = `${baseId}-list`;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex justify-center p-density-4\",\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      role=\"presentation\"\n      onClick={() => setOpen(false)}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className={cn(\n          \"flex h-fit w-full flex-col rounded-lg border border-border bg-background shadow-xl\",\n          usesCustomInput ? \"overflow-visible\" : \"overflow-hidden\",\n          SIZE_CLASS[size],\n          className,\n        )}\n        style={{ marginTop: topOffset }}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {!usesCustomInput ? <div className=\"flex items-center gap-density-2 border-b border-border px-density-3\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeItem ? optionId(activeItem) : undefined}\n            aria-label={ariaLabel}\n            value={currentQuery}\n            placeholder={placeholder}\n            onChange={(event) => setQuery(event.target.value)}\n            onKeyDown={onKeyDown}\n            className=\"h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder\"\n          />\n        </div> : <div className=\"border-b border-border p-density-3\">{customInput}</div>}\n\n        <CommandPaletteList\n          groups={visibleGroups}\n          items={items}\n          activeIndex={activeIndex}\n          listId={listId}\n          optionId={optionId}\n          onActivate={activate}\n          onHover={setActiveIndex}\n          onKeyDown={onKeyDown}\n          activeItemId={activeItem ? optionId(activeItem) : undefined}\n          listRef={listRef}\n          loading={loading}\n          emptyState={emptyState}\n          listMaxHeight={listMaxHeight}\n        />\n\n        {footer && (\n          <div className=\"border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return createPortal(overlay, document.body);\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/CommandPaletteList.cjs

@@ -12,6 +12,8 @@ function CommandPaletteList({
   optionId,
   onActivate,
   onHover,
+  onKeyDown,
+  activeItemId,
   listRef,
   loading,
   emptyState,
@@ -25,6 +27,9 @@ function CommandPaletteList({
       id: listId,
       role: "listbox",
       "aria-label": "Commands",
+      "aria-activedescendant": activeItemId,
+      tabIndex: -1,
+      onKeyDown,
       className: "overflow-y-auto overscroll-contain py-density-1",
       style: { maxHeight: listMaxHeight },
       children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-3 text-sm text-muted-foreground", children: "Searching…" }) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-4 text-center text-sm text-muted-foreground", children: emptyState ?? "No results" }) : groups.map((group) => {

package/dist/overlay/CommandPaletteList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteList.cjs","sources":["../../src/overlay/CommandPaletteList.tsx"],"sourcesContent":["import { Fragment, type RefObject } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport type { CommandGroup, CommandItem } from \"./CommandPalette.model\";\n\nexport type CommandPaletteListProps = {\n  groups: CommandGroup[];\n  /** Flattened rows, in render order — index space for `activeIndex`. */\n  items: CommandItem[];\n  activeIndex: number;\n  listId: string;\n  optionId: (item: CommandItem) => string;\n  onActivate: (item: CommandItem) => void;\n  onHover: (index: number) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n  loading?: boolean | undefined;\n  emptyState?: React.ReactNode;\n  listMaxHeight: string | number;\n};\n\n/**\n * The palette's grouped listbox. Headings are `role=\"presentation\"` so the\n * option index space stays contiguous — the same trick Combobox uses to scroll\n * by `[role=\"option\"]` index.\n */\nexport function CommandPaletteList({\n  groups,\n  items,\n  activeIndex,\n  listId,\n  optionId,\n  onActivate,\n  onHover,\n  listRef,\n  loading,\n  emptyState,\n  listMaxHeight,\n}: CommandPaletteListProps) {\n  // A flat cursor walked alongside the nested render so each row knows its index\n  // in the flattened list without a lookup.\n  let flatIndex = -1;\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      aria-label=\"Commands\"\n      className=\"overflow-y-auto overscroll-contain py-density-1\"\n      style={{ maxHeight: listMaxHeight }}\n    >\n      {loading ? (\n        <div className=\"px-density-3 py-density-3 text-sm text-muted-foreground\">Searching…</div>\n      ) : items.length === 0 ? (\n        <div className=\"px-density-3 py-density-4 text-center text-sm text-muted-foreground\">\n          {emptyState ?? \"No results\"}\n        </div>\n      ) : (\n        groups.map((group) => {\n          const headingId = `${listId}-group-${group.id}`;\n          return (\n            <Fragment key={group.id}>\n              <div role=\"group\" aria-labelledby={group.heading ? headingId : undefined}>\n                {group.heading && (\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className=\"px-density-3 pb-1 pt-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground\"\n                  >\n                    {group.heading}\n                  </div>\n                )}\n                {group.items.map((item) => {\n                  flatIndex += 1;\n                  const index = flatIndex;\n                  const active = index === activeIndex;\n                  return (\n                    <div\n                      key={item.id}\n                      id={optionId(item)}\n                      role=\"option\"\n                      aria-selected={active}\n                      aria-disabled={item.disabled || undefined}\n                      // onMouseMove, not onMouseEnter: keyboard navigation\n                      // scrolls rows under a stationary cursor, and mouseenter\n                      // would yank the highlight back to wherever it sits.\n                      onMouseMove={() => {\n                        if (!item.disabled) onHover(index);\n                      }}\n                      onClick={() => {\n                        if (!item.disabled) onActivate(item);\n                      }}\n                      className={cn(\n                        \"mx-density-1 flex cursor-pointer items-center gap-density-2 rounded-md px-density-2 py-1.5 text-sm\",\n                        active && \"bg-accent text-accent-foreground\",\n                        item.disabled && \"cursor-not-allowed opacity-50\",\n                      )}\n                    >\n                      {item.icon !== undefined && (\n                        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\">\n                          <Icon\n                            {...(typeof item.icon === \"string\"\n                              ? { name: item.icon }\n                              : { icon: item.icon })}\n                          />\n                        </span>\n                      )}\n                      <span className=\"min-w-0 flex-1 truncate\">\n                        {item.label}\n                        {item.description && (\n                          <span className=\"ml-density-2 text-xs text-muted-foreground\">\n                            {item.description}\n                          </span>\n                        )}\n                      </span>\n                      {item.trailing}\n                      {item.shortcut && (\n                        <kbd className=\"shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground\">\n                          {item.shortcut}\n                        </kbd>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })\n      )}\n    </div>\n  );\n}\n"],"names":["jsx","Fragment","jsxs","cn","Icon"],"mappings":";;;;;;AAyBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAG1B,MAAI,YAAY;AAEhB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MACV,OAAO,EAAE,WAAW,cAAA;AAAA,MAEnB,UAAA,yCACE,OAAA,EAAI,WAAU,2DAA0D,UAAA,aAAA,CAAU,IACjF,MAAM,WAAW,mCAClB,OAAA,EAAI,WAAU,uEACZ,UAAA,cAAc,aAAA,CACjB,IAEA,OAAO,IAAI,CAAC,UAAU;AACpB,cAAM,YAAY,GAAG,MAAM,UAAU,MAAM,EAAE;AAC7C,eACEA,2BAAAA,IAACC,MAAAA,UAAA,EACC,UAAAC,2BAAAA,KAAC,OAAA,EAAI,MAAK,SAAQ,mBAAiB,MAAM,UAAU,YAAY,QAC5D,UAAA;AAAA,UAAA,MAAM,WACLF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAA,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAGV,MAAM,MAAM,IAAI,CAAC,SAAS;AACzB,yBAAa;AACb,kBAAM,QAAQ;AACd,kBAAM,SAAS,UAAU;AACzB,mBACEE,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,IAAI,SAAS,IAAI;AAAA,gBACjB,MAAK;AAAA,gBACL,iBAAe;AAAA,gBACf,iBAAe,KAAK,YAAY;AAAA,gBAIhC,aAAa,MAAM;AACjB,sBAAI,CAAC,KAAK,SAAU,SAAQ,KAAK;AAAA,gBACnC;AAAA,gBACA,SAAS,MAAM;AACb,sBAAI,CAAC,KAAK,SAAU,YAAW,IAAI;AAAA,gBACrC;AAAA,gBACA,WAAWC,MAAAA;AAAAA,kBACT;AAAA,kBACA,UAAU;AAAA,kBACV,KAAK,YAAY;AAAA,gBAAA;AAAA,gBAGlB,UAAA;AAAA,kBAAA,KAAK,SAAS,UACbH,2BAAAA,IAAC,QAAA,EAAK,WAAU,2EACd,UAAAA,2BAAAA;AAAAA,oBAACI,KAAAA;AAAAA,oBAAA;AAAA,sBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,oBAAK;AAAA,kBAAA,GAE1B;AAAA,kBAEFF,2BAAAA,KAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,oBAAA,KAAK;AAAA,oBACL,KAAK,eACJF,2BAAAA,IAAC,UAAK,WAAU,8CACb,eAAK,YAAA,CACR;AAAA,kBAAA,GAEJ;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK,YACJA,2BAAAA,IAAC,SAAI,WAAU,4GACZ,eAAK,SAAA,CACR;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzCG,KAAK;AAAA,YAAA;AAAA,UA6ChB,CAAC;AAAA,QAAA,GACH,EAAA,GA/Da,MAAM,EAgErB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAIT;;"}
+{"version":3,"file":"CommandPaletteList.cjs","sources":["../../src/overlay/CommandPaletteList.tsx"],"sourcesContent":["import { Fragment, type KeyboardEventHandler, type RefObject } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport type { CommandGroup, CommandItem } from \"./CommandPalette.model\";\n\nexport type CommandPaletteListProps = {\n  groups: CommandGroup[];\n  /** Flattened rows, in render order — index space for `activeIndex`. */\n  items: CommandItem[];\n  activeIndex: number;\n  listId: string;\n  optionId: (item: CommandItem) => string;\n  onActivate: (item: CommandItem) => void;\n  onHover: (index: number) => void;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement>;\n  activeItemId?: string | undefined;\n  listRef: RefObject<HTMLDivElement | null>;\n  loading?: boolean | undefined;\n  emptyState?: React.ReactNode;\n  listMaxHeight: string | number;\n};\n\n/**\n * The palette's grouped listbox. Headings are `role=\"presentation\"` so the\n * option index space stays contiguous — the same trick Combobox uses to scroll\n * by `[role=\"option\"]` index.\n */\nexport function CommandPaletteList({\n  groups,\n  items,\n  activeIndex,\n  listId,\n  optionId,\n  onActivate,\n  onHover,\n  onKeyDown,\n  activeItemId,\n  listRef,\n  loading,\n  emptyState,\n  listMaxHeight,\n}: CommandPaletteListProps) {\n  // A flat cursor walked alongside the nested render so each row knows its index\n  // in the flattened list without a lookup.\n  let flatIndex = -1;\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      aria-label=\"Commands\"\n      aria-activedescendant={activeItemId}\n      tabIndex={-1}\n      onKeyDown={onKeyDown}\n      className=\"overflow-y-auto overscroll-contain py-density-1\"\n      style={{ maxHeight: listMaxHeight }}\n    >\n      {loading ? (\n        <div className=\"px-density-3 py-density-3 text-sm text-muted-foreground\">Searching…</div>\n      ) : items.length === 0 ? (\n        <div className=\"px-density-3 py-density-4 text-center text-sm text-muted-foreground\">\n          {emptyState ?? \"No results\"}\n        </div>\n      ) : (\n        groups.map((group) => {\n          const headingId = `${listId}-group-${group.id}`;\n          return (\n            <Fragment key={group.id}>\n              <div role=\"group\" aria-labelledby={group.heading ? headingId : undefined}>\n                {group.heading && (\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className=\"px-density-3 pb-1 pt-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground\"\n                  >\n                    {group.heading}\n                  </div>\n                )}\n                {group.items.map((item) => {\n                  flatIndex += 1;\n                  const index = flatIndex;\n                  const active = index === activeIndex;\n                  return (\n                    <div\n                      key={item.id}\n                      id={optionId(item)}\n                      role=\"option\"\n                      aria-selected={active}\n                      aria-disabled={item.disabled || undefined}\n                      // onMouseMove, not onMouseEnter: keyboard navigation\n                      // scrolls rows under a stationary cursor, and mouseenter\n                      // would yank the highlight back to wherever it sits.\n                      onMouseMove={() => {\n                        if (!item.disabled) onHover(index);\n                      }}\n                      onClick={() => {\n                        if (!item.disabled) onActivate(item);\n                      }}\n                      className={cn(\n                        \"mx-density-1 flex cursor-pointer items-center gap-density-2 rounded-md px-density-2 py-1.5 text-sm\",\n                        active && \"bg-accent text-accent-foreground\",\n                        item.disabled && \"cursor-not-allowed opacity-50\",\n                      )}\n                    >\n                      {item.icon !== undefined && (\n                        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\">\n                          <Icon\n                            {...(typeof item.icon === \"string\"\n                              ? { name: item.icon }\n                              : { icon: item.icon })}\n                          />\n                        </span>\n                      )}\n                      <span className=\"min-w-0 flex-1 truncate\">\n                        {item.label}\n                        {item.description && (\n                          <span className=\"ml-density-2 text-xs text-muted-foreground\">\n                            {item.description}\n                          </span>\n                        )}\n                      </span>\n                      {item.trailing}\n                      {item.shortcut && (\n                        <kbd className=\"shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground\">\n                          {item.shortcut}\n                        </kbd>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })\n      )}\n    </div>\n  );\n}\n"],"names":["jsx","Fragment","jsxs","cn","Icon"],"mappings":";;;;;;AA2BO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAG1B,MAAI,YAAY;AAEhB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,yBAAuB;AAAA,MACvB,UAAU;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MACV,OAAO,EAAE,WAAW,cAAA;AAAA,MAEnB,UAAA,yCACE,OAAA,EAAI,WAAU,2DAA0D,UAAA,aAAA,CAAU,IACjF,MAAM,WAAW,mCAClB,OAAA,EAAI,WAAU,uEACZ,UAAA,cAAc,aAAA,CACjB,IAEA,OAAO,IAAI,CAAC,UAAU;AACpB,cAAM,YAAY,GAAG,MAAM,UAAU,MAAM,EAAE;AAC7C,eACEA,2BAAAA,IAACC,MAAAA,UAAA,EACC,UAAAC,2BAAAA,KAAC,OAAA,EAAI,MAAK,SAAQ,mBAAiB,MAAM,UAAU,YAAY,QAC5D,UAAA;AAAA,UAAA,MAAM,WACLF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAA,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAGV,MAAM,MAAM,IAAI,CAAC,SAAS;AACzB,yBAAa;AACb,kBAAM,QAAQ;AACd,kBAAM,SAAS,UAAU;AACzB,mBACEE,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,IAAI,SAAS,IAAI;AAAA,gBACjB,MAAK;AAAA,gBACL,iBAAe;AAAA,gBACf,iBAAe,KAAK,YAAY;AAAA,gBAIhC,aAAa,MAAM;AACjB,sBAAI,CAAC,KAAK,SAAU,SAAQ,KAAK;AAAA,gBACnC;AAAA,gBACA,SAAS,MAAM;AACb,sBAAI,CAAC,KAAK,SAAU,YAAW,IAAI;AAAA,gBACrC;AAAA,gBACA,WAAWC,MAAAA;AAAAA,kBACT;AAAA,kBACA,UAAU;AAAA,kBACV,KAAK,YAAY;AAAA,gBAAA;AAAA,gBAGlB,UAAA;AAAA,kBAAA,KAAK,SAAS,UACbH,2BAAAA,IAAC,QAAA,EAAK,WAAU,2EACd,UAAAA,2BAAAA;AAAAA,oBAACI,KAAAA;AAAAA,oBAAA;AAAA,sBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,oBAAK;AAAA,kBAAA,GAE1B;AAAA,kBAEFF,2BAAAA,KAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,oBAAA,KAAK;AAAA,oBACL,KAAK,eACJF,2BAAAA,IAAC,UAAK,WAAU,8CACb,eAAK,YAAA,CACR;AAAA,kBAAA,GAEJ;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK,YACJA,2BAAAA,IAAC,SAAI,WAAU,4GACZ,eAAK,SAAA,CACR;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzCG,KAAK;AAAA,YAAA;AAAA,UA6ChB,CAAC;AAAA,QAAA,GACH,EAAA,GA/Da,MAAM,EAgErB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAIT;;"}

package/dist/overlay/CommandPaletteList.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { KeyboardEventHandler, RefObject } from 'react';
 import { CommandGroup, CommandItem } from './CommandPalette.model.js';
 export type CommandPaletteListProps = {
     groups: CommandGroup[];
@@ -9,6 +9,8 @@ export type CommandPaletteListProps = {
     optionId: (item: CommandItem) => string;
     onActivate: (item: CommandItem) => void;
     onHover: (index: number) => void;
+    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+    activeItemId?: string | undefined;
     listRef: RefObject<HTMLDivElement | null>;
     loading?: boolean | undefined;
     emptyState?: React.ReactNode;
@@ -19,5 +21,5 @@ export type CommandPaletteListProps = {
  * option index space stays contiguous — the same trick Combobox uses to scroll
  * by `[role="option"]` index.
  */
-export declare function CommandPaletteList({ groups, items, activeIndex, listId, optionId, onActivate, onHover, listRef, loading, emptyState, listMaxHeight, }: CommandPaletteListProps): import("react").JSX.Element;
+export declare function CommandPaletteList({ groups, items, activeIndex, listId, optionId, onActivate, onHover, onKeyDown, activeItemId, listRef, loading, emptyState, listMaxHeight, }: CommandPaletteListProps): import("react").JSX.Element;
 //# sourceMappingURL=CommandPaletteList.d.ts.map

package/dist/overlay/CommandPaletteList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteList.d.ts","sourceRoot":"","sources":["../../src/overlay/CommandPaletteList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAExE,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,uEAAuE;IACvE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,UAAU,EACV,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,GACd,EAAE,uBAAuB,+BA8FzB"}
+{"version":3,"file":"CommandPaletteList.d.ts","sourceRoot":"","sources":["../../src/overlay/CommandPaletteList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAExE,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,uEAAuE;IACvE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,GACd,EAAE,uBAAuB,+BAiGzB"}

package/dist/overlay/CommandPaletteList.js

@@ -10,6 +10,8 @@ function CommandPaletteList({
   optionId,
   onActivate,
   onHover,
+  onKeyDown,
+  activeItemId,
   listRef,
   loading,
   emptyState,
@@ -23,6 +25,9 @@ function CommandPaletteList({
       id: listId,
       role: "listbox",
       "aria-label": "Commands",
+      "aria-activedescendant": activeItemId,
+      tabIndex: -1,
+      onKeyDown,
       className: "overflow-y-auto overscroll-contain py-density-1",
       style: { maxHeight: listMaxHeight },
       children: loading ? /* @__PURE__ */ jsx("div", { className: "px-density-3 py-density-3 text-sm text-muted-foreground", children: "Searching…" }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-density-3 py-density-4 text-center text-sm text-muted-foreground", children: emptyState ?? "No results" }) : groups.map((group) => {

package/dist/overlay/CommandPaletteList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteList.js","sources":["../../src/overlay/CommandPaletteList.tsx"],"sourcesContent":["import { Fragment, type RefObject } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport type { CommandGroup, CommandItem } from \"./CommandPalette.model\";\n\nexport type CommandPaletteListProps = {\n  groups: CommandGroup[];\n  /** Flattened rows, in render order — index space for `activeIndex`. */\n  items: CommandItem[];\n  activeIndex: number;\n  listId: string;\n  optionId: (item: CommandItem) => string;\n  onActivate: (item: CommandItem) => void;\n  onHover: (index: number) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n  loading?: boolean | undefined;\n  emptyState?: React.ReactNode;\n  listMaxHeight: string | number;\n};\n\n/**\n * The palette's grouped listbox. Headings are `role=\"presentation\"` so the\n * option index space stays contiguous — the same trick Combobox uses to scroll\n * by `[role=\"option\"]` index.\n */\nexport function CommandPaletteList({\n  groups,\n  items,\n  activeIndex,\n  listId,\n  optionId,\n  onActivate,\n  onHover,\n  listRef,\n  loading,\n  emptyState,\n  listMaxHeight,\n}: CommandPaletteListProps) {\n  // A flat cursor walked alongside the nested render so each row knows its index\n  // in the flattened list without a lookup.\n  let flatIndex = -1;\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      aria-label=\"Commands\"\n      className=\"overflow-y-auto overscroll-contain py-density-1\"\n      style={{ maxHeight: listMaxHeight }}\n    >\n      {loading ? (\n        <div className=\"px-density-3 py-density-3 text-sm text-muted-foreground\">Searching…</div>\n      ) : items.length === 0 ? (\n        <div className=\"px-density-3 py-density-4 text-center text-sm text-muted-foreground\">\n          {emptyState ?? \"No results\"}\n        </div>\n      ) : (\n        groups.map((group) => {\n          const headingId = `${listId}-group-${group.id}`;\n          return (\n            <Fragment key={group.id}>\n              <div role=\"group\" aria-labelledby={group.heading ? headingId : undefined}>\n                {group.heading && (\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className=\"px-density-3 pb-1 pt-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground\"\n                  >\n                    {group.heading}\n                  </div>\n                )}\n                {group.items.map((item) => {\n                  flatIndex += 1;\n                  const index = flatIndex;\n                  const active = index === activeIndex;\n                  return (\n                    <div\n                      key={item.id}\n                      id={optionId(item)}\n                      role=\"option\"\n                      aria-selected={active}\n                      aria-disabled={item.disabled || undefined}\n                      // onMouseMove, not onMouseEnter: keyboard navigation\n                      // scrolls rows under a stationary cursor, and mouseenter\n                      // would yank the highlight back to wherever it sits.\n                      onMouseMove={() => {\n                        if (!item.disabled) onHover(index);\n                      }}\n                      onClick={() => {\n                        if (!item.disabled) onActivate(item);\n                      }}\n                      className={cn(\n                        \"mx-density-1 flex cursor-pointer items-center gap-density-2 rounded-md px-density-2 py-1.5 text-sm\",\n                        active && \"bg-accent text-accent-foreground\",\n                        item.disabled && \"cursor-not-allowed opacity-50\",\n                      )}\n                    >\n                      {item.icon !== undefined && (\n                        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\">\n                          <Icon\n                            {...(typeof item.icon === \"string\"\n                              ? { name: item.icon }\n                              : { icon: item.icon })}\n                          />\n                        </span>\n                      )}\n                      <span className=\"min-w-0 flex-1 truncate\">\n                        {item.label}\n                        {item.description && (\n                          <span className=\"ml-density-2 text-xs text-muted-foreground\">\n                            {item.description}\n                          </span>\n                        )}\n                      </span>\n                      {item.trailing}\n                      {item.shortcut && (\n                        <kbd className=\"shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground\">\n                          {item.shortcut}\n                        </kbd>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAyBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAG1B,MAAI,YAAY;AAEhB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MACV,OAAO,EAAE,WAAW,cAAA;AAAA,MAEnB,UAAA,8BACE,OAAA,EAAI,WAAU,2DAA0D,UAAA,aAAA,CAAU,IACjF,MAAM,WAAW,wBAClB,OAAA,EAAI,WAAU,uEACZ,UAAA,cAAc,aAAA,CACjB,IAEA,OAAO,IAAI,CAAC,UAAU;AACpB,cAAM,YAAY,GAAG,MAAM,UAAU,MAAM,EAAE;AAC7C,eACE,oBAAC,UAAA,EACC,UAAA,qBAAC,OAAA,EAAI,MAAK,SAAQ,mBAAiB,MAAM,UAAU,YAAY,QAC5D,UAAA;AAAA,UAAA,MAAM,WACL;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAA,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAGV,MAAM,MAAM,IAAI,CAAC,SAAS;AACzB,yBAAa;AACb,kBAAM,QAAQ;AACd,kBAAM,SAAS,UAAU;AACzB,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,IAAI,SAAS,IAAI;AAAA,gBACjB,MAAK;AAAA,gBACL,iBAAe;AAAA,gBACf,iBAAe,KAAK,YAAY;AAAA,gBAIhC,aAAa,MAAM;AACjB,sBAAI,CAAC,KAAK,SAAU,SAAQ,KAAK;AAAA,gBACnC;AAAA,gBACA,SAAS,MAAM;AACb,sBAAI,CAAC,KAAK,SAAU,YAAW,IAAI;AAAA,gBACrC;AAAA,gBACA,WAAW;AAAA,kBACT;AAAA,kBACA,UAAU;AAAA,kBACV,KAAK,YAAY;AAAA,gBAAA;AAAA,gBAGlB,UAAA;AAAA,kBAAA,KAAK,SAAS,UACb,oBAAC,QAAA,EAAK,WAAU,2EACd,UAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,oBAAK;AAAA,kBAAA,GAE1B;AAAA,kBAEF,qBAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,oBAAA,KAAK;AAAA,oBACL,KAAK,eACJ,oBAAC,UAAK,WAAU,8CACb,eAAK,YAAA,CACR;AAAA,kBAAA,GAEJ;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK,YACJ,oBAAC,SAAI,WAAU,4GACZ,eAAK,SAAA,CACR;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzCG,KAAK;AAAA,YAAA;AAAA,UA6ChB,CAAC;AAAA,QAAA,GACH,EAAA,GA/Da,MAAM,EAgErB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAIT;"}
+{"version":3,"file":"CommandPaletteList.js","sources":["../../src/overlay/CommandPaletteList.tsx"],"sourcesContent":["import { Fragment, type KeyboardEventHandler, type RefObject } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport type { CommandGroup, CommandItem } from \"./CommandPalette.model\";\n\nexport type CommandPaletteListProps = {\n  groups: CommandGroup[];\n  /** Flattened rows, in render order — index space for `activeIndex`. */\n  items: CommandItem[];\n  activeIndex: number;\n  listId: string;\n  optionId: (item: CommandItem) => string;\n  onActivate: (item: CommandItem) => void;\n  onHover: (index: number) => void;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement>;\n  activeItemId?: string | undefined;\n  listRef: RefObject<HTMLDivElement | null>;\n  loading?: boolean | undefined;\n  emptyState?: React.ReactNode;\n  listMaxHeight: string | number;\n};\n\n/**\n * The palette's grouped listbox. Headings are `role=\"presentation\"` so the\n * option index space stays contiguous — the same trick Combobox uses to scroll\n * by `[role=\"option\"]` index.\n */\nexport function CommandPaletteList({\n  groups,\n  items,\n  activeIndex,\n  listId,\n  optionId,\n  onActivate,\n  onHover,\n  onKeyDown,\n  activeItemId,\n  listRef,\n  loading,\n  emptyState,\n  listMaxHeight,\n}: CommandPaletteListProps) {\n  // A flat cursor walked alongside the nested render so each row knows its index\n  // in the flattened list without a lookup.\n  let flatIndex = -1;\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      aria-label=\"Commands\"\n      aria-activedescendant={activeItemId}\n      tabIndex={-1}\n      onKeyDown={onKeyDown}\n      className=\"overflow-y-auto overscroll-contain py-density-1\"\n      style={{ maxHeight: listMaxHeight }}\n    >\n      {loading ? (\n        <div className=\"px-density-3 py-density-3 text-sm text-muted-foreground\">Searching…</div>\n      ) : items.length === 0 ? (\n        <div className=\"px-density-3 py-density-4 text-center text-sm text-muted-foreground\">\n          {emptyState ?? \"No results\"}\n        </div>\n      ) : (\n        groups.map((group) => {\n          const headingId = `${listId}-group-${group.id}`;\n          return (\n            <Fragment key={group.id}>\n              <div role=\"group\" aria-labelledby={group.heading ? headingId : undefined}>\n                {group.heading && (\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className=\"px-density-3 pb-1 pt-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground\"\n                  >\n                    {group.heading}\n                  </div>\n                )}\n                {group.items.map((item) => {\n                  flatIndex += 1;\n                  const index = flatIndex;\n                  const active = index === activeIndex;\n                  return (\n                    <div\n                      key={item.id}\n                      id={optionId(item)}\n                      role=\"option\"\n                      aria-selected={active}\n                      aria-disabled={item.disabled || undefined}\n                      // onMouseMove, not onMouseEnter: keyboard navigation\n                      // scrolls rows under a stationary cursor, and mouseenter\n                      // would yank the highlight back to wherever it sits.\n                      onMouseMove={() => {\n                        if (!item.disabled) onHover(index);\n                      }}\n                      onClick={() => {\n                        if (!item.disabled) onActivate(item);\n                      }}\n                      className={cn(\n                        \"mx-density-1 flex cursor-pointer items-center gap-density-2 rounded-md px-density-2 py-1.5 text-sm\",\n                        active && \"bg-accent text-accent-foreground\",\n                        item.disabled && \"cursor-not-allowed opacity-50\",\n                      )}\n                    >\n                      {item.icon !== undefined && (\n                        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground\">\n                          <Icon\n                            {...(typeof item.icon === \"string\"\n                              ? { name: item.icon }\n                              : { icon: item.icon })}\n                          />\n                        </span>\n                      )}\n                      <span className=\"min-w-0 flex-1 truncate\">\n                        {item.label}\n                        {item.description && (\n                          <span className=\"ml-density-2 text-xs text-muted-foreground\">\n                            {item.description}\n                          </span>\n                        )}\n                      </span>\n                      {item.trailing}\n                      {item.shortcut && (\n                        <kbd className=\"shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground\">\n                          {item.shortcut}\n                        </kbd>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AA2BO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAG1B,MAAI,YAAY;AAEhB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,yBAAuB;AAAA,MACvB,UAAU;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MACV,OAAO,EAAE,WAAW,cAAA;AAAA,MAEnB,UAAA,8BACE,OAAA,EAAI,WAAU,2DAA0D,UAAA,aAAA,CAAU,IACjF,MAAM,WAAW,wBAClB,OAAA,EAAI,WAAU,uEACZ,UAAA,cAAc,aAAA,CACjB,IAEA,OAAO,IAAI,CAAC,UAAU;AACpB,cAAM,YAAY,GAAG,MAAM,UAAU,MAAM,EAAE;AAC7C,eACE,oBAAC,UAAA,EACC,UAAA,qBAAC,OAAA,EAAI,MAAK,SAAQ,mBAAiB,MAAM,UAAU,YAAY,QAC5D,UAAA;AAAA,UAAA,MAAM,WACL;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAA,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAGV,MAAM,MAAM,IAAI,CAAC,SAAS;AACzB,yBAAa;AACb,kBAAM,QAAQ;AACd,kBAAM,SAAS,UAAU;AACzB,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,IAAI,SAAS,IAAI;AAAA,gBACjB,MAAK;AAAA,gBACL,iBAAe;AAAA,gBACf,iBAAe,KAAK,YAAY;AAAA,gBAIhC,aAAa,MAAM;AACjB,sBAAI,CAAC,KAAK,SAAU,SAAQ,KAAK;AAAA,gBACnC;AAAA,gBACA,SAAS,MAAM;AACb,sBAAI,CAAC,KAAK,SAAU,YAAW,IAAI;AAAA,gBACrC;AAAA,gBACA,WAAW;AAAA,kBACT;AAAA,kBACA,UAAU;AAAA,kBACV,KAAK,YAAY;AAAA,gBAAA;AAAA,gBAGlB,UAAA;AAAA,kBAAA,KAAK,SAAS,UACb,oBAAC,QAAA,EAAK,WAAU,2EACd,UAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,oBAAK;AAAA,kBAAA,GAE1B;AAAA,kBAEF,qBAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,oBAAA,KAAK;AAAA,oBACL,KAAK,eACJ,oBAAC,UAAK,WAAU,8CACb,eAAK,YAAA,CACR;AAAA,kBAAA,GAEJ;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK,YACJ,oBAAC,SAAI,WAAU,4GACZ,eAAK,SAAA,CACR;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzCG,KAAK;AAAA,YAAA;AAAA,UA6ChB,CAAC;AAAA,QAAA,GACH,EAAA,GA/Da,MAAM,EAgErB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAIT;"}

package/dist/overlay/DropdownMenu.cjs

@@ -96,6 +96,7 @@ function DropdownMenuRoot({
       button.Button,
       {
         ref: refs.setReference,
+        type: "button",
         variant,
         size,
         title,
@@ -127,6 +128,7 @@ function DropdownMenuRoot({
             ...getFloatingProps(),
             role: "menu",
             "aria-label": menuLabel,
+            ...menuLabel ? { "aria-labelledby": void 0 } : {},
             style: { ...floatingStyles, zIndex: floatingZ },
             className: utils.cn(dropdownMenuContext.MENU_POPOVER_CLASS, menuClassName),
             children: [

package/dist/overlay/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [click, dismiss, role, listNav],\n  );\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role=\"menu\"\n                aria-label={menuLabel}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":["FloatingTree","jsx","useState","useFloatingZIndex","useFloatingTree","useFloatingNodeId","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","useEscapeLayer","FloatingNode","jsxs","cn","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager","MENU_POPOVER_CLASS","MenuContext","FloatingList","MenuItemList"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /** Theme-aware classes applied to this item's icon. */\n  iconClassName?: string | undefined;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n  /** Editor or explanatory content above a submenu's choices. */\n  header?: ReactNode;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [click, dismiss, role, listNav],\n  );\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            // Opening a menu never submits the form the trigger sits in.\n            type=\"button\"\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role=\"menu\"\n                aria-label={menuLabel}\n                {...(menuLabel ? { \"aria-labelledby\": undefined } : {})}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":["FloatingTree","jsx","useState","useFloatingZIndex","useFloatingTree","useFloatingNodeId","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","useEscapeLayer","FloatingNode","jsxs","cn","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager","MENU_POPOVER_CLASS","MenuContext","FloatingList","MenuItemList"],"mappings":"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"}

package/dist/overlay/DropdownMenu.d.ts

@@ -10,6 +10,8 @@ export type DropdownMenuItem = {
     icon?: string | StaticIconComponent;
     /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */
     iconColor?: string;
+    /** Theme-aware classes applied to this item's icon. */
+    iconClassName?: string | undefined;
     /**
      * Section header. A non-interactive header renders above the first item of
      * each contiguous group — provide items pre-sorted by `group`. Items without
@@ -26,6 +28,8 @@ export type DropdownMenuItem = {
      * instead of firing `onSelect`.
      */
     children?: DropdownMenuItem[];
+    /** Editor or explanatory content above a submenu's choices. */
+    header?: ReactNode;
 };
 export type DropdownMenuProps = {
     /** Trigger label. Ignored when `trigger` is provided. */

package/dist/overlay/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAM9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAM9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}

package/dist/overlay/DropdownMenu.js

@@ -94,6 +94,7 @@ function DropdownMenuRoot({
       Button,
       {
         ref: refs.setReference,
+        type: "button",
         variant,
         size,
         title,
@@ -125,6 +126,7 @@ function DropdownMenuRoot({
             ...getFloatingProps(),
             role: "menu",
             "aria-label": menuLabel,
+            ...menuLabel ? { "aria-labelledby": void 0 } : {},
             style: { ...floatingStyles, zIndex: floatingZ },
             className: cn(MENU_POPOVER_CLASS, menuClassName),
             children: [

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [click, dismiss, role, listNav],\n  );\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role=\"menu\"\n                aria-label={menuLabel}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /** Theme-aware classes applied to this item's icon. */\n  iconClassName?: string | undefined;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n  /** Editor or explanatory content above a submenu's choices. */\n  header?: ReactNode;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [click, dismiss, role, listNav],\n  );\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            // Opening a menu never submits the form the trigger sits in.\n            type=\"button\"\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role=\"menu\"\n                aria-label={menuLabel}\n                {...(menuLabel ? { \"aria-labelledby\": undefined } : {})}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/DropdownMenuSubmenu.cjs

@@ -6,12 +6,14 @@ const react$1 = require("@floating-ui/react");
 const Icon = require("../data/Icon.cjs");
 const dropdownMenuContext = require("./dropdownMenuContext.cjs");
 const modalStack = require("./modalStack.cjs");
+const utils = require("../lib/utils.cjs");
 const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
 const MENU_ITEM_CLASS = "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50";
 const MENU_HEADER_CLASS = "select-none px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground";
 function MenuItemIcon({
   icon,
-  iconColor
+  iconColor,
+  iconClassName
 }) {
   if (!icon) return null;
   return (
@@ -22,7 +24,7 @@ function MenuItemIcon({
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: "inline-flex shrink-0 text-base",
+        className: utils.cn("inline-flex shrink-0 text-base", iconClassName),
         style: iconColor ? { color: iconColor } : void 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon } })
       }
@@ -60,7 +62,14 @@ function MenuLeaf({ item }) {
         }
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(MenuItemIcon, { icon: item.icon, iconColor: item.iconColor }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItemIcon,
+          {
+            icon: item.icon,
+            iconColor: item.iconColor,
+            iconClassName: item.iconClassName
+          }
+        ),
         item.label
       ]
     }
@@ -86,7 +95,7 @@ function MenuSubmenu({ item }) {
     middleware: [
       react$1.offset({ mainAxis: 0, alignmentAxis: -4 }),
       react$1.flip({ padding: 8 }),
-      react$1.shift({ padding: 8 })
+      react$1.shift({ padding: 8, crossAxis: true })
     ],
     whileElementsMounted: react$1.autoUpdate
   });
@@ -104,13 +113,9 @@ function MenuSubmenu({ item }) {
     onNavigate: setActiveIndex,
     loop: true
   });
-  const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([
-    hover,
-    click,
-    role,
-    dismiss,
-    listNav
-  ]);
+  const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions(
+    [hover, click, role, dismiss, listNav]
+  );
   modalStack.useEscapeLayer(isOpen, () => setIsOpen(false));
   react.useEffect(() => {
     if (!tree) return;
@@ -160,7 +165,14 @@ function MenuSubmenu({ item }) {
           })
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(MenuItemIcon, { icon: item.icon, iconColor: item.iconColor }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItemIcon,
+            {
+              icon: item.icon,
+              iconColor: item.iconColor,
+              iconClassName: item.iconClassName
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
           /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronRight.UiChevronRight, className: "ml-auto shrink-0 opacity-60" })
         ]
@@ -183,16 +195,20 @@ function MenuSubmenu({ item }) {
             modal: false,
             initialFocus: -1,
             returnFocus: false,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 ref: refs.setFloating,
                 role: "menu",
-                "aria-label": ariaLabel,
                 style: { ...floatingStyles, zIndex: floatingZ },
                 className: dropdownMenuContext.MENU_POPOVER_CLASS,
                 ...getFloatingProps(),
-                children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { items: item.children ?? [] })
+                "aria-label": ariaLabel,
+                ...ariaLabel ? { "aria-labelledby": void 0 } : {},
+                children: [
+                  item.header != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-3 py-1.5", children: item.header }),
+                  /* @__PURE__ */ jsxRuntime.jsx(MenuItemList, { items: item.children ?? [] })
+                ]
               }
             )
           }