@cube-dev/ui-kit 0.156.0 → 0.157.0

package/dist/components/data/ItemTable/types.d.ts

@@ -0,0 +1,327 @@
+
+import { NavigateArg } from "../../../providers/navigation.types.js";
+import { CubeItemActionProps } from "../../actions/ItemAction/ItemAction.js";
+import { SizeName } from "../../../tokens/sizes.js";
+import { CubeTablePageInfo } from "../../navigation/Pagination/types.js";
+import "../../navigation/Pagination/index.js";
+import "../../../tokens/index.js";
+import { CubeTableColumn, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableSelectAllMode, CubeTableSelectionMode, CubeTableSort } from "../TableBase/types.js";
+import { CubeTableRowRenderProps } from "../TableBase/TableView.js";
+import { CubeTablePersistKey } from "../TableBase/use-table-storage.js";
+import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+import { Key as Key$1 } from "@react-types/shared";
+
+//#region src/components/data/ItemTable/types.d.ts
+type CubeItemTableColumn<T = any> = CubeTableColumn<T>;
+interface CubeItemTableProps<T = any> extends BaseProps, ContainerStyleProps {
+  data: readonly T[];
+  columns: CubeItemTableColumn<T>[];
+  /** Property used as the row key. @default 'id' */
+  rowKey?: string;
+  /** Wins over `rowKey`. */
+  getRowKey?: (row: T, index: number) => Key$1;
+  isLoading?: boolean;
+  /**
+   * How a refresh over an existing result is presented.
+   * @default 'overlay'
+   */
+  loadingIndicator?: CubeTableLoadingIndicator;
+  /** Skeleton rows shown while loading with no data yet. @default 6 */
+  skeletonRowCount?: number;
+  /** Nothing to show at all. @default localized "No items" */
+  emptyLabel?: ReactNode;
+  /**
+   * Shown instead of `emptyLabel` when a search or filter is narrowing the
+   * data. @default localized "No results found"
+   */
+  noResultsLabel?: ReactNode;
+  /** Takes precedence over both labels. */
+  error?: ReactNode;
+  /**
+   * Selects `noResultsLabel` over `emptyLabel` when there is nothing to show.
+   * Set automatically by the built-in search; pass it explicitly when you filter
+   * `data` yourself, so an empty result still reads as "no matches" rather than
+   * "nothing exists".
+   */
+  isFiltered?: boolean;
+  /** @default 'plain' */
+  shape?: 'plain' | 'card';
+  /** @default 'medium' */
+  size?: SizeName;
+  /** Row height in px. Defaults to the height implied by `size`. */
+  rowHeight?: number;
+  /** Header height in px. Defaults to `rowHeight`. */
+  headerHeight?: number;
+  /** Alternating row background. @default false */
+  /**
+   * Slide rows to their new positions when the sort changes, instead of
+   * teleporting them. @default true
+   */
+  isRowMoveAnimated?: boolean;
+  isStriped?: boolean;
+  /** @default false */
+  isHeaderHidden?: boolean;
+  /** Keep the column header pinned while the body scrolls. @default true */
+  isHeaderSticky?: boolean;
+  /** @default 'auto' — on above `virtualizeThreshold` rows; needs a bounded height. */
+  isVirtualized?: boolean | 'auto';
+  /** @default 50 */
+  virtualizeThreshold?: number;
+  /**
+   * Rows rendered beyond each edge of the viewport while virtualized. Raise it
+   * if a fast scroll shows blank rows; lower it to mount fewer at once.
+   * @default 20
+   */
+  overscan?: number;
+  /**
+   * `'client'` reorders `data` using each column's `compare` (or a locale-aware
+   * default). `'server'` never reorders — it only reflects `sort` and fires
+   * `onSortChange`. `'off'` removes the sort affordance entirely.
+   * @default 'client' when any column is sortable, else 'off'
+   */
+  sortMode?: 'client' | 'server' | 'off';
+  sort?: CubeTableSort | null;
+  defaultSort?: CubeTableSort | null;
+  onSortChange?: (sort: CubeTableSort | null) => void;
+  /**
+   * Replaces the entire toolbar row. Compose it from `ItemTable.Search` and
+   * friends, which read the table's state from context.
+   */
+  toolbar?: ReactNode;
+  /** Render the built-in search input in the toolbar. @default false */
+  isSearchable?: boolean;
+  /**
+   * `'client'` filters `data` with the built-in matcher. `'server'` never
+   * filters — it only reports the term through `onSearchChange`.
+   * @default 'client'
+   */
+  searchMode?: 'client' | 'server';
+  searchPlaceholder?: string;
+  /**
+   * Controlled term. Works with `isSearchable={false}` too, so a page can render
+   * its own input anywhere and still drive the table's matcher.
+   */
+  searchValue?: string;
+  defaultSearchValue?: string;
+  onSearchChange?: (value: string) => void;
+  /** Debounces the filter and the callback in BOTH modes. @default 500 */
+  searchDelay?: number;
+  /**
+   * Replaces the default client matcher, which tests each searchable column's
+   * display text (`format?.(value) ?? String(getValue(row))`).
+   */
+  searchFilter?: (row: T, query: string) => boolean;
+  /** Left group, after the search input. */
+  filters?: ReactNode;
+  /** Right group. Arbitrary JSX — Buttons, ButtonGroups, anything. */
+  actions?: ReactNode;
+  onRefresh?: () => void;
+  /**
+   * `'client'` slices `data` itself. `'server'` never slices — it reflects
+   * `page` and reports changes. `'off'` renders no pagination.
+   * @default 'client'
+   */
+  paginationMode?: 'client' | 'server' | 'infinite' | 'off';
+  pageSize?: number;
+  defaultPageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+  /** @default [10, 20, 50, 100, 500] */
+  pageSizeOptions?: number[];
+  /** Controlled page, 1-based. */
+  page?: number;
+  defaultPage?: number;
+  onPageChange?: (page: number) => void;
+  /**
+   * `paginationMode="infinite"` replaces the page control with load-on-scroll.
+   * The table never slices in that mode — `data` is the accumulated list.
+   */
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  /** How far before the end to prefetch, in px. @default 200 */
+  loadMoreMargin?: number;
+  /** Server mode: total rows across all pages. Preferred over `totalPages`. */
+  total?: number;
+  totalPages?: number;
+  /** Server mode with an unknown total. */
+  hasNextPage?: boolean;
+  /** Footer summary. `true` → localized "1–50 of 1,204". @default true */
+  summary?: boolean | ((info: CubeTablePageInfo) => ReactNode);
+  /** Replaces the entire footer row. */
+  footer?: ReactNode;
+  /**
+   * First-class footer slots. These are what a "load all results" button or a
+   * row-count label go into — no DOM injection required.
+   */
+  footerStart?: ReactNode;
+  footerCenter?: ReactNode;
+  footerEnd?: ReactNode;
+  /** @default 'none' */
+  selectionMode?: CubeTableSelectionMode;
+  /** Controlled selection. `'all'` is a sentinel the consumer interprets. */
+  selectedKeys?: Key$1[] | 'all';
+  defaultSelectedKeys?: Key$1[] | 'all';
+  /**
+   * `rows` holds only the rows the client has loaded — with the `'all'`
+   * sentinel that is necessarily fewer than the selection denotes.
+   */
+  onSelectionChange?: (keys: Key$1[] | 'all', rows: T[]) => void;
+  /**
+   * What the header checkbox acts on.
+   * @default 'page'
+   */
+  selectAllMode?: CubeTableSelectAllMode;
+  /** The row stays focusable and clickable; only its checkbox goes inert. */
+  isRowSelectable?: (row: T) => boolean;
+  /** Explains why a row cannot be selected, on its disabled checkbox. */
+  selectionTooltip?: string | ((row: T) => string | undefined);
+  /** Rows that cannot be interacted with at all. */
+  disabledKeys?: Key$1[];
+  /**
+   * Actions offered while rows are selected. Supplying any implies
+   * `selectionMode="multiple"` — a bulk action with no way to select is a
+   * contradiction, not a configuration.
+   */
+  bulkActions?: CubeTableBulkAction<T>[];
+  /**
+   * `floating` centres the bar over the body without changing the table's
+   * height; `toolbar` replaces the `actions` group while a selection exists.
+   * @default 'floating'
+   */
+  bulkBarPlacement?: 'floating' | 'toolbar';
+  bulkBarStyles?: Styles;
+  /**
+   * Turns the row-header cell into a stretched link covering the whole row, so
+   * ⌘-click, middle-click and "Open in new tab" work natively. Return
+   * `undefined` for a row that should not navigate.
+   */
+  rowLink?: (row: T, index: number) => NavigateArg | undefined;
+  /**
+   * Non-navigational activation: Enter, or a click when there is no `rowLink`.
+   * A click on an interactive cell control never reaches it.
+   */
+  onRowAction?: (row: T, key: Key$1) => void;
+  /** `Menu.Item` children. Return `null` to give a row no menu. */
+  rowMenu?: ReactNode | ((row: T, ctx: CubeTableRowContext<T>) => ReactNode | null);
+  /**
+   * Where the menu is exposed, matching `Tree#contextMenu`:
+   * - `false` — no menu, even when `rowMenu` is set.
+   * - `true` — a `⋮` trigger column **and** right-click / Shift+F10.
+   * - `'context-only'` — right-click / Shift+F10 only, no trigger column.
+   * @default false
+   */
+  rowContextMenu?: boolean | 'context-only';
+  onRowMenuAction?: (action: string, row: T, key: Key$1) => void;
+  rowMenuTriggerProps?: Partial<CubeItemActionProps>;
+  /**
+   * Per-row visuals. Note the deliberate three-way split: `disabledKeys` makes
+   * a row non-interactive, `isRowSelectable` leaves it interactive but its
+   * checkbox inert, and `isDimmed` here is purely visual.
+   */
+  getRowProps?: (ctx: CubeTableRowContext<T>) => CubeTableRowRenderProps | undefined;
+  /** The root. Sub-elements reach every internal part of the table. */
+  styles?: Styles;
+  /** The column header ROW. The top chrome is `toolbarStyles`. */
+  headerStyles?: Styles;
+  headerCellStyles?: Styles;
+  /**
+   * Typography preset for the column header. Defaults to `'c3'` — the small
+   * uppercase caption the Cloud list tables use. Pass `'t3m'` for body-sized
+   * headers, or override anything else through `headerCellStyles`.
+   */
+  headerPreset?: string;
+  toolbarStyles?: Styles;
+  searchStyles?: Styles;
+  footerStyles?: Styles;
+  /** Lets rows be dragged into a new order. */
+  isReorderable?: boolean;
+  /**
+   * The new order, and the rows in it. Called with every row key, not just the
+   * moved one, so the consumer can persist the order directly.
+   */
+  onReorder?: (keys: Key$1[], rows: T[]) => void;
+  /**
+   * Dropping rows *onto* a row — a workbook into a folder.
+   *
+   * Independent of `isReorderable`, and composable with it: `isTarget` decides
+   * per row whether a drop lands *on* it, and anything that says no falls
+   * through to reordering. Cloud has to treat the two as mutually exclusive
+   * because ag-grid cannot express both; that limitation does not carry over.
+   *
+   * Replaces Cloud's `isDropOnRowEnabled`, `isDropTarget`, `isDropOnRowAllowed`
+   * and `onDropOnRow`, plus the two ag-grid workarounds beside them
+   * (`dropTargetRowKeyRef`, `dropTargetRefreshColumnKey`) that exist only
+   * because ag-grid cannot re-render one cell from React state.
+   */
+  dropOnRow?: {
+    /** Which rows can receive a drop. */isTarget: (row: T) => boolean; /** Pair-specific guard, e.g. a folder cannot be dropped into itself. */
+    isAllowed?: (dragged: T[], target: T) => boolean;
+    onDrop: (dragged: T[], target: T) => void | Promise<void>;
+  };
+  /**
+   * What the cursor drags. One row shows its icon and label; several show a
+   * count, which is the only honest thing a single chip can say about them.
+   *
+   * Without it the browser drags a screenshot of the row, and a full-width
+   * table row makes a page-wide slab. Replaces Cloud's `getItemDragInfo`, which
+   * had to re-inject its icon into ag-grid's ghost element on every drag tick
+   * because ag-grid overwrites the ghost whenever the pointer leaves the grid.
+   */
+  getItemDragInfo?: (row: T) => {
+    label: ReactNode;
+    icon?: ReactNode;
+  };
+  /** Default for every column; a column overrides with `isResizable`. */
+  isResizable?: boolean;
+  /** Controlled widths, keyed by column key. */
+  columnWidths?: Record<string, number>;
+  defaultColumnWidths?: Record<string, number>;
+  /** Fires once the drag or key press finishes, not on every pixel. */
+  onColumnResize?: (columnKey: string, width: number, all: Record<string, number>) => void;
+  /**
+   * Persists the table's own state under `cube-ui-kit:table:${storageKey}`.
+   * Controlled state is never stored — it belongs to the page.
+   */
+  storageKey?: string;
+  /**
+   * Hides the pagination control when it cannot do anything: a single page
+   * whose total even the smallest `pageSizeOptions` entry would not split.
+   * The footer itself still renders if any slot has content.
+   * @default true
+   */
+  autoHidePagination?: boolean;
+  /** @default ['pageSize', 'columnWidths'] */
+  persist?: CubeTablePersistKey[];
+  bodyStyles?: Styles;
+  rowStyles?: Styles;
+  cellStyles?: Styles;
+  ariaLabel?: string;
+  qa?: string;
+  mods?: Record<string, boolean | undefined>;
+}
+interface CubeTableBulkAction<T = any> {
+  key: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  /**
+   * `rows` holds the loaded rows for the selection. `setLoading` drives this
+   * action's own spinner, so one slow request does not freeze the others.
+   */
+  onAction: (rows: T[], ctx: {
+    setLoading: (isLoading: boolean) => void;
+  }) => void | Promise<void>;
+  isDisabled?: (rows: T[]) => boolean;
+  disabledTooltip?: string;
+  type?: 'primary' | 'outline' | 'clear';
+  theme?: 'default' | 'danger';
+  /**
+   * Clears the selection once the action resolves. On by default — the rows an
+   * action just deleted or moved are usually gone.
+   * @default true
+   */
+  deselectAfter?: boolean;
+}
+//#endregion
+export { CubeItemTableColumn, CubeItemTableProps, CubeTableBulkAction };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,70 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMove } from "react-aria";
+
+//#region src/components/data/TableBase/ColumnResizer.tsx
+/**
+* The grab handle on a column's trailing edge.
+*
+* `useMove` rather than raw pointer events: it normalises pointer, touch and
+* **keyboard** into one stream, so arrow keys resize without any extra work —
+* an affordance ag-grid never gave Cloud. The same hook drives `Board`'s widget
+* resizing, so the interaction model matches.
+*/
+function ColumnResizer(props) {
+	const { column, label, onResize, onResizeEnd } = props;
+	const startWidthRef = useRef(0);
+	const widthRef = useRef(0);
+	const clamp = useEvent((width) => {
+		const min = column.minWidth;
+		const max = column.maxWidth;
+		return Math.max(min, max == null ? width : Math.min(width, max));
+	});
+	const { moveProps } = useMove({
+		onMoveStart() {
+			startWidthRef.current = column.width ?? column.minWidth;
+			widthRef.current = startWidthRef.current;
+		},
+		onMove(event) {
+			const step = event.pointerType === "keyboard" ? 8 : 1;
+			widthRef.current = clamp(widthRef.current + event.deltaX * step);
+			onResize(column.key, widthRef.current);
+		},
+		onMoveEnd() {
+			onResizeEnd(column.key);
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps$1(moveProps, {
+			onClick(event) {
+				event.stopPropagation();
+			},
+			onKeyDown(event) {
+				if (event.key !== "Home" && event.key !== "End") {
+					event.stopPropagation();
+					return;
+				}
+				event.preventDefault();
+				event.stopPropagation();
+				onResize(column.key, event.key === "Home" ? column.minWidth : column.maxWidth ?? 1e3);
+				onResizeEnd(column.key);
+			}
+		}),
+		"data-element": "Resizer",
+		role: "separator",
+		tabIndex: 0,
+		"aria-label": label,
+		"aria-orientation": "vertical",
+		"aria-valuenow": column.width ?? void 0,
+		"aria-valuemin": column.minWidth,
+		"aria-valuemax": column.maxWidth ?? void 0,
+		children: /* @__PURE__ */ jsx("div", { "data-element": "ResizerLine" })
+	});
+}
+
+//#endregion
+export { ColumnResizer };
+//# sourceMappingURL=ColumnResizer.js.map

package/dist/components/data/TableBase/ColumnResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/ColumnResizer.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMove } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { mergeProps } from '../../../utils/react';\n\nimport type { CubeResolvedColumn } from './types';\n\nexport interface ColumnResizerProps<T> {\n  column: CubeResolvedColumn<T>;\n  label: string;\n  /** Live during the drag, so the column follows the pointer. */\n  onResize: (columnKey: string, width: number) => void;\n  /** Once, when the drag or key press finishes. For persistence and callbacks. */\n  onResizeEnd: (columnKey: string) => void;\n}\n\n/**\n * The grab handle on a column's trailing edge.\n *\n * `useMove` rather than raw pointer events: it normalises pointer, touch and\n * **keyboard** into one stream, so arrow keys resize without any extra work —\n * an affordance ag-grid never gave Cloud. The same hook drives `Board`'s widget\n * resizing, so the interaction model matches.\n */\nexport function ColumnResizer<T>(props: ColumnResizerProps<T>) {\n  const { column, label, onResize, onResizeEnd } = props;\n\n  // The width the drag started from. Deltas are relative to it, so a slow drag\n  // does not accumulate rounding the way summing per-move widths would.\n  const startWidthRef = useRef(0);\n  const widthRef = useRef(0);\n\n  const clamp = useEvent((width: number) => {\n    const min = column.minWidth;\n    const max = column.maxWidth;\n\n    return Math.max(min, max == null ? width : Math.min(width, max));\n  });\n\n  const { moveProps } = useMove({\n    onMoveStart() {\n      startWidthRef.current = column.width ?? column.minWidth;\n      widthRef.current = startWidthRef.current;\n    },\n    onMove(event) {\n      // `pointer` moves carry deltas in px; keyboard moves carry ±1 per press,\n      // which would be an imperceptible step, so they are scaled to a grid unit.\n      const step = event.pointerType === 'keyboard' ? 8 : 1;\n\n      widthRef.current = clamp(widthRef.current + event.deltaX * step);\n      onResize(column.key, widthRef.current);\n    },\n    onMoveEnd() {\n      onResizeEnd(column.key);\n    },\n  });\n\n  // `mergeProps`, not spread-then-override: `useMove` implements the keyboard\n  // half of the interaction through its own `onKeyDown`, and a plain `onKeyDown`\n  // prop after the spread would silently replace it — leaving the handle\n  // draggable but not operable from the keyboard.\n  const handlerProps = mergeProps(moveProps, {\n    // The header cell sorts on click; a press on the handle is not a sort.\n    onClick(event: { stopPropagation: () => void }) {\n      event.stopPropagation();\n    },\n    onKeyDown(event: {\n      key: string;\n      preventDefault: () => void;\n      stopPropagation: () => void;\n    }) {\n      // `useMove` claims the arrows. Home/End are ours, and they are the\n      // fastest way to reach the extremes.\n      if (event.key !== 'Home' && event.key !== 'End') {\n        event.stopPropagation();\n\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      onResize(\n        column.key,\n        event.key === 'Home' ? column.minWidth : column.maxWidth ?? 1000,\n      );\n      onResizeEnd(column.key);\n    },\n  });\n\n  return (\n    <div\n      {...handlerProps}\n      data-element=\"Resizer\"\n      // A separator is the role a resize handle takes when it splits two\n      // regions, and it is what makes the value readable to a screen reader.\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-orientation=\"vertical\"\n      aria-valuenow={column.width ?? undefined}\n      aria-valuemin={column.minWidth}\n      aria-valuemax={column.maxWidth ?? undefined}\n    >\n      <div data-element=\"ResizerLine\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,SAAgB,cAAiB,OAA8B;CAC7D,MAAM,EAAE,QAAQ,OAAO,UAAU,gBAAgB;CAIjD,MAAM,gBAAgB,OAAO,EAAE;CAC/B,MAAM,WAAW,OAAO,EAAE;CAE1B,MAAM,QAAQ,UAAU,UAAkB;EACxC,MAAM,MAAM,OAAO;EACnB,MAAM,MAAM,OAAO;AAEnB,SAAO,KAAK,IAAI,KAAK,OAAO,OAAO,QAAQ,KAAK,IAAI,OAAO,IAAI,CAAC;GAChE;CAEF,MAAM,EAAE,cAAc,QAAQ;EAC5B,cAAc;AACZ,iBAAc,UAAU,OAAO,SAAS,OAAO;AAC/C,YAAS,UAAU,cAAc;;EAEnC,OAAO,OAAO;GAGZ,MAAM,OAAO,MAAM,gBAAgB,aAAa,IAAI;AAEpD,YAAS,UAAU,MAAM,SAAS,UAAU,MAAM,SAAS,KAAK;AAChE,YAAS,OAAO,KAAK,SAAS,QAAQ;;EAExC,YAAY;AACV,eAAY,OAAO,IAAI;;EAE1B,CAAC;AAkCF,QACE,oBAAC;EACC,GA9BiBA,aAAW,WAAW;GAEzC,QAAQ,OAAwC;AAC9C,UAAM,iBAAiB;;GAEzB,UAAU,OAIP;AAGD,QAAI,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;AAC/C,WAAM,iBAAiB;AAEvB;;AAGF,UAAM,gBAAgB;AACtB,UAAM,iBAAiB;AACvB,aACE,OAAO,KACP,MAAM,QAAQ,SAAS,OAAO,WAAW,OAAO,YAAY,IAC7D;AACD,gBAAY,OAAO,IAAI;;GAE1B,CAAC;EAKE,gBAAa;EAGb,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAiB;EACjB,iBAAe,OAAO,SAAS;EAC/B,iBAAe,OAAO;EACtB,iBAAe,OAAO,YAAY;YAElC,oBAAC,SAAI,gBAAa,gBAAgB;GAC9B"}

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

@@ -0,0 +1,99 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+//#region src/components/data/TableBase/RowCollection.ts
+/**
+* A `Collection<Node<T>>` over a plain row array.
+*
+* React Aria's selection primitives — `SelectionManager`, `useSelectableItem`,
+* `useSelectableCollection` — need a collection, but the only thing they ask of
+* it is key order and lookup. `useTableState` would build a `Node` per header
+* row, per column, per body row *and per cell*, which a table whose page size
+* goes to 500 (and whose "Load all results" removes the cap entirely) cannot
+* afford.
+*
+* So the array is the collection. Nodes are built lazily on `getItem` and
+* memoized, which means a 100k-row table allocates nodes only for the handful
+* of keys selection actually touches.
+*/
+var RowCollection = class {
+	rows;
+	keys;
+	indexByKey;
+	nodeCache = /* @__PURE__ */ new Map();
+	disabledKeys;
+	constructor(rows, getKey, disabledKeys = /* @__PURE__ */ new Set()) {
+		this.rows = rows;
+		this.keys = rows.map(getKey);
+		this.disabledKeys = disabledKeys;
+		this.indexByKey = /* @__PURE__ */ new Map();
+		this.keys.forEach((key, index) => {
+			if (!this.indexByKey.has(key)) this.indexByKey.set(key, index);
+		});
+	}
+	get size() {
+		return this.rows.length;
+	}
+	getKeys() {
+		return this.keys;
+	}
+	getItem(key) {
+		const index = this.indexByKey.get(key);
+		if (index == null) return null;
+		const cached = this.nodeCache.get(key);
+		if (cached) return cached;
+		const node = {
+			type: "item",
+			key,
+			value: this.rows[index],
+			level: 0,
+			hasChildNodes: false,
+			childNodes: [],
+			rendered: null,
+			textValue: "",
+			index,
+			"aria-label": void 0,
+			parentKey: null,
+			prevKey: index > 0 ? this.keys[index - 1] : null,
+			nextKey: index < this.keys.length - 1 ? this.keys[index + 1] : null
+		};
+		this.nodeCache.set(key, node);
+		return node;
+	}
+	at(index) {
+		const key = this.keys[index];
+		return key == null ? null : this.getItem(key);
+	}
+	getKeyBefore(key) {
+		const index = this.indexByKey.get(key);
+		return index == null || index === 0 ? null : this.keys[index - 1];
+	}
+	getKeyAfter(key) {
+		const index = this.indexByKey.get(key);
+		return index == null || index >= this.keys.length - 1 ? null : this.keys[index + 1];
+	}
+	getFirstKey() {
+		return this.keys[0] ?? null;
+	}
+	getLastKey() {
+		return this.keys[this.keys.length - 1] ?? null;
+	}
+	getChildren() {
+		return [];
+	}
+	/** Not part of `Collection`, but selection asks about it constantly. */
+	isDisabled(key) {
+		return this.disabledKeys.has(key);
+	}
+	indexOf(key) {
+		return this.indexByKey.get(key) ?? -1;
+	}
+	*[Symbol.iterator]() {
+		for (const key of this.keys) {
+			const node = this.getItem(key);
+			if (node) yield node;
+		}
+	}
+};
+
+//#endregion
+export { RowCollection };
+//# sourceMappingURL=RowCollection.js.map

package/dist/components/data/TableBase/RowCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowCollection.js","names":[],"sources":["../../../../src/components/data/TableBase/RowCollection.ts"],"sourcesContent":["import type { Collection, Key, Node } from '@react-types/shared';\n\n/**\n * A `Collection<Node<T>>` over a plain row array.\n *\n * React Aria's selection primitives — `SelectionManager`, `useSelectableItem`,\n * `useSelectableCollection` — need a collection, but the only thing they ask of\n * it is key order and lookup. `useTableState` would build a `Node` per header\n * row, per column, per body row *and per cell*, which a table whose page size\n * goes to 500 (and whose \"Load all results\" removes the cap entirely) cannot\n * afford.\n *\n * So the array is the collection. Nodes are built lazily on `getItem` and\n * memoized, which means a 100k-row table allocates nodes only for the handful\n * of keys selection actually touches.\n */\nexport class RowCollection<T> implements Collection<Node<T>> {\n  private rows: readonly T[];\n  private keys: Key[];\n  private indexByKey: Map<Key, number>;\n  private nodeCache = new Map<Key, Node<T>>();\n  private disabledKeys: Set<Key>;\n\n  constructor(\n    rows: readonly T[],\n    getKey: (row: T, index: number) => Key,\n    disabledKeys: Set<Key> = new Set(),\n  ) {\n    this.rows = rows;\n    this.keys = rows.map(getKey);\n    this.disabledKeys = disabledKeys;\n    this.indexByKey = new Map();\n\n    // A duplicate key would make selection ambiguous — two rows would answer to\n    // the same identity. First occurrence wins, matching how React resolves a\n    // duplicated `key`.\n    this.keys.forEach((key, index) => {\n      if (!this.indexByKey.has(key)) this.indexByKey.set(key, index);\n    });\n  }\n\n  get size() {\n    return this.rows.length;\n  }\n\n  getKeys() {\n    return this.keys;\n  }\n\n  getItem(key: Key): Node<T> | null {\n    const index = this.indexByKey.get(key);\n\n    if (index == null) return null;\n\n    const cached = this.nodeCache.get(key);\n\n    if (cached) return cached;\n\n    const node: Node<T> = {\n      type: 'item',\n      key,\n      value: this.rows[index],\n      level: 0,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: null,\n      textValue: '',\n      index,\n      // `SelectionManager` reads this to decide whether a key can be selected\n      // at all, before `disabledBehavior` is even considered.\n      'aria-label': undefined,\n      parentKey: null,\n      prevKey: index > 0 ? this.keys[index - 1] : null,\n      nextKey: index < this.keys.length - 1 ? this.keys[index + 1] : null,\n    } as Node<T>;\n\n    this.nodeCache.set(key, node);\n\n    return node;\n  }\n\n  at(index: number): Node<T> | null {\n    const key = this.keys[index];\n\n    return key == null ? null : this.getItem(key);\n  }\n\n  getKeyBefore(key: Key): Key | null {\n    const index = this.indexByKey.get(key);\n\n    return index == null || index === 0 ? null : this.keys[index - 1];\n  }\n\n  getKeyAfter(key: Key): Key | null {\n    const index = this.indexByKey.get(key);\n\n    return index == null || index >= this.keys.length - 1\n      ? null\n      : this.keys[index + 1];\n  }\n\n  getFirstKey(): Key | null {\n    return this.keys[0] ?? null;\n  }\n\n  getLastKey(): Key | null {\n    return this.keys[this.keys.length - 1] ?? null;\n  }\n\n  getChildren(): Iterable<Node<T>> {\n    return [];\n  }\n\n  /** Not part of `Collection`, but selection asks about it constantly. */\n  isDisabled(key: Key) {\n    return this.disabledKeys.has(key);\n  }\n\n  indexOf(key: Key): number {\n    return this.indexByKey.get(key) ?? -1;\n  }\n\n  *[Symbol.iterator](): Iterator<Node<T>> {\n    for (const key of this.keys) {\n      const node = this.getItem(key);\n\n      if (node) yield node;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,gBAAb,MAA6D;CAC3D,AAAQ;CACR,AAAQ;CACR,AAAQ;CACR,AAAQ,4BAAY,IAAI,KAAmB;CAC3C,AAAQ;CAER,YACE,MACA,QACA,+BAAyB,IAAI,KAAK,EAClC;AACA,OAAK,OAAO;AACZ,OAAK,OAAO,KAAK,IAAI,OAAO;AAC5B,OAAK,eAAe;AACpB,OAAK,6BAAa,IAAI,KAAK;AAK3B,OAAK,KAAK,SAAS,KAAK,UAAU;AAChC,OAAI,CAAC,KAAK,WAAW,IAAI,IAAI,CAAE,MAAK,WAAW,IAAI,KAAK,MAAM;IAC9D;;CAGJ,IAAI,OAAO;AACT,SAAO,KAAK,KAAK;;CAGnB,UAAU;AACR,SAAO,KAAK;;CAGd,QAAQ,KAA0B;EAChC,MAAM,QAAQ,KAAK,WAAW,IAAI,IAAI;AAEtC,MAAI,SAAS,KAAM,QAAO;EAE1B,MAAM,SAAS,KAAK,UAAU,IAAI,IAAI;AAEtC,MAAI,OAAQ,QAAO;EAEnB,MAAM,OAAgB;GACpB,MAAM;GACN;GACA,OAAO,KAAK,KAAK;GACjB,OAAO;GACP,eAAe;GACf,YAAY,EAAE;GACd,UAAU;GACV,WAAW;GACX;GAGA,cAAc;GACd,WAAW;GACX,SAAS,QAAQ,IAAI,KAAK,KAAK,QAAQ,KAAK;GAC5C,SAAS,QAAQ,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ,KAAK;GAChE;AAED,OAAK,UAAU,IAAI,KAAK,KAAK;AAE7B,SAAO;;CAGT,GAAG,OAA+B;EAChC,MAAM,MAAM,KAAK,KAAK;AAEtB,SAAO,OAAO,OAAO,OAAO,KAAK,QAAQ,IAAI;;CAG/C,aAAa,KAAsB;EACjC,MAAM,QAAQ,KAAK,WAAW,IAAI,IAAI;AAEtC,SAAO,SAAS,QAAQ,UAAU,IAAI,OAAO,KAAK,KAAK,QAAQ;;CAGjE,YAAY,KAAsB;EAChC,MAAM,QAAQ,KAAK,WAAW,IAAI,IAAI;AAEtC,SAAO,SAAS,QAAQ,SAAS,KAAK,KAAK,SAAS,IAChD,OACA,KAAK,KAAK,QAAQ;;CAGxB,cAA0B;AACxB,SAAO,KAAK,KAAK,MAAM;;CAGzB,aAAyB;AACvB,SAAO,KAAK,KAAK,KAAK,KAAK,SAAS,MAAM;;CAG5C,cAAiC;AAC/B,SAAO,EAAE;;;CAIX,WAAW,KAAU;AACnB,SAAO,KAAK,aAAa,IAAI,IAAI;;CAGnC,QAAQ,KAAkB;AACxB,SAAO,KAAK,WAAW,IAAI,IAAI,IAAI;;CAGrC,EAAE,OAAO,YAA+B;AACtC,OAAK,MAAM,OAAO,KAAK,MAAM;GAC3B,MAAM,OAAO,KAAK,QAAQ,IAAI;AAE9B,OAAI,KAAM,OAAM"}

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

@@ -0,0 +1,89 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDraggableItem, useDropIndicator } from "react-aria";
+
+//#region src/components/data/TableBase/TableRow.tsx
+function Row(props) {
+	const { rowProps, height, measureRef, index, extra, children } = props;
+	return /* @__PURE__ */ jsx("tr", {
+		...rowProps,
+		...extra,
+		ref: measureRef,
+		"data-index": index,
+		style: height != null ? { height } : void 0,
+		children
+	});
+}
+/**
+* A row inside a collection that accepts drags.
+*
+* Split from the plain row so the drag hooks can be called unconditionally —
+* they are hooks, and whether a table is draggable is a prop.
+*/
+function DraggableRow(props) {
+	const { rowKey, dragState, dropState } = props;
+	const dragResult = useDraggableItem({ key: rowKey }, dragState);
+	/**
+	* Whether a drop would land *on* this row.
+	*
+	* `useDropIndicator` rather than asking `dropState.isDropTarget` directly:
+	* the state object's identity never changes as the pointer moves, so a plain
+	* read is computed once and never updates. The hook subscribes, which is what
+	* makes the highlight follow the cursor.
+	*/
+	const onRef = useRef(null);
+	const { isDropTarget: isOnTarget } = useDropIndicator({ target: {
+		type: "item",
+		key: rowKey,
+		dropPosition: "on"
+	} }, dropState, onRef);
+	return /* @__PURE__ */ jsx(Row, {
+		...props,
+		extra: {
+			...mergeProps$1(props.rowProps, dragResult.dragProps),
+			"data-draggable": "",
+			"data-dragging": dragResult.isDragging ? "" : void 0,
+			"data-drop-target": isOnTarget ? "" : void 0
+		}
+	});
+}
+function TableRow(props) {
+	return props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableRow, { ...props }) : /* @__PURE__ */ jsx(Row, { ...props });
+}
+/**
+* The line showing where a dragged row would land.
+*
+* Its own `<tr>`, because a native table cannot hold an arbitrary element
+* between two rows — the same shape `ListBox` uses with `<li>`. It renders
+* nothing at all unless a drag is in flight, so the table's normal structure is
+* untouched the rest of the time.
+*/
+function TableRowDropIndicator(props) {
+	const { rowKey, dropPosition, dropState, columnCount } = props;
+	const ref = useRef(null);
+	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target: {
+		type: "item",
+		key: rowKey,
+		dropPosition
+	} }, dropState, ref);
+	if (isHidden) return null;
+	return /* @__PURE__ */ jsx("tr", {
+		"data-element": "DropIndicatorRow",
+		children: /* @__PURE__ */ jsx("td", {
+			"data-element": "DropIndicatorCell",
+			colSpan: Math.max(columnCount, 1),
+			children: /* @__PURE__ */ jsx("div", {
+				...dropIndicatorProps,
+				ref,
+				"data-element": "DropIndicator",
+				"data-drop-target": isDropTarget ? "" : void 0
+			})
+		})
+	});
+}
+
+//#endregion
+export { TableRow, TableRowDropIndicator };
+//# sourceMappingURL=TableRow.js.map

