@sincpro/web-ui 1.0.0 → 1.1.0

package/dist/components/search/SearchBar.d.ts

@@ -1,4 +1,5 @@
 import { type CriteriaJoin, type CriteriaPath, type SearchCriteria } from "./criteria.js";
+import type { BuiltCondition, BuiltFilter } from "./FilterBuilder.js";
 import type { ModelDefinition } from "./model.js";
 import type { Surface } from "../../foundations/types.js";
 import type { MenuGroup } from "../../primitives/menu/Menu.js";
@@ -70,6 +71,16 @@ export type SearchBarProps = {
      * obligar a buscar la que uno venía mirando entre doce.
      */
     onOpenBuilder?: (path?: CriteriaPath) => void;
+    /**
+     * The set's own search — what a free text means when it is not a question about one field:
+     * every field the set searches, at once (sincpro_framework's `LiteralSearch`, Odoo's «Search
+     * for: …»). Given the typed text, it returns what the chip asks; `null` offers nothing.
+     *
+     * With it, «Buscar «Globex»» is offered for every text. It goes FIRST — the one Enter takes —
+     * unless the model reads the text as a question of its own (an operator, a field's name, an
+     * enum's value, a number a numeric field answers): then that goes first and this after it.
+     */
+    literal?: (text: string) => BuiltCondition | BuiltFilter | null;
     /** Lo que va pegado al campo, a su derecha. */
     trailing?: ReactNode;
     /** How many facets the bar shows before folding the rest into «+N»; the grouping chain
@@ -78,4 +89,4 @@ export type SearchBarProps = {
     /** Por default la hereda de la superficie que la envuelve. */
     surface?: Surface;
 };
-export declare function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, collapseAfter, surface, }: SearchBarProps): import("react").JSX.Element;
+export declare function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, literal, trailing, collapseAfter, surface, }: SearchBarProps): import("react").JSX.Element;

package/dist/components/search/SearchBar.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { at, criteriaId, filterCriteria, removeAt, replaceAt, } from "./criteria.js";
 import { CriteriaChips } from "./CriteriaChips.js";
 import { describeCondition, opLabel, queryFields, readTyped, suggest, withoutValue, } from "./query.js";
-import { useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
 import { Tags } from "../../primitives/tag/Tags.js";
 import { ChevronRight, CornerDownRight, ListFilter, Search, SlidersHorizontal, X, } from "lucide-react";
@@ -28,7 +28,7 @@ function Group({ group, first, onSelect, }) {
                     ? "flex flex-col gap-0.5 pl-(--spacing-indent)"
                     : "flex flex-col gap-0.5", children: options }))] }));
 }
-export function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, collapseAfter, surface, }) {
+export function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, literal, trailing, collapseAfter, surface, }) {
     const copy = useUiCopy();
     const sup = useSurface(surface);
     const [text, setText] = useState("");
@@ -102,7 +102,7 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
         ...(step.field === undefined ? {} : { field: step.field }),
         ...(step.op === undefined ? {} : { op: step.op }),
         text,
-    }, fields);
+    }, fields, { literal: literal !== undefined });
     /* Lo escrito, ya leído: hace falta acá para saber si se está eligiendo un
        ATRIBUTO —lo que empieza con `#`— y dibujar fichas en vez de renglones. */
     const asked = readTyped(text);
@@ -155,12 +155,8 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
      * la lista si no. Es lo único que la barra decide sobre dónde van las cosas:
      * el resto lo decide quien tiene la lista.
      */
