@flanksource/clicky-ui 0.2.1 → 0.2.2

package/dist/components/icon-menu-picker.d.ts

@@ -12,6 +12,7 @@ export type IconMenuPickerProps<T extends string> = {
     ariaLabel: string;
     triggerTitle?: string | undefined;
     footer?: ReactNode | undefined;
+    showLabel?: boolean | undefined;
     className?: string | undefined;
     triggerClassName?: string | undefined;
     menuClassName?: string | undefined;

package/dist/components/icon-menu-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-menu-picker.d.ts","sourceRoot":"","sources":["../../src/components/icon-menu-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI;IAClD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAiMF,eAAO,MAAM,cAAc,EAAsC,CAAC,CAAC,SAAS,MAAM,EAChF,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAChE,GAAG,CAAC,OAAO,CAAC"}
+{"version":3,"file":"icon-menu-picker.d.ts","sourceRoot":"","sources":["../../src/components/icon-menu-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI;IAClD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AA4MF,eAAO,MAAM,cAAc,EAAsC,CAAC,CAAC,SAAS,MAAM,EAChF,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAChE,GAAG,CAAC,OAAO,CAAC"}

package/dist/components/icon-menu-picker.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useCallback, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
@@ -10,6 +10,7 @@ function IconMenuPickerInner({
   ariaLabel,
   triggerTitle,
   footer,
+  showLabel,
   className,
   triggerClassName,
   menuClassName
@@ -106,22 +107,32 @@ function IconMenuPickerInner({
   if (!selected) {
     throw new Error(`IconMenuPicker: value "${value}" not found in options for ${ariaLabel}`);
   }
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative inline-flex", className), children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative inline-flex", showLabel && "w-full", className), children: [
+    /* @__PURE__ */ jsxs(
       Button,
       {
         ref: triggerRef,
         type: "button",
         variant: "ghost",
-        size: "icon",
+        size: showLabel ? "default" : "icon",
         "aria-label": ariaLabel,
         "aria-haspopup": "menu",
         "aria-expanded": open,
         title: triggerTitle ?? `${ariaLabel}: ${selected.label}`,
         onClick: () => setOpen((current) => !current),
         onKeyDown: onTriggerKeyDown,
-        className: cn("text-muted-foreground hover:text-foreground", triggerClassName),
-        children: /* @__PURE__ */ jsx(Icon, { name: selected.icon })
+        className: cn(
+          "text-muted-foreground hover:text-foreground",
+          showLabel && "w-full justify-start",
+          triggerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: selected.icon, className: showLabel ? "shrink-0 text-foreground" : void 0 }),
+          showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left capitalize", children: selected.label }),
+            /* @__PURE__ */ jsx(Icon, { name: "ph:caret-up-down", className: "shrink-0 text-muted-foreground" })
+          ] })
+        ]
       }
     ),
     open && /* @__PURE__ */ jsxs(

package/dist/components/icon-menu-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-menu-picker.js","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"./button\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: string;\n  label: string;\n  description?: string;\n};\n\nexport type IconMenuPickerProps<T extends string> = {\n  value: T;\n  onChange: (next: T) => void;\n  options: IconMenuOption<T>[];\n  ariaLabel: string;\n  triggerTitle?: string | undefined;\n  footer?: ReactNode | undefined;\n  className?: string | undefined;\n  triggerClassName?: string | undefined;\n  menuClassName?: string | undefined;\n};\n\nfunction IconMenuPickerInner<T extends string>(\n  {\n    value,\n    onChange,\n    options,\n    ariaLabel,\n    triggerTitle,\n    footer,\n    className,\n    triggerClassName,\n    menuClassName,\n  }: IconMenuPickerProps<T>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [open, setOpen] = useState(false);\n\n  useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        0,\n        options.findIndex((option) => option.value === value),\n      ),\n    [options, value],\n  );\n\n  const close = useCallback((returnFocus: boolean) => {\n    setOpen(false);\n    if (returnFocus) triggerRef.current?.focus();\n  }, []);\n\n  const select = useCallback(\n    (next: T) => {\n      onChange(next);\n      close(true);\n    },\n    [close, onChange],\n  );\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onPointerDown = (event: PointerEvent) => {\n      if (event.button !== 0) return;\n      if (!rootRef.current?.contains(event.target as Node)) {\n        close(false);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        close(true);\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [close, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const node = itemRefs.current[activeIndex];\n    node?.focus();\n  }, [activeIndex, open]);\n\n  const focusItem = (index: number) => {\n    const wrapped = (index + options.length) % options.length;\n    itemRefs.current[wrapped]?.focus();\n  };\n\n  const onMenuKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const focusedIndex = itemRefs.current.findIndex((node) => node === document.activeElement);\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) + 1);\n      return;\n    }\n    if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) - 1);\n      return;\n    }\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      focusItem(0);\n      return;\n    }\n    if (event.key === \"End\") {\n      event.preventDefault();\n      focusItem(options.length - 1);\n      return;\n    }\n    if (event.key === \"Tab\") {\n      close(false);\n    }\n  };\n\n  const onTriggerKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setOpen(true);\n    }\n  };\n\n  const selected = options[activeIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  return (\n    <div ref={rootRef} className={cn(\"relative inline-flex\", className)}>\n      <Button\n        ref={triggerRef}\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        aria-label={ariaLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        title={triggerTitle ?? `${ariaLabel}: ${selected.label}`}\n        onClick={() => setOpen((current) => !current)}\n        onKeyDown={onTriggerKeyDown}\n        className={cn(\"text-muted-foreground hover:text-foreground\", triggerClassName)}\n      >\n        <Icon name={selected.icon} />\n      </Button>\n      {open && (\n        <div\n          role=\"menu\"\n          aria-label={ariaLabel}\n          onKeyDown={onMenuKeyDown}\n          className={cn(\n            \"absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n            menuClassName,\n          )}\n        >\n          {options.map((option, index) => {\n            const active = option.value === value;\n            return (\n              <button\n                key={option.value}\n                ref={(node) => {\n                  itemRefs.current[index] = node;\n                }}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                tabIndex={active ? 0 : -1}\n                onClick={() => select(option.value)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    select(option.value);\n                  }\n                }}\n                className={cn(\n                  \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n                  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n                  active && \"text-foreground\",\n                )}\n              >\n                <Icon name={option.icon} className=\"shrink-0 text-muted-foreground\" />\n                <span className=\"min-w-0 flex-1 truncate capitalize\">{option.label}</span>\n                {active ? (\n                  <Icon name=\"ph:check\" className=\"shrink-0 text-foreground\" />\n                ) : (\n                  <span className=\"inline-block size-4 shrink-0\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n          {footer ? (\n            <div className=\"mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground\">\n              {footer}\n            </div>\n          ) : null}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const IconMenuPicker = forwardRef(IconMenuPickerInner) as <T extends string>(\n  props: IconMenuPickerProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;AAkCA,SAAS,oBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAqC,EAAE;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,sBAAoB,KAAK,MAAM,QAAQ,OAAyB;AAEhE,QAAM,cAAc;AAAA,IAClB,MACE,KAAK;AAAA,MACH;AAAA,MACA,QAAQ,UAAU,CAAC,WAAW,OAAO,UAAU,KAAK;AAAA,IAAA;AAAA,IAExD,CAAC,SAAS,KAAK;AAAA,EAAA;AAGjB,QAAM,QAAQ,YAAY,CAAC,gBAAyB;;AAClD,YAAQ,KAAK;AACb,QAAI,YAAa,kBAAW,YAAX,mBAAoB;AAAA,EACvC,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS;AAAA,IACb,CAAC,SAAY;AACX,eAAS,IAAI;AACb,YAAM,IAAI;AAAA,IACZ;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAAA;AAGlB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AAEX,UAAM,gBAAgB,CAAC,UAAwB;;AAC7C,UAAI,MAAM,WAAW,EAAG;AACxB,UAAI,GAAC,aAAQ,YAAR,mBAAiB,SAAS,MAAM,UAAiB;AACpD,cAAM,KAAK;AAAA,MACb;AAAA,IACF;AAEA,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,UAAU;AAC1B,cAAM,eAAA;AACN,cAAM,IAAI;AAAA,MACZ;AAAA,IACF;AAEA,aAAS,iBAAiB,eAAe,aAAa;AACtD,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM;AACX,eAAS,oBAAoB,eAAe,aAAa;AACzD,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,SAAS,QAAQ,WAAW;AACzC,iCAAM;AAAA,EACR,GAAG,CAAC,aAAa,IAAI,CAAC;AAEtB,QAAM,YAAY,CAAC,UAAkB;;AACnC,UAAM,WAAW,QAAQ,QAAQ,UAAU,QAAQ;AACnD,mBAAS,QAAQ,OAAO,MAAxB,mBAA2B;AAAA,EAC7B;AAEA,QAAM,gBAAgB,CAAC,UAA8C;AACnE,UAAM,eAAe,SAAS,QAAQ,UAAU,CAAC,SAAS,SAAS,SAAS,aAAa;AACzF,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAA;AACN,iBAAW,eAAe,IAAI,cAAc,gBAAgB,CAAC;AAC7D;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,WAAW;AAC3B,YAAM,eAAA;AACN,iBAAW,eAAe,IAAI,cAAc,gBAAgB,CAAC;AAC7D;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,QAAQ;AACxB,YAAM,eAAA;AACN,gBAAU,CAAC;AACX;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,OAAO;AACvB,YAAM,eAAA;AACN,gBAAU,QAAQ,SAAS,CAAC;AAC5B;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,OAAO;AACvB,YAAM,KAAK;AAAA,IACb;AAAA,EACF;AAEA,QAAM,mBAAmB,CAAC,UAAiD;AACzE,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC3E,YAAM,eAAA;AACN,cAAQ,IAAI;AAAA,IACd;AAAA,EACF;AAEA,QAAM,WAAW,QAAQ,WAAW;AACpC,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,0BAA0B,KAAK,8BAA8B,SAAS,EAAE;AAAA,EAC1F;AAEA,SACE,qBAAC,SAAI,KAAK,SAAS,WAAW,GAAG,wBAAwB,SAAS,GAChE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,OAAO,gBAAgB,GAAG,SAAS,KAAK,SAAS,KAAK;AAAA,QACtD,SAAS,MAAM,QAAQ,CAAC,YAAY,CAAC,OAAO;AAAA,QAC5C,WAAW;AAAA,QACX,WAAW,GAAG,+CAA+C,gBAAgB;AAAA,QAE7E,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,KAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAE5B,QACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,kBAAM,SAAS,OAAO,UAAU;AAChC,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAK,CAAC,SAAS;AACb,2BAAS,QAAQ,KAAK,IAAI;AAAA,gBAC5B;AAAA,gBACA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,UAAU,SAAS,IAAI;AAAA,gBACvB,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,gBAClC,WAAW,CAAC,UAAU;AACpB,sBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,0BAAM,eAAA;AACN,2BAAO,OAAO,KAAK;AAAA,kBACrB;AAAA,gBACF;AAAA,gBACA,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,UAAU;AAAA,gBAAA;AAAA,gBAGZ,UAAA;AAAA,kBAAA,oBAAC,MAAA,EAAK,MAAM,OAAO,MAAM,WAAU,kCAAiC;AAAA,kBACpE,oBAAC,QAAA,EAAK,WAAU,sCAAsC,iBAAO,OAAM;AAAA,kBAClE,SACC,oBAAC,MAAA,EAAK,MAAK,YAAW,WAAU,2BAAA,CAA2B,IAE3D,oBAAC,QAAA,EAAK,WAAU,gCAA+B,eAAW,KAAA,CAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cA1BxD,OAAO;AAAA,YAAA;AAAA,UA8BlB,CAAC;AAAA,UACA,SACC,oBAAC,OAAA,EAAI,WAAU,gFACZ,kBACH,IACE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GAEJ;AAEJ;AAEO,MAAM,iBAAiB,WAAW,mBAAmB;"}
+{"version":3,"file":"icon-menu-picker.js","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"./button\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: string;\n  label: string;\n  description?: string;\n};\n\nexport type IconMenuPickerProps<T extends string> = {\n  value: T;\n  onChange: (next: T) => void;\n  options: IconMenuOption<T>[];\n  ariaLabel: string;\n  triggerTitle?: string | undefined;\n  footer?: ReactNode | undefined;\n  showLabel?: boolean | undefined;\n  className?: string | undefined;\n  triggerClassName?: string | undefined;\n  menuClassName?: string | undefined;\n};\n\nfunction IconMenuPickerInner<T extends string>(\n  {\n    value,\n    onChange,\n    options,\n    ariaLabel,\n    triggerTitle,\n    footer,\n    showLabel,\n    className,\n    triggerClassName,\n    menuClassName,\n  }: IconMenuPickerProps<T>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [open, setOpen] = useState(false);\n\n  useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        0,\n        options.findIndex((option) => option.value === value),\n      ),\n    [options, value],\n  );\n\n  const close = useCallback((returnFocus: boolean) => {\n    setOpen(false);\n    if (returnFocus) triggerRef.current?.focus();\n  }, []);\n\n  const select = useCallback(\n    (next: T) => {\n      onChange(next);\n      close(true);\n    },\n    [close, onChange],\n  );\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onPointerDown = (event: PointerEvent) => {\n      if (event.button !== 0) return;\n      if (!rootRef.current?.contains(event.target as Node)) {\n        close(false);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        close(true);\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [close, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const node = itemRefs.current[activeIndex];\n    node?.focus();\n  }, [activeIndex, open]);\n\n  const focusItem = (index: number) => {\n    const wrapped = (index + options.length) % options.length;\n    itemRefs.current[wrapped]?.focus();\n  };\n\n  const onMenuKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const focusedIndex = itemRefs.current.findIndex((node) => node === document.activeElement);\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) + 1);\n      return;\n    }\n    if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) - 1);\n      return;\n    }\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      focusItem(0);\n      return;\n    }\n    if (event.key === \"End\") {\n      event.preventDefault();\n      focusItem(options.length - 1);\n      return;\n    }\n    if (event.key === \"Tab\") {\n      close(false);\n    }\n  };\n\n  const onTriggerKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setOpen(true);\n    }\n  };\n\n  const selected = options[activeIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  return (\n    <div ref={rootRef} className={cn(\"relative inline-flex\", showLabel && \"w-full\", className)}>\n      <Button\n        ref={triggerRef}\n        type=\"button\"\n        variant=\"ghost\"\n        size={showLabel ? \"default\" : \"icon\"}\n        aria-label={ariaLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        title={triggerTitle ?? `${ariaLabel}: ${selected.label}`}\n        onClick={() => setOpen((current) => !current)}\n        onKeyDown={onTriggerKeyDown}\n        className={cn(\n          \"text-muted-foreground hover:text-foreground\",\n          showLabel && \"w-full justify-start\",\n          triggerClassName,\n        )}\n      >\n        <Icon name={selected.icon} className={showLabel ? \"shrink-0 text-foreground\" : undefined} />\n        {showLabel && (\n          <>\n            <span className=\"min-w-0 flex-1 truncate text-left capitalize\">{selected.label}</span>\n            <Icon name=\"ph:caret-up-down\" className=\"shrink-0 text-muted-foreground\" />\n          </>\n        )}\n      </Button>\n      {open && (\n        <div\n          role=\"menu\"\n          aria-label={ariaLabel}\n          onKeyDown={onMenuKeyDown}\n          className={cn(\n            \"absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n            menuClassName,\n          )}\n        >\n          {options.map((option, index) => {\n            const active = option.value === value;\n            return (\n              <button\n                key={option.value}\n                ref={(node) => {\n                  itemRefs.current[index] = node;\n                }}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                tabIndex={active ? 0 : -1}\n                onClick={() => select(option.value)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    select(option.value);\n                  }\n                }}\n                className={cn(\n                  \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n                  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n                  active && \"text-foreground\",\n                )}\n              >\n                <Icon name={option.icon} className=\"shrink-0 text-muted-foreground\" />\n                <span className=\"min-w-0 flex-1 truncate capitalize\">{option.label}</span>\n                {active ? (\n                  <Icon name=\"ph:check\" className=\"shrink-0 text-foreground\" />\n                ) : (\n                  <span className=\"inline-block size-4 shrink-0\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n          {footer ? (\n            <div className=\"mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground\">\n              {footer}\n            </div>\n          ) : null}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const IconMenuPicker = forwardRef(IconMenuPickerInner) as <T extends string>(\n  props: IconMenuPickerProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":[],"mappings":"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"}