package/dist/components/data/TableBase/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/TableRow.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useDraggableItem, useDropIndicator } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport type { Key } from '@react-types/shared';\nimport type { ReactNode, Ref } from 'react';\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n} from 'react-stately';\n\nexport interface TableRowProps {\n  rowKey: Key;\n  /** Everything the renderer already computed: mods, ARIA, handlers. */\n  rowProps: Record<string, any>;\n  height?: number;\n  /** Set on the virtualized path so the virtualizer can measure the row. */\n  measureRef?: Ref<HTMLTableRowElement>;\n  index?: number;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n  children: ReactNode;\n}\n\nfunction Row(props: TableRowProps & { extra?: Record<string, any> }) {\n  const { rowProps, height, measureRef, index, extra, children } = props;\n\n  return (\n    <tr\n      {...rowProps}\n      {...extra}\n      ref={measureRef}\n      data-index={index}\n      style={height != null ? { height } : undefined}\n    >\n      {children}\n    </tr>\n  );\n}\n\n/**\n * A row inside a collection that accepts drags.\n *\n * Split from the plain row so the drag hooks can be called unconditionally —\n * they are hooks, and whether a table is draggable is a prop.\n */\nfunction DraggableRow(props: TableRowProps) {\n  const { rowKey, dragState, dropState } = props;\n\n  const dragResult = useDraggableItem(\n    { key: rowKey },\n    dragState as DraggableCollectionState,\n  );\n\n  /**\n   * Whether a drop would land *on* this row.\n   *\n   * `useDropIndicator` rather than asking `dropState.isDropTarget` directly:\n   * the state object's identity never changes as the pointer moves, so a plain\n   * read is computed once and never updates. The hook subscribes, which is what\n   * makes the highlight follow the cursor.\n   */\n  const onRef = useRef<HTMLDivElement>(null);\n  const { isDropTarget: isOnTarget } = useDropIndicator(\n    { target: { type: 'item', key: rowKey, dropPosition: 'on' } },\n    dropState as DroppableCollectionState,\n    onRef,\n  );\n\n  return (\n    <Row\n      {...props}\n      extra={{\n        ...mergeProps(props.rowProps, dragResult.dragProps),\n        'data-draggable': '',\n        'data-dragging': dragResult.isDragging ? '' : undefined,\n        'data-drop-target': isOnTarget ? '' : undefined,\n      }}\n    />\n  );\n}\n\nexport function TableRow(props: TableRowProps) {\n  return props.dragState && props.dropState ? (\n    <DraggableRow {...props} />\n  ) : (\n    <Row {...props} />\n  );\n}\n\nexport interface TableRowDropIndicatorProps {\n  rowKey: Key;\n  dropPosition: 'before' | 'after';\n  dropState: DroppableCollectionState;\n  columnCount: number;\n}\n\n/**\n * The line showing where a dragged row would land.\n *\n * Its own `<tr>`, because a native table cannot hold an arbitrary element\n * between two rows — the same shape `ListBox` uses with `<li>`. It renders\n * nothing at all unless a drag is in flight, so the table's normal structure is\n * untouched the rest of the time.\n */\nexport function TableRowDropIndicator(props: TableRowDropIndicatorProps) {\n  const { rowKey, dropPosition, dropState, columnCount } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target: { type: 'item', key: rowKey, dropPosition } },\n    dropState,\n    ref,\n  );\n\n  if (isHidden) return null;\n\n  return (\n    <tr data-element=\"DropIndicatorRow\">\n      <td data-element=\"DropIndicatorCell\" colSpan={Math.max(columnCount, 1)}>\n        <div\n          {...dropIndicatorProps}\n          ref={ref}\n          data-element=\"DropIndicator\"\n          data-drop-target={isDropTarget ? '' : undefined}\n        />\n      </td>\n    </tr>\n  );\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,IAAI,OAAwD;CACnE,MAAM,EAAE,UAAU,QAAQ,YAAY,OAAO,OAAO,aAAa;AAEjE,QACE,oBAAC;EACC,GAAI;EACJ,GAAI;EACJ,KAAK;EACL,cAAY;EACZ,OAAO,UAAU,OAAO,EAAE,QAAQ,GAAG;EAEpC;GACE;;;;;;;;AAUT,SAAS,aAAa,OAAsB;CAC1C,MAAM,EAAE,QAAQ,WAAW,cAAc;CAEzC,MAAM,aAAa,iBACjB,EAAE,KAAK,QAAQ,EACf,UACD;;;;;;;;;CAUD,MAAM,QAAQ,OAAuB,KAAK;CAC1C,MAAM,EAAE,cAAc,eAAe,iBACnC,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAQ,cAAc;EAAM,EAAE,EAC7D,WACA,MACD;AAED,QACE,oBAAC;EACC,GAAI;EACJ,OAAO;GACL,GAAGA,aAAW,MAAM,UAAU,WAAW,UAAU;GACnD,kBAAkB;GAClB,iBAAiB,WAAW,aAAa,KAAK;GAC9C,oBAAoB,aAAa,KAAK;GACvC;GACD;;AAIN,SAAgB,SAAS,OAAsB;AAC7C,QAAO,MAAM,aAAa,MAAM,YAC9B,oBAAC,gBAAa,GAAI,QAAS,GAE3B,oBAAC,OAAI,GAAI,QAAS;;;;;;;;;;AAmBtB,SAAgB,sBAAsB,OAAmC;CACvE,MAAM,EAAE,QAAQ,cAAc,WAAW,gBAAgB;CACzD,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAQ;EAAc,EAAE,EACvD,WACA,IACD;AAED,KAAI,SAAU,QAAO;AAErB,QACE,oBAAC;EAAG,gBAAa;YACf,oBAAC;GAAG,gBAAa;GAAoB,SAAS,KAAK,IAAI,aAAa,EAAE;aACpE,oBAAC;IACC,GAAI;IACC;IACL,gBAAa;IACb,oBAAkB,eAAe,KAAK;KACtC;IACC;GACF"}

package/dist/components/data/TableBase/TableView.d.ts

@@ -0,0 +1,22 @@
+
+import "./types.js";
+import "./use-cell-selection.js";
+import "./use-table-selection.js";
+import { Styles } from "@tenphi/tasty";
+import { ReactNode, RefObject } from "react";
+import "react/jsx-runtime";
+import { Key as Key$1 } from "@react-types/shared";
+
+//#region src/components/data/TableBase/TableView.d.ts
+/** Visual/behavioural overrides a table adapter may attach to a single row. */
+interface CubeTableRowRenderProps {
+  isDimmed?: boolean;
+  mods?: Record<string, boolean | undefined>;
+  styles?: Styles;
+  height?: number;
+  qa?: string;
+  tooltip?: string;
+}
+//#endregion
+export { CubeTableRowRenderProps };
+//# sourceMappingURL=TableView.d.ts.map