@flanksource/clicky-ui 0.3.15 → 0.3.16

package/dist/components/Combobox.d.ts

@@ -1,113 +1,4 @@
-import { KeyboardEvent, ReactNode } from 'react';
-import { LabelIconSpec } from '../data/Icon';
-import { FormSize } from './json-schema-form-size';
-export type ComboboxOption = {
-    value: string;
-    /** Full label used for searching and in the open option menu. */
-    label: string;
-    /** Optional compact label used only while this option is selected and closed. */
-    selectedLabel?: string;
-    disabled?: boolean;
-    /** Leading glyph for the option: a runtime icon name or a rendered node. */
-    icon?: LabelIconSpec;
-    /**
-     * Optional section label. A non-interactive header renders above the first
-     * option of each group (options are grouped by contiguous `group` value in
-     * the order provided). Options without a `group` render no header.
-     */
-    group?: string;
-    /** Browser tooltip on the option row (for truncated or explanatory labels). */
-    title?: string;
-};
-type ComboboxBaseProps = {
-    /** Available options, rendered in the order provided. */
-    options: ComboboxOption[];
-    /** Ghost text when no value is set. */
-    placeholder?: string;
-    /** Optional label rendered inline inside the control, before the input. */
-    label?: ReactNode;
-    /**
-     * Accessible name for the input. Use when `label` is a non-string node (e.g.
-     * an icon) so the control still has a text name for screen readers; defaults
-     * to `label` when it is a string.
-     */
-    ariaLabel?: string;
-    /** Disables the input. */
-    disabled?: boolean;
-    /** When true, the value cannot be cleared (the clear button is hidden). */
-    required?: boolean;
-    /**
-     * Marks the control as invalid: renders a destructive border and sets
-     * aria-invalid. Purely presentational — the consumer decides what invalid
-     * means (e.g. a value absent from the options in a strict picker).
-     */
-    invalid?: boolean;
-    /**
-     * When false, the value is restricted to the provided options — typed text
-     * that does not match an option is discarded instead of committed. Defaults
-     * to true (freeform entry allowed).
-     */
-    allowCustomValue?: boolean;
-    /** HTML id for the input element. */
-    id?: string;
-    /**
-     * Overrides the input's height/padding/text size with an explicit size token
-     * (xs–xl). When unset, the input uses the global density tokens.
-     */
-    size?: FormSize;
-    /** Classes applied to the root wrapper. */
-    className?: string;
-    /** Shows a loading indicator when options are being fetched. */
-    loading?: boolean;
-    /**
-     * Optional async search invoked (debounced ~250ms) as the user types. The
-     * consumer fetches and feeds matching options back via the `options` prop
-     * (setting `loading` while in flight). When set, the component renders the
-     * provided `options` as-is instead of filtering them client-side — the
-     * server has already filtered. When absent, typing filters `options`
-     * client-side as before.
-     */
-    onSearch?: (query: string) => void;
-    /** Called when a key is pressed in the input. */
-    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
-    /** Trailing in-field adornment, rendered left of the clear/chevron controls. */
-    suffix?: ReactNode;
-    /** Leading in-field adornment, rendered at the left edge of the input. */
-    prefix?: ReactNode;
-    /** Non-interactive content pinned below the option rows (e.g. "… and N more"). */
-    footer?: ReactNode;
-};
-export type ComboboxSingleProps = ComboboxBaseProps & {
-    multiple?: false;
-    tristate?: false;
-    /** Controlled selected value. */
-    value: string;
-    /** Called when the selected value changes (from list or freeform input). */
-    onChange: (value: string) => void;
-};
-export type ComboboxMultiProps = ComboboxBaseProps & {
-    multiple: true;
-    tristate?: false;
-    /** Controlled selected values. */
-    value: string[];
-    /** Called with the complete next value array after each toggle. */
-    onChange: (value: string[]) => void;
-};
-export type ComboboxTriStateMode = "include" | "exclude";
-export type ComboboxTriStateProps = ComboboxBaseProps & {
-    multiple: true;
-    /**
-     * Tri-state selection: each option cycles unset → include → exclude. Rows
-     * render the FilterPill switch; the option itself stays the only focusable
-     * surface (keyboard cycles via Enter on the highlighted row).
-     */
-    tristate: true;
-    /** Controlled option modes; unset options are absent from the record. */
-    value: Record<string, ComboboxTriStateMode>;
-    /** Called with the complete next record after each transition. */
-    onChange: (value: Record<string, ComboboxTriStateMode>) => void;
-};
-export type ComboboxProps = ComboboxSingleProps | ComboboxMultiProps | ComboboxTriStateProps;
+import { ComboboxProps } from './combobox-types';
+export type { ComboboxMultiProps, ComboboxOption, ComboboxProps, ComboboxSingleProps, ComboboxTriStateMode, ComboboxTriStateProps, } from './combobox-types';
 export declare function Combobox(props: ComboboxProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Combobox.d.ts.map

package/dist/components/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAEV,aAAa,EAEd,MAAM,kBAAkB,CAAC;AAS1B,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAE1B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA0c5C"}

package/dist/components/Combobox.js

@@ -1,16 +1,12 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useEffect, useLayoutEffect, Fragment } from "react";
-import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useEffect, useLayoutEffect } from "react";
 import { cn } from "../lib/utils.js";
