@cube-dev/ui-kit 0.0.0-canary-2419763 → 0.0.0-canary-0bb3638

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

@@ -1,867 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2419763 | 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, rowIndexOffset = 0, totalRowCount, 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 pinnedTopCount = pinnedTopRows?.length ?? 0;
-	const pinnedBottomCount = pinnedBottomRows?.length ?? 0;
-	const bodyRowCount = Math.max(totalRowCount ?? rows.length, rowIndexOffset + rows.length);
-	/** 1-based `aria-rowindex` for the i-th body row of the current page. */
-	const bodyRowIndex = (rowIndex) => headerRowCount + pinnedTopCount + rowIndexOffset + rowIndex + 1;
-	/** 1-based `aria-rowindex` for the i-th pinned row at `edge`. */
-	const pinnedRowIndex = (index, edge) => edge === "top" ? headerRowCount + index + 1 : headerRowCount + pinnedTopCount + bodyRowCount + index + 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": bodyRowIndex(rowIndex),
-			"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",
-			"aria-rowindex": pinnedRowIndex(index, edge),
-			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": bodyRowIndex(rowIndex),
-			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 + pinnedTopCount + bodyRowCount + pinnedBottomCount,
-		"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