@persona/design-system 0.10.12 → 0.10.13

package/dist/{DataTable-DdSY9mzT.mjs → DataTable-DZ0B2Zm9.mjs}

@@ -17,10 +17,10 @@ import { n as DropdownMenu_default } from "./DropdownMenu-Ip75l4Th.mjs";
 import { t as Checkbox } from "./Checkbox-BAh-wF_F.mjs";
 import { t as Pagination_default } from "./Pagination-CqFvnlXc.mjs";
 import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "./Table-9mNn8Q-d.mjs";
-import { t as HoverCopyableField } from "./HoverCopyableField-X2XfKTTh.mjs";
-import { t as Link } from "./Link-B29ZMN6m.mjs";
-import { t as Pii_default } from "./Pii-jSYND7Cn.mjs";
-import { L as isFilterActive, f as TableViewConfigurationDropdown, u as TableControls, v as isEmptyState } from "./TableControls-BXykbUBf.mjs";
+import { L as isFilterActive, W as withDisabledReason, f as TableViewConfigurationDropdown, u as TableControls, v as isEmptyState } from "./TableControls-DM4RddQ_.mjs";
+import { t as HoverCopyableField } from "./HoverCopyableField-CJ_p3llp.mjs";
+import { t as Link } from "./Link-Df3zJrj2.mjs";
+import { t as Pii_default } from "./Pii-BYPkrBuT.mjs";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ import { DateTime } from "luxon";
 import { ChevronDownIcon, ChevronRightIcon, ImageIcon, MoreIcon, XIcon } from "@persona/icons";
 import { PlusIcon as PlusIcon$1 } from "@persona/icons/12px";
 import { kebabCase, startCase } from "lodash-es";
-import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, memo as memo$1, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, flexRender, functionalUpdate, getCoreRowModel, getFilteredRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, memo as memo$1, useReactTable } from "@tanstack/react-table";
 //#region src/components/DataTable/clientFilterUtils.ts
 const getFilterFnName = (filterType) => {
 	switch (filterType) {
@@ -128,6 +128,46 @@ const Bar = styled.div`
   gap: ${Spacing[8]};
   min-width: 380px;
 `;
+const renderAction = (action, key) => {
+	if ("popover" in action) {
+		let trigger = null;
+		if ("icon" in action && "aria-label" in action) trigger = /* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			"aria-label": action["aria-label"],
+			disabled: action.disabled,
+			children: action.icon
+		}, key);
+		else trigger = /* @__PURE__ */ jsx(Button, {
+			variant: action.variant || "basic",
+			size: "sm",
+			disabled: action.disabled,
+			children: "label" in action ? action.label : ""
+		}, key);
+		return /* @__PURE__ */ jsx(DropdownMenu_default, {
+			trigger,
+			align: "center",
+			portal: true,
+			children: (action.popover?.options ?? []).map((option) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+				id: option.value,
+				onClick: () => action.popover.onOptionSelect(option.value),
+				children: option.label
+			}, option.value))
+		}, key);
+	} else if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ jsx(IconButton, {
+		size: "sm",
+		"aria-label": action["aria-label"],
+		onClick: action.onClick,
+		disabled: action.disabled,
+		children: action.icon
+	}, key);
+	else return /* @__PURE__ */ jsx(Button, {
+		onClick: action.onClick,
+		variant: action.variant || "basic",
+		size: "sm",
+		disabled: action.disabled,
+		children: "label" in action ? action.label : ""
+	}, key);
+};
 const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, actions }) => {
 	const strings = usePDSStrings();
 	const theme = useTheme();
@@ -147,40 +187,11 @@ const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, acti
 		spacing: Spacing[2],
 		children: [extraContent, actions.map((action, index) => {
 			const key = "label" in action ? action.label : `action-${index}`;
-			if ("popover" in action) {
-				let trigger = null;
-				if ("icon" in action && "aria-label" in action) trigger = /* @__PURE__ */ jsx(IconButton, {
-					size: "sm",
-					"aria-label": action["aria-label"],
-					children: action.icon
-				}, key);
-				else trigger = /* @__PURE__ */ jsx(Button, {
-					variant: action.variant || "basic",
-					size: "sm",
-					children: "label" in action ? action.label : ""
-				}, key);
-				return /* @__PURE__ */ jsx(DropdownMenu_default, {
-					trigger,
-					align: "center",
-					portal: true,
-					children: (action.popover?.options ?? []).map((option) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
-						id: option.value,
-						onClick: () => action.popover.onOptionSelect(option.value),
-						children: option.label
-					}, option.value))
-				}, key);
-			} else if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ jsx(IconButton, {
-				size: "sm",
-				"aria-label": action["aria-label"],
-				onClick: action.onClick,
-				children: action.icon
-			}, key);
-			else return /* @__PURE__ */ jsx(Button, {
-				onClick: action.onClick,
-				variant: action.variant || "basic",
-				size: "sm",
-				children: "label" in action ? action.label : ""
-			}, key);
+			return withDisabledReason(renderAction(action, key), {
+				key,
+				disabled: action.disabled,
+				disabledReason: action.disabledReason
+			});
 		})]
 	})] });
 };
