@flanksource/clicky-ui 0.2.12 → 0.2.13

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

@@ -1,8 +1,10 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useCallback, useEffect } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useListNavigation, useTypeahead, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { Button } from "./button.js";
+import { IconButton } from "./IconButton.js";
 import { UiChevronDown } from "../icons/components/UiChevronDown.js";
 import { UiCheck } from "../icons/components/UiCheck.js";
 function IconMenuPickerInner({
@@ -16,137 +18,104 @@ function IconMenuPickerInner({
   className,
   triggerClassName,
   menuClassName
-}, ref) {
-  const rootRef = useRef(null);
-  const triggerRef = useRef(null);
-  const itemRefs = useRef([]);
+}, forwardedRef) {
   const [open, setOpen] = useState(false);
-  useImperativeHandle(ref, () => rootRef.current);
-  const activeIndex = useMemo(
-    () => Math.max(
-      0,
-      options.findIndex((option) => option.value === value)
-    ),
+  const [activeIndex, setActiveIndex] = useState(null);
+  const listRef = useRef([]);
+  const labelsRef = useRef(options.map((o) => o.label));
+  labelsRef.current = options.map((o) => o.label);
+  const selectedIndex = useMemo(
+    () => options.findIndex((option) => option.value === value),
     [options, value]
   );
-  const close = useCallback((returnFocus) => {
-    var _a;
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    // offset(6) reproduces the previous 0.375rem gap; flip opens the menu
+    // upward when the trigger is near the bottom edge; shift slides it back
+    // on-screen at the left/right edges. The 8px padding keeps a gutter.
+    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })]
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "menu" });
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    selectedIndex,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    activeIndex,
+    onMatch: setActiveIndex
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    click,
+    dismiss,
+    role,
+    listNav,
+    typeahead
+  ]);
+  const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);
+  const select = (next) => {
+    onChange(next);
     setOpen(false);
-    if (returnFocus) (_a = triggerRef.current) == null ? void 0 : _a.focus();
-  }, []);
-  const select = useCallback(
-    (next) => {
-      onChange(next);
-      close(true);
-    },
-    [close, onChange]
-  );
-  useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event) => {
-      var _a;
-      if (event.button !== 0) return;
-      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(event.target))) {
-        close(false);
-      }
-    };
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        close(true);
-      }
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [close, open]);
-  useEffect(() => {
-    if (!open) return;
-    const node = itemRefs.current[activeIndex];
-    node == null ? void 0 : node.focus();
-  }, [activeIndex, open]);
-  const focusItem = (index) => {
-    var _a;
-    const wrapped = (index + options.length) % options.length;
-    (_a = itemRefs.current[wrapped]) == null ? void 0 : _a.focus();
   };
-  const onMenuKeyDown = (event) => {
-    const focusedIndex = itemRefs.current.findIndex((node) => node === document.activeElement);
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) + 1);
-      return;
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) - 1);
-      return;
-    }
-    if (event.key === "Home") {
-      event.preventDefault();
-      focusItem(0);
-      return;
-    }
-    if (event.key === "End") {
-      event.preventDefault();
-      focusItem(options.length - 1);
-      return;
-    }
-    if (event.key === "Tab") {
-      close(false);
-    }
-  };
-  const onTriggerKeyDown = (event) => {
-    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      setOpen(true);
-    }
-  };
-  const selected = options[activeIndex];
+  const selected = options[selectedIndex];
   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", showLabel && "w-full", className), children: [
