@cube-dev/ui-kit 0.182.0 → 0.183.0

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { c } from "react-compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDraggableItem, useDropIndicator } from "react-aria";
@@ -17,12 +18,21 @@ import { useDraggableItem, useDropIndicator } from "react-aria";
 */
 const NO_DRAG_SELECTOR = "[data-element=\"Resizer\"], [data-element=\"Actions\"], a, button, input, select, textarea, [role=\"button\"], [role=\"menuitem\"]";
 function HeaderCell(props) {
+	const $ = c(4);
 	const { cellProps, extra, children } = props;
-	return /* @__PURE__ */ jsx("th", {
-		...cellProps,
-		...extra,
-		children
-	});
+	let t0;
+	if ($[0] !== cellProps || $[1] !== children || $[2] !== extra) {
+		t0 = /* @__PURE__ */ jsx("th", {
+			...cellProps,
+			...extra,
+			children
+		});
+		$[0] = cellProps;
+		$[1] = children;
+		$[2] = extra;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
 }
 /**
 * A header cell inside a collection that accepts drags.
@@ -31,40 +41,96 @@ function HeaderCell(props) {
 * they are hooks, and whether a table reorders its columns is a prop.
 */
 function DraggableHeaderCell(props) {
+	const $ = c(21);
 	const { columnKey, hasAction, isLastDraggable, dragState, dropState } = props;
-	const { dragProps, isDragging } = useDraggableItem({
-		key: columnKey,
-		hasAction
-	}, dragState);
-	return /* @__PURE__ */ jsxs(HeaderCell, {
-		...props,
-		extra: {
-			...mergeProps$1(props.cellProps, dragProps, { onDragStartCapture: (event) => {
-				if (event.target?.closest?.(NO_DRAG_SELECTOR)) {
-					event.preventDefault();
-					event.stopPropagation();
-				}
-			} }),
+	let t0;
+	if ($[0] !== columnKey || $[1] !== hasAction) {
+		t0 = {
+			key: columnKey,
+			hasAction
+		};
+		$[0] = columnKey;
+		$[1] = hasAction;
+		$[2] = t0;
+	} else t0 = $[2];
+	const { dragProps, isDragging } = useDraggableItem(t0, dragState);
+	let t1;
+	if ($[3] !== dragProps || $[4] !== props.cellProps) {
+		t1 = mergeProps$1(props.cellProps, dragProps, { onDragStartCapture: _temp });
+		$[3] = dragProps;
+		$[4] = props.cellProps;
+		$[5] = t1;
+	} else t1 = $[5];
+	const t2 = isDragging ? "" : void 0;
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = {
+			...t1,
 			"data-draggable": "",
-			"data-dragging": isDragging ? "" : void 0
-		},
-		children: [
-			/* @__PURE__ */ jsx(ColumnDropIndicator, {
-				columnKey,
-				dropPosition: "before",
-				dropState
-			}),
-			props.children,
-			isLastDraggable ? /* @__PURE__ */ jsx(ColumnDropIndicator, {
-				columnKey,
-				dropPosition: "after",
-				dropState
-			}) : null
-		]
-	});
+			"data-dragging": t2
+		};
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	const t4 = dropState;
+	let t5;
+	if ($[9] !== columnKey || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ColumnDropIndicator, {
+			columnKey,
+			dropPosition: "before",
+			dropState: t4
+		});
+		$[9] = columnKey;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== columnKey || $[13] !== dropState || $[14] !== isLastDraggable) {
+		t6 = isLastDraggable ? /* @__PURE__ */ jsx(ColumnDropIndicator, {
+			columnKey,
+			dropPosition: "after",
+			dropState
+		}) : null;
+		$[12] = columnKey;
+		$[13] = dropState;
+		$[14] = isLastDraggable;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== props || $[17] !== t3 || $[18] !== t5 || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(HeaderCell, {
+			...props,
+			extra: t3,
+			children: [
+				t5,
+				props.children,
+				t6
+			]
+		});
+		$[16] = props;
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	return t7;
+}
+function _temp(event) {
+	if (event.target?.closest?.(NO_DRAG_SELECTOR)) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
 }
 function TableHeaderCell(props) {
-	return props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableHeaderCell, { ...props }) : /* @__PURE__ */ jsx(HeaderCell, { ...props });
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableHeaderCell, { ...props }) : /* @__PURE__ */ jsx(HeaderCell, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 }
 /**
 * The line showing where a dragged column would land.
@@ -77,37 +143,61 @@ function TableHeaderCell(props) {
 * `useDropIndicator` reports `isHidden` unless this is the active target, so a
 * table merely capable of reordering keeps its exact DOM until a drag starts.
 */
