@adapttable/mui 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @adapttable/mui
 
+## 0.3.1
+
+### Patch Changes
+
+- 6ab1391: docs: every package README now leads with a click-to-play demo — a poster (with
+  a play button) that links to an mp4 of the table in action — replacing the
+  autoplaying GIF. Republishing so the new READMEs land on npm.
+- Updated dependencies [6ab1391]
+  - @adapttable/core@0.3.1
+
+## 0.3.0
+
+### Minor Changes
+
+- a90a2c2: Logical column pinning, so pinning stays correct under RTL.
+
+  **Breaking.** Pinned-side values are now `"start"` / `"end"` (were `"left"` /
+  `"right"`) — this is the public `pinned` layout value and the `colPin` URL token
+  (e.g. `colPin=name:start`); pre-existing `left`/`right` URLs no longer parse. The
+  label keys `pinLeft` / `pinRight` / `moveLeft` / `moveRight` are renamed to
+  `pinStart` / `pinEnd` / `moveStart` / `moveEnd`, with logical display strings
+  shipped for every locale. Pinning a data column is now a start-only toggle; the
+  injected actions column keeps its one-click end-pin.
+
+  To migrate: update any `defaultColumnLayout={{ pinned: { x: "left" } }}` to
+  `"start"` (and `"right"` → `"end"`), any persisted `colPin` URLs, and any custom
+  `labels` overriding the renamed keys.
+
+- a90a2c2: Numbered page buttons in every adapter's pagination (with first/last and
+  ellipsis truncation), replacing the prev/next-only control — driven by a shared
+  `paginationItems` builder in `@adapttable/core`.
+
+### Patch Changes
+
+- 07db665: Accessibility: give the filter overlay an accessible name — the Chakra and
+  Radix filter popovers and the MUI filter drawer now set `aria-label` on their
+  `role="dialog"` wrapper, fixing an `aria-dialog-name` violation. Locked in with
+  axe assertions across every adapter's filter overlay (popover + drawer).
+- Updated dependencies [a90a2c2]
+- Updated dependencies [a90a2c2]
+  - @adapttable/core@0.3.0
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,8 @@
 # @adapttable/mui
 
-![@adapttable/mui — a Material UI data table built on AdaptTable](https://raw.githubusercontent.com/orwa-mahmoud/adapttable/main/assets/hero-mui.png)
+[![@adapttable/mui — a Material UI data table built on AdaptTable](https://orwa-mahmoud.github.io/adapttable/media/demo-mui-poster.png)](https://orwa-mahmoud.github.io/adapttable/media/demo-mui.mp4)
+
+▶ **[Watch the demo](https://orwa-mahmoud.github.io/adapttable/media/demo-mui.mp4)**
 
 **[📖 Documentation](https://orwa-mahmoud.github.io/adapttable/)** · **[🚀 Live demo](https://orwa-mahmoud.github.io/adapttable/demo/)** · **[Get started](https://orwa-mahmoud.github.io/adapttable/getting-started/)**
 

package/dist/index.cjs

@@ -1611,12 +1611,18 @@ function _temp2(__0, c) {
 	}, c);
 }
 function FilterDrawer(t0) {
-	const $ = (0, react_compiler_runtime.c)(26);
+	const $ = (0, react_compiler_runtime.c)(29);
 	const { open, onClose, filters, activeFilterCount, onClearFilters, labels, dir: t1 } = t0;
 	const t2 = (t1 === void 0 ? "ltr" : t1) === "rtl" ? "left" : "right";
 	let t3;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = {
+	if ($[0] !== labels.filters) {
+		t3 = { paper: { "aria-label": labels.filters } };
+		$[0] = labels.filters;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
 			width: 360,
 			p: 2,
 			display: "flex",
@@ -1624,106 +1630,108 @@ function FilterDrawer(t0) {
 			gap: 2,
 			height: "100%"
 		};
-		$[0] = t3;
-	} else t3 = $[0];
-	let t4;
-	if ($[1] !== labels.filters) {
-		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Typography, {
-			variant: "h6",
-			children: labels.filters
-		});
-		$[1] = labels.filters;
 		$[2] = t4;
 	} else t4 = $[2];
 	let t5;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = {
+	if ($[3] !== labels.filters) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Typography, {
+			variant: "h6",
+			children: labels.filters
+		});
+		$[3] = labels.filters;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
 			flex: 1,
 			display: "flex",
 			flexDirection: "column",
 			gap: 2
 		};
-		$[3] = t5;
-	} else t5 = $[3];
-	let t6;
-	if ($[4] !== filters) {
-		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Box, {
-			sx: t5,
-			children: filters
-		});
-		$[4] = filters;
 		$[5] = t6;
 	} else t6 = $[5];
 	let t7;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = { justifyContent: "space-between" };
-		$[6] = t7;
-	} else t7 = $[6];
-	const t8 = activeFilterCount === 0;
-	let t9;
-	if ($[7] !== labels.clearAll || $[8] !== onClearFilters || $[9] !== t8) {
-		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Button, {
-			onClick: onClearFilters,
-			disabled: t8,
-			children: labels.clearAll
+	if ($[6] !== filters) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Box, {
+			sx: t6,
+			children: filters
 		});
-		$[7] = labels.clearAll;
-		$[8] = onClearFilters;
-		$[9] = t8;
-		$[10] = t9;
-	} else t9 = $[10];
+		$[6] = filters;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { justifyContent: "space-between" };
+		$[8] = t8;
+	} else t8 = $[8];
+	const t9 = activeFilterCount === 0;
 	let t10;
