@persona/design-system 0.1.5-pre.4 → 0.1.6

package/dist/components/DataTable/index.mjs

@@ -0,0 +1,1408 @@
+import { isFocused } from "../../lib/pseudoClass.mjs";
+import "../../variables/effect.mjs";
+import "../../variables/transitions.mjs";
+import { i as Paragraph, o as TabularNumber } from "../../Text-hEoPeOc9.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-CDvOu1UN.mjs";
+import { Z_INDICES } from "../../lib/zindex.mjs";
+import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
+import { n as Sticker } from "../../Sticker-B0TbkV4o.mjs";
+import { t as Checkbox } from "../../Checkbox-UWdk4pqb.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-cN_AnKAT.mjs";
+import { t as Pagination_default } from "../../Pagination-F8ofIWnG.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-CGtyWI6V.mjs";
+import { t as HoverCopyableField_default } from "../../HoverCopyableField-DBkYvwii.mjs";
+import { t as Pii_default } from "../../Pii-B_gBVAak.mjs";
+import { a as TableViewConfigurationDropdown, o as TableControls } from "../../TableControls-B2ZsNlr6.mjs";
+import "./types.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon, ImageIcon, MoreIcon, XIcon } from "@persona/icons";
+import { PlusIcon as PlusIcon$1 } from "@persona/icons/12px";
+import { Link } from "react-router-dom";
+import { kebabCase } from "lodash";
+import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, memo as memo$1, useReactTable } from "@tanstack/react-table";
+import { Spacing as Spacing$1 } from "@persona-id/design-tokens";
+import { DateTime } from "luxon";
+import startCase from "lodash/fp/startCase.js";
+//#region components/DataTable/constants.ts
+function getColumnWidths(compact) {
+	return {
+		EXPAND_COLUMN_WIDTH: compact ? 32 : 36,
+		SELECT_COLUMN_WIDTH: compact ? 32 : 40,
+		ACTION_COLUMN_WIDTH: compact ? 32 : 40,
+		NEST_SPACING: compact ? 24 : 32
+	};
+}
+//#endregion
+//#region components/DataTable/FloatingActionBar.tsx
+const Bar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.background.primary};
+  width: 100%;
+  padding: ${Spacing[2]};
+  border-radius: ${BorderRadius.Md};
+  box-shadow: ${"0px 8px 14px 0px rgba(0, 0, 0, 0.06), 0px 3px 24px 0px rgba(0, 0, 0, 0.06)"};
+  gap: ${Spacing[8]};
+  min-width: 380px;
+`;
+const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, actions }) => {
+	return /* @__PURE__ */ jsxs(Bar, { children: [/* @__PURE__ */ jsxs(HStack, {
+		align: "center",
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			onClick: onClearSelection,
+			"aria-label": "Clear selection",
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		}), /* @__PURE__ */ jsxs(Paragraph, {
+			color: "primary",
+			children: [selectedCount, " selected"]
+		})]
+	}), /* @__PURE__ */ jsxs(HStack, {
+		align: "center",
+		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",
+					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))
+				});
+			} 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);
+		})]
+	})] });
+};
+//#endregion
+//#region components/DataTable/helpers.tsx
+const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate }) => {
+	return /* @__PURE__ */ jsx(Checkbox, {
+		checked: isChecked,
+		onChange: (e) => {
+			onChange?.(e);
+			onValueChange?.(rowId, e.target.checked);
+		},
+		containerProps: { onClick: (e) => {
+			e.stopPropagation();
+		} },
+		"aria-label": columnHeader ? `${columnHeader} for row ${rowId}` : `Select row ${rowId}`,
+		indeterminate,
+		disabled
+	});
+};
+const renderAsCheckboxHeader = ({ header, isChecked, isIndeterminate, onChange, onValueChange }) => {
+	const checkbox = /* @__PURE__ */ jsx(Checkbox, {
+		checked: isChecked,
+		indeterminate: isIndeterminate,
+		onChange: (e) => {
+			onChange?.(e);
+			onValueChange?.(e.target.checked);
+		},
+		containerProps: { onClick: (e) => {
+			e.stopPropagation();
+		} },
+		"aria-label": header ? `Select all ${header}` : "Select all"
+	});
+	if (header) return /* @__PURE__ */ jsxs(HStack, {
+		spacing: Spacing[3],
+		align: "center",
+		children: [checkbox, /* @__PURE__ */ jsx("span", { children: header })]
+	});
+	return checkbox;
+};
+const DATE_FORMAT = "DD";
+const DATETIME_FORMAT = "MMM d, yyyy h:mm a";
+const renderAsString = (value) => {
+	if (value == null) return "";
+	return typeof value === "string" ? value : typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+};
+const renderAsDate = (value, config) => {
+	if (value == null || typeof value !== "string") return "";
+	const date = DateTime.fromISO(value);
+	return date.isValid ? date.toFormat(config?.format ?? DATE_FORMAT) : "";
+};
+const renderAsDatetime = (value, config) => {
+	if (value == null || typeof value !== "string") return "";
+	const date = DateTime.fromISO(value);
+	return date.isValid ? date.toFormat(config?.format ?? DATETIME_FORMAT) : "";
+};
+const renderAsURL = (value) => {
+	if (value == null || typeof value !== "string" || value.length === 0) return "";
+	return /* @__PURE__ */ jsx("a", {
+		href: value,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: value
+	});
+};
+const renderAsNumber = (value) => {
+	if (value == null) return "";
+	return /* @__PURE__ */ jsx(TabularNumber, { children: value });
+};
+const createSticker = (item, config, key) => {
+	const displayLabel = config?.labels?.[item] ?? item;
+	return /* @__PURE__ */ jsx(Sticker, {
+		variant: config?.colors?.[item] ?? config?.defaultColor,
+		children: displayLabel
+	}, key);
+};
+const renderAsSticker = (value, config) => {
+	if (value == null) return "";
+	if (Array.isArray(value)) {
+		if (value.length === 0) return "";
+		return /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: "4px",
+				alignItems: "center"
+			},
+			children: value.map((item, index) => typeof item === "string" ? createSticker(item, config, `${item}-${index}`) : null)
+		});
+	}
+	if (typeof value !== "string") return "";
+	return createSticker(value, config);
+};
+/** Inline monospace text — private DataTable primitive, avoids the dashboard Typography dep. */
+const MonoText = styled.span`
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.875em;
+`;
+const WrappingText = styled.span`
+  display: inline-block;
+  max-width: 100%;
+  word-break: break-word;
+  overflow-wrap: break-word;
+`;
+const EmptyImageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${BorderRadius.Md};
+  background-color: ${({ theme }) => theme.color.background.secondary};
+  width: ${({ $width }) => $width ?? "200px"};
+  height: ${({ $height }) => $height ?? "144px"};
+  svg {
+    color: ${({ theme }) => theme.color.border.disabled};
+  }
+`;
+const LightweightImg = styled.img`
+  object-fit: ${({ $fit }) => $fit ?? "cover"};
+  display: block;
+`;
+const renderAsCopyableString = (value, config) => {
+	const valueAsString = renderAsString(value);
+	const content = config?.mono ? /* @__PURE__ */ jsx(MonoText, { children: valueAsString }) : valueAsString;
+	if (!valueAsString) return /* @__PURE__ */ jsx(Paragraph, { children: config?.emptyText ?? "" });
+	return /* @__PURE__ */ jsx(WrappingText, { children: config?.copyable ? /* @__PURE__ */ jsx(HoverCopyableField_default, {
+		copyValue: valueAsString,
+		children: content
+	}) : content });
+};
+const renderAsPii = (row, config) => {
+	if (!config || !row) return "";
+	const { isRedacted, piiValue, emptyText } = config;
+	const piiValueString = piiValue(row);
+	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Pii_default, {
+		isRedacted: isRedacted(row),
+		children: piiValueString
+	}), config.subComponent?.(row)] });
+};
+const renderAsLightweightImage = (value, config) => {
+	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ jsx(Fragment$1, { children: config.fallback }) : /* @__PURE__ */ jsx(EmptyImageContainer, {
+		$width: config?.width,
+		$height: config?.height,
+		"aria-label": config?.alt ?? "image",
+		children: /* @__PURE__ */ jsx(ImageIcon, {
+			size: 24,
+			"aria-label": "No image"
+		})
+	});
+	return /* @__PURE__ */ jsx(LightweightImg, {
+		src: typeof value === "string" ? value : "",
+		alt: config?.alt ?? "image",
+		width: config?.width ?? "200px",
+		height: config?.height ?? "144px",
+		$fit: config?.fit
+	});
+};
+/**
+* Default PDS cell renderer. Handles all generic format types built into the design system.
+* Hosts should supply their own `renderFormat` prop to DataTable for format types that require
+* application-specific components (e.g. tags, files, PII masking, status indicators).
+*/
+const renderAsPDSFormat = (value, format, row) => {
+	switch (format?.type) {
+		case "date": return renderAsDate(value, format.config);
+		case "datetime": return renderAsDatetime(value, format.config);
+		case "sticker": return renderAsSticker(value, format.config);
+		case "url": return renderAsURL(value);
+		case "number": return renderAsNumber(value);
+		case "image": return renderAsLightweightImage(value, format.config);
+		case "checkbox": return "";
+		case "id": return renderAsCopyableString(value, {
+			copyable: true,
+			mono: true,
+			...format.config
+		});
+		case "pii": return renderAsPii(row, format.config);
+		default: return renderAsCopyableString(value, format?.config);
+	}
+};
+//#endregion
+//#region components/DataTable/Inserter.tsx
+const InserterTableCell = styled(TableCell)`
+  padding: 0 !important;
+  ${({ $nestSpacing }) => $nestSpacing ? `padding-left: ${$nestSpacing}px !important` : ""};
+  height: 0;
+  position: relative;
+  border: 0;
+  z-index: ${Z_INDICES.withShadow};
+`;
+const AddRowLine = styled.div`
+  position: absolute;
+  top: -1px;
+  background-color: ${({ theme }) => theme.color.primary.brand};
+  width: ${({ $nestSpacing }) => $nestSpacing ? `calc(100% - ${$nestSpacing}px)` : "100%"};
+  transition-duration: ${"200ms"};
+  transition-property: opacity;
+  transition-timing-function: ease-in;
+`;
+const StyledPlusButton = styled.button`
+  position: absolute;
+  top: -7px;
+  left: calc(50% - 8px);
+  border-radius: 50%;
+  height: 14px;
+  width: 14px;
+  background-color: ${({ theme }) => theme.color.primary.brand};
+  cursor: pointer;
+  z-index: ${Z_INDICES.withShadow};
+  // TODO: Add a focus style
+
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:hover ~ ${AddRowLine} {
+    opacity: 1;
+    height: 2px;
+  }
+`;
+const StyledTableRow = styled(TableRow)`
+  &${isFocused} {
+    box-shadow: none;
+  }
+  cursor: pointer;
+  &:hover > ${AddRowLine}, &:focus > ${AddRowLine} {
+    opacity: 1;
+    height: 2px;
+  }
+
+  &:hover > ${StyledPlusButton}, &:focus > ${StyledPlusButton} {
+    opacity: 1;
+  }
+`;
+const HoverArea = styled.div`
+  position: absolute;
+  height: 12px;
+  top: -6px;
+  width: ${({ $nestSpacing }) => $nestSpacing ? `calc(100% - ${$nestSpacing}px)` : "100%"};
+  z-index: ${Z_INDICES.withShadow};
+  &:hover ~ ${AddRowLine} {
+    opacity: 1;
+    height: 2px;
+  }
+
+  &:hover ~ ${StyledPlusButton} {
+    opacity: 1;
+  }
+`;
+const StyledPlusIcon = styled(PlusIcon$1)`
+  position: absolute;
+  top: 1px;
+  left: 1px;
+`;
+const Inserter = ({ priorRowLabel, colSpan, nestSpacing = 0, label, onAddRow }) => {
+	return /* @__PURE__ */ jsx(StyledTableRow, {
+		onKeyDown: (evt) => {
+			if (evt.key === " " || evt.key === "Enter") {
+				evt.preventDefault();
+				evt.stopPropagation();
+				onAddRow();
+			}
+		},
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsxs(InserterTableCell, {
+			colSpan,
+			$nestSpacing: nestSpacing,
+			children: [
+				/* @__PURE__ */ jsx(HoverArea, {
+					$nestSpacing: nestSpacing,
+					role: "presentation",
+					"aria-label": label || `Insert a row after ${priorRowLabel}`,
+					onClick: onAddRow
+				}),
+				/* @__PURE__ */ jsx(StyledPlusButton, {
+					id: `${kebabCase(priorRowLabel)}-inserter`,
+					"aria-label": label || `Insert a row after ${priorRowLabel}`,
+					onClick: onAddRow,
+					type: "button",
+					children: /* @__PURE__ */ jsx(StyledPlusIcon, { color: Color.BackgroundButtonInverse })
+				}),
+				/* @__PURE__ */ jsx(AddRowLine, {
+					$nestSpacing: nestSpacing,
+					onClick: onAddRow
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region components/DataTable/useTableColumns.tsx
+const ExpandButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+`;
+const ExpandColumnDisabledChevron = styled(ChevronRightIcon)`
+  color: ${({ theme }) => theme.color.text.disabled};
+`;
+/** Shared wrapper so disabled chevrons and expand buttons share the same horizontal alignment. */
+const ExpandColumnPlaceholder = styled.span`
+  display: flex;
+  align-items: center;
+  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 }) {
+	const { EXPAND_COLUMN_WIDTH, SELECT_COLUMN_WIDTH, ACTION_COLUMN_WIDTH } = getColumnWidths(compact);
+	const rowActionsRef = useRef(rowActions);
+	rowActionsRef.current = rowActions;
+	const renderActionCell = useCallback((props) => {
+		const currentRowActions = rowActionsRef.current;
+		const actions = typeof currentRowActions === "function" ? currentRowActions(props.row.original) : currentRowActions;
+		if (!actions || actions.length === 0) return null;
+		return /* @__PURE__ */ jsx(DropdownMenu_default, {
+			trigger: /* @__PURE__ */ jsx(Button, {
+				id: `data-table__row-actions-button--${props.row.id}`,
+				variant: "text",
+				width: "icon",
+				size: "sm",
+				onClick: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+				"aria-label": `View actions for row ${props.row.index + 1}`,
+				children: /* @__PURE__ */ jsx(MoreIcon, {})
+			}),
+			portal: true,
+			children: actions.map(({ label, onClick, ...menuItemProps }, i) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+				id: `data-table__row-actions--${props.row.id}-${i}`,
+				onClick: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					onClick(props.row.id);
+				},
+				...menuItemProps,
+				children: label
+			}, label.toLowerCase().replace(/ /g, "-")))
+		});
+	}, []);
+	const hasRowActions = rowActions != null;
+	return useMemo(() => {
+		const columnHelper = createColumnHelper();
+		const tableColumns = columns.map((column) => {
+			if (typeof column === "object") {
+				const columnHelperOptions = {
+					header: column.header,
+					id: column.id || column.accessor,
+					sortUndefined: -1,
+					meta: {
+						align: column.align,
+						minWidth: column.minWidth,
+						width: column.width,
+						headerTooltip: column.headerTooltip
+					},
+					minSize: column.minWidth
+				};
+				if (column.renderCell != null) {
+					const renderCell = column.renderCell;
+					columnHelperOptions.cell = (props) => renderCell({
+						cellValue: props.getValue(),
+						row: props.row.original
+					});
+					columnHelperOptions.enableSorting = sort != null && (column.enableSorting ?? false);
+				} else if (column.format?.type === "checkbox") {
+					const columnId = column.id || column.accessor;
+					columnHelperOptions.header = (headerProps) => {
+						const columnState = checkboxColumnStates[columnId] || /* @__PURE__ */ new Set();
+						const allRowIds = data.flatMap((row, index) => getSelfAndNestedRowIds(row, [index]));
+						const isChecked = allRowIds.length > 0 && allRowIds.every((id) => columnState.has(id));
+						const isIndeterminate = !isChecked && allRowIds.some((id) => columnState.has(id));
+						if (typeof column.header === "function") return column.header(headerProps);
+						return renderAsCheckboxHeader({
+							header: column.header,
+							isChecked,
+							isIndeterminate,
+							onValueChange: (checked) => handleSelectAllCheckboxCell(columnId, checked)
+						});
+					};
+					columnHelperOptions.cell = (props) => {
+						const rowId = getRowId ? getRowId(props.row.original) : props.row.id;
+						return renderAsCheckbox({
+							rowId,
+							isChecked: (checkboxColumnStates[columnId] || /* @__PURE__ */ new Set()).has(rowId),
+							onValueChange: (rowId, checked) => handleCheckboxCellChange(columnId, rowId, checked),
+							columnHeader: typeof column.header === "string" ? column.header : void 0
+						});
+					};
+					columnHelperOptions.enableSorting = false;
+				} else {
+					columnHelperOptions.cell = (props) => renderFormat(props?.getValue(), column.format, props.row.original);
+					columnHelperOptions.enableSorting = sort != null && column.enableSorting;
+				}
+				columnHelperOptions.enableGlobalFilter = clientSearch && (column.searchable ?? true);
+				columnHelperOptions.enablePinning = column.pinned ?? false;
+				if (clientFiltering && column.filter) {
+					const filterConfig = column.filter;
+					if (filterConfig.enabled !== false) {
+						columnHelperOptions.enableColumnFilter = true;
+						if (filterConfig.filterFn) columnHelperOptions.filterFn = filterConfig.filterFn;
+					}
+				}
+				return columnHelper.accessor(column.accessor, columnHelperOptions);
+			}
+			return columnHelper.accessor(column, {
+				header: startCase(column),
+				enableGlobalFilter: Boolean(clientSearch),
+				enableSorting: sort != null
+			});
+		});
+		if (showControls && enableRowSelection) tableColumns.unshift(columnHelper.display({
+			id: "select-col",
+			enablePinning: true,
+			enableResizing: false,
+			size: SELECT_COLUMN_WIDTH,
+			meta: { width: SELECT_COLUMN_WIDTH },
+			header: ({ table }) => renderAsCheckboxHeader({
+				isChecked: table.getIsAllRowsSelected(),
+				isIndeterminate: table.getIsSomeRowsSelected(),
+				onChange: table.getToggleAllRowsSelectedHandler()
+			}),
+			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()
+			})
+		}));
+		if (expandColumnVisibility === "always" || data.some(canRowExpand)) tableColumns.unshift(columnHelper.display({
+			id: "expand-col",
+			enablePinning: true,
+			enableResizing: false,
+			size: EXPAND_COLUMN_WIDTH,
+			meta: { width: EXPAND_COLUMN_WIDTH },
+			header: "",
+			cell: ({ row }) => {
+				const rowData = row.original;
+				if (!canRowExpand(rowData)) return /* @__PURE__ */ jsx(ExpandColumnPlaceholder, {
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(ExpandColumnDisabledChevron, {})
+				});
+				const rowId = getRowId ? getRowId(rowData) : row.id;
+				const isExpanded = expandedRows.has(rowId);
+				return /* @__PURE__ */ jsx(ExpandColumnPlaceholder, { children: /* @__PURE__ */ jsx(ExpandButton, {
+					type: "button",
+					id: `datatable-expand-${rowId}`,
+					onClick: (e) => {
+						e.stopPropagation();
+						toggleRowExpansion(rowId);
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							e.stopPropagation();
+							toggleRowExpansion(rowId);
+						}
+					},
+					"aria-label": isExpanded ? `Hide details for row ${rowId}` : `View details for row ${rowId}`,
+					"aria-expanded": isExpanded,
+					children: isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {})
+				}) });
+			}
+		}));
+		if (hasRowActions) {
+			const emptyHeader = () => /* @__PURE__ */ jsx(Fragment$1, {});
+			tableColumns.push(columnHelper.display({
+				id: "action-col",
+				enableResizing: false,
+				size: ACTION_COLUMN_WIDTH,
+				meta: { width: ACTION_COLUMN_WIDTH },
+				header: emptyHeader,
+				cell: renderActionCell
+			}));
+		}
+		return [tableColumns, columns.map((column) => {
+			const key = typeof column === "object" ? column.accessor : column;
+			return {
+				key,
+				label: typeof column === "object" ? typeof column.header === "string" ? column.header : key : startCase(column)
+			};
+		})];
+	}, [
+		columns,
+		enableRowSelection,
+		hasRowActions,
+		renderActionCell,
+		showControls,
+		sort,
+		clientSearch,
+		clientFiltering,
+		data,
+		canRowExpand,
+		expandColumnVisibility,
+		expandedRows,
+		toggleRowExpansion,
+		getRowId,
+		checkboxColumnStates,
+		handleCheckboxCellChange,
+		handleSelectAllCheckboxCell,
+		handleRowSelectionWithShift,
+		renderFormat
+	]);
+}
+//#endregion
+//#region components/DataTable/DataTable.tsx
+const TableEmptyState = styled.td`
+  vertical-align: middle;
+  text-align: center;
+  width: 100%;
+  height: 176px;
+`;
+const StyledTableLayout = styled(TableLayout)`
+  ${({ $onAddRow }) => $onAddRow && css`
+      padding-bottom: ${Spacing$1[3]};
+    `}
+`;
+const TableContainer = styled.div`
+  position: relative;
+
+  ${({ $stickyHeader }) => $stickyHeader && css`
+      flex-grow: 1;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    `}
+`;
+const DataTableControls = styled(TableControls)``;
+const DataTableContainer = styled.div`
+  ${({ $stickyHeader }) => $stickyHeader && css`
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    `}
+`;
+const StyledTableActionTD = styled(TableActionTD)`
+  ${({ $nestSpacing }) => css`
+    ${$nestSpacing && css`
+      position: relative;
+      left: ${$nestSpacing}px;
+    `}
+  `}
+`;
+const StyledTableTD = styled(TableTD)`
+  // Move the cell to the right by the amount of the nest spacing, and
+  // add same amount of padding to the right to not overlap with the next cell
+  ${({ $nestSpacing, $isFeatureCol }) => css`
+    ${$nestSpacing && css`
+      position: relative;
+      left: ${$nestSpacing}px;
+    `}
+    ${!$isFeatureCol && css`
+      padding-right: ${$nestSpacing}px;
+    `}
+  `}
+`;
+const DetailsTD = styled(TableTD)`
+  padding: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+`;
+const StickyDetailsTD = styled(StickyTD)`
+  padding: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+`;
+const StickyTDWithGapCoverage = styled(StickyTD)`
+  ${({ $gapCoverage, theme }) => $gapCoverage && css`
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: ${-$gapCoverage}px;
+        width: ${$gapCoverage}px;
+        height: calc(100% + 1px); // +1px to cover the bottom border
+        background-color: ${theme.color.background.primary};
+      }
+    `}
+`;
+const FloatingActionBarContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const isServerPagination = (pagination) => {
+	return typeof pagination === "object" && !("clientPagination" in pagination);
+};
+const isClientPagination = (pagination) => {
+	return typeof pagination === "object" && "clientPagination" in pagination;
+};
+const isServerSorting = (sort) => {
+	return typeof sort === "object";
+};
+const isRowWithDetails = (row) => {
+	return row != null && typeof row === "object" && "_details" in row && row._details != null;
+};
+const isRowWithSubrows = (row) => {
+	return row != null && typeof row === "object" && "subrows" in row && row.subrows != null;
+};
+const isRowWithSubrowsToAlwaysShowIds = (row) => {
+	return row != null && typeof row === "object" && "subrowsToAlwaysShowIds" in row && row.subrowsToAlwaysShowIds != null;
+};
+const isRowWithTourTarget = (row) => {
+	return row != null && typeof row === "object" && "dataTourTarget" in row && typeof row.dataTourTarget === "string";
+};
+const DISPLAYED_ROW_IDS_SEPARATOR = "";
+/**
+* The DataTable component is the core of Persona's table experiences.
+*
+* This component implements `@tanstack/react-table` and exposes a simplified, easy to use API.
+*
+* Planned functionality
+* - Column visibility, reordering
+* - Row selection
+* - Cell types (e.g. links, buttons, Stickers)
+*
+* Client-side support
+* - ✅ Sorting
+* - ✅ Search (enable with clientSearch prop)
+* - ✅ Pagination
+* - ✅ Filtering (requires explicit filter configuration in TableControls)
+*
+* Server-side support
+* - ✅ Sorting
+* - ✅ Filtering
+* - ✅ Pagination
+*
+* @example
+* // Basic usage with client-side search
+* <DataTable
+*   data={data}
+*   columns={columns}
+*   showControls={true}
+*   clientSearch={{ placeholder: "Search accounts..." }}
+* />
+*
+* @example
+* // Column-level search control
+* const columns = [
+*   { accessor: 'id', header: 'ID', searchable: false },
+*   { accessor: 'name', header: 'Name' }, // searchable by default
+*   { accessor: 'email', header: 'Email' },
+* ];
+*/
+/** Maps a column filter-type string to the corresponding TanStack filterFn name. */
+const getFilterFnName = (filterType) => {
+	switch (filterType) {
+		case "select": return "equals";
+		case "multiselect":
+		case "multiselect-alt":
+		case "multiselect-legacy": return "arrIncludesSome";
+		case "input": return "includesString";
+		default: return "equals";
+	}
+};
+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, rowLinkComponent, compact, 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, floatingBarContent }) => {
+	const DEFAULT_SEARCH_PLACEHOLDER = "Search...";
+	const { NEST_SPACING, EXPAND_COLUMN_WIDTH } = getColumnWidths(compact);
+	const [columnVisibility, setColumnVisibility] = useState(() => {
+		const visibility = {};
+		columns.forEach((column) => {
+			const columnId = typeof column === "object" ? column.id ?? column.accessor : column;
+			visibility[columnId] = typeof column === "object" ? column.visibility ?? true : true;
+		});
+		return visibility;
+	});
+	const [columnOrder, setColumnOrder] = useState([]);
+	const [rowSelection, setRowSelection] = useState({});
+	const lastSelectedRowIdRef = useRef(null);
+	const isSearchControlled = controlledSearchTerm != null;
+	const [internalSearchTerm, setInternalSearchTerm] = useState(typeof clientSearch === "object" ? clientSearch.initialValue || "" : "");
+	const globalFilter = isSearchControlled ? controlledSearchTerm : internalSearchTerm;
+	const setGlobalFilter = useCallback((value) => {
+		if (isSearchControlled) onSearchTermChange?.(value);
+		else setInternalSearchTerm(value);
+	}, [isSearchControlled, onSearchTermChange]);
+	const isColumnFiltersControlled = controlledColumnFilters != null;
+	const [internalColumnFilters, setInternalColumnFilters] = useState([]);
+	const columnFilters = isColumnFiltersControlled ? controlledColumnFilters : internalColumnFilters;
+	const setColumnFilters = useCallback((updater) => {
+		const next = typeof updater === "function" ? updater(columnFilters) : updater;
+		if (!isColumnFiltersControlled) setInternalColumnFilters(next);
+		onColumnFiltersChange?.(next);
+	}, [
+		columnFilters,
+		isColumnFiltersControlled,
+		onColumnFiltersChange
+	]);
+	const isExpansionControlled = controlledExpandedRowIds != null;
+	const [internalExpandedRows, setInternalExpandedRows] = useState(/* @__PURE__ */ new Set());
+	const expandedRows = isExpansionControlled ? controlledExpandedRowIds : internalExpandedRows;
+	const setExpandedRows = useCallback((updater) => {
+		if (isExpansionControlled) {
+			const newValue = updater(expandedRows);
+			onExpandedRowsChange?.(newValue);
+		} else setInternalExpandedRows(updater);
+	}, [
+		expandedRows,
+		isExpansionControlled,
+		onExpandedRowsChange
+	]);
+	const [checkboxColumnStates, setCheckboxColumnStates] = useState({});
+	const orderMap = columnOrder.reduce((acc, columnId, index) => {
+		acc[columnId] = index;
+		return acc;
+	}, {});
+	/**
+	* If basic client pagination is enabled, create a configuration object for client pagination.
+	*/
+	if (pagination === true) pagination = {
+		clientPagination: true,
+		pageSize: 10
+	};
+	const canRowExpand = useCallback((rowData) => {
+		if (isRowWithSubrows(rowData)) return rowData.subrows.length > 0;
+		if (isRowWithDetails(rowData)) return Boolean(rowData._details);
+		return detailComponent != null;
+	}, [detailComponent]);
+	const initialColumnPinning = useMemo(() => {
+		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");
+			columns.forEach((column) => {
+				if (typeof column === "object" && column.pinned) pinnedColumns.push(column.accessor);
+			});
+		}
+		return { left: pinnedColumns };
+	}, [
+		columns,
+		data,
+		canRowExpand,
+		expandColumnVisibility,
+		showControls,
+		enableRowSelection
+	]);
+	const toggleRowExpansion = useCallback((rowId) => {
+		setExpandedRows((prev) => {
+			const newSet = new Set(prev);
+			if (newSet.has(rowId)) newSet.delete(rowId);
+			else newSet.add(rowId);
+			return newSet;
+		});
+	}, [setExpandedRows]);
+	const dispatchCheckboxCellOnUpdate = useCallback((columnId, columnState) => {
+		const column = columns.find((col) => typeof col === "object" && col.accessor === columnId && col.format?.type === "checkbox");
+		if (column && typeof column === "object" && column.format?.type === "checkbox") column.format.onUpdate(Array.from(columnState));
+	}, [columns]);
+	const handleCheckboxCellChange = useCallback((columnId, rowId, checked) => {
+		setCheckboxColumnStates((prev) => {
+			const newStates = { ...prev };
+			if (!newStates[columnId]) newStates[columnId] = /* @__PURE__ */ new Set();
+			const columnState = new Set(newStates[columnId]);
+			if (checked) columnState.add(rowId);
+			else columnState.delete(rowId);
+			newStates[columnId] = columnState;
+			dispatchCheckboxCellOnUpdate(columnId, columnState);
+			return newStates;
+		});
+	}, [dispatchCheckboxCellOnUpdate]);
+	const getSelfAndNestedRowIds = useCallback((row, indexPath) => {
+		const rowId = getRowId ? getRowId(row) : indexPath.join(".");
+		if (isRowWithSubrows(row)) return [rowId, ...(row.subrows ?? []).map((subrow, subrowIndex) => getSelfAndNestedRowIds(subrow, [...indexPath, subrowIndex])).flat()];
+		return [rowId];
+	}, [getRowId]);
+	const handleSelectAllCheckboxCell = useCallback((columnId, checked) => {
+		setCheckboxColumnStates((prev) => {
+			const newStates = { ...prev };
+			let columnState;
+			if (checked) {
+				const allRowIds = data.flatMap((row, index) => getSelfAndNestedRowIds(row, [index]));
+				columnState = new Set(allRowIds);
+			} else columnState = /* @__PURE__ */ new Set();
+			newStates[columnId] = columnState;
+			dispatchCheckboxCellOnUpdate(columnId, columnState);
+			return newStates;
+		});
+	}, [
+		data,
+		getRowId,
+		dispatchCheckboxCellOnUpdate
+	]);
+	const tableOptions = useMemo(() => {
+		const options = {};
+		if (isClientPagination(pagination)) {
+			options.getPaginationRowModel = getPaginationRowModel();
+			options.initialState = { pagination: { pageSize: pagination.pageSize } };
+		} else if (isServerPagination(pagination)) {
+			const currentPage = pagination.paginationParams?.["current-page"] || 1;
+			const pageSize = pagination.pageSize || 10;
+			options.manualPagination = true;
+			options.onPaginationChange = (updaterOrValue) => {
+				const oldPageSize = pageSize;
+				const oldPageIndex = currentPage - 1;
+				if (typeof updaterOrValue === "function") {
+					const newPaginationState = updaterOrValue({
+						pageSize,
+						pageIndex: currentPage - 1
+					});
+					if (newPaginationState.pageSize !== oldPageSize) pagination.handlePageSizeClick(newPaginationState.pageSize);
+					if (newPaginationState.pageIndex !== oldPageIndex) pagination.handlePageLinkClick(newPaginationState.pageIndex + 1);
+				}
+			};
+			options.state = { pagination: {
+				pageSize,
+				pageIndex: currentPage - 1
+			} };
+			options.rowCount = pagination?.paginationParams?.["total-count"];
+			options.pageCount = pagination?.paginationParams?.["total-pages"];
+		}
+		if (sort === true) {
+			options.getSortedRowModel = getSortedRowModel();
+			options.enableSorting = true;
+		} else if (isServerSorting(sort)) {
+			options.manualSorting = true;
+			options.enableSorting = true;
+			options.onSortingChange = (updaterOrValue) => {
+				if (typeof updaterOrValue === "function") {
+					const newSortingState = updaterOrValue(sort.state);
+					sort.handleSortClick(newSortingState);
+				}
+			};
+			options.state = {
+				...options.state ? options.state : {},
+				sorting: sort.state
+			};
+		} else options.enableSorting = false;
+		if (showControls && enableRowSelection) {
+			options.enableRowSelection = getRowSelectable ? (row) => getRowSelectable(row.original) : true;
+			options.onRowSelectionChange = setRowSelection;
+		}
+		if (!enableSubRowSelection) options.enableSubRowSelection = false;
+		if (clientSearch) {
+			if (manualFiltering) options.manualFiltering = true;
+			else {
+				options.getFilteredRowModel = getFilteredRowModel();
+				options.globalFilterFn = "includesString";
+			}
+			options.onGlobalFilterChange = setGlobalFilter;
+		}
+		if (clientFiltering) {
+			options.getFilteredRowModel = getFilteredRowModel();
+			options.onColumnFiltersChange = setColumnFilters;
+		}
+		const columnOptionsVisibility = {};
+		columns.forEach((column) => {
+			const columnId = typeof column === "object" ? column.id || column.accessor : column;
+			if (typeof column === "object" && "visibility" in column && column.visibility != null) columnOptionsVisibility[columnId] = column.visibility;
+			else columnOptionsVisibility[columnId] = columnVisibility[columnId] ?? true;
+		});
+		options.state = {
+			...options.state,
+			columnVisibility: columnOptionsVisibility
+		};
+		const expandedState = {};
+		for (const rowId of expandedRows) expandedState[rowId] = true;
+		options.state = {
+			...options.state,
+			columnOrder,
+			rowSelection,
+			columnPinning: initialColumnPinning,
+			expanded: expandedState,
+			...clientSearch && { globalFilter },
+			...clientFiltering && { columnFilters }
+		};
+		options.onColumnVisibilityChange = setColumnVisibility;
+		options.onColumnOrderChange = setColumnOrder;
+		options.enableSortingRemoval = enableSortingRemoval;
+		options.sortDescFirst = sortDescFirst;
+		options.enableColumnPinning = initialColumnPinning.left && initialColumnPinning.left.length > 0;
+		return options;
+	}, [
+		pagination,
+		columnVisibility,
+		columnOrder,
+		enableRowSelection,
+		enableSubRowSelection,
+		rowSelection,
+		showControls,
+		sort,
+		enableSortingRemoval,
+		sortDescFirst,
+		clientSearch,
+		globalFilter,
+		clientFiltering,
+		columnFilters,
+		columns,
+		initialColumnPinning,
+		expandedRows
+	]);
+	const handleRowSelectionWithShift = useCallback((clickedRow, table, checked, isShiftKey) => {
+		const displayedRows = table.getRowModel().rows;
+		const currentIndex = displayedRows.findIndex((r) => r.id === clickedRow.id);
+		const lastSelectedRowId = lastSelectedRowIdRef.current;
+		const lastIndex = lastSelectedRowId != null ? displayedRows.findIndex((r) => r.id === lastSelectedRowId) : -1;
+		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);
+			});
+		} else clickedRow.toggleSelected(checked);
+		lastSelectedRowIdRef.current = clickedRow.id;
+	}, []);
+	const [tableColumns, columnOptions] = useTableColumns({
+		columns: useMemo(() => {
+			if (!clientFiltering) return columns;
+			return columns.map((column) => {
+				if (typeof column === "object" && column.filter != null && typeof column.filter === "object" && "type" in column.filter && typeof column.filter.type === "string") {
+					const filterType = column.filter.type;
+					return {
+						...column,
+						filter: {
+							...column.filter,
+							filterFn: getFilterFnName(filterType)
+						}
+					};
+				}
+				return column;
+			});
+		}, [columns, clientFiltering]),
+		data,
+		compact,
+		sort,
+		clientSearch,
+		clientFiltering,
+		expandColumnVisibility,
+		showControls,
+		enableRowSelection,
+		enableSubRowSelection,
+		rowActions,
+		getRowId,
+		expandedRows,
+		toggleRowExpansion,
+		canRowExpand,
+		checkboxColumnStates,
+		handleCheckboxCellChange,
+		handleSelectAllCheckboxCell,
+		getSelfAndNestedRowIds,
+		handleRowSelectionWithShift,
+		renderFormat: renderFormat ?? renderAsPDSFormat
+	});
+	const expandRowsCustom = useCallback((rowModel) => {
+		const expandedRows = [];
+		const handleRow = (row) => {
+			expandedRows.push(row);
+			if (row.subRows?.length && row.getIsExpanded()) row.subRows.forEach(handleRow);
+			else if (isRowWithSubrowsToAlwaysShowIds(row.original)) row.subRows.filter((subrow) => row.original.subrowsToAlwaysShowIds.includes(subrow.id)).forEach(handleRow);
+		};
+		rowModel.rows.forEach(handleRow);
+		return {
+			rows: expandedRows,
+			flatRows: rowModel.flatRows,
+			rowsById: rowModel.rowsById
+		};
+	}, []);
+	function getExpandedRowModelCustom() {
+		return (table) => memo$1(() => [
+			table.getState().expanded,
+			table.getPreExpandedRowModel(),
+			table.options.paginateExpandedRows
+		], (expanded, rowModel, paginateExpandedRows) => {
+			if (!rowModel.rows.length || expanded !== true && !Object.keys(expanded ?? {}).length) return expandRowsCustom(rowModel);
+			if (!paginateExpandedRows) return rowModel;
+			return expandRowsCustom(rowModel);
+		}, getMemoOptions(table.options, "debugTable", "getExpandedRowModel"));
+	}
+	const table = useReactTable({
+		data,
+		columns: tableColumns,
+		getSubRows: (row) => isRowWithSubrows(row) ? row.subrows : [],
+		getCoreRowModel: getCoreRowModel(),
+		getExpandedRowModel: getExpandedRowModelCustom(),
+		getRowId,
+		...tableOptions
+	});
+	const tableHeaderGroup = table.getHeaderGroups()[0];
+	const unprocessedRows = table.getCoreRowModel().rows;
+	const rows = table.getRowModel().rows;
+	const displayedRowIdsKey = rows.map((row) => row.id).join(DISPLAYED_ROW_IDS_SEPARATOR);
+	useEffect(() => {
+		onDisplayedRowIdsChange?.(displayedRowIdsKey ? displayedRowIdsKey.split(DISPLAYED_ROW_IDS_SEPARATOR) : []);
+	}, [displayedRowIdsKey, onDisplayedRowIdsChange]);
+	useEffect(() => {
+		const states = {};
+		const checkboxColumns = columns.filter((column) => typeof column === "object" && column.format?.type === "checkbox");
+		for (const column of checkboxColumns) {
+			const columnId = column.id || column.accessor;
+			const checkedRowIds = /* @__PURE__ */ new Set();
+			const getSelfAndNestedRows = (row) => [row, ...row.subRows.map(getSelfAndNestedRows).flat()];
+			const rootAndNestedRows = unprocessedRows.flatMap(getSelfAndNestedRows);
+			for (const row of rootAndNestedRows) {
+				const rowId = row.id;
+				if (row.original[column.accessor]) checkedRowIds.add(rowId);
+			}
+			states[columnId] = checkedRowIds;
+		}
+		setCheckboxColumnStates(states);
+	}, [unprocessedRows, columns]);
+	const generatedSearchProps = clientSearch ? {
+		value: globalFilter,
+		handleInput: setGlobalFilter,
+		placeholder: typeof clientSearch === "object" ? clientSearch.placeholder || DEFAULT_SEARCH_PLACEHOLDER : DEFAULT_SEARCH_PLACEHOLDER,
+		...typeof clientSearch === "object" && clientSearch
+	} : void 0;
+	const getCommonPinningStyles = useCallback((column) => {
+		const isPinned = column.getIsPinned();
+		const isLastPinned = isPinned === "left" && column.getIsLastColumn("left");
+		return {
+			left: isPinned === "left" ? `${column.getStart("left") + pinnedColumnLeftOffset}px` : void 0,
+			position: isPinned ? "sticky" : "relative",
+			hasRightBorder: isLastPinned
+		};
+	}, [pinnedColumnLeftOffset]);
+	/**
+	* Check if the column is a table feature column.
+	* Feature columns are special columns set by the table to
+	* allow a user to perform an action.
+	*/
+	const isFeatureCol = (columnId) => {
+		return [
+			"select-col",
+			"expand-col",
+			"action-col"
+		].includes(columnId);
+	};
+	const selectedRows = table.getFilteredSelectedRowModel().flatRows;
+	useEffect(() => {
+		onRowSelectionChange?.(selectedRows.map((row) => row.original));
+	}, [selectedRows, onRowSelectionChange]);
+	const actions = useMemo(() => {
+		return (getAvailableBulkActions ? getAvailableBulkActions(selectedRows.map((row) => row.original)) : bulkActions || controls?.bulkActions)?.map((action) => {
+			const clearSelection = () => table.setRowSelection({});
+			const baseAction = {
+				...action,
+				onClick: async () => {
+					await action.onClick(selectedRows.map((row) => row.id), clearSelection);
+				}
+			};
+			if ("popover" in action && action.popover) {
+				const popoverConfig = action.popover;
+				return {
+					...baseAction,
+					popover: {
+						options: popoverConfig.options,
+						onOptionSelect: async (option) => {
+							await popoverConfig.onOptionSelect(option, selectedRows.map((row) => row.id));
+							table.setRowSelection({});
+						}
+					}
+				};
+			}
+			return baseAction;
+		});
+	}, [
+		bulkActions,
+		getAvailableBulkActions,
+		selectedRows,
+		table,
+		controls?.bulkActions
+	]);
+	const shouldShowFloatingActionBar = compact && actions && actions.length > 0 && selectedRows.length > 0;
+	const hasGlobalFilter = clientSearch && globalFilter && globalFilter.trim().length > 0;
+	const hasFilters = columnFilters.length > 0;
+	const hasActiveFilters = hasGlobalFilter || hasFilters || hasExternalActiveFilters;
+	return /* @__PURE__ */ jsxs(DataTableContainer, {
+		$stickyHeader: stickyHeader,
+		children: [
+			showControls && /* @__PURE__ */ jsx(DataTableControls, {
+				compact,
+				title,
+				propertiesButton: showColumnProperties && /* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
+					disabled: false,
+					columnConfiguration: table.getVisibleFlatColumns().filter((column) => !isFeatureCol(column.columnDef.id ?? "")).map((column) => ({
+						key: column.id,
+						label: column.columnDef.header?.toString() || column.id
+					})).sort((a, b) => {
+						return (orderMap[a.key] || 0) - (orderMap[b.key] || 0);
+					}),
+					attributeOptions: columnOptions,
+					updateColumnConfiguration: (newConfiguration) => {
+						table.getAllColumns().map((column) => {
+							column.toggleVisibility(!!newConfiguration.find((c) => c.key === column.id));
+						});
+						setColumnOrder(newConfiguration.map((c) => c.key));
+						if (onUpdateColumnProperties) onUpdateColumnProperties(newConfiguration);
+					},
+					size: compact ? "sm" : void 0,
+					variant: compact ? "text" : "basic"
+				}),
+				selectedRows: table.getFilteredSelectedRowModel().flatRows.map((row) => row.id),
+				onClearSelection: () => table.setRowSelection({}),
+				searchProps: generatedSearchProps,
+				...controls,
+				bulkActions: actions
+			}),
+			/* @__PURE__ */ jsxs(TableContainer, {
+				$stickyHeader: stickyHeader,
+				children: [/* @__PURE__ */ jsx(StyledTableLayout, {
+					$onAddRow: !!onAddRow,
+					stickyHeader,
+					headerTR: /* @__PURE__ */ jsx(Fragment$1, { children: tableHeaderGroup.headers.map((header) => {
+						const pinningStyles = getCommonPinningStyles(header.column);
+						const isPinned = pinningStyles.position === "sticky";
+						const width = header.column.columnDef.meta?.width ? `${header.column.columnDef.meta?.width}px` : void 0;
+						const minWidth = header.column.columnDef.meta?.minWidth ? `${header.column.columnDef.meta?.minWidth}px` : width ?? `${header.column.getSize()}px`;
+						const thProps = {
+							id: header.id,
+							sortable: isFeatureCol(header.id) ? false : header.column.getCanSort(),
+							onClick: isFeatureCol(header.id) ? void 0 : header.column.getToggleSortingHandler(),
+							sortDirection: isFeatureCol(header.id) ? void 0 : header.column.getIsSorted(),
+							colSpan: header.colSpan,
+							align: header.column.columnDef.meta?.align,
+							width: header.column.columnDef.meta?.width ? `${header.column.columnDef.meta?.width}px` : void 0,
+							size: compact ? "sm" : "md",
+							style: { minWidth }
+						};
+						if (isPinned) return /* @__PURE__ */ createElement(StickyTH, {
+							...thProps,
+							key: header.id,
+							left: pinningStyles.left ? parseInt(pinningStyles.left) : 0,
+							hasRightBorder: pinningStyles.hasRightBorder
+						}, flexRender(header.column.columnDef.header, header.getContext()));
+						return /* @__PURE__ */ createElement(TableTH, {
+							...thProps,
+							key: header.id
+						}, header.column.columnDef.meta?.headerTooltip ? /* @__PURE__ */ jsx(TextUnderlineTooltip, {
+							side: "top",
+							tooltip: header.column.columnDef.meta.headerTooltip,
+							zIndex: Z_INDICES.topNavTooltip,
+							children: flexRender(header.column.columnDef.header, header.getContext())
+						}) : flexRender(header.column.columnDef.header, header.getContext()));
+					}) }),
+					nullState: /* @__PURE__ */ jsx("p", { children: "No results found." }),
+					isLoading,
+					size: compact ? "sm" : void 0,
+					children: /* @__PURE__ */ jsx(TableBody, { children: columns.length === 0 ? /* @__PURE__ */ jsx(TableTR, {
+						disableHoverBackground: true,
+						children: /* @__PURE__ */ jsx(TableEmptyState, {
+							colSpan: 1,
+							children: /* @__PURE__ */ jsx(Paragraph, {
+								size: "lg",
+								weight: "bold",
+								color: "primary",
+								children: "No columns configured"
+							})
+						})
+					}) : rows.length === 0 ? /* @__PURE__ */ jsx(TableTR, {
+						disableHoverBackground: true,
+						children: /* @__PURE__ */ jsxs(TableEmptyState, {
+							colSpan: tableHeaderGroup.headers.length,
+							children: [/* @__PURE__ */ jsx(Paragraph, {
+								size: "lg",
+								weight: "bold",
+								color: "primary",
+								children: emptyState?.title || (hasActiveFilters ? "No results found. Try changing your filters." : "No results found.")
+							}), emptyState?.description && /* @__PURE__ */ jsx(Paragraph, {
+								size: "md",
+								color: "secondary",
+								children: emptyState.description
+							})]
+						})
+					}) : rows.map((row) => {
+						const rowData = row.original;
+						const rowId = getRowId ? getRowId(rowData) : row.id;
+						const rowLabel = getRowLabel?.(rowData);
+						const isExpanded = expandedRows.has(rowId);
+						const canExpand = canRowExpand(rowData);
+						const dynamicNestSpacing = showControls && enableRowSelection ? NEST_SPACING + 8 : NEST_SPACING;
+						let leftMostNonSpecialColumnFound = false;
+						const rowElements = row.getVisibleCells().map((cell) => {
+							const pinningStyles = getCommonPinningStyles(cell.column);
+							const isPinned = pinningStyles.position === "sticky";
+							if (cell.column.id === "action-col") return /* @__PURE__ */ jsx(StyledTableActionTD, {
+								style: { textAlign: cell.column.columnDef.meta?.align },
+								$nestSpacing: row.depth * dynamicNestSpacing,
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+							if (isPinned) {
+								const leftBumpFromNesting = !leftMostNonSpecialColumnFound ? row.depth * dynamicNestSpacing : 0;
+								const width = cell.column.columnDef.meta?.width ? `${cell.column.columnDef.meta?.width}px` : void 0;
+								const minWidth = cell.column.columnDef.meta?.minWidth ? `${cell.column.columnDef.meta?.minWidth}px` : width ?? `${cell.column.getSize()}px`;
+								const stickyTableCell = cell.column.id === "expand-col" ? /* @__PURE__ */ jsx(StickyTDWithGapCoverage, {
+									left: (pinningStyles.left ? parseInt(pinningStyles.left) : 0) + leftBumpFromNesting,
+									style: {
+										minWidth,
+										textAlign: cell.column.columnDef.meta?.align
+									},
+									hasRightBorder: pinningStyles.hasRightBorder,
+									$gapCoverage: leftBumpFromNesting,
+									children: flexRender(cell.column.columnDef.cell, cell.getContext())
+								}, cell.id) : /* @__PURE__ */ jsx(StickyTD, {
+									left: (pinningStyles.left ? parseInt(pinningStyles.left) : 0) + leftBumpFromNesting,
+									style: {
+										minWidth,
+										textAlign: cell.column.columnDef.meta?.align
+									},
+									hasRightBorder: pinningStyles.hasRightBorder,
+									children: flexRender(cell.column.columnDef.cell, cell.getContext())
+								}, cell.id);
+								if (!leftMostNonSpecialColumnFound && !isFeatureCol(cell.column.id)) leftMostNonSpecialColumnFound = true;
+								return stickyTableCell;
+							}
+							const tableCell = /* @__PURE__ */ jsx(StyledTableTD, {
+								style: { textAlign: cell.column.columnDef.meta?.align },
+								width: isFeatureCol(cell.column.id) ? "1%" : void 0,
+								$nestSpacing: leftMostNonSpecialColumnFound ? void 0 : row.depth * dynamicNestSpacing,
+								$isFeatureCol: isFeatureCol(cell.column.id),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+							if (!leftMostNonSpecialColumnFound && !isFeatureCol(cell.column.id)) leftMostNonSpecialColumnFound = true;
+							return tableCell;
+						});
+						const isRowActive = rowId === activeRowId;
+						const handleRowClick = onRowClick != null ? () => {
+							onRowClick(rowId);
+						} : canExpand ? () => {
+							toggleRowExpansion(rowId);
+						} : void 0;
+						const rowProps = {
+							key: rowId,
+							"aria-label": rowLabel,
+							onClick: handleRowClick,
+							$isActive: isRowActive,
+							disableHoverBackground: disableRowHover,
+							css: { cursor: handleRowClick ? "pointer" : void 0 },
+							...isRowWithTourTarget(row.original) && { "data-tour-target": row.original.dataTourTarget }
+						};
+						const RowLinkComponent = rowLinkComponent ?? Link;
+						const elements = [getLinkToRow || rowLinkPrefix ? /* @__PURE__ */ jsx(TableTR, {
+							...rowProps,
+							as: RowLinkComponent,
+							to: getLinkToRow ? getLinkToRow(row.original) : `${rowLinkPrefix}/${rowId}`,
+							children: rowElements
+						}) : /* @__PURE__ */ jsx(TableTR, {
+							...rowProps,
+							children: rowElements
+						})];
+						if (canExpand && isExpanded) {
+							let detailContent = null;
+							if (isRowWithDetails(rowData) && rowData._details) if (typeof rowData._details === "function") detailContent = rowData._details(rowData);
+							else detailContent = rowData._details;
+							else if (detailComponent) detailContent = /* @__PURE__ */ jsx(detailComponent, { rowData });
+							if (detailContent) {
+								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StickyTD, {
+									colSpan: 1,
+									left: pinnedColumnLeftOffset
+								}), /* @__PURE__ */ jsx(StickyDetailsTD, {
+									colSpan: tableHeaderGroup.headers.length - 1,
+									left: EXPAND_COLUMN_WIDTH + pinnedColumnLeftOffset,
+									children: detailContent
+								})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableTD, { colSpan: 1 }), /* @__PURE__ */ jsx(DetailsTD, {
+									colSpan: tableHeaderGroup.headers.length - 1,
+									children: detailContent
+								})] });
+								elements.push(/* @__PURE__ */ jsx(TableTR, {
+									disableHoverBackground: true,
+									children: detailCells
+								}, `${row.id}-details`));
+							}
+						}
+						if (onAddRow && (!canAddAfterRow || canAddAfterRow?.(rowData, row.getIsExpanded() && isRowWithSubrows(rowData)))) elements.push(/* @__PURE__ */ jsx(Inserter, {
+							priorRowLabel: `Row ${rowId}`,
+							colSpan: tableHeaderGroup.headers.length,
+							onAddRow: () => onAddRow(rowId, row.getIsExpanded() && isRowWithSubrows(rowData)),
+							nestSpacing: row.depth * dynamicNestSpacing
+						}, `${rowId}-inserter`));
+						return elements;
+					}) })
+				}), shouldShowFloatingActionBar && actions && /* @__PURE__ */ jsx(FloatingActionBarContainer, { children: /* @__PURE__ */ jsx(FloatingActionBar, {
+					selectedCount: selectedRows.length,
+					onClearSelection: () => table.setRowSelection({}),
+					actions,
+					extraContent: floatingBarContent
+				}) })]
+			}),
+			pagination && data.length > 0 && /* @__PURE__ */ jsx(Pagination_default, {
+				pageSize: table.getState().pagination.pageSize,
+				pageSizeOptions: typeof pagination === "object" ? pagination.pageSizeOptions : void 0,
+				showPageSizeSelector: isServerPagination(pagination) ? pagination.showPageSizeSelector : void 0,
+				paginationParams: {
+					"current-page": table.getState().pagination.pageIndex + 1,
+					"total-count": table.getRowCount(),
+					"total-pages": table.getPageCount()
+				},
+				handlePageLinkClick: (pageNumber) => table.setPageIndex(pageNumber - 1),
+				handlePageSizeClick: table.setPageSize,
+				onPageChange: isServerPagination(pagination) ? pagination.onPageChange : void 0
+			})
+		]
+	});
+};
+//#endregion
+export { DataTable, DataTable as default, DataTableContainer, DataTableControls, FloatingActionBar, FloatingActionBarContainer, Inserter, getColumnWidths, renderAsCheckbox, renderAsCheckboxHeader, renderAsCopyableString, renderAsDate, renderAsDatetime, renderAsLightweightImage, renderAsNumber, renderAsPDSFormat, renderAsPii, renderAsSticker, renderAsString, renderAsURL, useTableColumns };
+
+//# sourceMappingURL=index.mjs.map