@antadesign/anta 0.3.33 → 0.3.35

package/dist/components/Select.d.ts

@@ -1,7 +1,6 @@
 import type { BaseProps, OptionPresentationProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
-import './select-parts.css';
 /** The type an option `value` may take: `string`, `number`, or `boolean`. Selection
  *  compares values with `===`. Object-shaped values are out of scope; give the option a
  *  stable primitive `value` and read the object back off `attrs.option` (or, in
@@ -36,7 +35,8 @@ export interface SelectOption<V extends OptionValue = string> extends OptionPres
     /** Tooltip for this option's row — a string or any node. In a `multiple`
      *  select with `selectAll`, a row with no `tooltip` falls back to a default
      *  hint for the Alt/Option-click "select only this" accelerator; set `tooltip`
-     *  to override that, or `''` to suppress it. */
+     *  to override that, or `''` to suppress it. Hovering a row reveals the default
+     *  shortcut hint; moving to another row restarts its delay. */
     tooltip?: React.ReactNode;
     /** Additional application data. Read it in `renderOption`. */
     [key: string]: unknown;
@@ -96,9 +96,9 @@ export interface EmptyState {
 export interface TriggerState<V extends OptionValue = string> {
     /** Whether the menu is open — use it for `aria-expanded` and a chevron. */
     open: boolean;
-    /** The current selection: a single value (single), an array (`multiple`), or
-     *  `undefined` when nothing is chosen. */
-    value: V | V[] | undefined;
+    /** The current selection: a value or `null` in single mode, an array in
+     *  multiple mode. An empty array means no multiple selection. */
+    value: V | V[] | null;
     /** The resolved option objects for the current selection (empty when none).
      *  `selected.length` is the multi-select count. */
     selected: SelectOption<V>[];
@@ -169,9 +169,18 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
     icon?: IconShape;
     /** Content before the default trigger's value, such as a key prefix
      *  before the value. It replaces the icon derived from `icon`. Include an
-     *  `<Icon>` in this content when both are needed. Ignored by `renderTrigger`. */
+     *  `<Icon>` in this content when both are needed. Hidden from assistive
+     *  technologies. Include any meaningful prefix in `label` or `aria-label`.
+     *  Ignored by `renderTrigger`. */
     leading?: React.ReactNode;
-    /** Field label, above the trigger. */
+    /** Dim the default trigger's leading content and chevron at rest. They brighten
+     *  on hover or focus. Ignored by `renderTrigger`.
+     *  @defaultValue true */
+    dimActions?: boolean;
+    /** Visible field label and accessible name for the default trigger. If omitted,
+     *  provide `aria-label` or `aria-labelledby` that identifies the field.
+     *  Leading content and the chevron are hidden from assistive technologies and
+     *  do not label the trigger. */
     label?: string;
     /** Helper text under the field. */
     hint?: string;
@@ -196,10 +205,14 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  option's own `toneScope` wins.
      *  @defaultValue 'all' */
     toneScope?: ToneScope;
-    /** Add a search field at the top of the menu that filters the options as you
-     *  type. `true` uses the built-in matcher — a case-insensitive substring of the
-     *  option's **value / label / hint**. Pass a **function** `(option, query) =>
-     *  boolean` for custom matching (called per option; return `true` to keep it). */
+    /** Add a search field that filters option values, labels, and hints.
+     *  `true` uses case-insensitive substring matching. A space in the trimmed
+     *  query matches a run of whitespace. Built-in row text highlights matches.
+     *  A custom `(option, query) => boolean` receives the trimmed query and returns
+     *  whether to keep the option, without automatic highlighting. It runs once
+     *  per option on each render, including for an empty query. Rows, empty content,
+     *  and filtered Select all use the same results. A query flattens groups and
+     *  submenus into grouped results. Closing the popup resets the query. */
     filter?: boolean | ((option: SelectOption<V>, query: string) => boolean);
     /** `multiple` only: shows a "Select all" row that toggles every enabled option,
      *  or only the visible options when a filter query is active. Its checkbox is
@@ -211,7 +224,7 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  @defaultValue Select all */
     selectAllLabel?: string;
     /** Add a "Clear" row pinned in the menu **footer** that empties the selection
-     *  (single → none, multiple → `[]`). Shown only while something is selected, so
+     *  (single → `null`, multiple → `[]`). Shown only while something is selected, so
      *  it never scrolls away in a long or filtered list. */
     clearable?: boolean;
     /** Label for the `clearable` footer row.
@@ -234,15 +247,15 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  A, B, C` (labels comma-joined) in place of the bare `3 selected`. Applies
      *  to the multi-count case only: `All` stays `All`, a single pick stays its
      *  own label, and an empty selection stays the `placeholder`. The list flows
-     *  into the Button label, so it ellipsizes at the field's width when long
+     *  into the default trigger's value, so it ellipsizes at the field's width when long
      *  (`3 selected: Engineering, Des… `). `renderSummary` overrides this. */
     verbose?: boolean;
     /** `multiple` only: build the trigger's selection summary text yourself,
      *  replacing the built-in "`All` / one label / `N selected`" logic. Receives
      *  the resolved selected options (`selected.length` is the count) and runs only
      *  while something is selected — an empty selection still shows the
-     *  `placeholder`. Return a **string**: it flows into the default trigger's
-     *  Button label, so a long summary ellipsizes at the field's width just
+     *  `placeholder`. Return a **string**: it becomes the default trigger's
+     *  value, so a long summary ellipsizes at the field's width just
      *  like a long value (`Engineering, Design, … `). Return `undefined` to fall
      *  back to the default for that case (e.g. customize only the count, keeping
      *  the single-label case built-in). For rich content (chips, multiple nodes)
@@ -271,7 +284,7 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
 }
 /**
  * `<Select>` props. `selection` discriminates the value shape: single mode
- * (`value: string`) or `multiple` (`value: string[]`).
+ * (`value: V | null`) or `multiple` (`value: V[]`).
  */
 export type SelectProps<V extends OptionValue = string> = SelectCommonProps<V> & ({
     /** Selection mode. `'single'` (the default) keeps `value` a single value and
@@ -279,27 +292,31 @@ export type SelectProps<V extends OptionValue = string> = SelectCommonProps<V> &
      *  array value.
      *  @defaultValue single */
     selection?: 'single';
-    /** Controlled value: the selected option's `value`. Update it through
-     *  `onValueChange`. Leave it undefined for uncontrolled use. */
-    value?: V;
-    /** Initial selected option value for uncontrolled use. */
-    defaultValue?: V;
-    /** Fires after the selection changes, with the new value and a
-     *  `{ value, option }` snapshot. Select has no discrete element state, so
-     *  there is no cancelable `onStateChange` (see the Input event-model note). */
-    onValueChange?: (value: V, attrs: SelectChangeAttrs<V>) => void;
+    /** Controlled option value. Use `null` for an empty selection; clearing
+     *  to `null` keeps the Select controlled. Omit or pass `undefined` for
+     *  uncontrolled use. Empty strings, `0`, and `false` remain option values. */
+    value?: V | null;
+    /** Initial option value for uncontrolled use. `null` starts empty. */
+    defaultValue?: V | null;
+    /** Reports the new value and a `{ value, option }` snapshot after a pick.
+     *  Clear reports `null` with `{ all: true, selected: false }`.
+     *  Narrow on `'all' in attrs` before reading `option`.
+     *  Update `value` to accept a controlled change. There is no cancelable
+     *  `onStateChange`; see the Input event-model note. */
+    onValueChange?: (value: V | null, attrs: SelectChangeAttrs<V>) => void;
 } | {
     /** Multi-select: checkboxes on every row, the menu stays open while
      *  toggling, the field shows an "N selected" count, and `value` is an array. */
     selection: 'multiple';
-    /** Controlled values — the `value`s of the selected options (see the
-     *  single-select `value` note). */
+    /** Controlled option values. Use `[]` for an empty selection. Omit or
+     *  pass `undefined` for uncontrolled use. */
     value?: V[];
     /** Initial values (option `value`s) for the uncontrolled case. */
     defaultValue?: V[];
-    /** Fires after any toggle, with the new value array and a `{ value, option,
-     *  selected }` snapshot of the row that changed (or `{ all: true }` for the
-     *  Select-all row). */
+    /** Reports the new value array and a `{ value, option, selected }` snapshot
+     *  after a row toggle. Select all and Clear report `{ all: true, selected }`
+     *  without a single option. Narrow on `'all' in attrs` before reading `option`.
+     *  Update `value` to accept a controlled change. */
     onValueChange?: (value: V[], attrs: SelectChangeAttrs<V>) => void;
 });
 /** Rolled-up selection of a group / submenu subtree: `'none'` / `'all'` of the
@@ -337,8 +354,8 @@ export type SelectedItem<V extends OptionValue = string> = SelectedOption<V> | S
  *
  * A pure function of `(options, values)` — it needs no `Select` instance and reads
  * nothing off the change event, so it behaves identically in controlled and
- * uncontrolled code. Pass the current `value` (a string, an array, or `undefined`)
- * and render a grouped summary, drive section indicators, or diff picks.
+ * uncontrolled code. Pass the current `value` (an option value, an array,
+ * `null`, or `undefined`) and render a grouped summary, drive section indicators, or diff picks.
  *
  * A value that appears under more than one section marks the leaf in *every* place it
  * occurs (selection is value-keyed), mirroring how the menu itself renders it.
@@ -350,12 +367,12 @@ export type SelectedItem<V extends OptionValue = string> = SelectedOption<V> | S
  * //   { value: 'eng-fe', label: 'Frontend', selected: false }, … ] }
  * ```
  */
-export declare function optionsWithSelection<V extends OptionValue = string>(options: SelectItem<V>[], values: V | V[] | undefined): SelectedItem<V>[];
+export declare function optionsWithSelection<V extends OptionValue = string>(options: SelectItem<V>[], values: V | V[] | null | undefined): SelectedItem<V>[];
 /**
  * `<Select>` lets people choose one or more options from a dropdown. It uses a
- * `<Button>` as its trigger and a `<Menu>` for its options. `selection` sets behavior:
- * `'single'` (default; `value` is a string, menu closes on pick) or `'multiple'`
- * (checkboxes, `value` is a string array, menu stays open while toggling, the
+ * `<Input button>` as its trigger and a `<Menu>` for its options. `selection` sets behavior:
+ * `'single'` (default; an option value or `null`, menu closes on pick) or `'multiple'`
+ * (checkboxes, an option-value array, menu stays open while toggling, the
  * field shows an "N selected" count). For single-select, `indicator` picks the
  * per-row mark: `'none'` (tint only, default), `'check'` (trailing checkmark), or
  * `'radio'` (leading radio).

package/dist/components/Select.js

@@ -2,15 +2,14 @@ import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
 import { ISOLATE_HINT, ISOLATE_HINT_DELAY, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
+import { prepareSelectOptions } from "./select-tree";
 import { Input } from "./Input";
-import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { Menu } from "./Menu";
 import { MenuItem } from "./MenuItem";
 import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
 import { Tooltip } from "./Tooltip";
-import "./select-parts.css";
 function optionsWithSelection(options, values) {
   const set = new Set(values == null ? [] : Array.isArray(values) ? values : [values]);
   const state = (on, total) => on === 0 ? "none" : on === total ? "all" : "some";
@@ -48,6 +47,7 @@ const Select = (props) => {
     placeholder,
     icon,
     leading,
+    dimActions = true,
     label,
     hint,
     size,
@@ -73,30 +73,22 @@ const Select = (props) => {
     ...rest
   } = props;
   const multiple = selection === "multiple";
-  const statusColor = status && status !== "neutral" ? `var(--text-2-${status})` : void 0;
   const mark = multiple ? "checkbox" : indicator ?? "none";
   const menuItemIndicator = mark === "none" ? void 0 : mark;
   const emit = onValueChange;
   const controlled = value !== void 0;
-  const [internal, setInternal] = useState(defaultValue);
+  const [internal, setInternal] = useState(defaultValue ?? (multiple ? [] : null));
   const currentRaw = controlled ? value : internal;
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const popupLabel = `${label ?? rest["aria-label"] ?? "Select"} options`;
-  const isSubmenu = (it) => typeof it === "object" && Array.isArray(it.submenu);
-  const isGroup = (it) => typeof it === "object" && Array.isArray(it.options);
-  const collectLeaves = (items, group, disabled2, out) => {
-    for (const raw of items) {
-      if (typeof raw !== "string" && isSubmenu(raw)) collectLeaves(raw.submenu, raw.label, disabled2 || !!raw.disabled, out);
-      else if (typeof raw !== "string" && isGroup(raw)) collectLeaves(raw.options, raw.label, disabled2 || !!raw.disabled, out);
-      else {
-        const o = normalizeOpt(raw);
-        out.push({ opt: o, disabled: disabled2 || !!o.disabled, group });
-      }
-    }
-  };
-  const allLeaves = [];
-  collectLeaves(options, void 0, false, allLeaves);
+  const filtering = filter !== void 0 && filter !== false;
+  const q = query.trim();
+  const queryRegex = filtering && typeof filter !== "function" ? matchQueryRegex(q) : null;
+  const prune = typeof filter === "function" || filtering && !!q;
+  const matches = (o) => typeof filter === "function" ? filter(o, q) : matchesQuery(o, queryRegex);
+  const { tree, allLeaves, visibleLeaves } = prepareSelectOptions(options, prune ? matches : void 0);
+  const flattening = filtering && !!q;
   const seenValues = /* @__PURE__ */ new Set();
   for (const l of allLeaves) {
     const key = String(l.opt.value);
@@ -105,13 +97,6 @@ const Select = (props) => {
     seenValues.add(key);
   }
   const byValue = new Map(allLeaves.map((l) => [l.opt.value, l.opt]));
-  const filtering = filter !== void 0 && filter !== false;
-  const q = query.trim();
-  const queryRe = filtering && typeof filter !== "function" ? matchQueryRegex(q) : null;
-  const matches = (o) => typeof filter === "function" ? filter(o, q) : matchesQuery(o, queryRe);
-  const prune = typeof filter === "function" || filtering && !!q;
-  const visibleLeaves = prune ? allLeaves.filter((l) => matches(l.opt)) : allLeaves;
-  const flattening = filtering && !!q;
   const selectedValues = Array.isArray(currentRaw) ? currentRaw : currentRaw != null ? [currentRaw] : [];
   const isSelected = (v) => selectedValues.includes(v);
   const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
@@ -160,7 +145,7 @@ const Select = (props) => {
     emit?.(next, { all: true, selected: !allSelected });
   };
   const clear = () => {
-    const next = multiple ? [] : void 0;
+    const next = multiple ? [] : null;
     if (!controlled) setInternal(next);
     emit?.(next, { all: true, selected: false });
   };
@@ -180,8 +165,8 @@ const Select = (props) => {
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
         indicator: customMark ?? void 0,
-        label: custom ? void 0 : highlight(o.label ?? String(o.value), queryRe),
-        hint: custom ? void 0 : o.hint ? highlight(o.hint, queryRe) : o.hint,
+        label: custom ? void 0 : highlight(o.label ?? String(o.value), queryRegex),
+        hint: custom ? void 0 : o.hint ? highlight(o.hint, queryRegex) : o.hint,
         icon: custom ? void 0 : o.icon,
         tone: o.tone ?? tone,
         toneScope: o.toneScope ?? toneScope,
@@ -199,78 +184,65 @@ const Select = (props) => {
       String(o.value)
     );
   };
-  const renderTree = (items, disabled2) => {
-    const out = [];
-    items.forEach((raw, i) => {
-      if (typeof raw !== "string" && isSubmenu(raw)) {
-        const dis = disabled2 || !!raw.disabled;
-        const inner = renderTree(raw.submenu, dis);
-        if (inner.length)
-          out.push(
-            /* @__PURE__ */ jsx(
-              MenuItem,
-              {
-                submenu: true,
-                label: raw.label,
-                icon: raw.icon,
-                disabled: dis || void 0,
-                "data-menu-open": multiple ? "" : void 0,
-                children: /* @__PURE__ */ jsx(Menu, { children: inner })
-              },
-              `sub-${i}-${raw.label}`
-            )
-          );
-        return;
-      }
-      if (typeof raw !== "string" && isGroup(raw)) {
-        const dis = disabled2 || !!raw.disabled;
-        const inner = renderTree(raw.options, dis);
-        if (inner.length) out.push(/* @__PURE__ */ jsx(MenuGroup, { label: raw.label, children: inner }, `grp-${i}-${raw.label}`));
-        return;
-      }
-      const o = normalizeOpt(raw);
-      if (typeof filter === "function" && !matches(o)) return;
-      out.push(renderOptionRow(o, disabled2 || !!o.disabled));
-    });
-    return out;
-  };
+  const renderTree = (nodes) => nodes.map((node) => {
+    if (node.kind === "option") return renderOptionRow(node.opt, node.disabled);
+    const inner = renderTree(node.children);
+    if (node.kind === "group") return /* @__PURE__ */ jsx(MenuGroup, { label: node.source.label, children: inner }, node.key);
+    return /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        submenu: true,
+        label: node.source.label,
+        icon: node.source.icon,
+        disabled: node.disabled || void 0,
+        "data-menu-open": multiple ? "" : void 0,
+        children: /* @__PURE__ */ jsx(Menu, { children: inner })
+      },
+      node.key
+    );
+  });
   const renderFlat = () => {
-    const shown = allLeaves.filter((l) => matches(l.opt));
     const out = [];
-    for (let i = 0; i < shown.length; ) {
-      const label2 = shown[i].group;
+    for (let i = 0; i < visibleLeaves.length; ) {
+      const label2 = visibleLeaves[i].group;
       if (label2 === void 0) {
-        out.push(renderOptionRow(shown[i].opt, shown[i].disabled));
+        out.push(renderOptionRow(visibleLeaves[i].opt, visibleLeaves[i].disabled));
         i++;
         continue;
       }
       const rows = [];
       const start = i;
-      while (i < shown.length && shown[i].group === label2) {
-        rows.push(renderOptionRow(shown[i].opt, shown[i].disabled));
+      while (i < visibleLeaves.length && visibleLeaves[i].group === label2) {
+        rows.push(renderOptionRow(visibleLeaves[i].opt, visibleLeaves[i].disabled));
         i++;
       }
       out.push(/* @__PURE__ */ jsx(MenuGroup, { label: label2, children: rows }, `flat-${start}-${label2}`));
     }
     return out;
   };
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderTrigger ? renderTrigger({ open, value: currentRaw, selected: selectedOptions, disabled: !!disabled, icon }) : /* @__PURE__ */ jsxs(
-      Button,
+  const triggerLeading = leading ?? (icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderTrigger ? renderTrigger({ open, value: currentRaw, selected: selectedOptions, disabled: !!disabled, icon }) : /* @__PURE__ */ jsx(
+      Input,
       {
+        button: true,
+        dimActions,
+        label,
+        hint,
+        value: display,
+        placeholder,
+        leading: triggerLeading != null ? /* @__PURE__ */ jsx("a-select-leading", { "aria-hidden": "true", children: triggerLeading }) : void 0,
         disabled,
         size,
+        status,
+        statusIcon,
         round,
-        "aria-label": typeof label === "string" || typeof label === "number" ? String(label) : void 0,
-        "aria-invalid": status === "critical" ? "true" : void 0,
+        className,
+        style,
         "aria-haspopup": filtering ? "dialog" : "menu",
         "aria-expanded": open ? "true" : "false",
-        ...rest,
-        children: [
-          (leading ?? icon) && /* @__PURE__ */ jsx("a-select-leading", { "aria-hidden": "true", children: leading ?? /* @__PURE__ */ jsx(Icon, { shape: icon }) }),
-          /* @__PURE__ */ jsx("a-button-label", { "data-placeholder": !display ? "" : void 0, children: display || placeholder }),
-          /* @__PURE__ */ jsx("a-select-chevron", { open: open ? "" : void 0, "aria-hidden": "true", style: statusColor ? { color: statusColor } : void 0, children: /* @__PURE__ */ jsx(Icon, { shape: "chevron-down" }) })
-        ]
+        trailing: /* @__PURE__ */ jsx("a-select-chevron", { open: open ? "" : void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { shape: "chevron-down" }) }),
+        ...rest
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -315,7 +287,7 @@ const Select = (props) => {
             ),
             /* @__PURE__ */ jsx(MenuSeparator, {})
           ] }),
-          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false),
+          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(tree),
           clearable && selectedValues.length > 0 && // Pinned in the footer so it never scrolls away in a long / filtered list.
           /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(MenuSeparator, { slot: "footer" }),
@@ -334,23 +306,6 @@ const Select = (props) => {
       }
     )
   ] });
