@new-black/lyra 0.1.10 → 0.1.11

package/dist/lyra155.js

@@ -1,256 +1,341 @@
-import U, { createContext as Z, useReducer as xe, createRef as me, useRef as D, useCallback as Oe, useMemo as C, useEffect as ee, useContext as te, Fragment as ge } from "react";
-import { useDisposables as V } from "./lyra367.js";
-import { useId as G } from "./lyra369.js";
-import { useIsoMorphicEffect as z } from "./lyra370.js";
-import { useComputed as oe } from "./lyra366.js";
-import { useSyncRefs as k } from "./lyra374.js";
-import { Features as Y, forwardRefWithAs as w, compact as Re, render as F } from "./lyra378.js";
-import { match as E } from "./lyra380.js";
-import { disposables as q } from "./lyra377.js";
-import { Keys as x } from "./lyra385.js";
-import { Focus as L, calculateActiveIndex as Se } from "./lyra376.js";
-import { isDisabledReactIssue7711 as he } from "./lyra379.js";
-import { isFocusableElement as Le, FocusableMode as ye, sortByDomNode as Ie } from "./lyra382.js";
-import { OpenClosedProvider as $e, State as H, useOpenClosed as Te } from "./lyra384.js";
-import { useResolveButtonType as Pe } from "./lyra373.js";
-import { useOutsideClick as Ce } from "./lyra372.js";
-import { Hidden as De, Features as Ee } from "./lyra383.js";
-import { objectToFormEntries as ke } from "./lyra381.js";
-import { getOwnerDocument as we } from "./lyra391.js";
-import { useEvent as p } from "./lyra368.js";
-import { useControllable as Fe } from "./lyra386.js";
-import { useLatestValue as Ae } from "./lyra371.js";
-import { useTrackedPointer as Me } from "./lyra388.js";
-import { useTextValue as Qe } from "./lyra392.js";
-var Be = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))(Be || {}), Ne = ((e) => (e[e.Single = 0] = "Single", e[e.Multi = 1] = "Multi", e))(Ne || {}), Ue = ((e) => (e[e.Pointer = 0] = "Pointer", e[e.Other = 1] = "Other", e))(Ue || {}), Ve = ((e) => (e[e.OpenListbox = 0] = "OpenListbox", e[e.CloseListbox = 1] = "CloseListbox", e[e.GoToOption = 2] = "GoToOption", e[e.Search = 3] = "Search", e[e.ClearSearch = 4] = "ClearSearch", e[e.RegisterOption = 5] = "RegisterOption", e[e.UnregisterOption = 6] = "UnregisterOption", e[e.RegisterLabel = 7] = "RegisterLabel", e))(Ve || {});
-function j(e, a = (i) => i) {
-  let i = e.activeOptionIndex !== null ? e.options[e.activeOptionIndex] : null, r = Ie(a(e.options.slice()), (u) => u.dataRef.current.domRef.current), l = i ? r.indexOf(i) : null;
-  return l === -1 && (l = null), { options: r, activeOptionIndex: l };
+import Y, { createContext as be, useReducer as xe, createRef as ge, useRef as y, useCallback as Oe, useMemo as L, useEffect as se, useContext as fe, Fragment as Re } from "react";
+import { useComputed as re } from "./lyra366.js";
+import { useDisposables as ie } from "./lyra367.js";
+import { useEvent as v } from "./lyra368.js";
+import { useId as J } from "./lyra369.js";
+import { useIsoMorphicEffect as k } from "./lyra370.js";
+import { useLatestValue as Ce } from "./lyra371.js";
+import { useOutsideClick as Ie } from "./lyra372.js";
+import { useResolveButtonType as Se } from "./lyra373.js";
+import { useSyncRefs as z } from "./lyra374.js";
+import { useTreeWalker as Pe } from "./lyra375.js";
+import { Focus as I, calculateActiveIndex as Te } from "./lyra376.js";
+import { disposables as ce } from "./lyra377.js";
+import { Features as de, forwardRefWithAs as K, compact as he, render as U } from "./lyra378.js";
+import { isDisabledReactIssue7711 as ye } from "./lyra379.js";
+import { match as B } from "./lyra380.js";
+import { objectToFormEntries as $e } from "./lyra381.js";
+import { sortByDomNode as Ee } from "./lyra382.js";
+import { Hidden as De, Features as Fe } from "./lyra383.js";
+import { OpenClosedProvider as we, State as ee, useOpenClosed as Ae } from "./lyra384.js";
+import { Keys as h } from "./lyra385.js";
+import { useControllable as Le } from "./lyra386.js";
+import { useWatch as pe } from "./lyra387.js";
+import { useTrackedPointer as ke } from "./lyra388.js";
+import { isMobile as Me } from "./lyra389.js";
+import { useOwnerDocument as _e } from "./lyra390.js";
+var Ne = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))(Ne || {}), Ve = ((e) => (e[e.Single = 0] = "Single", e[e.Multi = 1] = "Multi", e))(Ve || {}), Be = ((e) => (e[e.Pointer = 0] = "Pointer", e[e.Other = 1] = "Other", e))(Be || {}), Ke = ((e) => (e[e.OpenCombobox = 0] = "OpenCombobox", e[e.CloseCombobox = 1] = "CloseCombobox", e[e.GoToOption = 2] = "GoToOption", e[e.RegisterOption = 3] = "RegisterOption", e[e.UnregisterOption = 4] = "UnregisterOption", e[e.RegisterLabel = 5] = "RegisterLabel", e))(Ke || {});
+function ne(e, a = (u) => u) {
+  let u = e.activeOptionIndex !== null ? e.options[e.activeOptionIndex] : null, o = Ee(a(e.options.slice()), (s) => s.dataRef.current.domRef.current), d = u ? o.indexOf(u) : null;
+  return d === -1 && (d = null), { options: o, activeOptionIndex: d };
 }
