@spark-ui/components 13.1.4 → 13.2.0

package/dist/select/index.mjs

@@ -1,205 +1,116 @@
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/select/SelectContext.tsx
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useId,
-  useState
-} from "react";
-
-// src/select/utils.ts
-import { Children, isValidElement } from "react";
-var findElement = (children) => (name) => {
-  const validChildren = Children.toArray(children).filter(isValidElement);
-  return validChildren.find((child) => {
-    return getElementDisplayName(child)?.includes(name);
-  });
-};
-var getElementDisplayName = (element) => {
-  return element ? element.type.displayName : "";
-};
-var getOrderedItems = (children, result = []) => {
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    if (getElementDisplayName(child) === "Select.Item" || getElementDisplayName(child) === "Select.Placeholder") {
-      const childProps = child.props;
-      result.push({
-        value: childProps.value,
-        disabled: !!childProps.disabled,
-        text: childProps.children
+import { jsx as r, jsxs as ce } from "react/jsx-runtime";
+import { useFormFieldControl as de } from "@spark-ui/components/form-field";
+import { useCombinedState as ue } from "@spark-ui/hooks/use-combined-state";
+import { Children as A, isValidElement as D, createContext as $, useState as f, useId as me, useEffect as g, useContext as R } from "react";
+import { cx as C, cva as U } from "class-variance-authority";
+import { I as H } from "../Icon-Ck-dhfLd.mjs";
+import { ArrowHorizontalDown as pe } from "@spark-ui/icons/ArrowHorizontalDown";
+const fe = (e) => (t) => A.toArray(e).filter(D).find((l) => w(l)?.includes(t)), w = (e) => e ? e.type.displayName : "", X = (e, t = []) => (A.forEach(e, (s) => {
+  if (D(s)) {
+    if (w(s) === "Select.Item" || w(s) === "Select.Placeholder") {
+      const l = s.props;
+      t.push({
+        value: l.value,
+        disabled: !!l.disabled,
+        text: l.children
       });
     }
-    if (child.props.children) {
-      getOrderedItems(child.props.children, result);
-    }
-  });
-  return result;
-};
-var getItemsFromChildren = (children) => {
-  const newMap = /* @__PURE__ */ new Map();
-  getOrderedItems(children).forEach((itemData) => {
-    newMap.set(itemData.value, itemData);
-  });
-  return newMap;
-};
-
-// src/select/SelectContext.tsx
-import { jsx } from "react/jsx-runtime";
-var SelectContext = createContext(null);
-var ID_PREFIX = ":select";
-var SelectProvider = ({
-  children,
-  defaultValue,
-  value: valueProp,
-  onValueChange,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
-  state: stateProp,
-  itemsComponent,
-  name: nameProp,
-  required: requiredProp
+    s.props.children && X(s.props.children, t);
+  }
+}), t), q = (e) => {
+  const t = /* @__PURE__ */ new Map();
+  return X(e).forEach((s) => {
+    t.set(s.value, s);
+  }), t;
+}, _ = $(null), ge = ":select", he = ({
+  children: e,
+  defaultValue: t,
+  value: s,
+  onValueChange: l,
+  disabled: n = !1,
+  readOnly: o = !1,
+  state: i,
+  itemsComponent: a,
+  name: c,
+  required: b
 }) => {
-  const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange);
-  const [placeholder, setPlaceholder] = useState(void 0);
-  const [itemsMap, setItemsMap] = useState(getItemsFromChildren(itemsComponent));
-  const [ariaLabel, setAriaLabel] = useState();
-  const firstItem = itemsMap.entries().next()?.value?.[1];
-  const selectedItem = typeof value === "string" ? itemsMap.get(value) : firstItem;
-  const isControlled = valueProp != null;
-  const field = useFormFieldControl();
-  const state = field.state || stateProp;
-  const internalFieldID = `${ID_PREFIX}-field-${useId()}`;
-  const fieldId = field.id || internalFieldID;
-  const fieldLabelId = field.labelId;
-  const disabled = field.disabled ?? disabledProp;
-  const readOnly = field.readOnly ?? readOnlyProp;
-  const name = field.name ?? nameProp;
-  const required = !!(field.isRequired ?? requiredProp);
-  useEffect(() => {
-    const newMap = getItemsFromChildren(itemsComponent);
-    const previousItems = [...itemsMap.values()];
-    const newItems = [...newMap.values()];
-    const hasItemsChanges = previousItems.length !== newItems.length || previousItems.some((item, index) => {
-      const hasUpdatedValue = item.value !== newItems[index]?.value;
-      const hasUpdatedText = item.text !== newItems[index]?.text;
-      return hasUpdatedValue || hasUpdatedText;
-    });
-    if (hasItemsChanges) {
-      setItemsMap(newMap);
-    }
-  }, [children]);
-  return /* @__PURE__ */ jsx(
-    SelectContext.Provider,
+  const [p, y] = ue(s, t, l), [v, S] = f(void 0), [u, I] = f(q(a)), [x, m] = f(), Q = u.entries().next()?.value?.[1], W = typeof p == "string" ? u.get(p) : Q, Y = s != null, d = de(), Z = d.state || i, ee = `${ge}-field-${me()}`, te = d.id || ee, se = d.labelId, le = d.disabled ?? n, re = d.readOnly ?? o, ae = d.name ?? c, ne = !!(d.isRequired ?? b);
+  return g(() => {
+    const j = q(a), F = [...u.values()], N = [...j.values()];
+    (F.length !== N.length || F.some((M, T) => {
+      const oe = M.value !== N[T]?.value, ie = M.text !== N[T]?.text;
+      return oe || ie;
+    })) && I(j);
+  }, [e]), /* @__PURE__ */ r(
+    _.Provider,
     {
       value: {
-        disabled,
-        readOnly,
-        itemsMap,
-        state,
-        itemsComponent,
-        selectedItem,
-        setValue,
-        isControlled,
-        onValueChange,
-        ariaLabel,
-        setAriaLabel,
-        fieldId,
-        fieldLabelId,
-        name,
-        required,
-        placeholder,
-        setPlaceholder
+        disabled: le,
+        readOnly: re,
+        itemsMap: u,
+        state: Z,
+        itemsComponent: a,
+        selectedItem: W,
+        setValue: y,
+        isControlled: Y,
+        onValueChange: l,
+        ariaLabel: x,
+        setAriaLabel: m,
+        fieldId: te,
+        fieldLabelId: se,
+        name: ae,
+        required: ne,
+        placeholder: v,
+        setPlaceholder: S
       },
-      children
+      children: e
     }
   );
-};
-var useSelectContext = () => {
-  const context = useContext(SelectContext);
-  if (!context) {
+}, h = () => {
+  const e = R(_);
+  if (!e)
     throw Error("useSelectContext must be used within a Select provider");
-  }
-  return context;
-};
-
-// src/select/Select.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Select = ({ children, ...props }) => {
-  const finder = findElement(children);
-  const trigger = finder("Trigger");
-  const items = finder("Items");
-  return /* @__PURE__ */ jsx2(SelectProvider, { ...props, itemsComponent: items, children: trigger });
+  return e;
+}, B = ({ children: e, ...t }) => {
+  const s = fe(e), l = s("Trigger"), n = s("Items");
+  return /* @__PURE__ */ r(he, { ...t, itemsComponent: n, children: l });
 };
-Select.displayName = "Select";
-
-// src/select/SelectGroup.tsx
-import { cx } from "class-variance-authority";
-
-// src/select/SelectItemsGroupContext.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var SelectGroupContext = createContext2(null);
-var SelectGroupProvider = ({ children }) => {
-  const [groupLabel, setGroupLabel] = useState2("");
-  return /* @__PURE__ */ jsx3(SelectGroupContext.Provider, { value: { groupLabel, setGroupLabel }, children });
-};
-var useSelectGroupContext = () => {
-  const context = useContext2(SelectGroupContext);
-  if (!context) {
+B.displayName = "Select";
+const J = $(null), be = ({ children: e }) => {
+  const [t, s] = f("");
+  return /* @__PURE__ */ r(J.Provider, { value: { groupLabel: t, setGroupLabel: s }, children: e });
+}, K = () => {
+  const e = R(J);
+  if (!e)
     throw Error("useSelectGroupContext must be used within a SelectGroup provider");
-  }
-  return context;
-};
-
-// src/select/SelectGroup.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ jsx4(SelectGroupProvider, { children: /* @__PURE__ */ jsx4(GroupContent, { ref: forwardedRef, ...props, children }) });
-};
-var GroupContent = ({ children, className, ref: forwardedRef }) => {
-  const { groupLabel } = useSelectGroupContext();
-  return /* @__PURE__ */ jsx4(
+  return e;
+}, L = ({ children: e, ref: t, ...s }) => /* @__PURE__ */ r(be, { children: /* @__PURE__ */ r(ye, { ref: t, ...s, children: e }) }), ye = ({ children: e, className: t, ref: s }) => {
+  const { groupLabel: l } = K();
+  return /* @__PURE__ */ r(
     "optgroup",
     {
       "data-spark-component": "select-group",
-      ref: forwardedRef,
-      className: cx(className),
-      label: groupLabel,
-      children
+      ref: s,
+      className: C(t),
+      label: l,
+      children: e
     }
   );
 };
-Group.displayName = "Select.Group";
-
-// src/select/SelectItem.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Item = ({ disabled = false, value, children, ref: forwardedRef }) => {
-  return /* @__PURE__ */ jsx5(
-    "option",
-    {
-      "data-spark-component": "select-item",
-      ref: forwardedRef,
-      value,
-      disabled,
-      children
-    },
-    value
-  );
-};
-Item.displayName = "Select.Item";
-
-// src/select/SelectItems.tsx
-import { cva } from "class-variance-authority";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var styles = cva(
+L.displayName = "Select.Group";
+const P = ({ disabled: e = !1, value: t, children: s, ref: l }) => /* @__PURE__ */ r(
+  "option",
+  {
+    "data-spark-component": "select-item",
+    ref: l,
+    value: t,
+    disabled: e,
+    children: s
+  },
+  t
+);
+P.displayName = "Select.Item";
+const ve = U(
   [
     "absolute left-0 top-0 size-full rounded-lg opacity-0",
     "min-h-sz-44",
@@ -223,113 +134,85 @@ var styles = cva(
     },
     compoundVariants: [
       {
-        disabled: false,
+        disabled: !1,
         state: void 0,
         class: "hover:ring-outline-high"
       }
     ]
   }
-);
-var Items = ({
-  children,
-  className,
-  ref,
-  ...rest
+), G = ({
+  children: e,
+  className: t,
+  ref: s,
+  ...l
 }) => {
   const {
-    state,
-    disabled,
-    readOnly,
-    ariaLabel,
-    fieldLabelId,
-    isControlled,
-    onValueChange,
-    selectedItem,
-    setValue,
-    name,
-    required,
-    fieldId
-  } = useSelectContext();
-  const handleChange = (event) => {
-    if (isControlled) {
-      event.preventDefault();
-      onValueChange?.(event.target.value);
-    } else {
-      setValue(event.target.value);
-    }
+    state: n,
+    disabled: o,
+    readOnly: i,
+    ariaLabel: a,
+    fieldLabelId: c,
+    isControlled: b,
+    onValueChange: p,
+    selectedItem: y,
+    setValue: v,
+    name: S,
+    required: u,
+    fieldId: I
+  } = h(), x = (m) => {
+    b ? (m.preventDefault(), p?.(m.target.value)) : v(m.target.value);
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ r(
     "select",
     {
       "data-spark-component": "select-items",
-      ref,
-      disabled: disabled || readOnly,
-      name,
-      required,
-      "aria-labelledby": fieldLabelId,
-      ...ariaLabel && { "aria-label": ariaLabel },
-      className: styles({ className, state, disabled, readOnly }),
-      value: selectedItem?.value,
-      onChange: handleChange,
-      id: fieldId,
-      ...rest,
-      children
+      ref: s,
+      disabled: o || i,
+      name: S,
+      required: u,
+      "aria-labelledby": c,
+      ...a && { "aria-label": a },
+      className: ve({ className: t, state: n, disabled: o, readOnly: i }),
+      value: y?.value,
+      onChange: x,
+      id: I,
+      ...l,
+      children: e
     }
   );
 };
-Items.displayName = "Select.Items";
-
-// src/select/SelectLabel.tsx
-import { useEffect as useEffect2 } from "react";
-var Label = ({ children }) => {
-  const { setGroupLabel } = useSelectGroupContext();
-  useEffect2(() => {
-    setGroupLabel(children);
-  }, [children]);
-  return null;
+G.displayName = "Select.Items";
+const O = ({ children: e }) => {
+  const { setGroupLabel: t } = K();
+  return g(() => {
+    t(e);
+  }, [e]), null;
 };
-Label.displayName = "Select.Label";
-
-// src/select/SelectLeadingIcon.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ jsx7(Icon, { size: "sm", className: "shrink-0", children });
-};
-LeadingIcon.displayName = "Select.LeadingIcon";
-
-// src/select/SelectPlaceholder.tsx
-import { useEffect as useEffect3 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Placeholder = ({
-  disabled = false,
-  children,
-  ref: forwardedRef
+O.displayName = "Select.Label";
+const k = ({ children: e }) => /* @__PURE__ */ r(H, { size: "sm", className: "shrink-0", children: e });
+k.displayName = "Select.LeadingIcon";
+const E = ({
+  disabled: e = !1,
+  children: t,
+  ref: s
 }) => {
-  const { setPlaceholder } = useSelectContext();
-  useEffect3(() => {
-    setPlaceholder(children);
-  }, [children]);
-  return /* @__PURE__ */ jsx8(
+  const { setPlaceholder: l } = h();
+  return g(() => {
+    l(t);
+  }, [t]), /* @__PURE__ */ r(
     "option",
     {
       "data-spark-component": "select-placeholder",
-      ref: forwardedRef,
+      ref: s,
       value: "",
-      disabled,
-      children
+      disabled: e,
+      children: t
     },
     "placeholder"
   );
 };
-Placeholder.displayName = "Select.Placeholder";
-
-// src/select/SelectTrigger.tsx
-import { ArrowHorizontalDown } from "@spark-ui/icons/ArrowHorizontalDown";
-import { useEffect as useEffect4 } from "react";
-
-// src/select/SelectTrigger.styles.tsx
-import { cva as cva2 } from "class-variance-authority";
-var styles2 = cva2(
+E.displayName = "Select.Placeholder";
+const Se = U(
   [
     "relative flex w-full items-center justify-between",
     "min-h-sz-44 rounded-lg px-lg",
@@ -354,114 +237,99 @@ var styles2 = cva2(
     },
     compoundVariants: [
       {
-        readOnly: false,
-        disabled: false,
+        readOnly: !1,
+        disabled: !1,
         class: "bg-surface text-on-surface"
       },
       {
-        readOnly: true,
+        readOnly: !0,
         class: "bg-on-surface/dim-5 text-on-surface cursor-default"
       },
       {
-        disabled: true,
+        disabled: !0,
         class: ["bg-on-surface/dim-5 text-on-surface/dim-3", "cursor-not-allowed"]
       },
       {
-        disabled: false,
+        disabled: !1,
         state: void 0,
         class: "default:hover:ring-outline-high"
       }
     ]
   }
-);
-
-// src/select/SelectTrigger.tsx
-import { jsx as jsx9, jsxs } from "react/jsx-runtime";
-var Trigger = ({
-  "aria-label": ariaLabel,
-  children,
-  className,
-  ref: forwardedRef
+), V = ({
+  "aria-label": e,
+  children: t,
+  className: s,
+  ref: l
 }) => {
-  const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext();
-  useEffect4(() => {
-    if (ariaLabel) {
-      setAriaLabel(ariaLabel);
-    }
-  }, [ariaLabel]);
-  return /* @__PURE__ */ jsxs(
+  const { disabled: n, readOnly: o, state: i, setAriaLabel: a, itemsComponent: c } = h();
+  return g(() => {
+    e && a(e);
+  }, [e]), /* @__PURE__ */ ce(
     "div",
     {
       "data-spark-component": "select-trigger",
-      ref: forwardedRef,
-      className: styles2({ className, state, disabled, readOnly }),
+      ref: l,
+      className: Se({ className: s, state: i, disabled: n, readOnly: o }),
       children: [
-        /* @__PURE__ */ jsx9("span", { className: "gap-md flex items-center justify-start", children }),
-        /* @__PURE__ */ jsx9(Icon, { className: "ml-md shrink-0", size: "sm", children: /* @__PURE__ */ jsx9(ArrowHorizontalDown, {}) }),
-        itemsComponent
+        /* @__PURE__ */ r("span", { className: "gap-md flex items-center justify-start", children: t }),
+        /* @__PURE__ */ r(H, { className: "ml-md shrink-0", size: "sm", children: /* @__PURE__ */ r(pe, {}) }),
+        c
       ]
     }
   );
 };
-Trigger.displayName = "Select.Trigger";
-
-// src/select/SelectValue.tsx
-import { cx as cx2 } from "class-variance-authority";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Value = ({
-  children,
-  className,
-  placeholder: customPlaceholder,
-  ref: forwardedRef
+V.displayName = "Select.Trigger";
+const z = ({
+  children: e,
+  className: t,
+  placeholder: s,
+  ref: l
 }) => {
-  const { selectedItem, placeholder, disabled } = useSelectContext();
-  const isPlaceholderSelected = selectedItem?.value == null;
-  const valuePlaceholder = customPlaceholder || placeholder;
-  return /* @__PURE__ */ jsx10(
+  const { selectedItem: n, placeholder: o, disabled: i } = h(), a = n?.value == null, c = s || o;
+  return /* @__PURE__ */ r(
     "span",
     {
       role: "presentation",
       "data-spark-component": "select-value",
-      ref: forwardedRef,
-      className: cx2("flex shrink items-center text-left", className),
-      children: /* @__PURE__ */ jsx10(
+      ref: l,
+      className: C("flex shrink items-center text-left", t),
+      children: /* @__PURE__ */ r(
         "span",
         {
-          className: cx2(
+          className: C(
             "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
-            isPlaceholderSelected && !disabled && "text-on-surface/dim-1"
+            a && !i && "text-on-surface/dim-1"
           ),
-          children: isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text
+          children: a ? c : e || n?.text
         }
       )
     }
   );
 };
-Value.displayName = "Select.Value";
-
-// src/select/index.ts
-var Select2 = Object.assign(Select, {
-  Group,
-  Item,
-  Items,
-  Placeholder,
-  Label,
-  Trigger,
-  Value,
-  LeadingIcon
+z.displayName = "Select.Value";
+const Ie = Object.assign(B, {
+  Group: L,
+  Item: P,
+  Items: G,
+  Placeholder: E,
+  Label: O,
+  Trigger: V,
+  Value: z,
+  LeadingIcon: k
 });
-Select2.displayName = "Select";
-Group.displayName = "Select.Group";
-Items.displayName = "Select.Items";
-Item.displayName = "Select.Item";
-Placeholder.displayName = "Select.Placeholder";
-Label.displayName = "Select.Label";
-Trigger.displayName = "Select.Trigger";
-Value.displayName = "Select.Value";
-LeadingIcon.displayName = "Select.LeadingIcon";
+Ie.displayName = "Select";
+L.displayName = "Select.Group";
+G.displayName = "Select.Items";
+P.displayName = "Select.Item";
+E.displayName = "Select.Placeholder";
+O.displayName = "Select.Label";
+V.displayName = "Select.Trigger";
+z.displayName = "Select.Value";
+k.displayName = "Select.LeadingIcon";
 export {
-  Select2 as Select,
-  SelectProvider,
-  useSelectContext
+  Ie as Select,
+  he as SelectProvider,
+  h as useSelectContext
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map