@cube-dev/ui-kit 0.156.0 → 0.157.1

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

@@ -0,0 +1,99 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | 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.1 | 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