@spark-ui/components 17.0.0 → 17.0.1-beta.0

package/dist/combobox/index.mjs

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as _, Fragment as te } from "react/jsx-runtime";
 import { useFormFieldControl as oe } from "@spark-ui/components/form-field";
 import { useCombinedState as Le } from "@spark-ui/hooks/use-combined-state";
-import { useCombobox as g, useMultipleSelection as Ee } from "downshift";
+import { useCombobox as h, useMultipleSelection as Ee } from "downshift";
 import { Children as B, isValidElement as z, createContext as ne, useRef as A, useState as T, useEffect as P, useId as q, Fragment as se, useContext as re, useLayoutEffect as ct } from "react";
 import { Popover as K } from "../popover/index.mjs";
 import { DeleteOutline as Ae } from "@spark-ui/icons/DeleteOutline";
@@ -9,7 +9,7 @@ import { cx as f, cva as Me } from "class-variance-authority";
 import { I as $ } from "../Icon-BO327oHU.mjs";
 import { useMergeRefs as W } from "@spark-ui/hooks/use-merge-refs";
 import { ArrowHorizontalDown as dt } from "@spark-ui/icons/ArrowHorizontalDown";
-import { I as ut } from "../IconButton-DdB3Pq13.mjs";
+import { I as ut } from "../IconButton-CP4JbWsI.mjs";
 import { V as mt } from "../VisuallyHidden-DjlV0-CW.mjs";
 import { Check as pt } from "@spark-ui/icons/Check";
 import { S as bt } from "../Spinner-Co3AjkQV.mjs";
