@persona/design-system 0.9.1 → 0.10.1

package/dist/DataTable-BoAAKhVH.mjs

@@ -0,0 +1,1547 @@
+import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, r as formatDate, u as DEFAULT_COMMON_STRINGS } from "./i18n-BscB9FUy.mjs";
+import { n as RouterLink } from "./router-COrZcVkf.mjs";
+import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
+import { i as Paragraph, o as TabularNumber } from "./Text-CSwFifQF.mjs";
+import "./variables/transitions.mjs";
+import { t as TextUnderlineTooltip } from "./Tooltip-B-0VRuKT.mjs";
+import { isFocused } from "./lib/pseudoClass.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { focusOutline } from "./mixins/focus.mjs";
+import "./variables/effect.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import { t as HStack } from "./Stack-BkC7FCdF.mjs";
+import { n as Button, t as IconButton } from "./IconButton-HWx5Hlmi.mjs";
+import { n as Sticker } from "./Sticker-yhxtIYH8.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
+import { t as Checkbox } from "./Checkbox-BaJ-dGdX.mjs";
+import { t as Pagination_default } from "./Pagination-DtK-jbEY.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--o4ZLRbb.mjs";
+import { t as HoverCopyableField } from "./HoverCopyableField-D-BubaRd.mjs";
+import { t as Link } from "./Link-Cf__H8gD.mjs";
+import { t as Pii_default } from "./Pii-DueIK287.mjs";
+import { I as isFilterActive, f as TableViewConfigurationDropdown, u as TableControls, v as isEmptyState } from "./TableControls-n16XKO9S.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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";
+//#region components/DataTable/clientFilterUtils.ts
+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 isEmptyFilterValue = (value) => {
+	return value == null || value === "" || Array.isArray(value) && value.length === 0;
+};
+const isClientFilterConfig = (filter) => {
+	if (typeof filter !== "object" || filter === null || !("type" in filter)) return false;
+	return filter.type === "select" || filter.type === "multiselect" || filter.type === "input";
+};
+/** Converts column-level client filters into controls backed by TanStack's column-filter state. */
+const generateClientFilters = (columns, columnFilters, setColumnFilters) => {
+	return columns.flatMap((column) => {
+		const filterConfig = column.filter;
+		if (!isClientFilterConfig(filterConfig) || filterConfig.enabled === false) return [];
+		const columnId = column.id || column.accessor;
+		const name = typeof column.header === "string" ? column.header : columnId;
+		const currentValue = columnFilters.find((filter) => filter.id === columnId)?.value;
+		const onChange = (value) => {
+			setColumnFilters((previousFilters) => {
+				if (isEmptyFilterValue(value)) return previousFilters.filter((filter) => filter.id !== columnId);
+				if (previousFilters.some((filter) => filter.id === columnId)) return previousFilters.map((filter) => filter.id === columnId ? {
+					...filter,
+					value
+				} : filter);
+				return [...previousFilters, {
+					id: columnId,
+					value
+				}];
+			});
+		};
+		const baseConfig = {
+			id: columnId,
+			name,
+			placeholder: filterConfig.placeholder,
+			enabled: true
+		};
+		switch (filterConfig.type) {
+			case "select": return [{
+				...baseConfig,
+				type: "select",
+				value: currentValue ?? "",
+				options: filterConfig.options ?? [],
+				onChange
+			}];
+			case "multiselect": return [{
+				...baseConfig,
+				type: "multiselect",
+				value: currentValue ?? [],
+				options: filterConfig.options ?? [],
+				onChange
+			}];
+			case "input": return [{
+				...baseConfig,
+				type: "input",
+				value: currentValue ?? "",
+				onChange,
+				onDelete: () => onChange("")
+			}];
+			default: return [];
+		}
+	});
+};
+//#endregion
+//#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 }) => semanticColor(theme, "SurfaceElevated", 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 }) => {
+	const strings = usePDSStrings();
+	return /* @__PURE__ */ jsxs(Bar, { children: [/* @__PURE__ */ jsxs(HStack, {
+		align: "center",
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			onClick: onClearSelection,
+			"aria-label": strings.clearSelection,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		}), /* @__PURE__ */ jsx(Paragraph, {
+			color: "primary",
+			children: strings.selectedItems(selectedCount)
+		})]
+	}), /* @__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",
+					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);
+		})]
+	})] });
+};
+//#endregion
+//#region components/DataTable/helpers.tsx
+const EmptyCellText = styled(Paragraph)`
+  ${semanticOnly((tokens) => `color: ${tokens.FgSecondaryStatic};`)}
+`;
+const renderAsCheckbox = ({ rowId, isChecked, onChange, onValueChange, columnHeader, disabled, indeterminate, strings = DEFAULT_COMMON_STRINGS }) => {
+	return /* @__PURE__ */ jsx(Checkbox, {
+		checked: isChecked,
+		onChange: (e) => {
+			onChange?.(e);
+			onValueChange?.(rowId, e.target.checked);
+		},
+		containerProps: { onClick: (e) => {
+			e.stopPropagation();
+		} },
+		"aria-label": columnHeader ? strings.selectRowForColumn(columnHeader, rowId) : strings.selectRow(rowId),
+		indeterminate,
+		disabled
+	});
+};
+const renderAsCheckboxHeader = ({ header, isChecked, isIndeterminate, onChange, onValueChange, strings = DEFAULT_COMMON_STRINGS }) => {
+	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 ? strings.selectAllOf(header) : strings.selectAll
+	});
+	if (header) return /* @__PURE__ */ jsxs(HStack, {
+		spacing: Spacing[3],
+		align: "center",
+		children: [checkbox, /* @__PURE__ */ jsx("span", { children: header })]
+	});
+	return checkbox;
+};
+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, locale) => {
+	if (value == null || typeof value !== "string") return "";
+	const date = DateTime.fromISO(value);
+	return date.isValid ? formatDate(date, {
+		locale,
+		format: config?.format,
+		showTimeZone: config?.showTimeZone
+	}) : "";
+};
+const renderAsDatetime = (value, config, locale) => {
+	if (value == null || typeof value !== "string") return "";
+	const date = DateTime.fromISO(value);
+	return date.isValid ? formatDateTime(date, {
+		locale,
+		format: config?.format,
+		showTimeZone: config?.showTimeZone
+	}) : "";
+};
+const renderAsURL = (value) => {
+	if (value == null || typeof value !== "string" || value.length === 0) return "";
+	return /* @__PURE__ */ jsx(Link, {
+		url: value,
+		target: "_blank",
+		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 }) => semanticColor(theme, "SurfaceSecondary", theme.color.background.secondary)};
+  width: ${({ $width }) => $width ?? "200px"};
+  height: ${({ $height }) => $height ?? "144px"};
+  svg {
+    color: ${({ theme }) => semanticColor(theme, "FgDisabled", 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(EmptyCellText, { children: config?.emptyText ?? "" });
+	return /* @__PURE__ */ jsx(WrappingText, { children: config?.copyable ? /* @__PURE__ */ jsx(HoverCopyableField, {
+		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(EmptyCellText, { 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, strings = DEFAULT_COMMON_STRINGS) => {
+	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": strings.noImage
+		})
+	});
+	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, options = {}) => {
+	switch (format?.type) {
+		case "date": return renderAsDate(value, format.config, options.locale);
+		case "datetime": return renderAsDatetime(value, format.config, options.locale);
+		case "sticker": return renderAsSticker(value, format.config);
+		case "url": return renderAsURL(value);
+		case "number": return renderAsNumber(value);
+		case "image": return renderAsLightweightImage(value, format.config, options.strings);
+		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 }) => semanticColor(theme, "BorderAccent", 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 }) => semanticColor(theme, "ActionPrimary", theme.color.primary.brand)};
+  color: ${({ theme }) => semanticColor(theme, "FgInverse", Color.BackgroundButtonInverse)};
+  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: "currentColor" })
+				}),
+				/* @__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;
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
+`;
+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 strings = usePDSStrings();
+	const stringsRef = useRef(strings);
+	stringsRef.current = strings;
+	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": stringsRef.current.viewRowActions(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,
+						format: column.format,
+						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),
+							strings
+						});
+					};
+					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,
+							strings
+						});
+					};
+					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() || 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
+			})
+		}));
+		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 });
+				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.id || 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,
+		strings
+	]);
+}
+//#endregion
+//#region components/DataTable/DataTable.tsx
+const forwardedRowLinkClicks = /* @__PURE__ */ new WeakSet();
+const TableEmptyState = styled.td`
+  vertical-align: middle;
+  text-align: center;
+  width: 100%;
+  height: 176px;
+`;
+const StyledTableLayout = styled(TableLayout)`
+  ${({ $onAddRow }) => $onAddRow && css`
+      padding-bottom: ${Spacing[3]};
+    `}
+`;
+const TableContainer = styled.div`
+  position: relative;
+  ${semanticScrollbar}
+
+  ${({ $stickyHeader }) => $stickyHeader && css`
+      flex-grow: 1;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    `}
+`;
+const RowLink = styled(RouterLink)`
+  /* Match surrounding cell text. The row is still a link; only URL cells use accent. */
+  color: inherit;
+  text-decoration: none;
+  ${focusOutline}
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: inherit;
+  }
+`;
+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 }) => $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: inherit;
+      }
+    `}
+`;
+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' },
+* ];
+*/
+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, 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(() => {
+		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 columnsWithFilterFn = 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]);
+	const strings = usePDSStrings();
+	const locale = usePDSLocale();
+	const defaultRenderFormat = useCallback((value, format, row) => renderAsPDSFormat(value, format, row, {
+		locale,
+		strings
+	}), [locale, strings]);
+	const [tableColumns, columnOptions] = useTableColumns({
+		columns: columnsWithFilterFn,
+		data,
+		compact,
+		sort,
+		clientSearch,
+		clientFiltering,
+		expandColumnVisibility,
+		showControls,
+		enableRowSelection,
+		enableSubRowSelection,
+		rowActions,
+		getRowId,
+		expandedRows,
+		toggleRowExpansion,
+		canRowExpand,
+		checkboxColumnStates,
+		handleCheckboxCellChange,
+		handleSelectAllCheckboxCell,
+		getSelfAndNestedRowIds,
+		handleRowSelectionWithShift,
+		renderFormat: renderFormat ?? defaultRenderFormat
+	});
+	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 unifiedFilters = useMemo(() => {
+		const configuredFilters = controls?.filters ?? [];
+		if (!clientFiltering) return [...configuredFilters];
+		const clientFilters = generateClientFilters(columns.filter((column) => typeof column === "object"), columnFilters, setColumnFilters);
+		return [...configuredFilters, ...clientFilters];
+	}, [
+		clientFiltering,
+		columnFilters,
+		columns,
+		controls?.filters,
+		setColumnFilters
+	]);
+	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 || 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;
+	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,
+				filters: unifiedFilters
+			}),
+			/* @__PURE__ */ jsxs(TableContainer, {
+				$stickyHeader: stickyHeader,
+				children: [/* @__PURE__ */ jsx(StyledTableLayout, {
+					$onAddRow: !!onAddRow,
+					stickyHeader,
+					containerScrollsHorizontally: scrollsHorizontally,
+					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: strings.noResults }),
+					isLoading,
+					size: compact ? "sm" : void 0,
+					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: strings.noColumnsConfigured
+							})
+						})
+					}) : 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 ? strings.noResultsTryFilters : strings.noResults)
+							}), 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 rowLinkHref = getLinkToRow ? getLinkToRow(row.original) : rowLinkPrefix ? `${rowLinkPrefix}/${rowId}` : void 0;
+						const dynamicNestSpacing = showControls && enableRowSelection ? 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;
+						const RowLinkComponent = rowLinkComponent ?? RouterLink;
+						const renderCellContent = (cell) => {
+							const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+							if (!rowLinkHref || cell.column.id !== rowLinkCellId) return content;
+							const value = cell.getValue();
+							return /* @__PURE__ */ jsx(RowLink, {
+								as: RowLinkComponent,
+								to: rowLinkHref,
+								"data-row-link": true,
+								"aria-label": value == null || value === "" ? rowLabel : void 0,
+								children: content
+							});
+						};
+						let leftMostNonSpecialColumnFound = false;
+						const rowElements = visibleCells.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: renderCellContent(cell)
+							}, 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: renderCellContent(cell)
+								}, 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: renderCellContent(cell)
+								}, 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: renderCellContent(cell)
+							}, 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 handleRowClickWithLink = (event) => {
+							if (forwardedRowLinkClicks.has(event.nativeEvent)) return;
+							handleRowClick?.();
+							if (!rowLinkHref || event.defaultPrevented || event.target.closest("a, button, input, select, textarea, label, [role=\"checkbox\"], [role=\"button\"], [role=\"menuitem\"]")) return;
+							const link = event.currentTarget.querySelector("a[data-row-link]");
+							const ownerWindow = link?.ownerDocument.defaultView;
+							if (!link || !ownerWindow) return;
+							const forwardedClick = new ownerWindow.MouseEvent("click", {
+								bubbles: true,
+								cancelable: true,
+								button: event.button,
+								ctrlKey: event.ctrlKey,
+								metaKey: event.metaKey,
+								shiftKey: event.shiftKey,
+								altKey: event.altKey
+							});
+							forwardedRowLinkClicks.add(forwardedClick);
+							link.dispatchEvent(forwardedClick);
+						};
+						const elements = [/* @__PURE__ */ jsx(TableTR, {
+							"aria-label": rowLabel,
+							onClick: handleRowClickWithLink,
+							$isActive: isRowActive,
+							disableHoverBackground: disableRowHover,
+							css: { cursor: rowLinkHref || handleRowClick ? "pointer" : void 0 },
+							...isRowWithTourTarget(row.original) && { "data-tour-target": row.original.dataTourTarget },
+							children: rowElements
+						}, rowId)];
+						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 { 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-BoAAKhVH.mjs.map