@persona/design-system 0.9.1 → 0.10.0

package/dist/components/DataTable/index.mjs

@@ -1,1474 +1,2 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { isFocused } from "../../lib/pseudoClass.mjs";
-import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
-import { focusOutline } from "../../mixins/focus.mjs";
-import "../../variables/effect.mjs";
-import "../../variables/transitions.mjs";
-import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
-import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, r as formatDate, u as DEFAULT_COMMON_STRINGS } from "../../i18n-CeRarJIa.mjs";
-import { n as RouterLink } from "../../router-COrZcVkf.mjs";
-import { i as Paragraph, o as TabularNumber } from "../../Text-CSwFifQF.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-DogEteGl.mjs";
-import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as HStack } from "../../Stack-BkC7FCdF.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-D4awF770.mjs";
-import { n as Sticker } from "../../Sticker-CUqHa9Mo.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-CPE8Q56k.mjs";
-import { t as Checkbox } from "../../Checkbox-Cttn1t8T.mjs";
-import { t as Pagination_default } from "../../Pagination-Du2CPW2l.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-PbYGf3PG.mjs";
-import { t as HoverCopyableField } from "../../HoverCopyableField-Cgu3W31s.mjs";
-import { t as Link } from "../../Link-DGZu4J0x.mjs";
-import { t as Pii_default } from "../../Pii-CFVWZ_Yx.mjs";
-import { F as TableViewConfigurationDropdown, I as TableControls } from "../../TableControls-C1MF2JvY.mjs";
-import "./types.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/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' },
-* ];
-*/
-/** 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, 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 getCommonPinningStyles = useCallback((column) => {
-		const isPinned = column.getIsPinned();
-		const isLastPinned = isPinned === "left" && column.getIsLastColumn("left");
-		return {
-			left: isPinned === "left" ? `${column.getStart("left") + pinnedColumnLeftOffset}px` : void 0,
-			position: isPinned ? "sticky" : "relative",
-			hasRightBorder: isLastPinned
-		};
-	}, [pinnedColumnLeftOffset]);
-	/**
-	* Check if the column is a table feature column.
-	* Feature columns are special columns set by the table to
-	* allow a user to perform an action.
-	*/
-	const isFeatureCol = (columnId) => {
-		return [
-			"select-col",
-			"expand-col",
-			"action-col"
-		].includes(columnId);
-	};
-	const selectedRows = table.getFilteredSelectedRowModel().flatRows;
-	useEffect(() => {
-		onRowSelectionChange?.(selectedRows.map((row) => row.original));
-	}, [selectedRows, onRowSelectionChange]);
-	const actions = useMemo(() => {
-		return (getAvailableBulkActions ? getAvailableBulkActions(selectedRows.map((row) => row.original)) : bulkActions || controls?.bulkActions)?.map((action) => {
-			const clearSelection = () => table.setRowSelection({});
-			const baseAction = {
-				...action,
-				onClick: async () => {
-					await action.onClick(selectedRows.map((row) => row.id), clearSelection);
-				}
-			};
-			if ("popover" in action && action.popover) {
-				const popoverConfig = action.popover;
-				return {
-					...baseAction,
-					popover: {
-						options: popoverConfig.options,
-						onOptionSelect: async (option) => {
-							await popoverConfig.onOptionSelect(option, selectedRows.map((row) => row.id));
-							table.setRowSelection({});
-						}
-					}
-				};
-			}
-			return baseAction;
-		});
-	}, [
-		bulkActions,
-		getAvailableBulkActions,
-		selectedRows,
-		table,
-		controls?.bulkActions
-	]);
-	const shouldShowFloatingActionBar = compact && actions && actions.length > 0 && selectedRows.length > 0;
-	const hasGlobalFilter = clientSearch && globalFilter && globalFilter.trim().length > 0;
-	const hasFilters = columnFilters.length > 0;
-	const hasActiveFilters = hasGlobalFilter || hasFilters || hasExternalActiveFilters;
-	return /* @__PURE__ */ jsxs(DataTableContainer, {
-		$stickyHeader: stickyHeader,
-		children: [
-			showControls && /* @__PURE__ */ jsx(DataTableControls, {
-				compact,
-				title,
-				propertiesButton: showColumnProperties && /* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
-					disabled: false,
-					columnConfiguration: table.getVisibleFlatColumns().filter((column) => !isFeatureCol(column.columnDef.id ?? "")).map((column) => ({
-						key: column.id,
-						label: column.columnDef.header?.toString() || column.id
-					})).sort((a, b) => {
-						return (orderMap[a.key] || 0) - (orderMap[b.key] || 0);
-					}),
-					attributeOptions: columnOptions,
-					updateColumnConfiguration: (newConfiguration) => {
-						table.getAllColumns().map((column) => {
-							column.toggleVisibility(!!newConfiguration.find((c) => c.key === column.id));
-						});
-						setColumnOrder(newConfiguration.map((c) => c.key));
-						if (onUpdateColumnProperties) onUpdateColumnProperties(newConfiguration);
-					},
-					size: compact ? "sm" : void 0,
-					variant: compact ? "text" : "basic"
-				}),
-				selectedRows: table.getFilteredSelectedRowModel().flatRows.map((row) => row.id),
-				onClearSelection: () => table.setRowSelection({}),
-				searchProps: generatedSearchProps,
-				...controls,
-				bulkActions: actions
-			}),
-			/* @__PURE__ */ jsxs(TableContainer, {
-				$stickyHeader: stickyHeader,
-				children: [/* @__PURE__ */ jsx(StyledTableLayout, {
-					$onAddRow: !!onAddRow,
-					stickyHeader,
-					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 { DataTable, DataTable as default, DataTableContainer, DataTableControls, FloatingActionBar, FloatingActionBarContainer, Inserter, getColumnWidths, renderAsCheckbox, renderAsCheckboxHeader, renderAsCopyableString, renderAsDate, renderAsDatetime, renderAsLightweightImage, renderAsNumber, renderAsPDSFormat, renderAsPii, renderAsSticker, renderAsString, renderAsURL, useTableColumns };
-
-//# sourceMappingURL=index.mjs.map
+import { S as getFilterFnName, _ as renderAsString, a as useTableColumns, b as getColumnWidths, c as renderAsCheckboxHeader, d as renderAsDatetime, f as renderAsLightweightImage, g as renderAsSticker, h as renderAsPii, i as FloatingActionBarContainer, l as renderAsCopyableString, m as renderAsPDSFormat, n as DataTableContainer, o as Inserter, p as renderAsNumber, r as DataTableControls, s as renderAsCheckbox, t as DataTable, u as renderAsDate, v as renderAsURL, x as generateClientFilters, y as FloatingActionBar } from "../../DataTable-95ZxiPlV.mjs";
+export { DataTable, DataTable as default, DataTableContainer, DataTableControls, FloatingActionBar, FloatingActionBarContainer, Inserter, generateClientFilters, getColumnWidths, getFilterFnName, renderAsCheckbox, renderAsCheckboxHeader, renderAsCopyableString, renderAsDate, renderAsDatetime, renderAsLightweightImage, renderAsNumber, renderAsPDSFormat, renderAsPii, renderAsSticker, renderAsString, renderAsURL, useTableColumns };