@@ -69,14 +69,14 @@ const ft = (e, o) => {
 }) => (i, { changes: s, type: m }) => {
   const u = l.current?.contains?.(document.activeElement);
   switch (m) {
-    case g.stateChangeTypes.InputClick:
+    case h.stateChangeTypes.InputClick:
       return {
         ...s,
         isOpen: !0
         // keep menu opened
       };
-    case g.stateChangeTypes.InputKeyDownEnter:
-    case g.stateChangeTypes.ItemClick: {
+    case h.stateChangeTypes.InputKeyDownEnter:
+    case h.stateChangeTypes.ItemClick: {
       const b = { ...s };
       if (s.selectedItem != null) {
         b.inputValue = "", b.isOpen = !0;
@@ -89,17 +89,17 @@ const ft = (e, o) => {
       }
       return b;
     }
-    case g.stateChangeTypes.ToggleButtonClick:
+    case h.stateChangeTypes.ToggleButtonClick:
       return {
         ...s,
         inputValue: t ? s.inputValue : ""
       };
-    case g.stateChangeTypes.InputChange:
+    case h.stateChangeTypes.InputChange:
       return {
         ...s,
         selectedItem: s.highlightedIndex === -1 ? null : s.selectedItem
       };
-    case g.stateChangeTypes.InputBlur:
+    case h.stateChangeTypes.InputBlur:
       return {
         ...s,
         inputValue: t ? s.inputValue : "",
@@ -117,15 +117,15 @@ const ft = (e, o) => {
     (s) => s.text.toLowerCase() === l.inputValue.toLowerCase()
   );
   switch (c) {
-    case g.stateChangeTypes.InputKeyDownEscape:
+    case h.stateChangeTypes.InputKeyDownEscape:
       return r.selectedItem || t(null), r;
-    case g.stateChangeTypes.ItemClick:
-    case g.stateChangeTypes.InputKeyDownEnter:
+    case h.stateChangeTypes.ItemClick:
+    case h.stateChangeTypes.InputKeyDownEnter:
       return r.selectedItem && t(r.selectedItem), r;
-    case g.stateChangeTypes.InputClick:
+    case h.stateChangeTypes.InputClick:
       return { ...r, isOpen: !0 };
-    case g.stateChangeTypes.ToggleButtonClick:
-    case g.stateChangeTypes.InputBlur:
+    case h.stateChangeTypes.ToggleButtonClick:
+    case h.stateChangeTypes.InputBlur:
       return o ? r : l.inputValue === "" ? (t(null), { ...r, selectedItem: null }) : i ? (t(i), { ...r, selectedItem: i, inputValue: i.text }) : l.selectedItem ? { ...r, inputValue: l.selectedItem.text } : { ...r, inputValue: "" };
     default:
       return r;
@@ -151,14 +151,14 @@ const ft = (e, o) => {
   onOpenChange: I,
   isLoading: k
 }) => {
-  const x = A(!1), [w, N] = T(""), [E, h] = T(n === "strict"), R = A(null), V = A(null), [X, G] = T(null), [D] = Le(s, m), Q = n === "strict" || n === "auto" && E, [C, qe] = T(Re(e)), [H, ve] = T(
+  const x = A(!1), [w, N] = T(""), [E, g] = T(n === "strict"), R = A(null), V = A(null), [X, G] = T(null), [D] = Le(s, m), Q = n === "strict" || n === "auto" && E, [C, qe] = T(Re(e)), [H, ve] = T(
     Q ? ee(C, w) : C
   ), [we, Ne] = T(
     C.get(D) || null
   ), [Te, Pe] = T(
     D ? [...C.values()].filter((d) => D.includes(d.value)) : []
   ), Se = (d) => {
-    h(!1), d?.value !== we?.value && (Ne(d), setTimeout(() => {
+    g(!1), d?.value !== we?.value && (Ne(d), setTimeout(() => {
       u?.(d?.value);
     }, 0));
   }, Y = (d) => {
@@ -225,7 +225,7 @@ const ft = (e, o) => {
   P(() => {
     X?.(w || "");
   }, [w]);
-  const Z = g({
+  const Z = h({
     inputId: Oe,
     items: De,
     selectedItem: r ? void 0 : we,
@@ -311,7 +311,7 @@ const ft = (e, o) => {
         isLoading: k,
         setOnInputValueChange: G,
         isTyping: E,
-        setIsTyping: h
+        setIsTyping: g
       },
       children: /* @__PURE__ */ a(rt, { ...lt, children: e })
     }
@@ -398,7 +398,7 @@ const ie = ({ className: e, children: o, ref: t }) => v().filteredItemsMap.size
   }
 ) : null;
 ie.displayName = "Combobox.Empty";
-const He = ne(null), gt = ({ children: e }) => {
+const He = ne(null), ht = ({ children: e }) => {
   const o = `${U}-group-label-${q()}`;
   return /* @__PURE__ */ a(He.Provider, { value: { groupLabelId: o }, children: e });
 }, je = () => {
@@ -406,7 +406,7 @@ const He = ne(null), gt = ({ children: e }) => {
   if (!e)
     throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
   return e;
-}, ce = ({ children: e, ref: o, ...t }) => /* @__PURE__ */ a(gt, { children: /* @__PURE__ */ a(ht, { ref: o, ...t, children: e }) }), ht = ({ children: e, className: o, ref: t }) => {
+}, ce = ({ children: e, ref: o, ...t }) => /* @__PURE__ */ a(ht, { children: /* @__PURE__ */ a(gt, { ref: o, ...t, children: e }) }), gt = ({ children: e, className: o, ref: t }) => {
   const n = v(), l = je();
   return B.toArray(e).some((c) => z(c) && n.filteredItemsMap.get(c.props.value)) ? /* @__PURE__ */ a(
     "div",
@@ -456,16 +456,16 @@ const de = ({
     },
     ref: w
   }), E = s.multiple ? !s.areSelectedItemsInTrigger || s.selectedItems.length === 0 : s.selectedItem === null;
-  function h(V, X) {
+  function g(V, X) {
     return (G) => {
       V?.(G), X?.(G);
     };
   }
   const R = {
-    onBlur: h(i.onBlur, N.onBlur),
-    onChange: h(i.onChange, N.onChange),
-    onClick: h(i.onClick, N.onClick),
-    onKeyDown: h(i.onKeyDown, N.onKeyDown)
+    onBlur: g(i.onBlur, N.onBlur),
+    onChange: g(i.onChange, N.onChange),
+    onClick: g(i.onClick, N.onClick),
+    onKeyDown: g(i.onKeyDown, N.onKeyDown)
   };
   return /* @__PURE__ */ _(te, { children: [
     e && /* @__PURE__ */ a(mt, { children: /* @__PURE__ */ a("label", { ...s.getLabelProps(), children: e }) }),
@@ -737,15 +737,15 @@ const Tt = ({ item: e, index: o }) => {
     },
     `selected-item-${o}`
   );
-}, ge = () => {
+}, he = () => {
   const e = v();
   return e.multiple && e.selectedItems.length ? /* @__PURE__ */ a(te, { children: e.selectedItems.map((o, t) => /* @__PURE__ */ a(Tt, { item: o, index: t }, o.value)) }) : null;
 };
-ge.displayName = "Combobox.SelectedItems";
+he.displayName = "Combobox.SelectedItems";
 const Pt = Me(
   [
     "flex items-start gap-md min-h-sz-44 text-body-1",
-    "h-fit rounded-lg px-lg",
+    "h-fit rounded-xl px-lg",
     // outline styles
     "ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"
   ],
@@ -795,11 +795,11 @@ const Pt = Me(
     }, l = requestAnimationFrame(n);
     return () => cancelAnimationFrame(l);
   }, [e]);
-}, he = ({ className: e, children: o, ref: t }) => {
+}, ge = ({ className: e, children: o, ref: t }) => {
   const n = v(), l = oe(), r = F(o, "Combobox.LeadingIcon"), c = F(o, "Combobox.SelectedItems"), i = F(o, "Combobox.Input"), s = F(o, "Combobox.ClearButton"), m = F(o, "Combobox.Disclosure"), [u, b] = n.hasPopover ? [K.Anchor, { asChild: !0, type: void 0 }] : [se, {}], O = W(t, n.triggerAreaRef), I = A(null), k = l.disabled || n.disabled, x = l.readOnly || n.readOnly, w = !!s && !k && !x, N = () => {
     if (I.current && !n.wrap) {
-      const { scrollWidth: h, clientWidth: R } = I.current;
-      I.current.scrollLeft = h - R;
+      const { scrollWidth: g, clientWidth: R } = I.current;
+      I.current.scrollLeft = g - R;
     }
   };
   St(I, N);
@@ -807,9 +807,9 @@ const Pt = Me(
   return P(() => {
     n.setAreSelectedItemsInTrigger(E);
   }, [E]), P(() => {
-    const h = new ResizeObserver(N);
-    return I.current && h.observe(I.current), () => {
-      h.disconnect();
+    const g = new ResizeObserver(N);
+    return I.current && g.observe(I.current), () => {
+      g.disconnect();
     };
   }, []), /* @__PURE__ */ a(te, { children: /* @__PURE__ */ a(u, { ...b, children: /* @__PURE__ */ _(
     "div",
@@ -847,7 +847,7 @@ const Pt = Me(
     }
   ) }) });
 };
-he.displayName = "Combobox.Trigger";
+ge.displayName = "Combobox.Trigger";
 const Ot = Object.assign(Ge, {
   Group: ce,
   Item: me,
@@ -856,12 +856,12 @@ const Ot = Object.assign(Ge, {
   ItemIndicator: pe,
   Label: Ie,
   Popover: ye,
-  Trigger: he,
+  Trigger: ge,
   LeadingIcon: xe,
   Empty: ie,
   Input: de,
   Disclosure: ae,
-  SelectedItems: ge,
+  SelectedItems: he,
   ClearButton: le,
   Portal: Ce
 });
@@ -873,12 +873,12 @@ fe.displayName = "Combobox.ItemText";
 pe.displayName = "Combobox.ItemIndicator";
 Ie.displayName = "Combobox.Label";
 ye.displayName = "Combobox.Popover";
-he.displayName = "Combobox.Trigger";
+ge.displayName = "Combobox.Trigger";
 xe.displayName = "Combobox.LeadingIcon";
 ie.displayName = "Combobox.Empty";
 de.displayName = "Combobox.Input";
 ae.displayName = "Combobox.Disclosure";
-ge.displayName = "Combobox.SelectedItems";
+he.displayName = "Combobox.SelectedItems";
 le.displayName = "Combobox.ClearButton";
 Ce.displayName = "Combobox.Portal";
 export {