-	if ($[11] !== labels.applyFilters || $[12] !== onClose) {
+	if ($[9] !== labels.clearAll || $[10] !== onClearFilters || $[11] !== t9) {
 		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Button, {
+			onClick: onClearFilters,
+			disabled: t9,
+			children: labels.clearAll
+		});
+		$[9] = labels.clearAll;
+		$[10] = onClearFilters;
+		$[11] = t9;
+		$[12] = t10;
+	} else t10 = $[12];
+	let t11;
+	if ($[13] !== labels.applyFilters || $[14] !== onClose) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Button, {
 			variant: "contained",
 			onClick: onClose,
 			children: labels.applyFilters
 		});
-		$[11] = labels.applyFilters;
-		$[12] = onClose;
-		$[13] = t10;
-	} else t10 = $[13];
-	let t11;
-	if ($[14] !== t10 || $[15] !== t9) {
-		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material.Stack, {
+		$[13] = labels.applyFilters;
+		$[14] = onClose;
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== t10 || $[17] !== t11) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material.Stack, {
 			direction: "row",
-			sx: t7,
-			children: [t9, t10]
+			sx: t8,
+			children: [t10, t11]
 		});
-		$[14] = t10;
-		$[15] = t9;
-		$[16] = t11;
-	} else t11 = $[16];
-	let t12;
-	if ($[17] !== t11 || $[18] !== t4 || $[19] !== t6) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material.Box, {
-			sx: t3,
+		$[16] = t10;
+		$[17] = t11;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] !== t12 || $[20] !== t5 || $[21] !== t7) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material.Box, {
+			sx: t4,
 			children: [
-				t4,
-				t6,
-				t11
+				t5,
+				t7,
+				t12
 			]
 		});
-		$[17] = t11;
-		$[18] = t4;
-		$[19] = t6;
-		$[20] = t12;
-	} else t12 = $[20];
-	let t13;
-	if ($[21] !== onClose || $[22] !== open || $[23] !== t12 || $[24] !== t2) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Drawer, {
+		$[19] = t12;
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== onClose || $[24] !== open || $[25] !== t13 || $[26] !== t2 || $[27] !== t3) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Drawer, {
 			anchor: t2,
 			open,
 			onClose,
-			children: t12
+			slotProps: t3,
+			children: t13
 		});
-		$[21] = onClose;
-		$[22] = open;
-		$[23] = t12;
-		$[24] = t2;
+		$[23] = onClose;
+		$[24] = open;
 		$[25] = t13;
-	} else t13 = $[25];
-	return t13;
+		$[26] = t2;
+		$[27] = t3;
+		$[28] = t14;
+	} else t14 = $[28];
+	return t14;
 }
 //#endregion
 //#region src/components/ColumnMenu.tsx
@@ -1834,7 +1842,7 @@ function ActionsRow(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const hidden = t1;
-	const pinned = layout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "right";
+	const pinned = layout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "end";
 	let t2;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Divider, { sx: { my: .5 } });
@@ -1886,10 +1894,10 @@ function ActionsRow(t0) {
 		$[12] = labels.actions;
 		$[13] = t7;
 	} else t7 = $[13];
-	const t8 = `${pinned ? labels.unpin : labels.pinRight}: ${labels.actions}`;
+	const t8 = `${pinned ? labels.unpin : labels.pinEnd}: ${labels.actions}`;
 	let t9;
 	if ($[14] !== layout || $[15] !== pinned) {
-		t9 = () => layout.setPinned(_adapttable_core.ACTIONS_COLUMN_KEY, pinned ? void 0 : "right");
+		t9 = () => layout.setPinned(_adapttable_core.ACTIONS_COLUMN_KEY, pinned ? void 0 : "end");
 		$[14] = layout;
 		$[15] = pinned;
 		$[16] = t9;
@@ -2032,7 +2040,7 @@ function ColumnMenu(t0) {
 								cursor: "grab",
 								color: "text.disabled"
 							},
-							...(0, _adapttable_core.columnReorderKeyProps)(r.key, r.index, layout.move, `${labels.moveLeft} / ${labels.moveRight}: ${r.name}`),
+							...(0, _adapttable_core.columnReorderKeyProps)(r.key, r.index, layout.move, `${labels.moveStart} / ${labels.moveEnd}: ${r.name}`),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_adapttable_core.GripIcon, {})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisibilityToggle, {
@@ -2553,15 +2561,15 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, size, dir, p
 	} : void 0;
 	const selectionWidth = 48;
 	const actionsWidth = 120;