@@ -189,7 +200,7 @@ const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, acti
 const EmptyCellText = styled(Paragraph)`
   ${semanticOnly((tokens) => `color: ${tokens.FgSecondaryStatic};`)}
 `;
-const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate, strings = DEFAULT_COMMON_STRINGS }) => {
+const renderAsCheckbox = ({ rowId, rowLabel, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate, strings = DEFAULT_COMMON_STRINGS }) => {
 	return /* @__PURE__ */ jsx(Checkbox, {
 		checked: isChecked,
 		onChange: (e) => {
@@ -199,7 +210,7 @@ const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHea
 		containerProps: { onClick: (e) => {
 			e.stopPropagation();
 		} },
-		"aria-label": columnHeader ? strings.selectRowForColumn(columnHeader, rowId) : strings.selectRow(rowId),
+		"aria-label": columnHeader ? strings.selectRowForColumn(columnHeader, rowLabel ?? rowId) : strings.selectRow(rowLabel ?? rowId),
 		indeterminate,
 		disabled
 	});
@@ -505,11 +516,44 @@ const ExpandColumnPlaceholder = styled.span`
   justify-content: center;
   width: 100%;
 `;
-function useTableColumns({ columns, data, compact, sort, clientSearch, clientFiltering, expandColumnVisibility = "auto", showControls, enableRowSelection = false, enableSubRowSelection = true, rowActions, getRowId, expandedRows, toggleRowExpansion, canRowExpand, checkboxColumnStates, handleCheckboxCellChange, handleSelectAllCheckboxCell, getSelfAndNestedRowIds, handleRowSelectionWithShift, renderFormat }) {
+function useTableColumns({ columns, data, compact, sort, clientSearch, clientFiltering, expandColumnVisibility = "auto", showControls, enableRowSelection = false, enableSubRowSelection = true, rowActions, getRowId, getRowLabel, scopeSelectAllToRows = false, stableSelectCells = false, expandedRows, toggleRowExpansion, canRowExpand, checkboxColumnStates, handleCheckboxCellChange, handleSelectAllCheckboxCell, getSelfAndNestedRowIds, handleRowSelectionWithShift, renderFormat }) {
 	const { EXPAND_COLUMN_WIDTH, SELECT_COLUMN_WIDTH, ACTION_COLUMN_WIDTH } = getColumnWidths(compact);
 	const strings = usePDSStrings();
 	const stringsRef = useRef(strings);
 	stringsRef.current = strings;
+	const getRowLabelRef = useRef(getRowLabel);
+	getRowLabelRef.current = getRowLabel;
+	const selectColumnRef = useRef({
+		enableSubRowSelection,
+		handleRowSelectionWithShift,
+		scopeSelectAllToRows
+	});
+	selectColumnRef.current = {
+		enableSubRowSelection,
+		handleRowSelectionWithShift,
+		scopeSelectAllToRows
+	};
+	const renderSelectHeader = useCallback(({ table }) => {
+		const { scopeSelectAllToRows: scoped } = selectColumnRef.current;
+		return renderAsCheckboxHeader({
+			isChecked: table.getIsAllRowsSelected(),
+			isIndeterminate: table.getIsAllRowsSelected() || (scoped ? table.getFilteredRowModel().flatRows.some((row) => row.getIsSelected()) : table.getIsSomeRowsSelected()),
+			onChange: table.getToggleAllRowsSelectedHandler(),
+			strings: stringsRef.current
+		});
+	}, []);
+	const renderSelectCell = useCallback(({ row, table }) => {
+		const { enableSubRowSelection: subRows } = selectColumnRef.current;
+		return renderAsCheckbox({
+			rowId: row.id,
+			rowLabel: getRowLabelRef.current?.(row.original),
+			isChecked: row.getIsSelected(),
+			onChange: (e) => selectColumnRef.current.handleRowSelectionWithShift(row, table, e.target.checked, e.nativeEvent instanceof MouseEvent && e.nativeEvent.shiftKey),
+			indeterminate: subRows && row.getIsSomeSelected(),
+			disabled: !row.getCanSelect(),
+			strings: stringsRef.current
+		});
+	}, []);
 	const rowActionsRef = useRef(rowActions);
 	rowActionsRef.current = rowActions;
 	const renderActionCell = useCallback((props) => {
@@ -621,20 +665,8 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 			enableResizing: false,
 			size: SELECT_COLUMN_WIDTH,
 			meta: { width: SELECT_COLUMN_WIDTH },
-			header: ({ table }) => renderAsCheckboxHeader({
-				isChecked: table.getIsAllRowsSelected(),
-				isIndeterminate: table.getIsSomeRowsSelected() || table.getIsAllRowsSelected(),
-				onChange: table.getToggleAllRowsSelectedHandler(),
-				strings
-			}),
-			cell: ({ row, table }) => renderAsCheckbox({
-				rowId: row.id,
-				isChecked: row.getIsSelected(),
-				onChange: (e) => handleRowSelectionWithShift(row, table, e.target.checked, e.nativeEvent instanceof MouseEvent && e.nativeEvent.shiftKey),
-				indeterminate: enableSubRowSelection && row.getIsSomeSelected(),
-				disabled: !row.getCanSelect(),
-				strings
-			})
+			header: stableSelectCells ? renderSelectHeader : (context) => renderSelectHeader(context),
+			cell: stableSelectCells ? renderSelectCell : (context) => renderSelectCell(context)
 		}));
 		if (expandColumnVisibility === "always" || data.some(canRowExpand)) tableColumns.unshift(columnHelper.display({
 			id: "expand-col",
@@ -692,6 +724,9 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 		hasRowActions,
 		renderActionCell,
 		showControls,
+		stableSelectCells,
+		renderSelectHeader,
+		renderSelectCell,
 		sort,
 		clientSearch,
 		clientFiltering,
@@ -704,7 +739,6 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 		checkboxColumnStates,
 		handleCheckboxCellChange,
 		handleSelectAllCheckboxCell,
-		handleRowSelectionWithShift,
 		renderFormat,
 		strings
 	]);
@@ -869,7 +903,7 @@ const DISPLAYED_ROW_IDS_SEPARATOR = "";
 *   { accessor: 'email', header: 'Email' },
 * ];
 */
-const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "auto", showControls, controls, emptyState, isLoading, pagination, sort, sortDescFirst, enableSortingRemoval, showColumnProperties = false, onUpdateColumnProperties, enableRowSelection = false, enableSubRowSelection = true, getRowId, getRowLabel, getRowSelectable, getLinkToRow, rowLinkPrefix, rowLinkColumnId, rowLinkComponent, compact, floatingBulkActions = false, disableRowHover, title, clientSearch = false, searchTerm: controlledSearchTerm, onSearchTermChange, manualFiltering, expandedRowIds: controlledExpandedRowIds, onExpandedRowsChange, clientFiltering = false, columnFilters: controlledColumnFilters, hasExternalActiveFilters = false, onColumnFiltersChange, renderFormat, rowActions, bulkActions, getAvailableBulkActions, onRowSelectionChange, onAddRow, stickyHeader = false, canAddAfterRow, onRowClick, activeRowId, onDisplayedRowIdsChange, pinnedColumnLeftOffset = 0, scrollsHorizontally = true, floatingBarContent }) => {
+const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "auto", showControls, controls, emptyState, isLoading, pagination, sort, sortDescFirst, enableSortingRemoval, showColumnProperties = false, onUpdateColumnProperties, enableRowSelection = false, selectedRowIds: controlledSelectedRowIds, onSelectedRowIdsChange, enableSubRowSelection = true, getRowId, getRowLabel, getRowSelectable, getLinkToRow, rowLinkPrefix, rowLinkColumnId, rowLinkComponent, compact, floatingBulkActions = false, disableRowHover, title, clientSearch = false, searchTerm: controlledSearchTerm, onSearchTermChange, manualFiltering, expandedRowIds: controlledExpandedRowIds, onExpandedRowsChange, clientFiltering = false, columnFilters: controlledColumnFilters, hasExternalActiveFilters = false, onColumnFiltersChange, renderFormat, rowActions, bulkActions, getAvailableBulkActions, onRowSelectionChange, onAddRow, stickyHeader = false, canAddAfterRow, onRowClick, activeRowId, onDisplayedRowIdsChange, pinnedColumnLeftOffset = 0, scrollsHorizontally = true, floatingBarContent }) => {
 	const DEFAULT_SEARCH_PLACEHOLDER = "Search...";
 	const { NEST_SPACING, EXPAND_COLUMN_WIDTH } = getColumnWidths(compact);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
@@ -881,7 +915,27 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		return visibility;
 	});
 	const [columnOrder, setColumnOrder] = useState([]);
