@flanksource/clicky-ui 0.3.40 → 0.3.41

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,

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":";;;;;;;;;;;;AA+FO,SAAS,aAAa,OAA0B;AACrD,wCACGA,oBAAA,EACC,UAAAC,2BAAAA,IAAC,kBAAA,EAAkB,GAAG,OAAO,GAC/B;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,MAAM,OAAO,IAAIC,QAAAA,SAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,IAAIA,QAAAA,SAAwB,IAAI;AAClE,QAAM,YAAYC,WAAAA,kBAAA;AAClB,QAAM,OAAOC,MAAAA,gBAAA;AACb,QAAM,SAASC,MAAAA,kBAAA;AACf,QAAM,cAAcC,QAAAA,OAAkC,EAAE;AAExD,QAAM,kBAAkBA,QAAAA,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAC1BC,UAAAA,UAAU,MAAM;;AACd,0BAAgB,YAAhB,yCAA0B;AAAA,EAC5B,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAYC,MAAAA,YAA4B;AAAA;AAAA,IAEpE,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,IAC1B;AAAA,IACA,cAAc;AAAA;AAAA,IAEd,WAAW,UAAU,UAAU,eAAe;AAAA,IAC9C,sBAAsBC,MAAAA;AAAAA;AAAAA;AAAAA,IAGtB,YAAY,CAACC,MAAAA,OAAO,CAAC,GAAGC,MAAAA,KAAK,EAAE,SAAS,EAAA,CAAG,GAAGC,MAAAA,MAAM,EAAE,SAAS,EAAA,CAAG,CAAC;AAAA,EAAA,CACpE;AAED,QAAM,QAAQC,MAAAA,SAAS,OAAO;AAQ9B,QAAM,UAAUC,MAAAA,WAAW,SAAS,EAAE,WAAW,OAAO;AACxD,QAAM,OAAOC,MAAAA,QAAQ,SAAS,EAAE,MAAM,QAAQ;AAC9C,QAAM,UAAUC,MAAAA,kBAAkB,SAAS;AAAA,IACzC,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,EAAA,CACP;AAED,QAAM,EAAE,mBAAmB,kBAAkB,aAAA,IAAiBC,MAAAA;AAAAA,IAC5D,CAAC,OAAO,SAAS,MAAM,OAAO;AAAA,EAAA;AAGhC,QAAM,YAAY,MAAM;AACtB,YAAQ,KAAK;AACb,QAAI,KAAK,aAAa,mBAAmB;AACvC,WAAK,aAAa,QAAQ,MAAA;AAAA,EAC9B;AACAC,aAAAA,eAAe,MAAM,SAAS;AAI9B,QAAM,eAAeZ,QAAAA,OAAO,SAAS;AACrC,eAAa,UAAU;AACvBC,UAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,cAAc,MAAM,aAAa,QAAA;AACvC,SAAK,OAAO,GAAG,SAAS,WAAW;AACnC,WAAO,MAAM,KAAK,OAAO,IAAI,SAAS,WAAW;AAAA,EACnD,GAAG,CAAC,IAAI,CAAC;AAET,SACEN,2BAAAA,IAACkB,MAAAA,cAAA,EAAa,IAAI,QAChB,UAAAC,2BAAAA,KAAC,SAAI,WAAWC,MAAAA,GAAG,wBAAwB,SAAS,GACjD,UAAA;AAAA,IAAA,UACCpB,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,WAAU;AAAA,QACV,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG,kBAAA;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,IAGHmB,2BAAAA;AAAAA,MAACE,OAAAA;AAAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG,kBAAA;AAAA,QAEH,UAAA;AAAA,UAAA,QACCrB,2BAAAA;AAAAA,YAACsB,KAAAA;AAAAA,YAAA;AAAA,cACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,YAAK;AAAA,UAAA;AAAA,UAG3D;AAAA,UACA,CAAC,eAAetB,2BAAAA,IAACsB,KAAAA,MAAA,EAAK,MAAMC,cAAAA,cAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/C,uCACEC,sBAAA,EACC,UAAAxB,2BAAAA;AAAAA,MAACyB,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,iBAAiB;AAAA,QAEjB,UAAAN,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK,KAAK;AAAA,YACT,GAAG,iBAAA;AAAA,YACJ,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,OAAO,EAAE,GAAG,gBAAgB,QAAQ,UAAA;AAAA,YACpC,WAAWC,MAAAA,GAAGM,oBAAAA,oBAAoB,aAAa;AAAA,YAE9C,UAAA;AAAA,cAAA,UAAU,QACT1B,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,QACH;AAAA,cAED,WACC,SAAS,SAAS,IAElBA,2BAAAA;AAAAA,gBAAC2B,oBAAAA,YAAY;AAAA,gBAAZ;AAAA,kBACC,OAAO;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,mBAAmB,MAAM;AAAA,oBAAC;AAAA,oBAC1B,QAAQ;AAAA,kBAAA;AAAA,kBAGV,UAAA3B,2BAAAA,IAAC4B,sBAAa,aACZ,UAAA5B,+BAAC6B,oBAAAA,gBAAa,OAAO,SAAS,CAAA,EAAC,CAAG,EAAA,CACpC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGH,UAAU,QACT7B,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,OAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;;"}
+{"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            // 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                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.js

@@ -94,6 +94,7 @@ function DropdownMenuRoot({
       Button,
       {
         ref: refs.setReference,
+        type: "button",
         variant,
         size,
         title,

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  /**\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            // 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                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":";;;;;;;;;;AA+FO,SAAS,aAAa,OAA0B;AACrD,6BACG,cAAA,EACC,UAAA,oBAAC,kBAAA,EAAkB,GAAG,OAAO,GAC/B;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,YAAY,kBAAA;AAClB,QAAM,OAAO,gBAAA;AACb,QAAM,SAAS,kBAAA;AACf,QAAM,cAAc,OAAkC,EAAE;AAExD,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAC1B,YAAU,MAAM;;AACd,0BAAgB,YAAhB,yCAA0B;AAAA,EAC5B,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAA4B;AAAA;AAAA,IAEpE,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,IAC1B;AAAA,IACA,cAAc;AAAA;AAAA,IAEd,WAAW,UAAU,UAAU,eAAe;AAAA,IAC9C,sBAAsB;AAAA;AAAA;AAAA,IAGtB,YAAY,CAAC,OAAO,CAAC,GAAG,KAAK,EAAE,SAAS,EAAA,CAAG,GAAG,MAAM,EAAE,SAAS,EAAA,CAAG,CAAC;AAAA,EAAA,CACpE;AAED,QAAM,QAAQ,SAAS,OAAO;AAQ9B,QAAM,UAAU,WAAW,SAAS,EAAE,WAAW,OAAO;AACxD,QAAM,OAAO,QAAQ,SAAS,EAAE,MAAM,QAAQ;AAC9C,QAAM,UAAU,kBAAkB,SAAS;AAAA,IACzC,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,EAAA,CACP;AAED,QAAM,EAAE,mBAAmB,kBAAkB,aAAA,IAAiB;AAAA,IAC5D,CAAC,OAAO,SAAS,MAAM,OAAO;AAAA,EAAA;AAGhC,QAAM,YAAY,MAAM;AACtB,YAAQ,KAAK;AACb,QAAI,KAAK,aAAa,mBAAmB;AACvC,WAAK,aAAa,QAAQ,MAAA;AAAA,EAC9B;AACA,iBAAe,MAAM,SAAS;AAI9B,QAAM,eAAe,OAAO,SAAS;AACrC,eAAa,UAAU;AACvB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,cAAc,MAAM,aAAa,QAAA;AACvC,SAAK,OAAO,GAAG,SAAS,WAAW;AACnC,WAAO,MAAM,KAAK,OAAO,IAAI,SAAS,WAAW;AAAA,EACnD,GAAG,CAAC,IAAI,CAAC;AAET,SACE,oBAAC,cAAA,EAAa,IAAI,QAChB,UAAA,qBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,GACjD,UAAA;AAAA,IAAA,UACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,WAAU;AAAA,QACV,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG,kBAAA;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QAEV,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG,kBAAA;AAAA,QAEH,UAAA;AAAA,UAAA,QACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,YAAK;AAAA,UAAA;AAAA,UAG3D;AAAA,UACA,CAAC,eAAe,oBAAC,MAAA,EAAK,MAAM,cAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/C,4BACE,gBAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,iBAAiB;AAAA,QAEjB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK,KAAK;AAAA,YACT,GAAG,iBAAA;AAAA,YACJ,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,OAAO,EAAE,GAAG,gBAAgB,QAAQ,UAAA;AAAA,YACpC,WAAW,GAAG,oBAAoB,aAAa;AAAA,YAE9C,UAAA;AAAA,cAAA,UAAU,QACT,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,QACH;AAAA,cAED,WACC,SAAS,SAAS,IAElB;AAAA,gBAAC,YAAY;AAAA,gBAAZ;AAAA,kBACC,OAAO;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,mBAAmB,MAAM;AAAA,oBAAC;AAAA,oBAC1B,QAAQ;AAAA,kBAAA;AAAA,kBAGV,UAAA,oBAAC,gBAAa,aACZ,UAAA,oBAAC,gBAAa,OAAO,SAAS,CAAA,EAAC,CAAG,EAAA,CACpC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGH,UAAU,QACT,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,OAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

package/dist/rpc/OperationCatalog.cjs

@@ -23,6 +23,7 @@ const operationCatalogFilterState = require("./operationCatalogFilterState.cjs")
 const operationCatalogFollow = require("./operationCatalogFollow.cjs");
 const OperationCatalogFollowStatus = require("./OperationCatalogFollowStatus.cjs");
 const useOperationCatalogFollow = require("./useOperationCatalogFollow.cjs");
+const operationCatalogRowSelection = require("./operationCatalogRowSelection.cjs");
 const defaultCommandHref = (operationId) => `/commands/${operationId}`;
 const EMPTY_LOCKED_VALUES = {};
 const EMPTY_INITIAL_VALUES = {};
@@ -54,7 +55,8 @@ function OperationCatalog({
   rowDetail,
   cellRenderers,
   rowCard,
-  follow
+  follow,
+  rowSelection
 }) {
   var _a, _b, _c, _d, _e;
   const renderRowDetail = rowDetail == null ? void 0 : rowDetail.render;
@@ -174,22 +176,7 @@ function OperationCatalog({
     setValues: setFilters
   });
   const lookupQuery = reactQuery.useQuery({
-    queryKey: [
-      "operation-lookup",
-      listEndpoint == null ? void 0 : listEndpoint.method,
-      listEndpoint == null ? void 0 : listEndpoint.path,
-      lookupParameters
-    ],
-    queryFn: async () => {
-      var _a2;
-      return await ((_a2 = client.lookupFilters) == null ? void 0 : _a2.call(
-        client,
-        listEndpoint.path,
-        listEndpoint.method,
-        lookupParameters,
-        { Accept: "application/json+clicky" }
-      )) ?? { filters: {} };
-    },
+    ...operationCatalogRowSelection.operationLookupQuery(client, listEndpoint, lookupParameters),
     enabled: !!listEndpoint && !!client.lookupFilters,
     placeholderData: reactQuery.keepPreviousData,
     staleTime: 3e4,
@@ -338,7 +325,16 @@ function OperationCatalog({
       onCellFilterChange
     ]
   );
+  const pickerSelection = react.useMemo(
+    () => rowSelection ? operationCatalogRowSelection.pickerTableRowSelection(rowSelection, effectiveFilters) : void 0,
+    [effectiveFilters, rowSelection]
+  );
   const showTable = !!listEndpoint;
+  if (rowSelection && !isLoading && !showTable) {
+    throw new Error(
+      `OperationCatalog rowSelection needs a list operation, but surface "${surfaceKey ?? definition.title}" has none`
+    );
+  }
   let listError;
   if (!list.isFetching) {
     if (list.isError) {
@@ -368,23 +364,30 @@ function OperationCatalog({
     followPartition.rows,
     followOrder
   ) : void 0;
-  const mergedTableResponse = followMerge ? followMerge.response : tableResponse;
+  const unavailableRows = rowSelection == null ? void 0 : rowSelection.unavailableRows;
+  const markRows = (response) => response && unavailableRows ? operationCatalogRowSelection.markUnavailableRows(response, unavailableRows) : response;
+  const mergedTableResponse = markRows(
+    followMerge ? followMerge.response : tableResponse
+  );
   const resultsPagination = followMerge && followMerge.addedCount > 0 && dataTablePagination ? {
     ...dataTablePagination,
     total: (dataTablePagination.total ?? 0) + followMerge.addedCount,
     totalRelation: "gte"
   } : dataTablePagination;
-  const walkProps = list.infinite ? { pages: list.pages, infinite: list.infinite } : {};
+  const walkProps = list.infinite ? {
+    pages: unavailableRows ? list.pages.map((page) => operationCatalogRowSelection.markUnavailableRows(page, unavailableRows)) : list.pages,
+    infinite: list.infinite
+  } : {};
   if (isLoading || showTable && list.isPending && list.response == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(loading.Loading, { variant: "centered", label: `Loading ${definition.title}…` });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "flex h-full min-h-0 flex-col gap-2",
+      className: "flex h-full min-h-0 flex-1 flex-col gap-2",
       "data-slot": "operation-catalog",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !rowSelection && /* @__PURE__ */ jsxRuntime.jsx(
           OperationCatalogActions.OperationCatalogActions,
           {
             actions: collectionActionOps,
@@ -416,7 +419,7 @@ function OperationCatalog({
             client
           }
         ),
-        showTable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", "data-slot": "operation-catalog-results", children: followMissing ? renderError(
+        showTable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", "data-slot": "operation-catalog-results", children: followMissing ? renderError(
           new Error(
             `Surface "${surfaceKey ?? definition.title}" set follow, but ${listEndpoint == null ? void 0 : listEndpoint.path} advertises no session to follow (expected POST ${listEndpoint == null ? void 0 : listEndpoint.path}/sessions)`
           ),
@@ -441,11 +444,11 @@ function OperationCatalog({
                 loadingMessage: `Loading ${definition.title} results…`,
                 emptyMessage: "No records returned",
                 ariaLabel: `${definition.title} results`,
-                className: "mt-0 h-full min-h-0",
-                detailOperation,
+                className: "mt-0 h-full min-h-0 flex-1",
+                detailOperation: pickerSelection ? void 0 : detailOperation,
                 ...hiddenColumns ? { hiddenColumns } : {},
-                ...getRowDetailHref ? { getRowDetailHref } : {},
-                ...selectionActionOps.length > 0 ? {
+                ...getRowDetailHref && !pickerSelection ? { getRowDetailHref } : {},
+                ...pickerSelection ? { rowSelection: pickerSelection } : selectionActionOps.length > 0 ? {
                   rowSelection: {
                     selectedRowIds,
                     onSelectionChange: (ids, rows) => {