@adapttable/unstyled 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @adapttable/unstyled
 
+## 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
+
+- Updated dependencies [a90a2c2]
+- Updated dependencies [a90a2c2]
+  - @adapttable/core@0.3.0
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # @adapttable/unstyled
 
-![@adapttable/unstyled — a headless table styled with Tailwind / shadcn](https://raw.githubusercontent.com/orwa-mahmoud/adapttable/main/assets/hero-unstyled.png)
+![@adapttable/unstyled — a headless table styled with Tailwind / shadcn](https://orwa-mahmoud.github.io/adapttable/media/demo-unstyled.gif)
 
 **[📖 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

@@ -1438,7 +1438,7 @@ function _temp$1(n) {
 	}, n);
 }
 function Footer(t0) {
-	const $ = (0, react_compiler_runtime.c)(38);
+	const $ = (0, react_compiler_runtime.c)(53);
 	const { pagination, source, labels, classNames } = t0;
 	const { safePage, totalPages, fromIndex, toIndex } = pagination;
 	const t1 = classNames.footer;
@@ -1467,95 +1467,142 @@ function Footer(t0) {
 		$[7] = toIndex;
 		$[8] = t3;
 	} else t3 = $[8];
-	let t4;
+	const t4 = classNames.pager;
+	let t5;
 	if ($[9] !== labels || $[10] !== safePage || $[11] !== totalPages) {
-		t4 = labels.pageOf({
+		t5 = labels.pageOf({
 			page: safePage,
 			total: totalPages
 		});
 		$[9] = labels;
 		$[10] = safePage;
 		$[11] = totalPages;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] !== t4) {
-		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t4 });
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
-	const t6 = safePage <= 1;
-	let t7;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t5) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t5 });
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	const t7 = safePage <= 1;
+	let t8;
 	if ($[15] !== safePage || $[16] !== source) {
-		t7 = () => source.setPage(safePage - 1);
+		t8 = () => source.setPage(safePage - 1);
 		$[15] = safePage;
 		$[16] = source;
-		$[17] = t7;
-	} else t7 = $[17];
-	let t8;
-	if ($[18] !== classNames.pageButton || $[19] !== labels.previousPage || $[20] !== t6 || $[21] !== t7) {
-		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== classNames.pageButton || $[19] !== labels.previousPage || $[20] !== t7 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"aria-label": labels.previousPage,
 			"data-adapttable-part": "page-prev",
 			className: classNames.pageButton,
-			disabled: t6,
-			onClick: t7,
+			disabled: t7,
+			onClick: t8,
 			children: "‹"
 		});
 		$[18] = classNames.pageButton;
 		$[19] = labels.previousPage;
-		$[20] = t6;
-		$[21] = t7;
-		$[22] = t8;
-	} else t8 = $[22];
-	const t9 = safePage >= totalPages;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
 	let t10;
