@tensor_1/react 2.31.0 → 2.32.0

package/dist/components/Select.js

@@ -1,16 +1,806 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment as Fragment2, forwardRef, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
-const Select = forwardRef(
-  ({ size = "md", className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "select",
+import { useUixLabels } from "../labels-context.js";
+import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { Drawer } from "./Drawer.js";
+import {
+  buildSelectModel,
+  countSelectOptions,
+  filterSelectItems,
+  firstEnabled,
+  isSelectGroup,
+  lastEnabled,
+  moveActive,
+  toggleValue,
+  toValueList,
+  typeahead
+} from "../select-model.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const DEFAULT_LABELS = {
+  search: "Search options",
+  searchPlaceholder: "Search\u2026",
+  loading: "Loading\u2026",
+  empty: "No options",
+  noMatches: "No matching options",
+  error: "Could not load the options.",
+  retry: "Retry",
+  clear: "Clear",
+  done: "Done",
+  selectedCount: "{count} selected",
+  results: "{count} options"
+};
+const fill = (template, count) => template.replace("{count}", String(count));
+function textOf(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (isValidElement(node)) return textOf(node.props.children);
+  return "";
+}
+function parseOption(el) {
+  const p = el.props;
+  const text = textOf(p.children).replace(/\s+/g, " ").trim();
+  const label = p.label ?? text;
+  const option = { value: p.value != null ? String(p.value) : text, label };
+  if (p.disabled) option.disabled = true;
+  if (p.hidden) option.hidden = true;
+  if (p.selected) option.selected = true;
+  return option;
+}
+function parseChildren(children) {
+  const out = [];
+  const walk = (nodes, into) => {
+    Children.forEach(nodes, (child) => {
+      if (!isValidElement(child)) return;
+      if (child.type === Fragment2) walk(child.props.children, into);
+      else if (child.type === "option") (into ?? out).push(parseOption(child));
+      else if (child.type === "optgroup" && !into) {
+        const p = child.props;
+        const options = [];
+        walk(p.children, options);
+        out.push({ label: p.label ?? "", disabled: p.disabled || void 0, options });
+      }
+    });
+  };
+  walk(children, null);
+  return out;
+}
+const selectProto = typeof HTMLSelectElement !== "undefined" ? HTMLSelectElement.prototype : null;
+const optionProto = typeof HTMLOptionElement !== "undefined" ? HTMLOptionElement.prototype : null;
+const descriptor = (proto, key) => proto ? Object.getOwnPropertyDescriptor(proto, key) : void 0;
+function readProxy(select) {
+  const selected = descriptor(optionProto, "selected")?.get;
+  return Array.from(select.options).filter((o) => selected ? selected.call(o) : o.selected).map((o) => o.value);
+}
+function writeProxy(select, values, multiple) {
+  const set = descriptor(optionProto, "selected")?.set;
+  let done = false;
+  for (const o of Array.from(select.options)) {
+    const on = multiple ? values.includes(o.value) : !done && o.value === (values[0] ?? "");
+    if (on) done = true;
+    if (set) set.call(o, on);
+    else o.selected = on;
+  }
+}
+const watched = /* @__PURE__ */ new WeakSet();
+function watchWrites(el, keys, proto, notify) {
+  if (watched.has(el) || !proto) return;
+  watched.add(el);
+  for (const key of keys) {
+    const d = descriptor(proto, key);
+    if (!d?.get || !d.set) continue;
+    const { get, set } = d;
+    Object.defineProperty(el, key, {
+      configurable: true,
+      enumerable: d.enumerable,
+      get() {
+        return get.call(this);
+      },
+      set(v) {
+        set.call(this, v);
+        notify();
+      }
+    });
+  }
+}
+const PHONE = "(pointer: coarse) and (max-width: 640px)";
+const isPhone = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(PHONE).matches;
+const OFFSET = 4;
+const EDGE = 8;
+const MAX_HEIGHT = 320;
+const TYPEAHEAD_MS = 500;
+function labelText(trigger, own, ariaLabel, labelledBy) {
+  if (ariaLabel) return ariaLabel;
+  const doc = trigger.ownerDocument;
+  const read = (root) => {
+    let text = "";
+    const walker = doc.createTreeWalker(
+      root,
+      4
+      /* SHOW_TEXT */
+    );
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      if (own.some((o) => o && o.contains(n))) continue;
+      text += n.nodeValue ?? "";
+    }
+    return text.replace(/\s+/g, " ").trim();
+  };
+  if (labelledBy) {
+    return labelledBy.split(/\s+/).map((id) => doc.getElementById(id)).filter((el) => !!el && el !== trigger).map(read).join(" ").trim();
+  }
+  const labels = trigger.labels;
+  return labels ? Array.from(labels).map(read).join(" ").trim() : "";
+}
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+const Select = forwardRef(function Select2(props, forwardedRef) {
+  const {
+    size = "md",
+    className,
+    style,
+    children,
+    options,
+    value,
+    defaultValue,
+    onChange,
+    onInput,
+    onInvalid,
+    onValueChange,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onClick,
+    placeholder,
+    invalid,
+    readOnly,
+    searchable = false,
+    loadOptions,
+    renderOption,
+    renderValue,
+    placement = "bottom-start",
+    labels: labelsProp,
+    name,
+    form,
+    required,
+    disabled,
+    multiple = false,
+    autoComplete,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_LABELS, ...uixLabels.select, ...labelsProp };
+  const uid = useId();
+  const listId = `${uid}-listbox`;
+  const optionId = (index) => `${uid}-option-${index}`;
+  const triggerRef = useRef(null);
+  const proxyRef = useRef(null);
+  const popupRef = useRef(null);
+  const listRef = useRef(null);
+  const searchRef = useRef(null);
+  const staticItems = useMemo(() => options ? [...options] : parseChildren(children), [options, children]);
+  const formModel = useMemo(() => buildSelectModel(staticItems), [staticItems]);
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(() => {
+    if (defaultValue !== void 0) return toValueList(defaultValue);
+    const marked = formModel.all.filter((e) => e.option.selected).map((e) => e.option.value);
+    if (multiple) return marked;
+    if (marked.length) return [marked[marked.length - 1]];
+    if (placeholder != null) return [""];
+    const first = formModel.all.find((e) => !e.disabled);
+    return [first ? first.option.value : ""];
+  });
+  const values = controlled ? toValueList(value) : internal;
+  const current = values[0] ?? "";
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const controlledRef = useRef(controlled);
+  controlledRef.current = controlled;
+  const [initialDefault] = useState(() => multiple ? values : current);
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState("popover");
+  const [active, setActive] = useState(-1);
+  const [query, setQuery] = useState("");
+  const [listLabel, setListLabel] = useState("");
+  const [formInvalid, setFormInvalid] = useState(false);
+  const snapshot = useRef([]);
+  const typed = useRef({ text: "", timer: null });
+  const loadRef = useRef(loadOptions);
+  loadRef.current = loadOptions;
+  const hasLoader = !!loadOptions;
+  const [asyncState, setAsyncState] = useState({ status: "idle", items: [], seen: /* @__PURE__ */ new Map() });
+  const request = useRef(null);
+  const load = useCallback((q) => {
+    const loader = loadRef.current;
+    if (!loader) return;
+    request.current?.abort();
+    const controller = new AbortController();
+    request.current = controller;
+    setAsyncState((s) => ({ ...s, status: "loading" }));
+    Promise.resolve().then(() => loader(q, controller.signal)).then((items) => {
+      if (controller.signal.aborted) return;
+      setAsyncState((s) => {
+        const seen = new Map(s.seen);
+        for (const item of items) for (const o of isSelectGroup(item) ? item.options : [item]) seen.set(o.value, o);
+        return { status: "ready", items: [...items], seen };
+      });
+    }, () => {
+      if (controller.signal.aborted) return;
+      setAsyncState((s) => ({ ...s, status: "error", items: [] }));
+    });
+  }, []);
+  useEffect(() => {
+    if (!open || !hasLoader) return void 0;
+    request.current?.abort();
+    const timer = setTimeout(() => load(query), query ? 200 : 0);
+    return () => clearTimeout(timer);
+  }, [open, query, hasLoader, load]);
+  useEffect(() => {
+    if (!open) request.current?.abort();
+  }, [open]);
+  useEffect(() => () => request.current?.abort(), []);
+  const isSearchable = searchable === true || searchable === "auto" && countSelectOptions(staticItems) > 12;
+  const listItems = hasLoader ? asyncState.items : isSearchable ? filterSelectItems(staticItems, query) : staticItems;
+  const listModel = useMemo(() => buildSelectModel(listItems), [listItems]);
+  const entries = listModel.entries;
+  const activeEntry = active >= 0 ? entries[active] : void 0;
+  const known = (v) => formModel.all.find((e) => e.option.value === v)?.option ?? asyncState.seen.get(v);
+  const proxyOptions = useMemo(() => {
+    const list = [];
+    const have = /* @__PURE__ */ new Set();
+    for (const e of formModel.all) {
+      have.add(e.option.value);
+      list.push({ value: e.option.value, label: e.option.label, disabled: e.disabled, group: formModel.sections[e.section]?.label });
+    }
+    for (const o of asyncState.seen.values()) if (!have.has(o.value)) {
+      have.add(o.value);
+      list.push({ value: o.value, label: o.label });
+    }
+    if (!multiple && !have.has("") && (placeholder != null || values.length === 0 || values.includes(""))) {
+      have.add("");
+      list.unshift({ value: "", label: placeholder ?? "" });
+    }
+    for (const v of values) if (!have.has(v)) {
+      have.add(v);
+      list.push({ value: v, label: v });
+    }
+    return list;
+  }, [formModel, asyncState.seen, values, multiple, placeholder]);
+  const syncProxy = useCallback(() => {
+    const proxy = proxyRef.current;
+    if (!proxy) return;
+    const now = readProxy(proxy);
+    const want = valuesRef.current;
+    const same = multiple ? now.length === want.length && now.every((v, i) => v === want[i]) : now[0] === (want[0] ?? "");
+    if (!same) writeProxy(proxy, want, multiple);
+  }, [multiple]);
+  useIsomorphicLayoutEffect(() => {
+    syncProxy();
+  });
+  const fromOutside = useCallback(() => {
+    const proxy = proxyRef.current;
+    if (!proxy || controlledRef.current) return;
+    const read = readProxy(proxy);
+    const next = multiple ? read : [read[0] ?? ""];
+    valuesRef.current = next;
+    setInternal(next);
+  }, [multiple]);
+  const setProxyRef = useCallback((el) => {
+    proxyRef.current = el;
+    if (el) {
+      watchWrites(el, ["value", "selectedIndex"], selectProto, fromOutside);
+      for (const o of Array.from(el.options)) watchWrites(o, ["selected"], optionProto, fromOutside);
+    }
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef) forwardedRef.current = el;
+  }, [forwardedRef, fromOutside]);
+  useIsomorphicLayoutEffect(() => {
+    const el = proxyRef.current;
+    if (el) for (const o of Array.from(el.options)) watchWrites(o, ["selected"], optionProto, fromOutside);
+  });
+  useEffect(() => {
+    const proxy = proxyRef.current;
+    if (!proxy) return void 0;
+    const doc = proxy.ownerDocument;
+    const onReset = (event) => {
+      if (!proxy.form || event.target !== proxy.form) return;
+      setTimeout(() => {
+        setFormInvalid(false);
+        if (controlledRef.current) {
+          syncProxy();
+          return;
+        }
+        const next = readProxy(proxy);
+        setInternal(multiple ? next : [next[0] ?? ""]);
+      }, 0);
+    };
+    const onProxyFocus = () => triggerRef.current?.focus();
+    doc.addEventListener("reset", onReset, true);
+    proxy.addEventListener("focus", onProxyFocus);
+    return () => {
+      doc.removeEventListener("reset", onReset, true);
+      proxy.removeEventListener("focus", onProxyFocus);
+    };
+  }, [multiple, syncProxy]);
+  const changed = useRef(void 0);
+  const commit = (next, option) => {
+    const proxy = proxyRef.current;
+    changed.current = option;
+    if (!proxy) {
+      if (!controlled) setInternal([...next]);
+      onValueChange?.(multiple ? [...next] : next[0] ?? "", option);
+      return;
+    }
+    writeProxy(proxy, next, multiple);
+    proxy.dispatchEvent(new Event("input", { bubbles: true }));
+    proxy.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+  const handleProxyChange = (event) => {
+    const read = readProxy(event.currentTarget);
+    const next = multiple ? read : [read[0] ?? ""];
+    if (!controlled) setInternal(next);
+    setFormInvalid(false);
+    onChange?.(event);
+    const option = changed.current ?? (multiple ? void 0 : known(next[0] ?? ""));
+    changed.current = void 0;
+    onValueChange?.(multiple ? next : next[0] ?? "", option);
+    if (controlled) queueMicrotask(syncProxy);
+  };
+  const selectedIndexIn = (list) => list.findIndex((e) => valuesRef.current.includes(e.option.value));
+  const openList = (target = "selected", typedText) => {
+    if (disabled || readOnly || open) return;
+    const trigger = triggerRef.current;
+    snapshot.current = [...valuesRef.current];
+    setMode(isPhone() ? "sheet" : "popover");
+    setQuery("");
+    if (trigger) setListLabel(labelText(trigger, [trigger, proxyRef.current, popupRef.current], ariaLabel, ariaLabelledBy));
+    const base = hasLoader ? buildSelectModel(asyncState.items).entries : formModel.entries;
+    const selected = selectedIndexIn(base);
+    let next = target === "first" ? firstEnabled(base) : target === "last" ? lastEnabled(base) : selected >= 0 ? selected : firstEnabled(base);
+    if (typedText) {
+      const found = typeahead(base, typedText, selected);
+      if (found >= 0) next = found;
+    }
+    setActive(next);
+    setOpen(true);
+  };
+  const close = (opts = {}) => {
+    if (opts.revert && multiple) {
+      const was = snapshot.current;
+      const now = valuesRef.current;
+      if (was.length !== now.length || was.some((v, i) => v !== now[i])) commit(was);
+    }
+    setOpen(false);
+    setActive(-1);
+    setQuery("");
+    typed.current.text = "";
+    if (opts.focus) triggerRef.current?.focus({ preventScroll: true });
+  };
+  const choose = (entry, closeAfter = !multiple) => {
+    if (!entry || entry.disabled) return;
+    if (multiple) {
+      commit(toggleValue(valuesRef.current, entry.option.value), entry.option);
+      setActive(entry.index);
+      if (closeAfter) close({ focus: true });
+      return;
+    }
+    if (entry.option.value !== current) commit([entry.option.value], entry.option);
+    close({ focus: true });
+  };
+  const clearAll = () => {
+    if (valuesRef.current.length) commit([]);
+  };
+  const typeChar = (char, list, from) => {
+    const state = typed.current;
+    if (state.timer) clearTimeout(state.timer);
+    state.text += char;
+    state.timer = setTimeout(() => {
+      state.text = "";
+      state.timer = null;
+    }, TYPEAHEAD_MS);
+    return typeahead(list, state.text, from);
+  };
+  useEffect(() => () => {
+    if (typed.current.timer) clearTimeout(typed.current.timer);
+  }, []);
+  const printable = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+  const onOpenKey = (e, editable) => {
+    const { key, altKey } = e;
+    const retryable = asyncState.status === "error" && !entries.length;
+    switch (key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!altKey) setActive(moveActive(entries, active, 1));
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        if (altKey) {
+          if (multiple) close({ focus: true });
+          else choose(activeEntry);
+          return;
+        }
+        setActive(moveActive(entries, active, -1));
+        return;
+      case "PageDown":
+        e.preventDefault();
+        setActive(moveActive(entries, active, 10));
+        return;
+      case "PageUp":
+        e.preventDefault();
+        setActive(moveActive(entries, active, -10));
+        return;
+      case "Home":
+      case "End":
+        if (editable) return;
+        e.preventDefault();
+        setActive(key === "Home" ? firstEnabled(entries) : lastEnabled(entries));
+        return;
+      case "Enter":
+        e.preventDefault();
+        if (retryable) {
+          load(query);
+          return;
+        }
+        if (activeEntry) choose(activeEntry);
+        else if (!multiple) close({ focus: true });
+        return;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        close({ revert: true, focus: true });
+        return;
+      case "Tab":
+        if (!multiple && activeEntry && !activeEntry.disabled && activeEntry.option.value !== current) {
+          commit([activeEntry.option.value], activeEntry.option);
+        }
+        close();
+        return;
+      case " ":
+        if (editable) return;
+        if (typed.current.text) break;
+        e.preventDefault();
+        if (retryable) {
+          load(query);
+          return;
+        }
+        if (activeEntry) choose(activeEntry);
+        return;
+      default:
+        break;
+    }
+    if (!editable && printable(e)) {
+      e.preventDefault();
+      const found = typeChar(e.key, entries, active);
+      if (found >= 0) setActive(found);
+    }
+  };
+  const onTriggerKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || disabled || readOnly) return;
+    if (open && mode === "popover" && !isSearchable) {
+      onOpenKey(e, false);
+      return;
+    }
+    if (open) return;
+    const { key, altKey } = e;
+    if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") {
+      e.preventDefault();
+      openList();
+    } else if (key === "Home" || key === "End") {
+      e.preventDefault();
+      openList(key === "Home" ? "first" : "last");
+    } else if (multiple && (key === "Delete" || key === "Backspace") && valuesRef.current.length) {
+      e.preventDefault();
+      clearAll();
+    } else if (printable(e) && !altKey) {
+      e.preventDefault();
+      const state = typed.current;
+      if (state.timer) clearTimeout(state.timer);
+      state.text = e.key;
+      state.timer = setTimeout(() => {
+        state.text = "";
+        state.timer = null;
+      }, TYPEAHEAD_MS);
+      openList("selected", e.key);
+    }
+  };
+  const own = (node) => {
+    const n = node;
+    return !!n && [triggerRef.current, popupRef.current, proxyRef.current, listRef.current?.closest("dialog") ?? null].some((el) => el?.contains(n));
+  };
+  const asSelectEvent = (e) => {
+    const proxy = proxyRef.current;
+    return proxy ? Object.create(e, { target: { value: proxy }, currentTarget: { value: proxy } }) : e;
+  };
+  const handleFocus = (e) => {
+    if (own(e.relatedTarget)) return;
+    onFocus?.(asSelectEvent(e));
+  };
+  const handleBlur = (e) => {
+    if (own(e.relatedTarget)) return;
+    if (open && mode === "popover") close();
+    onBlur?.(asSelectEvent(e));
+  };
+  const showing = open && mode === "popover";
+  useIsomorphicLayoutEffect(() => {
+    const popup = popupRef.current;
+    const trigger = triggerRef.current;
+    if (!popup || !trigger) return;
+    const isOpen = () => {
+      try {
+        return popup.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    };
+    if (showing) {
+      const r = trigger.getBoundingClientRect();
+      const room = Math.max(r.top, window.innerHeight - r.bottom) - OFFSET - EDGE;
+      popup.style.minWidth = `${Math.round(r.width)}px`;
+      popup.style.maxHeight = `${Math.max(96, Math.min(MAX_HEIGHT, Math.floor(room)))}px`;
+      try {
+        if (!isOpen()) popup.showPopover();
+      } catch {
+      }
+      if (isSearchable) searchRef.current?.focus({ preventScroll: true });
+    } else {
+      try {
+        if (isOpen()) popup.hidePopover();
+      } catch {
+      }
+    }
+  }, [showing, isSearchable]);
+  useAnchoredPosition(triggerRef, popupRef, { open: showing, placement, offset: OFFSET, padding: EDGE });
+  useEffect(() => {
+    if (open && mode === "sheet") (isSearchable ? searchRef.current : listRef.current)?.focus({ preventScroll: true });
+  }, [open, mode, isSearchable]);
+  useIsomorphicLayoutEffect(() => {
+    const list = listRef.current;
+    if (!open || !list || active < 0) return;
+    const el = list.ownerDocument.getElementById(optionId(active));
+    if (!el || !list.contains(el)) return;
+    const top = el.offsetTop;
+    const bottom = top + el.offsetHeight;
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }, [open, active, mode]);
+  useEffect(() => {
+    if (!showing) return void 0;
+    const doc = triggerRef.current?.ownerDocument;
+    if (!doc) return void 0;
+    const onDown = (event) => {
+      const target = event.target;
+      if (own(target)) return;
+      const labelsOf = triggerRef.current?.labels;
+      if (target && labelsOf && Array.from(labelsOf).some((l) => l.contains(target))) return;
+      close();
+    };
+    doc.addEventListener("pointerdown", onDown, true);
+    return () => doc.removeEventListener("pointerdown", onDown, true);
+  }, [showing]);
+  useEffect(() => {
+    if (!open) return;
+    if (active >= entries.length || active < 0 && entries.length) setActive(entries.length ? selectedIndexIn(entries) >= 0 ? selectedIndexIn(entries) : firstEnabled(entries) : -1);
+  }, [open, entries.length, query]);
+  const emptyEntry = formModel.all.find((x) => x.option.value === "");
+  const emptyIsPlaceholder = !emptyEntry || emptyEntry.hidden || emptyEntry.disabled;
+  const firstSelected = multiple ? known(values[0] ?? "") : known(current);
+  const showPlaceholder = multiple ? values.length === 0 : !firstSelected || current === "" && emptyIsPlaceholder;
+  const selectedOptions = showPlaceholder ? [] : values.map((v) => known(v)).filter((o) => !!o);
+  const display = renderValue && selectedOptions.length ? renderValue(selectedOptions) : showPlaceholder ? firstSelected?.label || placeholder || "" : /* @__PURE__ */ jsxs(Fragment, { children: [
+    firstSelected?.icon != null && /* @__PURE__ */ jsx("span", { className: "uix-select__icon", "aria-hidden": "true", children: firstSelected.icon }),
+    /* @__PURE__ */ jsx("span", { className: "uix-select__text", children: firstSelected?.label })
+  ] });
+  const more = multiple && values.length > 1 ? values.length - 1 : 0;
+  const isInvalid = !!invalid || formInvalid || ariaInvalid != null && ariaInvalid !== false && ariaInvalid !== "false";
+  const popoverAttr = { popover: "manual" };
+  const searchField = isSearchable && /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: searchRef,
+      className: "uix-input uix-select__search",
+      type: "text",
+      role: "combobox",
+      "aria-label": listLabel || labels.search,
+      "aria-autocomplete": "list",
+      "aria-expanded": open,
+      "aria-controls": listId,
+      "aria-activedescendant": open && activeEntry ? optionId(active) : void 0,
+      autoComplete: "off",
+      spellCheck: false,
+      placeholder: labels.searchPlaceholder,
+      value: query,
+      onChange: (e) => {
+        setQuery(e.target.value);
+        setActive(-1);
+      },
+      onKeyDown: (e) => onOpenKey(e, true),
+      onBlur: mode === "popover" ? handleBlur : void 0
+    }
+  );
+  const renderEntry = (entry) => {
+    const o = entry.option;
+    const selected = values.includes(o.value);
+    const isActive = entry.index === active;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: optionId(entry.index),
+        role: "option",
+        className: "uix-listbox__option",
+        "aria-selected": selected,
+        "aria-disabled": entry.disabled || void 0,
+        "data-active": open && isActive || void 0,
+        onMouseDown: (e) => e.preventDefault(),
+        onPointerMove: () => {
+          if (!isActive && !entry.disabled) setActive(entry.index);
+        },
+        onClick: (e) => {
+          e.preventDefault();
+          choose(entry);
+        },
+        children: [
+          renderOption ? renderOption(o, { selected, active: isActive }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            o.icon != null && /* @__PURE__ */ jsx("span", { className: "uix-listbox__icon", "aria-hidden": "true", children: o.icon }),
+            /* @__PURE__ */ jsxs("span", { className: "uix-listbox__text", children: [
+              /* @__PURE__ */ jsx("span", { className: "uix-listbox__label", children: o.label }),
+              o.description && /* @__PURE__ */ jsx("span", { className: "uix-listbox__desc", children: o.description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "uix-listbox__check", "aria-hidden": "true", children: selected && /* @__PURE__ */ jsx(CheckIcon, {}) })
+        ]
+      },
+      `${o.value}-${entry.index}`
+    );
+  };
+  const empty = entries.length === 0;
+  const status = hasLoader ? asyncState.status : "ready";
+  const listbox = /* @__PURE__ */ jsx(
+    "div",
     {
-      ref,
-      className: cx("uix-select", size === "sm" && "uix-select--sm", className),
-      ...props
+      ref: listRef,
+      id: listId,
+      role: "listbox",
+      className: "uix-listbox uix-select__listbox",
+      "aria-label": listLabel || placeholder || void 0,
+      "aria-multiselectable": multiple || void 0,
+      "aria-busy": status === "loading" || void 0,
+      "aria-activedescendant": open && mode === "sheet" && !isSearchable && activeEntry ? optionId(active) : void 0,
+      tabIndex: mode === "sheet" ? 0 : -1,
+      hidden: entries.length === 0 || void 0,
+      onKeyDown: mode === "sheet" && !isSearchable ? (e) => onOpenKey(e, false) : void 0,
+      children: listModel.sections.map((section, i) => section.label != null ? /* @__PURE__ */ jsxs("div", { role: "group", className: "uix-listbox__group", "aria-labelledby": `${uid}-group-${i}`, "aria-disabled": section.disabled || void 0, children: [
+        /* @__PURE__ */ jsx("div", { id: `${uid}-group-${i}`, role: "presentation", className: "uix-listbox__group-label", children: section.label }),
+        section.entries.map(renderEntry)
+      ] }, `g${i}`) : /* @__PURE__ */ jsx(Fragment2, { children: section.entries.map(renderEntry) }, `s${i}`))
     }
-  )
-);
+  );
+  const stateRow = status === "loading" && empty ? /* @__PURE__ */ jsxs("div", { className: "uix-select__state", role: "status", children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-spinner uix-select__spinner", "aria-hidden": "true" }),
+    labels.loading
+  ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "uix-select__state", role: "alert", children: [
+    /* @__PURE__ */ jsx("span", { children: labels.error }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--link uix-btn--sm", tabIndex: mode === "sheet" ? 0 : -1, onClick: () => load(query), children: labels.retry })
+  ] }) : empty && status !== "idle" ? /* @__PURE__ */ jsx("div", { className: "uix-select__state", children: query ? labels.noMatches : labels.empty }) : null;
+  const toolbar = multiple && values.length > 0 && mode === "popover" && /* @__PURE__ */ jsxs("div", { className: "uix-select__toolbar", children: [
+    /* @__PURE__ */ jsx("span", { children: fill(labels.selectedCount, values.length) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--link uix-btn--sm", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: clearAll, children: labels.clear })
+  ] });
+  const live = isSearchable && open && query ? fill(labels.results, entries.length) : "";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    searchField,
+    toolbar,
+    listbox,
+    stateRow,
+    isSearchable && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", "aria-live": "polite", children: live })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...rest,
+        ref: triggerRef,
+        type: "button",
+        role: "combobox",
+        className: cx("uix-select", size === "sm" && "uix-select--sm", className),
+        style,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        "aria-activedescendant": showing && !isSearchable && activeEntry ? optionId(active) : void 0,
+        "aria-invalid": isInvalid || void 0,
+        "aria-readonly": readOnly || void 0,
+        "aria-required": rest["aria-required"] ?? (required || void 0),
+        "data-invalid": isInvalid || void 0,
+        "data-placeholder": showPlaceholder || void 0,
+        "data-state": open ? "open" : "closed",
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented || readOnly) return;
+          if (document.activeElement !== e.currentTarget) e.currentTarget.focus({ preventScroll: true });
+          if (open) close();
+          else openList();
+        },
+        onKeyDown: onTriggerKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-select__value", children: display }),
+          more > 0 && /* @__PURE__ */ jsxs("span", { className: "uix-select__more", children: [
+            /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+              "+",
+              more
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: `, ${fill(labels.selectedCount, values.length)}` })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref: setProxyRef,
+        "data-uix-select-proxy": "",
+        className: "uix-select__proxy",
+        "aria-hidden": "true",
+        tabIndex: -1,
+        name,
+        form,
+        required,
+        disabled,
+        multiple,
+        autoComplete,
+        defaultValue: initialDefault,
+        onChange: handleProxyChange,
+        onInput,
+        onInvalid: (e) => {
+          onInvalid?.(e);
+          setFormInvalid(true);
+        },
+        children: proxyOptions.map((o, i) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, `${o.value}-${i}`))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: popupRef,
+        className: "uix-select__popup",
+        "data-uix-select-popup": "",
+        hidden: !showing,
+        ...popoverAttr,
+        onMouseDown: (e) => {
+          if (e.target !== searchRef.current) e.preventDefault();
+        },
+        onClick: (e) => e.preventDefault(),
+        children: mode === "popover" && body
+      }
+    ),
+    mode === "sheet" && /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        side: "bottom",
+        open,
+        onClose: () => close({ focus: true }),
+        title: listLabel || placeholder || labels.search,
+        className: "uix-select__sheet",
+        footer: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost", onClick: clearAll, children: labels.clear }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", style: { marginLeft: "auto" }, onClick: () => close({ focus: true }), children: labels.done })
+        ] }) : void 0,
+        onClick: (e) => {
+          if (e.target !== e.currentTarget) e.preventDefault();
+        },
+        children: body
+      }
+    )
+  ] });
+});
 Select.displayName = "Select";
 export {
   Select