-function ColumnDropIndicator({ columnKey, dropPosition, dropState }) {
+function ColumnDropIndicator(t0) {
+	const $ = c(10);
+	const { columnKey, dropPosition, dropState } = t0;
 	const ref = useRef(null);
-	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target: {
-		type: "item",
-		key: columnKey,
-		dropPosition
-	} }, dropState, ref);
-	/**
-	* Re-register the drop targets when the header's geometry changes.
-	*
-	* React Aria's `ListDropTargetDelegate` measures every `[data-key]` at the
-	* moment a drag starts. A column resized mid-drag — or a scrollbar appearing —
-	* leaves those rects stale, and the drop lands in the wrong place. Same trick
-	* `TabDropIndicator` uses.
-	*/
+	let t1;
+	if ($[0] !== columnKey || $[1] !== dropPosition) {
+		t1 = { target: {
+			type: "item",
+			key: columnKey,
+			dropPosition
+		} };
+		$[0] = columnKey;
+		$[1] = dropPosition;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(t1, dropState, ref);
 	const [, forceUpdate] = useState(0);
-	useEffect(() => {
-		const row = ref.current?.closest("[data-element=\"HeadRow\"]");
-		if (!row || typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(() => forceUpdate((n) => n + 1));
-		observer.observe(row);
-		return () => observer.disconnect();
-	}, []);
+	let t2;
+	if ($[3] !== forceUpdate) {
+		t2 = () => {
+			const row = ref.current?.closest("[data-element=\"HeadRow\"]");
+			if (!row || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => forceUpdate(_temp2));
+			observer.observe(row);
+			return () => observer.disconnect();
+		};
+		$[3] = forceUpdate;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[5] = t3;
+	} else t3 = $[5];
+	useEffect(t2, t3);
 	if (isHidden) return null;
-	return /* @__PURE__ */ jsx("div", {
-		...dropIndicatorProps,
-		ref,
-		"data-element": "ColumnDropIndicator",
-		"data-position": dropPosition,
-		"data-drop-target": isDropTarget ? "" : void 0
-	});
+	const t4 = isDropTarget ? "" : void 0;
+	let t5;
+	if ($[6] !== dropIndicatorProps || $[7] !== dropPosition || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			...dropIndicatorProps,
+			ref,
+			"data-element": "ColumnDropIndicator",
+			"data-position": dropPosition,
+			"data-drop-target": t4
+		});
+		$[6] = dropIndicatorProps;
+		$[7] = dropPosition;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+function _temp2(n) {
+	return n + 1;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/TableHeaderCell.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDraggableItem, useDropIndicator } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport type { ReactNode } from 'react';\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n} from 'react-stately';\n\n/**\n * Controls inside the header that own their own press, and must never start a\n * column drag.\n *\n * Drag-source resolution walks the DOM tree, not the React event path, so\n * `Item`'s `Actions` slot calling `stopPropagation` does nothing here — the\n * `<th>` is still the drag source as far as the browser is concerned. Only\n * `preventDefault` on `dragstart` stops it, which is what the capture handler\n * below does.\n */\nconst NO_DRAG_SELECTOR =\n  '[data-element=\"Resizer\"], [data-element=\"Actions\"], a, button, input, select, textarea, [role=\"button\"], [role=\"menuitem\"]';\n\nexport interface TableHeaderCellProps {\n  columnKey: string;\n  /** Everything the renderer already computed: mods, ARIA, handlers, styles. */\n  cellProps: Record<string, any>;\n  /** Whether the header itself responds to Enter — i.e. it sorts. */\n  hasAction: boolean;\n  isLastDraggable: boolean;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n  children: ReactNode;\n}\n\nfunction HeaderCell(\n  props: TableHeaderCellProps & { extra?: Record<string, any> },\n) {\n  const { cellProps, extra, children } = props;\n\n  return (\n    <th {...cellProps} {...extra}>\n      {children}\n    </th>\n  );\n}\n\n/**\n * A header cell inside a collection that accepts drags.\n *\n * Split from the plain one so the drag hooks can be called unconditionally —\n * they are hooks, and whether a table reorders its columns is a prop.\n */\nfunction DraggableHeaderCell(props: TableHeaderCellProps) {\n  const { columnKey, hasAction, isLastDraggable, dragState, dropState } = props;\n\n  const { dragProps, isDragging } = useDraggableItem(\n    // `hasAction` re-gates React Aria's Enter/Space capture behind Alt, so plain\n    // Enter still reaches the header's own sort handler instead of starting a\n    // keyboard drag session.\n    { key: columnKey, hasAction },\n    dragState as DraggableCollectionState,\n  );\n\n  return (\n    <HeaderCell\n      {...props}\n      extra={{\n        // `dragProps` last for `draggable`, which is a value rather than a\n        // handler — `mergeProps` chains handlers but takes the later value. The\n        // sort `onClick` survives: `useDraggableItem` only deletes its own.\n        ...mergeProps(props.cellProps, dragProps, {\n          // Capture, so this runs before React Aria's own `onDragStart` on the\n          // same node and can cancel it.\n          onDragStartCapture: (event: any) => {\n            if ((event.target as HTMLElement)?.closest?.(NO_DRAG_SELECTOR)) {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          },\n        }),\n        'data-draggable': '',\n        'data-dragging': isDragging ? '' : undefined,\n      }}\n    >\n      <ColumnDropIndicator\n        columnKey={columnKey}\n        dropPosition=\"before\"\n        dropState={dropState as DroppableCollectionState}\n      />\n      {props.children}\n      {isLastDraggable ? (\n        <ColumnDropIndicator\n          columnKey={columnKey}\n          dropPosition=\"after\"\n          dropState={dropState as DroppableCollectionState}\n        />\n      ) : null}\n    </HeaderCell>\n  );\n}\n\nexport function TableHeaderCell(props: TableHeaderCellProps) {\n  return props.dragState && props.dropState ? (\n    <DraggableHeaderCell {...props} />\n  ) : (\n    <HeaderCell {...props} />\n  );\n}\n\ninterface ColumnDropIndicatorProps {\n  columnKey: string;\n  dropPosition: 'before' | 'after';\n  dropState: DroppableCollectionState;\n}\n\n/**\n * The line showing where a dragged column would land.\n *\n * Lives INSIDE the `<th>`, absolutely positioned on one of its edges — a `<tr>`\n * may only contain `<th>`/`<td>`, so there is nowhere between two header cells\n * to put it. Being absolute also means mounting one cannot shift the layout,\n * which is the bug class the row indicator had to be careful about.\n *\n * `useDropIndicator` reports `isHidden` unless this is the active target, so a\n * table merely capable of reordering keeps its exact DOM until a drag starts.\n */\nfunction ColumnDropIndicator({\n  columnKey,\n  dropPosition,\n  dropState,\n}: ColumnDropIndicatorProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target: { type: 'item', key: columnKey, dropPosition } },\n    dropState,\n    ref,\n  );\n\n  /**\n   * Re-register the drop targets when the header's geometry changes.\n   *\n   * React Aria's `ListDropTargetDelegate` measures every `[data-key]` at the\n   * moment a drag starts. A column resized mid-drag — or a scrollbar appearing —\n   * leaves those rects stale, and the drop lands in the wrong place. Same trick\n   * `TabDropIndicator` uses.\n   */\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    const row = ref.current?.closest('[data-element=\"HeadRow\"]');\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => forceUpdate((n) => n + 1));\n\n    observer.observe(row);\n\n    return () => observer.disconnect();\n  }, []);\n\n  if (isHidden) return null;\n\n  return (\n    <div\n      {...dropIndicatorProps}\n      ref={ref}\n      data-element=\"ColumnDropIndicator\"\n      data-position={dropPosition}\n      data-drop-target={isDropTarget ? '' : undefined}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,mBACJ;AAcF,SAAS,WACP,OACA;CACA,MAAM,EAAE,WAAW,OAAO,aAAa;AAEvC,QACE,oBAAC;EAAG,GAAI;EAAW,GAAI;EACpB;GACE;;;;;;;;AAUT,SAAS,oBAAoB,OAA6B;CACxD,MAAM,EAAE,WAAW,WAAW,iBAAiB,WAAW,cAAc;CAExE,MAAM,EAAE,WAAW,eAAe,iBAIhC;EAAE,KAAK;EAAW;EAAW,EAC7B,UACD;AAED,QACE,qBAAC;EACC,GAAI;EACJ,OAAO;GAIL,GAAGA,aAAW,MAAM,WAAW,WAAW,EAGxC,qBAAqB,UAAe;AAClC,QAAK,MAAM,QAAwB,UAAU,iBAAiB,EAAE;AAC9D,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;MAG5B,CAAC;GACF,kBAAkB;GAClB,iBAAiB,aAAa,KAAK;GACpC;;GAED,oBAAC;IACY;IACX,cAAa;IACF;KACX;GACD,MAAM;GACN,kBACC,oBAAC;IACY;IACX,cAAa;IACF;KACX,GACA;;GACO;;AAIjB,SAAgB,gBAAgB,OAA6B;AAC3D,QAAO,MAAM,aAAa,MAAM,YAC9B,oBAAC,uBAAoB,GAAI,QAAS,GAElC,oBAAC,cAAW,GAAI,QAAS;;;;;;;;;;;;;AAqB7B,SAAS,oBAAoB,EAC3B,WACA,cACA,aAC2B;CAC3B,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAW;EAAc,EAAE,EAC1D,WACA,IACD;;;;;;;;;CAUD,MAAM,GAAG,eAAe,SAAS,EAAE;AAEnC,iBAAgB;EACd,MAAM,MAAM,IAAI,SAAS,QAAQ,6BAA2B;AAE5D,MAAI,CAAC,OAAO,OAAO,mBAAmB,YAAa;EAEnD,MAAM,WAAW,IAAI,qBAAqB,aAAa,MAAM,IAAI,EAAE,CAAC;AAEpE,WAAS,QAAQ,IAAI;AAErB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAEN,KAAI,SAAU,QAAO;AAErB,QACE,oBAAC;EACC,GAAI;EACC;EACL,gBAAa;EACb,iBAAe;EACf,oBAAkB,eAAe,KAAK;GACtC"}
+{"version":3,"file":"TableHeaderCell.js","names":["useEffect","useRef","useState","useDraggableItem","useDropIndicator","mergeProps","ReactNode","DraggableCollectionState","DroppableCollectionState","NO_DRAG_SELECTOR","TableHeaderCellProps","columnKey","cellProps","Record","hasAction","isLastDraggable","dragState","dropState","children","HeaderCell","props","$","_c","extra","t0","DraggableHeaderCell","key","dragProps","isDragging","t1","onDragStartCapture","_temp","t2","undefined","t3","t4","t5","t6","t7","event","target","HTMLElement","closest","preventDefault","stopPropagation","TableHeaderCell","ColumnDropIndicatorProps","dropPosition","ColumnDropIndicator","ref","type","dropIndicatorProps","isHidden","isDropTarget","forceUpdate","row","current","ResizeObserver","observer","_temp2","observe","disconnect","Symbol","for","n"],"sources":["../../../../src/components/data/TableBase/TableHeaderCell.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDraggableItem, useDropIndicator } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport type { ReactNode } from 'react';\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n} from 'react-stately';\n\n/**\n * Controls inside the header that own their own press, and must never start a\n * column drag.\n *\n * Drag-source resolution walks the DOM tree, not the React event path, so\n * `Item`'s `Actions` slot calling `stopPropagation` does nothing here — the\n * `<th>` is still the drag source as far as the browser is concerned. Only\n * `preventDefault` on `dragstart` stops it, which is what the capture handler\n * below does.\n */\nconst NO_DRAG_SELECTOR =\n  '[data-element=\"Resizer\"], [data-element=\"Actions\"], a, button, input, select, textarea, [role=\"button\"], [role=\"menuitem\"]';\n\nexport interface TableHeaderCellProps {\n  columnKey: string;\n  /** Everything the renderer already computed: mods, ARIA, handlers, styles. */\n  cellProps: Record<string, any>;\n  /** Whether the header itself responds to Enter — i.e. it sorts. */\n  hasAction: boolean;\n  isLastDraggable: boolean;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n  children: ReactNode;\n}\n\nfunction HeaderCell(\n  props: TableHeaderCellProps & { extra?: Record<string, any> },\n) {\n  const { cellProps, extra, children } = props;\n\n  return (\n    <th {...cellProps} {...extra}>\n      {children}\n    </th>\n  );\n}\n\n/**\n * A header cell inside a collection that accepts drags.\n *\n * Split from the plain one so the drag hooks can be called unconditionally —\n * they are hooks, and whether a table reorders its columns is a prop.\n */\nfunction DraggableHeaderCell(props: TableHeaderCellProps) {\n  const { columnKey, hasAction, isLastDraggable, dragState, dropState } = props;\n\n  const { dragProps, isDragging } = useDraggableItem(\n    // `hasAction` re-gates React Aria's Enter/Space capture behind Alt, so plain\n    // Enter still reaches the header's own sort handler instead of starting a\n    // keyboard drag session.\n    { key: columnKey, hasAction },\n    dragState as DraggableCollectionState,\n  );\n\n  return (\n    <HeaderCell\n      {...props}\n      extra={{\n        // `dragProps` last for `draggable`, which is a value rather than a\n        // handler — `mergeProps` chains handlers but takes the later value. The\n        // sort `onClick` survives: `useDraggableItem` only deletes its own.\n        ...mergeProps(props.cellProps, dragProps, {\n          // Capture, so this runs before React Aria's own `onDragStart` on the\n          // same node and can cancel it.\n          onDragStartCapture: (event: any) => {\n            if ((event.target as HTMLElement)?.closest?.(NO_DRAG_SELECTOR)) {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          },\n        }),\n        'data-draggable': '',\n        'data-dragging': isDragging ? '' : undefined,\n      }}\n    >\n      <ColumnDropIndicator\n        columnKey={columnKey}\n        dropPosition=\"before\"\n        dropState={dropState as DroppableCollectionState}\n      />\n      {props.children}\n      {isLastDraggable ? (\n        <ColumnDropIndicator\n          columnKey={columnKey}\n          dropPosition=\"after\"\n          dropState={dropState as DroppableCollectionState}\n        />\n      ) : null}\n    </HeaderCell>\n  );\n}\n\nexport function TableHeaderCell(props: TableHeaderCellProps) {\n  return props.dragState && props.dropState ? (\n    <DraggableHeaderCell {...props} />\n  ) : (\n    <HeaderCell {...props} />\n  );\n}\n\ninterface ColumnDropIndicatorProps {\n  columnKey: string;\n  dropPosition: 'before' | 'after';\n  dropState: DroppableCollectionState;\n}\n\n/**\n * The line showing where a dragged column would land.\n *\n * Lives INSIDE the `<th>`, absolutely positioned on one of its edges — a `<tr>`\n * may only contain `<th>`/`<td>`, so there is nowhere between two header cells\n * to put it. Being absolute also means mounting one cannot shift the layout,\n * which is the bug class the row indicator had to be careful about.\n *\n * `useDropIndicator` reports `isHidden` unless this is the active target, so a\n * table merely capable of reordering keeps its exact DOM until a drag starts.\n */\nfunction ColumnDropIndicator({\n  columnKey,\n  dropPosition,\n  dropState,\n}: ColumnDropIndicatorProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target: { type: 'item', key: columnKey, dropPosition } },\n    dropState,\n    ref,\n  );\n\n  /**\n   * Re-register the drop targets when the header's geometry changes.\n   *\n   * React Aria's `ListDropTargetDelegate` measures every `[data-key]` at the\n   * moment a drag starts. A column resized mid-drag — or a scrollbar appearing —\n   * leaves those rects stale, and the drop lands in the wrong place. Same trick\n   * `TabDropIndicator` uses.\n   */\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    const row = ref.current?.closest('[data-element=\"HeadRow\"]');\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => forceUpdate((n) => n + 1));\n\n    observer.observe(row);\n\n    return () => observer.disconnect();\n  }, []);\n\n  if (isHidden) return null;\n\n  return (\n    <div\n      {...dropIndicatorProps}\n      ref={ref}\n      data-element=\"ColumnDropIndicator\"\n      data-position={dropPosition}\n      data-drop-target={isDropTarget ? '' : undefined}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAMS,mBACJ;AAcF,SAAAU,WAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGE,MAAA,EAAAV,WAAAW,OAAAL,aAAuCE;CAAM,IAAAI;AAAA,KAAAH,EAAA,OAAAT,aAAAS,EAAA,OAAAH,YAAAG,EAAA,OAAAE,OAAA;AAG3CC,OAAA,oBAAA;GAEK,GAFGZ;GAAS,GAAMW;GACpBL;IACE;AAAAG,IAAA,KAAAT;AAAAS,IAAA,KAAAH;AAAAG,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAFLG;;;;;;;;AAYJ,SAAAC,oBAAAL,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACE,MAAA,EAAAX,WAAAG,WAAAC,iBAAAC,WAAAC,cAAwEG;CAAM,IAAAI;AAAA,KAAAH,EAAA,OAAAV,aAAAU,EAAA,OAAAP,WAAA;AAM5EU,OAAA;GAAAE,KAAOf;GAASG;GAAa;AAAAO,IAAA,KAAAV;AAAAU,IAAA,KAAAP;AAAAO,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAJ/B,MAAA,EAAAM,WAAAC,eAAkCzB,iBAIhCqB,IACAR,UACD;CAAC,IAAAa;AAAA,KAAAR,EAAA,OAAAM,aAAAN,EAAA,OAAAD,MAAAR,WAAA;AASOiB,OAAAxB,aAAWe,MAAKR,WAAYe,WAAW,EAAAG,oBAGpBC,OAMrB,CAAC;AAAAV,IAAA,KAAAM;AAAAN,IAAA,KAAAD,MAAAR;AAAAS,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAEe,MAAAW,KAAAJ,aAAA,KAAAK;CAA2B,IAAAC;AAAA,KAAAb,EAAA,OAAAQ,MAAAR,EAAA,OAAAW,IAAA;AAfvCE,OAAA;GAAA,GAIFL;GASD,kBACgB;GAAE,iBACHG;GAClB;AAAAX,IAAA,KAAAQ;AAAAR,IAAA,KAAAW;AAAAX,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAKY,MAAAc,KAAAlB;CAAqC,IAAAmB;AAAA,KAAAf,EAAA,OAAAV,aAAAU,EAAA,QAAAc,IAAA;AAHlDC,OAAA,oBAAC;GACYzB;GACE,cAAA;GACF,WAAAwB;IACX;AAAAd,IAAA,KAAAV;AAAAU,IAAA,MAAAc;AAAAd,IAAA,MAAAe;OAAAA,MAAAf,EAAA;CAAA,IAAAgB;AAAA,KAAAhB,EAAA,QAAAV,aAAAU,EAAA,QAAAJ,aAAAI,EAAA,QAAAN,iBAAA;AAEDsB,OAAAtB,kBACC,oBAAC;GACYJ;GACE,cAAA;GACFM;IAEP,GANP;AAMOI,IAAA,MAAAV;AAAAU,IAAA,MAAAJ;AAAAI,IAAA,MAAAN;AAAAM,IAAA,MAAAgB;OAAAA,MAAAhB,EAAA;CAAA,IAAAiB;AAAA,KAAAjB,EAAA,QAAAD,SAAAC,EAAA,QAAAa,MAAAb,EAAA,QAAAe,MAAAf,EAAA,QAAAgB,IAAA;AAhCVC,OAAA,qBAAC;GAAU,GACLlB;GACG,OAAAc;;IAkBPE;IAKChB,MAAKF;IACLmB;;IAOU;AAAAhB,IAAA,MAAAD;AAAAC,IAAA,MAAAa;AAAAb,IAAA,MAAAe;AAAAf,IAAA,MAAAgB;AAAAhB,IAAA,MAAAiB;OAAAA,MAAAjB,EAAA;AAAA,QAjCbiB;;AAZJ,SAAAP,MAAAQ,OAAA;AAsBY,KAAKA,MAAKC,QAAgCE,UAAGjC,iBAAiB,EAAA;AAC5D8B,QAAKI,gBAAiB;AACtBJ,QAAKK,iBAAkB;;;AAyBrC,SAAOC,gBAAAzB,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAE;AAAA,KAAAH,EAAA,OAAAD,OAAA;AACEI,OAAAJ,MAAKJ,aAAcI,MAAKH,YAC7B,oBAAC,uBAAmB,GAAKG,QAG1B,GADC,oBAAC,cAAU,GAAKA,QACjB;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAJMG;;;;;;;;;;;;;AAwBT,SAAAwB,oBAAAxB,IAAA;CAAA,MAAAH,IAAAC,EAAA,GAAA;CAA6B,MAAA,EAAAX,WAAAoC,cAAA9B,cAAAO;CAK3B,MAAAyB,MAAYhD,OAAuB,KAAK;CAAC,IAAA4B;AAAA,KAAAR,EAAA,OAAAV,aAAAU,EAAA,OAAA0B,cAAA;AAEvClB,OAAA,EAAAW,QAAU;GAAAU,MAAQ;GAAMxB,KAAOf;GAASoC;GAAe,EAAG;AAAA1B,IAAA,KAAAV;AAAAU,IAAA,KAAA0B;AAAA1B,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAD5D,MAAA,EAAA8B,oBAAAC,UAAAC,iBAAuDjD,iBACrDyB,IACAZ,WACAgC,IACD;CAUD,MAAA,GAAAK,eAAwBpD,SAAS,EAAE;CAAC,IAAA8B;AAAA,KAAAX,EAAA,OAAAiC,aAAA;AAE1BtB,aAAA;GACR,MAAAuB,MAAYN,IAAGO,SAAiBd,QAAC,6BAA2B;AAE5D,OAAI,CAACa,OAAO,OAAOE,mBAAmB,YAAW;GAEjD,MAAAC,WAAiB,IAAID,qBAAqBH,YAAYK,OAAa,CAAC;AAEpED,YAAQE,QAASL,IAAI;AAAA,gBAERG,SAAQG,YAAa;;AACnCxC,IAAA,KAAAiC;AAAAjC,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,OAAAyC,OAAAC,IAAA,4BAAA,EAAA;AAAE7B,OAAA,EAAE;AAAAb,IAAA,KAAAa;OAAAA,MAAAb,EAAA;AAVLrB,WAAUgC,IAUPE,GAAG;AAEN,KAAIkB,SAAQ,QAAS;CAQC,MAAAjB,KAAAkB,eAAA,KAAApB;CAA6B,IAAAG;AAAA,KAAAf,EAAA,OAAA8B,sBAAA9B,EAAA,OAAA0B,gBAAA1B,EAAA,OAAAc,IAAA;AALjDC,OAAA,oBAAA;GAME,GALIe;GACCF;GACQ,gBAAA;GACEF,iBAAAA;GACG,oBAAAZ;IAClB;AAAAd,IAAA,KAAA8B;AAAA9B,IAAA,KAAA0B;AAAA1B,IAAA,KAAAc;AAAAd,IAAA,KAAAe;OAAAA,MAAAf,EAAA;AAAA,QANFe;;AArCJ,SAAAuB,OAAAK,GAAA;AAAA,QA2BiEA,IAAI"}

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

@@ -1,21 +1,53 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
+import { c } from "react-compiler-runtime";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDraggableItem, useDropIndicator, useTreeItem } from "react-aria";
 
 //#region src/components/data/TableBase/TableRow.tsx
 function Row(props) {
+	const $ = c(14);
 	const { rowProps, height, measureRef, rowRef, index, extra, children } = props;
-	return /* @__PURE__ */ jsx("tr", {
-		...rowProps,
-		...extra,
-		ref: mergeRefs(measureRef, rowRef),
-		"data-index": index,
-		style: height != null ? { height } : void 0,
-		children: typeof children === "function" ? children(void 0) : children
-	});
+	let t0;
+	if ($[0] !== measureRef || $[1] !== rowRef) {
+		t0 = mergeRefs(measureRef, rowRef);
+		$[0] = measureRef;
+		$[1] = rowRef;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== height) {
+		t1 = height != null ? { height } : void 0;
+		$[3] = height;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== children) {
+		t2 = typeof children === "function" ? children(void 0) : children;
+		$[5] = children;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== extra || $[8] !== index || $[9] !== rowProps || $[10] !== t0 || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx("tr", {
+			...rowProps,
+			...extra,
+			ref: t0,
+			"data-index": index,
+			style: t1,
+			children: t2
+		});
+		$[7] = extra;
+		$[8] = index;
+		$[9] = rowProps;
+		$[10] = t0;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
 }
 /**
 * A row inside a collection that accepts drags.
@@ -24,58 +56,144 @@ function Row(props) {
 * they are hooks, and whether a table is draggable is a prop.
 */
 function DraggableRow(props) {
+	const $ = c(14);
 	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.
-	*/
+	let t0;
+	if ($[0] !== rowKey) {
+		t0 = { key: rowKey };
+		$[0] = rowKey;
+		$[1] = t0;
+	} else t0 = $[1];
+	const dragResult = useDraggableItem(t0, dragState);
 	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),
+	let t1;
+	if ($[2] !== rowKey) {
+		t1 = { target: {
+			type: "item",
+			key: rowKey,
+			dropPosition: "on"
+		} };
+		$[2] = rowKey;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { isDropTarget: isOnTarget } = useDropIndicator(t1, dropState, onRef);
+	let t2;
+	if ($[4] !== dragResult.dragProps || $[5] !== props.rowProps) {
+		t2 = mergeProps$1(props.rowProps, dragResult.dragProps);
+		$[4] = dragResult.dragProps;
+		$[5] = props.rowProps;
+		$[6] = t2;
+	} else t2 = $[6];
+	const t3 = dragResult.isDragging ? "" : void 0;
+	const t4 = isOnTarget ? "" : void 0;
+	let t5;
+	if ($[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+		t5 = {
+			...t2,
 			"data-draggable": "",
-			"data-dragging": dragResult.isDragging ? "" : void 0,
-			"data-drop-target": isOnTarget ? "" : void 0
-		}
-	});
+			"data-dragging": t3,
+			"data-drop-target": t4
+		};
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== props || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Row, {
+			...props,
+			extra: t5
+		});
+		$[11] = props;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
 }
 function TreeRow(props) {
+	const $ = c(21);
 	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 });
