@telegraph/combobox 0.0.2 → 0.0.4

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-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";
@@ -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",
@@ -649,11 +649,11 @@ 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";
@@ -728,8 +728,8 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     P,
     {
       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 })
@@ -1152,7 +1152,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     type: "spacing",
     valueType: "variable"
   }
-}, T = ({
+}, S = ({
   className: o,
   tgphRef: t,
   ...e
@@ -1201,7 +1201,7 @@ 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, M] = be({
     prop: e,
     defaultProp: i,
     onChange: a
@@ -1215,7 +1215,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     {
       value: {
         contentId: b,
-        triggerId: y,
+        triggerId: h,
         value: r,
         onValueChange: n,
         placeholder: c,
@@ -1226,7 +1226,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         searchQuery: k,
         setSearchQuery: C,
         triggerRef: g,
-        searchRef: h,
+        searchRef: y,
         contentRef: v,
         errored: l,
         layout: d
@@ -1244,7 +1244,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   );
 }, De = ({ label: o, value: t, ...e }) => {
   const a = p.useContext(w);
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ T(
     z.Root,
     {
       size: "1",
@@ -1286,8 +1286,8 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   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(D.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ T(
+      S,
       {
         gap: "1",
         w: "full",
@@ -1304,7 +1304,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
               return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(De, { ...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(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
                 /* @__PURE__ */ u(F, { mode: "wait", initial: !1, children: c.map((d) => /* @__PURE__ */ u(
                   X,
@@ -1353,7 +1353,7 @@ 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 }) });
+  return /* @__PURE__ */ u(S, { 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 }) => {
   const e = p.useContext(w), a = p.useCallback(() => {
     var i, r, n;
@@ -1383,7 +1383,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         }
       },
       tgphRef: e.triggerRef,
-      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ S(
+      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ T(
         D.Root,
         {
           id: e.triggerId,
@@ -1423,22 +1423,22 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   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 = B(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,13 +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,
       {
+        onSelect: b,
         onKeyDown: b,
         selected: e === null ? null : e ?? s,
         onFocus: () => l(!0),
@@ -1566,14 +1567,14 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   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: [
+  }, [r]), /* @__PURE__ */ T(X, { borderBottom: !0, px: "1", pb: "1", children: [
     /* @__PURE__ */ u(he.Root, { children: /* @__PURE__ */ u(P, { as: "label", htmlFor: i, children: o }) }),
     /* @__PURE__ */ u(
       fe,
@@ -1625,8 +1626,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 },