@cube-dev/ui-kit 0.202.0 → 0.204.0

package/dist/components/data/ItemTable/ItemTable.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { ItemTableFooter } from "./ItemTableFooter.js";
@@ -13,6 +14,7 @@ import { useContainerWidth } from "../TableBase/use-container-width.js";
 import { useTableStorage } from "../TableBase/use-table-storage.js";
 import { useTableTreeState } from "../TableBase/use-table-tree-state.js";
 import { matchesTableSearch, useTableSearch } from "../TableBase/use-table-search.js";
+import { buildItemTableSections, sectionPageLayout } from "./item-table-sections.js";
 import { ItemTableChromeProvider, ItemTableSearch, ItemTableToolbar } from "./ItemTableToolbar.js";
 import { ItemTableBulkBar } from "./ItemTableBulkBar.js";
 import { useItemTableColumnWidths } from "./use-item-table-column-widths.js";
@@ -33,8 +35,8 @@ function defaultGetRowKey(rowKey) {
 	};
 }
 function ItemTable(props, ref) {
-	const $ = c(138);
-	const { data, columns, rowKey: t0, getRowKey, getRowChildren, treeColumnKey, expandedKeys, defaultExpandedKeys, onExpand, isLoading: t1, loadingIndicator: t2, selectionMode, bulkActions, rowLink, onRowAction, rowMenu, rowContextMenu: t3, onRowMenuAction, rowMenuTriggerProps, bulkBarPlacement: t4, bulkBarStyles, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllMode: t5, isRowSelectable, selectionTooltip, disabledKeys, treeSelectionBehavior: t6, skeletonRowCount: t7, emptyLabel, noResultsLabel, error, isFiltered, toolbar, isSearchable: t8, searchMode: t9, searchPlaceholder, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchDelay: t10, searchFilter, filters, actions, onRefresh, paginationMode: t11, pageSize: pageSizeProp, defaultPageSize: t12, autoHidePagination: t13, onLoadMore, hasMore, isLoadingMore, loadMoreMargin, storageKey, persist, isReorderable: t14, onReorder, dropOnRow, getItemDragInfo, isResizable: t15, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, onPageSizeChange, pageSizeOptions: t16, page: pageProp, defaultPage, onPageChange, total: totalProp, totalPages, hasNextPage, summary: t17, footer, footerStart, footerCenter, footerEnd, sortMode, sort: sortProp, defaultSort, onSortChange, shape: t18, size: t19, rowHeight, headerHeight, isStriped: t20, isHeaderHidden: t21, isHeaderSticky: t22, isAutoHeight: t23, isVirtualized: t24, virtualizeThreshold: t25, overscan: t26, getRowProps, ariaLabel, qa, mods, styles, headerStyles, headerCellStyles, headerPreset: t27, toolbarStyles, searchStyles, footerStyles, bodyStyles, rowStyles, cellStyles, isRowMoveAnimated } = props;
+	const $ = c(152);
+	const { data, columns, rowKey: t0, getRowKey, sections, getSectionKey, getRowChildren, treeColumnKey, expandedKeys, defaultExpandedKeys, onExpand, isLoading: t1, loadingIndicator: t2, selectionMode, bulkActions, rowLink, onRowAction, rowMenu, rowContextMenu: t3, onRowMenuAction, rowMenuTriggerProps, bulkBarPlacement: t4, bulkBarStyles, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllMode: t5, isRowSelectable, selectionTooltip, disabledKeys, treeSelectionBehavior: t6, skeletonRowCount: t7, emptyLabel, noResultsLabel, error, isFiltered, toolbar, isSearchable: t8, searchMode: t9, searchPlaceholder, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchDelay: t10, searchFilter, filters, actions, onRefresh, paginationMode: t11, pageSize: pageSizeProp, defaultPageSize: t12, autoHidePagination: t13, onLoadMore, hasMore, isLoadingMore, loadMoreMargin, storageKey, persist, isReorderable: t14, onReorder, dropOnRow, getItemDragInfo, isResizable: t15, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, onPageSizeChange, pageSizeOptions: t16, page: pageProp, defaultPage, onPageChange, total: totalProp, totalPages, hasNextPage, summary: t17, footer, footerStart, footerCenter, footerEnd, sortMode, sort: sortProp, defaultSort, onSortChange, shape: t18, size: t19, rowHeight, headerHeight, isStriped: t20, isHeaderHidden: t21, isHeaderSticky: t22, isAutoHeight: t23, isVirtualized: t24, virtualizeThreshold: t25, overscan: t26, getRowProps, ariaLabel, qa, mods, styles, headerStyles, headerCellStyles, headerPreset: t27, toolbarStyles, searchStyles, footerStyles, bodyStyles, rowStyles, cellStyles, isRowMoveAnimated } = props;
 	const rowKey = t0 === void 0 ? "id" : t0;
 	const isLoading = t1 === void 0 ? false : t1;
 	const loadingIndicator = t2 === void 0 ? "overlay" : t2;
@@ -205,14 +207,47 @@ function ItemTable(props, ref) {
 		$[42] = t35;
 	} else t35 = $[42];
 	const { sort, sortedRows, sortedTreeRoots, mode: resolvedSortMode, toggleSort, setColumnSort } = useItemTableSort(t35);
-	const t36 = treeModel != null;
+	const hasSectionProps = sections != null || getSectionKey != null;
+	const canSection = !treeModel && !isReorderable && !dropOnRow && paginationMode !== "server";
+	let t36;
+	if ($[43] !== canSection || $[44] !== data || $[45] !== getSectionKey || $[46] !== resolvedGetRowKey || $[47] !== sections || $[48] !== sortedRows) {
+		t36 = sections && getSectionKey && canSection ? buildItemTableSections(data, sortedRows, sections, getSectionKey, resolvedGetRowKey) : null;
+		$[43] = canSection;
+		$[44] = data;
+		$[45] = getSectionKey;
+		$[46] = resolvedGetRowKey;
+		$[47] = sections;
+		$[48] = sortedRows;
+		$[49] = t36;
+	} else t36 = $[49];
+	const sectionModel = t36;
 	let t37;
-	if ($[43] !== autoHidePagination || $[44] !== defaultPage || $[45] !== defaultPageSize || $[46] !== hasNextPage || $[47] !== onPageChange || $[48] !== onPageSizeChange || $[49] !== pageProp || $[50] !== pageSizeOptions || $[51] !== pageSizeProp || $[52] !== paginationMode || $[53] !== sortedRows || $[54] !== sortedTreeRoots || $[55] !== storage || $[56] !== summary || $[57] !== t36 || $[58] !== totalPages || $[59] !== totalProp) {
+	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
 		t37 = {
+			key: ["item-table-sections-unsupported"],
+			args: ["ItemTable:", "Sections are ignored for tree rows, row drag/drop and server pagination."]
+		};
+		$[50] = t37;
+	} else t37 = $[50];
+	useWarn(hasSectionProps && !canSection, t37);
+	let t38;
+	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+		t38 = {
+			key: ["item-table-sections-invalid"],
+			args: ["ItemTable:", "Sections require unique section keys and getSectionKey returning a declared key for every displayed record. Falling back to the ordinary flat list."]
+		};
+		$[51] = t38;
+	} else t38 = $[51];
+	useWarn(hasSectionProps && canSection && sectionModel == null, t38);
+	const orderedRows = sectionModel?.rows ?? sortedRows;
+	const t39 = treeModel != null;
+	let t40;
+	if ($[52] !== autoHidePagination || $[53] !== defaultPage || $[54] !== defaultPageSize || $[55] !== hasNextPage || $[56] !== onPageChange || $[57] !== onPageSizeChange || $[58] !== orderedRows || $[59] !== pageProp || $[60] !== pageSizeOptions || $[61] !== pageSizeProp || $[62] !== paginationMode || $[63] !== sortedTreeRoots || $[64] !== storage || $[65] !== summary || $[66] !== t39 || $[67] !== totalPages || $[68] !== totalProp) {
+		t40 = {
 			mode: paginationMode,
-			rows: sortedRows,
+			rows: orderedRows,
 			treeRoots: sortedTreeRoots,
-			isTree: t36,
+			isTree: t39,
 			pageSize: pageSizeProp,
 			defaultPageSize,
 			onPageSizeChange,
@@ -227,75 +262,94 @@ function ItemTable(props, ref) {
 			autoHide: autoHidePagination,
 			storage
 		};
-		$[43] = autoHidePagination;
-		$[44] = defaultPage;
-		$[45] = defaultPageSize;
-		$[46] = hasNextPage;
-		$[47] = onPageChange;
-		$[48] = onPageSizeChange;
-		$[49] = pageProp;
-		$[50] = pageSizeOptions;
-		$[51] = pageSizeProp;
-		$[52] = paginationMode;
-		$[53] = sortedRows;
-		$[54] = sortedTreeRoots;
-		$[55] = storage;
-		$[56] = summary;
-		$[57] = t36;
-		$[58] = totalPages;
-		$[59] = totalProp;
-		$[60] = t37;
-	} else t37 = $[60];
-	const pagination = useItemTablePagination(t37);
-	let t38;
-	if ($[61] !== treeModel?.byKey) {
-		t38 = treeModel?.byKey ?? /* @__PURE__ */ new Map();
-		$[61] = treeModel?.byKey;
-		$[62] = t38;
-	} else t38 = $[62];
-	const t39 = searchedTree?.forcedExpandedKeys;
-	let t40;
-	if ($[63] !== columns || $[64] !== resolvedTreeColumnKey) {
-		t40 = (node_0) => {
+		$[52] = autoHidePagination;
+		$[53] = defaultPage;
+		$[54] = defaultPageSize;
+		$[55] = hasNextPage;
+		$[56] = onPageChange;
+		$[57] = onPageSizeChange;
+		$[58] = orderedRows;
+		$[59] = pageProp;
+		$[60] = pageSizeOptions;
+		$[61] = pageSizeProp;
+		$[62] = paginationMode;
+		$[63] = sortedTreeRoots;
+		$[64] = storage;
+		$[65] = summary;
+		$[66] = t39;
+		$[67] = totalPages;
+		$[68] = totalProp;
+		$[69] = t40;
+	} else t40 = $[69];
+	const pagination = useItemTablePagination(t40);
+	let t41;
+	if ($[70] !== treeModel?.byKey) {
+		t41 = treeModel?.byKey ?? /* @__PURE__ */ new Map();
+		$[70] = treeModel?.byKey;
+		$[71] = t41;
+	} else t41 = $[71];
+	const t42 = searchedTree?.forcedExpandedKeys;
+	let t43;
+	if ($[72] !== columns || $[73] !== resolvedTreeColumnKey) {
+		t43 = (node_0) => {
 			const column = columns.find((entry) => entry.key === resolvedTreeColumnKey);
 			return column ? getColumnText(column, node_0.row, node_0.sourceIndex) ?? String(node_0.key) : String(node_0.key);
 		};
-		$[63] = columns;
-		$[64] = resolvedTreeColumnKey;
-		$[65] = t40;
-	} else t40 = $[65];
-	let t41;
-	if ($[66] !== ariaLabel || $[67] !== defaultExpandedKeys || $[68] !== disabledKeys || $[69] !== expandedKeys || $[70] !== onExpand || $[71] !== pagination.pageTreeRoots || $[72] !== t38 || $[73] !== t39 || $[74] !== t40) {
-		t41 = {
+		$[72] = columns;
+		$[73] = resolvedTreeColumnKey;
+		$[74] = t43;
+	} else t43 = $[74];
+	let t44;
+	if ($[75] !== ariaLabel || $[76] !== defaultExpandedKeys || $[77] !== disabledKeys || $[78] !== expandedKeys || $[79] !== onExpand || $[80] !== pagination.pageTreeRoots || $[81] !== t41 || $[82] !== t42 || $[83] !== t43) {
+		t44 = {
 			roots: pagination.pageTreeRoots,
-			allNodesByKey: t38,
+			allNodesByKey: t41,
 			expandedKeys,
 			defaultExpandedKeys,
-			forcedExpandedKeys: t39,
+			forcedExpandedKeys: t42,
 			disabledKeys,
-			getTextValue: t40,
+			getTextValue: t43,
 			onExpand,
 			ariaLabel
 		};
-		$[66] = ariaLabel;
-		$[67] = defaultExpandedKeys;
-		$[68] = disabledKeys;
-		$[69] = expandedKeys;
-		$[70] = onExpand;
-		$[71] = pagination.pageTreeRoots;
-		$[72] = t38;
-		$[73] = t39;
-		$[74] = t40;
-		$[75] = t41;
-	} else t41 = $[75];
-	const treeState = useTableTreeState(t41);
+		$[75] = ariaLabel;
+		$[76] = defaultExpandedKeys;
+		$[77] = disabledKeys;
+		$[78] = expandedKeys;
+		$[79] = onExpand;
+		$[80] = pagination.pageTreeRoots;
+		$[81] = t41;
+		$[82] = t42;
+		$[83] = t43;
+		$[84] = t44;
+	} else t44 = $[84];
+	const treeState = useTableTreeState(t44);
 	const visibleTreeEntries = treeModel ? treeState.visibleEntries : [];
+	const pageStart = paginationMode === "client" ? (pagination.page - 1) * pagination.pageSize : 0;
 	const visibleRows = treeModel ? visibleTreeEntries.map(_temp) : pagination.pageRows;
-	const visibleRowKeys = treeModel ? visibleTreeEntries.map(_temp2) : void 0;
+	const visibleRowCount = visibleRows.length;
+	let t45;
+	if ($[85] !== containerWidth || $[86] !== pageStart || $[87] !== sectionModel || $[88] !== visibleRowCount) {
+		t45 = sectionModel ? {
+			layout: {
+				...sectionPageLayout(sectionModel, pageStart, visibleRowCount),
+				viewportWidth: containerWidth
+			},
+			keys: sectionModel.keys.slice(pageStart, pageStart + visibleRowCount)
+		} : void 0;
+		$[85] = containerWidth;
+		$[86] = pageStart;
+		$[87] = sectionModel;
+		$[88] = visibleRowCount;
+		$[89] = t45;
+	} else t45 = $[89];
+	const sectionPage = t45;
+	const visibleRowKeys = treeModel ? visibleTreeEntries.map(_temp2) : sectionPage?.keys;
 	const selection = useItemTableSelection({
 		rows: visibleRows,
 		rowKeys: visibleRowKeys,
-		sortedRows,
+		sortedRows: orderedRows,
+		sortedRowKeys: sectionModel?.keys,
 		isTree: treeModel != null,
 		sortedTreeRoots,
 		pageTreeRoots: pagination.pageTreeRoots,
@@ -311,41 +365,41 @@ function ItemTable(props, ref) {
 		disabledKeys,
 		treeSelectionBehavior
 	});
-	let t42;
-	if ($[76] !== rowMenu) {
-		t42 = rowMenu == null ? void 0 : typeof rowMenu === "function" ? rowMenu : () => rowMenu;
-		$[76] = rowMenu;
-		$[77] = t42;
-	} else t42 = $[77];
-	const resolveRowMenu = t42;
-	let t43;
-	if ($[78] !== resolveRowMenu || $[79] !== rowContextMenu || $[80] !== size) {
-		t43 = resolveRowMenu && rowContextMenu === true ? [{
+	let t46;
+	if ($[90] !== rowMenu) {
+		t46 = rowMenu == null ? void 0 : typeof rowMenu === "function" ? rowMenu : () => rowMenu;
+		$[90] = rowMenu;
+		$[91] = t46;
+	} else t46 = $[91];
+	const resolveRowMenu = t46;
+	let t47;
+	if ($[92] !== resolveRowMenu || $[93] !== rowContextMenu || $[94] !== size) {
+		t47 = resolveRowMenu && rowContextMenu === true ? [{
 			key: ROW_MENU_COLUMN_KEY,
 			width: ROW_MENU_COLUMN_WIDTH[size] ?? ROW_MENU_COLUMN_WIDTH.medium,
 			align: "center"
 		}] : void 0;
-		$[78] = resolveRowMenu;
-		$[79] = rowContextMenu;
-		$[80] = size;
-		$[81] = t43;
-	} else t43 = $[81];
-	const trailingColumns = t43;
-	let t44;
-	if ($[82] !== selection.isEnabled || $[83] !== size) {
-		t44 = selection.isEnabled ? [{
+		$[92] = resolveRowMenu;
+		$[93] = rowContextMenu;
+		$[94] = size;
+		$[95] = t47;
+	} else t47 = $[95];
+	const trailingColumns = t47;
+	let t48;
+	if ($[96] !== selection.isEnabled || $[97] !== size) {
+		t48 = selection.isEnabled ? [{
 			key: SELECTION_COLUMN_KEY,
 			width: SELECTION_COLUMN_WIDTH[size] ?? SELECTION_COLUMN_WIDTH.medium,
 			align: "center"
 		}] : void 0;
-		$[82] = selection.isEnabled;
-		$[83] = size;
-		$[84] = t44;
-	} else t44 = $[84];
-	const leadingColumns = t44;
-	let t45;
-	if ($[85] !== columnWidthsProp || $[86] !== columns || $[87] !== containerWidth || $[88] !== defaultColumnWidths || $[89] !== leadingColumns || $[90] !== onColumnResize || $[91] !== storage || $[92] !== trailingColumns) {
-		t45 = {
+		$[96] = selection.isEnabled;
+		$[97] = size;
+		$[98] = t48;
+	} else t48 = $[98];
+	const leadingColumns = t48;
+	let t49;
+	if ($[99] !== columnWidthsProp || $[100] !== columns || $[101] !== containerWidth || $[102] !== defaultColumnWidths || $[103] !== leadingColumns || $[104] !== onColumnResize || $[105] !== storage || $[106] !== trailingColumns) {
+		t49 = {
 			columns,
 			containerWidth,
 			leadingColumns,
@@ -355,59 +409,59 @@ function ItemTable(props, ref) {
 			onColumnResize,
 			storage
 		};
-		$[85] = columnWidthsProp;
-		$[86] = columns;
-		$[87] = containerWidth;
-		$[88] = defaultColumnWidths;
-		$[89] = leadingColumns;
-		$[90] = onColumnResize;
-		$[91] = storage;
-		$[92] = trailingColumns;
-		$[93] = t45;
-	} else t45 = $[93];
-	const { layout, handleColumnResize, handleColumnResizeEnd } = useItemTableColumnWidths(t45);
-	let t46;
-	if ($[94] !== layout || $[95] !== rowLink) {
-		t46 = rowLink && !layout.columns.some(_temp3) ? layout.columns.find(_temp4)?.key : void 0;
-		$[94] = layout;
-		$[95] = rowLink;
-		$[96] = t46;
-	} else t46 = $[96];
-	const implicitRowHeader = t46;
-	let t47;
-	if ($[97] !== implicitRowHeader || $[98] !== layout) {
-		t47 = implicitRowHeader === void 0 ? layout : {
+		$[99] = columnWidthsProp;
+		$[100] = columns;
+		$[101] = containerWidth;
+		$[102] = defaultColumnWidths;
+		$[103] = leadingColumns;
+		$[104] = onColumnResize;
+		$[105] = storage;
+		$[106] = trailingColumns;
+		$[107] = t49;
+	} else t49 = $[107];
+	const { layout, handleColumnResize, handleColumnResizeEnd } = useItemTableColumnWidths(t49);
+	let t50;
+	if ($[108] !== layout || $[109] !== rowLink) {
+		t50 = rowLink && !layout.columns.some(_temp3) ? layout.columns.find(_temp4)?.key : void 0;
+		$[108] = layout;
+		$[109] = rowLink;
+		$[110] = t50;
+	} else t50 = $[110];
+	const implicitRowHeader = t50;
+	let t51;
+	if ($[111] !== implicitRowHeader || $[112] !== layout) {
+		t51 = implicitRowHeader === void 0 ? layout : {
 			...layout,
 			columns: layout.columns.map((column_2) => column_2.key === implicitRowHeader ? {
 				...column_2,
 				isRowHeader: true
 			} : column_2)
 		};
-		$[97] = implicitRowHeader;
-		$[98] = layout;
-		$[99] = t47;
-	} else t47 = $[99];
-	const tableLayout = t47;
+		$[111] = implicitRowHeader;
+		$[112] = layout;
+		$[113] = t51;
+	} else t51 = $[113];
+	const tableLayout = t51;
 	const hasBulkSelection = bulkActions != null && bulkActions.length > 0 && selection.selectedCount > 0;
-	let t48;
-	if ($[100] !== bulkActions || $[101] !== bulkBarPlacement || $[102] !== bulkBarStyles || $[103] !== hasBulkSelection) {
-		t48 = hasBulkSelection ? /* @__PURE__ */ jsx(ItemTableBulkBar, {
+	let t52;
+	if ($[114] !== bulkActions || $[115] !== bulkBarPlacement || $[116] !== bulkBarStyles || $[117] !== hasBulkSelection) {
+		t52 = hasBulkSelection ? /* @__PURE__ */ jsx(ItemTableBulkBar, {
 			actions: bulkActions,
 			placement: bulkBarPlacement,
 			styles: bulkBarStyles
 		}) : null;
-		$[100] = bulkActions;
-		$[101] = bulkBarPlacement;
-		$[102] = bulkBarStyles;
-		$[103] = hasBulkSelection;
-		$[104] = t48;
-	} else t48 = $[104];
-	const bulkBar = t48;
+		$[114] = bulkActions;
+		$[115] = bulkBarPlacement;
+		$[116] = bulkBarStyles;
+		$[117] = hasBulkSelection;
+		$[118] = t52;
+	} else t52 = $[118];
+	const bulkBar = t52;
 	const isBulkBarInToolbar = bulkBar != null && bulkBarPlacement === "toolbar";
 	const hasToolbar = toolbar !== void 0 || isSearchable || filters != null || actions != null || onRefresh != null || isBulkBarInToolbar;
-	let t49;
-	if ($[105] !== actions || $[106] !== bulkBar || $[107] !== filters || $[108] !== hasToolbar || $[109] !== isBulkBarInToolbar || $[110] !== isLoading || $[111] !== isSearchable || $[112] !== onRefresh || $[113] !== searchStyles || $[114] !== toolbar || $[115] !== toolbarStyles) {
-		t49 = hasToolbar ? toolbar ?? /* @__PURE__ */ jsx(ItemTableToolbar, {
+	let t53;
+	if ($[119] !== actions || $[120] !== bulkBar || $[121] !== filters || $[122] !== hasToolbar || $[123] !== isBulkBarInToolbar || $[124] !== isLoading || $[125] !== isSearchable || $[126] !== onRefresh || $[127] !== searchStyles || $[128] !== toolbar || $[129] !== toolbarStyles) {
+		t53 = hasToolbar ? toolbar ?? /* @__PURE__ */ jsx(ItemTableToolbar, {
 			isSearchable,
 			filters,
 			actions: isBulkBarInToolbar ? bulkBar : actions,
@@ -416,40 +470,40 @@ function ItemTable(props, ref) {
 			searchStyles,
 			onRefresh
 		}) : null;
-		$[105] = actions;
-		$[106] = bulkBar;
-		$[107] = filters;
-		$[108] = hasToolbar;
-		$[109] = isBulkBarInToolbar;
-		$[110] = isLoading;
-		$[111] = isSearchable;
-		$[112] = onRefresh;
-		$[113] = searchStyles;
-		$[114] = toolbar;
-		$[115] = toolbarStyles;
-		$[116] = t49;
-	} else t49 = $[116];
-	const toolbarNode = t49;
+		$[119] = actions;
+		$[120] = bulkBar;
+		$[121] = filters;
+		$[122] = hasToolbar;
+		$[123] = isBulkBarInToolbar;
+		$[124] = isLoading;
+		$[125] = isSearchable;
+		$[126] = onRefresh;
+		$[127] = searchStyles;
+		$[128] = toolbar;
+		$[129] = toolbarStyles;
+		$[130] = t53;
+	} else t53 = $[130];
+	const toolbarNode = t53;
 	const hasFooter = footer !== void 0 || pagination.control != null || footerStart != null || footerCenter != null || footerEnd != null;
-	let t50;
-	if ($[117] !== footer || $[118] !== footerCenter || $[119] !== footerEnd || $[120] !== footerStart || $[121] !== footerStyles || $[122] !== hasFooter || $[123] !== pagination.control) {
-		t50 = hasFooter ? footer ?? /* @__PURE__ */ jsx(ItemTableFooter, {
+	let t54;
+	if ($[131] !== footer || $[132] !== footerCenter || $[133] !== footerEnd || $[134] !== footerStart || $[135] !== footerStyles || $[136] !== hasFooter || $[137] !== pagination.control) {
+		t54 = hasFooter ? footer ?? /* @__PURE__ */ jsx(ItemTableFooter, {
 			start: footerStart,
 			center: footerCenter,
 			end: footerEnd,
 			styles: footerStyles,
 			pagination: pagination.control
 		}) : null;
-		$[117] = footer;
-		$[118] = footerCenter;
-		$[119] = footerEnd;
-		$[120] = footerStart;
-		$[121] = footerStyles;
-		$[122] = hasFooter;
-		$[123] = pagination.control;
-		$[124] = t50;
-	} else t50 = $[124];
-	const footerNode = t50;
+		$[131] = footer;
+		$[132] = footerCenter;
+		$[133] = footerEnd;
+		$[134] = footerStart;
+		$[135] = footerStyles;
+		$[136] = hasFooter;
+		$[137] = pagination.control;
+		$[138] = t54;
+	} else t54 = $[138];
+	const footerNode = t54;
 	const bodyRef = useRef(null);
 	const drag = useItemTableDragDrop({
 		rows: visibleRows,
@@ -470,6 +524,7 @@ function ItemTable(props, ref) {
 		qa: qa || "ItemTable",
 		rows: visibleRows,
 		rowKeys: visibleRowKeys,
+		sectionLayout: sectionPage?.layout,
 		rowIndexOffset: treeModel ? 0 : pagination.isPaginated ? (pagination.page - 1) * pagination.pageSize : 0,
 		totalRowCount: treeModel ? visibleRows.length : pagination.total,
 		getRowKey: resolvedGetRowKey,
@@ -554,9 +609,9 @@ function ItemTable(props, ref) {
 		renderPreview: drag.renderPreview,
 		children: (dragState_0, dropState_0, collectionProps_0) => renderTable(dragState_0, dropState_0, collectionProps_0)
 	}) : renderTable();
-	let t51;
-	if ($[125] !== isLoading || $[126] !== onRefresh || $[127] !== searchPlaceholder || $[128] !== searchValue || $[129] !== selection.clearSelection || $[130] !== selection.selectedCount || $[131] !== selection.selectedKeys || $[132] !== selection.selectedRows || $[133] !== setSearchValue) {
-		t51 = {
+	let t55;
+	if ($[139] !== isLoading || $[140] !== onRefresh || $[141] !== searchPlaceholder || $[142] !== searchValue || $[143] !== selection.clearSelection || $[144] !== selection.selectedCount || $[145] !== selection.selectedKeys || $[146] !== selection.selectedRows || $[147] !== setSearchValue) {
+		t55 = {
 			searchValue,
 			setSearchValue,
 			searchPlaceholder,
@@ -567,28 +622,28 @@ function ItemTable(props, ref) {
 			selectedCount: selection.selectedCount,
 			clearSelection: selection.clearSelection
 		};
-		$[125] = isLoading;
-		$[126] = onRefresh;
-		$[127] = searchPlaceholder;
-		$[128] = searchValue;
-		$[129] = selection.clearSelection;
-		$[130] = selection.selectedCount;
-		$[131] = selection.selectedKeys;
-		$[132] = selection.selectedRows;
-		$[133] = setSearchValue;
-		$[134] = t51;
-	} else t51 = $[134];
-	let t52;
-	if ($[135] !== t51 || $[136] !== table) {
-		t52 = /* @__PURE__ */ jsx(ItemTableChromeProvider, {
-			value: t51,
+		$[139] = isLoading;
+		$[140] = onRefresh;
+		$[141] = searchPlaceholder;
+		$[142] = searchValue;
+		$[143] = selection.clearSelection;
+		$[144] = selection.selectedCount;
+		$[145] = selection.selectedKeys;
+		$[146] = selection.selectedRows;
+		$[147] = setSearchValue;
+		$[148] = t55;
+	} else t55 = $[148];
+	let t56;
+	if ($[149] !== t55 || $[150] !== table) {
+		t56 = /* @__PURE__ */ jsx(ItemTableChromeProvider, {
+			value: t55,
 			children: table
 		});
-		$[135] = t51;
-		$[136] = table;
-		$[137] = t52;
-	} else t52 = $[137];
-	return t52;
+		$[149] = t55;
+		$[150] = table;
+		$[151] = t56;
+	} else t56 = $[151];
+	return t56;
 }
 /** `forwardRef` loses the row type, so the table is cast back to a generic. */
 function _temp4(column_0) {