@cube-dev/ui-kit 0.190.2 → 0.190.4

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

@@ -0,0 +1,142 @@
+/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { c } from "react-compiler-runtime";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTree } from "react-aria";
+
+//#region src/components/data/TableBase/TreeGridTable.tsx
+/**
+* Hook boundary for the native table. Flat tables deliberately avoid this
+* component so their DOM and keyboard behaviour remain exactly as before.
+*/
+function TreeGridTable(props) {
+	const $ = c(16);
+	const { tree, tableProps, style, children } = props;
+	const ref = useRef(null);
+	const pendingFocusKey = useRef(null);
+	const { gridProps } = useTree(tree.ariaProps, tree.state, ref);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const key = pendingFocusKey.current;
+			if (key == null) return;
+			const activeElement = document.activeElement;
+			if (activeElement && activeElement !== document.body && !ref.current?.contains(activeElement)) {
+				pendingFocusKey.current = null;
+				return;
+			}
+			const target = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(key));
+			if (target) {
+				pendingFocusKey.current = null;
+				target.focus();
+			}
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	useEffect(t0);
+	let t1;
+	if ($[1] !== gridProps) {
+		t1 = (event) => {
+			const pendingKey = pendingFocusKey.current;
+			const nextTarget = event.relatedTarget;
+			if (pendingKey != null && nextTarget instanceof Element) {
+				if (nextTarget.closest("tbody tr[data-element=\"Row\"][data-key]")?.dataset.key !== String(pendingKey)) pendingFocusKey.current = null;
+			}
+			gridProps.onBlurCapture?.(event);
+		};
+		$[1] = gridProps;
+		$[2] = t1;
+	} else t1 = $[2];
+	const handleBlurCapture = t1;
+	let t2;
+	if ($[3] !== gridProps || $[4] !== tree.entries || $[5] !== tree.state) {
+		t2 = (event_0) => {
+			const row = event_0.target.closest("tbody tr[data-element=\"Row\"][data-key]");
+			if (!row || event_0.target !== row) {
+				gridProps.onKeyDownCapture?.(event_0);
+				return;
+			}
+			const currentKey = pendingFocusKey.current ?? row.dataset.key;
+			const index = tree.entries.findIndex((entry) => String(entry.key) === String(currentKey));
+			const entry_0 = tree.entries[index];
+			if (!entry_0) return;
+			const focusEntry = (next) => {
+				if (!next) return false;
+				tree.state.selectionManager.setFocusedKey(next.key);
+				const target_0 = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element_0) => element_0.dataset.key === String(next.key));
+				if (target_0) {
+					pendingFocusKey.current = null;
+					target_0.focus();
+				} else pendingFocusKey.current = next.key;
+				return true;
+			};
+			const hasChildren = entry_0.children.length > 0;
+			const isExpanded = tree.state.expandedKeys.has(entry_0.key);
+			let handled = false;
+			if (event_0.key === "ArrowRight" && hasChildren) if (isExpanded) handled = focusEntry(entry_0.children[0]);
+			else {
+				tree.state.toggleKey(entry_0.key);
+				handled = true;
+			}
+			else if (event_0.key === "ArrowLeft") {
+				if (hasChildren && isExpanded) {
+					tree.state.toggleKey(entry_0.key);
+					handled = true;
+				} else if (entry_0.parentKey != null) handled = focusEntry(tree.entries.find((candidate) => candidate.key === entry_0.parentKey));
+			} else if (event_0.key === "ArrowDown") handled = focusEntry(tree.entries[index + 1]);
+			else if (event_0.key === "ArrowUp") handled = focusEntry(tree.entries[index - 1]);
+			if (handled) {
+				event_0.preventDefault();
+				event_0.stopPropagation();
+				return;
+			}
+			if (pendingFocusKey.current != null && [
+				"ArrowDown",
+				"ArrowUp",
+				"ArrowRight",
+				"ArrowLeft"
+			].includes(event_0.key)) {
+				event_0.preventDefault();
+				event_0.stopPropagation();
+				return;
+			}
+			gridProps.onKeyDownCapture?.(event_0);
+		};
+		$[3] = gridProps;
+		$[4] = tree.entries;
+		$[5] = tree.state;
+		$[6] = t2;
+	} else t2 = $[6];
+	const handleKeyDownCapture = t2;
+	let t3;
+	if ($[7] !== gridProps || $[8] !== tableProps) {
+		t3 = mergeProps$1(gridProps, tableProps);
+		$[7] = gridProps;
+		$[8] = tableProps;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== children || $[11] !== handleBlurCapture || $[12] !== handleKeyDownCapture || $[13] !== style || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx("table", {
+			...t3,
+			ref,
+			role: "treegrid",
+			style,
+			onBlurCapture: handleBlurCapture,
+			onKeyDownCapture: handleKeyDownCapture,
+			children
+		});
+		$[10] = children;
+		$[11] = handleBlurCapture;
+		$[12] = handleKeyDownCapture;
+		$[13] = style;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+}
+
+//#endregion
+export { TreeGridTable };
+//# sourceMappingURL=TreeGridTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeGridTable.js","names":["useEffect","useRef","useTree","mergeProps","Key","CSSProperties","FocusEvent","ReactFocusEvent","KeyboardEvent","ReactKeyboardEvent","ReactNode","TableTreeNode","TableViewProps","TreeGridTable","props","$","_c","tree","tableProps","style","children","ref","pendingFocusKey","gridProps","ariaProps","state","t0","Symbol","for","key","current","activeElement","document","body","contains","target","Array","from","querySelectorAll","find","element","dataset","String","focus","t1","event","pendingKey","nextTarget","relatedTarget","Element","nextRow","closest","onBlurCapture","handleBlurCapture","t2","entries","event_0","row","HTMLElement","onKeyDownCapture","currentKey","index","findIndex","entry","entry_0","focusEntry","next","selectionManager","setFocusedKey","target_0","element_0","hasChildren","length","isExpanded","expandedKeys","has","handled","toggleKey","parentKey","candidate","preventDefault","stopPropagation","includes","handleKeyDownCapture","t3","t4"],"sources":["../../../../src/components/data/TableBase/TreeGridTable.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useTree } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react/mergeProps';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n  CSSProperties,\n  FocusEvent as ReactFocusEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n} from 'react';\nimport type { TableTreeNode } from './table-tree';\nimport type { TableViewProps } from './TableView';\n\n/**\n * Hook boundary for the native table. Flat tables deliberately avoid this\n * component so their DOM and keyboard behaviour remain exactly as before.\n */\nexport function TreeGridTable<T>(props: {\n  tree: NonNullable<TableViewProps<T>['tree']>;\n  tableProps: Record<string, any>;\n  style?: CSSProperties;\n  children: ReactNode;\n}) {\n  const { tree, tableProps, style, children } = props;\n  const ref = useRef<HTMLTableElement>(null);\n  const pendingFocusKey = useRef<Key | null>(null);\n  const { gridProps } = useTree(tree.ariaProps as any, tree.state, ref);\n\n  // A virtualized destination may not exist until the focused key makes the\n  // parent virtualizer scroll and render another window. Retry after each\n  // render until that row mounts, then complete the keyboard focus move.\n  useEffect(() => {\n    const key = pendingFocusKey.current;\n    if (key == null) return;\n\n    // A real focus move wins over the delayed virtual-row focus. Losing the\n    // old row to virtualization leaves focus on <body>, whereas tabbing or\n    // clicking elsewhere leaves a concrete active element we must respect.\n    const activeElement = document.activeElement;\n    if (\n      activeElement &&\n      activeElement !== document.body &&\n      !ref.current?.contains(activeElement)\n    ) {\n      pendingFocusKey.current = null;\n      return;\n    }\n\n    const target = Array.from(\n      ref.current?.querySelectorAll<HTMLTableRowElement>(\n        'tbody tr[data-element=\"Row\"][data-key]',\n      ) ?? [],\n    ).find((element) => element.dataset.key === String(key));\n\n    if (target) {\n      pendingFocusKey.current = null;\n      target.focus();\n    }\n  });\n\n  const handleBlurCapture = (event: ReactFocusEvent<HTMLTableElement>) => {\n    const pendingKey = pendingFocusKey.current;\n    const nextTarget = event.relatedTarget;\n\n    if (pendingKey != null && nextTarget instanceof Element) {\n      const nextRow = nextTarget.closest<HTMLTableRowElement>(\n        'tbody tr[data-element=\"Row\"][data-key]',\n      );\n\n      if (nextRow?.dataset.key !== String(pendingKey)) {\n        pendingFocusKey.current = null;\n      }\n    }\n\n    (gridProps as any).onBlurCapture?.(event);\n  };\n\n  const handleKeyDownCapture = (\n    event: ReactKeyboardEvent<HTMLTableElement>,\n  ) => {\n    const row = (event.target as HTMLElement).closest<HTMLTableRowElement>(\n      'tbody tr[data-element=\"Row\"][data-key]',\n    );\n\n    // Inputs, links and menus embedded in a row retain their own shortcuts.\n    if (!row || event.target !== row) {\n      (gridProps as any).onKeyDownCapture?.(event);\n      return;\n    }\n\n    // While a virtual destination is still mounting, subsequent key presses\n    // continue from that logical key rather than repeatedly targeting the old\n    // DOM row that still owns focus.\n    const currentKey = pendingFocusKey.current ?? row.dataset.key;\n    const index = tree.entries.findIndex(\n      (entry) => String(entry.key) === String(currentKey),\n    );\n    const entry = tree.entries[index];\n    if (!entry) return;\n\n    const focusEntry = (next: TableTreeNode<T> | undefined) => {\n      if (!next) return false;\n      tree.state.selectionManager.setFocusedKey(next.key);\n      const target = Array.from(\n        ref.current?.querySelectorAll<HTMLTableRowElement>(\n          'tbody tr[data-element=\"Row\"][data-key]',\n        ) ?? [],\n      ).find((element) => element.dataset.key === String(next.key));\n      if (target) {\n        pendingFocusKey.current = null;\n        target.focus();\n      } else pendingFocusKey.current = next.key;\n      return true;\n    };\n\n    const hasChildren = entry.children.length > 0;\n    const isExpanded = tree.state.expandedKeys.has(entry.key);\n    let handled = false;\n\n    if (event.key === 'ArrowRight' && hasChildren) {\n      if (isExpanded) handled = focusEntry(entry.children[0]);\n      else {\n        tree.state.toggleKey(entry.key);\n        handled = true;\n      }\n    } else if (event.key === 'ArrowLeft') {\n      if (hasChildren && isExpanded) {\n        tree.state.toggleKey(entry.key);\n        handled = true;\n      } else if (entry.parentKey != null) {\n        handled = focusEntry(\n          tree.entries.find((candidate) => candidate.key === entry.parentKey),\n        );\n      }\n    } else if (event.key === 'ArrowDown') {\n      handled = focusEntry(tree.entries[index + 1]);\n    } else if (event.key === 'ArrowUp') {\n      handled = focusEntry(tree.entries[index - 1]);\n    }\n\n    if (handled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    // React Aria still sees the DOM row that owned focus before the virtual\n    // destination mounted. If a logical navigation key has no action there\n    // (a boundary, leaf, or collapsed root), consuming it avoids falling\n    // through and applying that key to the stale row instead.\n    if (\n      pendingFocusKey.current != null &&\n      ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    (gridProps as any).onKeyDownCapture?.(event);\n  };\n\n  return (\n    <table\n      {...mergeProps(gridProps, tableProps)}\n      ref={ref}\n      role=\"treegrid\"\n      style={style}\n      onBlurCapture={handleBlurCapture}\n      onKeyDownCapture={handleKeyDownCapture}\n    >\n      {children}\n    </table>\n  );\n}\n"],"mappings":"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"}