-	if ($[23] !== safePage || $[24] !== source) {
-		t10 = () => source.setPage(safePage + 1);
-		$[23] = safePage;
-		$[24] = source;
-		$[25] = t10;
-	} else t10 = $[25];
-	let t11;
-	if ($[26] !== classNames.pageButton || $[27] !== labels.nextPage || $[28] !== t10 || $[29] !== t9) {
-		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	if ($[23] !== classNames.pageButton || $[24] !== classNames.pageEllipsis || $[25] !== safePage || $[26] !== source || $[27] !== totalPages) {
+		let t11;
+		if ($[29] !== classNames.pageButton || $[30] !== classNames.pageEllipsis || $[31] !== safePage || $[32] !== source) {
+			t11 = (item, i) => item === "ellipsis" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-adapttable-part": "page-ellipsis",
+				"aria-hidden": "true",
+				className: classNames.pageEllipsis,
+				children: "…"
+			}, `ellipsis-${i}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-adapttable-part": "page-number",
+				"aria-current": item === safePage ? "page" : void 0,
+				className: classNames.pageButton,
+				onClick: () => source.setPage(item),
+				children: item
+			}, item);
+			$[29] = classNames.pageButton;
+			$[30] = classNames.pageEllipsis;
+			$[31] = safePage;
+			$[32] = source;
+			$[33] = t11;
+		} else t11 = $[33];
+		t10 = (0, _adapttable_core.paginationItems)(safePage, totalPages).map(t11);
+		$[23] = classNames.pageButton;
+		$[24] = classNames.pageEllipsis;
+		$[25] = safePage;
+		$[26] = source;
+		$[27] = totalPages;
+		$[28] = t10;
+	} else t10 = $[28];
+	const t11 = safePage >= totalPages;
+	let t12;
+	if ($[34] !== safePage || $[35] !== source) {
+		t12 = () => source.setPage(safePage + 1);
+		$[34] = safePage;
+		$[35] = source;
+		$[36] = t12;
+	} else t12 = $[36];
+	let t13;
+	if ($[37] !== classNames.pageButton || $[38] !== labels.nextPage || $[39] !== t11 || $[40] !== t12) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"aria-label": labels.nextPage,
 			"data-adapttable-part": "page-next",
 			className: classNames.pageButton,
-			disabled: t9,
-			onClick: t10,
+			disabled: t11,
+			onClick: t12,
 			children: "›"
 		});
-		$[26] = classNames.pageButton;
-		$[27] = labels.nextPage;
-		$[28] = t10;
-		$[29] = t9;
-		$[30] = t11;
-	} else t11 = $[30];
-	let t12;
-	if ($[31] !== classNames.footer || $[32] !== t11 || $[33] !== t2 || $[34] !== t3 || $[35] !== t5 || $[36] !== t8) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		$[37] = classNames.pageButton;
+		$[38] = labels.nextPage;
+		$[39] = t11;
+		$[40] = t12;
+		$[41] = t13;
+	} else t13 = $[41];
+	let t14;
+	if ($[42] !== classNames.pager || $[43] !== t10 || $[44] !== t13 || $[45] !== t6 || $[46] !== t9) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-adapttable-part": "pager",
+			className: t4,
+			children: [
+				t6,
+				t9,
+				t10,
+				t13
+			]
+		});
+		$[42] = classNames.pager;
+		$[43] = t10;
+		$[44] = t13;
+		$[45] = t6;
+		$[46] = t9;
+		$[47] = t14;
+	} else t14 = $[47];
+	let t15;
+	if ($[48] !== classNames.footer || $[49] !== t14 || $[50] !== t2 || $[51] !== t3) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-adapttable-part": "footer",
 			className: t1,
 			children: [
 				t2,
 				t3,
-				t5,
-				t8,
-				t11
+				t14
 			]
 		});
-		$[31] = classNames.footer;
-		$[32] = t11;
-		$[33] = t2;
-		$[34] = t3;
-		$[35] = t5;
-		$[36] = t8;
-		$[37] = t12;
-	} else t12 = $[37];
-	return t12;
+		$[48] = classNames.footer;
+		$[49] = t14;
+		$[50] = t2;
+		$[51] = t3;
+		$[52] = t15;
+	} else t15 = $[52];
+	return t15;
 }
 /** Inline error with optional retry. */
 function ErrorState(t0) {
@@ -1860,7 +1907,7 @@ function ColumnMenuRowItem(t0) {
 		$[12] = t6;
 	} else t6 = $[12];
 	const t7 = classNames.columnMenuGrip;
-	const t8 = `${labels.moveLeft} / ${labels.moveRight}: ${name}`;
+	const t8 = `${labels.moveStart} / ${labels.moveEnd}: ${name}`;
 	let t9;
 	if ($[13] !== index || $[14] !== key || $[15] !== layout.move || $[16] !== t8) {
 		t9 = (0, _adapttable_core.columnReorderKeyProps)(key, index, layout.move, t8);
@@ -2003,7 +2050,7 @@ function ActionsMenuRowItem(t0) {
 	const pinned = layout.state.pinned[_adapttable_core.ACTIONS_COLUMN_KEY] !== void 0;
 	const name = labels.actions;
 	const t2 = hidden || void 0;
-	const t3 = pinned ? "right" : void 0;
+	const t3 = pinned ? "end" : void 0;
 	let t4;
 	if ($[2] !== layout) {
 		t4 = () => layout.toggleVisible(_adapttable_core.ACTIONS_COLUMN_KEY);
@@ -2038,10 +2085,10 @@ function ActionsMenuRowItem(t0) {
 		$[12] = name;
 		$[13] = t6;
 	} else t6 = $[13];
-	const t7 = `${pinned ? labels.unpin : labels.pinRight}: ${name}`;
+	const t7 = `${pinned ? labels.unpin : labels.pinEnd}: ${name}`;
 	let t8;
 	if ($[14] !== layout || $[15] !== pinned) {
-		t8 = () => layout.setPinned(_adapttable_core.ACTIONS_COLUMN_KEY, pinned ? void 0 : "right");
+		t8 = () => layout.setPinned(_adapttable_core.ACTIONS_COLUMN_KEY, pinned ? void 0 : "end");
 		$[14] = layout;
 		$[15] = pinned;
 		$[16] = t8;
@@ -2337,11 +2384,11 @@ function ExpandButton(t0) {
 * Cell render-props are not re-invoked).
 */
 function desktopRowPropsEqual(prev, next) {
-	return prev.row === next.row && prev.index === next.index && prev.id === next.id && prev.selected === next.selected && prev.expanded === next.expanded && prev.columns === next.columns && prev.labels === next.labels && prev.classNames === next.classNames && prev.showActions === next.showActions && prev.rowActions === next.rowActions && prev.columnSpan === next.columnSpan && prev.columnWidths === next.columnWidths && prev.pinSignature === next.pinSignature && prev.hasLeftPin === next.hasLeftPin && prev.hasRightPin === next.hasRightPin && prev.actionsPinned === next.actionsPinned && prev.rowClass === next.rowClass && prev.clickable === next.clickable && prev.hasPrefetch === next.hasPrefetch;
+	return prev.row === next.row && prev.index === next.index && prev.id === next.id && prev.selected === next.selected && prev.expanded === next.expanded && prev.columns === next.columns && prev.labels === next.labels && prev.classNames === next.classNames && prev.showActions === next.showActions && prev.rowActions === next.rowActions && prev.columnSpan === next.columnSpan && prev.columnWidths === next.columnWidths && prev.pinSignature === next.pinSignature && prev.hasStartPin === next.hasStartPin && prev.hasEndPin === next.hasEndPin && prev.actionsPinned === next.actionsPinned && prev.rowClass === next.rowClass && prev.clickable === next.clickable && prev.hasPrefetch === next.hasPrefetch;
 }
 function DesktopRowBase(props) {
 	const $ = (0, react_compiler_runtime.c)(98);
-	const { row, index, id, table, columns, labels, classNames, selected, expanded, showActions, rowActions, confirm, columnSpan, pinOffset, hasLeftPin, hasRightPin, actionsPinned, rowClass, clickable, hasPrefetch, onRowClick, onPrefetch, onToggleSelect, onToggleExpand, renderDetail, measureElement } = props;
+	const { row, index, id, table, columns, labels, classNames, selected, expanded, showActions, rowActions, confirm, columnSpan, pinOffset, hasStartPin, hasEndPin, actionsPinned, rowClass, clickable, hasPrefetch, onRowClick, onPrefetch, onToggleSelect, onToggleExpand, renderDetail, measureElement } = props;
 	const expandable = expanded !== void 0;
 	const t0 = selected === void 0 ? 0 : SELECTION_WIDTH;
 	const t1 = showActions ? ACTIONS_WIDTH : 0;
@@ -2356,10 +2403,10 @@ function DesktopRowBase(props) {
 	let t7;
 	let t8;
 	let t9;
-	if ($[0] !== classNames || $[1] !== clickable || $[2] !== columns || $[3] !== expandable || $[4] !== expanded || $[5] !== hasLeftPin || $[6] !== hasPrefetch || $[7] !== id || $[8] !== index || $[9] !== labels || $[10] !== measureElement || $[11] !== onPrefetch || $[12] !== onRowClick || $[13] !== onToggleExpand || $[14] !== onToggleSelect || $[15] !== pinOffset || $[16] !== row || $[17] !== rowClass || $[18] !== selected || $[19] !== t0 || $[20] !== t1 || $[21] !== table) {
+	if ($[0] !== classNames || $[1] !== clickable || $[2] !== columns || $[3] !== expandable || $[4] !== expanded || $[5] !== hasPrefetch || $[6] !== hasStartPin || $[7] !== id || $[8] !== index || $[9] !== labels || $[10] !== measureElement || $[11] !== onPrefetch || $[12] !== onRowClick || $[13] !== onToggleExpand || $[14] !== onToggleSelect || $[15] !== pinOffset || $[16] !== row || $[17] !== rowClass || $[18] !== selected || $[19] !== t0 || $[20] !== t1 || $[21] !== table) {
 		const leads = {
-			left: t0,
-			right: t1
+			start: t0,
+			end: t1
 		};
 		const bodyPinStyle = (key) => (0, _adapttable_core.pinnedCellStyle)(pinOffset?.(key), _adapttable_core.PIN_Z.body, leads);
 		let t13;
@@ -2421,11 +2468,11 @@ function DesktopRowBase(props) {
 			$[54] = onToggleExpand;
 			$[55] = t10;
 		} else t10 = $[55];
-		if ($[56] !== classNames.cell || $[57] !== classNames.checkbox || $[58] !== classNames.selectionCell || $[59] !== hasLeftPin || $[60] !== id || $[61] !== labels || $[62] !== onToggleSelect || $[63] !== selected) {
+		if ($[56] !== classNames.cell || $[57] !== classNames.checkbox || $[58] !== classNames.selectionCell || $[59] !== hasStartPin || $[60] !== id || $[61] !== labels || $[62] !== onToggleSelect || $[63] !== selected) {
 			t11 = selected !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 				"data-adapttable-part": "selection-cell",
-				"data-pinned": hasLeftPin ? "left" : void 0,
-				style: (0, _adapttable_core.edgePinStyle)("left", hasLeftPin, _adapttable_core.PIN_Z.body),
+				"data-pinned": hasStartPin ? "start" : void 0,
+				style: (0, _adapttable_core.edgePinStyle)("start", hasStartPin, _adapttable_core.PIN_Z.body),
 				className: cx(classNames.cell, classNames.selectionCell),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "checkbox",
@@ -2438,7 +2485,7 @@ function DesktopRowBase(props) {
 			$[56] = classNames.cell;
 			$[57] = classNames.checkbox;
 			$[58] = classNames.selectionCell;
-			$[59] = hasLeftPin;
+			$[59] = hasStartPin;
 			$[60] = id;
 			$[61] = labels;
 			$[62] = onToggleSelect;
@@ -2463,8 +2510,8 @@ function DesktopRowBase(props) {
 		$[2] = columns;
 		$[3] = expandable;
 		$[4] = expanded;
-		$[5] = hasLeftPin;
-		$[6] = hasPrefetch;
+		$[5] = hasPrefetch;
+		$[6] = hasStartPin;
 		$[7] = id;
 		$[8] = index;
 		$[9] = labels;
@@ -2505,11 +2552,11 @@ function DesktopRowBase(props) {
 		t9 = $[32];
 	}
 	let t13;
-	if ($[65] !== actionsPinned || $[66] !== classNames || $[67] !== confirm || $[68] !== hasRightPin || $[69] !== labels || $[70] !== row || $[71] !== rowActions || $[72] !== showActions) {
+	if ($[65] !== actionsPinned || $[66] !== classNames || $[67] !== confirm || $[68] !== hasEndPin || $[69] !== labels || $[70] !== row || $[71] !== rowActions || $[72] !== showActions) {
 		t13 = showActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 			"data-adapttable-part": "actions-cell",
-			"data-pinned": hasRightPin || actionsPinned ? "right" : void 0,
-			style: (0, _adapttable_core.edgePinStyle)("right", hasRightPin || actionsPinned, _adapttable_core.PIN_Z.body),
+			"data-pinned": hasEndPin || actionsPinned ? "end" : void 0,
+			style: (0, _adapttable_core.edgePinStyle)("end", hasEndPin || actionsPinned, _adapttable_core.PIN_Z.body),
 			className: cx(classNames.cell, classNames.actionsCell),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActionButtons, {
 				row,
@@ -2522,7 +2569,7 @@ function DesktopRowBase(props) {
 		$[65] = actionsPinned;
 		$[66] = classNames;
 		$[67] = confirm;
-		$[68] = hasRightPin;
+		$[68] = hasEndPin;
 		$[69] = labels;
 		$[70] = row;
 		$[71] = rowActions;
@@ -2643,11 +2690,11 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, classNames,
 	} : void 0;
 	const stickyAttr = stickyHeader || void 0;
 	const leads = {
-		left: selection ? SELECTION_WIDTH : 0,
-		right: showActions ? ACTIONS_WIDTH : 0
+		start: selection ? SELECTION_WIDTH : 0,
+		end: showActions ? ACTIONS_WIDTH : 0
 	};
-	const hasLeftPin = columns.some((c_0) => pinOffset?.(c_0.key)?.side === "left");
-	const hasRightPin = columns.some((c_1) => pinOffset?.(c_1.key)?.side === "right");
+	const hasStartPin = columns.some((c_0) => pinOffset?.(c_0.key)?.side === "start");
+	const hasEndPin = columns.some((c_1) => pinOffset?.(c_1.key)?.side === "end");
 	const pinSignature = columns.map((c_2) => {
 		const pin = pinOffset?.(c_2.key);
 		return pin ? `${c_2.key}:${pin.side}:${pin.inset}` : "";
@@ -2727,8 +2774,8 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, classNames,
 						selection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 							"data-adapttable-part": "selection-header",
 							"data-sticky": stickyAttr,
-							"data-pinned": hasLeftPin ? "left" : void 0,
-							style: edgeHeadStyle("left", hasLeftPin),
+							"data-pinned": hasStartPin ? "start" : void 0,
+							style: edgeHeadStyle("start", hasStartPin),
 							className: cx(classNames.headerCell, classNames.selectionCell),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "checkbox",
@@ -2781,8 +2828,8 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, classNames,
 						showActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 							"data-adapttable-part": "actions-header",
 							"data-sticky": stickyAttr,
-							"data-pinned": hasRightPin || stickActions ? "right" : void 0,
-							style: edgeHeadStyle("right", hasRightPin || stickActions),
+							"data-pinned": hasEndPin || stickActions ? "end" : void 0,
+							style: edgeHeadStyle("end", hasEndPin || stickActions),
 							className: cx(classNames.headerCell, classNames.actionsCell),
 							children: labels.actions
 						})
@@ -2819,8 +2866,8 @@ function DesktopTable({ table, rows, rowActions, confirm, getRowId, classNames,
 							columnWidths,
 							pinOffset,
 							pinSignature,
-							hasLeftPin,
-							hasRightPin,
+							hasStartPin,
+							hasEndPin,
 							actionsPinned: stickActions,
 							rowClass: rowClassName?.(row_2, index),
 							clickable: Boolean(onRowClick),