@cube-dev/ui-kit 0.164.0 → 0.166.0

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

@@ -1,19 +1,20 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useDraggableItem, useDropIndicator } from "react-aria";
+import { useDraggableItem, useDropIndicator, useTreeItem } from "react-aria";
 
 //#region src/components/data/TableBase/TableRow.tsx
 function Row(props) {
-	const { rowProps, height, measureRef, index, extra, children } = props;
+	const { rowProps, height, measureRef, rowRef, index, extra, children } = props;
 	return /* @__PURE__ */ jsx("tr", {
 		...rowProps,
 		...extra,
-		ref: measureRef,
+		ref: mergeRefs(measureRef, rowRef),
 		"data-index": index,
 		style: height != null ? { height } : void 0,
-		children
+		children: typeof children === "function" ? children(void 0) : children
 	});
 }
 /**
@@ -49,7 +50,31 @@ function DraggableRow(props) {
 		}
 	});
 }
+function TreeRow(props) {
+	const { tree } = props;
+	const rowRef = useRef(null);
+	const treeItemAria = useTreeItem({
+		node: tree.node,
+		hasChildItems: tree.entry.children.length > 0,
+		isVirtualized: tree.isVirtualized
+	}, tree.state, rowRef);
+	const rowProps = mergeProps$1(treeItemAria.rowProps, props.rowProps);
+	if (props.rowProps["aria-rowindex"] !== void 0) rowProps["aria-rowindex"] = props.rowProps["aria-rowindex"];
+	if (props.rowProps["aria-selected"] !== void 0) rowProps["aria-selected"] = props.rowProps["aria-selected"];
+	rowProps["aria-level"] = tree.entry.level + 1;
+	rowProps["aria-posinset"] = tree.entry.siblingIndex + 1;
+	rowProps["aria-setsize"] = tree.entry.siblingCount;
+	const children = typeof props.children === "function" ? props.children(treeItemAria) : props.children;
+	const next = {
+		...props,
+		rowProps,
+		rowRef,
+		children
+	};
+	return props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableRow, { ...next }) : /* @__PURE__ */ jsx(Row, { ...next });
+}
 function TableRow(props) {
+	if (props.tree) return /* @__PURE__ */ jsx(TreeRow, { ...props });
 	return props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableRow, { ...props }) : /* @__PURE__ */ jsx(Row, { ...props });
 }
 /**

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

@@ -1 +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"}
+{"version":3,"file":"TableRow.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/TableRow.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useDraggableItem, useDropIndicator, useTreeItem } from 'react-aria';\n\nimport { mergeProps, mergeRefs } from '../../../utils/react';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { ReactNode, Ref } from 'react';\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  TreeState,\n} from 'react-stately';\nimport type { TableTreeNode } from './table-tree';\n\nexport interface TableRowTreeProps<T = any> {\n  state: TreeState<TableTreeNode<T>>;\n  node: Node<TableTreeNode<T>>;\n  entry: TableTreeNode<T>;\n  isVirtualized: boolean;\n}\n\nexport interface TableRowProps<T = any> {\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  /** Internal React Aria row ref in tree mode. */\n  rowRef?: Ref<HTMLTableRowElement>;\n  index?: number;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n  tree?: TableRowTreeProps<T>;\n  children:\n    | ReactNode\n    | ((treeItemAria: ReturnType<typeof useTreeItem> | undefined) => ReactNode);\n}\n\nfunction Row(\n  props: TableRowProps & {\n    extra?: Record<string, any>;\n    rowRef?: Ref<HTMLTableRowElement>;\n  },\n) {\n  const { rowProps, height, measureRef, rowRef, index, extra, children } =\n    props;\n\n  return (\n    <tr\n      {...rowProps}\n      {...extra}\n      ref={mergeRefs(measureRef, rowRef)}\n      data-index={index}\n      style={height != null ? { height } : undefined}\n    >\n      {typeof children === 'function' ? children(undefined) : 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\nfunction TreeRow<T>(props: TableRowProps<T>) {\n  const { tree } = props;\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const treeItemAria = useTreeItem(\n    {\n      node: tree!.node,\n      hasChildItems: tree!.entry.children.length > 0,\n      isVirtualized: tree!.isVirtualized,\n    },\n    tree!.state,\n    rowRef,\n  );\n\n  const rowProps = mergeProps(treeItemAria.rowProps, props.rowProps);\n\n  // Table geometry and ItemTable selection are separate from React Aria's\n  // internal focus-only selection manager, so the renderer's values win.\n  if (props.rowProps['aria-rowindex'] !== undefined) {\n    rowProps['aria-rowindex'] = props.rowProps['aria-rowindex'];\n  }\n  if (props.rowProps['aria-selected'] !== undefined) {\n    rowProps['aria-selected'] = props.rowProps['aria-selected'];\n  }\n  rowProps['aria-level'] = tree!.entry.level + 1;\n  rowProps['aria-posinset'] = tree!.entry.siblingIndex + 1;\n  rowProps['aria-setsize'] = tree!.entry.siblingCount;\n\n  const children =\n    typeof props.children === 'function'\n      ? props.children(treeItemAria)\n      : props.children;\n  const next = { ...props, rowProps, rowRef, children };\n\n  return props.dragState && props.dropState ? (\n    <DraggableRow {...next} />\n  ) : (\n    <Row {...next} />\n  );\n}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n  if (props.tree) return <TreeRow {...props} />;\n\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":";;;;;;;;AAuCA,SAAS,IACP,OAIA;CACA,MAAM,EAAE,UAAU,QAAQ,YAAY,QAAQ,OAAO,OAAO,aAC1D;AAEF,QACE,oBAAC;EACC,GAAI;EACJ,GAAI;EACJ,KAAK,UAAU,YAAY,OAAO;EAClC,cAAY;EACZ,OAAO,UAAU,OAAO,EAAE,QAAQ,GAAG;YAEpC,OAAO,aAAa,aAAa,SAAS,OAAU,GAAG;GACrD;;;;;;;;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,SAAS,QAAW,OAAyB;CAC3C,MAAM,EAAE,SAAS;CACjB,MAAM,SAAS,OAA4B,KAAK;CAChD,MAAM,eAAe,YACnB;EACE,MAAM,KAAM;EACZ,eAAe,KAAM,MAAM,SAAS,SAAS;EAC7C,eAAe,KAAM;EACtB,EACD,KAAM,OACN,OACD;CAED,MAAM,WAAWA,aAAW,aAAa,UAAU,MAAM,SAAS;AAIlE,KAAI,MAAM,SAAS,qBAAqB,OACtC,UAAS,mBAAmB,MAAM,SAAS;AAE7C,KAAI,MAAM,SAAS,qBAAqB,OACtC,UAAS,mBAAmB,MAAM,SAAS;AAE7C,UAAS,gBAAgB,KAAM,MAAM,QAAQ;AAC7C,UAAS,mBAAmB,KAAM,MAAM,eAAe;AACvD,UAAS,kBAAkB,KAAM,MAAM;CAEvC,MAAM,WACJ,OAAO,MAAM,aAAa,aACtB,MAAM,SAAS,aAAa,GAC5B,MAAM;CACZ,MAAM,OAAO;EAAE,GAAG;EAAO;EAAU;EAAQ;EAAU;AAErD,QAAO,MAAM,aAAa,MAAM,YAC9B,oBAAC,gBAAa,GAAI,OAAQ,GAE1B,oBAAC,OAAI,GAAI,OAAQ;;AAIrB,SAAgB,SAAY,OAAyB;AACnD,KAAI,MAAM,KAAM,QAAO,oBAAC,WAAQ,GAAI,QAAS;AAE7C,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

@@ -5,7 +5,8 @@ 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";
+import { TreeState } from "react-stately";
+import { Key as Key$1, Node } from "@react-types/shared";
 
 //#region src/components/data/TableBase/TableView.d.ts
 /** Visual/behavioural overrides a table adapter may attach to a single row. */