@telegraph/combobox 0.0.38 → 0.0.40

package/dist/esm/index.mjs

@@ -1,24 +1,26 @@
-import { jsx as c, jsxs as S, Fragment as V } from "react/jsx-runtime";
-import { useControllableState as G } from "@radix-ui/react-use-controllable-state";
-import * as M from "@radix-ui/react-visually-hidden";
-import { Button as k } from "@telegraph/button";
-import { useComposedRefs as F } from "@telegraph/compose-refs";
-import { RefToTgphRef as Y } from "@telegraph/helpers";
-import { Lucide as v, Icon as H } from "@telegraph/icon";
-import { Input as z } from "@telegraph/input";
-import { Stack as E, Box as B } from "@telegraph/layout";
+import { jsx as i, jsxs as S, Fragment as F } from "react/jsx-runtime";
+import { DismissableLayer as M } from "@radix-ui/react-dismissable-layer";
+import { useControllableState as Y } from "@radix-ui/react-use-controllable-state";
+import * as z from "@radix-ui/react-visually-hidden";
+import { Button as E } from "@telegraph/button";
+import { useComposedRefs as H } from "@telegraph/compose-refs";
+import { RefToTgphRef as X } from "@telegraph/helpers";
+import { Lucide as v, Icon as K } from "@telegraph/icon";
+import { Input as q } from "@telegraph/input";
+import { Stack as T, Box as B } from "@telegraph/layout";
 import { Menu as O } from "@telegraph/menu";
 import { Tag as D } from "@telegraph/tag";
-import { Tooltip as X } from "@telegraph/tooltip";
+import { Tooltip as N } from "@telegraph/tooltip";
 import { Text as P } from "@telegraph/typography";
 import { motion as I, AnimatePresence as L } from "framer-motion";
