@caspeco/casper-ui-library 10.3.1 → 10.5.0

package/dist/components/table/table-row.js

@@ -1,41 +1,51 @@
-import { jsx as l } from "react/jsx-runtime";
-import { Table as h } from "@chakra-ui/react";
-import { memo as f, useCallback as r, useMemo as S } from "react";
-import { TableCell as x } from "./table-cell.js";
-import { useTableContext as I } from "./table-context.js";
-const T = ({
-  row: e,
-  visibleCells: n,
-  onClickRow: o,
-  showRowHoverStyle: d,
-  onRowClickIndication: i
-}) => {
-  const a = I(), c = r((t) => {
-    o && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o(e.original, t));
-  }, [o, e.original]), g = r((t) => {
-    t.stopPropagation(), e.getToggleSelectedHandler(), o && o(e.original, t), i && a.setRowHighlight({
-      [t.currentTarget.id]: !0
-    });
-  }, [e, o, i, a]), u = S(() => e.getIsSelected() || a.selectedRowIds?.includes(e.id), [e, a.rowHighlight, a.selectedRowIds]), b = a.getRowActions?.(e.original), m = (t) => a.disableSelectionCheckbox?.(t) ?? !1;
-  return /* @__PURE__ */ l(
-    h.Row,
-    {
-      id: e.id,
-      tabIndex: o ? 0 : void 0,
-      onClick: g,
-      onKeyDown: c,
-      cursor: o ? "pointer" : void 0,
-      "data-row-selected": u,
-      "data-allow-hovered": d,
-      "data-is-root-level": e.depth === 0,
-      children: n.map((t, p) => {
-        const s = p === 0;
-        return /* @__PURE__ */ l(x, { cell: t, visibleCells: n, row: e, rowIsExpanded: e.getIsExpanded(), breakingContentState: a.breakingContentState, localeString: a.localeString, actionMenu: s ? b : void 0, canSelectRows: a.canSelectRows && s, isCheckboxDisabled: m(e) }, t.id);
-      })
-    },
-    e.id
-  );
-}, R = f(T);
-export {
-  R as TableRow
-};
+"use no memo";
+import { useTableContext as e } from "./table-context.js";
+import { TableCell as t } from "./table-cell.js";
+import { memo as n, useCallback as r, useMemo as i } from "react";
+import { Table as a } from "@chakra-ui/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = n(({ row: n, visibleCells: c, onClickRow: l, showRowHoverStyle: u, onRowClickIndication: d }) => {
+	let f = e(), p = r((e) => {
+		l && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l(n.original, e));
+	}, [l, n.original]), m = r((e) => {
+		e.stopPropagation(), n.getToggleSelectedHandler(), l && l(n.original, e), d && f.setRowHighlight({ [e.currentTarget.id]: !0 });
+	}, [
+		n,
+		l,
+		d,
+		f
+	]), h = i(() => n.getIsSelected() || f.selectedRowIds?.includes(n.id), [
+		n,
+		f.rowHighlight,
+		f.selectedRowIds
+	]), g = f.getRowActions?.(n.original), _ = (e) => f.disableSelectionCheckbox?.(e) ?? !1;
+	return /* @__PURE__ */ s(a.Row, {
+		id: n.id,
+		tabIndex: l ? 0 : void 0,
+		onClick: m,
+		onKeyDown: p,
+		cursor: l ? "pointer" : void 0,
+		"data-row-selected": h,
+		"data-allow-hovered": u,
+		"data-is-root-level": n.depth === 0,
+		children: [c.map((e, r) => {
+			let i = r === 0;
+			return /* @__PURE__ */ o(t, {
+				cell: e,
+				visibleCells: c,
+				row: n,
+				rowIsExpanded: n.getIsExpanded(),
+				breakingContentState: f.breakingContentState,
+				localeString: f.localeString,
+				actionMenu: i ? g : void 0,
+				canSelectRows: f.canSelectRows && i,
+				isCheckboxDisabled: _(n)
+			}, e.id);
+		}), f.enableColumnResizing && /* @__PURE__ */ o(a.Cell, {
+			"aria-hidden": !0,
+			style: { borderBottom: 0 }
+		})]
+	}, n.id);
+});
+//#endregion
+export { c as TableRow };