package/dist/components/data/TableBase/column-header.js

@@ -0,0 +1,94 @@
+/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
+import { ArrowNarrowDownIcon } from "../../../icons/ArrowNarrowDownIcon.js";
+import { ArrowNarrowUpIcon } from "../../../icons/ArrowNarrowUpIcon.js";
+import { TableHeaderItem } from "./styled.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data/TableBase/column-header.tsx
+/**
+* Resolves a column's sort state from `TableView`'s `sorts`, or from `sort`
+* when there is no `sorts`.
+*/
+function resolveColumnSort(column, sortMode, sorts, sort) {
+	const activeSorts = sorts ?? (sort ? [sort] : []);
+	const sortIndex = activeSorts.findIndex((entry) => entry.columnKey === column.key);
+	const activeSort = sortIndex === -1 ? null : activeSorts[sortIndex];
+	return {
+		isSortable: sortMode !== "off" && !column.isStructural && column.isSortable === true,
+		activeSort,
+		isSorted: activeSort != null,
+		rank: activeSorts.length > 1 ? sortIndex + 1 : null
+	};
+}
+/**
+* The sort arrow, or nothing for a column that cannot be sorted.
+*
+* The arrow keeps its slot even when unsorted, so turning a sort on and off
+* never shifts the label.
+*
+* Two glyphs rather than one flipped with `scale`. A narrow arrow flipped
+* vertically does land on its own opposite, but rendering the real icon is
+* what keeps that true — a glyph that is not perfectly symmetric would come
+* out subtly wrong, and nothing would say why.
+*
+* Unsorted shows the UP arrow, because that is what the first press gives:
+* the hint predicts the press rather than advertising that one is possible.
+*/
+function renderSortIndicator(sort) {
+	if (!sort.isSortable) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-element": "SortIndicator",
+		"data-rank": sort.rank ?? void 0,
+		"data-sorted": sort.isSorted ? "" : void 0,
+		"data-dir": sort.activeSort?.direction,
+		"aria-hidden": "true",
+		children: sort.activeSort?.direction === "desc" ? /* @__PURE__ */ jsx(ArrowNarrowDownIcon, {}) : /* @__PURE__ */ jsx(ArrowNarrowUpIcon, {})
+	});
+}
+/**
+* What a data column's header cell shows.
+*
+* `header.render` takes the whole cell over. Otherwise a `TableHeaderItem`
+* carries the title and the `header` slots, with the sort arrow and the
+* actions — the consumer's own, then `menuTrigger` — placed into them.
+*/
+function renderColumnHeaderContent(column, sort, menuTrigger) {
+	const header = column.header;
+	if (header?.render) {
+		const ctx = {
+			columnKey: column.key,
+			columnIndex: column.index,
+			sort: sort.activeSort?.direction ?? null,
+			isSortable: sort.isSortable,
+			isResizing: false,
+			width: column.width
+		};
+		return header.render(ctx);
+	}
+	if (column.title == null && !header) return null;
+	const sortIndicator = renderSortIndicator(sort);
+	const hasCustomRightIcon = header?.rightIcon != null;
+	const rightIcon = hasCustomRightIcon ? header.rightIcon : sortIndicator;
+	const suffixContent = hasCustomRightIcon ? sortIndicator : null;
+	const suffix = header?.suffix != null || suffixContent ? /* @__PURE__ */ jsxs(Fragment, { children: [header?.suffix, suffixContent] }) : void 0;
+	const actions = header?.actions != null || menuTrigger ? /* @__PURE__ */ jsxs(Fragment, { children: [header?.actions, menuTrigger] }) : void 0;
+	return /* @__PURE__ */ jsx(TableHeaderItem, {
+		icon: header?.icon,
+		rightIcon,
+		prefix: header?.prefix,
+		suffix,
+		description: header?.description,
+		descriptionPlacement: header?.descriptionPlacement,
+		tooltip: header?.tooltip ?? true,
+		theme: header?.theme,
+		actions,
+		autoHideActions: header?.autoHideActions ?? true,
+		preserveActionsSpace: actions != null,
+		styles: header?.styles,
+		children: column.title
+	});
+}
+
+//#endregion
+export { renderColumnHeaderContent, resolveColumnSort };
+//# sourceMappingURL=column-header.js.map

