@telegraph/combobox 0.0.2 → 0.0.3

package/dist/esm/index.mjs

@@ -1,11 +1,11 @@
-import { jsx as u, jsxs as S, Fragment as W } from "react/jsx-runtime";
+import { jsx as u, jsxs as T, Fragment as W } from "react/jsx-runtime";
 import { useControllableState as be } from "@radix-ui/react-use-controllable-state";
 import * as he from "@radix-ui/react-visually-hidden";
-import { Icon as K, Lucide as j } from "@telegraph/icon";
+import { Icon as Y, Lucide as j } from "@telegraph/icon";
 import * as ye from "react";
 import p from "react";
-import { Text as P } from "@telegraph/typography";
-import { useComposedRefs as B } from "@telegraph/compose-refs";
+import { Text as B } from "@telegraph/typography";
+import { useComposedRefs as D } from "@telegraph/compose-refs";
 import { RefToTgphRef as re } from "@telegraph/helpers";
 import { Input as fe } from "@telegraph/input";
 import { Menu as N } from "@telegraph/menu";
@@ -537,11 +537,11 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
       px: "0"
     }
   }
-}, Te = {
+}, Se = {
   1: "1",
   2: "2",
   3: "3"
-}, Se = {
+}, Te = {
   solid: {
     gray: "white",
     red: "white",
@@ -630,7 +630,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
 }, _e = {
   default: "secondary",
   "icon-only": "primary"
-}, Y = p.createContext({
+}, K = p.createContext({
   variant: "solid",
   size: "2",
   color: "gray",
@@ -649,17 +649,17 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   ...c
 }) => {
   const d = n ? "disabled" : i, s = d === "disabled" ? "disabled" : a, b = p.useMemo(() => {
-    var y;
+    var h;
     const g = p.Children.toArray(c == null ? void 0 : c.children);
     if ((g == null ? void 0 : g.length) === 1 && p.isValidElement(g[0])) {
-      const h = g[0];
-      if ((y = h == null ? void 0 : h.props) != null && y.icon)
+      const y = g[0];
+      if ((h = y == null ? void 0 : y.props) != null && h.icon)
         return "icon-only";
     }
     return "default";
   }, [c == null ? void 0 : c.children]);
   return /* @__PURE__ */ u(
-    Y.Provider,
+    K.Provider,
     {
       value: { variant: t, size: e, color: s, state: d, layout: b, active: r },
       children: /* @__PURE__ */ u(
@@ -700,13 +700,13 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   "aria-hidden": r,
   ...n
 }) => {
-  const l = p.useContext(Y), c = {
+  const l = p.useContext(K), c = {
     size: o ?? Ee[l.size],
     color: t ?? Oe[l.variant][l.color],
     variant: e ?? _e[l.layout]
   };
   return /* @__PURE__ */ u(
-    K,
+    Y,
     {
       icon: a,
       "data-button-icon": !0,
@@ -723,13 +723,13 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   className: i,
   ...r
 }) => {
-  const n = p.useContext(Y);
+  const n = p.useContext(K);
   return /* @__PURE__ */ u(
-    P,
+    B,
     {
       as: o || "span",
-      color: t ?? Se[n.variant][n.color],
-      size: e ?? Te[n.size],
+      color: t ?? Te[n.variant][n.color],
+      size: e ?? Se[n.size],
       weight: a,
       className: $("no-underline whitespace-nowrap", i),
       internal_optionalAs: !0,
@@ -745,7 +745,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   ...i
 }) => {
   const r = o || e;
-  return /* @__PURE__ */ S(ie, { ...i, children: [
+  return /* @__PURE__ */ T(ie, { ...i, children: [
     r && /* @__PURE__ */ u(H, { ...r }),
     a && /* @__PURE__ */ u(le, { children: a }),
     t && /* @__PURE__ */ u(H, { ...t })
@@ -756,7 +756,7 @@ Object.assign(ce, {
   Icon: H,
   Text: le
 });
-const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
+const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   const t = [];
   let e = null;
   for (let a = 0; a < _.length; a++) {
@@ -1100,7 +1100,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   tgphRef: e,
   ...a
 }) => {
-  const i = o || "div", r = p.useRef(null), n = B(e, r), l = p.useMemo(() => {
+  const i = o || "div", r = p.useRef(null), n = D(e, r), l = p.useMemo(() => {
     const c = { borderColor: !0, ...a };
     return Object.keys(c).reduce(
       (d, s) => (Object.keys(ee).some((b) => b === s) ? d.box[s] = c[s] : d.rest[s] = c[s], d),
@@ -1152,12 +1152,12 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     type: "spacing",
     valueType: "variable"
   }
-}, T = ({
+}, S = ({
   className: o,
   tgphRef: t,
   ...e
 }) => {
-  const a = p.useRef(null), i = B(t, a), r = p.useMemo(
+  const a = p.useRef(null), i = D(t, a), r = p.useMemo(
     () => Object.keys(e).reduce(
       (n, l) => (Object.keys(te).some((c) => c === l) ? n.stack[l] = e[l] : n.rest[l] = e[l], n),
       { stack: {}, rest: {} }
@@ -1201,13 +1201,13 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   layout: d,
   ...s
 }) => {
-  const b = p.useId(), y = p.useId(), g = p.useRef(null), h = p.useRef(null), v = p.useRef(null), [k, C] = p.useState(""), [L = !1, M] = be({
+  const b = p.useId(), h = p.useId(), g = p.useRef(null), y = p.useRef(null), v = p.useRef(null), [k, C] = p.useState(""), [L = !1, P] = be({
     prop: e,
     defaultProp: i,
     onChange: a
   }), de = p.useCallback(() => {
-    M((ge) => !ge);
-  }, [M]);
+    P((ge) => !ge);
+  }, [P]);
   return p.useEffect(() => {
     L || C("");
   }, [L]), /* @__PURE__ */ u(
@@ -1215,18 +1215,18 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     {
       value: {
         contentId: b,
-        triggerId: y,
+        triggerId: h,
         value: r,
         onValueChange: n,
         placeholder: c,
         open: L,
-        setOpen: M,
+        setOpen: P,
         onOpenToggle: de,
         closeOnSelect: t,
         searchQuery: k,
         setSearchQuery: C,
         triggerRef: g,
-        searchRef: h,
+        searchRef: y,
         contentRef: v,
         errored: l,
         layout: d
@@ -1235,16 +1235,16 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         N.Root,
         {
           open: L,
-          onOpenChange: M,
+          onOpenChange: P,
           modal: o,
           ...s
         }
       )
     }
   );
-}, De = ({ label: o, value: t, ...e }) => {
+}, Me = ({ label: o, value: t, ...e }) => {
   const a = p.useContext(w);
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ T(
     z.Root,
     {
       size: "1",
@@ -1279,15 +1279,15 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       ]
     }
   );
-}, Me = ({
+}, Pe = ({
   size: o = "1"
 }) => {
   var a, i;
   const t = p.useContext(w), e = o === "1" ? "6" : o === "2" ? "8" : "10";
   if (t.value && Q(t.value)) {
     const r = t.value, n = t.layout || "truncate", l = r.length - 2, c = l.toString().split("");
-    return r.length === 0 ? /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ S(
-      T,
+    return r.length === 0 ? /* @__PURE__ */ u(S, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(M.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ T(
+      S,
       {
         gap: "1",
         w: "full",
@@ -1301,10 +1301,10 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         children: [
           /* @__PURE__ */ u(F, { initial: !1, mode: "popLayout", children: r.map((d, s) => {
             if (n === "truncate" && s <= 1 || n === "wrap")
-              return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(De, { ...d }) }, d.value);
+              return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(Me, { ...d }) }, d.value);
           }) }),
           /* @__PURE__ */ u(F, { children: n === "truncate" && r.length > 2 && /* @__PURE__ */ u(
-            T,
+            S,
             {
               as: E.div,
               initial: { opacity: 0 },
@@ -1321,7 +1321,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
                 right: 0,
                 backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
               },
-              children: /* @__PURE__ */ S(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+              children: /* @__PURE__ */ T(B, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
                 /* @__PURE__ */ u(F, { mode: "wait", initial: !1, children: c.map((d) => /* @__PURE__ */ u(
                   X,
@@ -1353,8 +1353,8 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       }
     );
   }
-  return /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
-}, Pe = ({ size: o = "1", ...t }) => {
+  return /* @__PURE__ */ u(S, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(M.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
+}, Be = ({ size: o = "1", ...t }) => {
   const e = p.useContext(w), a = p.useCallback(() => {
     var i, r, n;
     return e.value ? q(e.value) ? ((i = e.value) == null ? void 0 : i.label) || ((r = e.value) == null ? void 0 : r.value) || e.placeholder : ((n = e.value) == null ? void 0 : n.map((l) => l.label).join(", ")) || e.placeholder : e.placeholder;
@@ -1383,8 +1383,8 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         }
       },
       tgphRef: e.triggerRef,
-      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ S(
-        D.Root,
+      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ T(
+        M.Root,
         {
           id: e.triggerId,
           bg: "surface-1",
@@ -1401,9 +1401,9 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
           "data-tgph-combobox-trigger": !0,
           "data-tgph-comobox-trigger-open": e.open,
           children: [
-            /* @__PURE__ */ u(Me, { size: o }),
+            /* @__PURE__ */ u(Pe, { size: o }),
             /* @__PURE__ */ u(
-              D.Icon,
+              M.Icon,
               {
                 as: E.div,
                 icon: j.ChevronDown,
@@ -1417,28 +1417,28 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       ) })
     }
   );
-}, Be = ({
+}, De = ({
   tgphRef: o,
   style: t,
   children: e,
   ...a
 }) => {
-  const i = p.useContext(w), r = p.useRef(!1), n = B(o, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, b] = p.useState(!1), y = p.useCallback(
+  const i = p.useContext(w), r = p.useRef(!1), n = D(o, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, b] = p.useState(!1), h = p.useCallback(
     (g) => {
-      const h = g.getBoundingClientRect();
-      h && d(h.height), s || b(!0);
+      const y = g.getBoundingClientRect();
+      y && d(y.height), s || b(!0);
     },
     [s]
   );
   return p.useEffect(() => {
-    const g = new ResizeObserver((h) => {
-      for (const v of h) {
+    const g = new ResizeObserver((y) => {
+      for (const v of y) {
         const k = v.target;
-        y(k);
+        h(k);
       }
     });
     return l.current && s && g.observe(l.current), () => g.disconnect();
-  }, [s, y]), p.useEffect(() => {
+  }, [s, h]), p.useEffect(() => {
     s === !0 && i.open === !1 && b(!1);
   }, [i.open, s]), /* @__PURE__ */ u(
     N.Content,
@@ -1465,19 +1465,19 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       onAnimationComplete: () => {
         if (!s && l) {
           const g = l.current;
-          y(g);
+          h(g);
         }
       },
       onCloseAutoFocus: (g) => {
-        var h, v;
-        r.current || (v = (h = i.triggerRef) == null ? void 0 : h.current) == null || v.focus(), r.current = !1, g.preventDefault();
+        var y, v;
+        r.current || (v = (y = i.triggerRef) == null ? void 0 : y.current) == null || v.focus(), r.current = !1, g.preventDefault();
       },
       onKeyDown: (g) => {
         var v, k, C, L;
-        const h = (k = (v = i.contentRef) == null ? void 0 : v.current) == null ? void 0 : k.querySelectorAll(
+        const y = (k = (v = i.contentRef) == null ? void 0 : v.current) == null ? void 0 : k.querySelectorAll(
           "[data-tgph-combobox-option]"
         );
-        document.activeElement === (h == null ? void 0 : h[0]) && Ae.includes(g.key) && ((L = (C = i.searchRef) == null ? void 0 : C.current) == null || L.focus()), g.key === "Escape" && i.setOpen(!1), g.stopPropagation();
+        document.activeElement === (y == null ? void 0 : y[0]) && Ae.includes(g.key) && ((L = (C = i.searchRef) == null ? void 0 : C.current) == null || L.focus()), g.key === "Escape" && i.setOpen(!1), g.stopPropagation();
       },
       bg: "surface-1",
       style: {
@@ -1495,13 +1495,13 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       "data-tgph-combobox-content-open": s,
       role: void 0,
       "aria-orientation": void 0,
-      children: /* @__PURE__ */ u(T, { direction: "column", gap: "1", tgphRef: l, children: e })
+      children: /* @__PURE__ */ u(S, { direction: "column", gap: "1", tgphRef: l, children: e })
     }
   );
 }, Ne = ({ ...o }) => {
   const t = p.useContext(w);
   return /* @__PURE__ */ u(
-    T,
+    S,
     {
       id: t.contentId,
       direction: "column",
@@ -1522,11 +1522,11 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   onSelect: a,
   ...i
 }) => {
-  const r = p.useContext(w), [n, l] = p.useState(!1), c = r.value ?? [], d = (Q(c), !r.searchQuery || o.toLowerCase().includes(r.searchQuery.toLowerCase())), s = Q(c) ? c.some((y) => y.value === o) : c.value === o, b = (y) => {
-    var g, h;
-    if (ue.includes(y.key)) {
-      if (y.stopPropagation(), y.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), a)
-        return a(y);
+  const r = p.useContext(w), [n, l] = p.useState(!1), c = r.value ?? [], d = (Q(c), !r.searchQuery || o.toLowerCase().includes(r.searchQuery.toLowerCase())), s = Q(c) ? c.some((h) => h.value === o) : c.value === o, b = (h) => {
+    var g, y;
+    if (!(h.key && !ue.includes(h.key))) {
+      if (h.stopPropagation(), h.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), a)
+        return a(h);
       if (Q(c)) {
         const v = r.onValueChange, k = s ? c.filter((C) => C.value !== o) : [...c, { value: o, label: t }];
         v(k);
@@ -1534,14 +1534,14 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         const v = r.onValueChange;
         v({ value: o, label: t });
       }
-      (h = (g = r.triggerRef) == null ? void 0 : g.current) == null || h.focus();
+      (y = (g = r.triggerRef) == null ? void 0 : g.current) == null || y.focus();
     }
   };
   if (d)
     return /* @__PURE__ */ u(
       N.Button,
       {
-        onKeyDown: b,
+        onSelect: b,
         selected: e === null ? null : e ?? s,
         onFocus: () => l(!0),
         onBlur: () => l(!1),
@@ -1562,19 +1562,19 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   ...a
 }) => {
   var l;
-  const i = p.useId(), r = p.useContext(w), n = B(e, r.searchRef);
+  const i = p.useId(), r = p.useContext(w), n = D(e, r.searchRef);
   return p.useEffect(() => {
     var s;
     const c = (b) => {
-      var y, g;
-      Ve.includes(b.key) && ((g = (y = r.contentRef) == null ? void 0 : y.current) == null || g.focus({ preventScroll: !0 })), b.key === "Escape" && r.setOpen(!1), b.stopPropagation();
+      var h, g;
+      Ve.includes(b.key) && ((g = (h = r.contentRef) == null ? void 0 : h.current) == null || g.focus({ preventScroll: !0 })), b.key === "Escape" && r.setOpen(!1), b.stopPropagation();
     }, d = (s = r.searchRef) == null ? void 0 : s.current;
     if (d)
       return d.addEventListener("keydown", c), () => {
         d.removeEventListener("keydown", c);
       };
-  }, [r]), /* @__PURE__ */ S(X, { borderBottom: !0, px: "1", pb: "1", children: [
-    /* @__PURE__ */ u(he.Root, { children: /* @__PURE__ */ u(P, { as: "label", htmlFor: i, children: o }) }),
+  }, [r]), /* @__PURE__ */ T(X, { borderBottom: !0, px: "1", pb: "1", children: [
+    /* @__PURE__ */ u(he.Root, { children: /* @__PURE__ */ u(B, { as: "label", htmlFor: i, children: o }) }),
     /* @__PURE__ */ u(
       fe,
       {
@@ -1586,9 +1586,9 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
           var d;
           (d = r == null ? void 0 : r.setSearchQuery) == null || d.call(r, c.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ u(K, { icon: j.Search, alt: "Search Icon" }),
+        LeadingComponent: /* @__PURE__ */ u(Y, { icon: j.Search, alt: "Search Icon" }),
         TrailingComponent: r != null && r.searchQuery && ((l = r == null ? void 0 : r.searchQuery) == null ? void 0 : l.length) > 0 ? /* @__PURE__ */ u(
-          D,
+          M,
           {
             as: E.button,
             initial: { opacity: 0 },
@@ -1625,8 +1625,8 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     );
     (l == null ? void 0 : l.length) === 0 ? n(!0) : n(!1);
   }, [i.searchQuery, i.contentRef, e]), r)
-    return /* @__PURE__ */ S(
-      T,
+    return /* @__PURE__ */ T(
+      S,
       {
         as: E.div,
         initial: { opacity: 0, scale: 0.8 },
@@ -1640,8 +1640,8 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         "data-tgph-combobox-empty": !0,
         ...a,
         children: [
-          o === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(K, { ...o }),
-          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(P, { as: "span", children: t })
+          o === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(Y, { ...o }),
+          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(B, { as: "span", children: t })
         ]
       }
     );
@@ -1672,11 +1672,11 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         ...i
       }
     );
-}, Ke = {};
-Object.assign(Ke, {
+}, Ye = {};
+Object.assign(Ye, {
   Root: Qe,
-  Trigger: Pe,
-  Content: Be,
+  Trigger: Be,
+  Content: De,
   Options: Ne,
   Option: se,
   Search: ze,
@@ -1684,6 +1684,6 @@ Object.assign(Ke, {
   Create: He
 });
 export {
-  Ke as Combobox
+  Ye as Combobox
 };
 //# sourceMappingURL=index.mjs.map