@telegraph/combobox 0.0.3 → 0.0.4

package/dist/esm/index.mjs

@@ -1,11 +1,11 @@
 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 Y, Lucide as j } from "@telegraph/icon";
+import { Icon as K, Lucide as j } from "@telegraph/icon";
 import * as ye from "react";
 import p from "react";
-import { Text as B } from "@telegraph/typography";
-import { useComposedRefs as D } from "@telegraph/compose-refs";
+import { Text as P } from "@telegraph/typography";
+import { useComposedRefs as B } 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";
@@ -630,7 +630,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
 }, _e = {
   default: "secondary",
   "icon-only": "primary"
-}, K = p.createContext({
+}, Y = p.createContext({
   variant: "solid",
   size: "2",
   color: "gray",
@@ -659,7 +659,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     return "default";
   }, [c == null ? void 0 : c.children]);
   return /* @__PURE__ */ u(
-    K.Provider,
+    Y.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(K), c = {
+  const l = p.useContext(Y), c = {
     size: o ?? Ee[l.size],
     color: t ?? Oe[l.variant][l.color],
     variant: e ?? _e[l.layout]
   };
   return /* @__PURE__ */ u(
-    Y,
+    K,
     {
       icon: a,
       "data-button-icon": !0,
@@ -723,9 +723,9 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   className: i,
   ...r
 }) => {
-  const n = p.useContext(K);
+  const n = p.useContext(Y);
   return /* @__PURE__ */ u(
-    B,
+    P,
     {
       as: o || "span",
       color: t ?? Te[n.variant][n.color],
@@ -756,7 +756,7 @@ Object.assign(ce, {
   Icon: H,
   Text: le
 });
-const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
+const D = 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 M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   tgphRef: e,
   ...a
 }) => {
-  const i = o || "div", r = p.useRef(null), n = D(e, r), l = p.useMemo(() => {
+  const i = o || "div", r = p.useRef(null), n = B(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),
@@ -1157,7 +1157,7 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   tgphRef: t,
   ...e
 }) => {
-  const a = p.useRef(null), i = D(t, a), r = p.useMemo(
+  const a = p.useRef(null), i = B(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 M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   layout: d,
   ...s
 }) => {
-  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({
+  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
   }), de = p.useCallback(() => {
-    P((ge) => !ge);
-  }, [P]);
+    M((ge) => !ge);
+  }, [M]);
   return p.useEffect(() => {
     L || C("");
   }, [L]), /* @__PURE__ */ u(
@@ -1220,7 +1220,7 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         onValueChange: n,
         placeholder: c,
         open: L,
-        setOpen: P,
+        setOpen: M,
         onOpenToggle: de,
         closeOnSelect: t,
         searchQuery: k,
@@ -1235,14 +1235,14 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         N.Root,
         {
           open: L,
-          onOpenChange: P,
+          onOpenChange: M,
           modal: o,
           ...s
         }
       )
     }
   );
-}, Me = ({ label: o, value: t, ...e }) => {
+}, De = ({ label: o, value: t, ...e }) => {
   const a = p.useContext(w);
   return /* @__PURE__ */ T(
     z.Root,
@@ -1279,14 +1279,14 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       ]
     }
   );
-}, Pe = ({
+}, Me = ({
   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(S, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(M.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ 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",
@@ -1301,7 +1301,7 @@ const M = 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(Me, { ...d }) }, d.value);
+              return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(De, { ...d }) }, d.value);
           }) }),
           /* @__PURE__ */ u(F, { children: n === "truncate" && r.length > 2 && /* @__PURE__ */ u(
             S,
@@ -1321,7 +1321,7 @@ const M = 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__ */ T(B, { 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,8 +1353,8 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       }
     );
   }
-  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 }) => {
+  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;
     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;
@@ -1384,7 +1384,7 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       },
       tgphRef: e.triggerRef,
       children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ T(
-        M.Root,
+        D.Root,
         {
           id: e.triggerId,
           bg: "surface-1",
@@ -1401,9 +1401,9 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
           "data-tgph-combobox-trigger": !0,
           "data-tgph-comobox-trigger-open": e.open,
           children: [
-            /* @__PURE__ */ u(Pe, { size: o }),
+            /* @__PURE__ */ u(Me, { size: o }),
             /* @__PURE__ */ u(
-              M.Icon,
+              D.Icon,
               {
                 as: E.div,
                 icon: j.ChevronDown,
@@ -1417,13 +1417,13 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       ) })
     }
   );
-}, De = ({
+}, Be = ({
   tgphRef: o,
   style: t,
   children: e,
   ...a
 }) => {
-  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(
+  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 y = g.getBoundingClientRect();
       y && d(y.height), s || b(!0);
@@ -1542,6 +1542,7 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       N.Button,
       {
         onSelect: b,
+        onKeyDown: b,
         selected: e === null ? null : e ?? s,
         onFocus: () => l(!0),
         onBlur: () => l(!1),
@@ -1562,7 +1563,7 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   ...a
 }) => {
   var l;
-  const i = p.useId(), r = p.useContext(w), n = D(e, r.searchRef);
+  const i = p.useId(), r = p.useContext(w), n = B(e, r.searchRef);
   return p.useEffect(() => {
     var s;
     const c = (b) => {
@@ -1574,7 +1575,7 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         d.removeEventListener("keydown", c);
       };
   }, [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(he.Root, { children: /* @__PURE__ */ u(P, { as: "label", htmlFor: i, children: o }) }),
     /* @__PURE__ */ u(
       fe,
       {
@@ -1586,9 +1587,9 @@ const M = 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(Y, { icon: j.Search, alt: "Search Icon" }),
+        LeadingComponent: /* @__PURE__ */ u(K, { 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(
-          M,
+          D,
           {
             as: E.button,
             initial: { opacity: 0 },
@@ -1640,8 +1641,8 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         "data-tgph-combobox-empty": !0,
         ...a,
         children: [
-          o === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(Y, { ...o }),
-          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(B, { as: "span", children: t })
+          o === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(K, { ...o }),
+          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(P, { as: "span", children: t })
         ]
       }
     );
@@ -1672,11 +1673,11 @@ const M = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         ...i
       }
     );
-}, Ye = {};
-Object.assign(Ye, {
+}, Ke = {};
+Object.assign(Ke, {
   Root: Qe,
-  Trigger: Be,
-  Content: De,
+  Trigger: Pe,
+  Content: Be,
   Options: Ne,
   Option: se,
   Search: ze,
@@ -1684,6 +1685,6 @@ Object.assign(Ye, {
   Create: He
 });
 export {
-  Ye as Combobox
+  Ke as Combobox
 };
 //# sourceMappingURL=index.mjs.map