-    /* @__PURE__ */ jsxs(
+  const triggerTitleText = triggerTitle ?? `${ariaLabel}: ${selected.label}`;
+  return /* @__PURE__ */ jsxs("div", { ref: referenceRef, className: cn("relative inline-flex", showLabel && "w-full", className), children: [
+    showLabel ? /* @__PURE__ */ jsxs(
       Button,
       {
-        ref: triggerRef,
         type: "button",
         variant: "ghost",
-        size: showLabel ? "default" : "icon",
+        size: "default",
         "aria-label": ariaLabel,
         "aria-haspopup": "menu",
         "aria-expanded": open,
-        title: triggerTitle ?? `${ariaLabel}: ${selected.label}`,
-        onClick: () => setOpen((current) => !current),
-        onKeyDown: onTriggerKeyDown,
+        title: triggerTitleText,
         className: cn(
-          "text-muted-foreground hover:text-foreground",
-          showLabel && "w-full justify-start",
+          "w-full justify-start text-muted-foreground hover:text-foreground",
           triggerClassName
         ),
+        ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ jsx(Icon, { icon: selected.icon, ...showLabel ? { className: "shrink-0 text-foreground" } : {} }),
-          showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left capitalize", children: `${ariaLabel}: ${selected.label}` }),
-            /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "shrink-0 text-muted-foreground" })
-          ] })
+          /* @__PURE__ */ jsx(Icon, { icon: selected.icon, className: "shrink-0 text-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left capitalize", children: `${ariaLabel}: ${selected.label}` }),
+          /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "shrink-0 text-muted-foreground" })
         ]
       }
+    ) : /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: selected.icon,
+        label: ariaLabel,
+        title: triggerTitleText,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        className: triggerClassName,
+        ...getReferenceProps()
+      }
     ),
-    open && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, initialFocus: selectedIndex, children: /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: refs.setFloating,
         role: "menu",
         "aria-label": ariaLabel,
-        onKeyDown: onMenuKeyDown,
+        style: floatingStyles,
         className: cn(
-          "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",
+          "z-[9999] min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
           menuClassName
         ),