-	const [rowSelection, setRowSelection] = useState({});
+	const isSelectionControlled = controlledSelectedRowIds != null;
+	const [internalRowSelection, setInternalRowSelection] = useState({});
+	const rowSelection = useMemo(() => isSelectionControlled ? Object.fromEntries([...controlledSelectedRowIds].map((rowId) => [rowId, true])) : internalRowSelection, [
+		controlledSelectedRowIds,
+		internalRowSelection,
+		isSelectionControlled
+	]);
+	const showSelectColumn = enableRowSelection && (Boolean(showControls) || isSelectionControlled);
+	const pendingRowSelectionRef = useRef(rowSelection);
+	pendingRowSelectionRef.current = rowSelection;
+	const isBatchingRowSelectionRef = useRef(false);
+	const setRowSelection = useCallback((updater) => {
+		if (!isSelectionControlled) {
+			setInternalRowSelection(updater);
+			return;
+		}
+		const next = functionalUpdate(updater, pendingRowSelectionRef.current);
+		pendingRowSelectionRef.current = next;
+		if (isBatchingRowSelectionRef.current) return;
+		onSelectedRowIdsChange?.(new Set(Object.keys(next).filter((rowId) => next[rowId] === true)));
+	}, [isSelectionControlled, onSelectedRowIdsChange]);
 	const lastSelectedRowIdRef = useRef(null);
 	const isSearchControlled = controlledSearchTerm != null;
 	const [internalSearchTerm, setInternalSearchTerm] = useState(typeof clientSearch === "object" ? clientSearch.initialValue || "" : "");