package/dist/components/data/TableBase/column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-header.js","names":["ArrowNarrowDownIcon","ArrowNarrowUpIcon","TableHeaderItem","ReactNode","CubeResolvedColumn","CubeTableHeaderContext","CubeTableSort","ColumnSortState","isSortable","activeSort","isSorted","rank","resolveColumnSort","column","T","sortMode","sorts","sort","activeSorts","sortIndex","findIndex","entry","columnKey","key","isStructural","length","renderSortIndicator","undefined","direction","renderColumnHeaderContent","menuTrigger","header","render","ctx","columnIndex","index","isResizing","width","title","sortIndicator","hasCustomRightIcon","rightIcon","suffixContent","suffix","actions","icon","prefix","description","descriptionPlacement","tooltip","theme","autoHideActions","styles"],"sources":["../../../../src/components/data/TableBase/column-header.tsx"],"sourcesContent":["import { ArrowNarrowDownIcon } from '../../../icons/ArrowNarrowDownIcon';\nimport { ArrowNarrowUpIcon } from '../../../icons/ArrowNarrowUpIcon';\n\nimport { TableHeaderItem } from './styled';\n\nimport type { ReactNode } from 'react';\nimport type {\n  CubeResolvedColumn,\n  CubeTableHeaderContext,\n  CubeTableSort,\n} from './types';\n\n/** Where a data column stands in the table's sort. */\nexport interface ColumnSortState {\n  isSortable: boolean;\n  /** This column's entry in the sort, or `null` when it is unsorted. */\n  activeSort: CubeTableSort | null;\n  isSorted: boolean;\n  /**\n   * 1-based precedence while more than one column is sorted (`0` for an\n   * unsorted column then), or `null` when it is not worth showing.\n   */\n  rank: number | null;\n}\n\n/**\n * Resolves a column's sort state from `TableView`'s `sorts`, or from `sort`\n * when there is no `sorts`.\n */\nexport function resolveColumnSort<T>(\n  column: CubeResolvedColumn<T>,\n  sortMode: 'client' | 'server' | 'off',\n  sorts: readonly CubeTableSort[] | undefined,\n  sort: CubeTableSort | null | undefined,\n): ColumnSortState {\n  // One resolution path for both shapes, so every consumer of `isSorted`\n  // stays unaware of which one the caller supplied.\n  const activeSorts = sorts ?? (sort ? [sort] : []);\n  const sortIndex = activeSorts.findIndex(\n    (entry) => entry.columnKey === column.key,\n  );\n  const activeSort = sortIndex === -1 ? null : activeSorts[sortIndex];\n\n  return {\n    isSortable:\n      sortMode !== 'off' && !column.isStructural && column.isSortable === true,\n    activeSort,\n    isSorted: activeSort != null,\n    // Only worth showing when more than one column is sorted — a lone \"1\"\n    // beside an arrow is noise.\n    rank: activeSorts.length > 1 ? sortIndex + 1 : null,\n  };\n}\n\n/**\n * The sort arrow, or nothing for a column that cannot be sorted.\n *\n * The arrow keeps its slot even when unsorted, so turning a sort on and off\n * never shifts the label.\n *\n * Two glyphs rather than one flipped with `scale`. A narrow arrow flipped\n * vertically does land on its own opposite, but rendering the real icon is\n * what keeps that true — a glyph that is not perfectly symmetric would come\n * out subtly wrong, and nothing would say why.\n *\n * Unsorted shows the UP arrow, because that is what the first press gives:\n * the hint predicts the press rather than advertising that one is possible.\n */\nfunction renderSortIndicator(sort: ColumnSortState) {\n  if (!sort.isSortable) return null;\n\n  return (\n    <div\n      data-element=\"SortIndicator\"\n      data-rank={sort.rank ?? undefined}\n      data-sorted={sort.isSorted ? '' : undefined}\n      data-dir={sort.activeSort?.direction}\n      aria-hidden=\"true\"\n    >\n      {sort.activeSort?.direction === 'desc' ? (\n        <ArrowNarrowDownIcon />\n      ) : (\n        <ArrowNarrowUpIcon />\n      )}\n    </div>\n  );\n}\n\n/**\n * What a data column's header cell shows.\n *\n * `header.render` takes the whole cell over. Otherwise a `TableHeaderItem`\n * carries the title and the `header` slots, with the sort arrow and the\n * actions — the consumer's own, then `menuTrigger` — placed into them.\n */\nexport function renderColumnHeaderContent<T>(\n  column: CubeResolvedColumn<T>,\n  sort: ColumnSortState,\n  menuTrigger: ReactNode,\n): ReactNode {\n  const header = column.header;\n\n  if (header?.render) {\n    const ctx: CubeTableHeaderContext = {\n      columnKey: column.key,\n      columnIndex: column.index,\n      sort: sort.activeSort?.direction ?? null,\n      isSortable: sort.isSortable,\n      isResizing: false,\n      width: column.width,\n    };\n\n    return header.render(ctx);\n  }\n\n  if (column.title == null && !header) return null;\n\n  const sortIndicator = renderSortIndicator(sort);\n\n  // The arrow belongs in the `rightIcon` slot: that slot is sized and aligned\n  // for an icon, while `suffix` is a text slot and puts the glyph on the\n  // label's baseline.\n  //\n  // A `header.rightIcon` the consumer asked for keeps the slot, and the arrow\n  // falls back to `suffix` — rare, and better than dropping either one.\n  const hasCustomRightIcon = header?.rightIcon != null;\n  const rightIcon = hasCustomRightIcon ? header!.rightIcon : sortIndicator;\n\n  const suffixContent = hasCustomRightIcon ? sortIndicator : null;\n  const suffix =\n    header?.suffix != null || suffixContent ? (\n      <>\n        {header?.suffix}\n        {suffixContent}\n      </>\n    ) : undefined;\n\n  // The consumer's own actions first, the overflow menu last — matching Tabs.\n  const actions =\n    header?.actions != null || menuTrigger ? (\n      <>\n        {header?.actions}\n        {menuTrigger}\n      </>\n    ) : undefined;\n\n  return (\n    <TableHeaderItem\n      icon={header?.icon}\n      rightIcon={rightIcon}\n      prefix={header?.prefix}\n      suffix={suffix}\n      description={header?.description}\n      descriptionPlacement={header?.descriptionPlacement}\n      tooltip={header?.tooltip ?? true}\n      theme={header?.theme}\n      actions={actions}\n      autoHideActions={header?.autoHideActions ?? true}\n      // Without it the actions slot animates its width from 0 on hover, which\n      // re-truncates the label — so the header text shifts under the cursor.\n      // Only the opacity should move; `TabElement` reserves the space for the\n      // same reason.\n      preserveActionsSpace={actions != null}\n      styles={header?.styles}\n    >\n      {column.title}\n    </TableHeaderItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAgBY,kBACdC,QACAE,UACAC,OACAC,MACiB;CAGjB,MAAMC,cAAcF,UAAUC,OAAO,CAACA,KAAK,GAAG,EAAE;CAChD,MAAME,YAAYD,YAAYE,WAC3BC,UAAUA,MAAMC,cAAcT,OAAOU,IACvC;CACD,MAAMd,aAAaU,cAAc,KAAK,OAAOD,YAAYC;AAEzD,QAAO;EACLX,YACEO,aAAa,SAAS,CAACF,OAAOW,gBAAgBX,OAAOL,eAAe;EACtEC;EACAC,UAAUD,cAAc;EAGxBE,MAAMO,YAAYO,SAAS,IAAIN,YAAY,IAAI;EAChD;;;;;;;;;;;;;;;;AAiBH,SAASO,oBAAoBT,MAAuB;AAClD,KAAI,CAACA,KAAKT,WAAY,QAAO;AAE7B,QACE,oBAAC;EACC,gBAAa;EACb,aAAWS,KAAKN,QAAQgB;EACxB,eAAaV,KAAKP,WAAW,KAAKiB;EAClC,YAAUV,KAAKR,YAAYmB;EAC3B,eAAY;YAEXX,KAAKR,YAAYmB,cAAc,SAC9B,oBAAC,wBAAsB,GAEvB,oBAAC,sBACF;GACG;;;;;;;;;AAWV,SAAgBC,0BACdhB,QACAI,MACAa,aACW;CACX,MAAMC,SAASlB,OAAOkB;AAEtB,KAAIA,QAAQC,QAAQ;EAClB,MAAMC,MAA8B;GAClCX,WAAWT,OAAOU;GAClBW,aAAarB,OAAOsB;GACpBlB,MAAMA,KAAKR,YAAYmB,aAAa;GACpCpB,YAAYS,KAAKT;GACjB4B,YAAY;GACZC,OAAOxB,OAAOwB;GACf;AAED,SAAON,OAAOC,OAAOC,IAAI;;AAG3B,KAAIpB,OAAOyB,SAAS,QAAQ,CAACP,OAAQ,QAAO;CAE5C,MAAMQ,gBAAgBb,oBAAoBT,KAAK;CAQ/C,MAAMuB,qBAAqBT,QAAQU,aAAa;CAChD,MAAMA,YAAYD,qBAAqBT,OAAQU,YAAYF;CAE3D,MAAMG,gBAAgBF,qBAAqBD,gBAAgB;CAC3D,MAAMI,SACJZ,QAAQY,UAAU,QAAQD,gBACxB,4CACGX,QAAQY,QACRD,iBACA,GACDf;CAGN,MAAMiB,UACJb,QAAQa,WAAW,QAAQd,cACzB,4CACGC,QAAQa,SACRd,eACA,GACDH;AAEN,QACE,oBAAC;EACC,MAAMI,QAAQc;EACHJ;EACX,QAAQV,QAAQe;EACRH;EACR,aAAaZ,QAAQgB;EACrB,sBAAsBhB,QAAQiB;EAC9B,SAASjB,QAAQkB,WAAW;EAC5B,OAAOlB,QAAQmB;EACNN;EACT,iBAAiBb,QAAQoB,mBAAmB;EAK5C,sBAAsBP,WAAW;EACjC,QAAQb,QAAQqB;YAEfvC,OAAOyB;GACQ"}

package/dist/components/data/TableBase/column-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
 import { __Menu } from "../../actions/Menu/Menu.js";
 import { normalizeMenuAction } from "./row-menu.js";
 import { Children, cloneElement, isValidElement } from "react";

package/dist/components/data/TableBase/column-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
 import { computeStyles, resolveRecipes } from "@tenphi/tasty";
 
 //#region src/components/data/TableBase/column-styles.ts

package/dist/components/data/TableBase/column-tint.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
 import { getPaletteConfig } from "../../../tokens/palette-config.js";
 import { hashString } from "../../../tokens/color-theme.js";
 

package/dist/components/data/TableBase/row-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
 import { Children, Fragment, isValidElement } from "react";
 
 //#region src/components/data/TableBase/row-menu.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.4 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { keyframes, tasty } from "@tenphi/tasty";
@@ -593,7 +593,8 @@ const TableTreeToggle = tasty(Action, {
 const TableTreeTogglePlaceholder = tasty({ styles: TREE_TOGGLE_STYLES });
 /**
 * The header cell's content. `Item` lives INSIDE the `<th>`, never as the `<th>`
-* itself — it emits `aria-selected` unconditionally (`Item.tsx:964`), which on a
+* itself — it emits `aria-selected` whenever `isSelected` is set (in
+* `renderItemElement`, unless the row sets `aria-pressed`), which on a
 * `columnheader` would claim the column is selected rather than sorted.
 *
 * Keeping it inside also means the `<th>` owns the interaction fill while