+	const t0 = tree.entry.children.length > 0;
+	let t1;
+	if ($[0] !== t0 || $[1] !== tree.isVirtualized || $[2] !== tree.node) {
+		t1 = {
+			node: tree.node,
+			hasChildItems: t0,
+			isVirtualized: tree.isVirtualized
+		};
+		$[0] = t0;
+		$[1] = tree.isVirtualized;
+		$[2] = tree.node;
+		$[3] = t1;
+	} else t1 = $[3];
+	const treeItemAria = useTreeItem(t1, tree.state, rowRef);
+	let rowProps;
+	if ($[4] !== props.rowProps || $[5] !== tree.entry.level || $[6] !== tree.entry.siblingCount || $[7] !== tree.entry.siblingIndex || $[8] !== treeItemAria.rowProps) {
+		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;
+		$[4] = props.rowProps;
+		$[5] = tree.entry.level;
+		$[6] = tree.entry.siblingCount;
+		$[7] = tree.entry.siblingIndex;
+		$[8] = treeItemAria.rowProps;
+		$[9] = rowProps;
+	} else rowProps = $[9];
+	let t2;
+	if ($[10] !== props.children || $[11] !== treeItemAria) {
+		t2 = typeof props.children === "function" ? props.children(treeItemAria) : props.children;
+		$[10] = props.children;
+		$[11] = treeItemAria;
+		$[12] = t2;
+	} else t2 = $[12];
+	const children = t2;
+	let t3;
+	if ($[13] !== children || $[14] !== props || $[15] !== rowProps) {
+		t3 = {
+			...props,
+			rowProps,
+			rowRef,
+			children
+		};
+		$[13] = children;
+		$[14] = props;
+		$[15] = rowProps;
+		$[16] = t3;
+	} else t3 = $[16];
+	const next = t3;
+	let t4;
+	if ($[17] !== next || $[18] !== props.dragState || $[19] !== props.dropState) {
+		t4 = props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableRow, { ...next }) : /* @__PURE__ */ jsx(Row, { ...next });
+		$[17] = next;
+		$[18] = props.dragState;
+		$[19] = props.dropState;
+		$[20] = t4;
+	} else t4 = $[20];
+	return t4;
 }
 function TableRow(props) {
-	if (props.tree) return /* @__PURE__ */ jsx(TreeRow, { ...props });
-	return props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableRow, { ...props }) : /* @__PURE__ */ jsx(Row, { ...props });
+	const $ = c(4);
+	if (props.tree) {
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(TreeRow, { ...props });
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		return t0;
+	}
+	let t0;
+	if ($[2] !== props) {
+		t0 = props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableRow, { ...props }) : /* @__PURE__ */ jsx(Row, { ...props });
+		$[2] = props;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
 }
 /**
 * The line showing where a dragged row would land.
@@ -86,27 +204,51 @@ function TableRow(props) {
 * untouched the rest of the time.
 */
 function TableRowDropIndicator(props) {
+	const $ = c(9);
 	const { rowKey, dropPosition, dropState, columnCount } = props;
 	const ref = useRef(null);
-	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target: {
-		type: "item",
-		key: rowKey,
-		dropPosition
-	} }, dropState, ref);
+	let t0;
+	if ($[0] !== dropPosition || $[1] !== rowKey) {
+		t0 = { target: {
+			type: "item",
+			key: rowKey,
+			dropPosition
+		} };
+		$[0] = dropPosition;
+		$[1] = rowKey;
+		$[2] = t0;
+	} else t0 = $[2];
+	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(t0, 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
+	const t1 = Math.max(columnCount, 1);
+	const t2 = isDropTarget ? "" : void 0;
+	let t3;
+	if ($[3] !== dropIndicatorProps || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			...dropIndicatorProps,
+			ref,
+			"data-element": "DropIndicator",
+			"data-drop-target": t2
+		});
+		$[3] = dropIndicatorProps;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t1 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx("tr", {
+			"data-element": "DropIndicatorRow",
+			children: /* @__PURE__ */ jsx("td", {
+				"data-element": "DropIndicatorCell",
+				colSpan: t1,
+				children: t3
 			})
-		})
-	});
+		});
+		$[6] = t1;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
 }
 
 //#endregion