@telegraph/combobox 0.0.59 → 0.0.60

package/dist/esm/index.mjs

@@ -1,35 +1,35 @@
-import { jsx as u, jsxs as S, Fragment as K } from "react/jsx-runtime";
-import { DismissableLayer as q } from "@radix-ui/react-dismissable-layer";
-import * as U from "@radix-ui/react-portal";
-import { useControllableState as W } from "@radix-ui/react-use-controllable-state";
-import * as J from "@radix-ui/react-visually-hidden";
+import { jsx as p, jsxs as S, Fragment as K } from "react/jsx-runtime";
+import { DismissableLayer as U } from "@radix-ui/react-dismissable-layer";
+import * as W from "@radix-ui/react-portal";
+import { useControllableState as J } 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 j } from "@telegraph/compose-refs";
-import { RefToTgphRef as Z } from "@telegraph/helpers";
-import { Lucide as R, Icon as _ } from "@telegraph/icon";
-import { Input as ee } from "@telegraph/input";
-import { Stack as I, Box as $ } from "@telegraph/layout";
+import { RefToTgphRef as ee } from "@telegraph/helpers";
+import { Lucide as R, Icon as N } from "@telegraph/icon";
+import { Input as te } from "@telegraph/input";
+import { Stack as I, Box as _ } from "@telegraph/layout";
 import { Menu as Q } from "@telegraph/menu";
-import { motion as A, AnimatePresence as P } from "@telegraph/motion";
+import { motion as B, AnimatePresence as P } from "@telegraph/motion";
 import { Tag as L } from "@telegraph/tag";
-import { Tooltip as te } from "@telegraph/tooltip";
+import { Tooltip as oe } from "@telegraph/tooltip";
 import { Text as M } from "@telegraph/typography";
