@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

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

@@ -1,47 +1,45 @@
-import { jsxs as g, jsx as n, Fragment as _ } from "react/jsx-runtime";
-import { Box as C, Flex as y } from "@chakra-ui/react";
-import { autoUpdate as G, computePosition as Q, flip as U } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { useState as Y, useEffect as q, Fragment as T } from "react";
-import { ComboboxItem as H } from "./combobox-item.js";
-import { interpolate as J } from "./translations.js";
-import { ThemeColorVariable as d, ThemeShadowVariable as K, ThemeRadiusVariable as Z, ThemeSpaceVariable as c, ThemeFontSizeVariable as R, ThemeBorderVariable as N, ThemeIconSizeVariable as F } from "../../theme/theme-types.js";
+import { jsxs as g, jsx as r, Fragment as E } from "react/jsx-runtime";
+import { Box as v, Flex as y } from "@chakra-ui/react";
+import { autoUpdate as L, computePosition as G, flip as _ } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { useState as Q, useEffect as U, Fragment as T } from "react";
+import { ComboboxItem as z } from "./combobox-item.js";
+import { interpolate as Y } from "./translations.js";
+import { ThemeColorVariable as d, ThemeShadowVariable as q, ThemeRadiusVariable as J, ThemeSpaceVariable as c, ThemeFontSizeVariable as K, ThemeBorderVariable as Z, ThemeIconSizeVariable as F } from "../../theme/theme-types.js";
 import { Text as V } from "../text/text.js";
