@caspeco/casper-ui-library 11.4.0 → 12.1.0

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

@@ -1,32 +1,33 @@
 import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
-import { ThemeBorderVariable as t, ThemeColorVariable as n, ThemeFontSizeVariable as r, ThemeIconSizeVariable as i, ThemeRadiusVariable as a, ThemeShadowVariable as o, ThemeSpaceVariable as s } from "../../theme/theme-types.js";
+import { ThemeBorder as t, ThemeColor as n, ThemeFontSize as r, ThemeIconSize as i, ThemeRadius as a, ThemeShadow as o, ThemeSpace as s } from "../../theme/theme-types.js";
 import { BackIcon as c } from "../icon/icons/back-icon.js";
 import { ForwardIcon as l } from "../icon/icons/forward-icon.js";
 import { Text as u } from "../text/text.js";
 import { Checkbox as d } from "../checkbox/checkbox.js";
-import { ComboboxItem as f } from "./combobox-item.js";
-import { Radio as p } from "../radio/radio.js";
-import { RadioGroup as m } from "../radio/radio-group.js";
-import { autoUpdate as h, computePosition as g, flip as _ } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { interpolate as v } from "./translations.js";
-import { Fragment as y, useEffect as b, useState as x } from "react";
-import { Box as S, Flex as C } from "@chakra-ui/react";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useComponentTranslations as f } from "../../theme/translations.js";
+import { ComboboxItem as p } from "./combobox-item.js";
+import { comboboxTranslations as m } from "./combobox.translations.js";
+import { Radio as h } from "../radio/radio.js";
+import { RadioGroup as g } from "../radio/radio-group.js";
+import { autoUpdate as _, computePosition as v, flip as y } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { Fragment as b, useEffect as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Box as E, Flex as D } from "@chakra-ui/react";
 //#region lib/components/combobox/combobox-menu.tsx
