@cube-dev/ui-kit 0.0.0-canary-9fab1b3 → 0.0.0-canary-8a06567

package/dist/components/data/TableBase/TableView.js

@@ -0,0 +1,859 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8a06567 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
+import { TextItem } from "../../content/TextItem/TextItem.js";
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { UpIcon } from "../../../icons/UpIcon.js";
+import { MoreIcon } from "../../../icons/MoreIcon.js";
+import { _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
+import { __Menu } from "../../actions/Menu/Menu.js";
+import { Action } from "../../actions/Action/Action.js";
+import { useContextMenu } from "../../actions/use-context-menu.js";
+import { useToast } from "../../overlays/Toast/useToast.js";
+import { __Checkbox } from "../../fields/Checkbox/Checkbox.js";
+import { LoadingAnimation } from "../../status/LoadingAnimation/LoadingAnimation.js";
+import { Placeholder } from "../../content/Placeholder/Placeholder.js";
+import { Skeleton } from "../../content/Skeleton/Skeleton.js";
+import { ColumnResizer } from "./ColumnResizer.js";
+import { ROW_MENU_COLUMN_KEY, isMenuEmpty, normalizeMenuAction } from "./row-menu.js";
+import { TableElement, TableHeaderItem } from "./styled.js";
+import { TableRow, TableRowDropIndicator } from "./TableRow.js";
+import { useScrollability } from "./use-scrollability.js";
+import { getColumnText, getColumnValue } from "./use-table-columns.js";
+import { ROW_NUMBER_COLUMN_KEY, SELECTION_COLUMN_KEY } from "./use-table-selection.js";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+//#region src/components/data/TableBase/TableView.tsx
+/**
+* The same block as an HTML table, so a spreadsheet keeps the cell boundaries.
+*
+* Pasting `text/plain` TSV works, but Excel and Sheets then re-guess the types
+* of every field; the HTML flavour is what makes a value that looks like a date
+* stay the text it was on screen.
+*/
+function toClipboardHtml(tsv) {
+	return `<table>${tsv.split("\n").map((line) => `<tr>${line.split("	").map((cell) => `<td>${escapeHtml(cell)}</td>`).join("")}</tr>`).join("")}</table>`;
+}
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+const ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
+/**
+* Content height per size step, mirroring `$row-height` in `styled.ts`. Only the
+* initial estimate — every rendered row is measured, so a wrong guess costs a
+* scrollbar adjustment, not a layout bug. The `+ 1` is the row separator.
+*/
+/** Enough to read as "more is coming" without pretending to know how much. */
+const LOAD_MORE_SKELETON_ROWS = 3;
+const ESTIMATED_ROW_HEIGHT = {
+	xsmall: 28,
+	small: 32,
+	medium: 40,
+	large: 48,
+	xlarge: 56
+};
+function pinStyle(column) {
+	if (column.pinOffset == null) return void 0;
+	return { ["--pin-offset"]: `${column.pinOffset}px` };
+}
+/**
+* The one place table DOM exists. Both `ItemTable` and `DataTable` resolve their
+* props into the shape above and hand it here, so the markup, the ARIA
+* bookkeeping and the tasty sub-element contract have a single implementation.
+*/
+function TableView(props) {
+	const { qa, rows, getRowKey, layout, onScrollerRef, rootRef, size = "medium", shape = "plain", rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isHeaderSticky = true, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, isLoading = false, loadingIndicator = "overlay", skeletonRowCount = 6, selection, selectionTooltip, overlay, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, rowLink, onRowAction, onLoadMore, hasMore = false, isLoadingMore = false, loadMoreMargin = 200, pinnedTopRows, pinnedBottomRows, cellSelection, rowNumberOffset = 0, isReorderable = false, dragState, dropState, collectionProps, bodyRef, isResizable = false, onColumnResize, onColumnResizeEnd, emptyLabel, noResultsLabel, error, isFiltered = false, sortMode = "off", sort, sorts, onColumnSort, getRowProps, headerPreset, contentPreset, toolbar, footer, ariaLabel, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, mods } = props;
+	const { columns } = layout;
+	const columnCount = columns.length;
+	const { t } = useI18n();
+	const toast = useToast();
+	const [scrollerEl, setScrollerEl] = useState(null);
+	const scrollerRef = useRef(null);
+	const handleScrollerRef = useCallback((element) => {
+		scrollerRef.current = element;
+		setScrollerEl(element);
+		onScrollerRef(element);
+	}, [onScrollerRef]);
+	const headerRowCount = isHeaderHidden ? 0 : 1;
+	const mergedStyles = useMemo(() => ({
+		...styles,
+		...contentPreset ? { Table: { preset: contentPreset } } : null,
+		...headerStyles ? { HeadRow: headerStyles } : null,
+		...headerPreset || headerCellStyles ? { HeaderCell: {
+			...headerPreset ? { preset: headerPreset } : null,
+			...headerCellStyles
+		} } : null,
+		...bodyStyles ? { Body: bodyStyles } : null,
+		...rowStyles ? { Row: rowStyles } : null,
+		...cellStyles ? { Cell: cellStyles } : null,
+		...rowHeight != null ? { "$row-height": `${rowHeight}px` } : null,
+		...headerHeight != null ? { "$header-height": `${headerHeight}px` } : null
+	}), [
+		styles,
+		headerStyles,
+		headerCellStyles,
+		headerPreset,
+		contentPreset,
+		bodyStyles,
+		rowStyles,
+		cellStyles,
+		rowHeight,
+		headerHeight
+	]);
+	if (columnCount === 0 && isLoading) return /* @__PURE__ */ jsxs(TableElement, {
+		ref: rootRef,
+		qa: qa || "Table",
+		styles: mergedStyles,
+		mods: {
+			size,
+			shape,
+			...mods
+		},
+		children: [toolbar, /* @__PURE__ */ jsx("div", {
+			"data-element": "Scroller",
+			ref: handleScrollerRef,
+			children: /* @__PURE__ */ jsx(Skeleton, { layout: "table" })
+		})]
+	});
+	/**
+	* Whether a cell is inside the current range.
+	*
+	* Pinned rows take part: they sit in the range's row order at the position
+	* they occupy on screen, so a selection down a column of figures reaches its
+	* total instead of leaving it to be copied separately. (ag-grid excludes
+	* pinned rows outright; this is a deliberate departure.)
+	*/
+	function isCellSelected(rowKey, columnKey) {
+		if (!cellSelection?.isEnabled) return false;
+		return cellSelection.isSelected(rowKey, columnKey);
+	}
+	/**
+	* Press and drag for the range.
+	*
+	* `pointerdown` rather than `click`: the range has to start before the drag
+	* does, and a click only lands after the button comes back up — by which time
+	* the gesture is over. `pointerenter` grows it while the button is held, which
+	* is the same shape ag-grid's `onCellMouseOver` gives the Cloud grids.
+	*/
+	function cellSelectionProps(rowKey, columnKey, pinnedEdge) {
+		if (!cellSelection?.canSelectCell(rowKey, columnKey)) return void 0;
+		return {
+			onPointerDown: (event) => {
+				if (event.button !== 0) return;
+				if (event.shiftKey) {
+					event.preventDefault();
+					cellSelection.extendTo(rowKey, columnKey);
+				} else cellSelection.select(rowKey, columnKey);
+				scrollerRef.current?.focus({ preventScroll: true });
+				cellSelection.isDraggingRef.current = true;
+				setIsRangeDragging(true);
+			},
+			onPointerEnter: () => {
+				if (!cellSelection.isDraggingRef.current) return;
+				if (pinnedEdge) return;
+				cellSelection.extendTo(rowKey, columnKey);
+			}
+		};
+	}
+	/**
+	* Marks the trailing column.
+	*
+	* Two things hang off it. Its resize handle tucks fully inside rather than
+	* straddling a boundary that is not there — left hanging it puts half its
+	* width past the table, and the scroller gains a few pixels of horizontal
+	* scroll onto blank space. And it draws no vertical rule: that rule would
+	* land flush against the frame and read as a doubled edge.
+	*/
+	/** The pinned edge a row was rendered at, as the documented section name. */
+	function sectionOf(pinnedEdge) {
+		if (pinnedEdge === "top") return "pinnedTop";
+		if (pinnedEdge === "bottom") return "pinnedBottom";
+		return "body";
+	}
+	function lastColumnFlag(column) {
+		return column.index === columns.length - 1 ? "" : void 0;
+	}
+	/**
+	* Which frame corner, if any, this cell sits in.
+	*
+	* Only the two bottom ones, and only when the card's rounded edge is what the
+	* row actually meets — a footer below it means the row ends against a straight
+	* line instead. Without this a selected cell in that row has its ring sliced
+	* off at 45° by the frame's radius, which reads as a rendering fault rather
+	* than as a corner.
+	*
+	* Decided here rather than in CSS: the renderer already knows about the
+	* footer, the shape and the pinned rows, and expressing
+	* `card × no-footer × visually-last-row × outer-column` as a state map is how
+	* a border map turns into a combinatorial one.
+	*/
+	function bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge) {
+		if (shape !== "card" || footer != null) return void 0;
+		const pinnedBottomCount = pinnedBottomRows?.length ?? 0;
+		if (!(pinnedEdge === "bottom" ? rowIndex === pinnedBottomCount - 1 : pinnedEdge == null && isLastRow && pinnedBottomCount === 0)) return void 0;
+		if (column.index === 0) return "start";
+		if (column.index === columns.length - 1) return "end";
+	}
+	function renderStateRow(content) {
+		return /* @__PURE__ */ jsx("tr", {
+			"data-element": "Row",
+			role: "row",
+			"aria-rowindex": headerRowCount + 1,
+			children: /* @__PURE__ */ jsx("td", {
+				"data-element": "StateCell",
+				"data-state": "",
+				role: "gridcell",
+				colSpan: Math.max(columnCount, 1),
+				"aria-colindex": 1,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-element": "StateContent",
+					children: content
+				})
+			})
+		});
+	}
+	function renderSkeletonRows(count = skeletonRowCount, keyPrefix = "skeleton") {
+		return Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsx("tr", {
+			"data-element": "Row",
+			"data-placeholder": "",
+			role: "row",
+			"aria-rowindex": headerRowCount + rowIndex + 1,
+			"aria-busy": "true",
+			children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+				"data-element": "Cell",
+				"data-pin": column.pin,
+				"data-pin-edge": column.isPinEdge ? "" : void 0,
+				"data-align": column.align,
+				role: "gridcell",
+				"aria-colindex": column.ariaColIndex,
+				style: pinStyle(column),
+				children: /* @__PURE__ */ jsx(Placeholder, { size: "2x" })
+			}, column.key))
+		}, `${keyPrefix}-${rowIndex}`));
+	}
+	function renderSelectionHeaderCell(column) {
+		return /* @__PURE__ */ jsx("th", {
+			"data-element": "HeaderCell",
+			"data-key": column.key,
+			"data-kind": "selection",
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-last-column": lastColumnFlag(column),
+			role: "columnheader",
+			scope: "col",
+			tabIndex: -1,
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column),
+			children: selection && selection.selectionMode === "multiple" ? /* @__PURE__ */ jsx("div", {
+				"data-element": "SelectionBox",
+				children: /* @__PURE__ */ jsx(__Checkbox, {
+					"aria-label": selection.selectAllState === "all" ? t("itemTable.deselectAll", "Deselect all") : t("itemTable.selectAll", "Select all"),
+					isSelected: selection.selectAllState === "all",
+					isIndeterminate: selection.selectAllState === "some",
+					onChange: selection.toggleSelectAll
+				})
+			}) : null
+		}, column.key);
+	}
+	function renderSelectionCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge) {
+		const canSelect = selection.canSelect(rowKey);
+		const tooltip = typeof selectionTooltip === "function" ? selectionTooltip(row) : selectionTooltip;
+		const checkbox = /* @__PURE__ */ jsx(__Checkbox, {
+			"aria-label": t("itemTable.selectRow", "Select row"),
+			isSelected: selection.isSelected(rowKey),
+			isDisabled: !canSelect,
+			onChange: () => selection.toggleRow(rowKey)
+		});
+		return /* @__PURE__ */ jsx("td", {
+			"data-element": "Cell",
+			"data-key": column.key,
+			"data-kind": "selection",
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-last-row": isLastRow ? "" : void 0,
+			"data-pinned": pinnedEdge,
+			"data-last-column": lastColumnFlag(column),
+			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
+			role: "gridcell",
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column),
+			onClickCapture: selection.captureShift,
+			onKeyDownCapture: selection.captureShift,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-element": "SelectionBox",
+				children: !canSelect && tooltip ? /* @__PURE__ */ jsx(TooltipProvider, {
+					title: tooltip,
+					children: checkbox
+				}) : checkbox
+			})
+		}, column.key);
+	}
+	function renderRowMenuCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge) {
+		const items = resolveRowMenu(row, rowIndex, rowKey);
+		return /* @__PURE__ */ jsx("td", {
+			"data-element": "Cell",
+			"data-key": column.key,
+			"data-kind": "actions",
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-last-row": isLastRow ? "" : void 0,
+			"data-pinned": pinnedEdge,
+			"data-last-column": lastColumnFlag(column),
+			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
+			role: "gridcell",
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column),
+			children: isMenuEmpty(items) ? null : /* @__PURE__ */ jsx("div", {
+				"data-element": "RowActions",
+				children: /* @__PURE__ */ jsxs(_MenuTrigger, { children: [/* @__PURE__ */ jsx(ItemAction, {
+					tabIndex: -1,
+					icon: /* @__PURE__ */ jsx(MoreIcon, {}),
+					"aria-label": t("itemTable.rowActions", "Row actions"),
+					...rowMenuTriggerProps
+				}), /* @__PURE__ */ jsx(__Menu, {
+					onAction: menuActionHandler(row, rowKey, false),
+					children: items
+				})] })
+			})
+		}, column.key);
+	}
+	function renderHeaderCell(column) {
+		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionHeaderCell(column);
+		if (column.key === ROW_NUMBER_COLUMN_KEY) return /* @__PURE__ */ jsx("th", {
+			"data-element": "HeaderCell",
+			"data-key": column.key,
+			"data-kind": "row-number",
+			"data-last-column": lastColumnFlag(column),
+			role: "columnheader",
+			scope: "col",
+			tabIndex: -1,
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column)
+		}, column.key);
+		if (column.key === ROW_MENU_COLUMN_KEY) return /* @__PURE__ */ jsx("th", {
+			"data-element": "HeaderCell",
+			"data-key": column.key,
+			"data-kind": "actions",
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-last-column": lastColumnFlag(column),
+			role: "columnheader",
+			scope: "col",
+			tabIndex: -1,
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column)
+		}, column.key);
+		const header = column.header;
+		const activeSorts = sorts ?? (sort ? [sort] : []);
+		const sortIndex = activeSorts.findIndex((entry) => entry.columnKey === column.key);
+		const activeSort = sortIndex === -1 ? null : activeSorts[sortIndex];
+		const isSorted = activeSort != null;
+		const sortRank = activeSorts.length > 1 ? sortIndex + 1 : null;
+		const isSortable = sortMode !== "off" && !column.isStructural && column.isSortable === true;
+		const canResize = !column.isStructural && (column.isResizable ?? isResizable) && onColumnResize != null && onColumnResizeEnd != null;
+		const ctx = {
+			columnKey: column.key,
+			columnIndex: column.index,
+			sort: activeSort?.direction ?? null,
+			isSortable,
+			isResizing: false,
+			width: column.width
+		};
+		const sortIndicator = isSortable ? /* @__PURE__ */ jsx("div", {
+			"data-element": "SortIndicator",
+			"data-rank": sortRank ?? void 0,
+			"data-sorted": isSorted ? "" : void 0,
+			"data-dir": activeSort?.direction,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(UpIcon, {})
+		}) : null;
+		const hasCustomRightIcon = header?.rightIcon != null;
+		const rightIcon = hasCustomRightIcon ? header.rightIcon : sortIndicator;
+		const suffixContent = hasCustomRightIcon ? sortIndicator : null;
+		const suffix = header?.suffix != null || suffixContent ? /* @__PURE__ */ jsxs(Fragment$1, { children: [header?.suffix, suffixContent] }) : void 0;
+		const content = header?.render ? header.render(ctx) : column.title == null && !header ? null : /* @__PURE__ */ jsx(TableHeaderItem, {
+			icon: header?.icon,
+			rightIcon,
+			prefix: header?.prefix,
+			suffix,
+			description: header?.description,
+			descriptionPlacement: header?.descriptionPlacement,
+			tooltip: header?.tooltip ?? true,
+			theme: header?.theme,
+			actions: header?.actions,
+			autoHideActions: header?.autoHideActions ?? true,
+			styles: header?.styles,
+			children: column.title
+		});
+		return /* @__PURE__ */ jsxs("th", {
+			"data-element": "HeaderCell",
+			"data-key": column.key,
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-align": header?.align ?? column.align,
+			"data-sortable": isSortable ? "" : void 0,
+			"data-resizable": canResize ? "" : void 0,
+			"data-last-column": lastColumnFlag(column),
+			"data-sorted": isSorted ? "" : void 0,
+			role: "columnheader",
+			scope: "col",
+			tabIndex: isSortable ? 0 : -1,
+			"aria-colindex": column.ariaColIndex,
+			"aria-sort": activeSort ? ARIA_SORT[activeSort.direction] : void 0,
+			style: pinStyle(column),
+			onClick: isSortable ? () => onColumnSort?.(column.key) : void 0,
+			onKeyDown: isSortable ? (event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				onColumnSort?.(column.key);
+			} : void 0,
+			children: [content, canResize ? /* @__PURE__ */ jsx(ColumnResizer, {
+				column,
+				label: t("itemTable.resizeColumn", "Resize column"),
+				onResize: onColumnResize,
+				onResizeEnd: onColumnResizeEnd
+			}) : null]
+		}, column.key);
+	}
+	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge) {
+		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
+		if (column.key === ROW_NUMBER_COLUMN_KEY) return /* @__PURE__ */ jsx("td", {
+			"data-element": "Cell",
+			"data-key": column.key,
+			"data-kind": "row-number",
+			"data-last-row": isLastRow ? "" : void 0,
+			"data-pinned": pinnedEdge,
+			"data-last-column": lastColumnFlag(column),
+			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
+			role: "gridcell",
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column),
+			children: pinnedEdge ? null : rowNumberOffset + rowIndex + 1
+		}, column.key);
+		if (column.key === ROW_MENU_COLUMN_KEY) return renderRowMenuCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
+		const ctx = {
+			row,
+			rowKey,
+			rowIndex,
+			columnKey: column.key,
+			columnIndex: column.index,
+			section: sectionOf(pinnedEdge),
+			isSelected: selection?.isSelected(rowKey) ?? false
+		};
+		const value = column.isStructural ? void 0 : getColumnValue(column, row, rowIndex);
+		const rendered = column.render ? column.render(value, row, rowIndex, ctx) : column.isStructural ? null : getColumnText(column, row, rowIndex);
+		const isText = typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "bigint";
+		const content = isText && !column.autoHeight ? /* @__PURE__ */ jsx(TextItem, { children: String(rendered) }) : isText ? String(rendered) : rendered;
+		const resolvedCellStyles = typeof column.cellStyles === "function" ? column.cellStyles(ctx) : column.cellStyles;
+		const CellTag = column.isRowHeader ? "th" : "td";
+		const link = column.isRowHeader ? rowLink?.(row, rowIndex) : void 0;
+		return /* @__PURE__ */ jsxs(CellTag, {
+			"data-element": "Cell",
+			"data-key": column.key,
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-align": column.align,
+			"data-wrap": column.autoHeight ? "" : void 0,
+			"data-link": link !== void 0 ? "" : void 0,
+			"data-last-row": isLastRow ? "" : void 0,
+			"data-pinned": pinnedEdge,
+			"data-last-column": lastColumnFlag(column),
+			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
+			"data-cell-selected": isCellSelected(rowKey, column.key) ? "" : void 0,
+			...column.isRowHeader ? { scope: "row" } : { role: "gridcell" },
+			...cellSelectionProps(rowKey, column.key, pinnedEdge),
+			"aria-colindex": column.ariaColIndex,
+			style: {
+				...pinStyle(column),
+				...resolvedCellStyles
+			},
+			...column.cellProps?.(ctx),
+			children: [content, link !== void 0 ? /* @__PURE__ */ jsx(Action, {
+				"data-element": "RowLink",
+				to: link,
+				tabIndex: -1,
+				"aria-label": getColumnText(column, row, rowIndex) ?? void 0
+			}) : null]
+		}, column.key);
+	}
+	/**
+	* A pinned row — a total or subtotal.
+	*
+	* Rendered inside `<tbody>` rather than `<thead>`/`<tfoot>` so it keeps the
+	* body's own row and cell styling: the sub-element chains are anchored to
+	* `Body`, and a row in the head would match none of them. `data-pinned`
+	* carries the stickiness instead.
+	*/
+	function renderPinnedRow(row, index, edge) {
+		const rowKey = getRowKey(row, index);
+		return /* @__PURE__ */ jsx("tr", {
+			"data-element": "Row",
+			"data-pinned": edge,
+			role: "row",
+			children: columns.map((column) => renderCell(column, row, index, rowKey, false, edge))
+		}, `pinned-${edge}-${rowKey}`);
+	}
+	/** The cells of one body row. Shared by both render paths. */
+	function renderRowCells(row, rowIndex) {
+		const rowKey = getRowKey(row, rowIndex);
+		return columns.map((column) => renderCell(column, row, rowIndex, rowKey, rowIndex === rows.length - 1));
+	}
+	/**
+	* The `<tr>` shell. Virtuoso owns the element in the virtualized path (it
+	* needs its own `style` and measurement attributes), so this returns the
+	* props rather than the element.
+	*/
+	function getRowElementProps(row, rowIndex) {
+		const rowKey = getRowKey(row, rowIndex);
+		const isSelected = selection?.isSelected(rowKey) ?? false;
+		const extra = getRowProps?.({
+			row,
+			rowKey,
+			rowIndex,
+			section: "body",
+			isSelected
+		});
+		return {
+			"data-element": "Row",
+			"data-key": String(rowKey),
+			"data-row-index": rowIndex,
+			"data-qa": extra?.qa,
+			"data-odd": isStriped && rowIndex % 2 === 1 ? "" : void 0,
+			"data-dimmed": extra?.isDimmed ? "" : void 0,
+			"data-selected": isSelected ? "" : void 0,
+			"data-disabled": selection?.isRowDisabled(rowKey) ? "" : void 0,
+			role: "row",
+			tabIndex: isReorderable ? rowIndex === focusedRowIndex ? 0 : -1 : void 0,
+			"aria-selected": selection?.isEnabled ? isSelected : void 0,
+			"aria-rowindex": headerRowCount + rowIndex + 1,
+			title: extra?.tooltip,
+			height: extra?.height,
+			"data-clickable": onRowAction != null || rowLink?.(row, rowIndex) !== void 0 ? "" : void 0,
+			onClick: onRowAction != null ? (event) => {
+				if (event.target.closest("a, button, input, select, textarea, [role=\"button\"], [role=\"menuitem\"]")) return;
+				onRowAction(row, rowKey);
+			} : void 0,
+			onContextMenu: isMenuEnabled ? (event) => openContextMenuFor(row, rowIndex, rowKey, event) : void 0,
+			...Object.fromEntries(Object.entries(extra?.mods ?? {}).filter(([, active]) => active).map(([name]) => [`data-${name}`, ""]))
+		};
+	}
+	function renderRow(row, rowIndex, isVirtual = false) {
+		const { height, ...rowProps } = getRowElementProps(row, rowIndex);
+		return /* @__PURE__ */ jsx(TableRow, {
+			rowKey: getRowKey(row, rowIndex),
+			rowProps,
+			height,
+			index: isVirtual ? rowIndex : void 0,
+			measureRef: isVirtual ? virtualizer.measureElement : void 0,
+			dragState: isReorderable ? dragState : void 0,
+			dropState: isReorderable ? dropState : void 0,
+			children: renderRowCells(row, rowIndex)
+		}, rowProps["data-key"]);
+	}
+	function renderSpacerRow(height, position) {
+		if (height <= 0) return null;
+		return /* @__PURE__ */ jsx("tr", {
+			"aria-hidden": "true",
+			"data-spacer": position,
+			children: /* @__PURE__ */ jsx("td", {
+				colSpan: Math.max(columnCount, 1),
+				style: { height }
+			})
+		});
+	}
+	/**
+	* A row, preceded by the line showing a drop above it — and followed by one
+	* for the very last row, which has nothing after it to carry a "before".
+	*
+	* The indicators render nothing unless a drag is in flight, so a table that
+	* is merely *capable* of dragging keeps its ordinary structure.
+	*/
+	function withDropIndicators(row, index, isVirtual = false) {
+		const rowKey = getRowKey(row, index);
+		const rowNode = renderRow(row, index, isVirtual);
+		if (!isReorderable || !dropState) return rowNode;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(TableRowDropIndicator, {
+				rowKey,
+				dropPosition: "before",
+				dropState,
+				columnCount
+			}),
+			rowNode,
+			index === rows.length - 1 ? /* @__PURE__ */ jsx(TableRowDropIndicator, {
+				rowKey,
+				dropPosition: "after",
+				dropState,
+				columnCount
+			}) : null
+		] }, `row-${String(rowKey)}`);
+	}
+	const hasRows = rows.length > 0;
+	const isStale = isLoading && hasRows && loadingIndicator === "overlay";
+	const showSkeleton = isLoading && loadingIndicator !== "none" && (!hasRows || loadingIndicator === "skeleton");
+	const showBlank = isLoading && !hasRows && loadingIndicator === "none";
+	const shouldVirtualize = hasRows && error == null && (isVirtualized === true || isVirtualized === "auto" && rows.length > virtualizeThreshold);
+	const rowsRef = useRef(rows);
+	rowsRef.current = rows;
+	const virtualizer = useVirtualizer({
+		count: shouldVirtualize ? rows.length : 0,
+		getScrollElement: () => scrollerRef.current,
+		getItemKey: (index) => String(getRowKey(rowsRef.current[index], index)),
+		estimateSize: () => (rowHeight ?? ESTIMATED_ROW_HEIGHT[size ?? "medium"]) + 1,
+		measureElement: (element) => element.getBoundingClientRect().height,
+		overscan
+	});
+	const scrollability = useScrollability(scrollerEl);
+	/**
+	* Roving tabindex over the rows, so a reorderable table can be operated from
+	* the keyboard at all.
+	*
+	* React Aria's `dragProps` already describe "press Enter to start dragging"
+	* and implement the whole keyboard drag — but a `<tr>` is not focusable, so
+	* without this the description is announced for a row nobody can reach. One
+	* tab stop for the grid, arrows to move within it, matching how every other
+	* collection in the kit behaves.
+	*/
+	const [focusedRowIndex, setFocusedRowIndex] = useState(0);
+	const [isRangeDragging, setIsRangeDragging] = useState(false);
+	useEffect(() => {
+		if (!isRangeDragging) return;
+		const end = () => {
+			if (cellSelection) cellSelection.isDraggingRef.current = false;
+			setIsRangeDragging(false);
+		};
+		window.addEventListener("pointerup", end);
+		window.addEventListener("pointercancel", end);
+		return () => {
+			window.removeEventListener("pointerup", end);
+			window.removeEventListener("pointercancel", end);
+		};
+	}, [isRangeDragging, cellSelection]);
+	const moveRowFocus = useEvent((from, delta) => {
+		const current = from.closest("tr[data-element=\"Row\"]");
+		const all = Array.from(scrollerRef.current?.querySelectorAll("tbody tr[data-element=\"Row\"]:not([data-placeholder])") ?? []);
+		if (!all.length) return false;
+		const index = current ? all.indexOf(current) : -1;
+		const next = Math.min(Math.max((index === -1 ? focusedRowIndex : index) + delta, 0), all.length - 1);
+		setFocusedRowIndex(next);
+		all[next]?.focus();
+		return true;
+	});
+	const sentinelRef = useRef(null);
+	const onLoadMoreEvent = useEvent(() => onLoadMore?.());
+	useEffect(() => {
+		const sentinel = sentinelRef.current;
+		if (!onLoadMore || !hasMore || isLoadingMore || !scrollerEl || !sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) onLoadMoreEvent();
+		}, {
+			root: scrollerEl,
+			rootMargin: `0px 0px ${loadMoreMargin}px 0px`
+		});
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		onLoadMore,
+		hasMore,
+		isLoadingMore,
+		scrollerEl,
+		loadMoreMargin,
+		onLoadMoreEvent,
+		rows.length
+	]);
+	const contextMenu = useContextMenu(__Menu, { placement: "bottom start" });
+	const isMenuEnabled = rowMenu != null && rowContextMenu !== false;
+	function resolveRowMenu(row, rowIndex, rowKey) {
+		if (!rowMenu) return null;
+		return rowMenu(row, {
+			row,
+			rowKey,
+			rowIndex,
+			section: "body",
+			isSelected: selection?.isSelected(rowKey) ?? false,
+			isFocused: false,
+			isDropTarget: false
+		});
+	}
+	function menuActionHandler(row, rowKey, closeAfter) {
+		return (action) => {
+			onRowMenuAction?.(normalizeMenuAction(action), row, rowKey);
+			if (closeAfter) contextMenu.close();
+		};
+	}
+	const openContextMenuFor = useEvent((row, rowIndex, rowKey, event) => {
+		const items = resolveRowMenu(row, rowIndex, rowKey);
+		if (isMenuEmpty(items)) return;
+		event.preventDefault();
+		contextMenu.open({
+			children: items,
+			onAction: menuActionHandler(row, rowKey, true)
+		}, void 0, "clientX" in event.nativeEvent ? event.nativeEvent : void 0);
+	});
+	/** Resolves the row a pointer or keyboard event landed in. */
+	function rowFromEvent(target) {
+		const element = target?.closest?.("tr[data-element=\"Row\"][data-key]");
+		if (!element) return null;
+		const index = Number(element.getAttribute("data-row-index"));
+		if (!Number.isInteger(index)) return null;
+		const row = rows[index];
+		return row === void 0 ? null : {
+			row,
+			index
+		};
+	}
+	const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+	const paddingTop = virtualItems.length ? virtualItems[0].start : 0;
+	const paddingBottom = virtualItems.length ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
+	const colGroup = /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx("col", { style: column.width != null ? { width: column.width } : void 0 }, column.key)) });
+	const headerRow = isHeaderHidden ? null : /* @__PURE__ */ jsx("tr", {
+		"data-element": "HeadRow",
+		role: "row",
+		"aria-rowindex": 1,
+		children: columns.map(renderHeaderCell)
+	});
+	const tableProps = {
+		"data-element": "Table",
+		role: "grid",
+		"aria-label": ariaLabel,
+		"aria-busy": isLoading || void 0,
+		"aria-rowcount": headerRowCount + rows.length + (pinnedTopRows?.length ?? 0) + (pinnedBottomRows?.length ?? 0),
+		"aria-colcount": columnCount,
+		"aria-multiselectable": selection?.selectionMode === "multiple" ? true : void 0
+	};
+	let bodyContent;
+	if (error != null) bodyContent = renderStateRow(error);
+	else if (showSkeleton) bodyContent = renderSkeletonRows();
+	else if (showBlank) bodyContent = null;
+	else if (!hasRows) bodyContent = renderStateRow(isFiltered ? noResultsLabel : emptyLabel);
+	else if (shouldVirtualize) bodyContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		renderSpacerRow(paddingTop, "top"),
+		virtualItems.map((v) => withDropIndicators(rows[v.index], v.index, true)),
+		renderSpacerRow(paddingBottom, "bottom")
+	] });
+	else bodyContent = rows.map((row, index) => withDropIndicators(row, index));
+	return /* @__PURE__ */ jsxs(TableElement, {
+		ref: rootRef,
+		qa: qa || "Table",
+		styles: mergedStyles,
+		mods: {
+			size,
+			shape,
+			"sticky-header": isHeaderSticky,
+			"column-dividers": hasColumnDividers,
+			"range-dragging": isRangeDragging,
+			"has-footer": footer != null,
+			"scroll-x": scrollability.x,
+			"scroll-y": scrollability.y,
+			stale: isStale,
+			...mods
+		},
+		children: [
+			toolbar,
+			/* @__PURE__ */ jsx("div", {
+				"data-element": "Scroller",
+				ref: handleScrollerRef,
+				tabIndex: cellSelection?.isEnabled ? -1 : void 0,
+				onKeyDown: (event) => {
+					if (event.key === "F10" && event.shiftKey && isMenuEnabled) {
+						const found = rowFromEvent(event.target);
+						if (found) {
+							event.stopPropagation();
+							openContextMenuFor(found.row, found.index, getRowKey(found.row, found.index), event);
+						}
+						return;
+					}
+					if (event.key === "Enter" && onRowAction) {
+						const found = rowFromEvent(event.target);
+						if (found && !event.target.closest("a, button, input, select, textarea, [role=\"button\"]")) onRowAction(found.row, getRowKey(found.row, found.index));
+						return;
+					}
+					if (isReorderable && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+						if (dragState?.draggingKeys?.size) return;
+						if (moveRowFocus(event.target, event.key === "ArrowDown" ? 1 : -1)) event.preventDefault();
+						return;
+					}
+					if (event.key === "Escape") {
+						if (cellSelection?.range) {
+							event.stopPropagation();
+							cellSelection.clear();
+							return;
+						}
+						if (selection?.isEnabled && selection.selectedCount > 0) {
+							event.stopPropagation();
+							selection.clearSelection();
+						}
+					}
+				},
+				onCopy: (event) => {
+					if (!cellSelection?.range) return;
+					const text = cellSelection.getSelectionText((column, row, rowIndex) => column.isStructural ? "" : getColumnText(column, row, rowIndex) ?? "");
+					if (!text) return;
+					event.preventDefault();
+					event.clipboardData.setData("text/plain", text);
+					event.clipboardData.setData("text/html", toClipboardHtml(text));
+					toast.success({
+						title: t("itemTable.copiedToClipboard", "Copied to clipboard"),
+						description: t("itemTable.copiedCells", "{{count}} cells copied", { count: cellSelection.cellCount })
+					});
+				},
+				children: /* @__PURE__ */ jsxs("table", {
+					...tableProps,
+					style: layout.totalWidth != null ? { width: layout.totalWidth } : void 0,
+					children: [
+						colGroup,
+						isHeaderHidden ? null : /* @__PURE__ */ jsx("thead", {
+							"data-element": "Head",
+							children: headerRow
+						}),
+						/* @__PURE__ */ jsxs("tbody", {
+							"data-element": "Body",
+							...collectionProps,
+							ref: bodyRef,
+							children: [
+								pinnedTopRows?.map((row, index) => renderPinnedRow(row, index, "top")),
+								bodyContent,
+								pinnedBottomRows?.map((row, index) => renderPinnedRow(row, index, "bottom")),
+								isLoadingMore ? renderSkeletonRows(Math.min(skeletonRowCount, LOAD_MORE_SKELETON_ROWS), "load-more") : null,
+								onLoadMore && hasRows ? /* @__PURE__ */ jsx("tr", {
+									"data-sentinel": "",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ jsx("td", {
+										colSpan: Math.max(columnCount, 1),
+										style: {
+											height: 1,
+											padding: 0,
+											border: 0
+										},
+										children: /* @__PURE__ */ jsx("div", {
+											ref: sentinelRef,
+											style: { height: 1 }
+										})
+									})
+								}) : null
+							]
+						})
+					]
+				})
+			}),
+			isStale ? /* @__PURE__ */ jsx("div", {
+				"data-element": "Overlay",
+				role: "status",
+				children: /* @__PURE__ */ jsx(LoadingAnimation, { size: "small" })
+			}) : null,
+			overlay,
+			contextMenu.rendered,
+			footer
+		]
+	});
+}
+
+//#endregion
+export { TableView };
+//# sourceMappingURL=TableView.js.map