-import { Icon as z } from "../icon/icon.js";
-import { Icons as D } from "../icon/types.js";
-import { Checkbox as W } from "../checkbox/checkbox.js";
-import { Radio as ee } from "../radio/radio.js";
-const ne = (o, t, s, h, a) => {
-  const [b, x] = Y({
+import { BackIcon as R } from "../icon/icons/back-icon.js";
+import { ForwardIcon as N } from "../icon/icons/forward-icon.js";
+import { Checkbox as D } from "../checkbox/checkbox.js";
+import { RadioGroup as ee } from "../radio/radio-group.js";
+import { Radio as re } from "../radio/radio.js";
+const ne = (n, t, s, h, a) => {
+  const [b, x] = Q({
     transform: "translate(0, 0)",
     minWidth: 0
   });
-  return q(() => {
-    if (!o.current || !t.current || !s) return () => {
+  return U(() => {
+    if (!n.current || !t.current || !s) return () => {
     };
     const k = async () => {
-      if (o.current && t.current && s) {
-        const { width: S } = o.current.getBoundingClientRect(), { x: P, y: u } = await Q(o.current, t.current, {
+      if (n.current && t.current && s) {
+        const { width: p } = n.current.getBoundingClientRect(), { x: P, y: u } = await G(n.current, t.current, {
           placement: a || "bottom-start",
-          middleware: [U()]
+          middleware: [_()]
         });
         x({
           transform: `translate(${P}px, ${u}px)`,
-          minWidth: h || S
+          minWidth: h || p
         });
       }
     }, w = () => {
       k().catch(console.error);
     };
-    return G(o.current, t.current, w);
-  }, [o, t, s, a, h]), b;
+    return L(n.current, t.current, w);
+  }, [n, t, s, a, h]), b;
 };
-function X({
-  isSingleSelect: o,
-  isChecked: t
-}) {
-  return o ? /* @__PURE__ */ n(ee, { isChecked: t }) : /* @__PURE__ */ n(W, { isChecked: t });
+function H({ isSingleSelect: n, isChecked: t }) {
+  return n ? /* @__PURE__ */ r(ee, { value: t ? "true" : "false", children: /* @__PURE__ */ r(re, { value: "true" }) }) : /* @__PURE__ */ r(D, { isChecked: t });
 }
-function pe(o) {
+function be(n) {
   const {
     inputValue: t,
     displayItems: s,
@@ -51,23 +49,23 @@ function pe(o) {
     isSearching: x,
     isHidingItems: k,
     popoverWidth: w,
-    popoverPlacement: S,
+    popoverPlacement: p,
     parentRef: P,
     popupRef: u,
     footerContent: l,
     translation: e,
     folderStyle: i
-  } = o, r = ne(
+  } = n, o = ne(
     P,
     u,
     a.isOpen,
     w,
-    S
-  ), v = (m) => {
+    p
+  ), C = (m) => {
     h.set(m);
   };
   return /* @__PURE__ */ g(
-    C,
+    v,
     {
       display: a.isOpen ? "block" : "none",
       inset: "0 auto auto 0",
@@ -75,11 +73,11 @@ function pe(o) {
       zIndex: "50",
       visibility: "visible",
       backgroundColor: d.Surface,
-      borderRadius: Z.Medium,
-      boxShadow: K.Medium,
+      borderRadius: J.Medium,
+      boxShadow: q.Medium,
       color: d.OnSurface,
       overflow: "hidden",
-      style: r,
+      style: o,
       ref: u,
       maxW: "90%",
       onClick: (m) => {
@@ -98,7 +96,7 @@ function pe(o) {
             "aria-multiselectable": !b,
             padding: `${c.Small} 0`,
             children: [
-              x && s.length === 0 && t.length > 0 && /* @__PURE__ */ n(
+              x && s.length === 0 && t.length > 0 && /* @__PURE__ */ r(
                 V,
                 {
                   px: c.Small,
@@ -106,15 +104,15 @@ function pe(o) {
                   children: `${e.noMatchFor} "${t}"`
                 }
               ),
-              i === "stacked" ? /* @__PURE__ */ n(oe, { ...o, onHover: v }) : /* @__PURE__ */ n(re, { ...o, onHover: v }),
-              k && /* @__PURE__ */ n(
+              i === "stacked" ? /* @__PURE__ */ r(oe, { ...n, onHover: C }) : /* @__PURE__ */ r(te, { ...n, onHover: C }),
+              k && /* @__PURE__ */ r(
                 V,
                 {
                   px: c.Small,
                   py: c.Small,
                   color: d.OnSurfaceSubdued,
-                  fontSize: R.Small,
-                  children: J(e.showMaxItems, {
+                  fontSize: K.Small,
+                  children: Y(e.showMaxItems, {
                     count: s.length
                   })
                 }
@@ -122,14 +120,14 @@ function pe(o) {
             ]
           }
         ),
-        l && /* @__PURE__ */ n(
-          C,
+        l && /* @__PURE__ */ r(
+          v,
           {
             position: "sticky",
             bottom: "0",
             backgroundColor: d.Surface,
             padding: `${c.Small} ${c.Medium}`,
-            borderTop: `${N.XSmall} ${d.OnSurfaceBorder}`,
+            borderTop: `${Z.XSmall} ${d.OnSurfaceBorder}`,
             tabIndex: -1,
             children: l
           }
@@ -138,13 +136,13 @@ function pe(o) {
     }
   );
 }
-const A = ({
-  children: o,
+const W = ({
+  children: n,
   isChecked: t,
   onClick: s,
   isActive: h,
   onHover: a
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ r(
   y,
   {
     as: "li",
@@ -161,10 +159,10 @@ const A = ({
     onMouseEnter: a,
     "data-is-active-index": h,
     "aria-selected": t,
-    children: o
+    children: n
   }
 ), oe = ({
-  displayItems: o,
+  displayItems: n,
   selectedItems: t,
   toggleItem: s,
   onHover: h,
@@ -173,27 +171,27 @@ const A = ({
   inputValue: x,
   isSingleSelect: k
 }) => {
-  const w = (l, e) => l.children && l.children.length > 0 ? l.children.every((i) => w(i, e)) : e.some((i) => i.id === l.id), S = (l) => l.children && l.children.length > 0 ? l.children.some((e) => S(e)) : t.some((e) => e.id === l.id);
+  const w = (l, e) => l.children && l.children.length > 0 ? l.children.every((i) => w(i, e)) : e.some((i) => i.id === l.id), p = (l) => l.children && l.children.length > 0 ? l.children.some((e) => p(e)) : t.some((e) => e.id === l.id);
   let P = 0;
-  const u = (l, e, i = []) => l.map((r) => {
-    const v = (p) => {
-      p.stopPropagation(), p.preventDefault(), s(r);
+  const u = (l, e, i = []) => l.map((o) => {
+    const C = (S) => {
+      S.stopPropagation(), S.preventDefault(), s(o);
     };
     i.length > 0 && (i[i.length - 1] -= 1);
-    const m = P++, I = r.children && r.children.length > 0, B = !I || r.isSelectableParent;
-    let $ = e.some((p) => p.id === r.id);
-    return a && I && !r.isSelectableParent && w(r, e) && ($ = !0), /* @__PURE__ */ g(T, { children: [
+    const m = P++, I = o.children && o.children.length > 0, B = !I || o.isSelectableParent;
+    let $ = e.some((S) => S.id === o.id);
+    return a && I && !o.isSelectableParent && w(o, e) && ($ = !0), /* @__PURE__ */ g(T, { children: [
       /* @__PURE__ */ g(
-        A,
+        W,
         {
           isActive: b.index === m,
           isChecked: $,
-          onClick: v,
+          onClick: C,
           onHover: () => h(m),
           children: [
             /* @__PURE__ */ g(y, { alignItems: "center", whiteSpace: "nowrap", minW: 0, children: [
-              i.map((p, O, M) => {
-                const f = M.length === O + 1, j = p > 0, E = p === 0, L = j || f;
+              i.map((S, O, M) => {
+                const f = M.length === O + 1, X = S > 0, A = S === 0, j = X || f;
                 return /* @__PURE__ */ g(
                   y,
                   {
@@ -203,17 +201,17 @@ const A = ({
                     my: "-0.5rem",
                     h: "2.5rem",
                     children: [
-                      L && /* @__PURE__ */ n(
-                        C,
+                      j && /* @__PURE__ */ r(
+                        v,
                         {
                           w: "1px",
-                          h: E ? "52%" : "100%",
+                          h: A ? "52%" : "100%",
                           backgroundColor: d.OnSurface,
                           mb: "auto"
                         }
                       ),
-                      f && /* @__PURE__ */ n(
-                        C,
+                      f && /* @__PURE__ */ r(
+                        v,
                         {
                           w: "inherit",
                           height: "1px",
@@ -223,21 +221,21 @@ const A = ({
                       )
                     ]
                   },
-                  `${r.id}_${O}`
+                  `${o.id}_${O}`
                 );
               }),
-              /* @__PURE__ */ n(H, { item: r, asPlainText: !0, highlightQuery: x })
+              /* @__PURE__ */ r(z, { item: o, asPlainText: !0, highlightQuery: x })
             ] }),
-            B ? /* @__PURE__ */ n(X, { isSingleSelect: k, isChecked: $ }) : a && !k && /* @__PURE__ */ n(W, { isIndeterminate: S(r), isChecked: $ })
+            B ? /* @__PURE__ */ r(H, { isSingleSelect: k, isChecked: $ }) : a && !k && /* @__PURE__ */ r(D, { isIndeterminate: p(o), isChecked: $ })
           ]
         }
       ),
-      r.children && u(r.children, e, [...i, r.children.length])
-    ] }, r.id);
+      o.children && u(o.children, e, [...i, o.children.length])
+    ] }, o.id);
   });
-  return u(o, t);
-}, re = ({
-  displayItems: o,
+  return u(n, t);
+}, te = ({
+  displayItems: n,
   selectedItems: t,
   toggleItem: s,
   onHover: h,
@@ -246,47 +244,40 @@ const A = ({
   subMenuState: x,
   parentStrings: k,
   asPlainText: w,
-  isSearching: S,
+  isSearching: p,
   isReadOnly: P,
   previousSelectedItems: u
 }) => {
   const l = (e, i) => {
     e.stopPropagation(), e.preventDefault(), s(i);
   };
-  return o.map((e, i) => {
-    const r = t.some((f) => f.id === e.id), v = e.children?.length, m = e.id === "_back", I = x.opened[x.opened.length - 1], B = e.id === I?.id, $ = m ? /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", children: [
-      /* @__PURE__ */ n(z, { icon: D.Back, size: F.Small }),
+  return n.map((e, i) => {
+    const o = t.some((f) => f.id === e.id), C = e.children?.length, m = e.id === "_back", I = x.opened[x.opened.length - 1], B = e.id === I?.id, $ = m ? /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", children: [
+      /* @__PURE__ */ r(R, { size: F.Small }),
       e.label
-    ] }) : /* @__PURE__ */ g(_, { children: [
+    ] }) : /* @__PURE__ */ g(E, { children: [
       /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
         k[e.id]?.map((f) => /* @__PURE__ */ g(T, { children: [
-          /* @__PURE__ */ n(C, { color: d.OnSurfaceSubdued, children: f }),
-          /* @__PURE__ */ n(C, { color: d.OnSurfaceSubdued, children: "/" })
+          /* @__PURE__ */ r(v, { color: d.OnSurfaceSubdued, children: f }),
+          /* @__PURE__ */ r(v, { color: d.OnSurfaceSubdued, children: "/" })
         ] }, f)),
-        /* @__PURE__ */ n(H, { item: e, asPlainText: w })
+        /* @__PURE__ */ r(z, { item: e, asPlainText: w })
       ] }),
-      P ? void 0 : v && !B && !S ? /* @__PURE__ */ n(
-        z,
-        {
-          icon: D.Forward,
-          size: F.Small,
-          color: d.OnBackgroundSubdued
-        }
-      ) : /* @__PURE__ */ n(X, { isSingleSelect: b, isChecked: r })
-    ] }), p = u.length > 0 && u.length - 1 === i && u.length < o.length, M = !P && !S && (p || (m || B));
+      P ? void 0 : C && !B && !p ? /* @__PURE__ */ r(N, { size: F.Small, color: d.OnBackgroundSubdued }) : /* @__PURE__ */ r(H, { isSingleSelect: b, isChecked: o })
+    ] }), S = u.length > 0 && u.length - 1 === i && u.length < n.length, M = !P && !p && (S || (m || B));
     return /* @__PURE__ */ g(T, { children: [
-      /* @__PURE__ */ n(
-        A,
+      /* @__PURE__ */ r(
+        W,
         {
           isActive: a.index === i,
-          isChecked: r,
+          isChecked: o,
           onClick: (f) => l(f, e),
           onHover: () => h(i),
           children: $
         }
       ),
-      M && /* @__PURE__ */ n(
-        C,
+      M && /* @__PURE__ */ r(
+        v,
         {
           margin: `${c.Small} ${m ? 0 : c.Medium}`,
           height: "1px",
@@ -298,6 +289,6 @@ const A = ({
   });
 };
 export {
-  X as CheckboxOrRadioButton,
-  pe as ComboboxMenu
+  H as CheckboxOrRadioButton,
+  be as ComboboxMenu
 };

package/dist/components/combobox/combobox-recipe.d.ts

@@ -0,0 +1,22 @@
+import { SystemStyleObject } from '@chakra-ui/react';
+export declare const comboboxRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    size: {
+        xs: {
+            minHeight: string;
+        };
+        sm: {
+            minHeight: string;
+        };
+        md: {
+            minHeight: string;
+        };
+        lg: {
+            minHeight: string;
+        };
+        xl: {
+            minHeight: string;
+        };
+    };
+    variant: Record<string, SystemStyleObject>;
+}>;
+//# sourceMappingURL=combobox-recipe.d.ts.map

package/dist/components/combobox/combobox-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-recipe.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAkGxE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;EAMzB,CAAC"}

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

@@ -0,0 +1,102 @@
+import { ThemeColorVariable as o, ThemeBorderVariable as r } from "../../theme/theme-types.js";
+import { defineRecipe as e } from "@chakra-ui/react";
+const a = {
+  display: "flex",
+  justifyContent: "space-between",
+  cursor: "text",
+  border: `${r.XSmall} transparent`,
+  '&[aria-disabled="true"]': {
+    borderColor: "transparent",
+    cursor: "not-allowed"
+  },
+  '&[aria-readonly="true"]': {
+    borderColor: "transparent"
+  },
+  '&[aria-invalid="true"]': {
+    borderColor: o.Error,
+    _focusWithin: {
+      borderColor: o.Error,
+      boxShadow: `0 0 0 4px ${o.ErrorContainer}`
+    },
+    "@media(hover: hover)": {
+      "&:hover:not(:focus-within)": {
+        borderColor: o.ErrorHover
+      }
+    }
+  }
+}, n = {
+  outline: {
+    background: o.Surface,
+    color: o.OnSurface,
+    borderColor: o.OnSurfaceBorder,
+    '&[aria-disabled="true"]': {
+      backgroundColor: o.SurfaceDisabled,
+      color: o.OnSurfaceSubdued
+    },
+    '&[aria-readonly="true"]': {
+      backgroundColor: o.SurfaceDisabled,
+      color: o.OnSurface
+    },
+    "@media(hover: hover)": {
+      '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
+        borderColor: o.OnSurface
+      }
+    }
+  },
+  ghost: {
+    background: "none",
+    color: o.OnSurface,
+    '&[aria-disabled="true"]': {
+      backgroundColor: "transparent",
+      color: o.OnSurfaceSubdued
+    },
+    '&[aria-readonly="true"]': {
+      backgroundColor: "transparent",
+      color: o.OnSurface,
+      "& .combobox-dropdown-icon": {
+        opacity: 1
+      }
+    },
+    '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
+      opacity: 0
+    },
+    "&:focus-within": {
+      "& .combobox-dropdown-icon": {
+        opacity: 1
+      }
+    },
+    "@media(hover: hover)": {
+      '&:hover:not(:focus-within):not([aria-disabled="true"])': {
+        backgroundColor: o.SurfaceDisabled,
+        "& .combobox-dropdown-icon": {
+          opacity: 1
+        }
+      }
+    }
+  }
+}, i = {
+  xs: {
+    minHeight: "24px"
+  },
+  sm: {
+    minHeight: "32px"
+  },
+  md: {
+    minHeight: "40px"
+  },
+  lg: {
+    minHeight: "48px"
+  },
+  xl: {
+    minHeight: "56px"
+  }
+}, c = e({
+  base: a,
+  variants: {
+    size: i,
+    variant: n
+  }
+});
+export {
+  c as comboboxRecipe
+};

package/dist/components/combobox/combobox.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.composition.tsx"],"names":[],"mappings":"AAqOA,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAiDpB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAoBnB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAyEjB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAyBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAyB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CA8BlC,CAAC"}
+{"version":3,"file":"combobox.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.composition.tsx"],"names":[],"mappings":"AAsOA,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAmDpB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAqBnB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAyEjB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAyBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAyB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CA8BlC,CAAC"}

package/dist/components/combobox/combobox.d.ts

@@ -6,5 +6,5 @@ import { ComboboxProps } from './types.js';
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/combobox
  */
-export declare function Combobox({ id, label, isSingleSelect, selectedItems, locale, size, variant, asPlainText, onSearch, items, maxVisibleItems, onChange, onBlur, isDisabled, isReadOnly, isRequired, placeholder, isInvalid, footerContent, popoverWidth, popoverPlacement, collapsed, folderStyle, parentSelectsChildren, ...props }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Combobox({ id, label, isSingleSelect, selectedItems, locale, size, variant, asPlainText, onSearch, items, maxVisibleItems, onChange, onBlur, isDisabled, isReadOnly, isRequired, placeholder, footerContent, popoverWidth, popoverPlacement, collapsed, folderStyle, parentSelectsChildren, ...props }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAIX,aAAa,EAKb,MAAM,SAAS,CAAC;AAsGjB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACxB,EAAE,EACF,KAAU,EACV,cAAsB,EACtB,aAAkB,EAClB,MAAgB,EAChB,IAAW,EACX,OAAmB,EACnB,WAAmB,EACnB,QAAQ,EACR,KAAK,EACL,eAAe,EACf,QAAQ,EACR,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAiB,EACjB,WAAuB,EACvB,qBAAqB,EACrB,GAAG,KAAK,EACR,EAAE,aAAa,2CAgTf"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAIX,aAAa,EAKb,MAAM,SAAS,CAAC;AAsGjB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACxB,EAAE,EACF,KAAU,EACV,cAAsB,EACtB,aAAkB,EAClB,MAAgB,EAChB,IAAW,EACX,OAAmB,EACnB,WAAmB,EACnB,QAAQ,EACR,KAAK,EACL,eAAe,EACf,QAAQ,EACR,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAiB,EACjB,WAAuB,EACvB,qBAAqB,EACrB,GAAG,KAAK,EACR,EAAE,aAAa,2CAyTf"}