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

package/dist/components/DataTable/index.cjs

@@ -0,0 +1,1434 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
+const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
+require("../../variables/effect.cjs");
+require("../../variables/transitions.cjs");
+const require_Text = require("../../Text-CzN0DOXV.cjs");
+const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
+const require_lib_zindex = require("../../lib/zindex.cjs");
+const require_Stack = require("../../Stack-BF-9YjA1.cjs");
+const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
+const require_Sticker = require("../../Sticker-D0jIU2Dt.cjs");
+const require_DropdownMenu = require("../../DropdownMenu-CfJxgWN5.cjs");
+const require_Checkbox = require("../../Checkbox-DhxpxzGp.cjs");
+const require_Pagination = require("../../Pagination-D4IVVj3S.cjs");
+const require_Table = require("../../Table-C9rjUVpn.cjs");
+const require_HoverCopyableField = require("../../HoverCopyableField-B_WNB7Qp.cjs");
+const require_Pii = require("../../Pii-D-Ry7L0t.cjs");
+const require_TableControls = require("../../TableControls-DcbnNqeK.cjs");
+require("./types.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _persona_icons = require("@persona/icons");
+let _persona_icons_12px = require("@persona/icons/12px");
+let react_router_dom = require("react-router-dom");
+let lodash = require("lodash");
+let _tanstack_react_table = require("@tanstack/react-table");
+let luxon = require("luxon");
+let lodash_fp_startCase_js = require("lodash/fp/startCase.js");
+lodash_fp_startCase_js = require_chunk.__toESM(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_components.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.background.primary};
+  width: 100%;
+  padding: ${_persona_design_tokens.Spacing[2]};
+  border-radius: ${_persona_design_tokens.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: ${_persona_design_tokens.Spacing[8]};
+  min-width: 380px;
+`;
+const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, actions }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Bar, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+		align: "center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			size: "sm",
+			onClick: onClearSelection,
+			"aria-label": "Clear selection",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.XIcon, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Paragraph, {
+			color: "primary",
+			children: [selectedCount, " selected"]
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+		align: "center",
+		spacing: _persona_design_tokens.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__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+					size: "sm",
+					"aria-label": action["aria-label"],
+					children: action.icon
+				}, key);
+				else trigger = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+					variant: action.variant || "basic",
+					size: "sm",
+					children: "label" in action ? action.label : ""
+				}, key);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+					trigger,
+					align: "center",
+					children: (action.popover?.options ?? []).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.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__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				size: "sm",
+				"aria-label": action["aria-label"],
+				onClick: action.onClick,
+				children: action.icon
+			}, key);
+			else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.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__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.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__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.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__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+		spacing: _persona_design_tokens.Spacing[3],
+		align: "center",
+		children: [checkbox, /* @__PURE__ */ (0, react_jsx_runtime.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 = luxon.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 = luxon.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__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: value,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: value
+	});
+};
+const renderAsNumber = (value) => {
+	if (value == null) return "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.TabularNumber, { children: value });
+};
+const createSticker = (item, config, key) => {
+	const displayLabel = config?.labels?.[item] ?? item;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.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__ */ (0, react_jsx_runtime.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_components.default.span`
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.875em;
+`;
+const WrappingText = styled_components.default.span`
+  display: inline-block;
+  max-width: 100%;
+  word-break: break-word;
+  overflow-wrap: break-word;
+`;
+const EmptyImageContainer = styled_components.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${_persona_design_tokens.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_components.default.img`
+  object-fit: ${({ $fit }) => $fit ?? "cover"};
+  display: block;
+`;
+const renderAsCopyableString = (value, config) => {
+	const valueAsString = renderAsString(value);
+	const content = config?.mono ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonoText, { children: valueAsString }) : valueAsString;
+	if (!valueAsString) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: config?.emptyText ?? "" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappingText, { children: config?.copyable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HoverCopyableField.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: emptyText }), config.subComponent?.(row)] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pii.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: config.fallback }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyImageContainer, {
+		$width: config?.width,
+		$height: config?.height,
+		"aria-label": config?.alt ?? "image",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ImageIcon, {
+			size: 24,
+			"aria-label": "No image"
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, styled_components.default)(require_Table.TableCell)`
+  padding: 0 !important;
+  ${({ $nestSpacing }) => $nestSpacing ? `padding-left: ${$nestSpacing}px !important` : ""};
+  height: 0;
+  position: relative;
+  border: 0;
+  z-index: ${require_lib_zindex.Z_INDICES.withShadow};
+`;
+const AddRowLine = styled_components.default.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_components.default.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: ${require_lib_zindex.Z_INDICES.withShadow};
+  // TODO: Add a focus style
+
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:hover ~ ${AddRowLine} {
+    opacity: 1;
+    height: 2px;
+  }
+`;
+const StyledTableRow = (0, styled_components.default)(require_Table.TableRow)`
+  &${require_lib_pseudoClass.isFocused} {
+    box-shadow: none;
+  }
+  cursor: pointer;
+  &:hover > ${AddRowLine}, &:focus > ${AddRowLine} {
+    opacity: 1;
+    height: 2px;
+  }
+
+  &:hover > ${StyledPlusButton}, &:focus > ${StyledPlusButton} {
+    opacity: 1;
+  }
+`;
+const HoverArea = styled_components.default.div`
+  position: absolute;
+  height: 12px;
+  top: -6px;
+  width: ${({ $nestSpacing }) => $nestSpacing ? `calc(100% - ${$nestSpacing}px)` : "100%"};
+  z-index: ${require_lib_zindex.Z_INDICES.withShadow};
+  &:hover ~ ${AddRowLine} {
+    opacity: 1;
+    height: 2px;
+  }
+
+  &:hover ~ ${StyledPlusButton} {
+    opacity: 1;
+  }
+`;
+const StyledPlusIcon = (0, styled_components.default)(_persona_icons_12px.PlusIcon)`
+  position: absolute;
+  top: 1px;
+  left: 1px;
+`;
+const Inserter = ({ priorRowLabel, colSpan, nestSpacing = 0, label, onAddRow }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableRow, {
+		onKeyDown: (evt) => {
+			if (evt.key === " " || evt.key === "Enter") {
+				evt.preventDefault();
+				evt.stopPropagation();
+				onAddRow();
+			}
+		},
+		tabIndex: 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InserterTableCell, {
+			colSpan,
+			$nestSpacing: nestSpacing,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverArea, {
+					$nestSpacing: nestSpacing,
+					role: "presentation",
+					"aria-label": label || `Insert a row after ${priorRowLabel}`,
+					onClick: onAddRow
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPlusButton, {
+					id: `${(0, lodash.kebabCase)(priorRowLabel)}-inserter`,
+					"aria-label": label || `Insert a row after ${priorRowLabel}`,
+					onClick: onAddRow,
+					type: "button",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPlusIcon, { color: _persona_design_tokens.Color.BackgroundButtonInverse })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddRowLine, {
+					$nestSpacing: nestSpacing,
+					onClick: onAddRow
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region components/DataTable/useTableColumns.tsx
+const ExpandButton = styled_components.default.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+`;
+const ExpandColumnDisabledChevron = (0, styled_components.default)(_persona_icons.ChevronRightIcon)`
+  color: ${({ theme }) => theme.color.text.disabled};
+`;
+/** Shared wrapper so disabled chevrons and expand buttons share the same horizontal alignment. */
+const ExpandColumnPlaceholder = styled_components.default.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 = (0, react.useRef)(rowActions);
+	rowActionsRef.current = rowActions;
+	const renderActionCell = (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+			trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.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__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
+			}),
+			portal: true,
+			children: actions.map(({ label, onClick, ...menuItemProps }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.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 (0, react.useMemo)(() => {
+		const columnHelper = (0, _tanstack_react_table.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: (0, lodash_fp_startCase_js.default)(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__ */ (0, react_jsx_runtime.jsx)(ExpandColumnPlaceholder, {
+					"aria-hidden": true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandColumnDisabledChevron, {})
+				});
+				const rowId = getRowId ? getRowId(rowData) : row.id;
+				const isExpanded = expandedRows.has(rowId);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandColumnPlaceholder, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronRightIcon, {})
+				}) });
+			}
+		}));
+		if (hasRowActions) {
+			const emptyHeader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+			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 : (0, lodash_fp_startCase_js.default)(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_components.default.td`
+  vertical-align: middle;
+  text-align: center;
+  width: 100%;
+  height: 176px;
+`;
+const StyledTableLayout = (0, styled_components.default)(require_Table.TableLayout)`
+  ${({ $onAddRow }) => $onAddRow && styled_components.css`
+      padding-bottom: ${_persona_design_tokens.Spacing[3]};
+    `}
+`;
+const TableContainer = styled_components.default.div`
+  position: relative;
+
+  ${({ $stickyHeader }) => $stickyHeader && styled_components.css`
+      flex-grow: 1;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    `}
+`;
+const DataTableControls = (0, styled_components.default)(require_TableControls.TableControls)``;
+const DataTableContainer = styled_components.default.div`
+  ${({ $stickyHeader }) => $stickyHeader && styled_components.css`
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    `}
+`;
+const StyledTableActionTD = (0, styled_components.default)(require_Table.TableActionTD)`
+  ${({ $nestSpacing }) => styled_components.css`
+    ${$nestSpacing && styled_components.css`
+      position: relative;
+      left: ${$nestSpacing}px;
+    `}
+  `}
+`;
+const StyledTableTD = (0, styled_components.default)(require_Table.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 }) => styled_components.css`
+    ${$nestSpacing && styled_components.css`
+      position: relative;
+      left: ${$nestSpacing}px;
+    `}
+    ${!$isFeatureCol && styled_components.css`
+      padding-right: ${$nestSpacing}px;
+    `}
+  `}
+`;
+const DetailsTD = (0, styled_components.default)(require_Table.TableTD)`
+  padding: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+`;
+const StickyDetailsTD = (0, styled_components.default)(require_Table.StickyTD)`
+  padding: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+`;
+const StickyTDWithGapCoverage = (0, styled_components.default)(require_Table.StickyTD)`
+  ${({ $gapCoverage, theme }) => $gapCoverage && styled_components.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_components.default.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] = (0, react.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] = (0, react.useState)([]);
+	const [rowSelection, setRowSelection] = (0, react.useState)({});
+	const lastSelectedRowIdRef = (0, react.useRef)(null);
+	const isSearchControlled = controlledSearchTerm != null;
+	const [internalSearchTerm, setInternalSearchTerm] = (0, react.useState)(typeof clientSearch === "object" ? clientSearch.initialValue || "" : "");
+	const globalFilter = isSearchControlled ? controlledSearchTerm : internalSearchTerm;
+	const setGlobalFilter = (0, react.useCallback)((value) => {
+		if (isSearchControlled) onSearchTermChange?.(value);
+		else setInternalSearchTerm(value);
+	}, [isSearchControlled, onSearchTermChange]);
+	const isColumnFiltersControlled = controlledColumnFilters != null;
+	const [internalColumnFilters, setInternalColumnFilters] = (0, react.useState)([]);
+	const columnFilters = isColumnFiltersControlled ? controlledColumnFilters : internalColumnFilters;
+	const setColumnFilters = (0, react.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] = (0, react.useState)(/* @__PURE__ */ new Set());
+	const expandedRows = isExpansionControlled ? controlledExpandedRowIds : internalExpandedRows;
+	const setExpandedRows = (0, react.useCallback)((updater) => {
+		if (isExpansionControlled) {
+			const newValue = updater(expandedRows);
+			onExpandedRowsChange?.(newValue);
+		} else setInternalExpandedRows(updater);
+	}, [
+		expandedRows,
+		isExpansionControlled,
+		onExpandedRowsChange
+	]);
+	const [checkboxColumnStates, setCheckboxColumnStates] = (0, react.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 = (0, react.useCallback)((rowData) => {
+		if (isRowWithSubrows(rowData)) return rowData.subrows.length > 0;
+		if (isRowWithDetails(rowData)) return Boolean(rowData._details);
+		return detailComponent != null;
+	}, [detailComponent]);
+	const initialColumnPinning = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.useMemo)(() => {
+		const options = {};
+		if (isClientPagination(pagination)) {
+			options.getPaginationRowModel = (0, _tanstack_react_table.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 = (0, _tanstack_react_table.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 = (0, _tanstack_react_table.getFilteredRowModel)();
+				options.globalFilterFn = "includesString";
+			}
+			options.onGlobalFilterChange = setGlobalFilter;
+		}
+		if (clientFiltering) {
+			options.getFilteredRowModel = (0, _tanstack_react_table.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 = (0, react.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: (0, react.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 = (0, react.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) => (0, _tanstack_react_table.memo)(() => [
+			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);
+		}, (0, _tanstack_react_table.getMemoOptions)(table.options, "debugTable", "getExpandedRowModel"));
+	}
+	const table = (0, _tanstack_react_table.useReactTable)({
+		data,
+		columns: tableColumns,
+		getSubRows: (row) => isRowWithSubrows(row) ? row.subrows : [],
+		getCoreRowModel: (0, _tanstack_react_table.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);
+	(0, react.useEffect)(() => {
+		onDisplayedRowIdsChange?.(displayedRowIdsKey ? displayedRowIdsKey.split(DISPLAYED_ROW_IDS_SEPARATOR) : []);
+	}, [displayedRowIdsKey, onDisplayedRowIdsChange]);
+	(0, react.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 = (0, react.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;
+	(0, react.useEffect)(() => {
+		onRowSelectionChange?.(selectedRows.map((row) => row.original));
+	}, [selectedRows, onRowSelectionChange]);
+	const actions = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(DataTableContainer, {
+		$stickyHeader: stickyHeader,
+		children: [
+			showControls && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableControls, {
+				compact,
+				title,
+				propertiesButton: showColumnProperties && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableControls.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__ */ (0, react_jsx_runtime.jsxs)(TableContainer, {
+				$stickyHeader: stickyHeader,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableLayout, {
+					$onAddRow: !!onAddRow,
+					stickyHeader,
+					headerTR: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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__ */ (0, react.createElement)(require_Table.StickyTH, {
+							...thProps,
+							key: header.id,
+							left: pinningStyles.left ? parseInt(pinningStyles.left) : 0,
+							hasRightBorder: pinningStyles.hasRightBorder
+						}, (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()));
+						return /* @__PURE__ */ (0, react.createElement)(require_Table.TableTH, {
+							...thProps,
+							key: header.id
+						}, header.column.columnDef.meta?.headerTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextUnderlineTooltip, {
+							side: "top",
+							tooltip: header.column.columnDef.meta.headerTooltip,
+							zIndex: require_lib_zindex.Z_INDICES.topNavTooltip,
+							children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+						}) : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()));
+					}) }),
+					nullState: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "No results found." }),
+					isLoading,
+					size: compact ? "sm" : void 0,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableBody, { children: columns.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
+						disableHoverBackground: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEmptyState, {
+							colSpan: 1,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+								size: "lg",
+								weight: "bold",
+								color: "primary",
+								children: "No columns configured"
+							})
+						})
+					}) : rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
+						disableHoverBackground: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableEmptyState, {
+							colSpan: tableHeaderGroup.headers.length,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+								size: "lg",
+								weight: "bold",
+								color: "primary",
+								children: emptyState?.title || (hasActiveFilters ? "No results found. Try changing your filters." : "No results found.")
+							}), emptyState?.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.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__ */ (0, react_jsx_runtime.jsx)(StyledTableActionTD, {
+								style: { textAlign: cell.column.columnDef.meta?.align },
+								$nestSpacing: row.depth * dynamicNestSpacing,
+								children: (0, _tanstack_react_table.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__ */ (0, react_jsx_runtime.jsx)(StickyTDWithGapCoverage, {
+									left: (pinningStyles.left ? parseInt(pinningStyles.left) : 0) + leftBumpFromNesting,
+									style: {
+										minWidth,
+										textAlign: cell.column.columnDef.meta?.align
+									},
+									hasRightBorder: pinningStyles.hasRightBorder,
+									$gapCoverage: leftBumpFromNesting,
+									children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+								}, cell.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.StickyTD, {
+									left: (pinningStyles.left ? parseInt(pinningStyles.left) : 0) + leftBumpFromNesting,
+									style: {
+										minWidth,
+										textAlign: cell.column.columnDef.meta?.align
+									},
+									hasRightBorder: pinningStyles.hasRightBorder,
+									children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+								}, cell.id);
+								if (!leftMostNonSpecialColumnFound && !isFeatureCol(cell.column.id)) leftMostNonSpecialColumnFound = true;
+								return stickyTableCell;
+							}
+							const tableCell = /* @__PURE__ */ (0, react_jsx_runtime.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: (0, _tanstack_react_table.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 ?? react_router_dom.Link;
+						const elements = [getLinkToRow || rowLinkPrefix ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
+							...rowProps,
+							as: RowLinkComponent,
+							to: getLinkToRow ? getLinkToRow(row.original) : `${rowLinkPrefix}/${rowId}`,
+							children: rowElements
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.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__ */ (0, react_jsx_runtime.jsx)(detailComponent, { rowData });
+							if (detailContent) {
+								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.StickyTD, {
+									colSpan: 1,
+									left: pinnedColumnLeftOffset
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StickyDetailsTD, {
+									colSpan: tableHeaderGroup.headers.length - 1,
+									left: EXPAND_COLUMN_WIDTH + pinnedColumnLeftOffset,
+									children: detailContent
+								})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTD, { colSpan: 1 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailsTD, {
+									colSpan: tableHeaderGroup.headers.length - 1,
+									children: detailContent
+								})] });
+								elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableTR, {
+									disableHoverBackground: true,
+									children: detailCells
+								}, `${row.id}-details`));
+							}
+						}
+						if (onAddRow && (!canAddAfterRow || canAddAfterRow?.(rowData, row.getIsExpanded() && isRowWithSubrows(rowData)))) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(FloatingActionBarContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingActionBar, {
+					selectedCount: selectedRows.length,
+					onClearSelection: () => table.setRowSelection({}),
+					actions,
+					extraContent: floatingBarContent
+				}) })]
+			}),
+			pagination && data.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pagination.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
+exports.DataTable = DataTable;
+exports.DataTableContainer = DataTableContainer;
+exports.DataTableControls = DataTableControls;
+exports.FloatingActionBar = FloatingActionBar;
+exports.FloatingActionBarContainer = FloatingActionBarContainer;
+exports.Inserter = Inserter;
+exports.default = DataTable;
+exports.getColumnWidths = getColumnWidths;
+exports.renderAsCheckbox = renderAsCheckbox;
+exports.renderAsCheckboxHeader = renderAsCheckboxHeader;
+exports.renderAsCopyableString = renderAsCopyableString;
+exports.renderAsDate = renderAsDate;
+exports.renderAsDatetime = renderAsDatetime;
+exports.renderAsLightweightImage = renderAsLightweightImage;
+exports.renderAsNumber = renderAsNumber;
+exports.renderAsPDSFormat = renderAsPDSFormat;
+exports.renderAsPii = renderAsPii;
+exports.renderAsSticker = renderAsSticker;
+exports.renderAsString = renderAsString;
+exports.renderAsURL = renderAsURL;
+exports.useTableColumns = useTableColumns;
+
+//# sourceMappingURL=index.cjs.map