-import { FilterPill } from "../data/FilterPill.js";
-import { LabelIcon, Icon } from "../data/Icon.js";
+import { LabelIcon } from "../data/Icon.js";
 import { inputSizeClass } from "./json-schema-form-size.js";
 import { useFloatingZIndex } from "../overlay/modalStack.js";
-import { UiClose } from "../icons/components/UiClose.js";
-import { UiChevronDown } from "../icons/components/UiChevronDown.js";
-import { UiCheck } from "../icons/components/UiCheck.js";
-const MENU_MAX_WIDTH_PX = 400;
-const MENU_MAX_HEIGHT_PX = 256;
+import { ComboboxActions } from "./ComboboxActions.js";
+import { ComboboxMenu } from "./ComboboxMenu.js";
+import { withSelectedComboboxOptions, comboboxLabelPadding, COMBOBOX_MENU_MAX_WIDTH_PX, COMBOBOX_MENU_MAX_HEIGHT_PX } from "./combobox-utils.js";
 function Combobox(props) {
   const {
     options,
@@ -21,6 +17,8 @@ function Combobox(props) {
     required,
     invalid,
     allowCustomValue = true,
+    onNew,
+    onCreate,
     id,
     size,
     className,
@@ -54,6 +52,12 @@ function Combobox(props) {
   const [highlighted, setHighlighted] = useState(-1);
   const [labelWidth, setLabelWidth] = useState(0);
   const isSelected = (optValue) => selectedValues.includes(optValue);
+  const selectedOption = useMemo(() => {
+    if (multiple) return void 0;
+    const selected = selectedValues[0];
+    if (!selected) return void 0;
+    return options.find((option) => option.value === selected) ?? (allowCustomValue ? (onNew == null ? void 0 : onNew(selected)) ?? void 0 : void 0);
+  }, [allowCustomValue, multiple, onNew, options, selectedValues]);
   const closedLabel = useMemo(() => {
     if (tristate) {
       const values = Object.values(modes);
@@ -68,14 +72,12 @@ function Combobox(props) {
       return `${labels.length} selected`;
     }
     const single = selectedValues[0] ?? "";
-    const selected = options.find((o) => o.value === single);
-    return (selected == null ? void 0 : selected.selectedLabel) ?? (selected == null ? void 0 : selected.label) ?? single;
-  }, [tristate, modes, multiple, options, selectedValues]);
-  const selectedOption = multiple ? void 0 : options.find((o) => o.value === selectedValues[0]);
+    return (selectedOption == null ? void 0 : selectedOption.selectedLabel) ?? (selectedOption == null ? void 0 : selectedOption.label) ?? single;
+  }, [tristate, modes, multiple, options, selectedOption, selectedValues]);
   const effectivePrefix = prefix ?? ((selectedOption == null ? void 0 : selectedOption.icon) != null ? /* @__PURE__ */ jsx(LabelIcon, { icon: selectedOption.icon, className: "size-4" }) : null);
   const displayValue = open ? query : closedLabel;
   const filtered = useMemo(() => {
-    if (onSearch) return withSelectedOptions(options, selectedValues);
+    if (onSearch) return withSelectedComboboxOptions(options, selectedValues);
     const q = query.toLowerCase().trim();
     if (!q) return options;
     return options.filter(
@@ -89,10 +91,22 @@ function Combobox(props) {
   }, [onSearch, open, query]);
   const trimmedQuery = query.trim();
   const customEntry = useMemo(() => {
-    if (!tristate || !allowCustomValue || !trimmedQuery) return null;
-    const exists = filtered.some((o) => o.value === trimmedQuery);
-    return exists ? null : { value: trimmedQuery, label: trimmedQuery };
-  }, [tristate, allowCustomValue, trimmedQuery, filtered]);
+    if (!allowCustomValue || !trimmedQuery || !tristate && (multiple || !onNew) || options.some((option) => option.value === trimmedQuery)) {
+      return null;
+    }
+    if (onNew) return onNew(trimmedQuery);
+    return {
+      value: trimmedQuery,
+      label: `Add "${trimmedQuery}"`
+    };
+  }, [
+    allowCustomValue,
+    multiple,
+    onNew,
+    options,
+    trimmedQuery,
+    tristate
+  ]);
   const navOptions = useMemo(
     () => customEntry ? [...filtered, customEntry] : filtered,
     [filtered, customEntry]
@@ -137,11 +151,17 @@ function Combobox(props) {
       if (!anchor) return;
       const rect = anchor.getBoundingClientRect();
       const viewportCap = window.innerWidth - rect.left - 8;
-      const maxWidth = Math.max(rect.width, Math.min(MENU_MAX_WIDTH_PX, viewportCap));
+      const maxWidth = Math.max(
+        rect.width,
+        Math.min(COMBOBOX_MENU_MAX_WIDTH_PX, viewportCap)
+      );
       const spaceBelow = window.innerHeight - rect.bottom - 8;
       const spaceAbove = rect.top - 8;
-      const openUp = spaceBelow < MENU_MAX_HEIGHT_PX && spaceAbove > spaceBelow;
-      const maxHeight = Math.min(MENU_MAX_HEIGHT_PX, openUp ? spaceAbove : spaceBelow);
+      const openUp = spaceBelow < COMBOBOX_MENU_MAX_HEIGHT_PX && spaceAbove > spaceBelow;
+      const maxHeight = Math.min(
+        COMBOBOX_MENU_MAX_HEIGHT_PX,
+        openUp ? spaceAbove : spaceBelow
+      );
       setMenuPos({
         ...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
         left: rect.left,
@@ -190,31 +210,51 @@ function Combobox(props) {
   function commitAndClose() {
     const trimmed = query.trim();
     if (!multiple && allowCustomValue && trimmed && trimmed !== selectedValues[0]) {
-      emit([trimmed]);
+      const existing = options.find((option) => option.value === trimmed);
+      const candidate = existing ?? (onNew ? onNew(trimmed) : {
+        value: trimmed,
+        label: trimmed
+      });
+      const created = candidate ? existing ? existing.value : onCreate ? onCreate(candidate) : candidate.value : null;
+      if (created !== null) emit([created]);
     }
     setQuery("");
     setOpen(false);
     setHighlighted(-1);
   }
   function selectOption(opt) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
+    if (opt === customEntry) {
+      const created = onCreate ? onCreate(opt) : opt.value;
+      if (created !== null) {
+        if (tristate) setMode(created, "include");
+        else emit([created]);
+      }
+      if (!tristate) {
+        setQuery("");
+        setOpen(false);
+        setHighlighted(-1);
+      }
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      return;
+    }
     if (tristate) {
       cycleOption(opt.value);
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      (_b = inputRef.current) == null ? void 0 : _b.focus();
       return;
     }
     if (multiple) {
       const next = isSelected(opt.value) ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
       emit(next);
       setHighlighted(-1);
-      (_b = inputRef.current) == null ? void 0 : _b.focus();
+      (_c = inputRef.current) == null ? void 0 : _c.focus();
       return;
     }
     emit([opt.value]);
     setQuery("");
     setOpen(false);
     setHighlighted(-1);
-    (_c = inputRef.current) == null ? void 0 : _c.focus();
+    (_d = inputRef.current) == null ? void 0 : _d.focus();
   }
   function clear() {
     var _a;
@@ -297,6 +337,7 @@ function Combobox(props) {
           disabled,
           placeholder,
           value: displayValue,
+          ...!open && closedLabel ? { title: closedLabel } : {},
           onChange: (e) => {
             setQuery(e.target.value);
             if (!open) setOpen(true);
@@ -315,33 +356,18 @@ function Combobox(props) {
             "disabled:cursor-not-allowed disabled:opacity-50",
             invalid && "border-destructive focus-visible:ring-destructive"
           ),
-          style: label != null ? labelPadding(label, labelWidth) : void 0
+          style: label != null ? comboboxLabelPadding(label, labelWidth) : void 0
         }
       ),
       effectivePrefix && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1.5 flex items-center", children: effectivePrefix }),
       suffix && /* @__PURE__ */ jsx("div", { className: cn("absolute flex h-full items-center", showClear ? "right-[3.75rem]" : "right-7"), children: suffix }),
-      showClear && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          "aria-label": "Clear",
-          onClick: clear,
-          className: "absolute right-7 flex h-full items-center px-1 text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-xs" })
-        }
-      ),
-      loading ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5 animate-spin text-muted-foreground", viewBox: "0 0 16 16", fill: "none", children: [
-        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "2", opacity: "0.25" }),
-        /* @__PURE__ */ jsx("path", { d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
-      ] }) }) : /* @__PURE__ */ jsx(
-        "button",
+      /* @__PURE__ */ jsx(
+        ComboboxActions,
         {
-          type: "button",
-          tabIndex: -1,
           disabled,
-          "aria-label": "Toggle options",
-          onClick: () => {
+          loading,
+          onClear: clear,
+          onToggle: () => {
             var _a;
             if (open) {
               commitAndClose();
@@ -350,137 +376,33 @@ function Combobox(props) {
               (_a = inputRef.current) == null ? void 0 : _a.focus();
             }
           },
-          className: "pointer-events-auto absolute right-0 flex h-full items-center px-2 text-muted-foreground",
-          children: /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "text-xs" })
+          showClear
         }
       )
     ] }),