-let ze = { 1(e) {
-  return e.dataRef.current.disabled || e.listboxState === 1 ? e : { ...e, activeOptionIndex: null, listboxState: 1 };
+let Ue = { 1(e) {
+  var a;
+  return (a = e.dataRef.current) != null && a.disabled || e.comboboxState === 1 ? e : { ...e, activeOptionIndex: null, comboboxState: 1 };
 }, 0(e) {
-  if (e.dataRef.current.disabled || e.listboxState === 0)
+  var a;
+  if ((a = e.dataRef.current) != null && a.disabled || e.comboboxState === 0)
     return e;
-  let a = e.activeOptionIndex, { isSelected: i } = e.dataRef.current, r = e.options.findIndex((l) => i(l.dataRef.current.value));
-  return r !== -1 && (a = r), { ...e, listboxState: 0, activeOptionIndex: a };
+  let u = e.activeOptionIndex;
+  if (e.dataRef.current) {
+    let { isSelected: o } = e.dataRef.current, d = e.options.findIndex((s) => o(s.dataRef.current.value));
+    d !== -1 && (u = d);
+  }
+  return { ...e, comboboxState: 0, activeOptionIndex: u };
 }, 2(e, a) {
-  var i;
-  if (e.dataRef.current.disabled || e.listboxState === 1)
+  var u, o, d, s;
+  if ((u = e.dataRef.current) != null && u.disabled || (o = e.dataRef.current) != null && o.optionsRef.current && !((d = e.dataRef.current) != null && d.optionsPropsRef.current.static) && e.comboboxState === 1)
     return e;
-  let r = j(e), l = Se(a, { resolveItems: () => r.options, resolveActiveIndex: () => r.activeOptionIndex, resolveId: (u) => u.id, resolveDisabled: (u) => u.dataRef.current.disabled });
-  return { ...e, ...r, searchQuery: "", activeOptionIndex: l, activationTrigger: (i = a.trigger) != null ? i : 1 };
+  let r = ne(e);
+  if (r.activeOptionIndex === null) {
+    let x = r.options.findIndex((c) => !c.dataRef.current.disabled);
+    x !== -1 && (r.activeOptionIndex = x);
+  }
+  let g = Te(a, { resolveItems: () => r.options, resolveActiveIndex: () => r.activeOptionIndex, resolveId: (x) => x.id, resolveDisabled: (x) => x.dataRef.current.disabled });
+  return { ...e, ...r, activeOptionIndex: g, activationTrigger: (s = a.trigger) != null ? s : 1 };
 }, 3: (e, a) => {
-  if (e.dataRef.current.disabled || e.listboxState === 1)
-    return e;
-  let i = e.searchQuery !== "" ? 0 : 1, r = e.searchQuery + a.value.toLowerCase(), l = (e.activeOptionIndex !== null ? e.options.slice(e.activeOptionIndex + i).concat(e.options.slice(0, e.activeOptionIndex + i)) : e.options).find((t) => {
-    var n;
-    return !t.dataRef.current.disabled && ((n = t.dataRef.current.textValue) == null ? void 0 : n.startsWith(r));
-  }), u = l ? e.options.indexOf(l) : -1;
-  return u === -1 || u === e.activeOptionIndex ? { ...e, searchQuery: r } : { ...e, searchQuery: r, activeOptionIndex: u, activationTrigger: 1 };
-}, 4(e) {
-  return e.dataRef.current.disabled || e.listboxState === 1 || e.searchQuery === "" ? e : { ...e, searchQuery: "" };
-}, 5: (e, a) => {
-  let i = { id: a.id, dataRef: a.dataRef }, r = j(e, (l) => [...l, i]);
-  return e.activeOptionIndex === null && e.dataRef.current.isSelected(a.dataRef.current.value) && (r.activeOptionIndex = r.options.indexOf(i)), { ...e, ...r };
-}, 6: (e, a) => {
-  let i = j(e, (r) => {
-    let l = r.findIndex((u) => u.id === a.id);
-    return l !== -1 && r.splice(l, 1), r;
+  var u, o;
+  let d = { id: a.id, dataRef: a.dataRef }, s = ne(e, (g) => [...g, d]);
+  e.activeOptionIndex === null && (u = e.dataRef.current) != null && u.isSelected(a.dataRef.current.value) && (s.activeOptionIndex = s.options.indexOf(d));
+  let r = { ...e, ...s, activationTrigger: 1 };
+  return (o = e.dataRef.current) != null && o.__demoMode && e.dataRef.current.value === void 0 && (r.activeOptionIndex = 0), r;
+}, 4: (e, a) => {
+  let u = ne(e, (o) => {
+    let d = o.findIndex((s) => s.id === a.id);
+    return d !== -1 && o.splice(d, 1), o;
   });
-  return { ...e, ...i, activationTrigger: 1 };
-}, 7: (e, a) => ({ ...e, labelId: a.id }) }, X = Z(null);
-X.displayName = "ListboxActionsContext";
-function A(e) {
-  let a = te(X);
+  return { ...e, ...u, activationTrigger: 1 };
+}, 5: (e, a) => ({ ...e, labelId: a.id }) }, ae = be(null);
+ae.displayName = "ComboboxActionsContext";
+function X(e) {
+  let a = fe(ae);
   if (a === null) {
-    let i = new Error(`<${e} /> is missing a parent <Listbox /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(i, A), i;
+    let u = new Error(`<${e} /> is missing a parent <Combobox /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(u, X), u;
   }
   return a;
 }
-let _ = Z(null);
-_.displayName = "ListboxDataContext";
-function M(e) {
-  let a = te(_);
+let le = be(null);
+le.displayName = "ComboboxDataContext";
+function H(e) {
+  let a = fe(le);
   if (a === null) {
-    let i = new Error(`<${e} /> is missing a parent <Listbox /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(i, M), i;
+    let u = new Error(`<${e} /> is missing a parent <Combobox /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(u, H), u;
   }
   return a;
 }
 function He(e, a) {
-  return E(a.type, ze, e, a);
+  return B(a.type, Ue, e, a);
 }
-let Ge = ge;
-function Ke(e, a) {
-  let { value: i, defaultValue: r, form: l, name: u, onChange: t, by: n = (s, d) => s === d, disabled: b = !1, horizontal: m = !1, multiple: O = !1, ...y } = e;
-  const T = m ? "horizontal" : "vertical";
-  let I = k(a), [g = O ? [] : void 0, h] = Fe(i, t, r), [v, o] = xe(He, { dataRef: me(), listboxState: 1, options: [], searchQuery: "", labelId: null, activeOptionIndex: null, activationTrigger: 1 }), c = D({ static: !1, hold: !1 }), P = D(null), Q = D(null), K = D(null), R = p(typeof n == "string" ? (s, d) => {
-    let S = n;
-    return (s == null ? void 0 : s[S]) === (d == null ? void 0 : d[S]);
-  } : n), $ = Oe((s) => E(f.mode, { 1: () => g.some((d) => R(d, s)), 0: () => R(g, s) }), [g]), f = C(() => ({ ...v, value: g, disabled: b, mode: O ? 1 : 0, orientation: T, compare: R, isSelected: $, optionsPropsRef: c, labelRef: P, buttonRef: Q, optionsRef: K }), [g, b, O, v]);
-  z(() => {
-    v.dataRef.current = f;
-  }, [f]), Ce([f.buttonRef, f.optionsRef], (s, d) => {
-    var S;
-    o({ type: 1 }), Le(d, ye.Loose) || (s.preventDefault(), (S = f.buttonRef.current) == null || S.focus());
-  }, f.listboxState === 0);
-  let re = C(() => ({ open: f.listboxState === 0, disabled: b, value: g }), [f, b, g]), ne = p((s) => {
-    let d = f.options.find((S) => S.id === s);
-    d && W(d.dataRef.current.value);
-  }), ae = p(() => {
-    if (f.activeOptionIndex !== null) {
-      let { dataRef: s, id: d } = f.options[f.activeOptionIndex];
-      W(s.current.value), o({ type: 2, focus: L.Specific, id: d });
+let qe = Re;
+function je(e, a) {
+  let { value: u, defaultValue: o, onChange: d, form: s, name: r, by: g = (p, m) => p === m, disabled: x = !1, __demoMode: c = !1, nullable: O = !1, multiple: C = !1, ...t } = e, [n = C ? [] : void 0, R] = Le(u, d, o), [f, l] = xe(He, { dataRef: ge(), comboboxState: c ? 0 : 1, options: [], activeOptionIndex: null, activationTrigger: 1, labelId: null }), $ = y(!1), M = y({ static: !1, hold: !1 }), q = y(null), D = y(null), _ = y(null), N = y(null), F = v(typeof g == "string" ? (p, m) => {
+    let S = g;
+    return (p == null ? void 0 : p[S]) === (m == null ? void 0 : m[S]);
+  } : g), j = Oe((p) => B(i.mode, { 1: () => n.some((m) => F(m, p)), 0: () => F(n, p) }), [n]), i = L(() => ({ ...f, optionsPropsRef: M, labelRef: q, inputRef: D, buttonRef: _, optionsRef: N, value: n, defaultValue: o, disabled: x, mode: C ? 1 : 0, get activeOptionIndex() {
+    if ($.current && f.activeOptionIndex === null && f.options.length > 0) {
+      let p = f.options.findIndex((m) => !m.dataRef.current.disabled);
+      if (p !== -1)
+        return p;
+    }
+    return f.activeOptionIndex;
+  }, compare: F, isSelected: j, nullable: O, __demoMode: c }), [n, o, x, C, O, c, f]), T = y(i.activeOptionIndex !== null ? i.options[i.activeOptionIndex] : null);
+  se(() => {
+    let p = i.activeOptionIndex !== null ? i.options[i.activeOptionIndex] : null;
+    T.current !== p && (T.current = p);
+  }), k(() => {
+    f.dataRef.current = i;
+  }, [i]), Ie([i.buttonRef, i.inputRef, i.optionsRef], () => te.closeCombobox(), i.comboboxState === 0);
+  let V = L(() => ({ open: i.comboboxState === 0, disabled: x, activeIndex: i.activeOptionIndex, activeOption: i.activeOptionIndex === null ? null : i.options[i.activeOptionIndex].dataRef.current.value, value: n }), [i, x, n]), oe = v((p) => {
+    let m = i.options.find((S) => S.id === p);
+    m && w(m.dataRef.current.value);
+  }), b = v(() => {
+    if (i.activeOptionIndex !== null) {
+      let { dataRef: p, id: m } = i.options[i.activeOptionIndex];
+      w(p.current.value), te.goToOption(I.Specific, m);
     }
-  }), ie = p(() => o({ type: 0 })), le = p(() => o({ type: 1 })), se = p((s, d, S) => s === L.Specific ? o({ type: 2, focus: L.Specific, id: d, trigger: S }) : o({ type: 2, focus: s, trigger: S })), ue = p((s, d) => (o({ type: 5, id: s, dataRef: d }), () => o({ type: 6, id: s }))), de = p((s) => (o({ type: 7, id: s }), () => o({ type: 7, id: null }))), W = p((s) => E(f.mode, { 0() {
-    return h == null ? void 0 : h(s);
+  }), W = v(() => {
+    l({ type: 0 }), $.current = !0;
+  }), E = v(() => {
+    l({ type: 1 }), $.current = !1;
+  }), G = v((p, m, S) => ($.current = !1, p === I.Specific ? l({ type: 2, focus: I.Specific, id: m, trigger: S }) : l({ type: 2, focus: p, trigger: S }))), P = v((p, m) => (l({ type: 3, id: p, dataRef: m }), () => {
+    var S;
+    ((S = T.current) == null ? void 0 : S.id) === p && ($.current = !0), l({ type: 4, id: p });
+  })), A = v((p) => (l({ type: 5, id: p }), () => l({ type: 5, id: null }))), w = v((p) => B(i.mode, { 0() {
+    return R == null ? void 0 : R(p);
   }, 1() {
-    let d = f.value.slice(), S = d.findIndex((N) => R(N, s));
-    return S === -1 ? d.push(s) : d.splice(S, 1), h == null ? void 0 : h(d);
-  } })), pe = p((s) => o({ type: 3, value: s })), ce = p(() => o({ type: 4 })), fe = C(() => ({ onChange: W, registerOption: ue, registerLabel: de, goToOption: se, closeListbox: le, openListbox: ie, selectActiveOption: ae, selectOption: ne, search: pe, clearSearch: ce }), []), be = { ref: I }, B = D(null), ve = V();
-  return ee(() => {
-    B.current && r !== void 0 && ve.addEventListener(B.current, "reset", () => {
-      h == null || h(r);
+    let m = i.value.slice(), S = m.findIndex((Q) => F(Q, p));
+    return S === -1 ? m.push(p) : m.splice(S, 1), R == null ? void 0 : R(m);
+  } })), te = L(() => ({ onChange: w, registerOption: P, registerLabel: A, goToOption: G, closeCombobox: E, openCombobox: W, selectActiveOption: b, selectOption: oe }), []), me = a === null ? {} : { ref: a }, Z = y(null), ve = ie();
+  return se(() => {
+    Z.current && o !== void 0 && ve.addEventListener(Z.current, "reset", () => {
+      R == null || R(o);
     });
-  }, [B, h]), U.createElement(X.Provider, { value: fe }, U.createElement(_.Provider, { value: f }, U.createElement($e, { value: E(f.listboxState, { 0: H.Open, 1: H.Closed }) }, u != null && g != null && ke({ [u]: g }).map(([s, d], S) => U.createElement(De, { features: Ee.Hidden, ref: S === 0 ? (N) => {
-    var J;
-    B.current = (J = N == null ? void 0 : N.closest("form")) != null ? J : null;
-  } : void 0, ...Re({ key: s, as: "input", type: "hidden", hidden: !0, readOnly: !0, form: l, name: s, value: d }) })), F({ ourProps: be, theirProps: y, slot: re, defaultTag: Ge, name: "Listbox" }))));
+  }, [Z, R]), Y.createElement(ae.Provider, { value: te }, Y.createElement(le.Provider, { value: i }, Y.createElement(we, { value: B(i.comboboxState, { 0: ee.Open, 1: ee.Closed }) }, r != null && n != null && $e({ [r]: n }).map(([p, m], S) => Y.createElement(De, { features: Fe.Hidden, ref: S === 0 ? (Q) => {
+    var ue;
+    Z.current = (ue = Q == null ? void 0 : Q.closest("form")) != null ? ue : null;
+  } : void 0, ...he({ key: p, as: "input", type: "hidden", hidden: !0, readOnly: !0, form: s, name: p, value: m }) })), U({ ourProps: me, theirProps: t, slot: V, defaultTag: qe, name: "Combobox" }))));
 }
-let We = "button";
-function je(e, a) {
-  var i;
-  let r = G(), { id: l = `headlessui-listbox-button-${r}`, ...u } = e, t = M("Listbox.Button"), n = A("Listbox.Button"), b = k(t.buttonRef, a), m = V(), O = p((v) => {
-    switch (v.key) {
-      case x.Space:
-      case x.Enter:
-      case x.ArrowDown:
-        v.preventDefault(), n.openListbox(), m.nextFrame(() => {
-          t.value || n.goToOption(L.First);
-        });
-        break;
-      case x.ArrowUp:
-        v.preventDefault(), n.openListbox(), m.nextFrame(() => {
-          t.value || n.goToOption(L.Last);
-        });
-        break;
+let We = "input";
+function Ge(e, a) {
+  var u, o, d, s;
+  let r = J(), { id: g = `headlessui-combobox-input-${r}`, onChange: x, displayValue: c, type: O = "text", ...C } = e, t = H("Combobox.Input"), n = X("Combobox.Input"), R = z(t.inputRef, a), f = _e(t.inputRef), l = y(!1), $ = ie(), M = v(() => {
+    n.onChange(null), t.optionsRef.current && (t.optionsRef.current.scrollTop = 0), n.goToOption(I.Nothing);
+  }), q = function() {
+    var b;
+    return typeof c == "function" && t.value !== void 0 ? (b = c(t.value)) != null ? b : "" : typeof t.value == "string" ? t.value : "";
+  }();
+  pe(([b, W], [E, G]) => {
+    if (l.current)
+      return;
+    let P = t.inputRef.current;
+    P && ((G === 0 && W === 1 || b !== E) && (P.value = b), requestAnimationFrame(() => {
+      if (l.current || !P || (f == null ? void 0 : f.activeElement) !== P)
+        return;
+      let { selectionStart: A, selectionEnd: w } = P;
+      Math.abs((w ?? 0) - (A ?? 0)) === 0 && A === 0 && P.setSelectionRange(P.value.length, P.value.length);
+    }));
+  }, [q, t.comboboxState, f]), pe(([b], [W]) => {
+    if (b === 0 && W === 1) {
+      if (l.current)
+        return;
+      let E = t.inputRef.current;
+      if (!E)
+        return;
+      let G = E.value, { selectionStart: P, selectionEnd: A, selectionDirection: w } = E;
+      E.value = "", E.value = G, w !== null ? E.setSelectionRange(P, A, w) : E.setSelectionRange(P, A);
     }
-  }), y = p((v) => {
-    switch (v.key) {
-      case x.Space:
-        v.preventDefault();
+  }, [t.comboboxState]);
+  let D = y(!1), _ = v(() => {
+    D.current = !0;
+  }), N = v(() => {
+    $.nextFrame(() => {
+      D.current = !1;
+    });
+  }), F = v((b) => {
+    switch (l.current = !0, b.key) {
+      case h.Enter:
+        if (l.current = !1, t.comboboxState !== 0 || D.current)
+          return;
+        if (b.preventDefault(), b.stopPropagation(), t.activeOptionIndex === null) {
+          n.closeCombobox();
+          return;
+        }
+        n.selectActiveOption(), t.mode === 0 && n.closeCombobox();
+        break;
+      case h.ArrowDown:
+        return l.current = !1, b.preventDefault(), b.stopPropagation(), B(t.comboboxState, { 0: () => {
+          n.goToOption(I.Next);
+        }, 1: () => {
+          n.openCombobox();
+        } });
+      case h.ArrowUp:
+        return l.current = !1, b.preventDefault(), b.stopPropagation(), B(t.comboboxState, { 0: () => {
+          n.goToOption(I.Previous);
+        }, 1: () => {
+          n.openCombobox(), $.nextFrame(() => {
+            t.value || n.goToOption(I.Last);
+          });
+        } });
+      case h.Home:
+        if (b.shiftKey)
+          break;
+        return l.current = !1, b.preventDefault(), b.stopPropagation(), n.goToOption(I.First);
+      case h.PageUp:
+        return l.current = !1, b.preventDefault(), b.stopPropagation(), n.goToOption(I.First);
+      case h.End:
+        if (b.shiftKey)
+          break;
+        return l.current = !1, b.preventDefault(), b.stopPropagation(), n.goToOption(I.Last);
+      case h.PageDown:
+        return l.current = !1, b.preventDefault(), b.stopPropagation(), n.goToOption(I.Last);
+      case h.Escape:
+        return l.current = !1, t.comboboxState !== 0 ? void 0 : (b.preventDefault(), t.optionsRef.current && !t.optionsPropsRef.current.static && b.stopPropagation(), t.nullable && t.mode === 0 && t.value === null && M(), n.closeCombobox());
+      case h.Tab:
+        if (l.current = !1, t.comboboxState !== 0)
+          return;
+        t.mode === 0 && n.selectActiveOption(), n.closeCombobox();
         break;
     }
-  }), T = p((v) => {
-    if (he(v.currentTarget))
-      return v.preventDefault();
-    t.listboxState === 0 ? (n.closeListbox(), m.nextFrame(() => {
-      var o;
-      return (o = t.buttonRef.current) == null ? void 0 : o.focus({ preventScroll: !0 });
-    })) : (v.preventDefault(), n.openListbox());
-  }), I = oe(() => {
+  }), j = v((b) => {
+    x == null || x(b), t.nullable && t.mode === 0 && b.target.value === "" && M(), n.openCombobox();
+  }), i = v(() => {
+    l.current = !1;
+  }), T = re(() => {
     if (t.labelId)
-      return [t.labelId, l].join(" ");
-  }, [t.labelId, l]), g = C(() => ({ open: t.listboxState === 0, disabled: t.disabled, value: t.value }), [t]), h = { ref: b, id: l, type: Pe(e, t.buttonRef), "aria-haspopup": "listbox", "aria-controls": (i = t.optionsRef.current) == null ? void 0 : i.id, "aria-expanded": t.listboxState === 0, "aria-labelledby": I, disabled: t.disabled, onKeyDown: O, onKeyUp: y, onClick: T };
-  return F({ ourProps: h, theirProps: u, slot: g, defaultTag: We, name: "Listbox.Button" });
+      return [t.labelId].join(" ");
+  }, [t.labelId]), V = L(() => ({ open: t.comboboxState === 0, disabled: t.disabled }), [t]), oe = { ref: R, id: g, role: "combobox", type: O, "aria-controls": (u = t.optionsRef.current) == null ? void 0 : u.id, "aria-expanded": t.comboboxState === 0, "aria-activedescendant": t.activeOptionIndex === null || (o = t.options[t.activeOptionIndex]) == null ? void 0 : o.id, "aria-labelledby": T, "aria-autocomplete": "list", defaultValue: (s = (d = e.defaultValue) != null ? d : t.defaultValue !== void 0 ? c == null ? void 0 : c(t.defaultValue) : null) != null ? s : t.defaultValue, disabled: t.disabled, onCompositionStart: _, onCompositionEnd: N, onKeyDown: F, onChange: j, onBlur: i };
+  return U({ ourProps: oe, theirProps: C, slot: V, defaultTag: We, name: "Combobox.Input" });
 }
-let qe = "label";
-function Xe(e, a) {
-  let i = G(), { id: r = `headlessui-listbox-label-${i}`, ...l } = e, u = M("Listbox.Label"), t = A("Listbox.Label"), n = k(u.labelRef, a);
-  z(() => t.registerLabel(r), [r]);
-  let b = p(() => {
-    var O;
-    return (O = u.buttonRef.current) == null ? void 0 : O.focus({ preventScroll: !0 });
-  }), m = C(() => ({ open: u.listboxState === 0, disabled: u.disabled }), [u]);
-  return F({ ourProps: { ref: n, id: r, onClick: b }, theirProps: l, slot: m, defaultTag: qe, name: "Listbox.Label" });
-}
-let _e = "ul", Je = Y.RenderStrategy | Y.Static;
-function Ye(e, a) {
-  var i;
-  let r = G(), { id: l = `headlessui-listbox-options-${r}`, ...u } = e, t = M("Listbox.Options"), n = A("Listbox.Options"), b = k(t.optionsRef, a), m = V(), O = V(), y = Te(), T = (() => y !== null ? (y & H.Open) === H.Open : t.listboxState === 0)();
-  ee(() => {
-    var o;
-    let c = t.optionsRef.current;
-    c && t.listboxState === 0 && c !== ((o = we(c)) == null ? void 0 : o.activeElement) && c.focus({ preventScroll: !0 });
-  }, [t.listboxState, t.optionsRef]);
-  let I = p((o) => {
-    switch (O.dispose(), o.key) {
-      case x.Space:
-        if (t.searchQuery !== "")
-          return o.preventDefault(), o.stopPropagation(), n.search(o.key);
-      case x.Enter:
-        if (o.preventDefault(), o.stopPropagation(), t.activeOptionIndex !== null) {
-          let { dataRef: c } = t.options[t.activeOptionIndex];
-          n.onChange(c.current.value);
-        }
-        t.mode === 0 && (n.closeListbox(), q().nextFrame(() => {
-          var c;
-          return (c = t.buttonRef.current) == null ? void 0 : c.focus({ preventScroll: !0 });
-        }));
-        break;
-      case E(t.orientation, { vertical: x.ArrowDown, horizontal: x.ArrowRight }):
-        return o.preventDefault(), o.stopPropagation(), n.goToOption(L.Next);
-      case E(t.orientation, { vertical: x.ArrowUp, horizontal: x.ArrowLeft }):
-        return o.preventDefault(), o.stopPropagation(), n.goToOption(L.Previous);
-      case x.Home:
-      case x.PageUp:
-        return o.preventDefault(), o.stopPropagation(), n.goToOption(L.First);
-      case x.End:
-      case x.PageDown:
-        return o.preventDefault(), o.stopPropagation(), n.goToOption(L.Last);
-      case x.Escape:
-        return o.preventDefault(), o.stopPropagation(), n.closeListbox(), m.nextFrame(() => {
-          var c;
-          return (c = t.buttonRef.current) == null ? void 0 : c.focus({ preventScroll: !0 });
+let Je = "button";
+function ze(e, a) {
+  var u;
+  let o = H("Combobox.Button"), d = X("Combobox.Button"), s = z(o.buttonRef, a), r = J(), { id: g = `headlessui-combobox-button-${r}`, ...x } = e, c = ie(), O = v((f) => {
+    switch (f.key) {
+      case h.ArrowDown:
+        return f.preventDefault(), f.stopPropagation(), o.comboboxState === 1 && d.openCombobox(), c.nextFrame(() => {
+          var l;
+          return (l = o.inputRef.current) == null ? void 0 : l.focus({ preventScroll: !0 });
         });
-      case x.Tab:
-        o.preventDefault(), o.stopPropagation();
-        break;
+      case h.ArrowUp:
+        return f.preventDefault(), f.stopPropagation(), o.comboboxState === 1 && (d.openCombobox(), c.nextFrame(() => {
+          o.value || d.goToOption(I.Last);
+        })), c.nextFrame(() => {
+          var l;
+          return (l = o.inputRef.current) == null ? void 0 : l.focus({ preventScroll: !0 });
+        });
+      case h.Escape:
+        return o.comboboxState !== 0 ? void 0 : (f.preventDefault(), o.optionsRef.current && !o.optionsPropsRef.current.static && f.stopPropagation(), d.closeCombobox(), c.nextFrame(() => {
+          var l;
+          return (l = o.inputRef.current) == null ? void 0 : l.focus({ preventScroll: !0 });
+        }));
       default:
-        o.key.length === 1 && (n.search(o.key), O.setTimeout(() => n.clearSearch(), 350));
-        break;
+        return;
     }
-  }), g = oe(() => {
-    var o, c, P;
-    return (P = (o = t.labelRef.current) == null ? void 0 : o.id) != null ? P : (c = t.buttonRef.current) == null ? void 0 : c.id;
-  }, [t.labelRef.current, t.buttonRef.current]), h = C(() => ({ open: t.listboxState === 0 }), [t]), v = { "aria-activedescendant": t.activeOptionIndex === null || (i = t.options[t.activeOptionIndex]) == null ? void 0 : i.id, "aria-multiselectable": t.mode === 1 ? !0 : void 0, "aria-labelledby": g, "aria-orientation": t.orientation, id: l, onKeyDown: I, role: "listbox", tabIndex: 0, ref: b };
-  return F({ ourProps: v, theirProps: u, slot: h, defaultTag: _e, features: Je, visible: T, name: "Listbox.Options" });
+  }), C = v((f) => {
+    if (ye(f.currentTarget))
+      return f.preventDefault();
+    o.comboboxState === 0 ? d.closeCombobox() : (f.preventDefault(), d.openCombobox()), c.nextFrame(() => {
+      var l;
+      return (l = o.inputRef.current) == null ? void 0 : l.focus({ preventScroll: !0 });
+    });
+  }), t = re(() => {
+    if (o.labelId)
+      return [o.labelId, g].join(" ");
+  }, [o.labelId, g]), n = L(() => ({ open: o.comboboxState === 0, disabled: o.disabled, value: o.value }), [o]), R = { ref: s, id: g, type: Se(e, o.buttonRef), tabIndex: -1, "aria-haspopup": "listbox", "aria-controls": (u = o.optionsRef.current) == null ? void 0 : u.id, "aria-expanded": o.comboboxState === 0, "aria-labelledby": t, disabled: o.disabled, onClick: C, onKeyDown: O };
+  return U({ ourProps: R, theirProps: x, slot: n, defaultTag: Je, name: "Combobox.Button" });
+}
+let Xe = "label";
+function Ze(e, a) {
+  let u = J(), { id: o = `headlessui-combobox-label-${u}`, ...d } = e, s = H("Combobox.Label"), r = X("Combobox.Label"), g = z(s.labelRef, a);
+  k(() => r.registerLabel(o), [o]);
+  let x = v(() => {
+    var O;
+    return (O = s.inputRef.current) == null ? void 0 : O.focus({ preventScroll: !0 });
+  }), c = L(() => ({ open: s.comboboxState === 0, disabled: s.disabled }), [s]);
+  return U({ ourProps: { ref: g, id: o, onClick: x }, theirProps: d, slot: c, defaultTag: Xe, name: "Combobox.Label" });
+}
+let Qe = "ul", Ye = de.RenderStrategy | de.Static;
+function eo(e, a) {
+  let u = J(), { id: o = `headlessui-combobox-options-${u}`, hold: d = !1, ...s } = e, r = H("Combobox.Options"), g = z(r.optionsRef, a), x = Ae(), c = (() => x !== null ? (x & ee.Open) === ee.Open : r.comboboxState === 0)();
+  k(() => {
+    var n;
+    r.optionsPropsRef.current.static = (n = e.static) != null ? n : !1;
+  }, [r.optionsPropsRef, e.static]), k(() => {
+    r.optionsPropsRef.current.hold = d;
+  }, [r.optionsPropsRef, d]), Pe({ container: r.optionsRef.current, enabled: r.comboboxState === 0, accept(n) {
+    return n.getAttribute("role") === "option" ? NodeFilter.FILTER_REJECT : n.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+  }, walk(n) {
+    n.setAttribute("role", "none");
+  } });
+  let O = re(() => {
+    var n, R;
+    return (R = r.labelId) != null ? R : (n = r.buttonRef.current) == null ? void 0 : n.id;
+  }, [r.labelId, r.buttonRef.current]), C = L(() => ({ open: r.comboboxState === 0 }), [r]), t = { "aria-labelledby": O, role: "listbox", "aria-multiselectable": r.mode === 1 ? !0 : void 0, id: o, ref: g };
+  return U({ ourProps: t, theirProps: s, slot: C, defaultTag: Qe, features: Ye, visible: c, name: "Combobox.Options" });
 }
-let Ze = "li";
-function et(e, a) {
-  let i = G(), { id: r = `headlessui-listbox-option-${i}`, disabled: l = !1, value: u, ...t } = e, n = M("Listbox.Option"), b = A("Listbox.Option"), m = n.activeOptionIndex !== null ? n.options[n.activeOptionIndex].id === r : !1, O = n.isSelected(u), y = D(null), T = Qe(y), I = Ae({ disabled: l, value: u, domRef: y, get textValue() {
-    return T();
-  } }), g = k(a, y);
-  z(() => {
-    if (n.listboxState !== 0 || !m || n.activationTrigger === 0)
+let oo = "li";
+function to(e, a) {
+  var u, o;
+  let d = J(), { id: s = `headlessui-combobox-option-${d}`, disabled: r = !1, value: g, ...x } = e, c = H("Combobox.Option"), O = X("Combobox.Option"), C = c.activeOptionIndex !== null ? c.options[c.activeOptionIndex].id === s : !1, t = c.isSelected(g), n = y(null), R = Ce({ disabled: r, value: g, domRef: n, textValue: (o = (u = n.current) == null ? void 0 : u.textContent) == null ? void 0 : o.toLowerCase() }), f = z(a, n), l = v(() => O.selectOption(s));
+  k(() => O.registerOption(s, R), [R, s]);
+  let $ = y(!c.__demoMode);
+  k(() => {
+    if (!c.__demoMode)
       return;
-    let R = q();
-    return R.requestAnimationFrame(() => {
-      var $, f;
-      (f = ($ = y.current) == null ? void 0 : $.scrollIntoView) == null || f.call($, { block: "nearest" });
-    }), R.dispose;
-  }, [y, m, n.listboxState, n.activationTrigger, n.activeOptionIndex]), z(() => b.registerOption(r, I), [I, r]);
-  let h = p((R) => {
-    if (l)
-      return R.preventDefault();
-    b.onChange(u), n.mode === 0 && (b.closeListbox(), q().nextFrame(() => {
-      var $;
-      return ($ = n.buttonRef.current) == null ? void 0 : $.focus({ preventScroll: !0 });
-    }));
-  }), v = p(() => {
-    if (l)
-      return b.goToOption(L.Nothing);
-    b.goToOption(L.Specific, r);
-  }), o = Me(), c = p((R) => o.update(R)), P = p((R) => {
-    o.wasMoved(R) && (l || m || b.goToOption(L.Specific, r, 0));
-  }), Q = p((R) => {
-    o.wasMoved(R) && (l || m && b.goToOption(L.Nothing));
-  }), K = C(() => ({ active: m, selected: O, disabled: l }), [m, O, l]);
-  return F({ ourProps: { id: r, ref: g, role: "option", tabIndex: l === !0 ? void 0 : -1, "aria-disabled": l === !0 ? !0 : void 0, "aria-selected": O, disabled: void 0, onClick: h, onFocus: v, onPointerEnter: c, onMouseEnter: c, onPointerMove: P, onMouseMove: P, onPointerLeave: Q, onMouseLeave: Q }, theirProps: t, slot: K, defaultTag: Ze, name: "Listbox.Option" });
+    let i = ce();
+    return i.requestAnimationFrame(() => {
+      $.current = !0;
+    }), i.dispose;
+  }, []), k(() => {
+    if (c.comboboxState !== 0 || !C || !$.current || c.activationTrigger === 0)
+      return;
+    let i = ce();
+    return i.requestAnimationFrame(() => {
+      var T, V;
+      (V = (T = n.current) == null ? void 0 : T.scrollIntoView) == null || V.call(T, { block: "nearest" });
+    }), i.dispose;
+  }, [n, C, c.comboboxState, c.activationTrigger, c.activeOptionIndex]);
+  let M = v((i) => {
+    if (r)
+      return i.preventDefault();
+    l(), c.mode === 0 && O.closeCombobox(), Me() || requestAnimationFrame(() => {
+      var T;
+      return (T = c.inputRef.current) == null ? void 0 : T.focus();
+    });
+  }), q = v(() => {
+    if (r)
+      return O.goToOption(I.Nothing);
+    O.goToOption(I.Specific, s);
+  }), D = ke(), _ = v((i) => D.update(i)), N = v((i) => {
+    D.wasMoved(i) && (r || C || O.goToOption(I.Specific, s, 0));
+  }), F = v((i) => {
+    D.wasMoved(i) && (r || C && (c.optionsPropsRef.current.hold || O.goToOption(I.Nothing)));
+  }), j = L(() => ({ active: C, selected: t, disabled: r }), [C, t, r]);
+  return U({ ourProps: { id: s, ref: f, role: "option", tabIndex: r === !0 ? void 0 : -1, "aria-disabled": r === !0 ? !0 : void 0, "aria-selected": t, disabled: void 0, onClick: M, onFocus: q, onPointerEnter: _, onMouseEnter: _, onPointerMove: N, onMouseMove: N, onPointerLeave: F, onMouseLeave: F }, theirProps: x, slot: j, defaultTag: oo, name: "Combobox.Option" });
 }
-let tt = w(Ke), ot = w(je), rt = w(Xe), nt = w(Ye), at = w(et), Dt = Object.assign(tt, { Button: ot, Label: rt, Options: nt, Option: at });
+let no = K(je), ro = K(ze), io = K(Ge), ao = K(Ze), lo = K(eo), uo = K(to), Mo = Object.assign(no, { Input: io, Button: ro, Label: ao, Options: lo, Option: uo });
 export {
-  Dt as Listbox
+  Mo as Combobox
 };