@caspeco/casper-ui-library 4.0.0 → 4.0.1

package/dist/components/combobox/combobox-button.js

@@ -1,12 +1,12 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { useStyleConfig as A, Flex as u, Box as c, Input as E } from "@chakra-ui/react";
-import { Fragment as F } from "react";
-import { ComboboxItem as s } from "./combobox-item.js";
-import { Tag as L } from "../tag/tag.js";
-import { Icon as N } from "../icon/icon.js";
-import { Icons as X } from "../icon/types.js";
-import { ThemeColorVariable as n, ThemeSpaceVariable as d, ThemeRadiusVariable as K, ThemeIconSizeVariable as T } from "../../theme/theme-types.js";
-function O() {
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { useStyleConfig as z, Flex as p, Box as c, Input as A } from "@chakra-ui/react";
+import { Fragment as E } from "react";
+import { ComboboxItem as S } from "./combobox-item.js";
+import { Tag as F } from "../tag/tag.js";
+import { Icon as L } from "../icon/icon.js";
+import { Icons as N } from "../icon/types.js";
+import { ThemeColorVariable as n, ThemeSpaceVariable as u, ThemeRadiusVariable as X, ThemeIconSizeVariable as K } from "../../theme/theme-types.js";
+function k() {
   return /* @__PURE__ */ i(
     c,
     {
@@ -26,48 +26,47 @@ function O() {
     }
   );
 }
-function Y({
-  id: y,
-  asPlainText: a,
-  inputValue: b,
+function Q({
+  id: s,
+  asPlainText: e,
+  inputValue: d,
   selectedItems: r,
-  displayItems: S,
-  toggleItem: g,
-  highlightState: f,
-  openState: l,
-  parentStrings: _,
-  size: D,
-  variant: j,
-  label: w,
-  placeHolderText: B,
-  isDisabled: m,
+  displayItems: O,
+  toggleItem: m,
+  highlightState: l,
+  openState: a,
+  parentStrings: y,
+  size: _,
+  variant: D,
+  label: g,
+  placeHolderText: j,
+  isDisabled: b,
   isReadOnly: h,
-  isInvalid: R,
-  collapsed: x,
-  setInputValue: C,
-  onSearch: e,
-  isSingleSelect: V
+  isInvalid: B,
+  collapsed: w,
+  setInputValue: x,
+  onSearch: C,
+  isSingleSelect: R
 }) {
-  var t;
-  const W = A("Combobox", { size: D, variant: j }), v = (o) => {
-    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), l.isOpen ? g(S[f.index]) : l.open()), o.key === "Escape") {
-      if (!l.isOpen) return;
-      o.preventDefault(), o.stopPropagation(), l.close(), a || (C(""), e == null || e(""));
+  const V = z("Combobox", { size: _, variant: D }), W = (o) => {
+    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? m(O[l.index]) : a.open()), o.key === "Escape") {
+      if (!a.isOpen) return;
+      o.preventDefault(), o.stopPropagation(), a.close(), e || (x(""), C?.(""));
     }
-    o.key === "Backspace" && b.length === 0 && r.length > 0 && !a && g(r[r.length - 1]), o.key === "ArrowDown" && (l.isOpen ? f.next() : l.open()), o.key === "ArrowUp" && (l.isOpen ? f.previous() : l.open());
-  }, z = (o) => {
+    o.key === "Backspace" && d.length === 0 && r.length > 0 && !e && m(r[r.length - 1]), o.key === "ArrowDown" && (a.isOpen ? l.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? l.previous() : a.open());
+  }, v = (o) => {
     o.preventDefault(), o.stopPropagation();
-    const k = o.target.value;
-    C(k), e == null || e(k), f.set(0), l.open();
+    const t = o.target.value;
+    x(t), C?.(t), l.set(0), a.open();
   };
-  return /* @__PURE__ */ p(
-    u,
+  return /* @__PURE__ */ f(
+    p,
     {
-      __css: W,
-      "aria-disabled": m,
+      __css: V,
+      "aria-disabled": b,
       "aria-readonly": h,
-      borderRadius: K.Small,
-      padding: d.Small,
+      borderRadius: X.Small,
+      padding: u.Small,
       _focusWithin: {
         borderColor: n.Info,
         boxShadow: `0 0 0 4px ${n.InfoContainer}`,
@@ -78,31 +77,31 @@ function Y({
         backgroundColor: n.SurfaceDisabled
       },
       children: [
-        /* @__PURE__ */ p(
-          u,
+        /* @__PURE__ */ f(
+          p,
           {
-            flexWrap: x || V ? "nowrap" : "wrap",
-            gap: d.Small,
+            flexWrap: w || R ? "nowrap" : "wrap",
+            gap: u.Small,
             overflow: "hidden",
             children: [
-              w && /* @__PURE__ */ i(c, { whiteSpace: "nowrap", children: w }),
-              !a && (x ? r.length > 0 && /* @__PURE__ */ p(
-                u,
+              g && /* @__PURE__ */ i(c, { whiteSpace: "nowrap", children: g }),
+              !e && (w ? r.length > 0 && /* @__PURE__ */ f(
+                p,
                 {
-                  gap: d.XSmall,
+                  gap: u.XSmall,
                   flexShrink: "1",
                   overflow: "hidden",
                   whiteSpace: "nowrap",
                   textOverflow: "ellipsis",
                   children: [
-                    r.length > 3 && /* @__PURE__ */ i(O, {}),
-                    r.length > 2 && /* @__PURE__ */ i(O, {}),
-                    r.length > 1 && /* @__PURE__ */ i(L, { children: r.length - 1 }),
-                    /* @__PURE__ */ i(s, { item: r[r.length - 1], asPlainText: a })
+                    r.length > 3 && /* @__PURE__ */ i(k, {}),
+                    r.length > 2 && /* @__PURE__ */ i(k, {}),
+                    r.length > 1 && /* @__PURE__ */ i(F, { children: r.length - 1 }),
+                    /* @__PURE__ */ i(S, { item: r[r.length - 1], asPlainText: e })
                   ]
                 }
-              ) : r.map((o) => /* @__PURE__ */ i(s, { item: o, asPlainText: a }, o.id))),
-              a && r.length > 0 && b === r[0].label && ((t = _[r[0].id]) == null ? void 0 : t.map((o) => /* @__PURE__ */ p(F, { children: [
+              ) : r.map((o) => /* @__PURE__ */ i(S, { item: o, asPlainText: e }, o.id))),
+              e && r.length > 0 && d === r[0].label && y[r[0].id]?.map((o) => /* @__PURE__ */ f(E, { children: [
                 /* @__PURE__ */ i(
                   c,
                   {
@@ -114,21 +113,21 @@ function Y({
                   }
                 ),
                 /* @__PURE__ */ i(c, { color: n.OnSurfaceSubdued, children: "/" })
-              ] }, o))),
+              ] }, o)),
               /* @__PURE__ */ i(
-                E,
+                A,
                 {
-                  id: y,
-                  isDisabled: m,
+                  id: s,
+                  isDisabled: b,
                   isReadOnly: h,
-                  isInvalid: R,
-                  onKeyDown: v,
+                  isInvalid: B,
+                  onKeyDown: W,
                   variant: "unstyled",
-                  value: b,
+                  value: d,
                   autoComplete: "off",
-                  minWidth: d.XLarge,
-                  onChange: z,
-                  placeholder: B,
+                  minWidth: u.XLarge,
+                  onChange: v,
+                  placeholder: j,
                   border: "none",
                   flex: 1,
                   color: n.OnSurface,
@@ -145,12 +144,12 @@ function Y({
             ]
           }
         ),
-        /* @__PURE__ */ i(u, { className: "combobox-dropdown-icon", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ i(
-          N,
+        /* @__PURE__ */ i(p, { className: "combobox-dropdown-icon", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ i(
+          L,
           {
-            icon: X.TreeViewCollapse,
-            size: T.Small,
-            color: m || h ? n.OnSurfaceSubdued : n.OnSurface
+            icon: N.TreeViewCollapse,
+            size: K.Small,
+            color: b || h ? n.OnSurfaceSubdued : n.OnSurface
           }
         ) })
       ]
@@ -158,5 +157,5 @@ function Y({
   );
 }
 export {
-  Y as ComboboxButton
+  Q as ComboboxButton
 };

package/dist/components/combobox/combobox-menu.js

@@ -1,26 +1,26 @@
-import { jsxs as l, jsx as i, Fragment as K } from "react/jsx-runtime";
+import { jsxs as l, jsx as i, Fragment as G } from "react/jsx-runtime";
 import { Box as d, Flex as g } from "@chakra-ui/react";
-import { autoUpdate as L, computePosition as N, flip as Q } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { Fragment as D, useState as Z, useEffect as R } from "react";
-import { ComboboxItem as oo } from "./combobox-item.js";
-import { interpolate as ro } from "./translations.js";
-import { ThemeColorVariable as o, ThemeShadowVariable as no, ThemeRadiusVariable as X, ThemeSpaceVariable as t, ThemeIconSizeVariable as P, ThemeFontSizeVariable as eo, ThemeBorderVariable as to } from "../../theme/theme-types.js";
-import { Text as I } from "../text/text.js";
-import { Icon as B } from "../icon/icon.js";
-import { Icons as C } from "../icon/types.js";
-const io = (n, e, u, a, b) => {
-  const [m, s] = Z({
+import { autoUpdate as J, computePosition as K, flip as L } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { Fragment as F, useState as N, useEffect as Q } from "react";
+import { ComboboxItem as Z } from "./combobox-item.js";
+import { interpolate as R } from "./translations.js";
+import { ThemeColorVariable as o, ThemeShadowVariable as oo, ThemeRadiusVariable as V, ThemeSpaceVariable as t, ThemeIconSizeVariable as $, ThemeFontSizeVariable as ro, ThemeBorderVariable as no } from "../../theme/theme-types.js";
+import { Text as z } from "../text/text.js";
+import { Icon as P } from "../icon/icon.js";
+import { Icons as B } from "../icon/types.js";
+const eo = (n, e, u, a, b) => {
+  const [m, s] = N({
     transform: "translate(0, 0)",
     minWidth: 0
   });
-  return R(() => {
+  return Q(() => {
     if (!n.current || !e.current || !u) return () => {
     };
     const S = async () => {
       if (n.current && e.current && u) {
-        const { width: p } = n.current.getBoundingClientRect(), { x: h, y: x } = await N(n.current, e.current, {
+        const { width: p } = n.current.getBoundingClientRect(), { x: h, y: x } = await K(n.current, e.current, {
           placement: b || "bottom-start",
-          middleware: [Q()]
+          middleware: [L()]
         });
         s({
           transform: `translate(${h}px, ${x}px)`,
@@ -28,10 +28,10 @@ const io = (n, e, u, a, b) => {
         });
       }
     };
-    return L(n.current, e.current, S);
+    return J(n.current, e.current, S);
   }, [n, e, u, b, a]), m;
 };
-function ao({
+function to({
   isSingleSelect: n,
   isChecked: e
 }) {
@@ -44,21 +44,21 @@ function ao({
       flexShrink: "0",
       border: `${n && e ? 8 : 2}px solid ${e ? o.Primary : o.OnBackground}`,
       backgroundColor: e && !n ? o.Primary : "auto",
-      borderRadius: n ? "50%" : X.Small,
+      borderRadius: n ? "50%" : V.Small,
       children: !n && e && /* @__PURE__ */ i(
-        B,
+        P,
         {
           top: "-2px",
           position: "absolute",
-          width: P.Small,
+          width: $.Small,
           color: o.Surface,
-          icon: C.Checkbox
+          icon: B.Checkbox
         }
       )
     }
   );
 }
-function So({
+function fo({
   asPlainText: n,
   inputValue: e,
   selectedItems: u,
@@ -70,23 +70,23 @@ function So({
   isSingleSelect: p,
   isSearching: h,
   isReadOnly: x,
-  isHidingItems: j,
-  popoverWidth: H,
-  popoverPlacement: A,
+  isHidingItems: D,
+  popoverWidth: I,
+  popoverPlacement: X,
   previousSelectedItems: k,
-  parentRef: E,
-  popupRef: O,
-  footerContent: v,
-  subMenuState: M,
-  translation: T
+  parentRef: j,
+  popupRef: C,
+  footerContent: O,
+  subMenuState: v,
+  translation: M
 }) {
-  const U = io(
-    E,
-    O,
+  const H = eo(
+    j,
+    C,
     s.isOpen,
-    H,
-    A
-  ), W = (r) => {
+    I,
+    X
+  ), A = (r) => {
     m.set(r);
   };
   return /* @__PURE__ */ l(
@@ -98,12 +98,12 @@ function So({
       zIndex: "50",
       visibility: "visible",
       backgroundColor: o.Surface,
-      borderRadius: X.Medium,
-      boxShadow: no.Medium,
+      borderRadius: V.Medium,
+      boxShadow: oo.Medium,
       color: o.OnSurface,
       overflow: "hidden",
-      style: U,
-      ref: O,
+      style: H,
+      ref: C,
       onClick: (r) => {
         r.preventDefault(), r.stopPropagation(), p && s.close();
       },
@@ -119,38 +119,37 @@ function So({
             padding: `${t.Small} 0`,
             children: [
               h && a.length === 0 && e.length > 0 && /* @__PURE__ */ i(
-                I,
+                z,
                 {
                   px: t.Small,
                   color: o.OnSurfaceSubdued,
-                  children: `${T.noMatchFor} "${e}"`
+                  children: `${M.noMatchFor} "${e}"`
                 }
               ),
               a.map((r, f) => {
-                var z, V;
-                const y = u.some((c) => c.id === r.id), Y = (c) => {
+                const T = u.some((c) => c.id === r.id), E = (c) => {
                   c.stopPropagation(), c.preventDefault(), b(r);
-                }, _ = (z = r.children) == null ? void 0 : z.length, w = r.id === "_back", $ = M.opened[M.opened.length - 1], F = r.id === ($ == null ? void 0 : $.id), q = w ? /* @__PURE__ */ l(g, { gap: t.XSmall, alignItems: "center", children: [
-                  /* @__PURE__ */ i(B, { icon: C.Back, size: P.Small }),
+                }, U = r.children?.length, w = r.id === "_back", W = v.opened[v.opened.length - 1], y = r.id === W?.id, Y = w ? /* @__PURE__ */ l(g, { gap: t.XSmall, alignItems: "center", children: [
+                  /* @__PURE__ */ i(P, { icon: B.Back, size: $.Small }),
                   r.label
-                ] }) : /* @__PURE__ */ l(K, { children: [
+                ] }) : /* @__PURE__ */ l(G, { children: [
                   /* @__PURE__ */ l(g, { gap: t.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
-                    (V = S[r.id]) == null ? void 0 : V.map((c) => /* @__PURE__ */ l(D, { children: [
+                    S[r.id]?.map((c) => /* @__PURE__ */ l(F, { children: [
                       /* @__PURE__ */ i(d, { color: o.OnSurfaceSubdued, children: c }),
                       /* @__PURE__ */ i(d, { color: o.OnSurfaceSubdued, children: "/" })
                     ] }, c)),
-                    /* @__PURE__ */ i(oo, { item: r, asPlainText: n })
+                    /* @__PURE__ */ i(Z, { item: r, asPlainText: n })
                   ] }),
-                  x ? void 0 : _ && !F && !h ? /* @__PURE__ */ i(
-                    B,
+                  x ? void 0 : U && !y && !h ? /* @__PURE__ */ i(
+                    P,
                     {
-                      icon: C.Forward,
-                      size: P.Small,
+                      icon: B.Forward,
+                      size: $.Small,
                       color: o.OnBackgroundSubdued
                     }
-                  ) : /* @__PURE__ */ i(ao, { isSingleSelect: p, isChecked: y })
-                ] }), G = k.length > 0 && k.length - 1 === f && k.length < a.length, J = !x && !h && (G || (w || F));
-                return /* @__PURE__ */ l(D, { children: [
+                  ) : /* @__PURE__ */ i(to, { isSingleSelect: p, isChecked: T })
+                ] }), _ = k.length > 0 && k.length - 1 === f && k.length < a.length, q = !x && !h && (_ || (w || y));
+                return /* @__PURE__ */ l(F, { children: [
                   /* @__PURE__ */ i(
                     g,
                     {
@@ -162,15 +161,15 @@ function So({
                       gap: t.Medium,
                       textDecoration: "none",
                       backgroundColor: m.index === f ? o.AccentHoverAlpha : "",
-                      onClick: Y,
+                      onClick: E,
                       tabIndex: -1,
-                      onMouseEnter: () => W(f),
+                      onMouseEnter: () => A(f),
                       "data-is-active-index": m.index === f,
-                      "aria-selected": y,
-                      children: q
+                      "aria-selected": T,
+                      children: Y
                     }
                   ),
-                  J && /* @__PURE__ */ i(
+                  q && /* @__PURE__ */ i(
                     d,
                     {
                       margin: `${t.Small} ${w ? 0 : t.Medium}`,
@@ -181,14 +180,14 @@ function So({
                   )
                 ] }, r.id);
               }),
-              j && /* @__PURE__ */ i(
-                I,
+              D && /* @__PURE__ */ i(
+                z,
                 {
                   px: t.Small,
                   py: t.Small,
                   color: o.OnSurfaceSubdued,
-                  fontSize: eo.Small,
-                  children: ro(T.showMaxItems, {
+                  fontSize: ro.Small,
+                  children: R(M.showMaxItems, {
                     count: a.length
                   })
                 }
@@ -196,15 +195,15 @@ function So({
             ]
           }
         ),
-        v && /* @__PURE__ */ i(
+        O && /* @__PURE__ */ i(
           d,
           {
             position: "sticky",
             bottom: "0",
             backgroundColor: o.Surface,
             padding: `${t.Small} ${t.Medium}`,
-            borderTop: `${to.XSmall} ${o.OnSurfaceBorder}`,
-            children: v
+            borderTop: `${no.XSmall} ${o.OnSurfaceBorder}`,
+            children: O
           }
         )
       ]
@@ -212,6 +211,6 @@ function So({
   );
 }
 export {
-  ao as CheckboxOrRadioButton,
-  So as ComboboxMenu
+  to as CheckboxOrRadioButton,
+  fo as ComboboxMenu
 };