@caspeco/casper-ui-library 10.7.3 → 10.9.0

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

@@ -1,131 +1,139 @@
 "use no memo";
 import { ThemeColorVariable as e, ThemeFontSizeVariable as t, ThemeIconSizeVariable as n, ThemeSpaceVariable as r } from "../../theme/theme-types.js";
-import { FilterIcon as i } from "../icon/icons/filter-icon.js";
-import { HideIcon as a } from "../icon/icons/hide-icon.js";
-import { SortAscIcon as o } from "../icon/icons/sort-asc-icon.js";
-import { SortDescIcon as s } from "../icon/icons/sort-desc-icon.js";
-import { ThumbtackIcon as c } from "../icon/icons/thumbtack-icon.js";
-import { Text as l } from "../text/text.js";
-import { Box as u } from "../box/box.js";
-import { Menu as d } from "../menu/menu.js";
-import { MenuBoxButton as f } from "../menu/menu-box-button.js";
-import { MenuDivider as p } from "../menu/menu-divider.js";
-import { MenuItem as m } from "../menu/menu-item.js";
-import { MenuList as h } from "../menu/menu-list.js";
-import { Switch as g } from "../switch/switch.js";
-import { flexRender as _ } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useTableContext as v } from "./table-context.js";
-import { translations as y } from "./translations.js";
-import { memo as b, useCallback as x, useMemo as S } from "react";
-import { Portal as C } from "@chakra-ui/react";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-var D = b(({ header: b, breakingContentState: D, onBreakingContentChange: O, setBreakingContentState: k, headerGroup: A, sorting: j, setSorting: M, localeString: N, portalContainerRef: P, dragRef: F }) => {
-	let I = y[N], { getTableFilterMethods: L } = v(), R = x(({ checked: e }) => {
-		let t = {
-			...D,
-			[b.column.id]: e
+import { CloseIcon as i } from "../icon/icons/close-icon.js";
+import { FilterIcon as a } from "../icon/icons/filter-icon.js";
+import { HideIcon as o } from "../icon/icons/hide-icon.js";
+import { SortAscIcon as s } from "../icon/icons/sort-asc-icon.js";
+import { SortDescIcon as c } from "../icon/icons/sort-desc-icon.js";
+import { ThumbtackIcon as l } from "../icon/icons/thumbtack-icon.js";
+import { Text as u } from "../text/text.js";
+import { Box as d } from "../box/box.js";
+import { Menu as f } from "../menu/menu.js";
+import { MenuBoxButton as p } from "../menu/menu-box-button.js";
+import { MenuDivider as m } from "../menu/menu-divider.js";
+import { MenuItem as h } from "../menu/menu-item.js";
+import { MenuList as g } from "../menu/menu-list.js";
+import { Switch as _ } from "../switch/switch.js";
+import { flexRender as v } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useTableContext as y } from "./table-context.js";
+import { translations as b } from "./translations.js";
+import { memo as x, useCallback as S, useMemo as C } from "react";
+import { Portal as w } from "@chakra-ui/react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region lib/components/table/table-header-dropdown.tsx
+var O = ({ portalContainerRef: i, dragRef: a, ...o }) => {
+	let { header: l, sorting: u } = o, m = C(() => {
+		let e = u.find((e) => e.id === l.column.id);
+		return /* @__PURE__ */ D(T, { children: [e && (e.desc ? /* @__PURE__ */ E(c, { size: n.XSmall }) : /* @__PURE__ */ E(s, { size: n.XSmall })), /* @__PURE__ */ E(d, {
+			minW: 0,
+			overflowWrap: "break-word",
+			children: v(l.column.columnDef.header, l.getContext())
+		})] });
+	}, [l, u]);
+	return /* @__PURE__ */ E(f, {
+		isLazy: !0,
+		children: ({ isOpen: n }) => /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(p, {
+			ref: a,
+			color: e.OnBackgroundSubdued,
+			textTransform: "none",
+			fontSize: t.Small,
+			h: "40px",
+			display: "flex",
+			textAlign: "inherit",
+			alignItems: "center",
+			lineHeight: "1.2",
+			padding: `0px 0px 0px ${r.Small}`,
+			backgroundColor: n ? e.BackgroundDisabled : "unset",
+			w: "100%",
+			children: v(m, l.getContext())
+		}), /* @__PURE__ */ E(w, {
+			container: i,
+			children: /* @__PURE__ */ E(g, {
+				fontSize: t.Medium,
+				children: /* @__PURE__ */ E(k, { ...o })
+			})
+		})] })
+	});
+}, k = ({ header: e, breakingContentState: t, onBreakingContentChange: n, setBreakingContentState: r, headerGroup: d, sorting: f, setSorting: p, localeString: g }) => {
+	let v = b[g], { getTableFilterMethods: x } = y(), w = S(({ checked: i }) => {
+		let a = {
+			...t,
+			[e.column.id]: i
 		};
-		k(t), O?.(t);
+		r(a), n?.(a);
 	}, [
-		D,
-		b.column.id,
-		O,
-		k
-	]), z = x((e) => {
+		t,
+		e.column.id,
+		n,
+		r
+	]), O = S((e) => {
 		let t = e.getIndex();
-		A.forEach((n) => {
+		d.forEach((n) => {
 			n.headers.forEach((n, r) => {
 				let { column: i } = n;
 				e.getIsPinned() ? r >= t && i.pin(!1) : r <= t && i.pin("left");
 			});
 		});
-	}, [A]), B = S(() => /* @__PURE__ */ E(w, { children: [j.find((e) => e.id === b.column.id) && (j.find((e) => e.desc) ? /* @__PURE__ */ T(s, { size: n.XSmall }) : /* @__PURE__ */ T(o, { size: n.XSmall })), /* @__PURE__ */ T(u, {
-		minW: 0,
-		overflowWrap: "break-word",
-		children: _(b.column.columnDef.header, b.getContext())
-	})] }), [b, j]), V = S(() => L()?.canFilterOnColumn(b.column.id) ?? !1, [b.column.id, L]), H = S(() => /* @__PURE__ */ E(w, { children: [
-		b.column.getCanSort() && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(m, {
-			onClick: () => M([{
-				desc: !1,
-				id: b.column.id
-			}]),
-			leftIcon: o,
-			value: "sort-asc",
-			children: /* @__PURE__ */ T(l, { children: I.sortUp })
-		}), /* @__PURE__ */ T(m, {
-			onClick: () => M([{
-				desc: !0,
-				id: b.column.id
-			}]),
-			leftIcon: s,
-			value: "sort-desc",
-			children: /* @__PURE__ */ T(l, { children: I.sortDown })
-		})] }),
-		V && /* @__PURE__ */ T(m, {
+	}, [d]), k = C(() => x()?.canFilterOnColumn(e.column.id) ?? !1, [e.column.id, x]);
+	return /* @__PURE__ */ D(T, { children: [
+		e.column.getCanSort() && /* @__PURE__ */ D(T, { children: [
+			/* @__PURE__ */ E(h, {
+				onClick: () => p([{
+					desc: !1,
+					id: e.column.id
+				}]),
+				leftIcon: s,
+				value: "sort-asc",
+				children: /* @__PURE__ */ E(u, { children: v.sortUp })
+			}),
+			/* @__PURE__ */ E(h, {
+				onClick: () => p([{
+					desc: !0,
+					id: e.column.id
+				}]),
+				leftIcon: c,
+				value: "sort-desc",
+				children: /* @__PURE__ */ E(u, { children: v.sortDown })
+			}),
+			f.some((t) => t.id === e.column.id) && /* @__PURE__ */ E(h, {
+				onClick: () => p(f.filter((t) => t.id !== e.column.id)),
+				leftIcon: i,
+				value: "clear-sorting",
+				children: /* @__PURE__ */ E(u, { children: v.clearSorting })
+			})
+		] }),
+		k && /* @__PURE__ */ E(h, {
 			onClick: () => {
-				let e = L();
-				e?.onToggleFilterVisibility && e.onToggleFilterVisibility(b.column.id);
+				let t = x();
+				t?.onToggleFilterVisibility && t.onToggleFilterVisibility(e.column.id);
 			},
-			leftIcon: i,
+			leftIcon: a,
 			value: "filter",
-			children: /* @__PURE__ */ T(l, { children: I.filter })
+			children: /* @__PURE__ */ E(u, { children: v.filter })
 		}),
-		(b.column.getCanSort() || V) && /* @__PURE__ */ T(p, {}),
-		b.column.getCanHide() && /* @__PURE__ */ T(m, {
-			onClick: b.column.getToggleVisibilityHandler(),
-			leftIcon: a,
+		(e.column.getCanSort() || k) && /* @__PURE__ */ E(m, {}),
+		e.column.getCanHide() && /* @__PURE__ */ E(h, {
+			onClick: e.column.getToggleVisibilityHandler(),
+			leftIcon: o,
 			value: "hide",
-			children: /* @__PURE__ */ T(l, { children: I.hideColumn })
+			children: /* @__PURE__ */ E(u, { children: v.hideColumn })
 		}),
-		/* @__PURE__ */ T(m, {
-			onClick: () => z(b.column),
-			leftIcon: c,
+		/* @__PURE__ */ E(h, {
+			onClick: () => O(e.column),
+			leftIcon: l,
 			value: "pin",
-			children: /* @__PURE__ */ T(l, { children: b.column.getIsPinned() ? I.stopPinningColumn : I.pinUpToColumn })
+			children: /* @__PURE__ */ E(u, { children: e.column.getIsPinned() ? v.stopPinningColumn : v.pinUpToColumn })
 		}),
-		/* @__PURE__ */ T(p, {}),
-		/* @__PURE__ */ E(m, {
+		/* @__PURE__ */ E(m, {}),
+		/* @__PURE__ */ D(h, {
 			itemType: "switch",
 			value: "breaking-content",
-			children: [I.breakingContent, /* @__PURE__ */ T(g, {
-				onCheckedChange: R,
-				isChecked: D[b.column.id]
+			children: [v.breakingContent, /* @__PURE__ */ E(_, {
+				onCheckedChange: w,
+				isChecked: t[e.column.id]
 			})]
 		})
-	] }), [
-		D,
-		V,
-		L,
-		z,
-		b.column,
-		R,
-		M,
-		I
-	]);
-	return /* @__PURE__ */ T(d, {
-		isLazy: !0,
-		children: ({ isOpen: n }) => /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(f, {
-			ref: F,
-			color: e.OnBackgroundSubdued,
-			textTransform: "none",
-			fontSize: t.Small,
-			h: "40px",
-			display: "flex",
-			textAlign: "inherit",
-			alignItems: "center",
-			lineHeight: "1.2",
-			padding: `0px 0px 0px ${r.Small}`,
-			backgroundColor: n ? e.BackgroundDisabled : "unset",
-			w: "100%",
-			children: _(B, b.getContext())
-		}), /* @__PURE__ */ T(C, {
-			container: P,
-			children: /* @__PURE__ */ T(h, {
-				fontSize: t.Medium,
-				children: H
-			})
-		})] })
-	});
-});
+	] });
+}, A = x(O);
 //#endregion
-export { D as TableHeaderDropdown };
+export { A as TableHeaderDropdown };

package/dist/components/table/table-header-dropdown.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table-header-dropdown.spec.d.ts.map

package/dist/components/table/table-header-dropdown.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-dropdown.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-dropdown.spec.tsx"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAO/F,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,gCAmD3F,CAAC;AAiQF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-header-row.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAQ/F,OAAO,KAAK,EAAmB,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,mBAAmB,CAAC,KAAK,SAAS,SAAS,IAAI;IACnD,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,uBAAuB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C,CAAC;AAMF,QAAA,MAAM,uBAAuB,GAAI,KAAK,SAAS,SAAS,EAAE,+DAIvD,mBAAmB,CAAC,KAAK,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,gCAwD3F,CAAC;AAoQF,eAAO,MAAM,cAAc,EAAoC,OAAO,uBAAuB,CAAC"}

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

@@ -12,65 +12,73 @@ 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";
+import { COLUMN_SORTABLE_TYPE as g } from "./table.constants.js";
+import { getColumnWidth as _, getPinnedLeft as v } from "./helper.js";
+import { useTableContext as y } from "./table-context.js";
+import { interpolate as b, translations as x } from "./translations.js";
+import { closestCenter as S } from "../../node_modules/@dnd-kit/collision/dist/index.js";
+import { SortableKeyboardPlugin as C } from "../../node_modules/@dnd-kit/dom/sortable.js";
+import { useSortable as w } from "../../node_modules/@dnd-kit/react/sortable.js";
+import { ColumnResizeHandle as T } from "./table-column-resize-handle.js";
+import { TableHeaderDropdown as E } from "./table-header-dropdown.js";
+import { memo as D, useCallback as O, useMemo as k } from "react";
+import { Box as A, Portal as j, Table as M, useMediaQuery as N } from "@chakra-ui/react";
+import { Fragment as P, jsx as F, jsxs as I } 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,
+function L(e, t) {
+	return (e ? 24 : 0) + (t ? 24 : 0);
+}
+var R = ({ headerGroup: t, hideTableHeaderDropdown: n, portalContainerRef: r }) => {
+	let i = y(), a = !!i.getRowActions, o = L(a, i.rowReorderMode !== "off"), s = (i.selectedRowIds?.length ?? 0) > 0 && (i.selectionActions?.length ?? 0) > 0, c = +!!i.enableColumnResizing;
+	return /* @__PURE__ */ F(P, { children: /* @__PURE__ */ F(M.Row, { children: s ? /* @__PURE__ */ F(M.ColumnHeader, {
+		colSpan: t.headers.length + c,
 		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
+			paddingLeft: o ? `${o}px` : void 0
 		},
 		scope: "col",
 		zIndex: 1,
-		children: /* @__PURE__ */ P(z, {
+		children: /* @__PURE__ */ F(V, {
 			showSelectAll: !0,
-			children: /* @__PURE__ */ P(V, {})
+			children: /* @__PURE__ */ F(U, {})
 		})
-	}) : /* @__PURE__ */ F(N, { children: [t.headers.map((e, t) => /* @__PURE__ */ P(L, {
+	}) : /* @__PURE__ */ I(P, { children: [t.headers.map((e, t) => /* @__PURE__ */ F(z, {
 		header: e,
 		hideTableHeaderDropdown: n,
 		applyActionMenuPadding: a,
 		portalContainerRef: r,
 		isFirstColumn: !e.isPlaceholder && t === 0,
+		leadingSlotsWidth: o,
 		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({
+	}, e.id)), i.enableColumnResizing && /* @__PURE__ */ F(B, {})] }) }, t.id) });
+}, z = ({ header: t, hideTableHeaderDropdown: n, portalContainerRef: i, isFirstColumn: a = !1, leadingSlotsWidth: o = 0, enableColumnReorder: s = !1 }) => {
+	let c = y(), { column: l } = t, u = c.enableColumnResizing, d = u && l.getCanResize(), f = s && !l.columnDef.meta?.disableColumnReorder, { ref: p, isDragging: m, isDropTarget: b } = w({
 		id: l.id,
 		index: l.getIndex(),
+		type: g,
+		accept: g,
+		group: g,
 		disabled: !f,
-		collisionDetector: y,
-		plugins: [b]
+		collisionDetector: S,
+		plugins: [C]
 	});
-	return /* @__PURE__ */ F(j.ColumnHeader, {
+	return /* @__PURE__ */ I(M.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,
+		backgroundColor: b || m ? e.Background : void 0,
 		scope: "col",
 		style: {
 			...((t) => {
-				let n = t.getIsPinned(), r = g(t, u);
+				let n = t.getIsPinned(), r = _(t, u);
 				return {
 					position: n ? "sticky" : "relative",
-					left: n ? _(t, u) : void 0,
+					left: n ? v(t, u) : void 0,
 					backgroundColor: n ? e.Background : void 0,
 					zIndex: +!!n,
 					width: r,
@@ -78,125 +86,124 @@ var I = ({ headerGroup: t, hideTableHeaderDropdown: n, portalContainerRef: r })
 				};
 			})(l),
 			borderBottom: `1px solid ${e.OnBackgroundBorder}`,
-			paddingLeft: o && i ? "24px" : void 0,
+			paddingLeft: a && o ? `${o}px` : void 0,
 			...f ? {
 				userSelect: "none",
 				WebkitUserSelect: "none"
 			} : {}
 		},
-		children: [/* @__PURE__ */ P(z, {
-			showSelectAll: c.canSelectRows && o,
-			children: /* @__PURE__ */ P(N, { children: n ? /* @__PURE__ */ P(k, {
+		children: [/* @__PURE__ */ F(V, {
+			showSelectAll: c.canSelectRows && a,
+			children: /* @__PURE__ */ F(P, { children: n ? /* @__PURE__ */ F(A, {
 				paddingLeft: r.Small,
 				children: h(t.column.columnDef.header, t.getContext())
-			}) : /* @__PURE__ */ P(T, {
+			}) : /* @__PURE__ */ F(E, {
 				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,
+				portalContainerRef: i,
 				dragRef: f ? p : void 0
 			}) })
-		}), d && /* @__PURE__ */ P(w, { header: t })]
+		}), d && /* @__PURE__ */ F(T, { header: t })]
 	});
-}, R = () => /* @__PURE__ */ P(j.ColumnHeader, {
+}, B = () => /* @__PURE__ */ F(M.ColumnHeader, {
 	"aria-hidden": !0,
 	scope: "col",
 	style: { borderBottom: `1px solid ${e.OnBackgroundBorder}` }
-}), z = ({ showSelectAll: e, children: t }) => e ? /* @__PURE__ */ F(l, {
+}), V = ({ showSelectAll: e, children: t }) => e ? /* @__PURE__ */ I(l, {
 	w: "100%",
 	align: "center",
-	children: [/* @__PURE__ */ P(k, {
+	children: [/* @__PURE__ */ F(A, {
 		justifyContent: "center",
 		alignItems: "center",
-		children: /* @__PURE__ */ P(B, {})
+		children: /* @__PURE__ */ F(H, {})
 	}), t]
-}) : /* @__PURE__ */ P(N, { children: t }), B = () => {
-	let e = v(), t = D(({ checked: t }) => {
+}) : /* @__PURE__ */ F(P, { children: t }), H = () => {
+	let e = y(), t = O(({ 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(() => {
+	}, [e]), { allIsSelected: n, shouldShowIndeterminateState: r } = k(() => {
 		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, {
+	return /* @__PURE__ */ F(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, {
+}, U = () => {
+	let { localeString: i, selectedRowIds: s = [], selectionActions: u = [], totalDataCount: d } = y(), p = x[i], [h] = N(["(min-width: 48em)"]), g = u.length > 3 || !h, _ = s.length, v = d ? b(p.selectedWithTotal, {
 		count: _,
 		total: d
-	}) : s.length === 1 ? S(p.selectedSingular, { count: 1 }) : S(p.selected, { count: _ });
-	return /* @__PURE__ */ F(l, {
+	}) : s.length === 1 ? b(p.selectedSingular, { count: 1 }) : b(p.selected, { count: _ });
+	return /* @__PURE__ */ I(l, {
 		gap: r.Medium,
 		align: "center",
 		alignContent: "center",
 		children: [
-			/* @__PURE__ */ P(k, {
+			/* @__PURE__ */ F(A, {
 				pl: r.Small,
 				color: e.OnBackground,
 				fontFamily: n.Body,
 				fontSize: t.Medium,
 				whiteSpace: "nowrap",
 				css: { fontVariantNumeric: "normal" },
-				children: y
+				children: v
 			}),
-			/* @__PURE__ */ P(k, { children: /* @__PURE__ */ P(m, {
+			/* @__PURE__ */ F(A, { children: /* @__PURE__ */ F(m, {
 				orientation: "vertical",
 				height: "20px"
 			}) }),
-			/* @__PURE__ */ P(l, {
+			/* @__PURE__ */ F(l, {
 				gap: r.Small,
 				align: "center",
-				children: g ? /* @__PURE__ */ F(o, { children: [/* @__PURE__ */ P(c, {
+				children: g ? /* @__PURE__ */ I(o, { children: [/* @__PURE__ */ F(c, {
 					variant: "ghost",
 					rightIcon: a,
 					size: "sm",
 					children: p.action
-				}), /* @__PURE__ */ P(A, { children: /* @__PURE__ */ P(f, { children: u.map((e) => /* @__PURE__ */ P(H, {
+				}), /* @__PURE__ */ F(j, { children: /* @__PURE__ */ F(f, { children: u.map((e) => /* @__PURE__ */ F(W, {
 					isMenuItem: !0,
 					action: e
-				}, e.name)) }) })] }) : u.map((e) => /* @__PURE__ */ P(H, {
+				}, e.name)) }) })] }) : u.map((e) => /* @__PURE__ */ F(W, {
 					isMenuItem: !1,
 					action: e
 				}, e.name))
 			})
 		]
 	});
-}, H = ({ isMenuItem: t, action: n }) => {
-	let { selectedRowIds: r, localeString: a } = v(), o = C[a], c = D(() => {
+}, W = ({ isMenuItem: t, action: n }) => {
+	let { selectedRowIds: r, localeString: a } = y(), o = x[a], c = O(() => {
 		n.onClick(r || []);
 	}, [n, r]);
-	return t ? /* @__PURE__ */ P(d, {
+	return t ? /* @__PURE__ */ F(d, {
 		onClick: c,
 		value: n.name,
-		children: n.variant === "delete" ? /* @__PURE__ */ P(k, {
+		children: n.variant === "delete" ? /* @__PURE__ */ F(A, {
 			as: "span",
 			color: e.Error,
 			children: n.name
 		}) : n.name
-	}) : n.variant === "delete" ? /* @__PURE__ */ P(u, {
+	}) : n.variant === "delete" ? /* @__PURE__ */ F(u, {
 		onClick: c,
 		icon: i,
 		"aria-label": o.deleteSelectedRows,
 		size: "sm",
 		variant: "ghost"
-	}) : /* @__PURE__ */ P(s, {
+	}) : /* @__PURE__ */ F(s, {
 		onClick: c,
 		size: "sm",
 		variant: "ghost",
 		children: n.name
 	});
-}, U = E(I);
+}, G = D(R);
 //#endregion
-export { U as TableHeaderRow };
+export { G 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;AAgG1B,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;AA2G1B,eAAO,MAAM,WAAW,EAAE,oBAUxB,CAAC"}

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

@@ -45,8 +45,14 @@ var o = {
 	borderTop: "none",
 	_first: { borderTop: "none" },
 	"&[data-row-selected=\"true\"]": { backgroundColor: t.AccentHoverAlpha },
+	"&[data-dragging=\"true\"]": {
+		opacity: .5,
+		"& .row-drag-handle": { opacity: 1 }
+	},
+	"&[data-drop-target=\"true\"]": { backgroundColor: t.AccentHoverAlpha },
 	_hover: {
 		"& .action-menu-button": { opacity: 1 },
+		"& .row-drag-handle": { opacity: 1 },
 		"&[data-allow-hovered=\"true\"]": { backgroundColor: t.AccentHoverAlpha }
 	},
 	"&[data-is-root-level=\"true\"]:not(:first-of-type)": { "& > td": { borderTop: `1px solid ${t.OnBackgroundBorder}` } }

package/dist/components/table/table-row-drag-handle.d.ts

@@ -0,0 +1,6 @@
+import { Locales } from './translations.js';
+export declare const TableRowDragHandle: import('react').MemoExoticComponent<({ localeString, handleRef, }: {
+    localeString: Locales;
+    handleRef?: (element: Element | null) => void;
+}) => import("react").JSX.Element>;
+//# sourceMappingURL=table-row-drag-handle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-row-drag-handle.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row-drag-handle.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AA0F5D,eAAO,MAAM,kBAAkB,qEA9E5B;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C,iCA2EkE,CAAC"}

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

@@ -0,0 +1,53 @@
+"use no memo";
+import { ThemeColorVariable as e, ThemeIconSizeVariable as t } from "../../theme/theme-types.js";
+import { GripMoreIcon as n } from "../icon/icons/grip-more-icon.js";
+import { useTableContext as r } from "./table-context.js";
+import { translations as i } from "./translations.js";
+import { memo as a, useRef as o } from "react";
+import { Box as s } from "@chakra-ui/react";
+import { jsx as c } from "react/jsx-runtime";
+var l = a(({ localeString: a, handleRef: l }) => {
+	let u = i[a], { rowReorderMode: d, setIsSortedReorderPromptOpen: f } = r(), p = d === "blockedBySort", m = o(null), h = (e) => {
+		p && (m.current = {
+			x: e.clientX,
+			y: e.clientY
+		}, e.currentTarget.setPointerCapture(e.pointerId));
+	}, g = (e) => {
+		let t = m.current;
+		t && (Math.hypot(e.clientX - t.x, e.clientY - t.y) < 4 || (m.current = null, f(!0)));
+	}, _ = () => {
+		m.current = null;
+	};
+	return /* @__PURE__ */ c(s, {
+		ref: l,
+		onPointerDown: h,
+		onPointerMove: g,
+		onPointerUp: _,
+		onPointerCancel: _,
+		onClick: (e) => e.stopPropagation(),
+		onKeyDown: (e) => {
+			e.stopPropagation(), p && (e.key === " " || e.key === "Enter") && (e.preventDefault(), f(!0));
+		},
+		role: "button",
+		"aria-label": u.reorderRow,
+		tabIndex: 0,
+		className: "row-drag-handle",
+		position: "absolute",
+		left: "0",
+		top: "0",
+		height: "100%",
+		width: "24px",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		color: e.OnBackgroundSubdued,
+		opacity: 0,
+		_focusVisible: { opacity: 1 },
+		cursor: "grab",
+		userSelect: "none",
+		css: { "&:active": { cursor: "grabbing" } },
+		children: /* @__PURE__ */ c(n, { size: t.Small })
+	});
+});
+//#endregion
+export { l as TableRowDragHandle };

package/dist/components/table/table-row-reorder.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table-row-reorder.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-row-reorder.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-row-reorder.spec.tsx"],"names":[],"mappings":""}

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,gCA2EtB,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":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAKvD,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,gCAiGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAA0B,OAAO,aAAa,CAAC"}