@campfire-interactive/ui 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -685,6 +685,29 @@ interface ComboboxProps<T extends string = string> {
     loading?: boolean;
     emptyLabel?: string;
     loadingLabel?: string;
+    /**
+     * How many rows the list renders at once. The rest are not dropped quietly —
+     * a notice takes the last row and says how many are shown, because a picker
+     * silently offering 20 of 200 is the same bug as a table silently paging.
+     * Pass `0` to render everything, which is right only for a list bounded by
+     * the domain rather than by the customer.
+     */
+    maxResults?: number;
+    /** Overrides the truncation notice. Receives how many rows are shown. */
+    truncatedLabel?: (shown: number) => string;
+    /**
+     * Fires as the list opens and closes. `Select` has had this since pm's
+     * click-to-edit cells needed it: those save on blur, and a portalled list
+     * moves focus off the trigger, so without knowing the list is open a cell
+     * closes itself the instant the user clicks into it.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Forwarded to the trigger. Only useful alongside `onOpenChange`, which is
+     * what tells a commit-on-blur caller to ignore the blur the list itself
+     * caused.
+     */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
     /** Adds a "Clear" affordance to the trigger once something is selected. */
     clearable?: boolean;
     size?: 'sm' | 'md' | 'lg';
@@ -717,11 +740,15 @@ interface ComboboxProps<T extends string = string> {
  * typing a part number finds a row whose label is a description. Pass
  * `onSearchChange` to filter on the server instead.
  *
+ * `maxResults` caps what is rendered (50 by default) and says so in the last
+ * row. Options carrying a `group` are rendered under a heading, in the order
+ * the caller gives them — which is how a picker puts RECENTS above SEARCH.
+ *
  * Keyboard: ArrowUp/ArrowDown move, Home/End jump, Enter selects, Escape
  * closes. The list is `aria-activedescendant`-driven, so focus stays in the
  * search field and a screen reader announces each row as it is highlighted.
  */
-declare function Combobox<T extends string = string>({ options, value, onValueChange, placeholder, searchPlaceholder, onSearchChange, loading, emptyLabel, loadingLabel, clearable, size, invalid, disabled, id, name, className, style, fullWidth, ...aria }: ComboboxProps<T>): react.JSX.Element;
+declare function Combobox<T extends string = string>({ options, value, onValueChange, placeholder, searchPlaceholder, onSearchChange, loading, emptyLabel, loadingLabel, maxResults, truncatedLabel, onOpenChange, onBlur, clearable, size, invalid, disabled, id, name, className, style, fullWidth, ...aria }: ComboboxProps<T>): react.JSX.Element;
 
 declare const TooltipProvider: react.FC<RadixTooltip.TooltipProviderProps>;
 declare const TooltipRoot: react.FC<RadixTooltip.TooltipProps>;

package/dist/index.js

@@ -1067,11 +1067,11 @@ function CreatableSelect({
 }
 
 // src/Combobox.tsx
-import { useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
+import { Fragment as Fragment3, useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
 import { Check as Check4, ChevronDown as ChevronDown3, Search, X as X3 } from "lucide-react";
 
 // src/Combobox.css
-styleInject("@layer components {\n  .cfi-ui-combobox {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n  }\n  .cfi-ui-combobox--full {\n    display: flex;\n    width: 100%;\n  }\n  :where(.cfi-ui-combobox__trigger) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n    height: var(--cfi-ui-control-height-md);\n    padding-inline: 0.625rem;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n    transition: border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-combobox__trigger:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-combobox__trigger:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-combobox__trigger[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-combobox__trigger[data-size=sm] {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: 0.5rem;\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-combobox__trigger[data-size=lg] {\n    height: var(--cfi-ui-control-height-lg);\n    padding-inline: 0.875rem;\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-combobox__trigger[data-placeholder] .cfi-ui-combobox__value {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: left;\n  }\n  .cfi-ui-combobox__chevron {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__chevron > svg,\n  .cfi-ui-combobox__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-combobox__clear {\n    position: absolute;\n    right: 1.75rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: transparent;\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n  }\n  .cfi-ui-combobox__clear:hover {\n    background: var(--cfi-ui-surface-active);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-combobox__panel {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    max-height: min(22rem, var(--radix-popover-content-available-height, 22rem));\n  }\n  .cfi-ui-combobox__search {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: var(--cfi-ui-space-sm);\n    border-bottom: 1px solid var(--cfi-ui-border);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__search > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-combobox__search input {\n    flex: 1 1 auto;\n    min-width: 0;\n    border: 0;\n    background: transparent;\n    color: var(--cfi-ui-content);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    outline: none;\n  }\n  .cfi-ui-combobox__search input::placeholder {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__list {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-combobox__option {\n    align-items: flex-start;\n  }\n  .cfi-ui-combobox__option > .cfi-ui-select-item__indicator {\n    padding-top: 0.125rem;\n  }\n  .cfi-ui-combobox__option-text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-combobox__option-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ui-combobox__option-hint {\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n");
+styleInject("@layer components {\n  .cfi-ui-combobox {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n  }\n  .cfi-ui-combobox--full {\n    display: flex;\n    width: 100%;\n  }\n  :where(.cfi-ui-combobox__trigger) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n    height: var(--cfi-ui-control-height-md);\n    padding-inline: 0.625rem;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n    transition: border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-combobox__trigger:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-combobox__trigger:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-combobox__trigger[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-combobox__trigger[data-size=sm] {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: 0.5rem;\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-combobox__trigger[data-size=lg] {\n    height: var(--cfi-ui-control-height-lg);\n    padding-inline: 0.875rem;\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-combobox__trigger[data-placeholder] .cfi-ui-combobox__value {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: left;\n  }\n  .cfi-ui-combobox__chevron {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__chevron > svg,\n  .cfi-ui-combobox__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-combobox__clear {\n    position: absolute;\n    right: 1.75rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: transparent;\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n  }\n  .cfi-ui-combobox__clear:hover {\n    background: var(--cfi-ui-surface-active);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-combobox__panel {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    max-height: min(22rem, var(--radix-popover-content-available-height, 22rem));\n  }\n  .cfi-ui-combobox__search {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: var(--cfi-ui-space-sm);\n    border-bottom: 1px solid var(--cfi-ui-border);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__search > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-combobox__search input {\n    flex: 1 1 auto;\n    min-width: 0;\n    border: 0;\n    background: transparent;\n    color: var(--cfi-ui-content);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    outline: none;\n  }\n  .cfi-ui-combobox__search input::placeholder {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__list {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-combobox__option {\n    align-items: flex-start;\n  }\n  .cfi-ui-combobox__option > .cfi-ui-select-item__indicator {\n    padding-top: 0.125rem;\n  }\n  .cfi-ui-combobox__option-text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-combobox__option-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ui-combobox__option-hint {\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ui-combobox__group-label {\n    padding: 0.375rem 0.5rem 0.25rem;\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    letter-spacing: var(--cfi-ui-tracking-caps);\n    text-transform: uppercase;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-combobox__list > [role=group] + [role=group] .cfi-ui-combobox__group-label {\n    margin-top: var(--cfi-ui-space-xs);\n    padding-top: calc(0.25rem + var(--cfi-ui-space-xs));\n    border-top: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-combobox__truncated {\n    flex: none;\n    margin: 0;\n    padding: var(--cfi-ui-space-sm);\n    border-top: 1px solid var(--cfi-ui-border);\n    background: var(--cfi-ui-surface-muted);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n}\n");
 
 // src/Combobox.tsx
 import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1085,6 +1085,10 @@ function Combobox({
   loading = false,
   emptyLabel = "No matches",
   loadingLabel = "Searching...",
+  maxResults = 50,
+  truncatedLabel = (shown) => `Showing the first ${shown}. Keep typing to narrow.`,
+  onOpenChange,
+  onBlur,
   clearable = false,
   size = "md",
   invalid,
@@ -1110,8 +1114,25 @@ function Combobox({
       (o) => o.label.toLowerCase().includes(q) || (o.hint?.toLowerCase().includes(q) ?? false)
     );
   }, [options, search, onSearchChange]);
-  const selectable = filtered.filter((o) => !o.disabled);
+  const visible = useMemo3(
+    () => maxResults > 0 ? filtered.slice(0, maxResults) : filtered,
+    [filtered, maxResults]
+  );
+  const truncated = visible.length < filtered.length;
+  const selectable = visible.filter((o) => !o.disabled);
   const selected = options.find((o) => o.value === value) ?? null;
+  const lastLabel = useRef(null);
+  if (selected) lastLabel.current = { value: selected.value, label: selected.label };
+  const selectedLabel = selected?.label ?? (lastLabel.current?.value === value ? lastLabel.current.label : null);
+  const groups = useMemo3(() => {
+    const runs = [];
+    for (const option of visible) {
+      const last = runs[runs.length - 1];
+      if (last && last.group === option.group) last.options.push(option);
+      else runs.push({ group: option.group, options: [option] });
+    }
+    return runs;
+  }, [visible]);
   useEffect(() => {
     setHighlighted((h) => selectable.length === 0 ? 0 : Math.min(h, selectable.length - 1));
   }, [selectable.length]);
@@ -1126,9 +1147,13 @@ function Combobox({
     const el = listRef.current?.querySelector('[data-highlighted="true"]');
     el?.scrollIntoView({ block: "nearest" });
   }, [highlighted, open]);
+  function changeOpen(next) {
+    setOpen(next);
+    onOpenChange?.(next);
+  }
   function commit(option) {
     onValueChange(option.value);
-    setOpen(false);
+    changeOpen(false);
   }
   function handleKeyDown(e) {
     if (e.key === "ArrowDown") {
@@ -1156,7 +1181,7 @@ function Combobox({
     setHighlighted(0);
     onSearchChange?.(next);
   }
-  return /* @__PURE__ */ jsxs15(PopoverRoot, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs15(PopoverRoot, { open, onOpenChange: changeOpen, children: [
     /* @__PURE__ */ jsx15(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs15(
       "div",
       {
@@ -1175,22 +1200,23 @@ function Combobox({
               disabled,
               "data-size": size,
               "data-invalid": invalid || void 0,
-              "data-placeholder": selected ? void 0 : "",
+              "data-placeholder": selectedLabel == null ? "" : void 0,
               className: "cfi-ui-combobox__trigger",
-              onClick: () => setOpen((o) => !o),
+              onClick: () => changeOpen(!open),
+              onBlur,
               ...aria,
               children: [
-                /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
+                /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__value", children: selectedLabel ?? placeholder }),
                 /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx15(ChevronDown3, {}) })
               ]
             }
           ),
-          clearable && selected && !disabled && /* @__PURE__ */ jsx15(
+          clearable && selectedLabel != null && !disabled && /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
               className: "cfi-ui-combobox__clear",
-              "aria-label": `Clear ${selected.label}`,
+              "aria-label": `Clear ${selectedLabel}`,
               title: "Clear",
               onClick: () => onValueChange(null),
               children: /* @__PURE__ */ jsx15(X3, { "aria-hidden": "true" })
@@ -1238,34 +1264,42 @@ function Combobox({
               role: "listbox",
               "aria-busy": loading || void 0,
               className: "cfi-ui-combobox__list",
-              children: loading ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : filtered.map((option) => {
-                const index = selectable.indexOf(option);
-                const isHighlighted = index !== -1 && index === highlighted;
-                return /* @__PURE__ */ jsxs15(
-                  "div",
-                  {
-                    id: `${listId}-${option.value}`,
-                    role: "option",
-                    "aria-selected": option.value === value,
-                    "aria-disabled": option.disabled || void 0,
-                    "data-highlighted": isHighlighted || void 0,
-                    "data-disabled": option.disabled || void 0,
-                    className: "cfi-ui-select-item cfi-ui-combobox__option",
-                    onClick: () => !option.disabled && commit(option),
-                    onPointerMove: () => index !== -1 && setHighlighted(index),
-                    children: [
-                      /* @__PURE__ */ jsx15("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx15(Check4, { "aria-hidden": "true" }) }),
-                      /* @__PURE__ */ jsxs15("span", { className: "cfi-ui-combobox__option-text", children: [
-                        /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
-                        option.hint && /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
-                      ] })
-                    ]
-                  },
-                  option.value
-                );
+              children: loading ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : visible.length === 0 ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : groups.map((run, runIndex) => {
+                const rows = run.options.map((option) => {
+                  const index = selectable.indexOf(option);
+                  const isHighlighted = index !== -1 && index === highlighted;
+                  return /* @__PURE__ */ jsxs15(
+                    "div",
+                    {
+                      id: `${listId}-${option.value}`,
+                      role: "option",
+                      "aria-selected": option.value === value,
+                      "aria-disabled": option.disabled || void 0,
+                      "data-highlighted": isHighlighted || void 0,
+                      "data-disabled": option.disabled || void 0,
+                      className: "cfi-ui-select-item cfi-ui-combobox__option",
+                      onClick: () => !option.disabled && commit(option),
+                      onPointerMove: () => index !== -1 && setHighlighted(index),
+                      children: [
+                        /* @__PURE__ */ jsx15("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx15(Check4, { "aria-hidden": "true" }) }),
+                        /* @__PURE__ */ jsxs15("span", { className: "cfi-ui-combobox__option-text", children: [
+                          /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
+                          option.hint && /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
+                        ] })
+                      ]
+                    },
+                    option.value
+                  );
+                });
+                if (!run.group) return /* @__PURE__ */ jsx15(Fragment3, { children: rows }, `ungrouped-${runIndex}`);
+                return /* @__PURE__ */ jsxs15("div", { role: "group", "aria-label": run.group, children: [
+                  /* @__PURE__ */ jsx15("p", { className: "cfi-ui-combobox__group-label", "aria-hidden": "true", children: run.group }),
+                  rows
+                ] }, `${run.group}-${runIndex}`);
               })
             }
-          )
+          ),
+          !loading && truncated && /* @__PURE__ */ jsx15("p", { className: "cfi-ui-combobox__truncated", children: truncatedLabel(visible.length) })
         ]
       }
     )
@@ -1275,7 +1309,7 @@ function Combobox({
 // src/Tooltip.tsx
 import { forwardRef as forwardRef12 } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var TooltipProvider = RadixTooltip.Provider;
 var TooltipRoot = RadixTooltip.Root;
 var TooltipTrigger = RadixTooltip.Trigger;
@@ -1297,7 +1331,7 @@ var TooltipContent = forwardRef12(function TooltipContent2({ className, children
   ) });
 });
 function Tooltip({ content, side = "top", align = "center", delay = 300, disabled, children }) {
-  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment3, { children });
+  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment4, { children });
   return /* @__PURE__ */ jsx16(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs16(TooltipRoot, { children: [
     /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsx16(TooltipContent, { side, align, children: content })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
   "type": "module",
   "main": "dist/index.js",