-import c from "react";
-const oe = {
+import i from "react";
+const ne = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, k = (t) => Array.isArray(t), T = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, ne = (t) => {
-  const a = (r, i = []) => (c.Children.toArray(r).forEach((n) => {
-    c.isValidElement(n) && (n.props.value ? i.push(n) : n.props.children && a(n.props.children, i));
-  }), i);
+}, k = (t) => Array.isArray(t), T = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, re = (t) => {
+  const a = (r, c = []) => (i.Children.toArray(r).forEach((n) => {
+    i.isValidElement(n) && (n.props.value ? c.push(n) : n.props.children && a(n.props.children, c));
+  }), c);
   return a(t).map((r) => {
     var o;
-    const i = r;
+    const c = r;
     return {
-      value: i.props.value,
-      label: ((o = i.props) == null ? void 0 : o.label) || i.props.children || i.props.value
+      value: c.props.value,
+      label: ((o = c.props) == null ? void 0 : o.label) || c.props.children || c.props.value
     };
   });
 }, C = (t, a) => {
@@ -37,16 +37,26 @@ const oe = {
     return a === !0 ? t == null ? void 0 : t.value : t;
 }, F = (t, a, e) => {
   if (!t || !a || a.length === 0) return;
-  const p = a.find(
+  const l = a.find(
     (r) => r.value === C(t, e)
   );
-  if (p)
-    return p;
-}, re = ({
-  label: t,
+  if (l)
+    return l;
+}, ae = ({
+  children: t,
   value: a,
   searchQuery: e
-}) => (a == null ? void 0 : a.toLowerCase().includes(e.toLowerCase())) || (t == null ? void 0 : t.toLowerCase().includes(e.toLowerCase())), ae = ["ArrowDown", "PageUp", "Home"], ie = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = c.createContext({
+}) => {
+  const l = $(t);
+  return (a == null ? void 0 : a.toLowerCase().includes(e.toLowerCase())) || l.some(
+    (r) => r.toLowerCase().includes(e.toLowerCase())
+  );
+}, $ = (t) => {
+  const a = i.Children.toArray(t), e = [];
+  return a.forEach((l) => {
+    typeof l == "string" && e.push(l), i.isValidElement(l) && l.props.children && e.push(...$(l.props.children));
+  }), e;
+}, ie = ["ArrowDown", "PageUp", "Home"], ce = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = i.createContext({
   value: void 0,
   onValueChange: () => {
   },
@@ -61,13 +71,13 @@ const oe = {
   disabled: !1,
   options: [],
   legacyBehavior: !1
-}), ce = ({
+}), se = ({
   modal: t = !0,
   closeOnSelect: a = !0,
   clearable: e = !1,
-  disabled: p = !1,
+  disabled: l = !1,
   legacyBehavior: r = !1,
-  open: i,
+  open: c,
   onOpenChange: o,
   defaultOpen: n,
   value: s,
@@ -75,19 +85,19 @@ const oe = {
   errored: y,
   placeholder: v,
   layout: d,
-  children: l,
+  children: u,
   ...g
 }) => {
-  const m = c.useId(), b = c.useId(), h = c.useRef(null), w = c.useRef(null), D = c.useRef(null), V = c.useMemo(() => ne(l), [l]), [Y, H] = c.useState(""), [O = !1, B] = W({
-    prop: i,
+  const m = i.useId(), b = i.useId(), h = i.useRef(null), w = i.useRef(null), V = i.useRef(null), D = i.useMemo(() => re(u), [u]), [Y, H] = i.useState(""), [O = !1, A] = J({
+    prop: c,
     defaultProp: n,
     onChange: o
-  }), N = c.useCallback(() => {
-    B((X) => !X);
-  }, [B]);
-  return c.useEffect(() => {
+  }), X = i.useCallback(() => {
+    A((q) => !q);
+  }, [A]);
+  return i.useEffect(() => {
     O || H("");
-  }, [O]), /* @__PURE__ */ u(
+  }, [O]), /* @__PURE__ */ p(
     x.Provider,
     {
       value: {
@@ -100,35 +110,35 @@ const oe = {
         onValueChange: f,
         placeholder: v,
         open: O,
-        setOpen: B,
-        onOpenToggle: N,
+        setOpen: A,
+        onOpenToggle: X,
         closeOnSelect: a,
         clearable: e,
-        disabled: p,
+        disabled: l,
         searchQuery: Y,
         setSearchQuery: H,
         triggerRef: h,
         searchRef: w,
-        contentRef: D,
+        contentRef: V,
         errored: y,
         layout: d,
-        options: V,
+        options: D,
         legacyBehavior: r
       },
-      children: /* @__PURE__ */ u(
+      children: /* @__PURE__ */ p(
         Q.Root,
         {
           open: O,
-          onOpenChange: B,
+          onOpenChange: A,
           modal: t,
           ...g,
-          children: l
+          children: u
         }
       )
     }
   );
-}, se = ({ value: t, ...a }) => {
-  const e = c.useContext(x), p = c.useMemo(() => {
+}, le = ({ value: t, ...a }) => {
+  const e = i.useContext(x), l = i.useMemo(() => {
     const r = e.options.find((n) => n.value === t);
     if (r) return r.label || r.value;
     if (!e.value) return;
@@ -141,7 +151,7 @@ const oe = {
   return /* @__PURE__ */ S(
     L.Root,
     {
-      as: A.span,
+      as: B.span,
       initializeWithAnimation: !1,
       initial: { opacity: 0, scale: 0.5 },
       animate: { opacity: 1, scale: 1 },
@@ -152,27 +162,27 @@ const oe = {
       layout: "position",
       ...a,
       children: [
-        /* @__PURE__ */ u(L.Text, { children: p }),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ p(L.Text, { children: l }),
+        /* @__PURE__ */ p(
           L.Button,
           {
             icon: { icon: R.X, alt: `Remove ${t}` },
             onClick: (r) => {
               if (!e.onValueChange) return;
-              const i = e.onValueChange, n = e.value.filter((s) => C(s, e.legacyBehavior) !== t);
-              i == null || i(n), r.stopPropagation(), r.preventDefault();
+              const c = e.onValueChange, n = e.value.filter((s) => C(s, e.legacyBehavior) !== t);
+              c == null || c(n), r.stopPropagation(), r.preventDefault();
             }
           }
         )
       ]
     }
   );
-}, le = () => {
+}, ue = () => {
   var a;
-  const t = c.useContext(x);
+  const t = i.useContext(x);
   if (t.value && k(t.value)) {
-    const e = t.layout || "truncate", p = t.value.length - 2, r = p.toString().split("");
-    return t.value.length === 0 ? /* @__PURE__ */ u(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
+    const e = t.layout || "truncate", l = t.value.length - 2, r = l.toString().split("");
+    return t.value.length === 0 ? /* @__PURE__ */ p(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
       I,
       {
         gap: "1",
@@ -184,21 +194,21 @@ const oe = {
           flexGrow: 1
         },
         children: [
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ p(
             P,
             {
-              presenceMap: t.value.map((i) => ({
-                "tgph-motion-key": C(i, t.legacyBehavior) || "",
+              presenceMap: t.value.map((c) => ({
+                "tgph-motion-key": C(c, t.legacyBehavior) || "",
                 value: !0
               })),
-              children: t.value.map((i, o) => {
-                const n = C(i, t.legacyBehavior);
+              children: t.value.map((c, o) => {
+                const n = C(c, t.legacyBehavior);
                 if (n && (e === "truncate" && o <= 1 || e === "wrap"))
-                  return /* @__PURE__ */ u(Z, { children: /* @__PURE__ */ u(se, { value: n }) }, n);
+                  return /* @__PURE__ */ p(ee, { children: /* @__PURE__ */ p(le, { value: n }) }, n);
               })
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ p(
             P,
             {
               presenceMap: [
@@ -207,10 +217,10 @@ const oe = {
                   value: !0
                 }
               ],
-              children: e === "truncate" && t.value.length > 2 && /* @__PURE__ */ u(
+              children: e === "truncate" && t.value.length > 2 && /* @__PURE__ */ p(
                 I,
                 {
-                  as: A.div,
+                  as: B.div,
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
                   exit: { opacity: 0 },
@@ -219,7 +229,7 @@ const oe = {
                   pr: "1",
                   pl: "8",
                   align: "center",
-                  "aria-label": `${p} more selected`,
+                  "aria-label": `${l} more selected`,
                   position: "absolute",
                   right: "0",
                   style: {
@@ -230,25 +240,25 @@ const oe = {
                     /* @__PURE__ */ S(
                       P,
                       {
-                        presenceMap: r.map((i) => ({
-                          "tgph-motion-key": i,
+                        presenceMap: r.map((c) => ({
+                          "tgph-motion-key": c,
                           value: !0
                         })),
                         children: [
-                          r.map((i) => /* @__PURE__ */ u(
-                            $,
+                          r.map((c) => /* @__PURE__ */ p(
+                            _,
                             {
-                              as: A.span,
+                              as: B.span,
                               initial: { opacity: 0 },
                               animate: { opacity: 1 },
                               exit: { opacity: 0 },
                               transition: { duration: 100, type: "spring" },
                               w: "2",
                               display: "inline-block",
-                              "tgph-motion-key": i,
-                              children: i
+                              "tgph-motion-key": c,
+                              children: c
                             },
-                            i
+                            c
                           )),
                           " "
                         ]
@@ -269,19 +279,19 @@ const oe = {
       t.value,
       t.options,
       t.legacyBehavior
-    ), p = (e == null ? void 0 : e.label) || (e == null ? void 0 : e.value) || t.placeholder, r = t.legacyBehavior && ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label);
-    return /* @__PURE__ */ u(
+    ), l = (e == null ? void 0 : e.label) || (e == null ? void 0 : e.value) || t.placeholder, r = t.legacyBehavior && ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label);
+    return /* @__PURE__ */ p(
       E.Text,
       {
         color: t.value ? "default" : "gray",
         textOverflow: "ellipsis",
         overflow: "hidden",
-        children: r || p
+        children: r || l
       }
     );
   }
-}, ue = ({ size: t = "2", ...a }) => {
-  const e = c.useContext(x), p = c.useCallback(() => {
+}, pe = ({ size: t = "2", ...a }) => {
+  const e = i.useContext(x), l = i.useCallback(() => {
     var o;
     if (!e.value) return e.placeholder;
     if (T(e.value)) {
@@ -306,13 +316,13 @@ const oe = {
     e.placeholder,
     e.options,
     e.legacyBehavior
-  ]), r = c.useMemo(() => {
+  ]), r = i.useMemo(() => {
     var o;
     if (T(e.value))
       return e.clearable && e.value;
     if (k(e.value))
       return e.clearable && ((o = e.value) == null ? void 0 : o.length) > 0;
-  }, [e.clearable, e.value]), i = () => {
+  }, [e.clearable, e.value]), c = () => {
     var o, n;
     if (k(e.value)) {
       const s = e.onValueChange;
@@ -324,7 +334,7 @@ const oe = {
     }
     (n = (o = e.triggerRef) == null ? void 0 : o.current) == null || n.focus();
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ p(
     Q.Trigger,
     {
       ...a,
@@ -356,7 +366,7 @@ const oe = {
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: oe[t],
+          minH: ne[t],
           h: "full",
           w: "full",
           py: "1",
@@ -364,7 +374,7 @@ const oe = {
           color: e.errored ? "red" : "gray",
           justify: "space-between",
           role: "combobox",
-          "aria-label": p(),
+          "aria-label": l(),
           "aria-controls": e.contentId,
           "aria-expanded": e.open,
           "aria-haspopup": "listbox",
@@ -372,9 +382,9 @@ const oe = {
           "data-tgph-combobox-trigger-open": e.open,
           disabled: e.disabled,
           children: [
-            /* @__PURE__ */ u(le, {}),
+            /* @__PURE__ */ p(ue, {}),
             /* @__PURE__ */ S(I, { align: "center", gap: "1", children: [
-              r && /* @__PURE__ */ u(te, { label: "Clear field", children: /* @__PURE__ */ u(
+              r && /* @__PURE__ */ p(oe, { label: "Clear field", children: /* @__PURE__ */ p(
                 E,
                 {
                   type: "button",
@@ -382,10 +392,10 @@ const oe = {
                   size: "1",
                   variant: "ghost",
                   onClick: (o) => {
-                    e.value && (o.stopPropagation(), i());
+                    e.value && (o.stopPropagation(), c());
                   },
                   onKeyDown: (o) => {
-                    (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), i());
+                    (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), c());
                   },
                   "data-tgph-combobox-clear": !0,
                   style: {
@@ -396,10 +406,10 @@ const oe = {
                   }
                 }
               ) }),
-              /* @__PURE__ */ u(
+              /* @__PURE__ */ p(
                 E.Icon,
                 {
-                  as: A.span,
+                  as: B.span,
                   animate: { rotate: e.open ? 180 : 0 },
                   transition: { duration: 150, type: "spring" },
                   icon: R.ChevronDown,
@@ -412,48 +422,48 @@ const oe = {
       )
     }
   );
-}, pe = ({
+}, fe = ({
   style: t,
   children: a,
   tgphRef: e,
-  ...p
+  ...l
 }) => {
-  const r = c.useContext(x), i = c.useRef(!1), o = j(e, r.contentRef), n = c.useRef(null), [s, f] = c.useState(0), [y, v] = c.useState(!1), d = c.useCallback(
-    (l) => {
-      const g = l == null ? void 0 : l.getBoundingClientRect();
+  const r = i.useContext(x), c = i.useRef(!1), o = j(e, r.contentRef), n = i.useRef(null), [s, f] = i.useState(0), [y, v] = i.useState(!1), d = i.useCallback(
+    (u) => {
+      const g = u == null ? void 0 : u.getBoundingClientRect();
       g && f(g.height), y || v(!0);
     },
     [y]
   );
-  return c.useEffect(() => {
-    const l = new ResizeObserver((g) => {
+  return i.useEffect(() => {
+    const u = new ResizeObserver((g) => {
       for (const m of g) {
         const b = m.target;
         d(b);
       }
     });
-    return n.current && y && l.observe(n.current), () => l.disconnect();
-  }, [y, d]), c.useEffect(() => {
+    return n.current && y && u.observe(n.current), () => u.disconnect();
+  }, [y, d]), i.useEffect(() => {
     y === !0 && r.open === !1 && v(!1);
-  }, [r.open, y]), c.useEffect(() => {
-    let l;
-    return r.open && (l = setTimeout(() => {
+  }, [r.open, y]), i.useEffect(() => {
+    let u;
+    return r.open && (u = setTimeout(() => {
       d(n.current);
-    }, 10)), () => l && clearTimeout(l);
-  }, [r.open, d]), /* @__PURE__ */ u(U.Root, { asChild: !0, children: /* @__PURE__ */ u(
-    q,
+    }, 10)), () => u && clearTimeout(u);
+  }, [r.open, d]), /* @__PURE__ */ p(W.Root, { asChild: !0, children: /* @__PURE__ */ p(
+    U,
     {
-      onEscapeKeyDown: (l) => {
-        r.open && (l.stopPropagation(), l.preventDefault(), r.setOpen(!1));
+      onEscapeKeyDown: (u) => {
+        r.open && (u.stopPropagation(), u.preventDefault(), r.setOpen(!1));
       },
-      children: /* @__PURE__ */ u(
+      children: /* @__PURE__ */ p(
         Q.Content,
         {
           className: "tgph",
           mt: "1",
-          onCloseAutoFocus: (l) => {
+          onCloseAutoFocus: (u) => {
             var g, m;
-            i.current || (m = (g = r.triggerRef) == null ? void 0 : g.current) == null || m.focus(), i.current = !1, l.preventDefault();
+            c.current || (m = (g = r.triggerRef) == null ? void 0 : g.current) == null || m.focus(), c.current = !1, u.preventDefault();
           },
           bg: "surface-1",
           style: {
@@ -467,28 +477,28 @@ const oe = {
             "--tgph-combobox-trigger-width": "var(--radix-popper-anchor-width)",
             "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
           },
-          ...p,
+          ...l,
           tgphRef: o,
           "data-tgph-combobox-content": !0,
           "data-tgph-combobox-content-open": r.open,
           role: void 0,
           "aria-orientation": void 0,
-          onKeyDown: (l) => {
+          onKeyDown: (u) => {
             var m, b, h, w;
-            l.stopPropagation();
+            u.stopPropagation();
             const g = (b = (m = r.contentRef) == null ? void 0 : m.current) == null ? void 0 : b.querySelectorAll(
               "[data-tgph-combobox-option]"
             );
-            document.activeElement === (g == null ? void 0 : g[0]) && ie.includes(l.key) && ((w = (h = r.searchRef) == null ? void 0 : h.current) == null || w.focus());
+            document.activeElement === (g == null ? void 0 : g[0]) && ce.includes(u.key) && ((w = (h = r.searchRef) == null ? void 0 : h.current) == null || w.focus());
           },
-          children: /* @__PURE__ */ u(I, { direction: "column", gap: "1", tgphRef: n, children: a })
+          children: /* @__PURE__ */ p(I, { direction: "column", gap: "1", tgphRef: n, children: a })
         }
       )
     }
   ) });
-}, fe = ({ ...t }) => {
-  const a = c.useContext(x);
-  return /* @__PURE__ */ u(
+}, ge = ({ ...t }) => {
+  const a = i.useContext(x);
+  return /* @__PURE__ */ p(
     I,
     {
       id: a.contentId,
@@ -496,8 +506,8 @@ const oe = {
       gap: "1",
       style: {
         overflowY: "auto",
-        // Available Height - Padding from edge of screen
-        maxHeight: "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
+        // maxHeight defaults to available height - padding from edge of screen
+        "--max-height": t.maxHeight ? void 0 : "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
       },
       role: "listbox",
       ...t
@@ -507,41 +517,41 @@ const oe = {
   value: t,
   label: a,
   selected: e,
-  onSelect: p,
+  onSelect: l,
   children: r,
-  ...i
+  ...c
 }) => {
-  const o = c.useContext(x), [n, s] = c.useState(!1), f = o.value, y = !o.searchQuery || re({
-    label: (a == null ? void 0 : a.toString()) || (r == null ? void 0 : r.toString()),
+  const o = i.useContext(x), [n, s] = i.useState(!1), f = o.value, y = !o.searchQuery || ae({
+    children: a || r,
     value: t,
     searchQuery: o.searchQuery
   }), v = k(f) ? f.some(
-    (l) => C(l, o.legacyBehavior) === t
-  ) : C(f, o.legacyBehavior) === t, d = (l) => {
+    (u) => C(u, o.legacyBehavior) === t
+  ) : C(f, o.legacyBehavior) === t, d = (u) => {
     var m, b;
-    l.stopPropagation();
-    const g = l;
+    u.stopPropagation();
+    const g = u;
     if (!(g.key && !z.includes(g.key))) {
-      if (l.preventDefault(), o.closeOnSelect === !0 && o.setOpen(!1), p)
-        return p(l);
+      if (u.preventDefault(), o.closeOnSelect === !0 && o.setOpen(!1), l)
+        return l(u);
       if (T(f)) {
         const h = o.onValueChange;
         o.legacyBehavior === !0 ? h == null || h({ value: t, label: a }) : h == null || h(t);
       } else if (k(f)) {
-        const h = o.onValueChange, w = o.value, D = v ? w.filter(
-          (V) => C(V, o.legacyBehavior) !== t
+        const h = o.onValueChange, w = o.value, V = v ? w.filter(
+          (D) => C(D, o.legacyBehavior) !== t
         ) : [
           ...w,
           // TODO: Remove this once { value, label } option is deprecated
           o.legacyBehavior === !0 ? { value: t, label: a } : t
         ];
-        h == null || h(D);
+        h == null || h(V);
       }
       (b = (m = o.triggerRef) == null ? void 0 : m.current) == null || b.focus();
     }
   };
   if (y)
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ p(
       Q.Button,
       {
         type: "button",
@@ -556,34 +566,34 @@ const oe = {
         "data-tgph-combobox-option-focused": n,
         "data-tgph-combobox-option-value": t,
         "data-tgph-combobox-option-label": a,
-        ...i,
+        ...c,
         children: a || r || t
       }
     );
-}, ge = ({
+}, he = ({
   label: t = "Search",
   placeholder: a = "Search",
   tgphRef: e,
-  value: p,
+  value: l,
   onValueChange: r,
-  ...i
+  ...c
 }) => {
   var v;
-  const o = c.useId(), n = c.useContext(x), s = j(e, n.searchRef), f = p ?? n.searchQuery, y = r ?? n.setSearchQuery;
-  return c.useEffect(() => {
+  const o = i.useId(), n = i.useContext(x), s = j(e, n.searchRef), f = l ?? n.searchQuery, y = r ?? n.setSearchQuery;
+  return i.useEffect(() => {
     var g;
     const d = (m) => {
       var b, h;
-      ae.includes(m.key) && ((h = (b = n.contentRef) == null ? void 0 : b.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && n.setOpen(!1), m.stopPropagation();
-    }, l = (g = n.searchRef) == null ? void 0 : g.current;
-    if (l)
-      return l.addEventListener("keydown", d), () => {
-        l.removeEventListener("keydown", d);
+      ie.includes(m.key) && ((h = (b = n.contentRef) == null ? void 0 : b.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && n.setOpen(!1), m.stopPropagation();
+    }, u = (g = n.searchRef) == null ? void 0 : g.current;
+    if (u)
+      return u.addEventListener("keydown", d), () => {
+        u.removeEventListener("keydown", d);
       };
-  }, [n]), /* @__PURE__ */ S($, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ u(J.Root, { children: /* @__PURE__ */ u(M, { as: "label", htmlFor: o, children: t }) }),
-    /* @__PURE__ */ u(
-      ee,
+  }, [n]), /* @__PURE__ */ S(_, { borderBottom: "px", px: "1", pb: "1", children: [
+    /* @__PURE__ */ p(Z.Root, { children: /* @__PURE__ */ p(M, { as: "label", htmlFor: o, children: t }) }),
+    /* @__PURE__ */ p(
+      te,
       {
         id: o,
         variant: "ghost",
@@ -592,8 +602,8 @@ const oe = {
         onChange: (d) => {
           y(d.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ u(_, { icon: R.Search, alt: "Search Icon" }),
-        TrailingComponent: n != null && n.searchQuery && ((v = n == null ? void 0 : n.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ u(
+        LeadingComponent: /* @__PURE__ */ p(N, { icon: R.Search, alt: "Search Icon" }),
+        TrailingComponent: n != null && n.searchQuery && ((v = n == null ? void 0 : n.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ p(
           E,
           {
             variant: "ghost",
@@ -608,25 +618,25 @@ const oe = {
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
         "aria-controls": n.contentId,
-        ...i,
+        ...c,
         tgphRef: s
       }
     )
   ] });
-}, he = ({
+}, de = ({
   icon: t = { icon: R.Search, alt: "Search Icon" },
   message: a = "No results found",
   children: e,
-  ...p
+  ...l
 }) => {
-  const r = c.useContext(x), [i, o] = c.useState(!1);
-  if (c.useEffect(() => {
+  const r = i.useContext(x), [c, o] = i.useState(!1);
+  if (i.useEffect(() => {
     var s, f;
     const n = (f = (s = r.contentRef) == null ? void 0 : s.current) == null ? void 0 : f.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
     (n == null ? void 0 : n.length) === 0 ? o(!0) : o(!1);
-  }, [r.searchQuery, r.contentRef, e]), i)
+  }, [r.searchQuery, r.contentRef, e]), c)
     return /* @__PURE__ */ S(
       I,
       {
@@ -636,36 +646,36 @@ const oe = {
         w: "full",
         my: "8",
         "data-tgph-combobox-empty": !0,
-        ...p,
+        ...l,
         children: [
-          t === null ? /* @__PURE__ */ u(K, {}) : /* @__PURE__ */ u(_, { ...t }),
-          a === null ? /* @__PURE__ */ u(K, {}) : /* @__PURE__ */ u(M, { as: "span", children: a })
+          t === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(N, { ...t }),
+          a === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(M, { as: "span", children: a })
         ]
       }
     );
-}, de = ({
+}, me = ({
   leadingText: t = "Create",
   values: a,
   onCreate: e,
-  selected: p = null,
+  selected: l = null,
   legacyBehavior: r = !1,
-  ...i
+  ...c
 }) => {
-  const o = c.useContext(x), n = c.useCallback(
+  const o = i.useContext(x), n = i.useCallback(
     (s) => !a || (a == null ? void 0 : a.length) === 0 ? !1 : a.some(
       (f) => C(f, r) === s
     ),
     [a, r]
   );
   if (o.searchQuery && !n(o.searchQuery))
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ p(
       G,
       {
         leadingIcon: { icon: R.Plus, "aria-hidden": !0 },
         mx: "1",
         value: o.searchQuery,
         label: `${t} "${o.searchQuery}"`,
-        selected: p,
+        selected: l,
         onSelect: () => {
           var s;
           if (e && o.value && o.searchQuery) {
@@ -673,21 +683,21 @@ const oe = {
             e(f), (s = o.setSearchQuery) == null || s.call(o, "");
           }
         },
-        ...i
+        ...c
       }
     );
-}, me = {};
-Object.assign(me, {
-  Root: ce,
-  Trigger: ue,
-  Content: pe,
-  Options: fe,
+}, ye = {};
+Object.assign(ye, {
+  Root: se,
+  Trigger: pe,
+  Content: fe,
+  Options: ge,
   Option: G,
-  Search: ge,
-  Empty: he,
-  Create: de
+  Search: he,
+  Empty: de,
+  Create: me
 });
 export {
-  me as Combobox
+  ye as Combobox
 };
 //# sourceMappingURL=index.mjs.map