-    function commit(field, op, value) {
-        const one = filterCriteria(
-        /* El que no lleva valor viaja con `true`, que es lo que el motor espera de
-           «está vacío»: mandarle la cadena vacía sería preguntar por el campo que
-           vale "". */
-        { field: field.field, operator: op, value: withoutValue(op) ? true : value }, describeCondition(field, op, value));
+    /** A finished instance, where the next one goes: the end, or the group left open. */
+    function put(one) {
         onCriteriaChange(openGroup === null
             ? [...criteria, one]
             : replaceAt(criteria, openGroup, addTo(at(criteria, openGroup), one)));
@@ -168,6 +164,14 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
         setStep({});
         input.current?.focus();
     }
+    function commit(field, op, value) {
+        const one = filterCriteria(
+        /* El que no lleva valor viaja con `true`, que es lo que el motor espera de
+           «está vacío»: mandarle la cadena vacía sería preguntar por el campo que
+           vale "". */
+        { field: field.field, operator: op, value: withoutValue(op) ? true : value }, describeCondition(field, op, value));
+        put(one);
+    }
     /** Lo elegido en el desplegable, según de qué clase sea. */
     function pick(suggestion) {
         if (suggestion.kind === "field") {
@@ -199,6 +203,12 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
             input.current?.focus();
             return;
         }
+        if (suggestion.kind === "literal") {
+            const where = literal?.(suggestion.text) ?? null;
+            if (where !== null)
+                put(filterCriteria(where, fillCopy(copy.search.literalChip, { text: suggestion.text })));
+            return;
+        }
         commit(suggestion.field, suggestion.op, suggestion.value);
     }
     /** El nodo con una instancia más adentro. */
@@ -387,7 +397,7 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                         : {}),
                                 active: at === active,
                                 onSelect: () => pick(one),
