@cube-dev/ui-kit 0.128.0 → 0.130.0

package/dist/components/content/Tree/TreeNode.js

@@ -0,0 +1,132 @@
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { DirectionIcon } from "../../../icons/DirectionIcon.js";
+import { TreeNodeCheckboxWrapper, TreeNodeRow, TreeNodeToggle, TreeNodeTogglePlaceholder, TreeRowItem } from "./styled.js";
+import { __Checkbox } from "../../fields/Checkbox/Checkbox.js";
+import { memo, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useHover, useTreeItem } from "react-aria";
+
+//#region src/components/content/Tree/TreeNode.tsx
+const stopPropagation = (e) => {
+	e.stopPropagation();
+};
+function TreeNodeInner(props) {
+	const { node, data, state, isCheckable, isExpanded, isIndeterminate, isChecked, isLoading, onToggleChecked, size, itemProps, rowStyles, virtualStyle, virtualRef, virtualIndex } = props;
+	const rowRef = useRef(null);
+	const combinedRef = useMemo(() => virtualRef ? mergeRefs(rowRef, virtualRef) : rowRef, [virtualRef]);
+	const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem({ node }, state, rowRef);
+	const isDisabled = state.disabledKeys.has(node.key);
+	const isSelected = state.selectionManager.isSelected(node.key);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const isFocused = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
+	const isLeaf = data.isLeaf === true || data.isLeaf !== false && !node.hasChildNodes;
+	const isRowCheckable = isCheckable && data.isCheckable !== false;
+	const handleCheckboxChange = useEvent(() => {
+		onToggleChecked(String(node.key));
+	});
+	const handleKeyDown = useEvent((e) => {
+		if (e.key === " " && isRowCheckable && !isDisabled && !data.isCheckboxDisabled) {
+			e.preventDefault();
+			onToggleChecked(String(node.key));
+		}
+	});
+	const sharedMods = useMemo(() => ({
+		checked: isChecked,
+		indeterminate: isIndeterminate,
+		expanded: isExpanded,
+		loading: isLoading,
+		leaf: isLeaf,
+		"has-checkbox": isRowCheckable
+	}), [
+		isChecked,
+		isIndeterminate,
+		isExpanded,
+		isLoading,
+		isLeaf,
+		isRowCheckable
+	]);
+	const rowMods = useMemo(() => ({
+		...sharedMods,
+		disabled: isDisabled
+	}), [sharedMods, isDisabled]);
+	const itemMods = useMemo(() => ({
+		...sharedMods,
+		focused: isFocused,
+		hovered: isHovered,
+		pressed: isPressed
+	}), [
+		sharedMods,
+		isFocused,
+		isHovered,
+		isPressed
+	]);
+	const rowStyle = useMemo(() => ({
+		["--tree-level"]: String(node.level ?? 0),
+		...virtualStyle
+	}), [node.level, virtualStyle]);
+	const ariaChecked = isRowCheckable ? isIndeterminate ? "mixed" : isChecked ? "true" : "false" : void 0;
+	const finalRowProps = mergeProps$1(rowProps, hoverProps, {
+		"aria-checked": ariaChecked,
+		onKeyDown: handleKeyDown
+	});
+	const toggleNode = isLeaf ? /* @__PURE__ */ jsx(TreeNodeTogglePlaceholder, {
+		"aria-hidden": true,
+		"data-element": "Toggle"
+	}) : /* @__PURE__ */ jsx(TreeNodeToggle, {
+		...expandButtonProps,
+		tabIndex: -1,
+		"data-element": "Toggle",
+		children: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(DirectionIcon, { to: isExpanded ? "bottom" : "right" })
+	});
+	const checkboxNode = isRowCheckable ? /* @__PURE__ */ jsx(TreeNodeCheckboxWrapper, {
+		"data-element": "Checkbox",
+		role: "presentation",
+		onClick: stopPropagation,
+		onKeyDown: stopPropagation,
+		children: /* @__PURE__ */ jsx(__Checkbox, {
+			isSelected: isChecked,
+			isIndeterminate,
+			isDisabled: isDisabled || data.isCheckboxDisabled,
+			"aria-label": typeof data.title === "string" ? data.title : String(node.key),
+			onChange: handleCheckboxChange
+		})
+	}) : null;
+	const { prefix: userPrefix, ...restUserProps } = (typeof itemProps === "function" ? itemProps(data, {
+		isExpanded,
+		isSelected,
+		isChecked,
+		isIndeterminate,
+		isLeaf
+	}) : itemProps) ?? {};
+	const composedPrefix = checkboxNode || userPrefix ? /* @__PURE__ */ jsxs(Fragment$1, { children: [checkboxNode, userPrefix] }) : null;
+	return /* @__PURE__ */ jsx(TreeNodeRow, {
+		...finalRowProps,
+		ref: combinedRef,
+		mods: rowMods,
+		style: rowStyle,
+		"data-element": "Row",
+		"data-qa-key": String(node.key),
+		"data-index": virtualIndex,
+		children: /* @__PURE__ */ jsx(TreeRowItem, {
+			...gridCellProps,
+			...restUserProps,
+			size,
+			isSelected,
+			isDisabled,
+			mods: itemMods,
+			icon: toggleNode,
+			prefix: composedPrefix,
+			styles: rowStyles,
+			children: data.title
+		})
+	});
+}
+const TreeNode = memo(TreeNodeInner);
+
+//#endregion
+export { TreeNode };
+//# sourceMappingURL=TreeNode.js.map

