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

package/dist/TableBox-D_B9atn2.cjs

@@ -0,0 +1,1202 @@
+const require_chunk = require("./chunk-CKQMccvm.cjs");
+const require_mixins_focus = require("./mixins/focus.cjs");
+require("./variables/effect.cjs");
+require("./variables/transitions.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+const require_lib_reorderItems = require("./lib/reorderItems.cjs");
+const require_lib_useScrollOverflow = require("./lib/useScrollOverflow.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_useFormGroup = require("./useFormGroup-DQJdKaL9.cjs");
+const require_Menu = require("./Menu-BLbEcodU.cjs");
+const require_DropdownMenu = require("./DropdownMenu-CeqZAxjs.cjs");
+const require_Combobox = require("./Combobox-R3_NDBi3.cjs");
+const require_Table = require("./Table-B3FJsvXP.cjs");
+const require_Popover = require("./Popover-jHZICnQt.cjs");
+const require_FormControl = require("./FormControl-DjxkL5Ft.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 lodash_fp_uniqueId_js = require("lodash/fp/uniqueId.js");
+lodash_fp_uniqueId_js = require_chunk.__toESM(lodash_fp_uniqueId_js);
+let _dnd_kit_core = require("@dnd-kit/core");
+let _dnd_kit_sortable = require("@dnd-kit/sortable");
+//#region components/TableBox/tableBoxKeyboardNavigation.ts
+const INLINE_EDITOR_SELECTOR = "[data-tablebox-inline-edit-trigger], input[role=\"combobox\"]";
+const findInlineEditor = (cell) => cell?.querySelector(INLINE_EDITOR_SELECTOR) ?? null;
+const isCaretAtNavigationBoundary = (input, direction) => {
+	const { selectionStart, selectionEnd, value } = input;
+	if (selectionStart == null || selectionEnd == null || selectionStart !== selectionEnd) return false;
+	return direction === "left" ? selectionStart === 0 : selectionEnd === value.length;
+};
+const focusAdjacentInlineEditor = (target, direction) => {
+	const currentCell = target.closest("td");
+	const currentRow = currentCell?.closest("tr");
+	if (!(currentCell instanceof HTMLTableCellElement) || currentRow == null) return false;
+	if (direction === "up" || direction === "down") {
+		const adjacentRow = direction === "up" ? currentRow.previousElementSibling : currentRow.nextElementSibling;
+		if (!(adjacentRow instanceof HTMLTableRowElement)) return false;
+		const adjacentEditor = findInlineEditor(adjacentRow.cells.item(currentCell.cellIndex));
+		adjacentEditor?.focus();
+		return adjacentEditor != null;
+	}
+	let adjacentCell = direction === "left" ? currentCell.previousElementSibling : currentCell.nextElementSibling;
+	while (adjacentCell instanceof HTMLTableCellElement) {
+		const adjacentEditor = findInlineEditor(adjacentCell);
+		if (adjacentEditor != null) {
+			adjacentEditor.focus();
+			return true;
+		}
+		adjacentCell = direction === "left" ? adjacentCell.previousElementSibling : adjacentCell.nextElementSibling;
+	}
+	return false;
+};
+//#endregion
+//#region components/TableBox/InlineCombobox.tsx
+const StyledCombobox = (0, styled_components.default)(require_Combobox.Combobox)`
+  border: none;
+  background-color: transparent;
+
+  /* Suppress the focus outline — it extends outside the input and is clipped
+     by the scroll container. Use && for specificity. */
+  && input,
+  && input:focus-visible:not(:disabled) {
+    outline: none;
+  }
+
+  ${({ $hideText }) => $hideText && `
+    input {
+      color: transparent;
+      caret-color: transparent;
+    }
+    input::placeholder {
+      color: transparent;
+    }
+  `}
+`;
+const ChildrenOverlay = styled_components.default.div`
+  position: absolute;
+  left: ${_persona_design_tokens.Spacing[2]};
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  pointer-events: none;
+
+  // ${_persona_design_tokens.Spacing[5]} matches the sm ComboboxInput padding-right, keeping the text clear of the caret.
+  ${({ $truncate }) => $truncate && `
+    right: ${_persona_design_tokens.Spacing[5]};
+  `}
+`;
+const ComboboxWrapper = styled_components.default.div`
+  position: relative;
+  width: 100%;
+`;
+const InlineCombobox = ({ itemId, value, columnKey, inlineEditConfig, children, rowRef }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const context = (0, react.useContext)(TableBoxContext);
+	const onEditingChange = context?.onEditingChange;
+	const currentColumn = context?.columns?.find((c) => c.key === columnKey);
+	const placeholder = inlineEditConfig?.placeholder || currentColumn?.title || "";
+	const portalContainerRef = (inlineEditConfig?.fullWidthComboboxDropdown || false) && rowRef ? rowRef : void 0;
+	const showOverlay = !isOpen && !!children;
+	const handleOpenChange = (0, react.useCallback)((open) => {
+		setIsOpen(open);
+		onEditingChange?.(open);
+	}, [onEditingChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComboboxWrapper, {
+		onKeyDownCapture: (event) => {
+			if (isOpen || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			const direction = event.key === "ArrowLeft" ? "left" : "right";
+			if (!(event.target instanceof HTMLInputElement) || !isCaretAtNavigationBoundary(event.target, direction)) return;
+			if (focusAdjacentInlineEditor(event.currentTarget, direction)) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
+		children: [showOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildrenOverlay, {
+			$truncate: inlineEditConfig?.truncateDisplay,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCombobox, {
+			$hideText: showOverlay,
+			value,
+			options: inlineEditConfig?.options || [],
+			onChange: (newValue) => {
+				if (inlineEditConfig?.onChange && newValue !== value && typeof newValue === "string") inlineEditConfig.onChange(itemId, newValue);
+			},
+			onOpenChange: handleOpenChange,
+			placeholder,
+			size: "sm",
+			portal: inlineEditConfig?.useComboboxPortal || false,
+			portalContainerRef
+		})]
+	});
+};
+//#endregion
+//#region components/TableBox/TableBoxRowContext.ts
+const TableBoxRowContext = (0, react.createContext)(null);
+//#endregion
+//#region components/TableBox/InlineInput.tsx
+const sharedInputStyles = styled_components.css`
+  font: inherit;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  pointer-events: auto;
+  width: 100%;
+  background: transparent;
+  line-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
+`;
+const InlineEditInput = styled_components.default.input`
+  ${sharedInputStyles}
+`;
+const InlineEditTextarea = styled_components.default.textarea`
+  ${sharedInputStyles}
+  resize: none;
+  overflow-y: auto;
+  min-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
+  scrollbar-width: none;
+`;
+const InlineEditDisplay = styled_components.default.div`
+  cursor: text;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  min-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
+  line-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
+
+  ${({ $multiline }) => $multiline ? styled_components.css`
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: pre-wrap;
+          word-break: break-word;
+        ` : styled_components.css`
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        `}
+`;
+const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) => {
+	const { columns, newRowId, onEditingChange, scheduleCreateNewRowAfterCommit } = (0, react.useContext)(TableBoxContext) ?? {};
+	const rowContext = (0, react.useContext)(TableBoxRowContext);
+	const [isInlineEditing, setIsInlineEditing] = (0, react.useState)(itemId === newRowId && columnKey === columns?.[0]?.key);
+	const [editValue, setEditValue] = (0, react.useState)(value);
+	const inputRef = (0, react.useRef)(null);
+	const textareaRef = (0, react.useRef)(null);
+	const cancelledRef = (0, react.useRef)(false);
+	const isMultiline = inlineEditConfig?.multiline === true;
+	(0, react.useEffect)(() => {
+		return () => {
+			cancelledRef.current = false;
+		};
+	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (isInlineEditing && isMultiline && textareaRef.current) {
+			const textarea = textareaRef.current;
+			textarea.style.height = "auto";
+			textarea.style.height = `${textarea.scrollHeight}px`;
+		}
+	}, [
+		isInlineEditing,
+		editValue,
+		isMultiline
+	]);
+	(0, react.useEffect)(() => {
+		if (isInlineEditing && isMultiline && textareaRef.current) {
+			const length = textareaRef.current.value.length;
+			textareaRef.current.setSelectionRange(length, length);
+		}
+	}, [isInlineEditing, isMultiline]);
+	const placeholder = (0, react.useMemo)(() => {
+		const column = columns?.find((c) => c.key === columnKey);
+		return column?.inlineEditConfig?.placeholder || column?.title || "";
+	}, [columns, columnKey]);
+	const handleInlineEditKeyDown = (e) => {
+		const isFirstCell = columnKey === columns?.[0]?.key;
+		if ((e.key === "Delete" || e.key === "Backspace") && isFirstCell && editValue === "" && rowContext?.isBlank && rowContext.onDelete) {
+			e.preventDefault();
+			e.stopPropagation();
+			cancelledRef.current = true;
+			onEditingChange?.(false);
+			if (!(focusAdjacentInlineEditor(e.currentTarget, "down") || focusAdjacentInlineEditor(e.currentTarget, "up"))) e.currentTarget.closest("table")?.focus();
+			rowContext.onDelete();
+		} else if (!isMultiline && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+			const direction = e.key === "ArrowUp" ? "up" : e.key === "ArrowDown" ? "down" : e.key === "ArrowLeft" ? "left" : "right";
+			if ((direction === "up" || direction === "down" || e.currentTarget instanceof HTMLInputElement && isCaretAtNavigationBoundary(e.currentTarget, direction)) && focusAdjacentInlineEditor(e.currentTarget, direction)) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		} else if (e.key === "Enter") if (isMultiline) {
+			if (e.ctrlKey || e.metaKey) {
+				e.preventDefault();
+				e.stopPropagation();
+				handleInlineEditConfirm();
+				setIsInlineEditing(false);
+			}
+		} else {
+			e.preventDefault();
+			e.stopPropagation();
+			handleInlineEditConfirm();
+			setIsInlineEditing(false);
+			const isLastCell = columnKey === columns?.at(-1)?.key;
+			const currentRow = e.currentTarget.closest("tr");
+			const isLastRow = currentRow != null && currentRow.nextElementSibling == null;
+			if (isLastCell && isLastRow) scheduleCreateNewRowAfterCommit?.();
+		}
+		else if (e.key === "Tab") handleInlineEditConfirm();
+		else if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			handleInlineEditCancel();
+		}
+	};
+	const handleInlineEditConfirm = () => {
+		if (inlineEditConfig?.onChange && editValue !== value) inlineEditConfig.onChange(itemId, editValue);
+	};
+	const handleInlineEditCancel = () => {
+		cancelledRef.current = true;
+		setEditValue(value);
+		setIsInlineEditing(false);
+		onEditingChange?.(false);
+	};
+	const handleInlineEditBlur = () => {
+		if (!cancelledRef.current) handleInlineEditConfirm();
+		cancelledRef.current = false;
+		setIsInlineEditing(false);
+		onEditingChange?.(false);
+	};
+	return isInlineEditing ? isMultiline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineEditTextarea, {
+		ref: textareaRef,
+		value: editValue,
+		onChange: (e) => setEditValue(e.target.value),
+		onBlur: handleInlineEditBlur,
+		onKeyDown: handleInlineEditKeyDown,
+		placeholder,
+		autoFocus: true,
+		rows: 1
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineEditInput, {
+		ref: inputRef,
+		value: editValue,
+		onChange: (e) => setEditValue(e.target.value),
+		onBlur: handleInlineEditBlur,
+		onKeyDown: handleInlineEditKeyDown,
+		placeholder,
+		autoFocus: true
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineEditDisplay, {
+		tabIndex: 0,
+		"data-tablebox-inline-edit-trigger": true,
+		$multiline: isMultiline,
+		onFocus: () => {
+			setEditValue(value);
+			onEditingChange?.(true);
+			setIsInlineEditing(true);
+		},
+		children: children || value
+	});
+};
+//#endregion
+//#region components/TableBox/TableBoxRowActions.tsx
+const IconButtonWidth = 16;
+const BackgroundFadeWidth = 12;
+const RowActionsContainerWithFadeWidth = BackgroundFadeWidth + (parseInt(_persona_design_tokens.Spacing[1]) + IconButtonWidth + parseInt(_persona_design_tokens.Spacing[2]));
+/**
+* Container for row-level actions (`actions` menu and/or delete `X`). Used
+* in two layouts:
+*
+* - **Dedicated trailing column** (`$inDedicatedColumn=true`, the default
+*   for horizontal-scroll mode): laid out in normal flow inside
+*   `PinnedActionsCell`.
+* - **Overlaid in last data cell** (`$inDedicatedColumn=false`,
+*   `disableHorizontalScroll` mode): absolutely positioned on top of the
+*   last cell's content with a fade gradient so it overlaps text on hover.
+*
+* Other variant props:
+* - `$hasCombobox` — last data column is an inline combobox; we use auto
+*   width so the caret↔first-action gap matches the action↔delete gap, and
+*   we drop the gradient so there's no fade running over the caret.
+* - `$hasDelete` — fade the container in only on hover, mirroring the
+*   legacy "show delete on hover" behavior.
+*/
+const RowActionsContainer = styled_components.default.div`
+  width: ${({ $hasCombobox }) => $hasCombobox ? "auto" : `${RowActionsContainerWithFadeWidth}px`};
+  position: ${({ $hasCombobox, $inDedicatedColumn }) => $hasCombobox || $inDedicatedColumn ? "static" : "absolute"};
+  right: ${_persona_design_tokens.Spacing[2]};
+  top: 0;
+  height: 100%;
+  display: flex;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  align-items: center;
+  justify-content: end;
+  transition: opacity ${"200ms"} ease-out;
+  background: linear-gradient(
+    to right,
+    transparent,
+    ${_persona_design_tokens.Color.BackgroundPrimary} ${BackgroundFadeWidth}px
+  );
+
+  /* Combobox cells render actions inline next to the caret. The padding-left
+     keeps the caret↔first-action gap visually balanced with the gap between
+     the actions themselves. */
+  ${({ $hasCombobox }) => $hasCombobox && styled_components.css`
+      background: none;
+      padding-right: ${_persona_design_tokens.Spacing[2]};
+      padding-left: ${_persona_design_tokens.Spacing[1]};
+    `}
+
+  /* PinnedActionsCell is transparent (so scrolling content can pass under it);
+     owning the right gutter here keeps the container's opaque gradient flush
+     to the cell's right edge. */
+  ${({ $inDedicatedColumn, $hasCombobox }) => $inDedicatedColumn && !$hasCombobox && styled_components.css`
+      padding-right: ${_persona_design_tokens.Spacing[2]};
+    `}
+
+  /* Hide on hover only when delete is present (matches legacy behavior). */
+  ${({ $hasDelete }) => $hasDelete && styled_components.css`
+      opacity: 0;
+    `}
+
+  /* Make room for both buttons; combobox cells use auto width so they can sit
+     inline next to the caret. */
+  ${({ $hasActions, $hasDelete, $hasCombobox }) => $hasActions && $hasDelete && !$hasCombobox && styled_components.css`
+      width: ${RowActionsContainerWithFadeWidth + parseInt(_persona_design_tokens.Spacing[1]) + IconButtonWidth}px;
+    `}
+`;
+/**
+* Renders the actions menu and/or delete icon button inside a
+* `RowActionsContainer`. Used both as an absolute overlay inside the
+* last data cell (fixed-layout mode) and as static content inside the
+* dedicated sticky trailing column (horizontal scroll mode).
+*/
+const RowActions = ({ actions, onDelete, inDedicatedColumn, inCombobox }) => {
+	const hasActions = !!actions?.length;
+	if (!hasActions && !onDelete) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RowActionsContainer, {
+		$hasActions: hasActions,
+		$hasDelete: !!onDelete,
+		$hasCombobox: inCombobox,
+		$inDedicatedColumn: inDedicatedColumn,
+		onClick: (e) => e.stopPropagation(),
+		children: [hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+			portal: true,
+			trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				"aria-label": "Actions",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.MoreIcon, {})
+			}),
+			children: actions?.map(({ label, onClick, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+				...rest,
+				onClick,
+				size: "sm",
+				children: label
+			}, label))
+		}), onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			"aria-label": "Delete",
+			onClick: onDelete,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.XIcon, {})
+		})]
+	});
+};
+//#endregion
+//#region components/TableBox/TableBoxCell.tsx
+const CELL_VERTICAL_PADDING = _persona_design_tokens.Spacing[1];
+const CELL_HEIGHT = `calc(${_persona_design_tokens.Typography.TextSmall.lineHeight} + (${CELL_VERTICAL_PADDING} * 2))`;
+const StyledCell = (0, styled_components.default)(require_Table.TableCell)`
+  ${require_mixins_text.paragraphMixins.sm};
+  // height acts as min-height for table cells
+  height: ${CELL_HEIGHT};
+  padding: ${({ $noPadding }) => $noPadding ? _persona_design_tokens.Spacing[0] : `${CELL_VERTICAL_PADDING} ${_persona_design_tokens.Spacing[2]}`};
+  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
+  position: relative;
+`;
+const StyledCellContent = styled_components.default.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+  min-width: 0;
+`;
+const TableBoxCell = ({ children, itemId = "", value = "", columnKey, isLastCell = false, actions, onDelete, inlineEditConfigOverride, ...props }) => {
+	const context = (0, react.useContext)(TableBoxContext);
+	const rowContext = (0, react.useContext)(TableBoxRowContext);
+	if (context == null) throw new Error("TableBox context is not set");
+	const columnConfig = context.columns.find((c) => c.key === columnKey)?.inlineEditConfig;
+	let inlineEditConfig = context.disabled || columnConfig == null ? void 0 : inlineEditConfigOverride ? {
+		...columnConfig,
+		...inlineEditConfigOverride
+	} : columnConfig;
+	if (inlineEditConfig?.type === "combobox" && (context.hasHorizontalOverflow || inlineEditConfig?.fullWidthComboboxDropdown)) inlineEditConfig = {
+		...inlineEditConfig,
+		useComboboxPortal: true
+	};
+	const handleDelete = () => {
+		if (onDelete && itemId) onDelete(itemId);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCell, {
+		...props,
+		$noPadding: inlineEditConfig?.type === "combobox",
+		tabIndex: -1,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+			align: "center",
+			spacing: _persona_design_tokens.Spacing[0],
+			children: [inlineEditConfig ? inlineEditConfig.type === "combobox" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineCombobox, {
+				itemId,
+				value,
+				columnKey,
+				inlineEditConfig,
+				rowRef: rowContext?.rowRef,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineInput, {
+				itemId,
+				value,
+				columnKey,
+				inlineEditConfig,
+				children
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children }), isLastCell && !context.disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActions, {
+				actions,
+				onDelete: onDelete ? handleDelete : void 0,
+				inCombobox: inlineEditConfig?.type === "combobox"
+			})]
+		})
+	});
+};
+//#endregion
+//#region components/TableBox/TableBoxRow.tsx
+const StyledRow = (0, styled_components.default)(require_Table.TableRow)`
+  cursor: ${({ $isSelectable }) => $isSelectable ? "pointer" : "default"};
+  position: relative;
+  /* Give every row a solid background so sticky first-column cells (which
+     inherit the row's background) remain opaque during horizontal scroll. */
+  background-color: ${_persona_design_tokens.Color.BackgroundPrimary};
+
+  /* Dim the dragged row in place. A floating clone rendered by @dnd-kit's
+     DragOverlay provides the fully-opaque representation that follows the
+     pointer. */
+  ${({ $isDragging }) => $isDragging && styled_components.css`
+      opacity: 0.5;
+    `}
+
+  /* 2px brand-colored drop indicator applied to each cell via inset
+     box-shadow so the line spans the full row width without affecting
+     layout. box-shadow on <td> renders reliably across modern browsers,
+     unlike pseudo-elements on <tr>. */
+  ${({ $dropIndicatorPosition, theme }) => $dropIndicatorPosition === "top" && styled_components.css`
+      td {
+        box-shadow: inset 0 2px 0 ${theme.color.text.brand};
+      }
+    `}
+
+  ${({ $dropIndicatorPosition, theme }) => $dropIndicatorPosition === "bottom" && styled_components.css`
+      td {
+        box-shadow: inset 0 -2px 0 ${theme.color.text.brand};
+      }
+    `}
+
+  ${require_Combobox.CaretButton} {
+    opacity: 0;
+    transition: opacity ${"200ms"} ease-out;
+
+    /* Allow button to shrink to caret SVG height and width, and adjust alignment to remain vertically centered */
+    width: auto;
+    height: auto;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:last-child {
+    td {
+      border-bottom: none;
+      &:first-child {
+        border-bottom-left-radius: ${_persona_design_tokens.BorderRadius.Md};
+      }
+      &:last-child {
+        border-bottom-right-radius: ${_persona_design_tokens.BorderRadius.Md};
+      }
+    }
+  }
+
+  &[aria-selected='true'] {
+    background: ${({ theme }) => theme.color.background.highlight};
+    color: ${({ theme }) => theme.color.text.brand};
+  }
+
+  &:hover:not([aria-selected='true']) {
+    cursor: ${({ $isSelectable }) => $isSelectable ? "pointer" : "default"};
+    color: ${({ theme }) => theme.color.text.primary};
+    background: ${_persona_design_tokens.Color.BackgroundSecondary};
+
+    ${RowActionsContainer} {
+      opacity: 1;
+      background: linear-gradient(to right, transparent, ${_persona_design_tokens.Color.BackgroundSecondary} 12px);
+    }
+
+    ${require_Combobox.CaretButton} {
+      opacity: 1;
+    }
+  }
+
+  &:has(input:focus),
+  &:has(textarea:focus),
+  &:has(input[role='combobox'][aria-expanded='true']),
+  &:has(input:focus):hover,
+  &:has(textarea:focus):hover,
+  &:has(input[role='combobox'][aria-expanded='true']):hover,
+  &:has(button:focus),
+  &:has(button:focus):hover {
+    color: ${({ theme }) => theme.color.text.brand};
+    background-color: ${({ theme }) => theme.color.background.highlight};
+
+    ${RowActionsContainer} {
+      opacity: 1;
+      background: linear-gradient(
+        to right,
+        transparent,
+        ${({ theme }) => theme.color.background.highlight} ${parseInt(_persona_design_tokens.Spacing[3])}px
+      );
+    }
+
+    ${require_Combobox.CaretButton} {
+      opacity: 1;
+    }
+  }
+`;
+const DragHandleCell = (0, styled_components.default)(require_Table.TableCell)`
+  width: 24px;
+  padding: ${_persona_design_tokens.Spacing[0]} ${_persona_design_tokens.Spacing[1]};
+  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
+  vertical-align: middle;
+  text-align: center;
+`;
+const DragHandleButton = styled_components.default.button.attrs({ type: "button" })`
+  background: none;
+  border: none;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  touch-action: none;
+  color: ${_persona_design_tokens.Color.TextSecondary};
+  ${require_mixins_focus.focusOutline}
+
+  &:hover {
+    color: ${_persona_design_tokens.Color.TextPrimary};
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+const DropdownPopoverHeading = styled_components.default.div`
+  ${_persona_design_tokens.Typography.TextSmallBold};
+  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
+  padding: ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[1]};
+`;
+const DropdownPopoverContent = (0, styled_components.default)(require_Stack.Stack)`
+  min-width: var(--radix-popover-trigger-width);
+  padding: ${_persona_design_tokens.Spacing[3]};
+
+  ${require_FormControl.Container} {
+    min-width: 0;
+  }
+`;
+const DropdownPopoverFooter = styled_components.default.div`
+  border-top: 1px solid ${_persona_design_tokens.Color.BorderHairline};
+  padding: ${_persona_design_tokens.Spacing[1]};
+`;
+/**
+* Computes the drop-indicator position for a sortable row. Direction mirrors
+* `HoverCardPropertiesEditTable` / `ListBox`: dragging from above places the
+* line on the hovered row's bottom edge, dragging from below places it on the
+* top edge. The dragged row itself never shows an indicator.
+*
+* `closestCenter` has a "dead zone" while the pointer is still over the
+* dragged row's own slot (`overIndex === activeIndex`). We use the drag
+* direction to show the indicator on the immediate neighbor so the
+* "immediately before/after original" positions still get feedback.
+*/
+const getDropIndicatorPosition = ({ isDragging, index, activeIndex, overIndex, draggedDirection }) => {
+	if (isDragging || activeIndex === -1) return;
+	if (overIndex === index && overIndex !== activeIndex) return activeIndex < index ? "bottom" : "top";
+	if (overIndex === activeIndex) {
+		if (draggedDirection === "up" && index === activeIndex - 1) return "bottom";
+		if (draggedDirection === "down" && index === activeIndex + 1) return "top";
+	}
+};
+/**
+* Inner row component used when drag-and-drop is enabled on the parent
+* TableBox. Subscribes to the surrounding SortableContext via useSortable and
+* renders a leading drag-handle cell.
+*/
+const SortableTableBoxRowContent = ({ id, isSelected, isSelectable, onClick, rowRef, draggedDirection, children, ...props }) => {
+	const { attributes, listeners, setNodeRef, isDragging, activeIndex, overIndex, index } = (0, _dnd_kit_sortable.useSortable)({ id: String(id) });
+	const setRefs = (element) => {
+		rowRef.current = element;
+		setNodeRef(element);
+	};
+	const dropIndicatorPosition = getDropIndicatorPosition({
+		isDragging,
+		index,
+		activeIndex,
+		overIndex,
+		draggedDirection
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledRow, {
+		...props,
+		ref: setRefs,
+		id: String(id),
+		onClick,
+		disableHoverBackground: true,
+		"aria-selected": isSelected,
+		$isSelectable: isSelectable,
+		$isDragging: isDragging,
+		$dropIndicatorPosition: dropIndicatorPosition,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleButton, {
+			"aria-label": "Drag to reorder",
+			...attributes,
+			...listeners,
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.DragIcon, {})
+		}) }), children]
+	});
+};
+const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, dropdownContent, dropdownHeadingText, dropdownFooter, ...props }) => {
+	const context = (0, react.useContext)(TableBoxContext);
+	const isSelected = context?.selectedKey === id;
+	const isSelectable = context?.selectionMode === "single";
+	const isReorderable = context?.isReorderable ?? false;
+	const rowRegistry = context?.rowRegistry ?? null;
+	const draggedDirection = context?.draggedDirection ?? null;
+	const hasActionsColumn = context?.hasActionsColumn ?? false;
+	const isDisabled = context?.disabled ?? false;
+	const rowRef = (0, react.useRef)(null);
+	const effectiveActions = isDisabled ? void 0 : actions;
+	const effectiveOnDelete = isDisabled ? void 0 : onDelete;
+	const isBlank = react.Children.toArray(children).every((child) => (0, react.isValidElement)(child) && child.props.value === "");
+	const handleClick = () => {
+		if (context?.onRowClick && id && isSelectable) context.onRowClick(id);
+	};
+	const handleDelete = (0, react.useCallback)(() => {
+		if (effectiveOnDelete && id != null) effectiveOnDelete(id);
+	}, [effectiveOnDelete, id]);
+	const rowContextValue = (0, react.useMemo)(() => ({
+		rowRef,
+		onDelete: effectiveOnDelete && id != null ? handleDelete : void 0,
+		isBlank
+	}), [
+		effectiveOnDelete,
+		handleDelete,
+		id,
+		isBlank
+	]);
+	const lastColumnIsCombobox = context?.columns?.at(-1)?.inlineEditConfig?.type === "combobox";
+	const trailingActionsCell = (0, react.useMemo)(() => hasActionsColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedActionsCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActions, {
+		actions: effectiveActions,
+		onDelete: effectiveOnDelete ? handleDelete : void 0,
+		inDedicatedColumn: true,
+		inCombobox: lastColumnIsCombobox
+	}) }) : null, [
+		hasActionsColumn,
+		effectiveActions,
+		effectiveOnDelete,
+		handleDelete,
+		lastColumnIsCombobox
+	]);
+	const renderedChildren = (0, react.useMemo)(() => {
+		if (hasActionsColumn) return children;
+		const childrenArray = Array.isArray(children) ? children : [children];
+		const lastChildIndex = childrenArray.length - 1;
+		return childrenArray.map((child, index) => {
+			if (!(0, react.isValidElement)(child) || index !== lastChildIndex) return child;
+			return (0, react.cloneElement)(child, {
+				isLastCell: true,
+				actions: effectiveActions,
+				onDelete: effectiveOnDelete,
+				...id != null && { itemId: String(id) }
+			});
+		});
+	}, [
+		hasActionsColumn,
+		children,
+		effectiveActions,
+		effectiveOnDelete,
+		id
+	]);
+	const rowChildrenWithContext = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableBoxRowContext.Provider, {
+		value: rowContextValue,
+		children: [renderedChildren, trailingActionsCell]
+	}), [
+		renderedChildren,
+		trailingActionsCell,
+		rowContextValue
+	]);
+	(0, react.useEffect)(() => {
+		if (!rowRegistry || id == null) return;
+		const key = String(id);
+		const registry = rowRegistry.current;
+		registry.set(key, rowChildrenWithContext);
+		return () => {
+			registry.delete(key);
+		};
+	}, [
+		id,
+		rowChildrenWithContext,
+		rowRegistry
+	]);
+	const shouldRenderDropdown = dropdownFormFields || dropdownContent;
+	const rowContent = isReorderable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableTableBoxRowContent, {
+		...props,
+		id,
+		isSelected,
+		isSelectable,
+		onClick: handleClick,
+		rowRef,
+		draggedDirection,
+		children: rowChildrenWithContext
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRow, {
+		...props,
+		ref: rowRef,
+		id,
+		onClick: handleClick,
+		disableHoverBackground: true,
+		"aria-selected": isSelected,
+		$isSelectable: isSelectable,
+		children: rowChildrenWithContext
+	});
+	if (shouldRenderDropdown) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default, {
+		trigger: rowContent,
+		open: isSelected,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default.Card, {
+			id: context?.rowDropdownId,
+			noPadding: true,
+			style: { zIndex: require_lib_zindex.Z_INDICES.modalDropdown },
+			children: [
+				dropdownHeadingText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverHeading, { children: dropdownHeadingText }),
+				dropdownFormFields && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverContent, {
+					spacing: _persona_design_tokens.Spacing[2],
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useFormGroup.FormGroupContext.Provider, {
+						value: {
+							configField: true,
+							labelTooltipZIndex: require_lib_zindex.Z_INDICES.modalDropdownTooltip
+						},
+						children: dropdownFormFields
+					})
+				}),
+				dropdownContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverContent, {
+					spacing: _persona_design_tokens.Spacing[3],
+					children: dropdownContent
+				}),
+				dropdownFooter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverFooter, { children: dropdownFooter })
+			]
+		})
+	});
+	return rowContent;
+};
+const OverlayTable = styled_components.default.table`
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  background: ${_persona_design_tokens.Color.BackgroundPrimary};
+  box-shadow: ${"0px 2px 10px 0px rgba(0, 0, 0, 0.04), 0px 5px 20px 0px rgba(0, 0, 0, 0.06), 0px 10px 40px 0px rgba(0, 0, 0, 0.08)"};
+`;
+/**
+* Visual clone of a `TableBoxRow` used inside `@dnd-kit`'s `DragOverlay`.
+* Renders a minimal table wrapper with a static drag-handle cell followed by
+* the original row's cells, so the portaled overlay looks identical to the
+* dragged row while it follows the pointer.
+*
+* `cellWidths` is the measured width (in px) of each `<td>` in the source
+* row at drag start, in source order (drag handle cell first, then content
+* cells). Applied via a `<colgroup>` with `table-layout: fixed` so the
+* overlay's columns align 1:1 with the source table instead of re-flowing
+* to the single row's content.
+*/
+const TableBoxRowOverlay = ({ children, cellWidths }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(OverlayTable, {
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("colgroup", { children: cellWidths.map((width, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: { width: `${width}px` } }, i)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledRow, {
+		disableHoverBackground: true,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleButton, {
+			tabIndex: -1,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.DragIcon, {})
+		}) }), children]
+	}) })]
+});
+//#endregion
+//#region components/TableBox/useColumnWidthLock.ts
+/**
+* Captures the live `<th>` widths of a table the moment inline editing starts
+* and clears them when editing ends.
+*
+* Consumers render a `<colgroup>` from `lockedColWidths` and switch the table
+* to `table-layout: fixed` for the duration of the edit so the input swap
+* doesn't reflow the columns.
+*/
+const useColumnWidthLock = (tableRef, { enabled = true } = {}) => {
+	const [lockedColWidths, setLockedColWidths] = (0, react.useState)(null);
+	return {
+		lockedColWidths,
+		onEditingChange: (0, react.useCallback)((isEditing) => {
+			if (!enabled) return;
+			if (!isEditing) {
+				setLockedColWidths(null);
+				return;
+			}
+			const ths = Array.from(tableRef.current?.querySelectorAll(":scope > thead > tr > th") ?? []);
+			if (ths.length > 0) setLockedColWidths(ths.map((th) => th.getBoundingClientRect().width));
+		}, [tableRef, enabled])
+	};
+};
+//#endregion
+//#region components/TableBox/useTableBoxDragAndDrop.ts
+const DRAG_DIRECTION_THRESHOLD = 4;
+/**
+* Bundles the `@dnd-kit` wiring TableBox needs to support row reordering:
+* sensors, lifecycle handlers, the dragged row's overlay content, and the
+* pointer direction used by rows to position drop indicators in dnd-kit's
+* "dead zone" (overIndex === activeIndex).
+*
+* Also forces a `grabbing` cursor on `<body>` while a row is active so the
+* cursor persists when the pointer leaves the drag handle.
+*/
+const useTableBoxDragAndDrop = ({ tableRef, reorderConfig }) => {
+	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
+	const rowRegistry = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [activeId, setActiveId] = (0, react.useState)(null);
+	const [draggedDirection, setDraggedDirection] = (0, react.useState)(null);
+	const [overlayCellWidths, setOverlayCellWidths] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (activeId == null) return;
+		const previous = document.body.style.cursor;
+		document.body.style.cursor = "grabbing";
+		return () => {
+			document.body.style.cursor = previous;
+		};
+	}, [activeId]);
+	const sortableIds = (0, react.useMemo)(() => {
+		if (!reorderConfig) return [];
+		return reorderConfig.items.map((item) => String(item[reorderConfig.itemKeyPath]));
+	}, [reorderConfig]);
+	const handleDragStart = (0, react.useCallback)((event) => {
+		const id = String(event.active.id);
+		setActiveId(id);
+		setDraggedDirection(null);
+		const rowElement = tableRef.current?.querySelector(`tr[id="${CSS.escape(id)}"]`);
+		if (rowElement) setOverlayCellWidths(Array.from(rowElement.children).filter((child) => child.tagName === "TD").map((td) => td.getBoundingClientRect().width));
+		else setOverlayCellWidths(null);
+	}, [tableRef]);
+	const handleDragMove = (0, react.useCallback)((event) => {
+		const { y } = event.delta;
+		const next = y < -DRAG_DIRECTION_THRESHOLD ? "up" : y > DRAG_DIRECTION_THRESHOLD ? "down" : null;
+		setDraggedDirection((prev) => prev === next ? prev : next);
+	}, []);
+	const resetDragState = (0, react.useCallback)(() => {
+		setActiveId(null);
+		setDraggedDirection(null);
+		setOverlayCellWidths(null);
+	}, []);
+	return {
+		activeId,
+		overlayCellWidths,
+		draggedDirection,
+		sortableIds,
+		rowRegistry,
+		dndContextProps: {
+			sensors,
+			collisionDetection: _dnd_kit_core.closestCenter,
+			onDragStart: handleDragStart,
+			onDragMove: handleDragMove,
+			onDragEnd: (0, react.useCallback)((event) => {
+				resetDragState();
+				if (!reorderConfig) return;
+				const { active, over } = event;
+				if (!over || active.id === over.id) return;
+				const { items, itemKeyPath, onReorder } = reorderConfig;
+				const fromIndex = require_lib_reorderItems.findIndexByKey(items, itemKeyPath, String(active.id));
+				const toIndex = require_lib_reorderItems.findIndexByKey(items, itemKeyPath, String(over.id));
+				if (fromIndex === -1 || toIndex === -1) return;
+				onReorder(require_lib_reorderItems.moveItemByIndex(items, fromIndex, toIndex));
+			}, [reorderConfig, resetDragState]),
+			onDragCancel: resetDragState
+		}
+	};
+};
+//#endregion
+//#region components/TableBox/TableBox.tsx
+const TableBoxContext = (0, react.createContext)(null);
+const DRAG_HANDLE_CELL_WIDTH = 24;
+const RIGHT_FADE_WIDTH = 48;
+const HEADER_HEIGHT_PX = parseInt(_persona_design_tokens.Spacing[1], 10) * 2 + parseInt(_persona_design_tokens.Typography.TextSmall.lineHeight, 10) + 1;
+const TableScrollContainer = styled_components.default.div`
+  border: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  overflow-x: ${({ $fixedLayout, $hasHorizontalOverflow }) => $fixedLayout ? "visible" : $hasHorizontalOverflow ? "auto" : "visible"};
+  overscroll-behavior-x: none;
+`;
+const ScrollAffordanceWrapper = styled_components.default.div`
+  position: relative;
+`;
+const RightFadeOverlay = styled_components.default.div`
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  width: ${RIGHT_FADE_WIDTH}px;
+  /* Sits above the sticky first column (z-index 2) but below the pinned
+     row actions (z-index 4) so action buttons stay legible. */
+  z-index: 3;
+  pointer-events: none;
+  background:
+    linear-gradient(to right, transparent, ${_persona_design_tokens.Color.BackgroundSecondary}) top left / 100%
+      ${Math.max(0, HEADER_HEIGHT_PX - 1)}px no-repeat,
+    linear-gradient(to right, transparent, ${_persona_design_tokens.Color.BackgroundPrimary}) bottom left / 100%
+      calc(100% - ${HEADER_HEIGHT_PX}px) no-repeat;
+  border-top-right-radius: ${_persona_design_tokens.BorderRadius.Md};
+  border-bottom-right-radius: ${_persona_design_tokens.BorderRadius.Md};
+  opacity: ${({ $visible }) => $visible ? 1 : 0};
+  transition: opacity ${"200ms"} ease-out;
+`;
+const stickyContentColumn = (isReorderable) => styled_components.css`
+  && thead th:first-child,
+  && tbody td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+  }
+
+  && tbody td:first-child {
+    background-color: inherit;
+  }
+
+  ${isReorderable && styled_components.css`
+    && thead th:nth-child(2),
+    && tbody td:nth-child(2) {
+      position: sticky;
+      left: ${DRAG_HANDLE_CELL_WIDTH}px;
+      z-index: 2;
+    }
+
+    && tbody td:nth-child(2) {
+      background-color: inherit;
+    }
+  `}
+`;
+const StyledTable = (0, styled_components.default)(require_Table.Table)`
+  caret-color: ${_persona_design_tokens.Color.BorderFocus};
+
+  &::selection {
+    background: ${_persona_design_tokens.Color.BackgroundLabelPurple};
+  }
+
+  ${({ $fixedLayout, $isReorderable }) => $fixedLayout ? styled_components.css`
+          /* Legacy: truncate long cell content to container width. */
+          table-layout: fixed;
+        ` : stickyContentColumn($isReorderable)}
+
+  /* Lock column widths while inline editing to prevent layout reflow. */
+  ${({ $fixedLayout, $lockedWidth }) => !$fixedLayout && $lockedWidth != null && styled_components.css`
+      table-layout: fixed;
+      width: ${$lockedWidth}px;
+    `}
+
+  /* Subtle right border on the sticky column when content extends off-screen
+     — inset shadow keeps it layout-neutral. */
+  ${({ $hasHorizontalOverflow, $isReorderable, $fixedLayout }) => $hasHorizontalOverflow && !$fixedLayout && styled_components.css`
+      ${$isReorderable ? `&& thead th:nth-child(2), && tbody td:nth-child(2)` : `&& thead th:first-child, && tbody td:first-child`} {
+        box-shadow: inset -1px 0 0 ${_persona_design_tokens.Color.BorderDivider};
+      }
+    `}
+
+  /* When the header is hidden, round the first body row's outer corners so
+     they line up with the surrounding container's rounded border. */
+  ${({ $hideHeader }) => $hideHeader && styled_components.css`
+      && tbody tr:first-child td:first-child {
+        border-top-left-radius: ${_persona_design_tokens.BorderRadius.Md};
+      }
+      && tbody tr:first-child td:last-child {
+        border-top-right-radius: ${_persona_design_tokens.BorderRadius.Md};
+      }
+    `}
+`;
+const StyledTableHeaderCell = (0, styled_components.default)(require_Table.TableHeaderCell)`
+  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]};
+  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  ${require_mixins_text.paragraphMixins.sm};
+
+  /* Border radius for corner cells */
+  &:first-child {
+    border-radius: ${_persona_design_tokens.BorderRadius.Md} 0 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 ${_persona_design_tokens.BorderRadius.Md} 0 0;
+  }
+`;
+const DragHandleHeaderCell = (0, styled_components.default)(StyledTableHeaderCell)`
+  width: 24px;
+  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[0]};
+`;
+const PinnedActionsCell = (0, styled_components.default)(require_Table.TableCell)`
+  position: sticky;
+  right: 0;
+  z-index: 4;
+  background: transparent;
+  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
+  padding: 0;
+  width: ${RowActionsContainerWithFadeWidth}px;
+  height: 1px; /* dummy height lets the child use height: 100% */
+`;
+const EmptyStateCell = (0, styled_components.default)(require_Table.TableCell)`
+  ${require_mixins_text.paragraphMixins.sm};
+  padding: ${_persona_design_tokens.Spacing[2]};
+  color: ${_persona_design_tokens.Color.TextSecondary};
+  border-bottom: none;
+`;
+const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, columns, onSelectionChange, selectionMode = "none", newRowId, onCreateNewRow: onCreateNewRowProp, disabled = false, reorderConfig, disableHorizontalScroll: disableHorizontalScrollProp = false, hideHeader = false, "aria-label": ariaLabel, ...props }) => {
+	const tableRef = (0, react.useRef)(null);
+	const scrollContainerRef = (0, react.useRef)(null);
+	const tableBoxId = (0, react.useMemo)(() => (0, lodash_fp_uniqueId_js.default)("tablebox-"), []);
+	const rowDropdownId = `${tableBoxId}-row-dropdown`;
+	const hasInlineEditableColumn = columns.some((c) => c.inlineEditConfig != null);
+	const disableHorizontalScroll = disableHorizontalScrollProp || hasInlineEditableColumn;
+	const { hasHorizontalOverflow, hasMoreScrollRight } = require_lib_useScrollOverflow.useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
+	const { lockedColWidths, onEditingChange } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
+	const [internalSelectedKey, setInternalSelectedKey] = (0, react.useState)(defaultSelectedKey ?? null);
+	const [shouldCreateNewRowAfterCommit, setShouldCreateNewRowAfterCommit] = (0, react.useState)(false);
+	const currentSelectedKey = selectedKey ?? internalSelectedKey;
+	const scheduleCreateNewRowAfterCommit = () => {
+		setShouldCreateNewRowAfterCommit(true);
+	};
+	const handleRowClick = (0, react.useCallback)((rowId) => {
+		if (selectionMode === "none") return;
+		if (!onSelectionChange) setInternalSelectedKey(rowId);
+		else onSelectionChange(rowId);
+	}, [onSelectionChange, selectionMode]);
+	const handleOutsideClick = (0, react.useCallback)((event) => {
+		if (!document.querySelector(`[id="${rowDropdownId}"][data-state="open"]`)) return;
+		const target = event.target;
+		const isOutsideTableBox = tableRef.current && !tableRef.current.contains(target);
+		const isOnRowDropdownContent = target.closest(`[id="${rowDropdownId}"]`);
+		if (isOutsideTableBox && !isOnRowDropdownContent && currentSelectedKey != null) if (!onSelectionChange) setInternalSelectedKey(null);
+		else onSelectionChange(null);
+	}, [
+		currentSelectedKey,
+		onSelectionChange,
+		rowDropdownId
+	]);
+	(0, react.useEffect)(() => {
+		document.addEventListener("mousedown", handleOutsideClick);
+		return () => {
+			document.removeEventListener("mousedown", handleOutsideClick);
+		};
+	}, [handleOutsideClick]);
+	(0, react.useEffect)(() => {
+		if (!shouldCreateNewRowAfterCommit) return;
+		setShouldCreateNewRowAfterCommit(false);
+		onCreateNewRowProp?.();
+	}, [onCreateNewRowProp, shouldCreateNewRowAfterCommit]);
+	const { activeId, overlayCellWidths, draggedDirection, sortableIds, rowRegistry, dndContextProps } = useTableBoxDragAndDrop({
+		tableRef,
+		reorderConfig: disabled ? void 0 : reorderConfig
+	});
+	const isReorderable = !disabled && reorderConfig != null;
+	const hasActionsColumn = !disableHorizontalScroll;
+	const contextValue = {
+		disabled,
+		newRowId,
+		columns,
+		selectedKey: currentSelectedKey,
+		selectionMode,
+		onRowClick: handleRowClick,
+		tableBoxId,
+		rowDropdownId,
+		isReorderable,
+		rowRegistry: isReorderable ? rowRegistry : null,
+		draggedDirection,
+		hasActionsColumn,
+		hasHorizontalOverflow,
+		onEditingChange,
+		scheduleCreateNewRowAfterCommit: onCreateNewRowProp ? scheduleCreateNewRowAfterCommit : void 0
+	};
+	const isEmpty = Array.isArray(children) ? children.length === 0 : children == null;
+	const totalColumnCount = columns.length + (isReorderable ? 1 : 0) + (hasActionsColumn ? 1 : 0);
+	const activeRowContent = activeId ? rowRegistry.current.get(activeId) ?? null : null;
+	const tableContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ScrollAffordanceWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableScrollContainer, {
+		ref: scrollContainerRef,
+		$fixedLayout: disableHorizontalScroll,
+		$hasHorizontalOverflow: hasHorizontalOverflow,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTable, {
+			ref: tableRef,
+			size: "md",
+			"aria-label": ariaLabel,
+			tabIndex: -1,
+			$isReorderable: isReorderable,
+			$hasHorizontalOverflow: hasHorizontalOverflow,
+			$fixedLayout: disableHorizontalScroll,
+			$hideHeader: hideHeader,
+			$lockedWidth: lockedColWidths != null ? lockedColWidths.reduce((sum, w) => sum + w, 0) : void 0,
+			...props,
+			children: [
+				lockedColWidths && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("colgroup", { children: lockedColWidths.map((w, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: { width: `${w}px` } }, i)) }),
+				!hideHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableHead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Table.TableRow, { children: [
+					isReorderable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleHeaderCell, { "aria-hidden": "true" }),
+					columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeaderCell, { children: column.title }, column.key)),
+					hasActionsColumn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeaderCell, {
+						"aria-hidden": "true",
+						style: { padding: 0 }
+					})
+				] }) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableBody, { children: isEmpty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table.TableRow, {
+					disableHoverBackground: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyStateCell, {
+						colSpan: totalColumnCount,
+						children: emptyText || "No data available."
+					})
+				}) : children })
+			]
+		})
+	}), !disableHorizontalScroll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightFadeOverlay, {
+		"aria-hidden": "true",
+		$visible: hasMoreScrollRight
+	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBoxContext.Provider, {
+		value: contextValue,
+		children: isReorderable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_dnd_kit_core.DndContext, {
+			...dndContextProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_sortable.SortableContext, {
+				items: sortableIds,
+				strategy: _dnd_kit_sortable.verticalListSortingStrategy,
+				children: tableContent
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DragOverlay, { children: activeRowContent && overlayCellWidths && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBoxRowOverlay, {
+				cellWidths: overlayCellWidths,
+				children: activeRowContent
+			}) })]
+		}) : tableContent
+	});
+};
+TableBox.Row = TableBoxRow;
+TableBox.Cell = TableBoxCell;
+//#endregion
+Object.defineProperty(exports, "TableBox", {
+	enumerable: true,
+	get: function() {
+		return TableBox;
+	}
+});
+Object.defineProperty(exports, "TableBoxContext", {
+	enumerable: true,
+	get: function() {
+		return TableBoxContext;
+	}
+});
+
+//# sourceMappingURL=TableBox-D_B9atn2.cjs.map