-                            })) }) })) : (_jsx("div", { className: "p-1", children: suggestions.map((one, at) => (_jsxs("button", { type: "button", onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
+                            })) }) })) : (_jsx("div", { className: "p-1", children: suggestions.map((one, at) => (_jsxs("button", { type: "button", onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" || one.kind === "literal" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
                                     c.groups?.map((g, gi) => (_jsx(Group, { group: g, first: gi === 0, onSelect: c.onSelect }, g.label ?? gi))) })] }, c.title))), onOpenBuilder === undefined ? null : (_jsx("div", { className: "w-full border-t border-line p-1", children: _jsxs("button", { type: "button", onClick: () => {
                                 onOpenBuilder();
                                 setPanel(false);

package/dist/components/search/query.d.ts

@@ -122,6 +122,15 @@ export type QuerySuggestion =
     field: QueryField;
     op: string;
     value: string;
+}
+/** The set's own search over the text — every field it searches, at once. What it asks is
+ *  the consumer's (`SearchBar literal`): the bar only offers it and puts the chip. */
+ | {
+    kind: "literal";
+    id: string;
+    label: string;
+    hint: string;
+    text: string;
 };
 /** Cómo se llama un operador para quien lo lee. Sale de la copia, así que un
  *  operador que el servidor agregue aparece con su símbolo hasta que alguien le
@@ -139,17 +148,11 @@ export declare function withoutValue(op: string): boolean;
  * preguntan en el constructor, que tiene los dos campos.
  */
 export declare function withTwoValues(op: string): boolean;
-/**
- * Qué se ofrece ahora mismo.
- *
- * Es una sola lista y no tres pantallas: en el primer paso conviven los campos
- * que se llaman como lo tipeado —«nombr» → «nombre»— con las preguntas enteras
- * que lo tipeado ya permite armar —«test» en el nombre—. Quien escribe el nombre
- * de un campo quiere seguir por ahí; quien escribe un valor quiere preguntarlo
- * ya. Las dos intenciones se escriben igual, así que se ofrecen las dos, con los
- * campos primero: es el paso que todavía no decidió nada.
- */
-export declare function suggest(draft: QueryDraft, fields: readonly QueryField[]): QuerySuggestion[];
+export declare function suggest(draft: QueryDraft, fields: readonly QueryField[], 
+/** The set has a literal search (`SearchBar literal`): offer it for free text. */
+options?: {
+    literal?: boolean;
+}): QuerySuggestion[];
 /**
  * CÓMO SE LEE UNA CONDICIÓN, en un solo lugar.
  *

package/dist/components/search/query.js

@@ -97,6 +97,7 @@ export function readTyped(text) {
 export function globToLike(value) {
     return value.replace(/\*/g, "%");
 }
+const NUMERIC = new Set(["integer", "number", "float", "decimal", "monetary", "money"]);
 /** Qué clase de valor es un campo, leída del tipo que publica el modelo. */
 function kindOf(definition) {
     if (definition.kind === "relation")
@@ -104,7 +105,9 @@ function kindOf(definition) {
     if (definition.choices !== undefined && definition.choices.length > 0)
         return "choice";
     const type = definition.type.toLowerCase();
-    if (type === "integer" || type === "number" || type === "float")
+    /* An amount is a number: «decimal» and «monetary» read as text made «total <= 1000»
+       impossible to ask of an invoice. */
+    if (NUMERIC.has(type))
         return "number";
     if (type === "date" || type === "datetime")
         return "date";
@@ -265,7 +268,24 @@ function matches(field, text) {
  * ya. Las dos intenciones se escriben igual, así que se ofrecen las dos, con los
  * campos primero: es el paso que todavía no decidió nada.
  */
-export function suggest(draft, fields) {
+/**
+ * Whether the MODEL reads what was typed as a question of its own: an operator written in
+ * front («> 100»), the name of a field («estado»), a value of an enum («pagada»), or a number or
+ * a date that a field with order can answer. Plain text («Globex») is none of those — every
+ * text field «contains» it, which says nothing — so the literal search goes first for it.
+ */
+function readByModel(typed, byName, fields) {
+    if (typed.op !== undefined || byName.length > 0)
+        return true;
+    const value = typed.value.toLowerCase();
+    if (fields.some((field) => field.choices?.some((one) => one.toLowerCase() === value)))
+        return true;
+    return ((typed.shape === "number" || typed.shape === "date") &&
+        fields.some((field) => ORDERED.has(field.kind) && answers(field, typed)));
+}
+export function suggest(draft, fields, 
+/** The set has a literal search (`SearchBar literal`): offer it for free text. */
+options = {}) {
     const typed = readTyped(draft.text);
     /* Paso 3 — el campo y el operador ya están: falta el valor. */
     if (draft.field !== undefined && draft.op !== undefined) {
@@ -409,10 +429,23 @@ export function suggest(draft, fields) {
        hecha — salvo que lo tipeado sea también un valor razonable, que es
        justamente el caso de «test». */
     const named = new Set(byName.map((one) => (one.kind === "field" ? one.field.field : "")));
-    return [
+    const byModel = [
         ...byName,
         ...ready.filter((one) => one.kind !== "condition" || !named.has(one.field.field)),
     ];
+    if (options.literal !== true)
+        return byModel;
+    /* The literal search is always offered for text: what the model reads goes first, and
+       when it reads nothing, the literal search is what Enter takes. */
+    const text = draft.text.trim();
+    const literal = {
+        kind: "literal",
+        id: "l:literal",
+        label: currentCopy().search.literal,
+        hint: text,
+        text,
+    };
+    return readByModel(typed, byName, fields) ? [...byModel, literal] : [literal, ...byModel];
 }
 /**
  * CÓMO SE LEE UNA CONDICIÓN, en un solo lugar.

package/dist/foundations/copy.d.ts

@@ -182,6 +182,10 @@ export type UiCopy = {
         askField: string;
         /** Cuando se escribió `#`: lo que sigue es el nombre de un campo. */
         askAttribute: string;
+        /** The set's own search over what was typed — every field it searches, at once — as it
+         *  is offered («Buscar») and as the chip reads once put («Buscar «Globex»»). */
+        literal: string;
+        literalChip: string;
         askOp: string;
         /** El encabezado de un nodo del árbol: cómo se juntan las reglas de abajo. */
         askJoin: string;

package/dist/foundations/copy.es.js

@@ -155,6 +155,8 @@ export const SPANISH_COPY = {
         openBuilderHere: "Abrir esta condición en el constructor",
         askField: "en qué campo",
         askAttribute: "elegí un atributo",
+        literal: "Buscar",
+        literalChip: "Buscar «{text}»",
         askOp: "comparado cómo",
         askJoin: "tienen que coincidir",
         askValue: "contra qué",

package/dist/foundations/copy.js

@@ -115,6 +115,8 @@ export const ENGLISH_COPY = {
         openBuilderHere: "Open this condition in the builder",
         askField: "ask about",
         askAttribute: "pick an attribute",
+        literal: "Search",
+        literalChip: "Search “{text}”",
         askOp: "compared how",
         askJoin: "these rules match",
         unreadable: "We cannot read this filter as a tree — here it is as it stands. It can still be edited as JSON below.",

package/dist/foundations/grouping.d.ts

@@ -97,6 +97,9 @@ export type Pile<T> = {
      * montones los cuenta quien guarda los datos, este número viene de allá.
      */
     count: number;
+    /** What the pile ADDS UP TO, already written — «Total Bs 1.204.933» — summed by whoever
+     *  keeps the data over EVERY row in it, like the count. Drawn in the pile's header. */
+    detail?: string;
     /** Las filas, en el nivel MÁS PROFUNDO. Vacío en los de arriba: un montón que
      *  tiene montones adentro no tiene filas propias. */
     items: readonly T[];

package/dist/primitives/picker/Picker.d.ts

@@ -47,6 +47,19 @@ export type PickerProps = {
     items: readonly PickerItem[];
     value?: string;
     onChange?: (id: string) => void;
+    /**
+     * The options are SEARCHED by whoever gives them — the server's literal search — and this
+     * hears what is typed (and `""` when the list starts over). With it the picker filters
+     * nothing itself and caps nothing: `items` is the answer, all of it drawn, with the typed
+     * text still marked inside it. Without it, the picker filters what it holds.
+     *
+     * Context: a picker over ten thousand customers holds the first ten. Filtering THOSE finds
+     * nothing past the tenth — the customer typed by its exact name was «not there».
+     */
+    onSearch?: (query: string) => void;
+    /** The chosen record's name when it is not among `items` — a search narrowed them, or it
+     *  lies past the first page. Without it, a chosen record that is not listed reads empty. */
+    valueLabel?: string;
     placeholder?: string;
     /** «Buscar más…»: the last option of the list, always there when this is — the record
      *  may not be among the eight, or two of them may need their columns to tell apart. It

package/dist/primitives/picker/Picker.js

@@ -91,13 +91,14 @@ const option = tv({
 });
 export function Picker({ mode, ...props }) {
     if (useFormMode(mode) === "read") {
-        return _jsx(ReadValue, { value: props.items.find((i) => i.id === props.value)?.name ?? null });
+        const name = props.items.find((i) => i.id === props.value)?.name ?? props.valueLabel;
+        return _jsx(ReadValue, { value: props.value === undefined ? null : (name ?? null) });
     }
     /* The filter reads the locale from React Aria's context, so the box that provides it has
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditablePicker, { ...props }) }));
 }
-function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrowseAll, onCreate, onCreateAndEdit, onOpen, openTargets = ["modal", "peek", "side", "page"], emptyText, searchPlaceholder, loading = false, loadingText, onLoadMore, loadingMore = false, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, }) {
+function EditablePicker({ id: ownId, items, value, onChange, onSearch, valueLabel, placeholder, onBrowseAll, onCreate, onCreateAndEdit, onOpen, openTargets = ["modal", "peek", "side", "page"], emptyText, searchPlaceholder, loading = false, loadingText, onLoadMore, loadingMore = false, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -110,28 +111,40 @@ function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrow
     const shownSearch = searchPlaceholder ?? copy.picker.search;
     const shownLoading = loadingText ?? copy.picker.loading;
     const chosen = items.find((i) => i.id === value);
-    const chosenName = chosen?.name ?? "";
+    const chosenName = chosen?.name ?? (value === undefined ? "" : (valueLabel ?? ""));
     /* Both the text and the choice are controlled, so React Aria never rewrites the field
        from its own collection — which is capped and filtered, and may not hold the chosen
        record at all. `query` is what filters: empty when the list opens (the whole list,
        not just the one already chosen), the typed text after that. */
     const [open, setOpen] = useState(false);
     const [text, setText] = useState(chosenName);
-    const [query, setQuery] = useState("");
+    const [query, setQueryOnly] = useState("");
+    /* What the consumer last heard: a list that opens, closes or chooses starts the search over,
+       and telling it `""` three times would ask the server three times for the same page. */
+    const heard = useRef("");
+    const setQuery = (next) => {
+        setQueryOnly(next);
+        if (onSearch !== undefined && next !== heard.current) {
+            heard.current = next;
+            onSearch(next);
+        }
+    };
     const [shownFor, setShownFor] = useState(chosenName);
     if (!open && shownFor !== chosenName) {
         setShownFor(chosenName);
         setText(chosenName);
     }
+    const searched = onSearch !== undefined;
     const filtered = useMemo(() => {
         const q = query.trim();
-        if (q === "")
+        if (q === "" || searched)
             return items;
         return items.filter((i) => contains(`${i.name} ${i.meta ?? ""} ${i.haystack ?? ""}`, q));
-    }, [items, query, contains]);
+    }, [items, query, contains, searched]);
+    /* Searched by the consumer, the items ARE the page it chose to show: all of them. */
     const { visible, remaining } = shownRows(filtered, {
         loading,
-        incremental: onLoadMore !== undefined,
+        incremental: onLoadMore !== undefined || searched,
     });
     const hasMarks = items.some((i) => i.icon !== undefined);
     const hasHints = visible.some((i) => i.meta !== undefined);

package/dist/primitives/tag/TagsField.d.ts

@@ -15,6 +15,13 @@ export type TagsFieldProps = {
      * backend (Odoo's `name_create`); the consumer also appends the new option to `options`.
      */
     onCreate?: (label: string) => string | Promise<string>;
+    /**
+     * The options are SEARCHED by whoever gives them — the server's literal search over
+     * thousands of products or people — and this hears what is typed (`""` when it starts over).
+     * With it the field filters nothing itself: `options` is the answer, plus the chosen ones for
+     * their labels; the chosen still never come back as options.
+     */
+    onSearch?: (query: string) => void;
     /** «Buscar más…» at the end of the list: the tags to add chosen from a table
      *  (the list that chooses, `List onChoose` with `selection`, in a modal). It gets what was typed. */
     onBrowseAll?: (query: string) => void;

package/dist/primitives/tag/TagsField.js

@@ -84,7 +84,7 @@ export function TagsField({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
 }
-function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
+function EditableTagsField({ value, onChange, options, onCreate, onSearch, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -95,7 +95,17 @@ function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, on
     const { contains } = useFilter({ sensitivity: "base" });
     const { locale } = useLocale();
     const collator = useMemo(() => new Intl.Collator(locale, { sensitivity: "base", usage: "search" }), [locale]);
-    const [text, setText] = useState("");
+    const [text, setTextOnly] = useState("");
+    /* What the consumer last heard: an add or a reopen starts the search over, and telling it
+       `""` twice would ask the server twice for the same page. */
+    const heard = useRef("");
+    const setText = (next) => {
+        setTextOnly(next);
+        if (onSearch !== undefined && next !== heard.current) {
+            heard.current = next;
+            onSearch(next);
+        }
+    };
     const boxRef = useRef(null);
     const [width, setWidth] = useState(null);
     const inputRef = useRef(null);
@@ -103,7 +113,7 @@ function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, on
        creating: a tag removed meanwhile must not come back. */
     const latest = useRef(value);
     latest.current = value;
-    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled);
+    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled, onSearch !== undefined);
     const listed = [
         ...available,
         ...(create === null

package/dist/primitives/tag/choices.d.ts

@@ -30,7 +30,10 @@ export type TagMatch = {
  * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
  * ends up with both.
  */
-export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean): {
+export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean, 
+/** The options are already the answer to `text` (searched by the consumer, on a server):
+ *  they are not filtered again — the server may have matched a field no label shows. */
+searched?: boolean): {
     available: TagOption[];
     create: string | null;
 };

package/dist/primitives/tag/choices.js

@@ -7,10 +7,14 @@
  * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
  * ends up with both.
  */
-export function tagChoices(options, value, text, match, creatable) {
+export function tagChoices(options, value, text, match, creatable, 
+/** The options are already the answer to `text` (searched by the consumer, on a server):
+ *  they are not filtered again — the server may have matched a field no label shows. */
+searched = false) {
     const chosen = new Set(value);
     const query = text.trim();
-    const available = options.filter((option) => !chosen.has(option.value) && (query === "" || match.contains(option.label, query)));
+    const available = options.filter((option) => !chosen.has(option.value) &&
+        (searched || query === "" || match.contains(option.label, query)));
     const create = creatable && query !== "" && !options.some((option) => match.same(option.label, query))
         ? query
         : null;

package/dist/views/list/ListView.js

@@ -238,7 +238,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
         return list.map((pile) => {
             const key = pathKey(pile.path);
             const open = isOpen(pile);
-            return (_jsxs(Fragment, { children: [_jsx(GroupHeader, { field: pile.field, label: pile.label, count: pile.count, depth: pile.depth, open: open, ...(group?.onToggle === undefined
+            return (_jsxs(Fragment, { children: [_jsx(GroupHeader, { field: pile.field, label: pile.label, count: pile.count, ...(pile.detail === undefined ? {} : { detail: pile.detail }), depth: pile.depth, open: open, ...(group?.onToggle === undefined
                             ? {}
                             : { onToggle: () => group.onToggle?.(key) }) }), !open
                         ? null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",