@caspeco/casper-ui-library 4.0.0 → 4.0.1

package/dist/components/combobox/combobox.js

@@ -1,15 +1,14 @@
-import { jsxs as te, jsx as U } from "react/jsx-runtime";
-import { Box as re } from "@chakra-ui/react";
-import { useState as b, useRef as W, useEffect as P, useMemo as z } from "react";
-import { ComboboxButton as oe } from "./combobox-button.js";
-import { ComboboxMenu as le } from "./combobox-menu.js";
-import { translations as ie } from "./translations.js";
-const ce = (o, s) => {
-  const [n, e] = b(0), c = (l) => {
-    var p;
+import { jsxs as T, jsx as F } from "react/jsx-runtime";
+import { Box as D } from "@chakra-ui/react";
+import { useState as g, useRef as V, useEffect as M, useMemo as _ } from "react";
+import { ComboboxButton as ee } from "./combobox-button.js";
+import { ComboboxMenu as ne } from "./combobox-menu.js";
+import { translations as te } from "./translations.js";
+const re = (o, s) => {
+  const [n, e] = g(0), c = (l) => {
     if (!s.current) return;
-    const S = [...s.current.querySelectorAll("li")];
-    S[l] && ((p = S[l]) == null || p.scrollIntoView({
+    const b = [...s.current.querySelectorAll("li")];
+    b[l] && (b[l]?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     }), e(l));
@@ -20,147 +19,143 @@ const ce = (o, s) => {
     next: () => c((n + 1) % o.length),
     previous: () => c((n - 1 + o.length) % o.length)
   };
-}, se = (o, s, n, e) => {
-  const [c, r] = b(!1);
-  return P(() => {
-    e && r(!1);
-  }, [e, r]), { isOpen: c, close: () => {
-    s || n(""), r(!1);
+}, oe = (o, s, n, e) => {
+  const [c, t] = g(!1);
+  return M(() => {
+    e && t(!1);
+  }, [e, t]), { isOpen: c, close: () => {
+    s || n(""), t(!1);
   }, open: () => {
-    c || e || (r(!0), o.set(0));
+    c || e || (t(!0), o.set(0));
   } };
-}, ae = (o, s) => {
-  const [n, e] = b([]), c = z(() => {
+}, le = (o, s) => {
+  const [n, e] = g([]), c = _(() => {
     if (!n.length) return o;
-    const r = n[n.length - 1], f = {
+    const t = n[n.length - 1], h = {
       id: "_back",
       label: s.back
     }, l = n[n.length - 1].children || [];
-    return r.isSelectableParent ? [f, r, ...l] : [f, ...l];
+    return t.isSelectableParent ? [h, t, ...l] : [h, ...l];
   }, [n, o, s]);
   return {
-    open: (r) => {
-      e((f) => [...f, r]);
+    open: (t) => {
+      e((h) => [...h, t]);
     },
     back: () => {
-      n.length && e((r) => [...r.slice(0, n.length - 1)]);
+      n.length && e((t) => [...t.slice(0, n.length - 1)]);
     },
     opened: n,
     current: c
   };
-}, ue = (o) => z(() => {
+}, ie = (o) => _(() => {
   const s = {};
   function n(e, c) {
-    s[e.id] = [...c], e.children && e.children.forEach((r) => n(r, [...c, e.label]));
+    s[e.id] = [...c], e.children && e.children.forEach((t) => n(t, [...c, e.label]));
   }
   return o.forEach((e) => n(e, [])), s;
 }, [o]);
-function xe({
+function pe({
   id: o,
   label: s = "",
   isSingleSelect: n = !1,
   selectedItems: e = [],
   locale: c = "en-US",
-  size: r = "md",
-  variant: f = "outline",
+  size: t = "md",
+  variant: h = "outline",
   asPlainText: l = !1,
-  onSearch: S,
-  items: p,
-  maxVisibleItems: B,
-  onChange: j,
-  onBlur: y,
-  isDisabled: x,
-  isReadOnly: v,
-  isRequired: G,
-  placeholder: J,
-  isInvalid: A,
-  footerContent: K,
-  popoverWidth: Q,
-  popoverPlacement: X,
-  collapsed: Y = !1,
-  ...Z
+  onSearch: b,
+  items: I,
+  maxVisibleItems: L,
+  onChange: N,
+  onBlur: P,
+  isDisabled: S,
+  isReadOnly: x,
+  isRequired: m,
+  placeholder: U,
+  isInvalid: B,
+  footerContent: W,
+  popoverWidth: z,
+  popoverPlacement: G,
+  collapsed: J = !1,
+  ...K
 }) {
-  var _;
-  const [C, g] = b(""), k = ie[c], w = W(null), O = W(null), d = ae(p, k), $ = C.toLowerCase() === ((_ = e[0]) == null ? void 0 : _.label.toLowerCase()), H = C.length > 0 && !(l && $);
-  let u = d.current;
-  if (H) {
-    const t = [], h = (i) => {
-      t.push(i), i.children && i.children.forEach(h);
+  const [v, p] = g(""), k = te[c], w = V(null), O = V(null), f = le(I, k), Q = v.toLowerCase() === e[0]?.label.toLowerCase(), C = v.length > 0 && !(l && Q);
+  let u = f.current;
+  if (C) {
+    const r = [], d = (i) => {
+      r.push(i), i.children && i.children.forEach(d);
     };
-    p.forEach(h), u = t.filter((i) => {
-      const I = i.label.toLowerCase().includes(C.toLowerCase());
-      return (!(i.children && i.children.length > 0) || i.isSelectableParent) && I;
+    I.forEach(d), u = r.filter((i) => {
+      const A = i.label.toLowerCase().includes(v.toLowerCase());
+      return (!(i.children && i.children.length > 0) || i.isSelectableParent) && A;
     });
   }
-  const E = ce(u, O), a = se(E, l, g, x);
-  P(() => {
-    var t;
-    l && !a.isOpen && g(((t = e[0]) == null ? void 0 : t.label) || "");
+  const E = re(u, O), a = oe(E, l, p, S);
+  M(() => {
+    l && !a.isOpen && p(e[0]?.label || "");
   }, [a.isOpen, e, l]);
-  const [q, R] = b([]);
-  P(() => {
-    !a.isOpen || n || R(e);
-  }, [a.isOpen]), H || (u = [
+  const [q, X] = g([]);
+  M(() => {
+    !a.isOpen || n || X(e);
+  }, [a.isOpen]), C || (u = [
     ...q,
-    ...u.filter((t) => !q.find((h) => h.label === t.label))
+    ...u.filter((r) => !q.find((d) => d.label === r.label))
   ]);
-  let F = !1;
-  v ? u = e : (F = u.length > (B ?? 1 / 0), u = u.slice(0, B));
-  const T = ue(p), D = (t) => {
-    var I, M, L, m;
-    if (v || x)
+  let j = !1;
+  x ? u = e : (j = u.length > (L ?? 1 / 0), u = u.slice(0, L));
+  const Y = ie(I), Z = (r) => {
+    if (x || S)
       return;
-    if (t.id === "_back") {
-      d.back();
+    if (r.id === "_back") {
+      f.back();
       return;
     }
-    (L = (M = (I = O.current) == null ? void 0 : I.parentNode) == null ? void 0 : M.querySelector("input")) == null || L.focus();
-    const h = d.opened.length > 0 && d.opened[d.opened.length - 1].id === t.id;
-    if (!H && !h && t.children && t.children.length > 0) {
-      d.open(t), requestAnimationFrame(() => E.set(1));
+    O.current?.parentNode?.querySelector("input")?.focus();
+    const d = f.opened.length > 0 && f.opened[f.opened.length - 1].id === r.id;
+    if (!C && !d && r.children && r.children.length > 0) {
+      f.open(r), requestAnimationFrame(() => E.set(1));
       return;
     }
-    let i = [t];
-    n || (e.some((N) => N.id === t.id) ? i = e.filter((N) => N.id !== t.id) : i = [...e, t]), g(l ? (m = i[0]) == null ? void 0 : m.label : ""), n && (i.length === 0 ? a.open() : a.close()), j && j(i);
-  }, ee = e.length === 0 ? J ?? k.search : void 0, ne = (t) => {
-    var h;
-    (h = w.current) != null && h.contains(t.relatedTarget) || (a.close(), y && y(e));
-  }, V = {
+    let i = [r];
+    n || (e.some((H) => H.id === r.id) ? i = e.filter((H) => H.id !== r.id) : i = [...e, r]), p(l ? i[0]?.label : ""), n && (i.length === 0 ? a.open() : a.close()), N && N(i);
+  }, $ = e.length === 0 ? U ?? k.search : void 0, R = (r) => {
+    w.current?.contains(r.relatedTarget) || (a.close(), P && P(e));
+  }, y = {
     id: o,
     asPlainText: l,
-    inputValue: C,
+    inputValue: v,
     selectedItems: e,
     displayItems: u,
-    toggleItem: D,
+    toggleItem: Z,
     highlightState: E,
     openState: a,
-    parentStrings: T,
+    parentStrings: Y,
     // Button
-    size: r,
-    variant: f,
+    size: t,
+    variant: h,
     label: s,
-    placeHolderText: ee,
-    isDisabled: x,
-    isReadOnly: v,
-    isInvalid: A,
-    collapsed: Y,
-    setInputValue: g,
-    onSearch: S,
+    placeHolderText: $,
+    isDisabled: S,
+    isReadOnly: x,
+    isInvalid: B,
+    collapsed: J,
+    setInputValue: p,
+    onSearch: b,
     // Menu
     isSingleSelect: n,
-    isSearching: H,
-    isHidingItems: F,
-    popoverWidth: Q,
-    popoverPlacement: X,
+    isSearching: C,
+    isHidingItems: j,
+    popoverWidth: z,
+    popoverPlacement: G,
     previousSelectedItems: q,
     parentRef: w,
     popupRef: O,
-    footerContent: K,
-    subMenuState: d,
+    footerContent: W,
+    subMenuState: f,
     translation: k
   };
-  return /* @__PURE__ */ te(
-    re,
+  return /* @__PURE__ */ T(
+    D,
     {
       role: "combobox",
       as: "label",
@@ -168,22 +163,22 @@ function xe({
       className: "combobox",
       ref: w,
       onClick: a.open,
-      onBlur: ne,
+      onBlur: R,
       overflow: "visible",
       width: "100%",
       "aria-expanded": a.isOpen,
-      "aria-invalid": A,
-      "aria-required": G,
-      "aria-disabled": x,
-      "aria-readonly": v,
-      ...Z,
+      "aria-invalid": B,
+      "aria-required": m,
+      "aria-disabled": S,
+      "aria-readonly": x,
+      ...K,
       children: [
-        /* @__PURE__ */ U(oe, { ...V }),
-        a.isOpen && /* @__PURE__ */ U(le, { ...V })
+        /* @__PURE__ */ F(ee, { ...y }),
+        a.isOpen && /* @__PURE__ */ F(ne, { ...y })
       ]
     }
   );
 }
 export {
-  xe as Combobox
+  pe as Combobox
 };