@persona/design-system 0.10.12 → 0.10.14

package/dist/{DataTable-C1mdfmQa.d.mts → DataTable-0nhT5_Fe.d.mts}

@@ -1,8 +1,8 @@
 import { t as Pagination } from "./Pagination-CCKuudiz.mjs";
-import { i as BaseFilterConfig, n as AttributeColumn, s as FilterConfig } from "./types-NO2GRlM-.mjs";
-import { r as TableControlsProps, t as TableControls } from "./TableControls-DE6eHq8h.mjs";
-import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat, t as BulkAction } from "./types-Dws2XDz2.mjs";
-import { t as RenderFormatFn } from "./useTableColumns-tITjHasE.mjs";
+import { i as BaseFilterConfig, n as AttributeColumn, s as FilterConfig } from "./types-BvaXqjUm.mjs";
+import { r as TableControlsProps, t as TableControls } from "./TableControls-BGKL7_zF.mjs";
+import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat, t as BulkAction } from "./types-CuH-sUJ2.mjs";
+import { t as RenderFormatFn } from "./useTableColumns-I7StvoRs.mjs";
 import { ComponentProps } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -146,9 +146,30 @@ interface DataTableProps<TData extends RowData, TFilter extends BaseFilterConfig
    */
   isLoading?: boolean;
   /**
-   * Whether to enable row selection
+   * Whether to enable row selection. The select column renders with `showControls`, or on its own
+   * when selection is controlled (`selectedRowIds`).
    */
   enableRowSelection?: boolean;
+  /**
+   * Controlled selected row ids. When provided, row selection becomes controlled: use with
+   * `onSelectedRowIdsChange` to own the selection outside the table, for example to clear it on a
+   * filter change or keep it across server pages. Bulk actions never clear controlled selection
+   * automatically; the host decides when to clear its state (or call `clearSelection`).
+   *
+   * Opting in also renders the select column without `showControls`, names each checkbox with
+   * `getRowLabel`, and scopes the select-all header's dash to the rows in `data`. Uncontrolled
+   * tables keep their existing behaviour.
+   *
+   * Ids can belong to rows not in `data` (another page). They count toward the selected count and
+   * are passed to bulk actions; `onRowSelectionChange` and `getAvailableBulkActions` still receive
+   * only the selected rows present in `data`.
+   */
+  selectedRowIds?: Set<string>;
+  /**
+   * Called when the selection changes (for controlled selection). Only used when `selectedRowIds`
+   * is provided. Unselecting the rows on the current page keeps selected ids from other pages.
+   */
+  onSelectedRowIdsChange?: (selectedRowIds: Set<string>) => void;
   /**
    * Whether to enable automatic sub row selection when a parent row is selected
    */
@@ -158,7 +179,8 @@ interface DataTableProps<TData extends RowData, TFilter extends BaseFilterConfig
    */
   getRowId?: (row: TData) => string;
   /**
-   * Define the aria label for the given row.
+   * Define the aria label for the given row. With controlled selection (`selectedRowIds`) it also
+   * names the row's selection checkbox ("Select row <label>"); otherwise the checkbox uses the row id.
    */
   getRowLabel?: (row: TData) => string;
   /**
@@ -411,6 +433,8 @@ declare const DataTable: <TData extends RowData, TFilter extends BaseFilterConfi
   showColumnProperties,
   onUpdateColumnProperties,
   enableRowSelection,
+  selectedRowIds: controlledSelectedRowIds,
+  onSelectedRowIdsChange,
   enableSubRowSelection,
   getRowId,
   getRowLabel,
@@ -450,4 +474,4 @@ declare const DataTable: <TData extends RowData, TFilter extends BaseFilterConfi
 }: DataTableProps<TData, TFilter>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FloatingActionBarContainer as a, DataTableProps as i, DataTableContainer as n, DataTableControls as r, DataTable as t };
-//# sourceMappingURL=DataTable-C1mdfmQa.d.mts.map
+//# sourceMappingURL=DataTable-0nhT5_Fe.d.mts.map

package/dist/{DataTable-DdSY9mzT.mjs → DataTable-6t5ryaEq.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-BwZl4TjJ.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-6t5ryaEq.mjs.map