@solibo/solibo-ui 1.1.3 → 1.1.5

package/dist/components/dropdown/index.js

@@ -1,33 +1,33 @@
 import { jsxs as p, Fragment as me, jsx as i } from "react/jsx-runtime";
 import { t as y } from "../../classix-DG18itHa.js";
-import ve, { Children as ge, isValidElement as x, useRef as L, useId as _e, useState as W, useEffect as G } from "react";
-import { Button as Q } from "../button/index.js";
-import { i as he } from "../../icons-DKV6nOkW.js";
-import { f as be, I as ye } from "../../index-Ce06AE41.js";
+import _e, { Children as he, isValidElement as x, useRef as V, useId as ge, useState as M, useEffect as W } from "react";
+import { Button as G } from "../button/index.js";
+import { i as be } from "../../icons-BpYV3Qdj.js";
+import { f as ve, I as ye } from "../../index-C9_dM53L.js";
 import { List as xe } from "../list/index.js";
-import { S as we, s as Ne, r as ee } from "../../index-B-cKCIKU.js";
-import '../../assets/index37.css';function $(t) {
-  return typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map($).join(" ") : x(t) ? $(t.props.children) : "";
+import { S as we, s as je, r as ee } from "../../index-ky7bIz5x.js";
+import '../../assets/index37.css';function I(t) {
+  return typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(I).join(" ") : x(t) ? I(t.props.children) : "";
 }
-function Se(t) {
+function ze(t) {
   return x(t) && t.type === "option";
 }
-function Ce(t) {
+function Ne(t) {
   return x(t) && t.type === "optgroup";
 }
-function Ee(t) {
-  return x(t) && t.type === ve.Fragment;
+function Se(t) {
+  return x(t) && t.type === _e.Fragment;
 }
-function Ve(t) {
+function Ce(t) {
   return x(t) && t.type === we;
 }
-function z(t, s, r = !1) {
+function Q(t, s, r = !1) {
   const l = [];
-  return ge.forEach(t, (n) => {
-    if (Ee(n))
-      l.push(...z(n.props.children, s, r));
-    else if (Se(n)) {
-      const a = $(n.props.children).trim(), f = n.props.value != null ? String(n.props.value) : a;
+  return he.forEach(t, (n) => {
+    if (Se(n))
+      l.push(...Q(n.props.children, s, r));
+    else if (ze(n)) {
+      const a = I(n.props.children).trim(), f = n.props.value != null ? String(n.props.value) : a;
       l.push({
         disabled: r || !!n.props.disabled,
         groupLabel: s,
@@ -38,28 +38,28 @@ function z(t, s, r = !1) {
         text: a,
         value: f
       });
-    } else Ce(n) && l.push(...z(n.props.children, n.props.label, r || !!n.props.disabled));
+    } else Ne(n) && l.push(...Q(n.props.children, n.props.label, r || !!n.props.disabled));
   }), l;
 }
-function Ie(t) {
+function Ee(t) {
   const s = t.trim();
   if (!s) return null;
   const l = [.../[*?]/.test(s) ? s : `*${s}*`].map((n) => n === "*" ? ".*" : n === "?" ? "." : n.replace(/[|\\{}()[\]^$+.,]/g, "\\$&")).join("");
   return new RegExp(`^${l}$`, "i");
 }
-function Le(t, s) {
-  const r = Ie(s), l = t.filter((n) => !n.hidden && !n.isPlaceholder);
+function Ve(t, s) {
+  const r = Ee(s), l = t.filter((n) => !n.hidden && !n.isPlaceholder);
   return r ? l.filter((n) => r.test([n.groupLabel, n.text, n.value].filter(Boolean).join(" "))) : l;
 }
-function $e(t, s) {
+function Ie(t, s) {
   return t.find((r) => r.value === s) ?? t.find((r) => r.isPlaceholder) ?? t[0];
 }
-function Be(t, s, r) {
+function Le(t, s, r) {
   var l, n;
   return s != null ? String(s) : r != null ? String(r) : ((l = t.find((a) => a.selected)) == null ? void 0 : l.value) ?? ((n = t[0]) == null ? void 0 : n.value) ?? "";
 }
-function De(t) {
-  if (Ve(t)) {
+function $e(t) {
+  if (Ce(t)) {
     const {
       children: s,
       placeholder: r,
@@ -78,29 +78,29 @@ function De(t) {
     props: t.props
   };
 }
-const Pe = "_combobox_vg3rv_3", ke = "_dropdown_vg3rv_27", Re = "_empty_vg3rv_32", je = "_group_vg3rv_33", Fe = "_placeholder_vg3rv_34", Me = "_filter_vg3rv_42", We = "_native_vg3rv_53", Ge = "_option_vg3rv_63", Qe = "_options_vg3rv_85", ze = "_panel_vg3rv_109", Ae = "_selected_vg3rv_134", Ke = "_text_vg3rv_138", Oe = "_trigger_vg3rv_146", Te = "_minimal_vg3rv_183", qe = "_inline_vg3rv_238", He = "_label_vg3rv_270", o = {
-  combobox: Pe,
-  "combobox-input": "_combobox-input_vg3rv_12",
-  dropdown: ke,
-  empty: Re,
-  group: je,
-  placeholder: Fe,
-  filter: Me,
-  native: We,
-  option: Ge,
-  options: Qe,
-  panel: ze,
+const Be = "_combobox_149jz_3", De = "_dropdown_149jz_27", Pe = "_empty_149jz_32", ke = "_group_149jz_33", Re = "_placeholder_149jz_34", Fe = "_filter_149jz_42", Me = "_native_149jz_53", We = "_option_149jz_63", Ge = "_options_149jz_84", Qe = "_panel_149jz_108", Ae = "_selected_149jz_133", Ke = "_text_149jz_137", Oe = "_trigger_149jz_145", Te = "_minimal_149jz_182", qe = "_inline_149jz_241", He = "_label_149jz_273", o = {
+  combobox: Be,
+  "combobox-input": "_combobox-input_149jz_12",
+  dropdown: De,
+  empty: Pe,
+  group: ke,
+  placeholder: Re,
+  filter: Fe,
+  native: Me,
+  option: We,
+  options: Ge,
+  panel: Qe,
   selected: Ae,
   text: Ke,
   trigger: Oe,
   minimal: Te,
   inline: qe,
   label: He,
-  "inline-field": "_inline-field_vg3rv_276"
+  "inline-field": "_inline-field_149jz_279"
 };
 function te(t, s) {
   return {
-    "--icon-svg": he(t, s)
+    "--icon-svg": be(t, s)
   };
 }
 const rt = ({
@@ -111,101 +111,101 @@ const rt = ({
   emptyLabel: n = "No matches found",
   label: a,
   renderOption: f,
-  searchPlaceholder: B = "Filter",
+  searchPlaceholder: L = "Filter",
   selectedItems: ne,
-  variant: _ = "default",
+  variant: g = "default",
   ...re
 }) => {
-  const D = De(t), {
+  const $ = $e(t), {
     defaultValue: le,
-    onChange: P,
-    value: k,
+    onChange: B,
+    value: D,
     ...oe
-  } = D.props, w = Ne(oe), {
+  } = $.props, w = je(oe), {
     className: se,
     ...ie
-  } = w, A = L(null), K = L(null), N = _e(), O = L(null), m = L(null), h = z(D.children), b = k != null, R = Be(h, k, le), [j, F] = W(() => R), [c, d] = W(!1), [S, C] = W(""), E = b ? String(k) : j, T = {
+  } = w, A = V(null), K = V(null), j = ge(), O = V(null), m = V(null), b = Q($.children), v = D != null, P = Le(b, D, le), [k, R] = M(() => P), [c, d] = M(!1), [z, N] = M(""), S = v ? String(D) : k, T = {
     default: ee("--colors-semantic-content-secondary"),
     white: ee("--color-white", "white")
-  }, q = _ === "minimal" ? T.white : T.default, V = $e(h, E), ae = te("CaretDown", q), ce = te("MagnifyingGlass", q), H = Le(h, S), v = S.trim(), I = !!(r && l && v && l.isValid(v)), ue = a && _ === "inline" ? be(a) : a, J = (e) => e ? (f == null ? void 0 : f({
+  }, q = g === "minimal" ? T.white : T.default, C = Ie(b, S), ae = te("CaretDown", q), ce = te("MagnifyingGlass", q), H = Ve(b, z), _ = z.trim(), E = !!(r && l && _ && l.isValid(_)), ue = a && g === "inline" ? ve(a) : a, J = (e) => e ? (f == null ? void 0 : f({
     groupLabel: e.groupLabel,
-    isSelected: e.value === E,
+    isSelected: e.value === S,
     label: e.label,
     text: e.text,
     value: e.value
   })) ?? e.label : "Select an option";
-  G(() => {
-    !b && !h.some((e) => e.value === j) && F(R);
-  }, [R, j, b, h]), G(() => {
+  W(() => {
+    !v && !b.some((e) => e.value === k) && R(P);
+  }, [P, k, v, b]), W(() => {
     var e;
     if (!c) {
-      C("");
+      N("");
       return;
     }
     (e = m.current) == null || e.focus();
-  }, [c]), G(() => {
+  }, [c]), W(() => {
     if (!c)
       return;
     const e = (u) => {
-      var g;
-      (g = K.current) != null && g.contains(u.target) || d(!1);
+      var h;
+      (h = K.current) != null && h.contains(u.target) || d(!1);
     };
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
   }, [c]);
   const de = (e) => {
-    b || F(e.target.value), P == null || P(e);
-  }, M = () => {
+    v || R(e.target.value), B == null || B(e);
+  }, F = () => {
     var e;
     d(!1), r || (e = A.current) == null || e.focus();
   }, U = () => {
     var e;
-    C(""), d(!0), (e = m.current) == null || e.focus();
+    N(""), d(!0), (e = m.current) == null || e.focus();
   }, X = () => {
-    !l || !I || (l.onCreate(v), U());
+    !l || !E || (l.onCreate(_), U());
   }, pe = (e) => {
     var Z;
-    b || F(e);
+    v || R(e);
     const u = O.current;
     if (!u) {
-      M();
+      F();
       return;
     }
-    const g = (Z = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : Z.set;
-    g == null || g.call(u, e), u.dispatchEvent(new Event("change", {
+    const h = (Z = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : Z.set;
+    h == null || h.call(u, e), u.dispatchEvent(new Event("change", {
       bubbles: !0
-    })), r ? U() : M();
+    })), r ? U() : F();
   }, fe = (e) => {
-    e.key === "Escape" && M(), e.key === "Enter" && e.target === m.current && I && (e.preventDefault(), X());
-  }, Y = /* @__PURE__ */ p("div", { className: y(o.dropdown, _ === "inline" && o.inline, _ === "minimal" && o.minimal, s), onKeyDown: fe, ref: K, ...re, children: [
-    /* @__PURE__ */ i("select", { ...ie, "aria-hidden": "true", className: y(o.native, se), onChange: de, ref: O, tabIndex: -1, value: E, children: D.children }),
+    e.key === "Escape" && F(), e.key === "Enter" && e.target === m.current && E && (e.preventDefault(), X());
+  }, Y = /* @__PURE__ */ p("div", { className: y(o.dropdown, g === "inline" && o.inline, g === "minimal" && o.minimal, s), onKeyDown: fe, ref: K, ...re, children: [
+    /* @__PURE__ */ i("select", { ...ie, "aria-hidden": "true", className: y(o.native, se), onChange: de, ref: O, tabIndex: -1, value: S, children: $.children }),
     r ? /* @__PURE__ */ p("div", { className: o.combobox, onClick: () => {
       var e;
       return (e = m.current) == null ? void 0 : e.focus();
     }, children: [
       ne,
-      /* @__PURE__ */ i("input", { "aria-autocomplete": "list", "aria-expanded": c, "aria-label": w["aria-label"] ?? a ?? B, className: o["combobox-input"], disabled: w.disabled, onChange: (e) => {
-        C(e.target.value), d(!0);
-      }, onClick: () => d(!0), onFocus: () => d(!0), placeholder: B || void 0, ref: m, role: "combobox", type: "text", value: S })
-    ] }) : /* @__PURE__ */ i(Q, { "aria-expanded": c, "aria-haspopup": "dialog", "aria-labelledby": a ? `${N} ${N}-value` : void 0, className: y(o.trigger, (V == null ? void 0 : V.isPlaceholder) && o.placeholder), "data-open": c ? "true" : void 0, disabled: w.disabled, onClick: () => d((e) => !e), ref: A, style: ae, variant: "tertiary", children: /* @__PURE__ */ i("span", { className: o.text, id: `${N}-value`, children: J(V) }) }),
+      /* @__PURE__ */ i("input", { "aria-autocomplete": "list", "aria-expanded": c, "aria-label": w["aria-label"] ?? a ?? L, className: o["combobox-input"], disabled: w.disabled, onChange: (e) => {
+        N(e.target.value), d(!0);
+      }, onClick: () => d(!0), onFocus: () => d(!0), placeholder: L || void 0, ref: m, role: "combobox", type: "text", value: z })
+    ] }) : /* @__PURE__ */ i(G, { "aria-expanded": c, "aria-haspopup": "dialog", "aria-labelledby": a ? `${j} ${j}-value` : void 0, className: y(o.trigger, (C == null ? void 0 : C.isPlaceholder) && o.placeholder), "data-open": c ? "true" : void 0, disabled: w.disabled, onClick: () => d((e) => !e), ref: A, style: ae, variant: "tertiary", children: /* @__PURE__ */ i("span", { className: o.text, id: `${j}-value`, children: J(C) }) }),
     c && /* @__PURE__ */ p("div", { className: o.panel, children: [
-      !r && /* @__PURE__ */ i(ye, { "aria-label": "Filter", className: o.filter, icon: "MagnifyingGlass", onChange: (e) => C(e.target.value), placeholder: B, ref: m, style: ce, type: "search", value: S }),
+      !r && /* @__PURE__ */ i(ye, { "aria-label": "Filter", className: o.filter, icon: "MagnifyingGlass", onChange: (e) => N(e.target.value), placeholder: L, ref: m, style: ce, type: "search", value: z }),
       /* @__PURE__ */ p(xe, { "aria-label": "Dropdown", className: o.options, children: [
         H.map((e) => {
-          const u = e.value === E;
-          return /* @__PURE__ */ i("li", { "data-component": "dropdown", children: /* @__PURE__ */ p(Q, { "aria-label": u ? `${e.text}, selected` : e.text, className: y(o.option, u && o.selected), disabled: e.disabled, onClick: () => pe(e.value), variant: "tertiary", children: [
+          const u = e.value === S;
+          return /* @__PURE__ */ i("li", { "data-component": "dropdown", children: /* @__PURE__ */ p(G, { "aria-label": u ? `${e.text}, selected` : e.text, className: y(o.option, u && o.selected), disabled: e.disabled, onClick: () => pe(e.value), variant: "tertiary", children: [
             /* @__PURE__ */ i("span", { className: o.text, children: J(e) }),
             e.groupLabel && /* @__PURE__ */ i("small", { className: o.group, children: e.groupLabel })
           ] }) }, `${e.groupLabel ?? "root"}-${e.value}`);
         }),
-        I && l && /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(Q, { "aria-label": $(l.render(v)) || v, className: o.option, onClick: X, variant: "tertiary", children: /* @__PURE__ */ i("span", { className: o.text, children: l.render(v) }) }) }),
-        H.length === 0 && !I && /* @__PURE__ */ i("li", { className: o.empty, children: n })
+        E && l && /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(G, { "aria-label": I(l.render(_)) || _, className: o.option, onClick: X, variant: "tertiary", children: /* @__PURE__ */ i("span", { className: o.text, children: l.render(_) }) }) }),
+        H.length === 0 && !E && /* @__PURE__ */ i("li", { className: o.empty, children: n })
       ] })
     ] })
   ] });
-  return a ? /* @__PURE__ */ p("div", { className: y(o.label, _ === "inline" && o["inline-field"]), "data-component": "dropdown", children: [
-    /* @__PURE__ */ i("span", { id: N, children: ue }),
+  return a ? /* @__PURE__ */ p("div", { className: y(o.label, g === "inline" && o["inline-field"]), "data-component": "dropdown", children: [
+    /* @__PURE__ */ i("span", { id: j, children: ue }),
     Y
   ] }) : Y;
 };