package/dist/components/content/Tree/TreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.js","names":["mergeProps","Checkbox"],"sources":["../../../../src/components/content/Tree/TreeNode.tsx"],"sourcesContent":["import { memo, useMemo, useRef } from 'react';\nimport { useHover, useTreeItem } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { DirectionIcon, LoadingIcon } from '../../../icons';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { Checkbox } from '../../fields/Checkbox/Checkbox';\n\nimport {\n  TreeNodeCheckboxWrapper,\n  TreeNodeRow,\n  TreeNodeToggle,\n  TreeNodeTogglePlaceholder,\n  TreeRowItem,\n} from './styled';\n\nimport type { Node } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type { CSSProperties, KeyboardEvent, SyntheticEvent } from 'react';\nimport type { TreeState } from 'react-stately';\nimport type { CubeTreeNodeData, TreeItemProps, TreeNodeState } from './types';\n\nconst stopPropagation = (e: SyntheticEvent) => {\n  e.stopPropagation();\n};\n\nexport interface TreeNodeProps {\n  node: Node<CubeTreeNodeData>;\n  /** The original `CubeTreeNodeData` for this row, looked up by key. */\n  data: CubeTreeNodeData;\n  state: TreeState<CubeTreeNodeData>;\n\n  /** Whether the tree as a whole renders checkboxes. */\n  isCheckable: boolean;\n  /** Whether this row is currently expanded. */\n  isExpanded: boolean;\n  /** Whether the row is in an indeterminate (half-checked) state. */\n  isIndeterminate: boolean;\n  /** Whether the row is fully checked. */\n  isChecked: boolean;\n  /** Whether `loadData` is currently fetching this row's children. */\n  isLoading: boolean;\n\n  /** Toggle this row's checkbox (cascades). */\n  onToggleChecked: (key: string) => void;\n\n  /** Row size passed to the underlying Item. */\n  size?: string;\n\n  /** Per-node Item customization (static object or callback). */\n  itemProps?:\n    | TreeItemProps\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => TreeItemProps);\n\n  /** Styles applied to the visible row (`TreeRowItem`). */\n  rowStyles?: Styles;\n\n  /** Inline style for virtualizer absolute positioning. */\n  virtualStyle?: CSSProperties;\n  /** Ref callback from `@tanstack/react-virtual` to measure row height. */\n  virtualRef?: (element: HTMLElement | null) => void;\n  /** Virtual index for `data-index` attribute. */\n  virtualIndex?: number;\n}\n\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const {\n    node,\n    data,\n    state,\n    isCheckable,\n    isExpanded,\n    isIndeterminate,\n    isChecked,\n    isLoading,\n    onToggleChecked,\n    size,\n    itemProps,\n    rowStyles,\n    virtualStyle,\n    virtualRef,\n    virtualIndex,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const combinedRef = useMemo(\n    () => (virtualRef ? mergeRefs(rowRef, virtualRef) : rowRef),\n    [virtualRef],\n  );\n\n  const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem(\n    { node },\n    state,\n    rowRef,\n  );\n\n  const isDisabled = state.disabledKeys.has(node.key);\n  const isSelected = state.selectionManager.isSelected(node.key);\n\n  // `useTreeItem` doesn't track hover; we need it for the `hovered` mod.\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  // React Aria's treegrid uses roving tabindex, so no `data-focused`\n  // attribute lands on the row — mirror it as a mod manually.\n  const isFocused =\n    state.selectionManager.isFocused &&\n    state.selectionManager.focusedKey === node.key;\n  // For lazy rows with no children yet, still render a toggle unless\n  // explicitly marked as leaf.\n  const isLeaf =\n    data.isLeaf === true || (data.isLeaf !== false && !node.hasChildNodes);\n  const isRowCheckable = isCheckable && data.isCheckable !== false;\n\n  const handleCheckboxChange = useEvent(() => {\n    onToggleChecked(String(node.key));\n  });\n\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    if (\n      e.key === ' ' &&\n      isRowCheckable &&\n      !isDisabled &&\n      !data.isCheckboxDisabled\n    ) {\n      e.preventDefault();\n      onToggleChecked(String(node.key));\n    }\n  });\n\n  const sharedMods = useMemo(\n    () => ({\n      checked: isChecked,\n      indeterminate: isIndeterminate,\n      expanded: isExpanded,\n      loading: isLoading,\n      leaf: isLeaf,\n      'has-checkbox': isRowCheckable,\n    }),\n    [isChecked, isIndeterminate, isExpanded, isLoading, isLeaf, isRowCheckable],\n  );\n\n  const rowMods = useMemo(\n    () => ({ ...sharedMods, disabled: isDisabled }),\n    [sharedMods, isDisabled],\n  );\n\n  const itemMods = useMemo(\n    () => ({\n      ...sharedMods,\n      focused: isFocused,\n      hovered: isHovered,\n      pressed: isPressed,\n    }),\n    [sharedMods, isFocused, isHovered, isPressed],\n  );\n\n  const rowStyle = useMemo<CSSProperties>(\n    () => ({\n      ['--tree-level' as keyof CSSProperties]: String(node.level ?? 0),\n      ...virtualStyle,\n    }),\n    [node.level, virtualStyle],\n  );\n\n  // Only emit `aria-checked` when the tree is in checkable mode.\n  const ariaChecked: 'mixed' | 'true' | 'false' | undefined = isRowCheckable\n    ? isIndeterminate\n      ? 'mixed'\n      : isChecked\n        ? 'true'\n        : 'false'\n    : undefined;\n\n  const finalRowProps = mergeProps(rowProps, hoverProps, {\n    'aria-checked': ariaChecked,\n    onKeyDown: handleKeyDown,\n  });\n\n  // Leaf rows get a placeholder so sibling indents align.\n  const toggleNode = isLeaf ? (\n    <TreeNodeTogglePlaceholder aria-hidden data-element=\"Toggle\" />\n  ) : (\n    <TreeNodeToggle {...expandButtonProps} tabIndex={-1} data-element=\"Toggle\">\n      {isLoading ? (\n        <LoadingIcon />\n      ) : (\n        <DirectionIcon to={isExpanded ? 'bottom' : 'right'} />\n      )}\n    </TreeNodeToggle>\n  );\n\n  const checkboxNode = isRowCheckable ? (\n    <TreeNodeCheckboxWrapper\n      data-element=\"Checkbox\"\n      role=\"presentation\"\n      onClick={stopPropagation}\n      onKeyDown={stopPropagation}\n    >\n      <Checkbox\n        isSelected={isChecked}\n        isIndeterminate={isIndeterminate}\n        isDisabled={isDisabled || data.isCheckboxDisabled}\n        aria-label={\n          typeof data.title === 'string' ? data.title : String(node.key)\n        }\n        // @ts-expect-error AriaCheckboxProps loses `onChange` where InputDOMProps overlaps (react-types).\n        onChange={handleCheckboxChange}\n      />\n    </TreeNodeCheckboxWrapper>\n  ) : null;\n\n  const nodeState: TreeNodeState = {\n    isExpanded,\n    isSelected,\n    isChecked,\n    isIndeterminate,\n    isLeaf,\n  };\n  const resolvedItemProps =\n    typeof itemProps === 'function' ? itemProps(data, nodeState) : itemProps;\n  const { prefix: userPrefix, ...restUserProps } = resolvedItemProps ?? {};\n\n  const composedPrefix =\n    checkboxNode || userPrefix ? (\n      <>\n        {checkboxNode}\n        {userPrefix}\n      </>\n    ) : null;\n\n  return (\n    <TreeNodeRow\n      {...finalRowProps}\n      ref={combinedRef}\n      mods={rowMods}\n      style={rowStyle}\n      data-element=\"Row\"\n      data-qa-key={String(node.key)}\n      data-index={virtualIndex}\n    >\n      <TreeRowItem\n        {...gridCellProps}\n        {...restUserProps}\n        size={size}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        mods={itemMods}\n        icon={toggleNode}\n        prefix={composedPrefix}\n        styles={rowStyles}\n      >\n        {data.title}\n      </TreeRowItem>\n    </TreeNodeRow>\n  );\n}\n\nexport const TreeNode = memo(TreeNodeInner);\n"],"mappings":"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"}

package/dist/components/content/Tree/index.d.ts

@@ -0,0 +1,3 @@
+
+import { CubeTreeNodeData, CubeTreeProps, TreeLoadDataNode, TreeOnCheckInfo, TreeOnExpandInfo, TreeOnSelectInfo, TreeSelectionMode } from "./types.js";
+import { Tree } from "./Tree.js";

package/dist/components/content/Tree/styled.js

@@ -0,0 +1,145 @@
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
+import { _Item } from "../Item/Item.js";
+import { Action } from "../../actions/Action/Action.js";
+import { tasty } from "@tenphi/tasty";
+
+//#region src/components/content/Tree/styled.ts
+/**
+* Tree root.
+*
+* Renders as `role="treegrid"` (set on `gridProps` from `useTree`).
+*
+* Tree-wide modifiers (set on `TreeElement` itself):
+* - `has-height` — paired with `--tree-height` on inline `style`
+*   when the consumer passes a numeric `height` prop.
+*/
+const TreeElement = tasty({
+	qa: "Tree",
+	styles: {
+		display: "flex",
+		flow: "column",
+		width: "100%",
+		height: {
+			"": "auto",
+			"has-height": "fixed $tree-height"
+		},
+		flexGrow: {
+			"": 1,
+			"has-height": 0
+		},
+		flexShrink: {
+			"": 1,
+			"has-height": 0
+		},
+		flexBasis: {
+			"": 0,
+			"has-height": "auto"
+		},
+		minHeight: 0,
+		overflow: "auto",
+		scrollbar: "thin",
+		fill: "#clear",
+		color: "#dark",
+		transition: "theme",
+		outline: 0,
+		padding: 0
+	}
+});
+/**
+* Per-row wrapper carrying `role="row"`, `rowProps` from
+* `useTreeItem`, and the `--tree-level` CSS custom property used by
+* `TreeRowItem` to compute its left padding.
+*
+* Has no visual styles of its own — the row's appearance lives on
+* the inner `TreeRowItem` (which extends `Item`).
+*/
+const TreeNodeRow = tasty({
+	qa: "TreeRow",
+	styles: {
+		display: "block",
+		width: "100%",
+		outline: 0
+	}
+});
+/**
+* The visible row: an `Item` extension that owns layout (full-width,
+* tree indent) only. Color treatment is delegated to the
+* `default.item` variant (see `DEFAULT_ITEM_STYLES` in
+* `data/item-themes.ts`) so the Tree row matches the canonical Item
+* look out of the box. `hovered` / `focused` / `pressed` mods are
+* propagated from `TreeNode` because react-aria's treegrid uses a
+* roving-tabindex "virtual focus" model and never sets those data
+* attributes itself.
+*/
+const TreeRowItem = tasty(_Item, {
+	qa: "TreeItem",
+	type: "item",
+	size: "medium",
+	as: "div",
+	styles: {
+		display: "grid",
+		width: "100%",
+		padding: "left ($tree-indent * 1.5x)",
+		"$tree-indent": "($tree-level, 0)",
+		cursor: {
+			"": "pointer",
+			disabled: "not-allowed"
+		}
+	}
+});
+/**
+* Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s
+* built-in Prefix padding collapses to `0` whenever there's an icon
+* (which is always true for tree rows because the toggle/placeholder
+* occupies the icon slot). We re-introduce a small inline gap on
+* both sides so the checkbox isn't flush against the chevron and the
+* title.
+*/
+const TreeNodeCheckboxWrapper = tasty({
+	qa: "TreeNodeCheckboxWrapper",
+	styles: {
+		display: "grid",
+		placeItems: "center",
+		placeContent: "center",
+		padding: "0 1x"
+	}
+});
+const TOGGLE_BASE_STYLES = {
+	display: "grid",
+	placeItems: "center",
+	placeContent: "center",
+	width: "3x",
+	height: "3x",
+	radius: true,
+	transition: "theme"
+};
+/**
+* Chevron toggle button placed in `Item`'s `icon` slot. Spreads
+* `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and
+* stops the press from bubbling to the row's selection handler via
+* React Aria's PressResponder.
+*/
+const TreeNodeToggle = tasty(Action, {
+	qa: "TreeNodeToggle",
+	styles: {
+		...TOGGLE_BASE_STYLES,
+		color: {
+			"": "#dark-02",
+			":hover": "#dark"
+		},
+		fill: {
+			"": "#clear",
+			":hover": "#dark.04"
+		}
+	}
+});
+/**
+* Non-interactive placeholder that occupies the same footprint as
+* `TreeNodeToggle` so leaf rows visually align with siblings that
+* have a chevron.
+*/
+const TreeNodeTogglePlaceholder = tasty({ styles: TOGGLE_BASE_STYLES });
+
+//#endregion
+export { TreeElement, TreeNodeCheckboxWrapper, TreeNodeRow, TreeNodeToggle, TreeNodeTogglePlaceholder, TreeRowItem };
+//# sourceMappingURL=styled.js.map

package/dist/components/content/Tree/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/content/Tree/styled.ts"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../Item';\n\n/**\n * Tree root.\n *\n * Renders as `role=\"treegrid\"` (set on `gridProps` from `useTree`).\n *\n * Tree-wide modifiers (set on `TreeElement` itself):\n * - `has-height` — paired with `--tree-height` on inline `style`\n *   when the consumer passes a numeric `height` prop.\n */\nexport const TreeElement = tasty({\n  qa: 'Tree',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    width: '100%',\n    height: { '': 'auto', 'has-height': 'fixed $tree-height' },\n    flexGrow: { '': 1, 'has-height': 0 },\n    flexShrink: { '': 1, 'has-height': 0 },\n    flexBasis: { '': 0, 'has-height': 'auto' },\n    minHeight: 0,\n    overflow: 'auto',\n    scrollbar: 'thin',\n    fill: '#clear',\n    color: '#dark',\n    transition: 'theme',\n    outline: 0,\n    padding: 0,\n  },\n});\n\n/**\n * Per-row wrapper carrying `role=\"row\"`, `rowProps` from\n * `useTreeItem`, and the `--tree-level` CSS custom property used by\n * `TreeRowItem` to compute its left padding.\n *\n * Has no visual styles of its own — the row's appearance lives on\n * the inner `TreeRowItem` (which extends `Item`).\n */\nexport const TreeNodeRow = tasty({\n  qa: 'TreeRow',\n  styles: {\n    display: 'block',\n    width: '100%',\n    outline: 0,\n  },\n});\n\n/**\n * The visible row: an `Item` extension that owns layout (full-width,\n * tree indent) only. Color treatment is delegated to the\n * `default.item` variant (see `DEFAULT_ITEM_STYLES` in\n * `data/item-themes.ts`) so the Tree row matches the canonical Item\n * look out of the box. `hovered` / `focused` / `pressed` mods are\n * propagated from `TreeNode` because react-aria's treegrid uses a\n * roving-tabindex \"virtual focus\" model and never sets those data\n * attributes itself.\n */\nexport const TreeRowItem = tasty(Item, {\n  qa: 'TreeItem',\n  type: 'item',\n  size: 'medium',\n  as: 'div',\n  styles: {\n    /**\n     * `Item` is `inline-grid` by default, which leaves baseline\n     * descender space below the row inside the block-level\n     * `TreeNodeRow` and visually inflates the gap between rows\n     * past the intended `1bw`. Force block-level grid here.\n     */\n    display: 'grid',\n    width: '100%',\n    /**\n     * Per-level indent. `$tree-indent` is a local token that reads\n     * `--tree-level` (set inline on the parent `TreeNodeRow`) with a\n     * `0` fallback. Using `padding` shorthand (instead of\n     * `paddingInlineStart`) so it overrides `Item`'s default\n     * `padding: 0` reliably — a longhand override on a shorthand\n     * loses to it in the cascade when both are emitted from the same\n     * declaration block.\n     */\n    padding: 'left ($tree-indent * 1.5x)',\n    '$tree-indent': '($tree-level, 0)',\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n/**\n * Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s\n * built-in Prefix padding collapses to `0` whenever there's an icon\n * (which is always true for tree rows because the toggle/placeholder\n * occupies the icon slot). We re-introduce a small inline gap on\n * both sides so the checkbox isn't flush against the chevron and the\n * title.\n */\nexport const TreeNodeCheckboxWrapper = tasty({\n  qa: 'TreeNodeCheckboxWrapper',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    placeContent: 'center',\n    padding: '0 1x',\n  },\n});\n\nconst TOGGLE_BASE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/**\n * Chevron toggle button placed in `Item`'s `icon` slot. Spreads\n * `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and\n * stops the press from bubbling to the row's selection handler via\n * React Aria's PressResponder.\n */\nexport const TreeNodeToggle = tasty(Action, {\n  qa: 'TreeNodeToggle',\n  styles: {\n    ...TOGGLE_BASE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/**\n * Non-interactive placeholder that occupies the same footprint as\n * `TreeNodeToggle` so leaf rows visually align with siblings that\n * have a chevron.\n */\nexport const TreeNodeTogglePlaceholder = tasty({\n  styles: TOGGLE_BASE_STYLES,\n});\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAQ,cAAc;GAAsB;EAC1D,UAAU;GAAE,IAAI;GAAG,cAAc;GAAG;EACpC,YAAY;GAAE,IAAI;GAAG,cAAc;GAAG;EACtC,WAAW;GAAE,IAAI;GAAG,cAAc;GAAQ;EAC1C,WAAW;EACX,UAAU;EACV,WAAW;EACX,MAAM;EACN,OAAO;EACP,YAAY;EACZ,SAAS;EACT,SAAS;EACV;CACF,CAAC;;;;;;;;;AAUF,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,SAAS;EACV;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,cAAc,MAAMA,OAAM;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EAON,SAAS;EACT,OAAO;EAUP,SAAS;EACT,gBAAgB;EAChB,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;;;;;;;;;AAUF,MAAa,0BAA0B,MAAM;CAC3C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,SAAS;EACV;CACF,CAAC;AAEF,MAAM,qBAA6B;CACjC,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,YAAY;CACb;;;;;;;AAQD,MAAa,iBAAiB,MAAM,QAAQ;CAC1C,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,OAAO;GAAE,IAAI;GAAY,UAAU;GAAS;EAC5C,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC7C;CACF,CAAC;;;;;;AAOF,MAAa,4BAA4B,MAAM,EAC7C,QAAQ,oBACT,CAAC"}

