@caspeco/casper-ui-library 10.4.0 → 10.5.0

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

@@ -1,140 +1,202 @@
-import { jsx as e, Fragment as S, jsxs as w } from "react/jsx-runtime";
-import { Table as I, Box as u, useMediaQuery as A, Portal as D } from "@chakra-ui/react";
-import { closestCenter as z } from "../../node_modules/@dnd-kit/collision/dist/index.js";
-import { SortableKeyboardPlugin as H } from "../../node_modules/@dnd-kit/dom/sortable.js";
-import { useSortable as P } from "../../node_modules/@dnd-kit/react/sortable.js";
-import { flexRender as V } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { memo as F, useCallback as R, useMemo as L } from "react";
-import { useTableContext as p } from "./table-context.js";
-import { TableHeaderDropdown as O } from "./table-header-dropdown.js";
-import { interpolate as C, translations as v } from "./translations.js";
-import { Flex as k } from "../flex/flex.js";
-import { Divider as W } from "../divider/divider.js";
-import { Menu as j } from "../menu/menu.js";
-import { MenuButton as N } from "../menu/menu-button.js";
-import { MenuList as $ } from "../menu/menu-list.js";
-import { Checkbox as E } from "../checkbox/checkbox.js";
-import { MenuItem as K } from "../menu/menu-item.js";
-import { IconButton as Q } from "../icon-button/icon-button.js";
-import { DeleteIcon as U } from "../icon/icons/delete-icon.js";
-import { Button as q } from "../button/button.js";
-import { ThemeColorVariable as g, ThemeSpaceVariable as f, ThemeFontSizeVariable as G, ThemeFontVariable as J } from "../../theme/theme-types.js";
-import { TreeViewCollapseIcon as X } from "../icon/icons/tree-view-collapse-icon.js";
-const Y = ({
-  headerGroup: t,
-  hideTableHeaderDropdown: n,
-  portalContainerRef: s
-}) => {
-  const a = p(), l = !!a.getRowActions, i = (a.selectedRowIds?.length ?? 0) > 0 && (a.selectionActions?.length ?? 0) > 0;
-  return /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(I.Row, { children: i ? /* @__PURE__ */ e(I.ColumnHeader, { colSpan: t.headers.length, cursor: "default", css: {
-    "& div:not(label *):hover": {
-      backgroundColor: "transparent !important"
-    },
-    "& div span": {
-      color: g.OnBackground
-    },
-    borderBottom: `1px solid ${g.OnBackgroundBorder}`,
-    paddingLeft: l ? "24px" : void 0
-  }, scope: "col", zIndex: 1, children: /* @__PURE__ */ e(M, { showSelectAll: !0, children: /* @__PURE__ */ e(ee, {}) }) }) : /* @__PURE__ */ e(S, { children: t.headers.map((o, r) => /* @__PURE__ */ e(Z, { header: o, hideTableHeaderDropdown: n, applyActionMenuPadding: l, portalContainerRef: s, isFirstColumn: !o.isPlaceholder && r === 0, enableColumnReorder: a.enableColumnReorder }, o.id)) }) }, t.id) });
-}, Z = ({
-  header: t,
-  hideTableHeaderDropdown: n,
-  applyActionMenuPadding: s,
-  portalContainerRef: a,
-  isFirstColumn: l = !1,
-  enableColumnReorder: i = !1
-}) => {
-  const o = p(), {
-    column: r
-  } = t, c = i && !r.columnDef.meta?.disableColumnReorder, {
-    ref: d,
-    isDragging: m,
-    isDropTarget: T
-  } = P({
-    id: r.id,
-    index: r.getIndex(),
-    disabled: !c,
-    collisionDetector: z,
-    plugins: [H]
-  }), y = R((b) => {
-    const h = b.getIsPinned(), x = b.getSize();
-    return {
-      position: h ? "sticky" : "relative",
-      left: h ? `${b.getStart("left")}px` : void 0,
-      backgroundColor: h ? g.Background : void 0,
-      zIndex: h ? 1 : 0,
-      width: x,
-      maxWidth: x
-    };
-  }, []);
-  return /* @__PURE__ */ e(I.ColumnHeader, { className: "tableHeaderCell", textAlign: r.columnDef.meta?.isNumeric ? "end" : "start", zIndex: r.getIsPinned() ? 2 : 1, cursor: i ? m ? "grabbing" : "pointer" : void 0, opacity: m ? 0.5 : 1, backgroundColor: T || m ? g.Background : void 0, scope: "col", style: {
-    ...y(r),
-    borderBottom: `1px solid ${g.OnBackgroundBorder}`,
-    paddingLeft: l && s ? "24px" : void 0,
-    ...c ? {
-      userSelect: "none",
-      WebkitUserSelect: "none"
-    } : {}
-  }, children: /* @__PURE__ */ e(M, { showSelectAll: o.canSelectRows && l, children: /* @__PURE__ */ e(S, { children: n ? /* @__PURE__ */ e(u, { paddingLeft: f.Small, children: V(t.column.columnDef.header, t.getContext()) }) : /* @__PURE__ */ e(O, { header: t, breakingContentState: o.breakingContentState, columnVisibility: o.columnVisibility, headerGroup: o.table.getHeaderGroups(), localeString: o.localeString, setBreakingContentState: o.setBreakingContentState, setSorting: o.setSorting, sorting: o.sorting, onBreakingContentChange: o.onBreakingContentChange, portalContainerRef: a, dragRef: c ? d : void 0 }) }) }) });
-}, M = ({
-  showSelectAll: t,
-  children: n
-}) => t ? /* @__PURE__ */ w(k, { w: "100%", align: "center", children: [
-  /* @__PURE__ */ e(u, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ e(_, {}) }),
-  n
-] }) : /* @__PURE__ */ e(S, { children: n }), _ = () => {
-  const t = p(), n = R(({
-    checked: l
-  }) => {
-    const i = typeof l == "boolean" ? l : !1, o = t.getSelectableRowIds();
-    i ? t.setSelectedRowIds((r) => [.../* @__PURE__ */ new Set([...r, ...o])]) : t.setSelectedRowIds((r) => r.filter((c) => !o.includes(c)));
-  }, [t]), {
-    allIsSelected: s,
-    shouldShowIndeterminateState: a
-  } = L(() => {
-    const i = t.table.getRowModel().flatRows, o = new Set(t.selectedRowIds), r = t.getSelectableRowIds(), c = r.length > 0 && r.every((m) => o.has(m)), d = i.some((m) => o.has(m.id));
-    return {
-      allIsSelected: c,
-      shouldShowIndeterminateState: d && !c
-    };
-  }, [t]);
-  return /* @__PURE__ */ e(E, { isChecked: s, isIndeterminate: a, onCheckedChange: n });
-}, ee = () => {
-  const {
-    localeString: t,
-    selectedRowIds: n = [],
-    selectionActions: s = [],
-    totalDataCount: a
-  } = p(), l = v[t], [i] = A(["(min-width: 48em)"]), o = s.length > 3 || !i, r = n.length, c = a ? C(l.selectedWithTotal, {
-    count: r,
-    total: a
-  }) : n.length === 1 ? C(l.selectedSingular, {
-    count: 1
-  }) : C(l.selected, {
-    count: r
-  });
-  return /* @__PURE__ */ w(k, { gap: f.Medium, align: "center", alignContent: "center", children: [
-    /* @__PURE__ */ e(u, { pl: f.Small, color: g.OnBackground, fontFamily: J.Body, fontSize: G.Medium, whiteSpace: "nowrap", css: {
-      fontVariantNumeric: "normal"
-    }, children: c }),
-    /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(W, { orientation: "vertical", height: "20px" }) }),
-    /* @__PURE__ */ e(k, { gap: f.Small, align: "center", children: o ? /* @__PURE__ */ w(j, { children: [
-      /* @__PURE__ */ e(N, { variant: "ghost", rightIcon: X, size: "sm", children: l.action }),
-      /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e($, { children: s.map((d) => /* @__PURE__ */ e(B, { isMenuItem: !0, action: d }, d.name)) }) })
-    ] }) : s.map((d) => /* @__PURE__ */ e(B, { isMenuItem: !1, action: d }, d.name)) })
-  ] });
-}, B = ({
-  isMenuItem: t,
-  action: n
-}) => {
-  const {
-    selectedRowIds: s,
-    localeString: a
-  } = p(), l = v[a], i = R(() => {
-    n.onClick(s || []);
-  }, [n, s]);
-  return t ? /* @__PURE__ */ e(K, { onClick: i, value: n.name, children: n.variant === "delete" ? /* @__PURE__ */ e(u, { as: "span", color: g.Error, children: n.name }) : n.name }) : n.variant === "delete" ? /* @__PURE__ */ e(Q, { onClick: i, icon: U, "aria-label": l.deleteSelectedRows, size: "sm", variant: "ghost" }) : /* @__PURE__ */ e(q, { onClick: i, size: "sm", variant: "ghost", children: n.name });
-}, Re = F(Y);
-export {
-  Re as TableHeaderRow
-};
+"use no memo";
+import { ThemeColorVariable as e, ThemeFontSizeVariable as t, ThemeFontVariable as n, ThemeSpaceVariable as r } from "../../theme/theme-types.js";
+import { DeleteIcon as i } from "../icon/icons/delete-icon.js";
+import { TreeViewCollapseIcon as a } from "../icon/icons/tree-view-collapse-icon.js";
+import { Menu as o } from "../menu/menu.js";
+import { Button as s } from "../button/button.js";
+import { MenuButton as c } from "../menu/menu-button.js";
+import { Flex as l } from "../flex/flex.js";
+import { IconButton as u } from "../icon-button/icon-button.js";
+import { MenuItem as d } from "../menu/menu-item.js";
+import { MenuList as f } from "../menu/menu-list.js";
+import { Checkbox as p } from "../checkbox/checkbox.js";
+import { Divider as m } from "../divider/divider.js";
+import { flexRender as h } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { getColumnWidth as g, getPinnedLeft 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 { SortableKeyboardPlugin as b } from "../../node_modules/@dnd-kit/dom/sortable.js";
+import { useSortable as x } from "../../node_modules/@dnd-kit/react/sortable.js";
+import { interpolate as S, translations as C } from "./translations.js";
+import { ColumnResizeHandle as w } from "./table-column-resize-handle.js";
+import { TableHeaderDropdown as T } from "./table-header-dropdown.js";
+import { memo as E, useCallback as D, useMemo as O } from "react";
+import { Box as k, Portal as A, Table as j, useMediaQuery as M } from "@chakra-ui/react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+//#region lib/components/table/table-header-row.tsx
+var I = ({ headerGroup: t, hideTableHeaderDropdown: n, portalContainerRef: r }) => {
+	let i = v(), a = !!i.getRowActions, o = (i.selectedRowIds?.length ?? 0) > 0 && (i.selectionActions?.length ?? 0) > 0, s = +!!i.enableColumnResizing;
+	return /* @__PURE__ */ P(N, { children: /* @__PURE__ */ P(j.Row, { children: o ? /* @__PURE__ */ P(j.ColumnHeader, {
+		colSpan: t.headers.length + s,
+		cursor: "default",
+		css: {
+			"& div:not(label *):hover": { backgroundColor: "transparent !important" },
+			"& div span": { color: e.OnBackground },
+			borderBottom: `1px solid ${e.OnBackgroundBorder}`,
+			paddingLeft: a ? "24px" : void 0
+		},
+		scope: "col",
+		zIndex: 1,
+		children: /* @__PURE__ */ P(z, {
+			showSelectAll: !0,
+			children: /* @__PURE__ */ P(V, {})
+		})
+	}) : /* @__PURE__ */ F(N, { children: [t.headers.map((e, t) => /* @__PURE__ */ P(L, {
+		header: e,
+		hideTableHeaderDropdown: n,
+		applyActionMenuPadding: a,
+		portalContainerRef: r,
+		isFirstColumn: !e.isPlaceholder && t === 0,
+		enableColumnReorder: i.enableColumnReorder
+	}, e.id)), i.enableColumnResizing && /* @__PURE__ */ P(R, {})] }) }, t.id) });
+}, L = ({ header: t, hideTableHeaderDropdown: n, applyActionMenuPadding: i, portalContainerRef: a, isFirstColumn: o = !1, enableColumnReorder: s = !1 }) => {
+	let c = v(), { column: l } = t, u = c.enableColumnResizing, d = u && l.getCanResize(), f = s && !l.columnDef.meta?.disableColumnReorder, { ref: p, isDragging: m, isDropTarget: S } = x({
+		id: l.id,
+		index: l.getIndex(),
+		disabled: !f,
+		collisionDetector: y,
+		plugins: [b]
+	});
+	return /* @__PURE__ */ F(j.ColumnHeader, {
+		className: "tableHeaderCell",
+		textAlign: l.columnDef.meta?.isNumeric ? "end" : "start",
+		zIndex: l.getIsPinned() ? 2 : 1,
+		cursor: s ? m ? "grabbing" : "pointer" : void 0,
+		opacity: m ? .5 : 1,
+		backgroundColor: S || m ? e.Background : void 0,
+		scope: "col",
+		style: {
+			...((t) => {
+				let n = t.getIsPinned(), r = g(t, u);
+				return {
+					position: n ? "sticky" : "relative",
+					left: n ? _(t, u) : void 0,
+					backgroundColor: n ? e.Background : void 0,
+					zIndex: +!!n,
+					width: r,
+					maxWidth: r
+				};
+			})(l),
+			borderBottom: `1px solid ${e.OnBackgroundBorder}`,
+			paddingLeft: o && i ? "24px" : void 0,
+			...f ? {
+				userSelect: "none",
+				WebkitUserSelect: "none"
+			} : {}
+		},
+		children: [/* @__PURE__ */ P(z, {
+			showSelectAll: c.canSelectRows && o,
+			children: /* @__PURE__ */ P(N, { children: n ? /* @__PURE__ */ P(k, {
+				paddingLeft: r.Small,
+				children: h(t.column.columnDef.header, t.getContext())
+			}) : /* @__PURE__ */ P(T, {
+				header: t,
+				breakingContentState: c.breakingContentState,
+				columnVisibility: c.columnVisibility,
+				headerGroup: c.table.getHeaderGroups(),
+				localeString: c.localeString,
+				setBreakingContentState: c.setBreakingContentState,
+				setSorting: c.setSorting,
+				sorting: c.sorting,
+				onBreakingContentChange: c.onBreakingContentChange,
+				portalContainerRef: a,
+				dragRef: f ? p : void 0
+			}) })
+		}), d && /* @__PURE__ */ P(w, { header: t })]
+	});
+}, R = () => /* @__PURE__ */ P(j.ColumnHeader, {
+	"aria-hidden": !0,
+	scope: "col",
+	style: { borderBottom: `1px solid ${e.OnBackgroundBorder}` }
+}), z = ({ showSelectAll: e, children: t }) => e ? /* @__PURE__ */ F(l, {
+	w: "100%",
+	align: "center",
+	children: [/* @__PURE__ */ P(k, {
+		justifyContent: "center",
+		alignItems: "center",
+		children: /* @__PURE__ */ P(B, {})
+	}), t]
+}) : /* @__PURE__ */ P(N, { children: t }), B = () => {
+	let e = v(), t = D(({ checked: t }) => {
+		let n = typeof t == "boolean" && t, r = e.getSelectableRowIds();
+		n ? e.setSelectedRowIds((e) => [.../* @__PURE__ */ new Set([...e, ...r])]) : e.setSelectedRowIds((e) => e.filter((e) => !r.includes(e)));
+	}, [e]), { allIsSelected: n, shouldShowIndeterminateState: r } = O(() => {
+		let t = e.table.getRowModel().flatRows, n = new Set(e.selectedRowIds), r = e.getSelectableRowIds(), i = r.length > 0 && r.every((e) => n.has(e));
+		return {
+			allIsSelected: i,
+			shouldShowIndeterminateState: t.some((e) => n.has(e.id)) && !i
+		};
+	}, [e]);
+	return /* @__PURE__ */ P(p, {
+		isChecked: n,
+		isIndeterminate: r,
+		onCheckedChange: t
+	});
+}, V = () => {
+	let { localeString: i, selectedRowIds: s = [], selectionActions: u = [], totalDataCount: d } = v(), p = C[i], [h] = M(["(min-width: 48em)"]), g = u.length > 3 || !h, _ = s.length, y = d ? S(p.selectedWithTotal, {
+		count: _,
+		total: d
+	}) : s.length === 1 ? S(p.selectedSingular, { count: 1 }) : S(p.selected, { count: _ });
+	return /* @__PURE__ */ F(l, {
+		gap: r.Medium,
+		align: "center",
+		alignContent: "center",
+		children: [
+			/* @__PURE__ */ P(k, {
+				pl: r.Small,
+				color: e.OnBackground,
+				fontFamily: n.Body,
+				fontSize: t.Medium,
+				whiteSpace: "nowrap",
+				css: { fontVariantNumeric: "normal" },
+				children: y
+			}),
+			/* @__PURE__ */ P(k, { children: /* @__PURE__ */ P(m, {
+				orientation: "vertical",
+				height: "20px"
+			}) }),
+			/* @__PURE__ */ P(l, {
+				gap: r.Small,
+				align: "center",
+				children: g ? /* @__PURE__ */ F(o, { children: [/* @__PURE__ */ P(c, {
+					variant: "ghost",
+					rightIcon: a,
+					size: "sm",
+					children: p.action
+				}), /* @__PURE__ */ P(A, { children: /* @__PURE__ */ P(f, { children: u.map((e) => /* @__PURE__ */ P(H, {
+					isMenuItem: !0,
+					action: e
+				}, e.name)) }) })] }) : u.map((e) => /* @__PURE__ */ P(H, {
+					isMenuItem: !1,
+					action: e
+				}, e.name))
+			})
+		]
+	});
+}, H = ({ isMenuItem: t, action: n }) => {
+	let { selectedRowIds: r, localeString: a } = v(), o = C[a], c = D(() => {
+		n.onClick(r || []);
+	}, [n, r]);
+	return t ? /* @__PURE__ */ P(d, {
+		onClick: c,
+		value: n.name,
+		children: n.variant === "delete" ? /* @__PURE__ */ P(k, {
+			as: "span",
+			color: e.Error,
+			children: n.name
+		}) : n.name
+	}) : n.variant === "delete" ? /* @__PURE__ */ P(u, {
+		onClick: c,
+		icon: i,
+		"aria-label": o.deleteSelectedRows,
+		size: "sm",
+		variant: "ghost"
+	}) : /* @__PURE__ */ P(s, {
+		onClick: c,
+		size: "sm",
+		variant: "ghost",
+		children: n.name
+	});
+}, U = E(I);
+//#endregion
+export { U as TableHeaderRow };

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

@@ -1 +1 @@
-{"version":3,"file":"table-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-recipe.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,WAAW,EAAE,oBAUxB,CAAC"}
+{"version":3,"file":"table-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-recipe.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,kBAAkB,CAAC;AAiG1B,eAAO,MAAM,WAAW,EAAE,oBAUxB,CAAC"}

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

@@ -1,98 +1,77 @@
 import { ThemeFontSizeToken as e } from "../../theme/theme-tokens.js";
-import { ThemeColorVariable as o, ThemeSpaceVariable as r, ThemeFontVariable as t } from "../../theme/theme-types.js";
-import { defineSlotRecipe as a, defineStyle as n } from "@chakra-ui/react";
-const d = {
-  position: "relative",
-  fontFamily: t.Body,
-  fontSize: e.Small,
-  width: "100%",
-  "& thead": {
-    '&[data-sticky-headers="true"]': {
-      position: "sticky",
-      top: 0,
-      zIndex: 5
-    }
-  },
-  "& th": {
-    padding: "0px",
-    position: "relative",
-    fontSize: e.Small,
-    height: "40px",
-    color: o.OnBackgroundSubdued,
-    fontWeight: 400,
-    textTransform: "none",
-    "& button": {
-      _hover: {
-        backgroundColor: o.BackgroundDisabled
-      }
-    }
-  },
-  "& td": {
-    color: o.OnBackground,
-    padding: `0px 0px 0px ${r.Small}`,
-    borderRight: `1px solid ${o.OnBackgroundBorder}`,
-    height: "40px",
-    gap: r.XSmall,
-    _last: {
-      borderRight: "none"
-    },
-    "&:has(input):not(:has(input[type='checkbox']))": {
-      padding: "0px !important"
-    },
-    "&:has(textarea)": {
-      padding: "0px !important"
-    }
-  },
-  "& tr": {
-    borderColor: o.OnBackgroundBorder
-  }
-}, l = {
-  cursor: "pointer",
-  backgroundColor: o.Surface,
-  color: o.OnBackgroundSubdued,
-  fontWeight: 400
-}, i = {
-  color: o.OnBackground
-}, c = n({
-  borderTop: "none",
-  _first: {
-    borderTop: "none"
-  },
-  _last: {
-    borderBottom: "1px solid",
-    borderColor: o.OnBackgroundBorder
-  },
-  '&[data-row-selected="true"]': {
-    backgroundColor: o.AccentHoverAlpha
-  },
-  _hover: {
-    // Show action menu button on row hover
-    "& .action-menu-button": {
-      opacity: 1
-    },
-    '&[data-allow-hovered="true"]': {
-      backgroundColor: o.AccentHoverAlpha
-    }
-  },
-  '&[data-is-root-level="true"]:not(:first-of-type)': {
-    borderTop: `1px solid ${o.OnBackgroundBorder}`
-  }
-}), p = {
-  "& tr": {
-    zIndex: 10,
-    backgroundColor: o.OnBackgroundSubdued
-  }
-}, h = a({
-  className: "table",
-  slots: ["root", "header", "body", "row", "columnHeader", "cell", "footer"],
-  base: {
-    root: d,
-    footer: i,
-    columnHeader: l,
-    row: c,
-    header: p
-  }
+import { ThemeColorVariable as t, ThemeFontVariable as n, ThemeSpaceVariable as r } from "../../theme/theme-types.js";
+import { defineSlotRecipe as i, defineStyle as a } from "@chakra-ui/react";
+//#region lib/components/table/table-recipe.ts
+var o = {
+	position: "relative",
+	isolation: "isolate",
+	borderCollapse: "separate",
+	borderSpacing: 0,
+	borderBottom: `1px solid ${t.OnBackgroundBorder}`,
+	fontFamily: n.Body,
+	fontSize: e.Small,
+	width: "100%",
+	"& thead": { "&[data-sticky-headers=\"true\"]": {
+		position: "sticky",
+		top: 0,
+		zIndex: 5
+	} },
+	"& th": {
+		padding: "0px",
+		position: "relative",
+		fontSize: e.Small,
+		height: "40px",
+		color: t.OnBackgroundSubdued,
+		fontWeight: 400,
+		textTransform: "none",
+		"& button": { _hover: { backgroundColor: t.BackgroundDisabled } }
+	},
+	"& td": {
+		color: t.OnBackground,
+		padding: `0px 0px 0px ${r.Small}`,
+		borderRight: `1px solid ${t.OnBackgroundBorder}`,
+		height: "40px",
+		gap: r.XSmall,
+		_last: { borderRight: "none" },
+		"&:has(input):not(:has(input[type='checkbox']))": { padding: "0px !important" },
+		"&:has(textarea)": { padding: "0px !important" }
+	},
+	"& tr": { borderColor: t.OnBackgroundBorder }
+}, s = {
+	cursor: "pointer",
+	backgroundColor: t.Surface,
+	color: t.OnBackgroundSubdued,
+	fontWeight: 400
+}, c = { color: t.OnBackground }, l = a({
+	borderTop: "none",
+	_first: { borderTop: "none" },
+	"&[data-row-selected=\"true\"]": { backgroundColor: t.AccentHoverAlpha },
+	_hover: {
+		"& .action-menu-button": { opacity: 1 },
+		"&[data-allow-hovered=\"true\"]": { backgroundColor: t.AccentHoverAlpha }
+	},
+	"&[data-is-root-level=\"true\"]:not(:first-of-type)": { "& > td": { borderTop: `1px solid ${t.OnBackgroundBorder}` } }
+}), u = { "& tr": {
+	zIndex: 10,
+	backgroundColor: t.OnBackgroundSubdued
+} }, d = i({
+	className: "table",
+	slots: [
+		"root",
+		"header",
+		"body",
+		"row",
+		"columnHeader",
+		"cell",
+		"footer"
+	],
+	base: {
+		root: o,
+		footer: c,
+		columnHeader: s,
+		row: l,
+		header: u
+	}
 });
-export {
-  h as tableRecipe
-};
+//#endregion
+export { d as tableRecipe };

package/dist/components/table/table-row-expand-toggle-button.js

@@ -1,36 +1,29 @@
-import { jsx as p } from "react/jsx-runtime";
-import { memo as s } from "react";
-import { translations as c } from "./translations.js";
-import { IconButton as d } from "../icon-button/icon-button.js";
-import { TreeViewCollapseIcon as x } from "../icon/icons/tree-view-collapse-icon.js";
-import { TreeViewExpandIcon as g } from "../icon/icons/tree-view-expand-icon.js";
-import { ThemeSpaceVariable as f } from "../../theme/theme-types.js";
-const V = s(({
-  row: o,
-  localeString: a,
-  rowIsExpanded: n,
-  hidden: t
-}) => {
-  const r = c[a], i = o.getToggleExpandedHandler(), l = (e) => {
-    e.stopPropagation(), i();
-  }, m = () => n ? `${r.collapseRow} ${o.index + 1}` : `${r.expandRow} ${o.index + 1}`;
-  return /* @__PURE__ */ p(
-    d,
-    {
-      size: "xs",
-      mr: f.XSmall,
-      variant: "ghost",
-      "aria-label": m(),
-      icon: n ? x : g,
-      onClick: l,
-      onKeyDown: (e) => e.stopPropagation(),
-      visibility: t ? "hidden" : "initial",
-      "aria-hidden": t,
-      tabIndex: t ? -1 : 0,
-      borderRadius: "0"
-    }
-  );
+"use no memo";
+import { ThemeSpaceVariable as e } from "../../theme/theme-types.js";
+import { TreeViewCollapseIcon as t } from "../icon/icons/tree-view-collapse-icon.js";
+import { TreeViewExpandIcon as n } from "../icon/icons/tree-view-expand-icon.js";
+import { IconButton as r } from "../icon-button/icon-button.js";
+import { translations as i } from "./translations.js";
+import { memo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region lib/components/table/table-row-expand-toggle-button.tsx
+var s = a(({ row: a, localeString: s, rowIsExpanded: c, hidden: l }) => {
+	let u = i[s], d = a.getToggleExpandedHandler();
+	return /* @__PURE__ */ o(r, {
+		size: "xs",
+		mr: e.XSmall,
+		variant: "ghost",
+		"aria-label": c ? `${u.collapseRow} ${a.index + 1}` : `${u.expandRow} ${a.index + 1}`,
+		icon: c ? t : n,
+		onClick: (e) => {
+			e.stopPropagation(), d();
+		},
+		onKeyDown: (e) => e.stopPropagation(),
+		visibility: l ? "hidden" : "initial",
+		"aria-hidden": l,
+		tabIndex: l ? -1 : 0,
+		borderRadius: "0"
+	});
 });
-export {
-  V as TableRowExpandToggleButton
-};
+//#endregion
+export { s as TableRowExpandToggleButton };

package/dist/components/table/table-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,KAAK,aAAa,CAAC,KAAK,SAAS,SAAS,IAAI;IAC7C,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9B,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;IACnD,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,KAAK,SAAS,SAAS,EAAE,6EAM7C,aAAa,CAAC,KAAK,CAAC,gCA0EtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAA0B,OAAO,aAAa,CAAC"}
+{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,KAAK,aAAa,CAAC,KAAK,SAAS,SAAS,IAAI;IAC7C,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9B,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;IACnD,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,KAAK,SAAS,SAAS,EAAE,6EAM7C,aAAa,CAAC,KAAK,CAAC,gCA2EtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAA0B,OAAO,aAAa,CAAC"}