-import i from "react";
-const q = {
+import c from "react";
+const U = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, R = (t) => Array.isArray(t), T = (t) => typeof t == "object" && !Array.isArray(t) || !t, N = ["ArrowDown", "PageUp", "Home"], U = ["ArrowUp", "PageDown", "End"], K = ["Enter", " "], x = i.createContext({
+}, R = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || !t, J = ["ArrowDown", "PageUp", "Home"], W = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], x = c.createContext({
+  value: void 0,
   onValueChange: () => {
   },
   contentId: "",
@@ -28,65 +30,71 @@ const q = {
   },
   onOpenToggle: () => {
   },
-  clearable: !1
-}), J = ({
+  clearable: !1,
+  disabled: !1
+}), Z = ({
   modal: t = !0,
   closeOnSelect: l = !0,
   clearable: e = !1,
-  open: u,
-  onOpenChange: s,
-  defaultOpen: r,
-  value: n,
-  onValueChange: o,
-  errored: a,
-  placeholder: b,
-  layout: d,
-  ...y
+  disabled: u = !1,
+  open: s,
+  onOpenChange: r,
+  defaultOpen: n,
+  value: o,
+  onValueChange: a,
+  errored: b,
+  placeholder: d,
+  layout: y,
+  ...p
 }) => {
-  const p = i.useId(), g = i.useId(), h = i.useRef(null), m = i.useRef(null), f = i.useRef(null), [C, w] = i.useState(""), [Q = !1, A] = G({
-    prop: u,
-    defaultProp: r,
-    onChange: s
-  }), _ = i.useCallback(() => {
-    A(($) => !$);
+  const g = c.useId(), f = c.useId(), m = c.useRef(null), h = c.useRef(null), C = c.useRef(null), [w, V] = c.useState(""), [Q = !1, A] = Y({
+    prop: s,
+    defaultProp: n,
+    onChange: r
+  }), $ = c.useCallback(() => {
+    A((G) => !G);
   }, [A]);
-  return i.useEffect(() => {
-    Q || w("");
-  }, [Q]), /* @__PURE__ */ c(
+  return c.useEffect(() => {
+    Q || V("");
+  }, [Q]), /* @__PURE__ */ i(
     x.Provider,
     {
       value: {
-        contentId: p,
-        triggerId: g,
-        value: n,
-        onValueChange: o,
-        placeholder: b,
+        contentId: g,
+        triggerId: f,
+        value: o,
+        // Need to cast this to avoid type errors
+        // because the type of onValueChange is not
+        // consistent with the value type
+        onValueChange: a,
+        placeholder: d,
         open: Q,
         setOpen: A,
-        onOpenToggle: _,
+        onOpenToggle: $,
         closeOnSelect: l,
         clearable: e,
-        searchQuery: C,
-        setSearchQuery: w,
-        triggerRef: h,
-        searchRef: m,
-        contentRef: f,
-        errored: a,
-        layout: d
+        disabled: u,
+        searchQuery: w,
+        setSearchQuery: V,
+        triggerRef: m,
+        searchRef: h,
+        contentRef: C,
+        errored: b,
+        layout: y
       },
-      children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ i(
         O.Root,
         {
           open: Q,
           onOpenChange: A,
           modal: t,
-          ...y
+          ...p
         }
       )
     }
   );
-}, W = ({ label: t, value: l, ...e }) => {
-  const u = i.useContext(x);
+}, ee = ({ label: t, value: l, ...e }) => {
+  const u = c.useContext(x);
   return /* @__PURE__ */ S(
     D.Root,
     {
@@ -108,8 +116,8 @@ const q = {
       },
       ...e,
       children: [
-        /* @__PURE__ */ c(D.Text, { children: t || l }),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ i(D.Text, { children: t || l }),
+        /* @__PURE__ */ i(
           D.Button,
           {
             icon: { icon: v.X, alt: `Remove ${l}` },
@@ -123,13 +131,13 @@ const q = {
       ]
     }
   );
-}, Z = () => {
+}, te = () => {
   var l, e;
-  const t = i.useContext(x);
+  const t = c.useContext(x);
   if (t.value && R(t.value)) {
     const u = t.layout || "truncate", s = t.value.length - 2, r = s.toString().split("");
-    return t.value.length === 0 ? /* @__PURE__ */ c(k.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
-      E,
+    return t.value.length === 0 ? /* @__PURE__ */ i(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
+      T,
       {
         gap: "1",
         w: "full",
@@ -140,12 +148,12 @@ const q = {
           flexGrow: 1
         },
         children: [
-          /* @__PURE__ */ c(L, { initial: !1, mode: "popLayout", children: t.value.map((n, o) => {
+          /* @__PURE__ */ i(L, { initial: !1, mode: "popLayout", children: t.value.map((n, o) => {
             if (n != null && n.value && (u === "truncate" && o <= 1 || u === "wrap"))
-              return /* @__PURE__ */ c(Y, { children: /* @__PURE__ */ c(W, { ...n }) }, n.value);
+              return /* @__PURE__ */ i(X, { children: /* @__PURE__ */ i(ee, { ...n }) }, n.value);
           }) }),
-          /* @__PURE__ */ c(L, { children: u === "truncate" && t.value.length > 2 && /* @__PURE__ */ c(
-            E,
+          /* @__PURE__ */ i(L, { children: u === "truncate" && t.value.length > 2 && /* @__PURE__ */ i(
+            T,
             {
               as: I.div,
               initial: { opacity: 0 },
@@ -164,7 +172,7 @@ const q = {
               },
               children: /* @__PURE__ */ S(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
-                /* @__PURE__ */ c(L, { mode: "wait", initial: !1, children: r.map((n) => /* @__PURE__ */ c(
+                /* @__PURE__ */ i(L, { mode: "wait", initial: !1, children: r.map((n) => /* @__PURE__ */ i(
                   B,
                   {
                     as: I.span,
@@ -194,16 +202,16 @@ const q = {
       }
     );
   }
-  return /* @__PURE__ */ c(k.Text, { color: t.value ? "default" : "gray", children: ((l = t == null ? void 0 : t.value) == null ? void 0 : l.label) || ((e = t == null ? void 0 : t.value) == null ? void 0 : e.value) || t.placeholder });
-}, ee = ({ size: t = "2", ...l }) => {
-  const e = i.useContext(x), u = i.useCallback(() => {
+  return /* @__PURE__ */ i(E.Text, { color: t.value ? "default" : "gray", children: ((l = t == null ? void 0 : t.value) == null ? void 0 : l.label) || ((e = t == null ? void 0 : t.value) == null ? void 0 : e.value) || t.placeholder });
+}, oe = ({ size: t = "2", ...l }) => {
+  const e = c.useContext(x), u = c.useCallback(() => {
     var n, o, a;
-    return e.value ? T(e.value) ? ((n = e.value) == null ? void 0 : n.label) || ((o = e.value) == null ? void 0 : o.value) || e.placeholder : ((a = e.value) == null ? void 0 : a.map((b) => b == null ? void 0 : b.label).join(", ")) || e.placeholder : e.placeholder;
-  }, [e.value, e.placeholder]), s = i.useMemo(() => {
+    return e.value ? k(e.value) ? ((n = e.value) == null ? void 0 : n.label) || ((o = e.value) == null ? void 0 : o.value) || e.placeholder : ((a = e.value) == null ? void 0 : a.map((b) => b == null ? void 0 : b.label).join(", ")) || e.placeholder : e.placeholder;
+  }, [e.value, e.placeholder]), s = c.useMemo(() => {
     var n;
     if (R(e.value))
       return e.clearable && ((n = e.value) == null ? void 0 : n.length) > 0;
-    if (T(e.value))
+    if (k(e.value))
       return e.clearable && e.value;
   }, [e.clearable, e.value]), r = () => {
     var n, o;
@@ -211,13 +219,13 @@ const q = {
       const a = e.onValueChange;
       a == null || a([]);
     }
-    if (T(e.value)) {
+    if (k(e.value)) {
       const a = e.onValueChange;
       a == null || a(void 0);
     }
     (o = (n = e.triggerRef) == null ? void 0 : n.current) == null || o.focus();
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ i(
     O.Trigger,
     {
       ...l,
@@ -231,7 +239,7 @@ const q = {
           n.stopPropagation();
           return;
         }
-        if (K.includes(n.key)) {
+        if (j.includes(n.key)) {
           n.preventDefault();
           return;
         }
@@ -242,14 +250,14 @@ const q = {
       },
       tgphRef: e.triggerRef,
       children: /* @__PURE__ */ S(
-        k.Root,
+        E.Root,
         {
           id: e.triggerId,
           type: "button",
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: q[t],
+          minH: U[t],
           h: "full",
           w: "full",
           py: "1",
@@ -263,11 +271,12 @@ const q = {
           "aria-haspopup": "listbox",
           "data-tgph-combobox-trigger": !0,
           "data-tgph-comobox-trigger-open": e.open,
+          disabled: e.disabled,
           children: [
-            /* @__PURE__ */ c(Z, {}),
-            /* @__PURE__ */ S(E, { align: "center", gap: "1", children: [
-              s && /* @__PURE__ */ c(X, { label: "Clear field", children: /* @__PURE__ */ c(
-                k,
+            /* @__PURE__ */ i(te, {}),
+            /* @__PURE__ */ S(T, { align: "center", gap: "1", children: [
+              s && /* @__PURE__ */ i(N, { label: "Clear field", children: /* @__PURE__ */ i(
+                E,
                 {
                   type: "button",
                   icon: { icon: v.X, alt: "Clear field" },
@@ -288,8 +297,8 @@ const q = {
                   }
                 }
               ) }),
-              /* @__PURE__ */ c(
-                k.Icon,
+              /* @__PURE__ */ i(
+                E.Icon,
                 {
                   as: I.div,
                   icon: v.ChevronDown,
@@ -304,88 +313,98 @@ const q = {
       )
     }
   );
-}, te = ({
+}, ne = ({
   tgphRef: t,
   style: l,
   children: e,
   ...u
 }) => {
-  const s = i.useContext(x), r = i.useRef(!1), n = F(t, s.contentRef), o = i.useRef(null), [a, b] = i.useState(0), [d, y] = i.useState(!1), p = i.useCallback(
+  const s = c.useContext(x), r = c.useRef(!1), n = H(t, s.contentRef), o = c.useRef(null), [a, b] = c.useState(0), [d, y] = c.useState(!1), p = c.useCallback(
     (g) => {
-      const h = g.getBoundingClientRect();
-      h && b(h.height), d || y(!0);
+      const f = g.getBoundingClientRect();
+      f && b(f.height), d || y(!0);
     },
     [d]
   );
-  return i.useEffect(() => {
-    const g = new ResizeObserver((h) => {
-      for (const m of h) {
-        const f = m.target;
-        p(f);
+  return c.useEffect(() => {
+    const g = new ResizeObserver((f) => {
+      for (const m of f) {
+        const h = m.target;
+        p(h);
       }
     });
     return o.current && d && g.observe(o.current), () => g.disconnect();
-  }, [d, p]), i.useEffect(() => {
+  }, [d, p]), c.useEffect(() => {
     d === !0 && s.open === !1 && y(!1);
-  }, [s.open, d]), /* @__PURE__ */ c(
-    O.Content,
+  }, [s.open, d]), // We add radix's dismissable layer here so that we can swallow any escape key
+  // presses to prevent cases like a modal closing when we close the combobox
+  /* @__PURE__ */ i(
+    M,
     {
-      as: I.div,
-      mt: "1",
-      initial: {
-        opacity: 0,
-        scale: 0.8,
-        height: "auto"
-      },
-      animate: {
-        opacity: 1,
-        scale: 1,
-        // Set height based on the internalContentRef so that
-        // we get smooth animations when the content changes
-        minHeight: a ? `${a}px` : "0"
+      onEscapeKeyDown: (g) => {
+        s.open && (g.preventDefault(), s.setOpen(!1));
       },
-      exit: { opacity: 0, scale: 0 },
-      transition: { duration: 0.2, type: "spring", bounce: 0 },
-      onAnimationComplete: () => {
-        if (!d && o) {
-          const g = o.current;
-          p(g);
+      children: /* @__PURE__ */ i(
+        O.Content,
+        {
+          as: I.div,
+          mt: "1",
+          initial: {
+            opacity: 0,
+            scale: 0.8,
+            height: "auto"
+          },
+          animate: {
+            opacity: 1,
+            scale: 1,
+            // Set height based on the internalContentRef so that
+            // we get smooth animations when the content changes
+            minHeight: a ? `${a}px` : "0"
+          },
+          exit: { opacity: 0, scale: 0 },
+          transition: { duration: 0.2, type: "spring", bounce: 0 },
+          onAnimationComplete: () => {
+            if (!d && o) {
+              const g = o.current;
+              p(g);
+            }
+          },
+          onCloseAutoFocus: (g) => {
+            var f, m;
+            r.current || (m = (f = s.triggerRef) == null ? void 0 : f.current) == null || m.focus(), r.current = !1, g.preventDefault();
+          },
+          onKeyDown: (g) => {
+            var m, h, C, w;
+            const f = (h = (m = s.contentRef) == null ? void 0 : m.current) == null ? void 0 : h.querySelectorAll(
+              "[data-tgph-combobox-option]"
+            );
+            document.activeElement === (f == null ? void 0 : f[0]) && W.includes(g.key) && ((w = (C = s.searchRef) == null ? void 0 : C.current) == null || w.focus());
+          },
+          bg: "surface-1",
+          style: {
+            width: "var(--tgph-comobobox-trigger-width)",
+            ...l,
+            "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
+            "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
+            "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
+            "--tgph-comobobox-trigger-width": "var(--radix-popper-anchor-width)",
+            "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
+          },
+          ...u,
+          tgphRef: n,
+          "data-tgph-combobox-content": !0,
+          "data-tgph-combobox-content-open": d,
+          role: void 0,
+          "aria-orientation": void 0,
+          children: /* @__PURE__ */ i(T, { direction: "column", gap: "1", tgphRef: o, children: e })
         }
-      },
-      onCloseAutoFocus: (g) => {
-        var h, m;
-        r.current || (m = (h = s.triggerRef) == null ? void 0 : h.current) == null || m.focus(), r.current = !1, g.preventDefault();
-      },
-      onKeyDown: (g) => {
-        var m, f, C, w;
-        const h = (f = (m = s.contentRef) == null ? void 0 : m.current) == null ? void 0 : f.querySelectorAll(
-          "[data-tgph-combobox-option]"
-        );
-        document.activeElement === (h == null ? void 0 : h[0]) && U.includes(g.key) && ((w = (C = s.searchRef) == null ? void 0 : C.current) == null || w.focus()), g.key === "Escape" && s.setOpen(!1), g.stopPropagation();
-      },
-      bg: "surface-1",
-      style: {
-        width: "var(--tgph-comobobox-trigger-width)",
-        ...l,
-        "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
-        "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
-        "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
-        "--tgph-comobobox-trigger-width": "var(--radix-popper-anchor-width)",
-        "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
-      },
-      ...u,
-      tgphRef: n,
-      "data-tgph-combobox-content": !0,
-      "data-tgph-combobox-content-open": d,
-      role: void 0,
-      "aria-orientation": void 0,
-      children: /* @__PURE__ */ c(E, { direction: "column", gap: "1", tgphRef: o, children: e })
+      )
     }
   );
-}, oe = ({ ...t }) => {
-  const l = i.useContext(x);
-  return /* @__PURE__ */ c(
-    E,
+}, re = ({ ...t }) => {
+  const l = c.useContext(x);
+  return /* @__PURE__ */ i(
+    T,
     {
       id: l.contentId,
       direction: "column",
@@ -399,31 +418,31 @@ const q = {
       ...t
     }
   );
-}, j = ({
+}, _ = ({
   value: t,
   label: l,
   selected: e,
   onSelect: u,
   ...s
 }) => {
-  const r = i.useContext(x), [n, o] = i.useState(!1), a = r.value, b = (R(a), !r.searchQuery || t.toLowerCase().includes(r.searchQuery.toLowerCase())), d = R(a) ? a.some((p) => (p == null ? void 0 : p.value) === t) : (a == null ? void 0 : a.value) === t, y = (p) => {
-    var h, m;
+  const r = c.useContext(x), [n, o] = c.useState(!1), a = r.value, b = (R(a), !r.searchQuery || t.toLowerCase().includes(r.searchQuery.toLowerCase())), d = R(a) ? a.some((p) => (p == null ? void 0 : p.value) === t) : (a == null ? void 0 : a.value) === t, y = (p) => {
+    var f, m;
     const g = p;
-    if (!(g.key && !K.includes(g.key))) {
+    if (!(g.key && !j.includes(g.key))) {
       if (p.stopPropagation(), p.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), u)
         return u(p);
-      if (T(a)) {
-        const f = r.onValueChange;
-        f == null || f({ value: t, label: l });
+      if (k(a)) {
+        const h = r.onValueChange;
+        h == null || h({ value: t, label: l });
       } else if (R(a)) {
-        const f = r.onValueChange, C = d ? a.filter((w) => (w == null ? void 0 : w.value) !== t) : [...a, { value: t, label: l }];
-        f == null || f(C);
+        const h = r.onValueChange, C = d ? a.filter((w) => (w == null ? void 0 : w.value) !== t) : [...a, { value: t, label: l }];
+        h == null || h(C);
       }
-      (m = (h = r.triggerRef) == null ? void 0 : h.current) == null || m.focus();
+      (m = (f = r.triggerRef) == null ? void 0 : f.current) == null || m.focus();
     }
   };
   if (b)
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ i(
       O.Button,
       {
         type: "button",
@@ -442,7 +461,7 @@ const q = {
         children: l || t
       }
     );
-}, ne = ({
+}, ae = ({
   label: t = "Search",
   placeholder: l = "Search",
   tgphRef: e,
@@ -451,21 +470,21 @@ const q = {
   ...r
 }) => {
   var y;
-  const n = i.useId(), o = i.useContext(x), a = F(e, o.searchRef), b = u ?? o.searchQuery, d = s ?? o.setSearchQuery;
-  return i.useEffect(() => {
-    var h;
+  const n = c.useId(), o = c.useContext(x), a = H(e, o.searchRef), b = u ?? o.searchQuery, d = s ?? o.setSearchQuery;
+  return c.useEffect(() => {
+    var f;
     const p = (m) => {
-      var f, C;
-      N.includes(m.key) && ((C = (f = o.contentRef) == null ? void 0 : f.current) == null || C.focus({ preventScroll: !0 })), m.key === "Escape" && o.setOpen(!1), m.stopPropagation();
-    }, g = (h = o.searchRef) == null ? void 0 : h.current;
+      var h, C;
+      J.includes(m.key) && ((C = (h = o.contentRef) == null ? void 0 : h.current) == null || C.focus({ preventScroll: !0 })), m.key === "Escape" && o.setOpen(!1), m.stopPropagation();
+    }, g = (f = o.searchRef) == null ? void 0 : f.current;
     if (g)
       return g.addEventListener("keydown", p), () => {
         g.removeEventListener("keydown", p);
       };
   }, [o]), /* @__PURE__ */ S(B, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ c(M.Root, { children: /* @__PURE__ */ c(P, { as: "label", htmlFor: n, children: t }) }),
-    /* @__PURE__ */ c(
-      z,
+    /* @__PURE__ */ i(z.Root, { children: /* @__PURE__ */ i(P, { as: "label", htmlFor: n, children: t }) }),
+    /* @__PURE__ */ i(
+      q,
       {
         id: n,
         variant: "ghost",
@@ -474,9 +493,9 @@ const q = {
         onChange: (p) => {
           d(p.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ c(H, { icon: v.Search, alt: "Search Icon" }),
-        TrailingComponent: o != null && o.searchQuery && ((y = o == null ? void 0 : o.searchQuery) == null ? void 0 : y.length) > 0 ? /* @__PURE__ */ c(
-          k,
+        LeadingComponent: /* @__PURE__ */ i(K, { icon: v.Search, alt: "Search Icon" }),
+        TrailingComponent: o != null && o.searchQuery && ((y = o == null ? void 0 : o.searchQuery) == null ? void 0 : y.length) > 0 ? /* @__PURE__ */ i(
+          E,
           {
             as: I.button,
             initial: { opacity: 0 },
@@ -499,14 +518,14 @@ const q = {
       }
     )
   ] });
-}, re = ({
+}, ie = ({
   icon: t = { icon: v.Search, alt: "Search Icon" },
   message: l = "No results found",
   children: e,
   ...u
 }) => {
-  const s = i.useContext(x), [r, n] = i.useState(!1);
-  if (i.useEffect(() => {
+  const s = c.useContext(x), [r, n] = c.useState(!1);
+  if (c.useEffect(() => {
     var a, b;
     const o = (b = (a = s.contentRef) == null ? void 0 : a.current) == null ? void 0 : b.querySelectorAll(
       "[data-tgph-combobox-option]"
@@ -514,7 +533,7 @@ const q = {
     (o == null ? void 0 : o.length) === 0 ? n(!0) : n(!1);
   }, [s.searchQuery, s.contentRef, e]), r)
     return /* @__PURE__ */ S(
-      E,
+      T,
       {
         as: I.div,
         initial: { opacity: 0, scale: 0.8 },
@@ -528,25 +547,25 @@ const q = {
         "data-tgph-combobox-empty": !0,
         ...u,
         children: [
-          t === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(H, { ...t }),
-          l === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(P, { as: "span", children: l })
+          t === null ? /* @__PURE__ */ i(F, {}) : /* @__PURE__ */ i(K, { ...t }),
+          l === null ? /* @__PURE__ */ i(F, {}) : /* @__PURE__ */ i(P, { as: "span", children: l })
         ]
       }
     );
-}, ae = ({
+}, ce = ({
   leadingText: t = "Create",
   values: l,
   onCreate: e,
   selected: u = null,
   ...s
 }) => {
-  const r = i.useContext(x), n = i.useCallback(
+  const r = c.useContext(x), n = c.useCallback(
     (o) => !l || (l == null ? void 0 : l.length) === 0 ? !1 : l.some((a) => (a == null ? void 0 : a.value) === o),
     [l]
   );
   if (r.searchQuery && !n(r.searchQuery))
-    return /* @__PURE__ */ c(
-      j,
+    return /* @__PURE__ */ i(
+      _,
       {
         leadingIcon: { icon: v.Plus, "aria-hidden": !0 },
         mx: "1",
@@ -555,23 +574,23 @@ const q = {
         selected: u,
         onSelect: () => {
           var o;
-          e && r.value && r.searchQuery && (T(r.value) && e({ value: r.searchQuery }), R(r.value) && e({ value: r.searchQuery }), (o = r.setSearchQuery) == null || o.call(r, ""));
+          e && r.value && r.searchQuery && (k(r.value) && e({ value: r.searchQuery }), R(r.value) && e({ value: r.searchQuery }), (o = r.setSearchQuery) == null || o.call(r, ""));
         },
         ...s
       }
     );
-}, ie = {};
-Object.assign(ie, {
-  Root: J,
-  Trigger: ee,
-  Content: te,
-  Options: oe,
-  Option: j,
-  Search: ne,
-  Empty: re,
-  Create: ae
+}, le = {};
+Object.assign(le, {
+  Root: Z,
+  Trigger: oe,
+  Content: ne,
+  Options: re,
+  Option: _,
+  Search: ae,
+  Empty: ie,
+  Create: ce
 });
 export {
-  ie as Combobox
+  le as Combobox
 };
 //# sourceMappingURL=index.mjs.map