package/dist/components/content/Tree/tree-index.js

@@ -0,0 +1,26 @@
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
+//#region src/components/content/Tree/tree-index.ts
+function buildTreeIndex(treeData) {
+	const byKey = /* @__PURE__ */ new Map();
+	const parentOf = /* @__PURE__ */ new Map();
+	const childrenOf = /* @__PURE__ */ new Map();
+	const visit = (nodes, parent) => {
+		for (const node of nodes) {
+			byKey.set(node.key, node);
+			parentOf.set(node.key, parent);
+			const childKeys = (node.children ?? []).map((c) => c.key);
+			childrenOf.set(node.key, childKeys);
+			if (node.children) visit(node.children, node.key);
+		}
+	};
+	visit(treeData, null);
+	return {
+		byKey,
+		parentOf,
+		childrenOf
+	};
+}
+
+//#endregion
+export { buildTreeIndex };
+//# sourceMappingURL=tree-index.js.map

package/dist/components/content/Tree/tree-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-index.js","names":[],"sources":["../../../../src/components/content/Tree/tree-index.ts"],"sourcesContent":["import type { CubeTreeNodeData } from './types';\n\n/**\n * Map of `key -> { node, parentKey, childKeys }` for fast cascading lookups.\n *\n * Built from the public `treeData` rather than from React Stately's\n * collection, because we need the consumer's original (controlled)\n * shape to derive parent/child relationships and to call back with the\n * actual `node` objects.\n *\n * Shared between `Tree.tsx` (for `nodesByKey` / `parentOf`) and\n * `useCheckboxTree` (cascading checked state) so a single tree walk\n * powers all three maps.\n */\nexport interface TreeIndex {\n  byKey: Map<string, CubeTreeNodeData>;\n  parentOf: Map<string, string | null>;\n  childrenOf: Map<string, string[]>;\n}\n\nexport function buildTreeIndex(treeData: CubeTreeNodeData[]): TreeIndex {\n  const byKey = new Map<string, CubeTreeNodeData>();\n  const parentOf = new Map<string, string | null>();\n  const childrenOf = new Map<string, string[]>();\n\n  const visit = (nodes: CubeTreeNodeData[], parent: string | null) => {\n    for (const node of nodes) {\n      byKey.set(node.key, node);\n      parentOf.set(node.key, parent);\n      const childKeys = (node.children ?? []).map((c) => c.key);\n      childrenOf.set(node.key, childKeys);\n      if (node.children) {\n        visit(node.children, node.key);\n      }\n    }\n  };\n\n  visit(treeData, null);\n\n  return { byKey, parentOf, childrenOf };\n}\n"],"mappings":";;AAoBA,SAAgB,eAAe,UAAyC;CACtE,MAAM,wBAAQ,IAAI,KAA+B;CACjD,MAAM,2BAAW,IAAI,KAA4B;CACjD,MAAM,6BAAa,IAAI,KAAuB;CAE9C,MAAM,SAAS,OAA2B,WAA0B;AAClE,OAAK,MAAM,QAAQ,OAAO;AACxB,SAAM,IAAI,KAAK,KAAK,KAAK;AACzB,YAAS,IAAI,KAAK,KAAK,OAAO;GAC9B,MAAM,aAAa,KAAK,YAAY,EAAE,EAAE,KAAK,MAAM,EAAE,IAAI;AACzD,cAAW,IAAI,KAAK,KAAK,UAAU;AACnC,OAAI,KAAK,SACP,OAAM,KAAK,UAAU,KAAK,IAAI;;;AAKpC,OAAM,UAAU,KAAK;AAErB,QAAO;EAAE;EAAO;EAAU;EAAY"}