@@ -936,7 +990,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		const pinnedColumns = [];
 		if (columns.some((column) => typeof column === "object" && column.pinned)) {
 			if (expandColumnVisibility === "always" || data.some(canRowExpand)) pinnedColumns.push("expand-col");
-			if (showControls && enableRowSelection) pinnedColumns.push("select-col");
+			if (showSelectColumn) pinnedColumns.push("select-col");
 			columns.forEach((column) => {
 				if (typeof column === "object" && column.pinned) pinnedColumns.push(column.accessor);
 			});
@@ -947,8 +1001,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		data,
 		canRowExpand,
 		expandColumnVisibility,
-		showControls,
-		enableRowSelection
+		showSelectColumn
 	]);
 	const toggleRowExpansion = useCallback((rowId) => {
 		setExpandedRows((prev) => {
@@ -1041,7 +1094,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 				sorting: sort.state
 			};
 		} else options.enableSorting = false;
-		if (showControls && enableRowSelection) {
+		if (showSelectColumn) {
 			options.enableRowSelection = getRowSelectable ? (row) => getRowSelectable(row.original) : true;
 			options.onRowSelectionChange = setRowSelection;
 		}
@@ -1089,10 +1142,10 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		pagination,
 		columnVisibility,
 		columnOrder,
-		enableRowSelection,
+		showSelectColumn,
 		enableSubRowSelection,
 		rowSelection,
-		showControls,
+		setRowSelection,
 		sort,
 		enableSortingRemoval,
 		sortDescFirst,
@@ -1112,9 +1165,15 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		if (isShiftKey && lastIndex !== -1 && currentIndex !== -1) {
 			const startIndex = Math.min(lastIndex, currentIndex);
 			const endIndex = Math.max(lastIndex, currentIndex);
-			displayedRows.slice(startIndex, endIndex + 1).forEach((rangeRow) => {
-				if (rangeRow.getCanSelect()) rangeRow.toggleSelected(checked);
-			});
+			isBatchingRowSelectionRef.current = true;
+			try {
+				displayedRows.slice(startIndex, endIndex + 1).forEach((rangeRow) => {
+					if (rangeRow.getCanSelect()) rangeRow.toggleSelected(checked);
+				});
+			} finally {
+				isBatchingRowSelectionRef.current = false;
+			}
+			table.setRowSelection((selection) => selection);
 		} else clickedRow.toggleSelected(checked);
 		lastSelectedRowIdRef.current = clickedRow.id;
 	}, []);
@@ -1148,11 +1207,14 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		clientSearch,
 		clientFiltering,
 		expandColumnVisibility,
-		showControls,
+		showControls: Boolean(showControls) || isSelectionControlled,
 		enableRowSelection,
 		enableSubRowSelection,
 		rowActions,
 		getRowId,
+		getRowLabel: isSelectionControlled ? getRowLabel : void 0,
+		scopeSelectAllToRows: isSelectionControlled,
+		stableSelectCells: isSelectionControlled,
 		expandedRows,
 		toggleRowExpansion,
 		canRowExpand,
@@ -1260,6 +1322,11 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		].includes(columnId);
 	};
 	const selectedRows = table.getFilteredSelectedRowModel().flatRows;