+        ...getFloatingProps(),
         children: [
           options.map((option, index) => {
             const active = option.value === value;
@@ -154,24 +123,26 @@ function IconMenuPickerInner({
               "button",
               {
                 ref: (node) => {
-                  itemRefs.current[index] = node;
+                  listRef.current[index] = node;
                 },
                 type: "button",
                 role: "menuitemradio",
                 "aria-checked": active,
-                tabIndex: active ? 0 : -1,
-                onClick: () => select(option.value),
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    select(option.value);
-                  }
-                },
+                tabIndex: index === activeIndex ? 0 : -1,
                 className: cn(
                   "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors",
                   "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none",
                   active && "text-foreground"
                 ),
+                ...getItemProps({
+                  onClick: () => select(option.value),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      select(option.value);
+                    }
+                  }
+                }),
                 children: [
                   /* @__PURE__ */ jsx(Icon, { icon: option.icon, className: "shrink-0 text-muted-foreground" }),
                   /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate capitalize", children: option.label }),
@@ -184,7 +155,7 @@ function IconMenuPickerInner({
           footer ? /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground", children: footer }) : null
         ]
       }
-    )
+    ) }) })
   ] });
 }
 const IconMenuPicker = forwardRef(IconMenuPickerInner);

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, type StaticIconComponent } from \"../data/Icon\";\nimport { UiCheck, UiChevronDown } from \"../icons\";\nimport { Button } from \"./button\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: StaticIconComponent;\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 icon={selected.icon} {...(showLabel ? { className: \"shrink-0 text-foreground\" } : {})} />\n        {showLabel && (\n          <>\n            <span className=\"min-w-0 flex-1 truncate text-left capitalize\">\n              {`${ariaLabel}: ${selected.label}`}\n            </span>\n            <Icon icon={UiChevronDown} 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 icon={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 icon={UiCheck} 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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"}
+{"version":3,"file":"icon-menu-picker.js","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  useTypeahead,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiCheck, UiChevronDown } from \"../icons\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./IconButton\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: StaticIconComponent;\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  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [open, setOpen] = useState(false);\n  // Index of the item highlighted by keyboard navigation. Null until the user\n  // arrows/typeaheads, so a pointer-opened menu starts with the selected row\n  // focused (selectedIndex below) rather than the first.\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const labelsRef = useRef<string[]>(options.map((o) => o.label));\n  labelsRef.current = options.map((o) => o.label);\n\n  const selectedIndex = useMemo(\n    () => options.findIndex((option) => option.value === value),\n    [options, value],\n  );\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(6) reproduces the previous 0.375rem gap; flip opens the menu\n    // upward when the trigger is near the bottom edge; shift slides it back\n    // on-screen at the left/right edges. The 8px padding keeps a gutter.\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    onMatch: setActiveIndex,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n    typeahead,\n  ]);\n\n  // Keep the trigger wrapper available both to floating-ui (as the positioning\n  // reference) and to the consumer's forwarded ref.\n  const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n  const select = (next: T) => {\n    onChange(next);\n    setOpen(false);\n  };\n\n  const selected = options[selectedIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  const triggerTitleText = triggerTitle ?? `${ariaLabel}: ${selected.label}`;\n\n  return (\n    <div ref={referenceRef} className={cn(\"relative inline-flex\", showLabel && \"w-full\", className)}>\n      {showLabel ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"default\"\n          aria-label={ariaLabel}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          title={triggerTitleText}\n          className={cn(\n            \"w-full justify-start text-muted-foreground hover:text-foreground\",\n            triggerClassName,\n          )}\n          {...getReferenceProps()}\n        >\n          <Icon icon={selected.icon} className=\"shrink-0 text-foreground\" />\n          <span className=\"min-w-0 flex-1 truncate text-left capitalize\">\n            {`${ariaLabel}: ${selected.label}`}\n          </span>\n          <Icon icon={UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n        </Button>\n      ) : (\n        <IconButton\n          icon={selected.icon}\n          label={ariaLabel}\n          title={triggerTitleText}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          className={triggerClassName}\n          {...getReferenceProps()}\n        />\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false} initialFocus={selectedIndex}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={ariaLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {options.map((option, index) => {\n                const active = option.value === value;\n                return (\n                  <button\n                    key={option.value}\n                    ref={(node) => {\n                      listRef.current[index] = node;\n                    }}\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    aria-checked={active}\n                    tabIndex={index === activeIndex ? 0 : -1}\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                    {...getItemProps({\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                    })}\n                  >\n                    <Icon icon={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 icon={UiCheck} 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          </FloatingFocusManager>\n        </FloatingPortal>\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.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const button = require("./components/button.cjs");
+const IconButton = require("./components/IconButton.cjs");
 const SplitButton = require("./components/SplitButton.cjs");
 const FormatOptionsDropdown = require("./components/FormatOptionsDropdown.cjs");
 const DateField = require("./components/DateField.cjs");
@@ -12,6 +13,8 @@ const FilterBar = require("./components/FilterBar.cjs");
 const MultiSelect = require("./components/MultiSelect.cjs");
 const select = require("./components/select.cjs");
 const Combobox = require("./components/Combobox.cjs");
+const WorkloadPicker = require("./components/WorkloadPicker.cjs");
+const SecretKeySelector = require("./components/SecretKeySelector.cjs");
 const themeSwitcher = require("./components/theme-switcher.cjs");
 const densitySwitcher = require("./components/density-switcher.cjs");
 const iconMenuPicker = require("./components/icon-menu-picker.cjs");
@@ -25,6 +28,7 @@ const HoverCard = require("./overlay/HoverCard.cjs");
 const Modal = require("./overlay/Modal.cjs");
 exports.Button = button.Button;
 exports.buttonVariants = button.buttonVariants;
+exports.IconButton = IconButton.IconButton;
 exports.SplitButton = SplitButton.SplitButton;
 exports.CLICKY_FORMAT_OPTIONS = FormatOptionsDropdown.CLICKY_FORMAT_OPTIONS;
 exports.FormatOptionsDropdown = FormatOptionsDropdown.FormatOptionsDropdown;
@@ -37,6 +41,12 @@ exports.FilterBar = FilterBar.FilterBar;
 exports.MultiSelect = MultiSelect.MultiSelect;
 exports.Select = select.Select;
 exports.Combobox = Combobox.Combobox;
+exports.WorkloadPicker = WorkloadPicker.WorkloadPicker;
+exports.kindForValue = WorkloadPicker.kindForValue;
+exports.loadedWorkloads = WorkloadPicker.loadedWorkloads;
+exports.parseWorkloadKey = WorkloadPicker.parseWorkloadKey;
+exports.workloadKey = WorkloadPicker.workloadKey;
+exports.SecretKeySelector = SecretKeySelector.SecretKeySelector;
 exports.ThemeSwitcher = themeSwitcher.ThemeSwitcher;
 exports.DensitySwitcher = densitySwitcher.DensitySwitcher;
 exports.IconMenuPicker = iconMenuPicker.IconMenuPicker;

package/dist/components.cjs.map

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

package/dist/components.d.ts

@@ -1,4 +1,5 @@
 export { Button, buttonVariants, type ButtonProps } from './components/button';
+export { IconButton, type IconButtonProps } from './components/IconButton';
 export { SplitButton, type SplitButtonProps } from './components/SplitButton';
 export { FormatOptionsDropdown, CLICKY_FORMAT_OPTIONS, type FormatOptionsDropdownProps, type FormatOption, } from './components/FormatOptionsDropdown';
 export { DateField, type DateFieldMode, type DateFieldProps } from './components/DateField';
@@ -10,6 +11,8 @@ export { FilterBar, type FilterBarBooleanFilter, type FilterBarEnumFilter, type
 export { MultiSelect, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect';
 export { Select, type SelectProps, type SelectOption } from './components/select';
 export { Combobox, type ComboboxProps, type ComboboxOption, type ComboboxSingleProps, type ComboboxMultiProps, } from './components/Combobox';
+export { WorkloadPicker, workloadKey, parseWorkloadKey, kindForValue, loadedWorkloads, type WorkloadPickerProps, type WorkloadKind, type WorkloadResource, type ParsedWorkloadKey, } from './components/WorkloadPicker';
+export { SecretKeySelector, type SecretKeySelectorProps, type SecretKind, type SecretKeyValue, type SecretResource, type KeyPreview, } from './components/SecretKeySelector';
 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';

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"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"}

package/dist/components.js

@@ -1,4 +1,5 @@
 import { Button, buttonVariants } from "./components/button.js";
+import { IconButton } from "./components/IconButton.js";
 import { SplitButton } from "./components/SplitButton.js";
 import { CLICKY_FORMAT_OPTIONS, FormatOptionsDropdown } from "./components/FormatOptionsDropdown.js";
 import { DateField } from "./components/DateField.js";
@@ -10,6 +11,8 @@ import { FilterBar } from "./components/FilterBar.js";
 import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
 import { Combobox } from "./components/Combobox.js";
+import { WorkloadPicker, kindForValue, loadedWorkloads, parseWorkloadKey, workloadKey } from "./components/WorkloadPicker.js";
+import { SecretKeySelector } from "./components/SecretKeySelector.js";
 import { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
 import { IconMenuPicker } from "./components/icon-menu-picker.js";
@@ -35,21 +38,28 @@ export {
   FilterBar,
   FormatOptionsDropdown,
   HoverCard,
+  IconButton,
   IconMenuPicker,
   JsonSchemaForm,
   Modal,
   MultiSelect,
   RangeSlider,
+  SecretKeySelector,
   Section,
   Select,
   SplitButton,
   SplitPane,
   ThemeSwitcher,
   TimeRange,
+  WorkloadPicker,
   buttonVariants,
   effectiveProperties,
   isOpenStringMap,
+  kindForValue,
+  loadedWorkloads,
   matchesIf,
-  resolveControl
+  parseWorkloadKey,
+  resolveControl,
+  workloadKey
 };
 //# sourceMappingURL=components.js.map

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/data/Clicky.cjs

@@ -1739,7 +1739,7 @@ function ClickyTable({
   const effectiveExternalFilters = externalFilters ?? runtime.tableExternalFilters;
   const effectivePagination = pagination ?? runtime.tablePagination;
   const effectiveMenuActions = menuActions ?? runtime.tableMenuActions;
-  if (columns.length === 0 || rows.length === 0) {
+  if (columns.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "No data" });
   }
   if (shouldRenderRowsAsCollapsedStructs(columns, rows)) {