package/dist/components/content/Tree/types.d.ts

@@ -0,0 +1,174 @@
+
+import { CubeItemProps } from "../Item/Item.js";
+import { SizeName } from "../../../tokens/sizes.js";
+import { BaseProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+import { Key as Key$1 } from "@react-types/shared";
+
+//#region src/components/content/Tree/types.d.ts
+/** Selection cardinality, mirroring React Aria/Stately's `selectionMode`. */
+type TreeSelectionMode = 'none' | 'single' | 'multiple';
+/**
+ * A single node in the `treeData` array.
+ *
+ * Mirrors AntD's `DataNode` shape but renames boolean flags to the
+ * `is*` convention used throughout `@cube-dev/ui-kit`.
+ */
+interface CubeTreeNodeData {
+  /** Unique identifier of the node. */
+  key: string;
+  /** Visible label (any `ReactNode`). */
+  title: ReactNode;
+  /** Children. Pass `undefined` together with `isLeaf={false}` for lazy nodes. */
+  children?: CubeTreeNodeData[];
+  /** Force leaf rendering (no expand toggle, no `loadData` call). */
+  isLeaf?: boolean;
+  /** Disable interactions on this row (focus / select / expand / check). */
+  isDisabled?: boolean;
+  /** Disable only the checkbox of this row. */
+  isCheckboxDisabled?: boolean;
+  /**
+   * Per-node `isCheckable` override.
+   *
+   * - `undefined` (default): inherits the tree-level `isCheckable`.
+   * - `false`: hide the checkbox for this row even when the tree is `isCheckable`.
+   */
+  isCheckable?: boolean;
+}
+/** Info passed as the second argument to `onCheck`. */
+interface TreeOnCheckInfo {
+  /** Whether the toggled node ended up checked. */
+  checked: boolean;
+  /** The toggled node. */
+  node: CubeTreeNodeData;
+  /** All currently checked nodes (flat). */
+  checkedNodes: CubeTreeNodeData[];
+  /** Keys of nodes in indeterminate state. */
+  halfCheckedKeys: Key$1[];
+}
+/** Info passed as the second argument to `onExpand`. */
+interface TreeOnExpandInfo {
+  /** Whether the toggled node ended up expanded. */
+  expanded: boolean;
+  /** The toggled node. */
+  node: CubeTreeNodeData;
+}
+/** Info passed as the second argument to `onSelect`. */
+interface TreeOnSelectInfo {
+  /** Whether the toggled node ended up selected. */
+  selected: boolean;
+  /** The toggled node. */
+  node: CubeTreeNodeData;
+  /** All currently selected nodes (flat). */
+  selectedNodes: CubeTreeNodeData[];
+}
+/** Current visual/interaction state of a tree node, passed as the second argument to `itemProps`. */
+interface TreeNodeState {
+  isExpanded: boolean;
+  isSelected: boolean;
+  isChecked: boolean;
+  isIndeterminate: boolean;
+  isLeaf: boolean;
+}
+/** Props that can be customized per tree node via `itemProps`. */
+type TreeItemProps = Partial<Pick<CubeItemProps, 'prefix' | 'suffix' | 'actions' | 'autoHideActions' | 'preserveActionsSpace' | 'description' | 'descriptionPlacement' | 'rightIcon' | 'tooltip' | 'highlight' | 'highlightCaseSensitive' | 'highlightStyles'>>;
+/** Argument shape for the `loadData` callback. */
+interface TreeLoadDataNode {
+  key: Key$1;
+  children?: CubeTreeNodeData[];
+}
+/**
+ * Public props for the `Tree` component.
+ *
+ * Designed to be a drop-in (modulo `is*` renames) for the AntD `Tree`
+ * `treeData` API, scoped to the v1 feature set.
+ */
+interface CubeTreeProps extends BaseProps, OuterStyleProps {
+  /** Hierarchical data describing the tree. */
+  treeData: CubeTreeNodeData[];
+  /** Render a checkbox in front of every (eligible) row. */
+  isCheckable?: boolean;
+  /** Allow row selection. Sugar for `selectionMode="none"` when `false`. */
+  isSelectable?: boolean;
+  /** Selection cardinality. Defaults to `'single'`. */
+  selectionMode?: TreeSelectionMode;
+  /** Row size. Defaults to `'medium'`. */
+  size?: SizeName;
+  /** Disable the entire tree. */
+  isDisabled?: boolean;
+  /** Default expanded keys (uncontrolled). */
+  defaultExpandedKeys?: string[];
+  /** Controlled expanded keys. */
+  expandedKeys?: string[];
+  /**
+   * Auto-expand parents of currently expanded keys.
+   *
+   * Useful while filtering: passing matched leaf keys with this flag will
+   * keep their parents expanded as well.
+   */
+  autoExpandParent?: boolean;
+  /** Default checked keys (uncontrolled). */
+  defaultCheckedKeys?: string[];
+  /**
+   * Controlled checked keys.
+   *
+   * Accepts either an array of keys or AntD's `{ checked, halfChecked }` shape.
+   */
+  checkedKeys?: string[] | {
+    checked: string[];
+    halfChecked?: string[];
+  };
+  /** Default selected keys (uncontrolled). */
+  defaultSelectedKeys?: string[];
+  /** Controlled selected keys. */
+  selectedKeys?: string[];
+  /**
+   * Fixed height in pixels. When omitted, the tree fills the available
+   * vertical space and scrolls internally.
+   */
+  height?: number;
+  /**
+   * Async loader called the first time a non-leaf node with no `children`
+   * is expanded. The consumer is expected to merge new children into
+   * `treeData` (typical AntD pattern).
+   */
+  loadData?: (node: TreeLoadDataNode) => Promise<void>;
+  /** Called when a node is expanded or collapsed. */
+  onExpand?: (expandedKeys: Key$1[], info: TreeOnExpandInfo) => void;
+  /**
+   * Called when a node is checked or unchecked.
+   *
+   * The first argument is `Key[]` by default; pass `checkedKeys` as
+   * `{ checked, halfChecked }` to receive the same shape back.
+   */
+  onCheck?: (checked: Key$1[] | {
+    checked: Key$1[];
+    halfChecked: Key$1[];
+  }, info: TreeOnCheckInfo) => void;
+  /** Called when row selection changes. */
+  onSelect?: (selectedKeys: Key$1[], info: TreeOnSelectInfo) => void;
+  /**
+   * Customize Item props per tree node.
+   *
+   * Accepts a static object (applied to every row) or a callback that
+   * receives the node data and returns props for that row.
+   *
+   * Supported props: `prefix`, `suffix`, `actions`, `autoHideActions`,
+   * `preserveActionsSpace`, `description`, `descriptionPlacement`,
+   * `rightIcon`, `tooltip`, `highlight`, `highlightCaseSensitive`,
+   * `highlightStyles`.
+   *
+   * The `icon` slot is reserved for the expand/collapse toggle.
+   * Use `prefix` for custom node icons.
+   */
+  itemProps?: TreeItemProps | ((data: CubeTreeNodeData, state: TreeNodeState) => TreeItemProps);
+  /** Override styles for `[data-element="Row"]` (per-row root). */
+  rowStyles?: Styles;
+  /** Accessible label for the tree. Defaults to `"Tree"`. */
+  ariaLabel?: string;
+  /** QA selector. */
+  qa?: string;
+}
+//#endregion
+export { CubeTreeNodeData, CubeTreeProps, TreeLoadDataNode, TreeOnCheckInfo, TreeOnExpandInfo, TreeOnSelectInfo, TreeSelectionMode };
+//# sourceMappingURL=types.d.ts.map