-	const leadLeft = (expandActive ? EXPAND_WIDTH : 0) + (selection ? selectionWidth : 0);
-	const leadRight = showActions ? actionsWidth : 0;
+	const leadStart = (expandActive ? EXPAND_WIDTH : 0) + (selection ? selectionWidth : 0);
+	const leadEnd = showActions ? actionsWidth : 0;
 	const leads = {
-		left: leadLeft,
-		right: leadRight
+		start: leadStart,
+		end: leadEnd
 	};
 	const selectionLead = expandActive ? EXPAND_WIDTH : 0;
-	const hasLeftPin = table.columns.some((c_0) => pinOffset?.(c_0.key)?.side === "left");
-	const stickActions = table.columns.some((c_1) => pinOffset?.(c_1.key)?.side === "right") || actionsPinned;
+	const hasStartPin = table.columns.some((c_0) => pinOffset?.(c_0.key)?.side === "start");
+	const stickActions = table.columns.some((c_1) => pinOffset?.(c_1.key)?.side === "end") || actionsPinned;
 	const headCellSx = (column) => {
 		const pin = (0, _adapttable_core.pinnedCellStyle)(pinOffset?.(column.key), _adapttable_core.PIN_Z.headerPinned, leads);
 		const width = pin ? (0, _adapttable_core.pinnedColumnWidth)(column, columnWidths) : columnWidths?.[column.key] ?? column.width;
@@ -2601,8 +2609,8 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, size, dir, p
 		const cells = {};
 		for (const column_0 of columns) {
 			const pin_2 = (0, _adapttable_core.pinnedCellStyle)(pinOffset?.(column_0.key), _adapttable_core.PIN_Z.body, {
-				left: leadLeft,
-				right: leadRight
+				start: leadStart,
+				end: leadEnd
 			});
 			cells[column_0.key] = {
 				...pin_2 && {
@@ -2614,19 +2622,19 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, size, dir, p
 		}
 		return {
 			cells,
-			expand: edge("left", hasLeftPin),
-			selection: edge("left", hasLeftPin, selectionLead),
+			expand: edge("start", hasStartPin),
+			selection: edge("start", hasStartPin, selectionLead),
 			actions: {
-				...edge("right", stickActions),
+				...edge("end", stickActions),
 				textAlign: "end"
 			}
 		};
 	}, [
 		columns,
 		pinOffset,
-		leadLeft,
-		leadRight,
-		hasLeftPin,
+		leadStart,
+		leadEnd,
+		hasStartPin,
 		stickActions,
 		selectionLead
 	]);
@@ -2638,7 +2646,7 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, size, dir, p
 	else if (hasPinned || overflow.overflowing) boxSx = { overflowX: "auto" };
 	const minWidth = (0, _adapttable_core.tableMinWidth)(columns, {
 		widths: columnWidths,
-		extra: leadLeft + leadRight
+		extra: leadStart + leadEnd
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Box, {
 		ref: (node) => {
@@ -2666,11 +2674,11 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, size, dir, p
 				] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material.TableRow, { children: [
 					expandActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.TableCell, {
 						padding: "checkbox",
-						sx: edgeHeadSx("left", hasLeftPin)
+						sx: edgeHeadSx("start", hasStartPin)
 					}),
 					selection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.TableCell, {
 						padding: "checkbox",
-						sx: edgeHeadSx("left", hasLeftPin, selectionLead),
+						sx: edgeHeadSx("start", hasStartPin, selectionLead),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Checkbox, {
 							slotProps: { input: { "aria-label": labels.selectAll } },
 							checked: selection.headerState === "all",
@@ -2708,7 +2716,7 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, size, dir, p
 					}),
 					showActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.TableCell, {
 						sx: {
-							...edgeHeadSx("right", stickActions),
+							...edgeHeadSx("end", stickActions),
 							textAlign: "end"
 						},
 						children: labels.actions
@@ -3019,7 +3027,7 @@ function resolveActionsColumn(declared, layout) {
 	return {
 		hasRowActions,
 		rowActions,
-		actionsPinned: rowActions !== void 0 && layout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "right"
+		actionsPinned: rowActions !== void 0 && layout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] === "end"
 	};
 }
 /**