-var D = e(), O = (e, t, n, r, i) => {
-	let a = (0, D.c)(8), o;
+var O = e(), k = (e, t, n, r, i) => {
+	let a = (0, O.c)(8), o;
 	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = {
 		transform: "translate(0, 0)",
 		minWidth: 0
 	}, a[0] = o) : o = a[0];
-	let [s, c] = x(o), l, u;
+	let [s, c] = S(o), l, u;
 	return a[1] !== n || a[2] !== e || a[3] !== i || a[4] !== r || a[5] !== t ? (l = () => {
-		if (!e.current || !t.current || !n) return P;
+		if (!e.current || !t.current || !n) return F;
 		let a = async () => {
 			if (e.current && t.current && n) {
-				let { width: n } = e.current.getBoundingClientRect(), { x: a, y: o } = await g(e.current, t.current, {
+				let { width: n } = e.current.getBoundingClientRect(), { x: a, y: o } = await v(e.current, t.current, {
 					placement: i || "bottom-start",
-					middleware: [_()]
+					middleware: [y()]
 				});
 				c({
 					transform: `translate(${a}px, ${o}px)`,
@@ -34,7 +35,7 @@ var D = e(), O = (e, t, n, r, i) => {
 				});
 			}
 		};
-		return h(e.current, t.current, () => {
+		return _(e.current, t.current, () => {
 			a().catch(console.error);
 		});
 	}, u = [
@@ -43,72 +44,72 @@ var D = e(), O = (e, t, n, r, i) => {
 		n,
 		i,
 		r
-	], a[1] = n, a[2] = e, a[3] = i, a[4] = r, a[5] = t, a[6] = l, a[7] = u) : (l = a[6], u = a[7]), b(l, u), s;
+	], a[1] = n, a[2] = e, a[3] = i, a[4] = r, a[5] = t, a[6] = l, a[7] = u) : (l = a[6], u = a[7]), x(l, u), s;
 };
-function k(e) {
-	let t = (0, D.c)(3), { isSingleSelect: n, isChecked: r } = e, i;
-	return t[0] !== r || t[1] !== n ? (i = n ? /* @__PURE__ */ T(m, {
+function A(e) {
+	let t = (0, O.c)(3), { isSingleSelect: n, isChecked: r } = e, i;
+	return t[0] !== r || t[1] !== n ? (i = n ? /* @__PURE__ */ w(g, {
 		value: r ? "true" : "false",
-		children: /* @__PURE__ */ T(p, { value: "true" })
-	}) : /* @__PURE__ */ T(d, { isChecked: r }), t[0] = r, t[1] = n, t[2] = i) : i = t[2], i;
+		children: /* @__PURE__ */ w(h, { value: "true" })
+	}) : /* @__PURE__ */ w(d, { isChecked: r }), t[0] = r, t[1] = n, t[2] = i) : i = t[2], i;
 }
-function A(e) {
-	let i = (0, D.c)(32), { inputValue: c, displayItems: l, highlightState: d, openState: f, isSingleSelect: p, isSearching: m, isHidingItems: h, popoverWidth: g, popoverPlacement: _, parentRef: y, popupRef: b, footerContent: x, translation: w, folderStyle: k } = e, A = O(y, b, f.isOpen, g, _), j;
-	i[0] === d ? j = i[1] : (j = (e) => {
+function j(e) {
+	let i = (0, O.c)(32), { inputValue: c, displayItems: l, highlightState: d, openState: p, isSingleSelect: h, isSearching: g, isHidingItems: _, popoverWidth: v, popoverPlacement: y, parentRef: b, popupRef: x, footerContent: S, folderStyle: C } = e, A = f(m), j = k(b, x, p.isOpen, v, y), M;
+	i[0] === d ? M = i[1] : (M = (e) => {
 		d.set(e);
-	}, i[0] = d, i[1] = j);
-	let P = j, F = f.isOpen ? "block" : "none", I;
-	i[2] !== p || i[3] !== f ? (I = (e) => {
-		e.preventDefault(), e.stopPropagation(), p && f.close();
-	}, i[2] = p, i[3] = f, i[4] = I) : I = i[4];
-	let L = !p, R;
-	i[5] !== l || i[6] !== c || i[7] !== m || i[8] !== w ? (R = m && l.length === 0 && c.length > 0 && /* @__PURE__ */ T(u, {
+	}, i[0] = d, i[1] = M);
+	let F = M, I = p.isOpen ? "block" : "none", L;
+	i[2] !== h || i[3] !== p ? (L = (e) => {
+		e.preventDefault(), e.stopPropagation(), h && p.close();
+	}, i[2] = h, i[3] = p, i[4] = L) : L = i[4];
+	let R = !h, z;
+	i[5] !== l || i[6] !== c || i[7] !== g || i[8] !== A ? (z = g && l.length === 0 && c.length > 0 && /* @__PURE__ */ w(u, {
 		px: s.Small,
 		color: n.OnSurfaceSubdued,
-		children: `${w.noMatchFor} "${c}"`
-	}), i[5] = l, i[6] = c, i[7] = m, i[8] = w, i[9] = R) : R = i[9];
-	let z;
-	i[10] !== k || i[11] !== P || i[12] !== e ? (z = T(k === "stacked" ? M : N, {
-		...e,
-		onHover: P
-	}), i[10] = k, i[11] = P, i[12] = e, i[13] = z) : z = i[13];
+		children: A.noMatchFor(c)
+	}), i[5] = l, i[6] = c, i[7] = g, i[8] = A, i[9] = z) : z = i[9];
 	let B;
-	i[14] !== l || i[15] !== h || i[16] !== w ? (B = h && /* @__PURE__ */ T(u, {
+	i[10] !== C || i[11] !== F || i[12] !== e ? (B = w(C === "stacked" ? N : P, {
+		...e,
+		onHover: F
+	}), i[10] = C, i[11] = F, i[12] = e, i[13] = B) : B = i[13];
+	let V;
+	i[14] !== l || i[15] !== _ || i[16] !== A ? (V = _ && /* @__PURE__ */ w(u, {
 		px: s.Small,
 		py: s.Small,
 		color: n.OnSurfaceSubdued,
 		fontSize: r.Small,
-		children: v(w.showMaxItems, { count: l.length })
-	}), i[14] = l, i[15] = h, i[16] = w, i[17] = B) : B = i[17];
-	let V;
-	i[18] !== L || i[19] !== R || i[20] !== z || i[21] !== B ? (V = /* @__PURE__ */ E(C, {
+		children: A.showMaxItems(l.length)
+	}), i[14] = l, i[15] = _, i[16] = A, i[17] = V) : V = i[17];
+	let H;
+	i[18] !== R || i[19] !== z || i[20] !== B || i[21] !== V ? (H = /* @__PURE__ */ T(D, {
 		as: "ul",
 		flexDirection: "column",
 		maxHeight: "300px",
 		overflowY: "auto",
 		overflowX: "hidden",
 		role: "listbox",
-		"aria-multiselectable": L,
+		"aria-multiselectable": R,
 		padding: `${s.Small} 0`,
 		children: [
-			R,
 			z,
-			B
+			B,
+			V
 		]
-	}), i[18] = L, i[19] = R, i[20] = z, i[21] = B, i[22] = V) : V = i[22];
-	let H;
-	i[23] === x ? H = i[24] : (H = x && /* @__PURE__ */ T(S, {
+	}), i[18] = R, i[19] = z, i[20] = B, i[21] = V, i[22] = H) : H = i[22];
+	let U;
+	i[23] === S ? U = i[24] : (U = S && /* @__PURE__ */ w(E, {
 		position: "sticky",
 		bottom: "0",
 		backgroundColor: n.Surface,
 		padding: `${s.Small} ${s.Medium}`,
 		borderTop: `${t.XSmall} ${n.OnSurfaceBorder}`,
 		tabIndex: -1,
-		children: x
-	}), i[23] = x, i[24] = H);
-	let U;
-	return i[25] !== A || i[26] !== b || i[27] !== F || i[28] !== I || i[29] !== V || i[30] !== H ? (U = /* @__PURE__ */ E(S, {
-		display: F,
+		children: S
+	}), i[23] = S, i[24] = U);
+	let W;
+	return i[25] !== j || i[26] !== x || i[27] !== I || i[28] !== L || i[29] !== H || i[30] !== U ? (W = /* @__PURE__ */ T(E, {
+		display: I,
 		inset: "0 auto auto 0",
 		position: "fixed",
 		zIndex: "50",
@@ -118,16 +119,16 @@ function A(e) {
 		boxShadow: o.Medium,
 		color: n.OnSurface,
 		overflow: "hidden",
-		style: A,
-		ref: b,
+		style: j,
+		ref: x,
 		maxW: "90%",
-		onClick: I,
-		children: [V, H]
-	}), i[25] = A, i[26] = b, i[27] = F, i[28] = I, i[29] = V, i[30] = H, i[31] = U) : U = i[31], U;
+		onClick: L,
+		children: [H, U]
+	}), i[25] = j, i[26] = x, i[27] = I, i[28] = L, i[29] = H, i[30] = U, i[31] = W) : W = i[31], W;
 }
-var j = (e) => {
-	let t = (0, D.c)(7), { children: r, isChecked: i, onClick: a, isActive: o, onHover: c } = e, l = o ? n.AccentHoverAlpha : "", u;
-	return t[0] !== r || t[1] !== o || t[2] !== i || t[3] !== a || t[4] !== c || t[5] !== l ? (u = /* @__PURE__ */ T(C, {
+var M = (e) => {
+	let t = (0, O.c)(7), { children: r, isChecked: i, onClick: a, isActive: o, onHover: c } = e, l = o ? n.AccentHoverAlpha : "", u;
+	return t[0] !== r || t[1] !== o || t[2] !== i || t[3] !== a || t[4] !== c || t[5] !== l ? (u = /* @__PURE__ */ w(D, {
 		as: "li",
 		role: "option",
 		width: "100%",
@@ -144,94 +145,94 @@ var j = (e) => {
 		"aria-selected": i,
 		children: r
 	}), t[0] = r, t[1] = o, t[2] = i, t[3] = a, t[4] = c, t[5] = l, t[6] = u) : u = t[6], u;
-}, M = ({ displayItems: e, selectedItems: t, toggleItem: r, onHover: i, parentSelectsChildren: a, highlightState: o, inputValue: c, isSingleSelect: l }) => {
-	let u = (e, t) => e.children && e.children.length > 0 ? e.children.every((e) => u(e, t)) : t.some((t) => t.id === e.id), p = (e) => e.children && e.children.length > 0 ? e.children.some((e) => p(e)) : t.some((t) => t.id === e.id), m = 0, h = (e, t, g = []) => e.map((e) => {
+}, N = ({ displayItems: e, selectedItems: t, toggleItem: r, onHover: i, parentSelectsChildren: a, highlightState: o, inputValue: c, isSingleSelect: l }) => {
+	let u = (e, t) => e.children && e.children.length > 0 ? e.children.every((e) => u(e, t)) : t.some((t) => t.id === e.id), f = (e) => e.children && e.children.length > 0 ? e.children.some((e) => f(e)) : t.some((t) => t.id === e.id), m = 0, h = (e, t, g = []) => e.map((e) => {
 		let _ = (t) => {
 			t.stopPropagation(), t.preventDefault(), r(e);
 		};
 		g.length > 0 && --g[g.length - 1];
-		let v = m++, b = e.children && e.children.length > 0, x = !b || e.isSelectableParent, w = t.some((t) => t.id === e.id);
-		return a && b && !e.isSelectableParent && u(e, t) && (w = !0), /* @__PURE__ */ E(y, { children: [/* @__PURE__ */ E(j, {
+		let v = m++, y = e.children && e.children.length > 0, x = !y || e.isSelectableParent, S = t.some((t) => t.id === e.id);
+		return a && y && !e.isSelectableParent && u(e, t) && (S = !0), /* @__PURE__ */ T(b, { children: [/* @__PURE__ */ T(M, {
 			isActive: o.index === v,
-			isChecked: w,
+			isChecked: S,
 			onClick: _,
 			onHover: () => i(v),
-			children: [/* @__PURE__ */ E(C, {
+			children: [/* @__PURE__ */ T(D, {
 				alignItems: "center",
 				whiteSpace: "nowrap",
 				minW: 0,
 				children: [g.map((t, r, i) => {
 					let a = i.length === r + 1, o = t > 0, c = t === 0, l = o || a;
-					return /* @__PURE__ */ E(C, {
+					return /* @__PURE__ */ T(D, {
 						w: s.Medium,
 						minW: s.Medium,
 						alignItems: "center",
 						my: "-0.5rem",
 						h: "2.5rem",
-						children: [l && /* @__PURE__ */ T(S, {
+						children: [l && /* @__PURE__ */ w(E, {
 							w: "1px",
 							h: c ? "52%" : "100%",
 							backgroundColor: n.OnSurface,
 							mb: "auto"
-						}), a && /* @__PURE__ */ T(S, {
+						}), a && /* @__PURE__ */ w(E, {
 							w: "inherit",
 							height: "1px",
 							backgroundColor: n.OnSurface,
 							mr: s.XSmall
 						})]
 					}, `${e.id}_${r}`);
-				}), /* @__PURE__ */ T(f, {
+				}), /* @__PURE__ */ w(p, {
 					item: e,
 					asPlainText: !0,
 					highlightQuery: c
 				})]
-			}), x ? /* @__PURE__ */ T(k, {
+			}), x ? /* @__PURE__ */ w(A, {
 				isSingleSelect: l,
-				isChecked: w
-			}) : a && !l && /* @__PURE__ */ T(d, {
-				isIndeterminate: p(e),
-				isChecked: w
+				isChecked: S
+			}) : a && !l && /* @__PURE__ */ w(d, {
+				isIndeterminate: f(e),
+				isChecked: S
 			})]
 		}), e.children && h(e.children, t, [...g, e.children.length])] }, e.id);
 	});
 	return h(e, t);
-}, N = ({ displayItems: e, selectedItems: t, toggleItem: r, onHover: a, highlightState: o, isSingleSelect: u, subMenuState: d, parentStrings: p, asPlainText: m, isSearching: h, isReadOnly: g, previousSelectedItems: _ }) => {
+}, P = ({ displayItems: e, selectedItems: t, toggleItem: r, onHover: a, highlightState: o, isSingleSelect: u, subMenuState: d, parentStrings: f, asPlainText: m, isSearching: h, isReadOnly: g, previousSelectedItems: _ }) => {
 	let v = (e, t) => {
 		e.stopPropagation(), e.preventDefault(), r(t);
 	};
-	return e.map((r, b) => {
-		let x = t.some((e) => e.id === r.id), D = r.children?.length, O = r.id === "_back", A = d.opened[d.opened.length - 1], M = r.id === A?.id, N = O ? /* @__PURE__ */ E(C, {
+	return e.map((r, y) => {
+		let x = t.some((e) => e.id === r.id), S = r.children?.length, O = r.id === "_back", k = d.opened[d.opened.length - 1], j = r.id === k?.id, N = O ? /* @__PURE__ */ T(D, {
 			gap: s.XSmall,
 			alignItems: "center",
-			children: [/* @__PURE__ */ T(c, { size: i.Small }), r.label]
-		}) : /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E(C, {
+			children: [/* @__PURE__ */ w(c, { size: i.Small }), r.label]
+		}) : /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T(D, {
 			gap: s.XSmall,
 			alignItems: "center",
 			whiteSpace: "nowrap",
-			children: [p[r.id]?.map((e) => /* @__PURE__ */ E(y, { children: [/* @__PURE__ */ T(S, {
+			children: [f[r.id]?.map((e) => /* @__PURE__ */ T(b, { children: [/* @__PURE__ */ w(E, {
 				color: n.OnSurfaceSubdued,
 				children: e
-			}), /* @__PURE__ */ T(S, {
+			}), /* @__PURE__ */ w(E, {
 				color: n.OnSurfaceSubdued,
 				children: "/"
-			})] }, e)), /* @__PURE__ */ T(f, {
+			})] }, e)), /* @__PURE__ */ w(p, {
 				item: r,
 				asPlainText: m
 			})]
-		}), g ? void 0 : D && !M && !h ? /* @__PURE__ */ T(l, {
+		}), g ? void 0 : S && !j && !h ? /* @__PURE__ */ w(l, {
 			size: i.Small,
 			color: n.OnBackgroundSubdued
-		}) : /* @__PURE__ */ T(k, {
+		}) : /* @__PURE__ */ w(A, {
 			isSingleSelect: u,
 			isChecked: x
-		})] }), P = _.length > 0 && _.length - 1 === b && _.length < e.length, F = !g && !h && (P || O || M);
-		return /* @__PURE__ */ E(y, { children: [/* @__PURE__ */ T(j, {
-			isActive: o.index === b,
+		})] }), P = _.length > 0 && _.length - 1 === y && _.length < e.length, F = !g && !h && (P || O || j);
+		return /* @__PURE__ */ T(b, { children: [/* @__PURE__ */ w(M, {
+			isActive: o.index === y,
 			isChecked: x,
 			onClick: (e) => v(e, r),
-			onHover: () => a(b),
+			onHover: () => a(y),
 			children: N
-		}), F && /* @__PURE__ */ T(S, {
+		}), F && /* @__PURE__ */ w(E, {
 			margin: `${s.Small} ${O ? 0 : s.Medium}`,
 			height: "1px",
 			flexShrink: 0,
@@ -239,6 +240,6 @@ var j = (e) => {
 		})] }, r.id);
 	});
 };
-function P() {}
+function F() {}
 //#endregion
-export { A as ComboboxMenu };
+export { j as ComboboxMenu };

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

@@ -1,4 +1,4 @@
-import { ThemeBorderVariable as e, ThemeColorVariable as t } from "../../theme/theme-types.js";
+import { ThemeBorder as e, ThemeColor as t } from "../../theme/theme-types.js";
 import { defineRecipe as n } from "@chakra-ui/react";
 //#region lib/components/combobox/combobox-recipe.ts
 var r = {

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, footerContent, popoverWidth, popoverPlacement, collapsed, folderStyle, keepSearchAfterSelect, parentSelectsChildren, ...props }: ComboboxProps): import('react').JSX.Element;
+export declare function Combobox({ id, label, isSingleSelect, selectedItems, size, variant, asPlainText, onSearch, items, maxVisibleItems, onChange, onBlur, isDisabled, isReadOnly, isRequired, placeholder, footerContent, popoverWidth, popoverPlacement, collapsed, folderStyle, keepSearchAfterSelect, parentSelectsChildren, ...props }: ComboboxProps): import('react').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,EAGb,MAAM,SAAS,CAAC;AA0GjB;;;;;;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,qBAAiD,EACjD,qBAAqB,EACrB,GAAG,KAAK,EACR,EAAE,aAAa,+BAiWf"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAIX,aAAa,EAEb,MAAM,SAAS,CAAC;AA6GjB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACxB,EAAE,EACF,KAAU,EACV,cAAsB,EACtB,aAAkB,EAClB,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,qBAAiD,EACjD,qBAAqB,EACrB,GAAG,KAAK,EACR,EAAE,aAAa,+BAgWf"}