-  if (renderTrigger) return content;
-  const statusGlyph = {
-    brand: "circle-small-solid",
-    info: "info",
-    success: "circle-check",
-    warning: "warning-triangle",
-    critical: "warning-diamond"
-  };
-  const glyph = statusIcon === void 0 ? status ? statusGlyph[status] : void 0 : statusIcon;
-  return /* @__PURE__ */ jsxs("a-select-field", { size, status, disabled: disabled ? "" : void 0, class: className, style, children: [
-    label != null && /* @__PURE__ */ jsx("a-select-label", { children: label }),
-    content,
-    hint != null && /* @__PURE__ */ jsxs("a-select-hint", { children: [
-      glyph && /* @__PURE__ */ jsx(Icon, { shape: glyph, "aria-hidden": "true" }),
-      hint
-    ] })
-  ] });
 };
 export {
   Select,

package/dist/components/SelectFaceted.d.ts

@@ -2,7 +2,6 @@ import type { BaseProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import type { OptionState, OptionValue, SelectItem, SelectOption } from './Select';
 import { type MenuProps } from './Menu';
-import './select-parts.css';
 interface FacetBase {
     /** The key for this facet's value in the record. `onValueChange` reports it as
      *  `attrs.facet`. It must be unique across `facets`. */
@@ -12,9 +11,13 @@ interface FacetBase {
     /** Leading icon on the facet's row. */
     icon?: IconShape;
 }
-/** A per-facet option-list filter (like `Select`'s `filter`): `true` uses the
- *  built-in case-insensitive substring match on an option's value / label /
- *  hint; a function `(option, query) => boolean` does custom matching. */
+/** Filter the options within a facet. `true` uses case-insensitive substring
+ *  matching on the option's value, label, and hint, with trimmed, flexible
+ *  whitespace. A custom `(option, query) => boolean` receives the original query,
+ *  including leading and trailing whitespace, in both per-facet and global
+ *  search. Custom predicates also run for an empty per-facet query. A whitespace-only
+ *  global query does not activate global results. `false` hides the facet's search
+ *  field; global search still matches its options with the built-in matcher. */
 export type FacetFilter = boolean | ((option: SelectOption<OptionValue>, query: string) => boolean);
 /** Pick **one** option. Value: the chosen option's `value` (or `undefined` when
  *  cleared). Re-picking the selected option clears it. Options are `Select`'s

package/dist/components/SelectFaceted.js

@@ -10,7 +10,6 @@ import { MenuSeparator } from "./MenuSeparator";
 import { Tag } from "./Tag";
 import { Input } from "./Input";
 import { Tooltip } from "./Tooltip";
-import "./select-parts.css";
 const leavesOf = (items) => {
   const out = [];
   for (const it of items) {
@@ -23,7 +22,11 @@ const leavesOf = (items) => {
   return out;
 };
 const isEmpty = (v) => v == null || v === "" || Array.isArray(v) && v.length === 0;
-const defaultMatch = (o, query) => matchesQuery(o, matchQueryRegex(query));
+const prepareMatch = (query) => {
+  const queryRe = matchQueryRegex(query);
+  return (option) => matchesQuery(option, queryRe);
+};
+const matcherFor = (filter, query, preparedMatch) => typeof filter === "function" ? (option) => filter(option, query) : preparedMatch ?? prepareMatch(query);
 const SelectFaceted = (props) => {
   const {
     facets,
@@ -95,10 +98,11 @@ const SelectFaceted = (props) => {
   const clearAll = () => commit({}, { all: true });
   const visibleLeavesOf = (facet) => {
     const leaves = leavesByKey.get(facet.key) ?? [];
-    if (!facet.filter) return leaves;
+    const filter = facet.filter;
+    if (!filter) return leaves;
     const q = queries[facet.key] ?? "";
-    const match = typeof facet.filter === "function" ? facet.filter : defaultMatch;
-    return leaves.filter((o) => match(o, q));
+    if (typeof filter !== "function" && !q.trim()) return leaves;
+    return leaves.filter(matcherFor(filter, q));
   };
   const filterHeader = (facet) => facet.filter ? /* @__PURE__ */ jsx("a-select-header", { slot: "header", "data-menu-open": "", children: /* @__PURE__ */ jsx(
     Input,
@@ -109,7 +113,10 @@ const SelectFaceted = (props) => {
       placeholder: "Filter\u2026",
       "aria-label": `Filter ${facet.label}`,
       "aria-autocomplete": "list",
-      onInput: (e) => setQueries((s) => ({ ...s, [facet.key]: e.currentTarget.value }))
+      onInput: (e) => {
+        const query = e.currentTarget.value;
+        setQueries((s) => ({ ...s, [facet.key]: query }));
+      }
     }
   ) }) : null;
   const optionRow = (facet, opt, keyPrefix = "") => {
@@ -191,9 +198,10 @@ const SelectFaceted = (props) => {
     ] });
   };
   const renderFlatResults = () => {
+    const match = prepareMatch(rootQuery);
     const groups = facets.filter((f) => f.kind === "single" || f.kind === "multiple").map((facet) => {
-      const match = typeof facet.filter === "function" ? facet.filter : defaultMatch;
-      return { facet, matched: (leavesByKey.get(facet.key) ?? []).filter((o) => match(o, rootQuery)) };
+      const matched = (leavesByKey.get(facet.key) ?? []).filter(matcherFor(facet.filter, rootQuery, match));
+      return { facet, matched };
     }).filter((g) => g.matched.length > 0);
     return groups.map(({ facet, matched }) => /* @__PURE__ */ jsx(MenuGroup, { label: facet.label, children: matched.map((opt) => optionRow(facet, opt, `${facet.key}:`)) }, facet.key));
   };
@@ -207,14 +215,17 @@ const SelectFaceted = (props) => {
     return (
       // `data-menu-open` keeps the menu open through typing; the value commits on
       // Enter / blur, not per keystroke.
-      /* @__PURE__ */ jsx("div", { "data-menu-open": "", style: { padding: "4px" }, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("a-select-faceted-text", { "data-menu-open": "", children: /* @__PURE__ */ jsx(
         Input,
         {
           size: "small",
           value: draft,
           placeholder: facet.placeholder,
           "aria-label": facet.label,
-          onInput: (e) => setDrafts((d) => ({ ...d, [facet.key]: e.currentTarget.value })),
+          onInput: (e) => {
+            const draft2 = e.currentTarget.value;
+            setDrafts((d) => ({ ...d, [facet.key]: draft2 }));
+          },
           onKeyDown: (e) => {
             if (e.key === "Enter") {
               e.preventDefault();

package/dist/components/Slider.d.ts

@@ -20,18 +20,27 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
     /** Visible field label, shown above the rail. A string supplies the slider's
      * accessible name; give a rich label an explicit `aria-label`. */
     label?: React.ReactNode;
-    /** Controlled value. A pair of numbers selects a range. Update it from `onValueChange`. */
+    /** Controlled numeric value. A pair selects a range, ordered low to high.
+     * Omit or pass `undefined` for uncontrolled use; `0` stays controlled.
+     * Runtime `null` is treated as omission; it is not a controlled empty value.
+     * Takes precedence over `defaultValue`, including on form reset. Values are
+     * clamped to the bounds and rounded to a step measured from `min`.
+     * Releasing control retains the last applied value. There is no empty numeric state. */
     value?: number | SliderRangeValue;
-    /** Initial uncontrolled value.
-     * @defaultValue 0 */
+    /** Initial uncontrolled value and form-reset baseline. Changes while pristine
+     * update the value; after interaction they affect the next reset. Without a
+     * default, scalar reset uses `min` and range reset uses `[min, max]`.
+     * @defaultValue min */
     defaultValue?: number | SliderRangeValue;
-    /** Lowest permitted value.
+    /** Lowest permitted value and step origin. Nonfinite values use 0.
      * @defaultValue 0 */
     min?: number;
-    /** Highest permitted value.
+    /** Highest permitted value. A lower bound than `min` collapses the range to
+     * `min`. Nonfinite values use 100.
      * @defaultValue 100 */
     max?: number;
-    /** Smallest keyboard and drag increment.
+    /** Smallest keyboard and drag increment. Nonpositive and nonfinite values
+     * use 1. Page keys move by at least one step, or one tenth of the range.
      * @defaultValue 1 */
     step?: number;
     /** Form field name. A range submits two values under this name. */
@@ -43,8 +52,8 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
      * @defaultValue 'neutral' */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Color of the thumb stroke. Pass a named tone or a literal CSS color for a
-     * one-off custom tone. Omit it to keep the thumb neutral.
-     * @defaultValue 'neutral' */
+     * one-off custom tone. An explicit `neutral` keeps the thumb neutral in every theme.
+     * @defaultValue 'neutral' (the Antithesis theme follows `tone`) */
     thumbTone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=24px, medium=28px, large=32px tall.
      * @defaultValue 'medium' */
@@ -81,9 +90,17 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
     trackClick?: 'drag-only' | 'jump';
     /** Fill the rail outside the selected value or range. */
     inverted?: boolean;
-    /** Fires on every keyboard or pointer value change. */
+    /** Reports each distinct requested value during a drag and each keyboard step.
+     * `onInput` runs first. The snapshot contains the requested value and effective
+     * constraints; the element's `value` remains the applied value. Controlled
+     * sliders accept by updating `value` and reject by leaving it unchanged.
+     * Events are notifications; `preventDefault()` does not veto a value request. */
     onValueChange?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void;
-    /** Fires after a drag ends and after each keyboard value change. */
+    /** Reports the final requested value after a drag, cancellation, or capture loss,
+     * and after each keyboard step. `onChange` runs first. A drag ending at its
+     * starting value is silent. Controlled requests can commit without being accepted.
+     * Uncontrolled form reset emits both callbacks when it changes the value;
+     * state restoration and application updates are silent. */
     onValueCommit?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void;
 }
 type TypedSliderProps<T extends SliderValue> = Omit<SliderProps, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit'> & {
@@ -97,5 +114,5 @@ type TypedSliderProps<T extends SliderValue> = Omit<SliderProps, 'value' | 'defa
  * starts a relative drag by default, so the thumb never jumps to the press point.
  * Requires `@antadesign/anta/elements` on the client.
  */
-export declare const Slider: <T extends SliderValue = number>({ label, value, defaultValue, min: minProp, max: maxProp, step: stepProp, name, disabled, tone, thumbTone, size, trackSize, thumbSize, thumbFill, round, valueDisplay, valuePrefix, valueSuffix, markers, trackClick, inverted, onInput, onChange, onValueChange, onValueCommit, className, style, children, tabIndex, ...rest }: TypedSliderProps<T>) => any;
+export declare const Slider: <T extends SliderValue = number>({ label, value, defaultValue, min: minProp, max: maxProp, step: stepProp, name, disabled, tone, thumbTone, size, trackSize, thumbSize, thumbFill, round, valueDisplay, valuePrefix, valueSuffix, markers, trackClick, inverted, onInput, onChange, onValueChange, onValueCommit, onKeyDown, onPointerDown, onPointerMove, className, style, children, tabIndex, ...rest }: TypedSliderProps<T>) => any;
 export {};