@caspeco/casper-ui-library 10.8.0 → 10.9.0

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,18 +86,18 @@ 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,
 				headerGroup: c.table.getHeaderGroups(),
@@ -98,104 +106,104 @@ var I = ({ headerGroup: t, hideTableHeaderDropdown: n, portalContainerRef: r })
 				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"}

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

@@ -1,51 +1,68 @@
 "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 });
+import { ROW_SORTABLE_TYPE as e } from "./table.constants.js";
+import { useTableContext as t } from "./table-context.js";
+import { closestCenter as n } from "../../node_modules/@dnd-kit/collision/dist/index.js";
+import { SortableKeyboardPlugin as r } from "../../node_modules/@dnd-kit/dom/sortable.js";
+import { useSortable as i } from "../../node_modules/@dnd-kit/react/sortable.js";
+import { TableCell as a } from "./table-cell.js";
+import { memo as o, useCallback as s, useMemo as c } from "react";
+import { Table as l } from "@chakra-ui/react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+var f = o(({ row: o, visibleCells: f, onClickRow: p, showRowHoverStyle: m, onRowClickIndication: h }) => {
+	let g = t(), _ = o.depth === 0, v = g.rowReorderMode === "enabled" && _, { ref: y, handleRef: b, isDragging: x, isDropTarget: S } = i({
+		id: o.id,
+		index: o.index,
+		type: e,
+		accept: e,
+		group: e,
+		disabled: !v,
+		collisionDetector: n,
+		plugins: [r]
+	}), C = s((e) => {
+		p && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p(o.original, e));
+	}, [p, o.original]), w = s((e) => {
+		e.stopPropagation(), o.getToggleSelectedHandler(), p && p(o.original, e), h && g.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, {
+		o,
+		p,
+		h,
+		g
+	]), T = c(() => o.getIsSelected() || g.selectedRowIds?.includes(o.id), [
+		o,
+		g.rowHighlight,
+		g.selectedRowIds
+	]), E = g.getRowActions?.(o.original), D = (e) => g.disableSelectionCheckbox?.(e) ?? !1;
+	return /* @__PURE__ */ d(l.Row, {
+		ref: v ? y : void 0,
+		id: o.id,
+		tabIndex: p ? 0 : void 0,
+		onClick: w,
+		onKeyDown: C,
+		cursor: p ? "pointer" : void 0,
+		"data-row-selected": T,
+		"data-allow-hovered": m,
+		"data-is-root-level": o.depth === 0,
+		"data-dragging": x || void 0,
+		"data-drop-target": S || void 0,
+		children: [f.map((e, t) => {
+			let n = t === 0;
+			return /* @__PURE__ */ u(a, {
 				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)
+				visibleCells: f,
+				row: o,
+				rowIsExpanded: o.getIsExpanded(),
+				breakingContentState: g.breakingContentState,
+				localeString: g.localeString,
+				actionMenu: n ? E : void 0,
+				canSelectRows: g.canSelectRows && n,
+				isCheckboxDisabled: D(o),
+				dragHandleRef: n && v ? b : void 0
 			}, e.id);
-		}), f.enableColumnResizing && /* @__PURE__ */ o(a.Cell, {
+		}), g.enableColumnResizing && /* @__PURE__ */ u(l.Cell, {
 			"aria-hidden": !0,
 			style: { borderBottom: 0 }
 		})]
-	}, n.id);
+	}, o.id);
 });
 //#endregion
-export { c as TableRow };
+export { f as TableRow };

package/dist/components/table/table-sorted-reorder-prompt.d.ts

@@ -0,0 +1,8 @@
+import { Locales } from './translations.js';
+export declare const TableSortedReorderPrompt: ({ isOpen, localeString, onCancel, onConfirm, }: {
+    isOpen: boolean;
+    localeString: Locales;
+    onCancel: () => void;
+    onConfirm: () => void;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=table-sorted-reorder-prompt.d.ts.map

package/dist/components/table/table-sorted-reorder-prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-sorted-reorder-prompt.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-sorted-reorder-prompt.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE5D,eAAO,MAAM,wBAAwB,GAAI,gDAKtC;IACF,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACtB,gCA8BA,CAAC"}

package/dist/components/table/table-sorted-reorder-prompt.js

@@ -0,0 +1,64 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { ThemeColorVariable as t, ThemeFontSizeVariable as n, ThemeFontVariable as r, ThemeSpaceVariable as i } from "../../theme/theme-types.js";
+import { Text as a } from "../text/text.js";
+import { Button as o } from "../button/button.js";
+import { Flex as s } from "../flex/flex.js";
+import { Modal as c } from "../modal/modal.js";
+import { ModalBody as l } from "../modal/modal-body.js";
+import { ModalFooter as u } from "../modal/modal-footer.js";
+import { ModalHeader as d } from "../modal/modal-header.js";
+import { translations as f } from "./translations.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region lib/components/table/table-sorted-reorder-prompt.tsx
+var h = e(), g = (e) => {
+	let g = (0, h.c)(19), { isOpen: _, localeString: v, onCancel: y, onConfirm: b } = e, x = f[v], S;
+	g[0] === x.reorderSortedTitle ? S = g[1] : (S = /* @__PURE__ */ p(d, {
+		p: i.Medium,
+		children: /* @__PURE__ */ p(a, {
+			color: t.OnSurfaceHeader,
+			fontFamily: r.SubHeader,
+			fontWeight: "medium",
+			fontSize: n.XLarge,
+			children: x.reorderSortedTitle
+		})
+	}), g[0] = x.reorderSortedTitle, g[1] = S);
+	let C;
+	g[2] === x.reorderSortedBody ? C = g[3] : (C = /* @__PURE__ */ p(l, {
+		px: i.Medium,
+		children: /* @__PURE__ */ p(a, { children: x.reorderSortedBody })
+	}), g[2] = x.reorderSortedBody, g[3] = C);
+	let w;
+	g[4] !== y || g[5] !== x.cancel ? (w = /* @__PURE__ */ p(o, {
+		variant: "secondary",
+		onClick: y,
+		children: x.cancel
+	}), g[4] = y, g[5] = x.cancel, g[6] = w) : w = g[6];
+	let T;
+	g[7] !== b || g[8] !== x.reorderSortedConfirm ? (T = /* @__PURE__ */ p(o, {
+		variant: "primary",
+		onClick: b,
+		children: x.reorderSortedConfirm
+	}), g[7] = b, g[8] = x.reorderSortedConfirm, g[9] = T) : T = g[9];
+	let E;
+	g[10] !== w || g[11] !== T ? (E = /* @__PURE__ */ p(u, {
+		p: i.Medium,
+		children: /* @__PURE__ */ m(s, {
+			gap: i.Small,
+			justify: "flex-end",
+			w: "100%",
+			children: [w, T]
+		})
+	}), g[10] = w, g[11] = T, g[12] = E) : E = g[12];
+	let D;
+	return g[13] !== _ || g[14] !== y || g[15] !== S || g[16] !== C || g[17] !== E ? (D = /* @__PURE__ */ m(c, {
+		isOpen: _,
+		onClose: y,
+		children: [
+			S,
+			C,
+			E
+		]
+	}), g[13] = _, g[14] = y, g[15] = S, g[16] = C, g[17] = E, g[18] = D) : D = g[18], D;
+};
+//#endregion
+export { g as TableSortedReorderPrompt };