package/dist/components/table/table-toolbar-actions.js

@@ -1,19 +1,19 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { memo as i } from "react";
-import { useTableContext as e } from "./table-context.js";
-import { translations as m } from "./translations.js";
-import { Menu as s } from "../menu/menu.js";
-import { MenuIconButton as l } from "../menu/menu-icon-button.js";
-import { MoreVerticalIcon as c } from "../icon/icons/more-vertical-icon.js";
-const b = ({
-  children: o
-}) => {
-  const t = e(), r = m[t.localeString];
-  return /* @__PURE__ */ n(s, { children: [
-    /* @__PURE__ */ a(l, { icon: c, variant: "ghost", size: "md", "aria-label": r.toolbarActions }),
-    o
-  ] });
-}, M = i(b);
-export {
-  M as TableToolbarActions
-};
+"use no memo";
+import { MoreVerticalIcon as e } from "../icon/icons/more-vertical-icon.js";
+import { Menu as t } from "../menu/menu.js";
+import { MenuIconButton as n } from "../menu/menu-icon-button.js";
+import { useTableContext as r } from "./table-context.js";
+import { translations as i } from "./translations.js";
+import { memo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = a(({ children: a }) => {
+	let c = r(), l = i[c.localeString];
+	return /* @__PURE__ */ s(t, { children: [/* @__PURE__ */ o(n, {
+		icon: e,
+		variant: "ghost",
+		size: "md",
+		"aria-label": l.toolbarActions
+	}), a] });
+});
+//#endregion
+export { c as TableToolbarActions };

package/dist/components/table/table-toolbar-add-button.js

@@ -1,13 +1,18 @@
-import { jsx as n } from "react/jsx-runtime";
-import { memo as e } from "react";
-import { useTableContext as l } from "./table-context.js";
-import { translations as i } from "./translations.js";
-import { IconButton as m } from "../icon-button/icon-button.js";
-import { IncreaseIcon as c } from "../icon/icons/increase-icon.js";
-const s = (o) => {
-  const t = l(), a = i[t.localeString], r = o["aria-label"] ?? a.new;
-  return /* @__PURE__ */ n(m, { "aria-label": r, icon: c, variant: "secondary", ...o });
-}, I = e(s);
-export {
-  I as TableToolbarAddButton
-};
+"use no memo";
+import { IncreaseIcon as e } from "../icon/icons/increase-icon.js";
+import { IconButton as t } from "../icon-button/icon-button.js";
+import { useTableContext as n } from "./table-context.js";
+import { translations as r } from "./translations.js";
+import { memo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var o = i((i) => {
+	let o = n(), s = r[o.localeString], c = i["aria-label"] ?? s.new;
+	return /* @__PURE__ */ a(t, {
+		"aria-label": c,
+		icon: e,
+		variant: "secondary",
+		...i
+	});
+});
+//#endregion
+export { o as TableToolbarAddButton };

package/dist/components/table/table-toolbar-search.js

@@ -1,13 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { memo as o } from "react";
+"use no memo";
+import { SearchIcon as e } from "../icon/icons/search-icon.js";
 import { Input as t } from "../input/input.js";
-import { SearchIcon as m } from "../icon/icons/search-icon.js";
-const a = ({
-  ...e
-}) => /* @__PURE__ */ r(t, { leftElement: /* @__PURE__ */ r(m, {}), size: "md", type: "search", w: {
-  base: "100%",
-  md: "170px"
-}, "data-testid": "filterInput", ...e }), l = o(a);
-export {
-  l as TableToolbarSearch
-};
+import { memo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var i = n(({ ...n }) => /* @__PURE__ */ r(t, {
+	leftElement: /* @__PURE__ */ r(e, {}),
+	size: "md",
+	type: "search",
+	w: {
+		base: "100%",
+		md: "170px"
+	},
+	"data-testid": "filterInput",
+	...n
+}));
+//#endregion
+export { i as TableToolbarSearch };

package/dist/components/table/table-toolbar-settings.js

@@ -1,133 +1,180 @@
-import { jsx as t, jsxs as c, Fragment as h } from "react/jsx-runtime";
-import { Flex as y, Portal as w, Box as I } from "@chakra-ui/react";
-import { closestCenter as P } from "../../node_modules/@dnd-kit/collision/dist/index.js";
-import { isSortableOperation as E, SortableKeyboardPlugin as L } from "../../node_modules/@dnd-kit/dom/sortable.js";
-import { DragDropProvider as A } from "../../node_modules/@dnd-kit/react/index.js";
-import { useSortable as G } from "../../node_modules/@dnd-kit/react/sortable.js";
-import { memo as R, useState as F, useCallback as x } from "react";
-import { flushSync as Y } from "react-dom";
-import { getColumnLabel as O } from "./helper.js";
-import { useTableContext as j } from "./table-context.js";
-import { DEFAULT_PAGE_SIZE_OPTIONS as N } from "./table.constants.js";
-import { translations as z } from "./translations.js";
-import { Menu as H } from "../menu/menu.js";
-import { MenuButton as U } from "../menu/menu-button.js";
-import { SlidersIcon as K } from "../icon/icons/sliders-icon.js";
-import { MenuList as X } from "../menu/menu-list.js";
-import { Text as C } from "../text/text.js";
-import { MenuDivider as k } from "../menu/menu-divider.js";
-import { MenuItem as b } from "../menu/menu-item.js";
-import { Checkbox as D } from "../checkbox/checkbox.js";
-import { RadioGroup as Z } from "../radio/radio-group.js";
-import { Radio as q } from "../radio/radio.js";
-import { Switch as J } from "../switch/switch.js";
-import { GripMoreIcon as Q } from "../icon/icons/grip-more-icon.js";
-import { ThemeIconSizeVariable as B, ThemeSpaceVariable as u, ThemeColorVariable as f, ThemeShadowVariable as W } from "../../theme/theme-types.js";
-const $ = (i, l, r, o) => {
-  if (!o || o.sourceId === i) return "none";
-  const s = r.findIndex((a) => a.id === o.sourceId), d = r.findIndex((a) => a.id === o.targetId);
-  return s < 0 || d < 0 || s === d ? "none" : s < d && l > s && l <= d ? "translateY(-100%)" : s > d && l >= d && l < s ? "translateY(100%)" : "none";
-}, v = (i) => {
-  if (!E(i)) return null;
-  const {
-    source: l,
-    target: r
-  } = i;
-  return l && r ? {
-    source: l,
-    target: r
-  } : null;
-}, _ = ({
-  pageSize: i,
-  onPageSizeChange: l
-}) => {
-  const r = j(), o = z[r.localeString], s = !!l && Number.isInteger(i), [d, a] = F(null), g = r.table.getAllLeafColumns().filter((e) => e.getCanHide()), p = g.filter((e) => e.getIsVisible()), T = g.filter((e) => !e.getIsVisible()).sort((e, n) => {
-    const m = O(e.columnDef.header, e.id), S = O(n.columnDef.header, n.id);
-    return m.localeCompare(S, r.localeString, {
-      sensitivity: "base"
-    });
-  }), M = x(() => r.table.getAllColumns().length === Object.keys(r.breakingContentState).length && !Object.values(r.breakingContentState).includes(!1), [r.breakingContentState, r.table]), V = x(({
-    checked: e
-  }) => {
-    const n = {};
-    r.table.getAllColumns().forEach((m) => {
-      n[m.id] = e;
-    }), r.setBreakingContentState(n), r.onBreakingContentChange?.(n);
-  }, [r]);
-  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ c(H, { closeOnSelect: !1, isLazy: !0, children: [
-    /* @__PURE__ */ t(U, { "aria-label": o.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ t(K, { size: B.Medium }) }),
-    /* @__PURE__ */ t(w, { children: /* @__PURE__ */ c(X, { children: [
-      /* @__PURE__ */ t(C, { color: f.OnSurfaceSubdued, py: u.Small, px: u.Medium, children: o.shownInTable }),
-      /* @__PURE__ */ c(I, { maxHeight: "400px", overflowY: "auto", children: [
-        /* @__PURE__ */ t(A, { onDragOver: (e) => {
-          const n = v(e.operation);
-          n && a({
-            sourceId: String(n.source.id),
-            targetId: String(n.target.id)
-          });
-        }, onDragEnd: (e) => {
-          const n = v(e.operation);
-          Y(() => {
-            a(null), n && r.handleDragEnd(String(n.source.id), String(n.target.id));
-          });
-        }, children: p.map((e, n) => /* @__PURE__ */ t(re, { column: e, index: n, isDisabled: p.length === 1, translateY: $(e.id, n, p, d) }, e.id)) }),
-        T.length > 0 && /* @__PURE__ */ c(h, { children: [
-          /* @__PURE__ */ t(k, {}),
-          /* @__PURE__ */ t(C, { color: f.OnSurfaceSubdued, py: u.Small, px: u.Medium, children: o.hiddenInTable }),
-          T.map((e) => /* @__PURE__ */ c(b, { itemType: "checkbox", value: e.id, children: [
-            /* @__PURE__ */ t(h, { children: e.columnDef.header }),
-            /* @__PURE__ */ t(D, { isChecked: e.getIsVisible(), onCheckedChange: ({
-              checked: n
-            }) => {
-              if (e.toggleVisibility(!!n), n) {
-                const m = r.columnOrder.filter((S) => S !== e.id);
-                m.push(e.id), r.setColumnOrder(m);
-              }
-            } })
-          ] }, e.id))
-        ] })
-      ] }),
-      /* @__PURE__ */ t(k, {}),
-      s && /* @__PURE__ */ c(h, { children: [
-        /* @__PURE__ */ t(C, { color: f.OnSurfaceSubdued, py: u.Small, px: u.Medium, children: o.rowsPerPage }),
-        /* @__PURE__ */ t(Z, { gap: "unset", value: String(i), onValueChange: (e) => l?.(Number(e.value)), children: N.map((e) => /* @__PURE__ */ c(b, { itemType: "radio", value: String(e), children: [
-          o.numberOfRows.replace("{count}", String(e)),
-          /* @__PURE__ */ t(q, { value: String(e) })
-        ] }, e)) }),
-        /* @__PURE__ */ t(k, {})
-      ] }),
-      /* @__PURE__ */ c(b, { itemType: "switch", value: "breakingContent", children: [
-        o.breakingContent,
-        /* @__PURE__ */ t(J, { onCheckedChange: V, isChecked: M() })
-      ] })
-    ] }) })
-  ] }) });
-}, ee = [L], re = ({
-  column: i,
-  index: l,
-  isDisabled: r,
-  translateY: o
-}) => {
-  const {
-    ref: s,
-    handleRef: d,
-    isDragging: a
-  } = G({
-    id: i.id,
-    index: l,
-    collisionDetector: P,
-    plugins: ee
-  });
-  return /* @__PURE__ */ t(I, { ref: s, role: "none", opacity: a ? 0.95 : 1, backgroundColor: f.Background, transform: o, transition: a ? void 0 : "transform 200ms ease", boxShadow: a ? W.Medium : void 0, children: /* @__PURE__ */ c(b, { itemType: "checkbox", value: i.id, children: [
-    /* @__PURE__ */ c(y, { alignItems: "center", gap: u.XSmall, children: [
-      /* @__PURE__ */ t(I, { ref: d, cursor: a ? "grabbing" : "grab", display: "inline-flex", alignItems: "center", flexShrink: 0, children: /* @__PURE__ */ t(Q, { size: B.Medium }) }),
-      /* @__PURE__ */ t(h, { children: i.columnDef.header })
-    ] }),
-    !a && /* @__PURE__ */ t(D, { isDisabled: r, isChecked: i.getIsVisible(), onCheckedChange: ({
-      checked: g
-    }) => i.toggleVisibility(!!g) })
-  ] }) });
-}, De = R(_);
-export {
-  De as TableToolbarSettings
-};
+"use no memo";
+import { ThemeColorVariable as e, ThemeIconSizeVariable as t, ThemeShadowVariable as n, ThemeSpaceVariable as r } from "../../theme/theme-types.js";
+import { GripMoreIcon as i } from "../icon/icons/grip-more-icon.js";
+import { SlidersIcon as a } from "../icon/icons/sliders-icon.js";
+import { Text as o } from "../text/text.js";
+import { Menu as s } from "../menu/menu.js";
+import { MenuButton as c } from "../menu/menu-button.js";
+import { MenuDivider as l } from "../menu/menu-divider.js";
+import { MenuItem as u } from "../menu/menu-item.js";
+import { MenuList as d } from "../menu/menu-list.js";
+import { Checkbox as f } from "../checkbox/checkbox.js";
+import { Radio as p } from "../radio/radio.js";
+import { RadioGroup as m } from "../radio/radio-group.js";
+import { Switch as h } from "../switch/switch.js";
+import { DEFAULT_PAGE_SIZE_OPTIONS as g } from "./table.constants.js";
+import { getColumnLabel as _ } from "./helper.js";
+import { useTableContext as v } from "./table-context.js";
+import { closestCenter as y } from "../../node_modules/@dnd-kit/collision/dist/index.js";
+import { DragDropProvider as b } from "../../node_modules/@dnd-kit/react/index.js";
+import { SortableKeyboardPlugin as x, isSortableOperation as S } from "../../node_modules/@dnd-kit/dom/sortable.js";
+import { useSortable as C } from "../../node_modules/@dnd-kit/react/sortable.js";
+import { translations as w } from "./translations.js";
+import { memo as T, useCallback as E, useState as D } from "react";
+import { Box as O, Flex as k, Portal as A } from "@chakra-ui/react";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { flushSync as P } from "react-dom";
+//#region lib/components/table/table-toolbar-settings.tsx
+var F = (e, t, n, r) => {
+	if (!r || r.sourceId === e) return "none";
+	let i = n.findIndex((e) => e.id === r.sourceId), a = n.findIndex((e) => e.id === r.targetId);
+	return i < 0 || a < 0 || i === a ? "none" : i < a && t > i && t <= a ? "translateY(-100%)" : i > a && t >= a && t < i ? "translateY(100%)" : "none";
+}, I = (e) => {
+	if (!S(e)) return null;
+	let { source: t, target: n } = e;
+	return t && n ? {
+		source: t,
+		target: n
+	} : null;
+}, L = ({ pageSize: n, onPageSizeChange: i }) => {
+	let y = v(), x = w[y.localeString], S = !!i && Number.isInteger(n), [C, T] = D(null), L = y.table.getAllLeafColumns().filter((e) => e.getCanHide()), R = L.filter((e) => e.getIsVisible()), B = L.filter((e) => !e.getIsVisible()).sort((e, t) => {
+		let n = _(e.columnDef.header, e.id), r = _(t.columnDef.header, t.id);
+		return n.localeCompare(r, y.localeString, { sensitivity: "base" });
+	}), V = E(() => y.table.getAllColumns().length === Object.keys(y.breakingContentState).length && !Object.values(y.breakingContentState).includes(!1), [y.breakingContentState, y.table]), H = E(({ checked: e }) => {
+		let t = {};
+		y.table.getAllColumns().forEach((n) => {
+			t[n.id] = e;
+		}), y.setBreakingContentState(t), y.onBreakingContentChange?.(t);
+	}, [y]);
+	return /* @__PURE__ */ M(k, { children: /* @__PURE__ */ N(s, {
+		closeOnSelect: !1,
+		isLazy: !0,
+		children: [/* @__PURE__ */ M(c, {
+			"aria-label": x.presets,
+			variant: "ghost",
+			p: "unset",
+			w: "40px",
+			h: "40px",
+			children: /* @__PURE__ */ M(a, { size: t.Medium })
+		}), /* @__PURE__ */ M(A, { children: /* @__PURE__ */ N(d, { children: [
+			/* @__PURE__ */ M(o, {
+				color: e.OnSurfaceSubdued,
+				py: r.Small,
+				px: r.Medium,
+				children: x.shownInTable
+			}),
+			/* @__PURE__ */ N(O, {
+				maxHeight: "400px",
+				overflowY: "auto",
+				children: [/* @__PURE__ */ M(b, {
+					onDragOver: (e) => {
+						let t = I(e.operation);
+						t && T({
+							sourceId: String(t.source.id),
+							targetId: String(t.target.id)
+						});
+					},
+					onDragEnd: (e) => {
+						let t = I(e.operation);
+						P(() => {
+							T(null), t && y.handleDragEnd(String(t.source.id), String(t.target.id));
+						});
+					},
+					children: R.map((e, t) => /* @__PURE__ */ M(z, {
+						column: e,
+						index: t,
+						isDisabled: R.length === 1,
+						translateY: F(e.id, t, R, C)
+					}, e.id))
+				}), B.length > 0 && /* @__PURE__ */ N(j, { children: [
+					/* @__PURE__ */ M(l, {}),
+					/* @__PURE__ */ M(o, {
+						color: e.OnSurfaceSubdued,
+						py: r.Small,
+						px: r.Medium,
+						children: x.hiddenInTable
+					}),
+					B.map((e) => /* @__PURE__ */ N(u, {
+						itemType: "checkbox",
+						value: e.id,
+						children: [/* @__PURE__ */ M(j, { children: e.columnDef.header }), /* @__PURE__ */ M(f, {
+							isChecked: e.getIsVisible(),
+							onCheckedChange: ({ checked: t }) => {
+								if (e.toggleVisibility(!!t), t) {
+									let t = y.columnOrder.filter((t) => t !== e.id);
+									t.push(e.id), y.setColumnOrder(t);
+								}
+							}
+						})]
+					}, e.id))
+				] })]
+			}),
+			/* @__PURE__ */ M(l, {}),
+			S && /* @__PURE__ */ N(j, { children: [
+				/* @__PURE__ */ M(o, {
+					color: e.OnSurfaceSubdued,
+					py: r.Small,
+					px: r.Medium,
+					children: x.rowsPerPage
+				}),
+				/* @__PURE__ */ M(m, {
+					gap: "unset",
+					value: String(n),
+					onValueChange: (e) => i?.(Number(e.value)),
+					children: g.map((e) => /* @__PURE__ */ N(u, {
+						itemType: "radio",
+						value: String(e),
+						children: [x.numberOfRows.replace("{count}", String(e)), /* @__PURE__ */ M(p, { value: String(e) })]
+					}, e))
+				}),
+				/* @__PURE__ */ M(l, {})
+			] }),
+			/* @__PURE__ */ N(u, {
+				itemType: "switch",
+				value: "breakingContent",
+				children: [x.breakingContent, /* @__PURE__ */ M(h, {
+					onCheckedChange: H,
+					isChecked: V()
+				})]
+			})
+		] }) })]
+	}) });
+}, R = [x], z = ({ column: a, index: o, isDisabled: s, translateY: c }) => {
+	let { ref: l, handleRef: d, isDragging: p } = C({
+		id: a.id,
+		index: o,
+		collisionDetector: y,
+		plugins: R
+	});
+	return /* @__PURE__ */ M(O, {
+		ref: l,
+		role: "none",
+		opacity: p ? .95 : 1,
+		backgroundColor: e.Background,
+		transform: c,
+		transition: p ? void 0 : "transform 200ms ease",
+		boxShadow: p ? n.Medium : void 0,
+		children: /* @__PURE__ */ N(u, {
+			itemType: "checkbox",
+			value: a.id,
+			children: [/* @__PURE__ */ N(k, {
+				alignItems: "center",
+				gap: r.XSmall,
+				children: [/* @__PURE__ */ M(O, {
+					ref: d,
+					cursor: p ? "grabbing" : "grab",
+					display: "inline-flex",
+					alignItems: "center",
+					flexShrink: 0,
+					children: /* @__PURE__ */ M(i, { size: t.Medium })
+				}), /* @__PURE__ */ M(j, { children: a.columnDef.header })]
+			}), !p && /* @__PURE__ */ M(f, {
+				isDisabled: s,
+				isChecked: a.getIsVisible(),
+				onCheckedChange: ({ checked: e }) => a.toggleVisibility(!!e)
+			})]
+		})
+	});
+}, B = T(L);
+//#endregion
+export { B as TableToolbarSettings };