+	const selectedRowIds = useMemo(() => isSelectionControlled ? [...controlledSelectedRowIds] : selectedRows.map((row) => row.id), [
+		controlledSelectedRowIds,
+		isSelectionControlled,
+		selectedRows
+	]);
 	useEffect(() => {
 		onRowSelectionChange?.(selectedRows.map((row) => row.original));
 	}, [selectedRows, onRowSelectionChange]);
@@ -1269,7 +1336,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 			const baseAction = {
 				...action,
 				onClick: async () => {
-					await action.onClick(selectedRows.map((row) => row.id), clearSelection);
+					await action.onClick(selectedRowIds, clearSelection);
 				}
 			};
 			if ("popover" in action && action.popover) {
@@ -1279,8 +1346,8 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 					popover: {
 						options: popoverConfig.options,
 						onOptionSelect: async (option) => {
-							await popoverConfig.onOptionSelect(option, selectedRows.map((row) => row.id));
-							table.setRowSelection({});
+							await popoverConfig.onOptionSelect(option, selectedRowIds);
+							if (!isSelectionControlled) table.setRowSelection({});
 						}
 					}
 				};
@@ -1290,12 +1357,14 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 	}, [
 		bulkActions,
 		getAvailableBulkActions,
+		isSelectionControlled,
 		selectedRows,
+		selectedRowIds,
 		table,
 		controls?.bulkActions
 	]);
 	const usesFloatingBulkActions = Boolean(compact || floatingBulkActions);
