@solibo/solibo-ui 1.0.7 → 1.0.10

package/dist/components/dropdown/index.js

@@ -1,33 +1,33 @@
 import { jsxs as p, Fragment as pe, jsx as s } from "react/jsx-runtime";
-import { t as I } from "../../classix-DG18itHa.js";
-import fe, { Children as me, isValidElement as v, useRef as L, useId as ge, useState as Q, useEffect as z } from "react";
+import { t as V } from "../../classix-DG18itHa.js";
+import fe, { Children as me, isValidElement as w, useRef as I, useId as he, useState as Q, useEffect as z } from "react";
 import { Button as M } from "../button/index.js";
-import { i as he } from "../../icons-BFgf_lJN.js";
-import { f as _e, I as be } from "../../index-BHgGZxsR.js";
-import { List as xe } from "../list/index.js";
-import { S as ve, s as ye, r as ee } from "../../index-CMfR_USP.js";
-import '../../assets/index39.css';function $(t) {
-  return typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map($).join(" ") : v(t) ? $(t.props.children) : "";
+import { i as _e } from "../../icons-BFgf_lJN.js";
+import { f as ye, I as be } from "../../index-BHgGZxsR.js";
+import { List as ge } from "../list/index.js";
+import { S as we, s as ve, r as ee } from "../../index-C_YiNpZP.js";
+import '../../assets/index39.css';function L(t) {
+  return typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(L).join(" ") : w(t) ? L(t.props.children) : "";
 }
-function we(t) {
-  return v(t) && t.type === "option";
+function xe(t) {
+  return w(t) && t.type === "option";
+}
+function je(t) {
+  return w(t) && t.type === "optgroup";
 }
 function Se(t) {
-  return v(t) && t.type === "optgroup";
+  return w(t) && t.type === fe.Fragment;
 }
 function Ne(t) {
-  return v(t) && t.type === fe.Fragment;
-}
-function Ce(t) {
-  return v(t) && t.type === ve;
+  return w(t) && t.type === we;
 }
 function A(t, i, r = !1) {
   const l = [];
   return me.forEach(t, (n) => {
-    if (Ne(n))
+    if (Se(n))
       l.push(...A(n.props.children, i, r));
-    else if (we(n)) {
-      const a = $(n.props.children).trim(), f = n.props.value != null ? String(n.props.value) : a;
+    else if (xe(n)) {
+      const a = L(n.props.children).trim(), f = n.props.value != null ? String(n.props.value) : a;
       l.push({
         disabled: r || !!n.props.disabled,
         groupLabel: i,
@@ -38,28 +38,28 @@ function A(t, i, r = !1) {
         text: a,
         value: f
       });
-    } else Se(n) && l.push(...A(n.props.children, n.props.label, r || !!n.props.disabled));
+    } else je(n) && l.push(...A(n.props.children, n.props.label, r || !!n.props.disabled));
   }), l;
 }
-function Ee(t) {
+function Ce(t) {
   const i = t.trim();
   if (!i) return null;
   const l = [.../[*?]/.test(i) ? i : `*${i}*`].map((n) => n === "*" ? ".*" : n === "?" ? "." : n.replace(/[|\\{}()[\]^$+.,]/g, "\\$&")).join("");
   return new RegExp(`^${l}$`, "i");
 }
-function Ve(t, i) {
-  const r = Ee(i), l = t.filter((n) => !n.hidden && !n.isPlaceholder);
+function Ee(t, i) {
+  const r = Ce(i), 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 Ie(t, i) {
+function Ve(t, i) {
   return t.find((r) => r.value === i) ?? t.find((r) => r.isPlaceholder) ?? t[0];
 }
-function Le(t, i, r) {
+function Ie(t, i, r) {
   var l, n;
   return i != null ? String(i) : r != null ? String(r) : ((l = t.find((a) => a.selected)) == null ? void 0 : l.value) ?? ((n = t[0]) == null ? void 0 : n.value) ?? "";
 }
-function $e(t) {
-  if (Ce(t)) {
+function Le(t) {
+  if (Ne(t)) {
     const {
       children: i,
       placeholder: r,
@@ -78,14 +78,14 @@ function $e(t) {
     props: t.props
   };
 }
-const Be = "_combobox_1x1gr_3", ke = "_dropdown_1x1gr_27", De = "_empty_1x1gr_30", Pe = "_group_1x1gr_31", Re = "_placeholder_1x1gr_32", je = "_filter_1x1gr_40", Fe = "_native_1x1gr_52", We = "_option_1x1gr_62", Qe = "_options_1x1gr_84", ze = "_panel_1x1gr_108", Me = "_selected_1x1gr_132", Ae = "_text_1x1gr_136", Ge = "_trigger_1x1gr_145", Ke = "_minimal_1x1gr_164", Oe = "_inline_1x1gr_219", Te = "_label_1x1gr_251", o = {
-  combobox: Be,
-  "combobox-input": "_combobox-input_1x1gr_12",
-  dropdown: ke,
-  empty: De,
-  group: Pe,
-  placeholder: Re,
-  filter: je,
+const $e = "_combobox_18jwy_3", Be = "_dropdown_18jwy_27", ke = "_empty_18jwy_30", De = "_group_18jwy_31", Pe = "_placeholder_18jwy_32", Re = "_filter_18jwy_40", Fe = "_native_18jwy_52", We = "_option_18jwy_62", Qe = "_options_18jwy_84", ze = "_panel_18jwy_108", Me = "_selected_18jwy_132", Ae = "_text_18jwy_136", Ge = "_trigger_18jwy_145", Ke = "_minimal_18jwy_181", Oe = "_inline_18jwy_236", Te = "_label_18jwy_268", o = {
+  combobox: $e,
+  "combobox-input": "_combobox-input_18jwy_12",
+  dropdown: Be,
+  empty: ke,
+  group: De,
+  placeholder: Pe,
+  filter: Re,
   native: Fe,
   option: We,
   options: Qe,
@@ -96,11 +96,11 @@ const Be = "_combobox_1x1gr_3", ke = "_dropdown_1x1gr_27", De = "_empty_1x1gr_30
   minimal: Ke,
   inline: Oe,
   label: Te,
-  "inline-field": "_inline-field_1x1gr_257"
+  "inline-field": "_inline-field_18jwy_274"
 };
 function te(t, i) {
   return {
-    "--icon-svg": he(t).replace("currentColor", i)
+    "--icon-svg": _e(t).replace("currentColor", i)
   };
 }
 const tt = ({
@@ -111,32 +111,32 @@ const tt = ({
   emptyLabel: n = "No matches found",
   label: a,
   renderOption: f,
-  searchPlaceholder: B = "Filter",
+  searchPlaceholder: $ = "Filter",
   selectedItems: ne,
-  variant: _ = "default",
+  variant: y = "default",
   ...re
 }) => {
-  const k = $e(t), {
+  const B = Le(t), {
     defaultValue: le,
-    onChange: D,
-    value: P,
+    onChange: k,
+    value: D,
     ...oe
-  } = k.props, y = ye(oe), G = L(null), K = L(null), w = ge(), O = L(null), m = L(null), b = A(k.children), x = P != null, R = Le(b, P, le), [j, F] = Q(() => R), [c, d] = Q(!1), [S, N] = Q(""), C = x ? String(P) : j, T = {
+  } = B.props, v = ve(oe), G = I(null), K = I(null), x = he(), O = I(null), m = I(null), b = A(B.children), g = D != null, P = Ie(b, D, le), [R, F] = Q(() => P), [c, d] = Q(!1), [j, S] = Q(""), N = g ? String(D) : R, T = {
     default: ee("--colors-semantic-content-secondary"),
     white: ee("--color-white", "white")
-  }, q = _ === "minimal" ? T.white : T.default, E = Ie(b, C), ie = te("chevron", q), se = te("search", q), H = Ve(b, S), g = S.trim(), V = !!(r && l && g && l.isValid(g)), ae = a && _ === "inline" ? _e(a) : a, J = (e) => e ? (f == null ? void 0 : f({
+  }, q = y === "minimal" ? T.white : T.default, C = Ve(b, N), ie = te("chevron", q), se = te("search", q), H = Ee(b, j), h = j.trim(), E = !!(r && l && h && l.isValid(h)), ae = a && y === "inline" ? ye(a) : a, J = (e) => e ? (f == null ? void 0 : f({
     groupLabel: e.groupLabel,
-    isSelected: e.value === C,
+    isSelected: e.value === N,
     label: e.label,
     text: e.text,
     value: e.value
   })) ?? e.label : "Select an option";
   z(() => {
-    !x && !b.some((e) => e.value === j) && F(R);
-  }, [R, j, x, b]), z(() => {
+    !g && !b.some((e) => e.value === R) && F(P);
+  }, [P, R, g, b]), z(() => {
     var e;
     if (!c) {
-      N("");
+      S("");
       return;
     }
     (e = m.current) == null || e.focus();
@@ -144,65 +144,65 @@ const tt = ({
     if (!c)
       return;
     const e = (u) => {
-      var h;
-      (h = K.current) != null && h.contains(u.target) || d(!1);
+      var _;
+      (_ = K.current) != null && _.contains(u.target) || d(!1);
     };
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
   }, [c]);
   const ce = (e) => {
-    x || F(e.target.value), D == null || D(e);
+    g || F(e.target.value), k == null || k(e);
   }, W = () => {
     var e;
     d(!1), r || (e = G.current) == null || e.focus();
   }, U = () => {
     var e;
-    N(""), d(!0), (e = m.current) == null || e.focus();
+    S(""), d(!0), (e = m.current) == null || e.focus();
   }, X = () => {
-    !l || !V || (l.onCreate(g), U());
+    !l || !E || (l.onCreate(h), U());
   }, ue = (e) => {
     var Z;
-    x || F(e);
+    g || F(e);
     const u = O.current;
     if (!u) {
       W();
       return;
     }
-    const h = (Z = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : Z.set;
-    h == null || h.call(u, e), u.dispatchEvent(new Event("change", {
+    const _ = (Z = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : Z.set;
+    _ == null || _.call(u, e), u.dispatchEvent(new Event("change", {
       bubbles: !0
     })), r ? U() : W();
   }, de = (e) => {
-    e.key === "Escape" && W(), e.key === "Enter" && e.target === m.current && V && (e.preventDefault(), X());
-  }, Y = /* @__PURE__ */ p("div", { className: I(o.dropdown, _ === "inline" && o.inline, _ === "minimal" && o.minimal, i), onKeyDown: de, ref: K, ...re, children: [
-    /* @__PURE__ */ s("select", { ...y, "aria-hidden": "true", className: o.native, onChange: ce, ref: O, tabIndex: -1, value: C, children: k.children }),
+    e.key === "Escape" && W(), e.key === "Enter" && e.target === m.current && E && (e.preventDefault(), X());
+  }, Y = /* @__PURE__ */ p("div", { className: V(o.dropdown, y === "inline" && o.inline, y === "minimal" && o.minimal, i), onKeyDown: de, ref: K, ...re, children: [
+    /* @__PURE__ */ s("select", { ...v, "aria-hidden": "true", className: o.native, onChange: ce, ref: O, tabIndex: -1, value: N, children: B.children }),
     r ? /* @__PURE__ */ p("div", { className: o.combobox, onClick: () => {
       var e;
       return (e = m.current) == null ? void 0 : e.focus();
     }, children: [
       ne,
-      /* @__PURE__ */ s("input", { "aria-autocomplete": "list", "aria-expanded": c, "aria-label": y["aria-label"] ?? a ?? B, className: o["combobox-input"], disabled: y.disabled, onChange: (e) => {
-        N(e.target.value), d(!0);
-      }, onClick: () => d(!0), onFocus: () => d(!0), placeholder: B || void 0, ref: m, role: "combobox", type: "text", value: S })
-    ] }) : /* @__PURE__ */ s(M, { "aria-expanded": c, "aria-haspopup": "dialog", "aria-labelledby": a ? `${w} ${w}-value` : void 0, className: I(o.trigger, (E == null ? void 0 : E.isPlaceholder) && o.placeholder), "data-open": c ? "true" : void 0, disabled: y.disabled, onClick: () => d((e) => !e), ref: G, style: ie, variant: "tertiary", children: /* @__PURE__ */ s("span", { className: o.text, id: `${w}-value`, children: J(E) }) }),
+      /* @__PURE__ */ s("input", { "aria-autocomplete": "list", "aria-expanded": c, "aria-label": v["aria-label"] ?? a ?? $, className: o["combobox-input"], disabled: v.disabled, onChange: (e) => {
+        S(e.target.value), d(!0);
+      }, onClick: () => d(!0), onFocus: () => d(!0), placeholder: $ || void 0, ref: m, role: "combobox", type: "text", value: j })
+    ] }) : /* @__PURE__ */ s(M, { "aria-expanded": c, "aria-haspopup": "dialog", "aria-labelledby": a ? `${x} ${x}-value` : void 0, className: V(o.trigger, (C == null ? void 0 : C.isPlaceholder) && o.placeholder), "data-open": c ? "true" : void 0, disabled: v.disabled, onClick: () => d((e) => !e), ref: G, style: ie, variant: "tertiary", children: /* @__PURE__ */ s("span", { className: o.text, id: `${x}-value`, children: J(C) }) }),
     c && /* @__PURE__ */ p("div", { className: o.panel, children: [
-      !r && /* @__PURE__ */ s(be, { "aria-label": "Filter", className: o.filter, icon: "search", onChange: (e) => N(e.target.value), placeholder: B, ref: m, style: se, type: "search", value: S }),
-      /* @__PURE__ */ p(xe, { "aria-label": "Dropdown", className: o.options, children: [
+      !r && /* @__PURE__ */ s(be, { "aria-label": "Filter", className: o.filter, icon: "search", onChange: (e) => S(e.target.value), placeholder: $, ref: m, style: se, type: "search", value: j }),
+      /* @__PURE__ */ p(ge, { "aria-label": "Dropdown", className: o.options, children: [
         H.map((e) => {
-          const u = e.value === C;
-          return /* @__PURE__ */ s("li", { "data-component": "dropdown", children: /* @__PURE__ */ p(M, { "aria-label": u ? `${e.text}, selected` : e.text, className: I(o.option, u && o.selected), disabled: e.disabled, onClick: () => ue(e.value), variant: "tertiary", children: [
+          const u = e.value === N;
+          return /* @__PURE__ */ s("li", { "data-component": "dropdown", children: /* @__PURE__ */ p(M, { "aria-label": u ? `${e.text}, selected` : e.text, className: V(o.option, u && o.selected), disabled: e.disabled, onClick: () => ue(e.value), variant: "tertiary", children: [
             /* @__PURE__ */ s("span", { className: o.text, children: J(e) }),
             e.groupLabel && /* @__PURE__ */ s("small", { className: o.group, children: e.groupLabel })
           ] }) }, `${e.groupLabel ?? "root"}-${e.value}`);
         }),
-        V && l && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(M, { "aria-label": $(l.render(g)) || g, className: o.option, onClick: X, variant: "tertiary", children: /* @__PURE__ */ s("span", { className: o.text, children: l.render(g) }) }) }),
-        H.length === 0 && !V && /* @__PURE__ */ s("li", { className: o.empty, children: n })
+        E && l && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(M, { "aria-label": L(l.render(h)) || h, className: o.option, onClick: X, variant: "tertiary", children: /* @__PURE__ */ s("span", { className: o.text, children: l.render(h) }) }) }),
+        H.length === 0 && !E && /* @__PURE__ */ s("li", { className: o.empty, children: n })
       ] })
     ] })
   ] });
-  return a ? /* @__PURE__ */ p("div", { className: I(o.label, _ === "inline" && o["inline-field"]), "data-component": "dropdown", children: [
-    /* @__PURE__ */ s("span", { id: w, children: ae }),
+  return a ? /* @__PURE__ */ p("div", { className: V(o.label, y === "inline" && o["inline-field"]), "data-component": "dropdown", children: [
+    /* @__PURE__ */ s("span", { id: x, children: ae }),
     Y
   ] }) : Y;
 };