package/dist/components.d.ts

@@ -7,6 +7,7 @@ export { MultiSelect, type MultiSelectOption, type MultiSelectProps, } from './c
 export { Select, type SelectProps, type SelectOption } from './components/select';
 export { ThemeSwitcher, type ThemeSwitcherProps } from './components/theme-switcher';
 export { DensitySwitcher, type DensitySwitcherProps } from './components/density-switcher';
+export { IconMenuPicker, type IconMenuPickerProps, type IconMenuOption, } from './components/icon-menu-picker';
 export { SplitPane, type SplitPaneProps } from './layout/SplitPane';
 export { Section, DetailEmptyState, type SectionProps, type DetailEmptyStateProps, } from './layout/Section';
 export { HoverCard, type HoverCardProps, type HoverCardPlacement } from './overlay/HoverCard';

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvF,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,SAAS,EACT,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,GACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAE3F,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,GAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvF,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,SAAS,EACT,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,GACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC3F,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,cAAc,GACpB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,GAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components.js

@@ -7,6 +7,7 @@ import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
 import { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
+import { IconMenuPicker } from "./components/icon-menu-picker.js";
 import { SplitPane } from "./layout/SplitPane.js";
 import { DetailEmptyState, Section } from "./layout/Section.js";
 import { HoverCard } from "./overlay/HoverCard.js";
@@ -19,6 +20,7 @@ export {
   DetailEmptyState,
   FilterBar,
   HoverCard,
+  IconMenuPicker,
   Modal,
   MultiSelect,
   RangeSlider,

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/index.js

@@ -14,6 +14,7 @@ import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
 import { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
+import { IconMenuPicker } from "./components/icon-menu-picker.js";
 import { SplitPane } from "./layout/SplitPane.js";
 import { DetailEmptyState, Section } from "./layout/Section.js";
 import { HoverCard } from "./overlay/HoverCard.js";
@@ -100,6 +101,7 @@ export {
   HarPanel,
   HoverCard,
   Icon,
+  IconMenuPicker,
   InlineError,
   JsonView,
   JvmStackFrameRow,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flanksource/clicky-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.",
   "homepage": "https://github.com/flanksource/clicky-ui#readme",
   "bugs": "https://github.com/flanksource/clicky-ui/issues",