-    open && menuPos && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          id: listId,
-          ref: listRef,
-          role: "listbox",
-          "aria-multiselectable": multiple || void 0,
-          style: {
-            position: "fixed",
-            ...menuPos.top != null ? { top: menuPos.top } : { bottom: menuPos.bottom },
-            left: menuPos.left,
-            // Grow to fit the widest option, but never narrower than the input
-            // nor wider than 400px (beyond which option labels truncate). The
-            // cap is also bounded by the viewport so the menu can't overflow.
-            minWidth: menuPos.width,
-            maxWidth: menuPos.maxWidth,
-            maxHeight: menuPos.maxHeight,
-            zIndex: floatingZ
-          },
-          className: "w-max overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
-          children: [
-            loading && filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "Loading…" }),
-            !loading && filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "No results" }),
-            filtered.map((opt, i) => {
-              var _a;
-              const selected = isSelected(opt.value);
-              const mode = tristate ? modes[opt.value] : void 0;
-              const showHeader = opt.group != null && opt.group !== ((_a = filtered[i - 1]) == null ? void 0 : _a.group);
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                showHeader && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    role: "presentation",
-                    className: "select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
-                    children: opt.group
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    id: listId ? `${listId}-${i}` : void 0,
-                    role: "option",
-                    "aria-selected": tristate ? mode != null : selected,
-                    "aria-disabled": opt.disabled,
-                    ...mode != null ? { "aria-label": `${opt.label}, ${mode === "include" ? "included" : "excluded"}` } : {},
-                    ...opt.title !== void 0 ? { title: opt.title } : {},
-                    ...tristate ? { "data-filter-option": opt.value } : {},
-                    onMouseDown: (e) => {
-                      e.preventDefault();
-                      if (!tristate && !opt.disabled) selectOption(opt);
-                    },
-                    ...tristate ? { onClick: () => {
-                      if (!opt.disabled) selectOption(opt);
-                    } } : {},
-                    onMouseEnter: () => setHighlighted(i),
-                    className: cn(
-                      "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
-                      i === highlighted && "bg-accent",
-                      selected && !tristate && "font-medium",
-                      opt.disabled && "cursor-not-allowed opacity-50"
-                    ),
-                    children: tristate ? /* @__PURE__ */ jsx(
-                      FilterPill,
-                      {
-                        mode: mode ?? "neutral",
-                        togglePosition: "right",
-                        interactive: false,
-                        label: opt.label,
-                        onModeChange: (next) => setMode(opt.value, next),
-                        className: "w-full justify-between"
-                      }
-                    ) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                      /* @__PURE__ */ jsx(
-                        Icon,
-                        {
-                          icon: UiCheck,
-                          className: cn("text-xs shrink-0", selected ? "opacity-100" : "opacity-0")
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(LabelIcon, { icon: opt.icon, className: "text-sm text-muted-foreground" }),
-                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: opt.label })
-                    ] })
-                  }
-                )
-              ] }, opt.value);
-            }),
-            customEntry && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                id: listId ? `${listId}-${filtered.length}` : void 0,
-                role: "option",
-                "aria-selected": false,
-                "data-filter-add-custom": customEntry.value,
-                onMouseDown: (e) => e.preventDefault(),
-                onClick: () => selectOption(customEntry),
-                onMouseEnter: () => setHighlighted(filtered.length),
-                className: cn(
-                  "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary",
-                  highlighted === filtered.length && "bg-accent"
-                ),
-                children: [
-                  'Add "',
-                  customEntry.value,
-                  '"'
-                ]
-              }
-            ),
-            footer != null && /* @__PURE__ */ jsx("div", { className: "select-none px-2 py-1.5 text-[11px] text-muted-foreground", children: footer })
-          ]
-        }
-      ),
-      document.body
+    open && menuPos && typeof document !== "undefined" && /* @__PURE__ */ jsx(
+      ComboboxMenu,
+      {
+        customEntry,
+        filtered,
+        floatingZ,
+        footer,
+        highlighted,
+        isSelected,
+        listId,
+        listRef,
+        loading,
+        menuPos,
+        modes,
+        multiple,
+        onHighlight: setHighlighted,
+        onSelect: selectOption,
+        onSetMode: setMode,
+        tristate
+      }
     )
   ] });
 }
-function labelPadding(label, measuredWidth) {
-  if (measuredWidth > 0) return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };
-  if (typeof label !== "string") return { paddingLeft: "1.75rem" };
-  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };
-}
-function withSelectedOptions(options, selectedValues) {
-  const present = new Set(options.map((o) => o.value));
-  const pinned = selectedValues.filter((v) => !present.has(v)).map((v) => ({ value: v, label: v }));
-  return pinned.length === 0 ? options : [...pinned, ...options];
-}
 export {
   Combobox
 };