-	const shouldShowFloatingActionBar = usesFloatingBulkActions && actions && actions.length > 0 && selectedRows.length > 0;
+	const shouldShowFloatingActionBar = usesFloatingBulkActions && actions && actions.length > 0 && selectedRowIds.length > 0;
 	const hasGlobalFilter = clientSearch && globalFilter && globalFilter.trim().length > 0;
 	const hasFilters = columnFilters.length > 0 || controls?.filterPanel == null && (controls?.filtersV2 != null ? controls.filtersV2.initialState != null && !isEmptyState(controls.filtersV2.initialState) : unifiedFilters.some((filter) => filter.enabled !== false && isFilterActive(filter, controls?.filterResolver)));
 	const hasActiveFilters = hasGlobalFilter || hasFilters || hasExternalActiveFilters;
@@ -1324,7 +1393,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 					size: compact ? "sm" : void 0,
 					variant: compact ? "text" : "basic"
 				}),
-				selectedRows: table.getFilteredSelectedRowModel().flatRows.map((row) => row.id),
+				selectedRows: selectedRowIds,
 				onClearSelection: () => table.setRowSelection({}),
 				searchProps: generatedSearchProps,
 				...controls,
@@ -1405,7 +1474,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 						const isExpanded = expandedRows.has(rowId);
 						const canExpand = canRowExpand(rowData);
 						const rowLinkHref = getLinkToRow ? getLinkToRow(row.original) : rowLinkPrefix ? `${rowLinkPrefix}/${rowId}` : void 0;
-						const dynamicNestSpacing = showControls && enableRowSelection ? NEST_SPACING + 8 : NEST_SPACING;
+						const dynamicNestSpacing = showSelectColumn ? NEST_SPACING + 8 : NEST_SPACING;
 						const visibleCells = row.getVisibleCells();
 						const isLinkableCell = (cell) => !isFeatureCol(cell.column.id) && cell.column.columnDef.meta?.format?.type !== "url";
 						const rowLinkCellId = rowLinkHref ? visibleCells.find((cell) => cell.column.id === rowLinkColumnId && isLinkableCell(cell))?.column.id ?? visibleCells.find(isLinkableCell)?.column.id : void 0;
@@ -1532,7 +1601,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 						return elements;
 					})
 				}), shouldShowFloatingActionBar && actions && /* @__PURE__ */ jsx(FloatingActionBarContainer, { children: /* @__PURE__ */ jsx(FloatingActionBar, {
-					selectedCount: selectedRows.length,
+					selectedCount: selectedRowIds.length,
 					onClearSelection: () => table.setRowSelection({}),
 					actions,
 					extraContent: floatingBarContent
@@ -1558,4 +1627,4 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 //#endregion
 export { getFilterFnName as S, renderAsString as _, useTableColumns as a, getColumnWidths as b, renderAsCheckboxHeader as c, renderAsDatetime as d, renderAsLightweightImage as f, renderAsSticker as g, renderAsPii as h, FloatingActionBarContainer as i, renderAsCopyableString as l, renderAsPDSFormat as m, DataTableContainer as n, Inserter as o, renderAsNumber as p, DataTableControls as r, renderAsCheckbox as s, DataTable as t, renderAsDate as u, renderAsURL as v, generateClientFilters as x, FloatingActionBar as y };
 
-//# sourceMappingURL=DataTable-DdSY9mzT.mjs.map
+//# sourceMappingURL=DataTable-DZ0B2Zm9.mjs.map