@cube-dev/ui-kit 0.0.0-canary-7298754 → 0.0.0-canary-cb3e2bd

package/dist/components/content/Paragraph.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { _Text } from "./Text.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "@tenphi/tasty";

package/dist/components/content/Placeholder/Placeholder.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/PrismCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7298754 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

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

@@ -0,0 +1,27 @@
+
+import { CubeTreeProps } from "./types.js";
+import * as react from "react";
+
+//#region src/components/content/Tree/Tree.d.ts
+/**
+ * Hierarchical data display with optional checkboxes, single/multi
+ * selection, async lazy loading, and keyboard navigation.
+ *
+ * Built on `useTree` / `useTreeState` (React Aria + React Stately) and
+ * styled with Tasty.
+ *
+ * @example
+ * ```tsx
+ * <Tree
+ *   treeData={data}
+ *   isCheckable
+ *   selectionMode="none"
+ *   defaultExpandedKeys={['root']}
+ *   onCheck={(keys) => console.log(keys)}
+ * />
+ * ```
+ */
+declare const Tree: react.ForwardRefExoticComponent<CubeTreeProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tree };
+//# sourceMappingURL=Tree.d.ts.map

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

@@ -0,0 +1,317 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { TreeElement } from "./styled.js";
+import { TreeNode } from "./TreeNode.js";
+import { useCheckboxTree } from "./use-checkbox-tree.js";
+import { useLoadData } from "./use-load-data.js";
+import { OUTER_STYLES } from "@tenphi/tasty";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTree } from "react-aria";
+import { Item, useTreeState } from "react-stately";
+
+//#region src/components/content/Tree/Tree.tsx
+/**
+* Render an `<Item>` for React Stately's collection builder.
+*
+* The visible row content is rendered by `TreeNode` via a
+* `nodesByKey` lookup, so the `<Item>`'s body is only used by
+* Stately to build the collection (`textValue` for keyboard nav,
+* `childItems` for nested traversal).
+*
+* For nested traversal to work, the `children` of the `<Tree>` must
+* be passed as a *function* together with the top-level `items`
+* array — see the `<Tree>` `useCollection` call below. Stately
+* propagates that renderer into `childItems` so nested arrays of
+* raw `CubeTreeNodeData` are turned back into `<Item>` elements.
+*/
+function renderItem(node) {
+	return /* @__PURE__ */ jsx(Item, {
+		textValue: typeof node.title === "string" ? node.title : String(node.key),
+		childItems: node.children,
+		children: node.title
+	}, node.key);
+}
+/** Walk the treeData and build a flat `key -> node` index. */
+function buildNodesByKey(treeData) {
+	const map = /* @__PURE__ */ new Map();
+	const visit = (nodes) => {
+		for (const node of nodes) {
+			map.set(node.key, node);
+			if (node.children) visit(node.children);
+		}
+	};
+	visit(treeData);
+	return map;
+}
+/** Walk the treeData and collect all keys whose `isDisabled === true`. */
+function collectDisabledKeys(treeData, treeIsDisabled) {
+	const keys = [];
+	const visit = (nodes) => {
+		for (const node of nodes) {
+			if (treeIsDisabled || node.isDisabled) keys.push(node.key);
+			if (node.children) visit(node.children);
+		}
+	};
+	visit(treeData);
+	return keys;
+}
+/**
+* Map `key -> parentKey` (used for `autoExpandParent`).
+*/
+function buildParentOf(treeData) {
+	const parentOf = /* @__PURE__ */ new Map();
+	const visit = (nodes, parent) => {
+		for (const node of nodes) {
+			parentOf.set(node.key, parent);
+			if (node.children) visit(node.children, node.key);
+		}
+	};
+	visit(treeData, null);
+	return parentOf;
+}
+/**
+* Expand the supplied keys with all of their ancestors. Used when
+* `autoExpandParent` is `true` so that the consumer can pass deep keys
+* (e.g. search matches) without having to manually walk parents.
+*/
+function expandWithParents(keys, parentOf) {
+	if (!keys || keys.length === 0) return keys;
+	const set = new Set(keys);
+	for (const key of keys) {
+		let parent = parentOf.get(key);
+		while (parent) {
+			set.add(parent);
+			parent = parentOf.get(parent);
+		}
+	}
+	return Array.from(set);
+}
+/**
+* Coerce the public `selectionMode` / `isSelectable` pair into a single
+* `selectionMode` value for `useTreeState`.
+*
+* - `selectionMode` wins when both are passed.
+* - `isSelectable === false` is sugar for `selectionMode='none'`.
+* - `selectionMode` defaults to `'single'` (matches AntD's default).
+*/
+function resolveSelectionMode(selectionMode, isSelectable) {
+	if (selectionMode != null) return selectionMode;
+	if (isSelectable === false) return "none";
+	return "single";
+}
+function TreeBase(props, ref) {
+	const { treeData, isCheckable = false, isSelectable, selectionMode: selectionModeProp, blockNode = false, isDisabled = false, defaultExpandedKeys, expandedKeys, autoExpandParent = false, defaultCheckedKeys, checkedKeys, defaultSelectedKeys, selectedKeys, height, loadData, onExpand, onCheck, onSelect, rowStyles, qa, ...otherProps } = props;
+	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
+	const treeRef = useRef(null);
+	const nodesByKey = useMemo(() => buildNodesByKey(treeData), [treeData]);
+	const parentOf = useMemo(() => buildParentOf(treeData), [treeData]);
+	const disabledKeys = useMemo(() => collectDisabledKeys(treeData, isDisabled), [treeData, isDisabled]);
+	const selectionMode = resolveSelectionMode(selectionModeProp, isSelectable);
+	/**
+	* Apply `autoExpandParent` to the controlled `expandedKeys`. This is
+	* a one-shot thing — once the consumer responds to `onExpand` and
+	* sets `autoExpandParent` to `false`, we stop force-expanding parents.
+	*/
+	const effectiveExpandedKeys = useMemo(() => autoExpandParent ? expandWithParents(expandedKeys, parentOf) : expandedKeys, [
+		autoExpandParent,
+		expandedKeys,
+		parentOf
+	]);
+	const checkbox = useCheckboxTree({
+		treeData,
+		isCheckable,
+		defaultCheckedKeys,
+		checkedKeys,
+		onCheck
+	});
+	const loadDataController = useLoadData({
+		nodesByKey,
+		loadData
+	});
+	/**
+	* Translate Stately's `Set<Key>` callbacks into the public AntD-flavoured
+	* `Key[]` shape and dispatch the per-key load.
+	*/
+	const handleExpandedChange = useEvent((nextSet) => {
+		loadDataController.onExpandedChanged(nextSet);
+		if (!onExpand) return;
+		const nextArr = Array.from(nextSet);
+		const previous = new Set(effectiveExpandedKeys ?? []);
+		/**
+		* Find the single key that toggled relative to the previous set.
+		* Useful for `info.node` and `info.expanded` — matches AntD.
+		*/
+		let toggledKey = null;
+		let toggledExpanded = false;
+		for (const k of nextArr) if (!previous.has(k)) {
+			toggledKey = k;
+			toggledExpanded = true;
+			break;
+		}
+		if (toggledKey == null) {
+			for (const k of previous) if (!nextSet.has(k)) {
+				toggledKey = k;
+				toggledExpanded = false;
+				break;
+			}
+		}
+		const node = toggledKey != null ? nodesByKey.get(String(toggledKey)) : void 0;
+		onExpand(nextArr, {
+			expanded: toggledExpanded,
+			node: node ?? {}
+		});
+	});
+	const handleSelectionChange = useEvent((selection) => {
+		if (!onSelect) return;
+		const arr = selection === "all" ? Array.from(nodesByKey.keys()) : Array.from(selection);
+		/**
+		* Stately's `onSelectionChange` hands us the *next* selection only —
+		* we don't get a "toggled key" diff for free. For `single` mode we
+		* can infer it cheaply (it's the only entry); for `multiple` we
+		* report the most recent addition. Falls back to the first key.
+		*/
+		let toggledKey = null;
+		let toggledSelected = false;
+		if (selectionMode === "single") {
+			toggledKey = arr[0] ?? null;
+			toggledSelected = arr.length > 0;
+		} else if (selection !== "all") {
+			toggledKey = arr.length > 0 ? arr[arr.length - 1] : null;
+			toggledSelected = arr.length > 0;
+		} else {
+			toggledKey = arr[0] ?? null;
+			toggledSelected = true;
+		}
+		const node = toggledKey != null ? nodesByKey.get(String(toggledKey)) : void 0;
+		const selectedNodes = arr.map((k) => nodesByKey.get(String(k))).filter((n) => !!n);
+		onSelect(arr, {
+			selected: toggledSelected,
+			node: node ?? {},
+			selectedNodes
+		});
+	});
+	/**
+	* Stately propagates the `children` function through `childItems`,
+	* so a single render function recursively turns the entire
+	* `treeData` array into `<Item>` elements.
+	*/
+	const renderCollectionItem = useEvent((item) => renderItem(item));
+	const ariaProps = useMemo(() => ({
+		selectionMode,
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelectionChange: onSelect && selectionMode !== "none" ? handleSelectionChange : void 0,
+		expandedKeys: effectiveExpandedKeys,
+		defaultExpandedKeys,
+		onExpandedChange: handleExpandedChange,
+		disabledKeys,
+		disabledBehavior: "all",
+		items: treeData,
+		children: renderCollectionItem,
+		"aria-label": "Tree"
+	}), [
+		selectionMode,
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelect,
+		handleSelectionChange,
+		effectiveExpandedKeys,
+		defaultExpandedKeys,
+		handleExpandedChange,
+		disabledKeys,
+		treeData,
+		renderCollectionItem
+	]);
+	const baseState = useTreeState(ariaProps);
+	/**
+	* The legacy `TreeCollection` returned by `useTreeState` doesn't
+	* implement `getChildren`, but `@react-aria/tree`'s `useTree`
+	* (via `useGridListItem`) calls it unguarded for any nested row
+	* (`node.level > 0`). Patch it once so `useTree` works on top of
+	* the legacy state without forking.
+	*/
+	const state = useMemo(() => {
+		const collection = baseState.collection;
+		if (typeof collection.getChildren === "function") return baseState;
+		const getChildren = (key) => {
+			const result = [];
+			const node = collection.getItem(key);
+			if (!node) return result;
+			for (const child of node.childNodes) result.push(child);
+			return result;
+		};
+		const patched = Object.assign(Object.create(Object.getPrototypeOf(collection)), collection, { getChildren });
+		return {
+			...baseState,
+			collection: patched
+		};
+	}, [baseState]);
+	const { gridProps } = useTree(ariaProps, state, treeRef);
+	/**
+	* Iterate the collection in DOM order. The TreeCollection only walks
+	* into expanded subtrees, so `getKeys()` already gives us *only*
+	* visible rows — no manual filtering required.
+	*/
+	const visibleNodes = useMemo(() => {
+		const out = [];
+		for (const key of state.collection.getKeys()) {
+			const node = state.collection.getItem(key);
+			if (node && node.type === "item") out.push(node);
+		}
+		return out;
+	}, [state.collection, state.expandedKeys]);
+	const heightStyle = useMemo(() => height != null ? { ["--tree-height"]: `${height}px` } : void 0, [height]);
+	const mods = useMemo(() => ({ "has-height": height != null }), [height]);
+	return /* @__PURE__ */ jsx(TreeElement, {
+		...mergeProps$1(gridProps, { ref: ref ?? treeRef }),
+		ref: ref ?? treeRef,
+		qa: qa ?? "Tree",
+		mods,
+		styles: baseStyles,
+		style: heightStyle,
+		children: visibleNodes.map((node) => {
+			const data = nodesByKey.get(String(node.key));
+			if (!data) return null;
+			return /* @__PURE__ */ jsx(TreeNode, {
+				node,
+				data,
+				state,
+				isCheckable,
+				isExpanded: state.expandedKeys.has(node.key),
+				isChecked: checkbox.checkedSet.has(String(node.key)),
+				isIndeterminate: checkbox.halfCheckedSet.has(String(node.key)),
+				isLoading: loadDataController.loadingKeys.has(String(node.key)),
+				isBlockNode: blockNode,
+				rowStyles,
+				onToggleChecked: checkbox.toggle
+			}, node.key);
+		})
+	});
+}
+const _Tree = forwardRef(TreeBase);
+/**
+* Hierarchical data display with optional checkboxes, single/multi
+* selection, async lazy loading, and keyboard navigation.
+*
+* Built on `useTree` / `useTreeState` (React Aria + React Stately) and
+* styled with Tasty.
+*
+* @example
+* ```tsx
+* <Tree
+*   treeData={data}
+*   isCheckable
+*   selectionMode="none"
+*   defaultExpandedKeys={['root']}
+*   onCheck={(keys) => console.log(keys)}
+* />
+* ```
+*/
+const Tree = _Tree;
+
+//#endregion
+export { Tree };
+//# sourceMappingURL=Tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","names":["mergeProps"],"sources":["../../../../src/components/content/Tree/Tree.tsx"],"sourcesContent":["import { OUTER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport { useTree } from 'react-aria';\nimport { Item, useTreeState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { TreeElement } from './styled';\nimport { TreeNode } from './TreeNode';\nimport { useCheckboxTree } from './use-checkbox-tree';\nimport { useLoadData } from './use-load-data';\n\nimport type { Key, Node, Selection } from '@react-types/shared';\nimport type { CSSProperties, ForwardedRef, ReactElement } from 'react';\nimport type {\n  CubeTreeNodeData,\n  CubeTreeProps,\n  TreeOnExpandInfo,\n  TreeOnSelectInfo,\n  TreeSelectionMode,\n} from './types';\n\n/**\n * Render an `<Item>` for React Stately's collection builder.\n *\n * The visible row content is rendered by `TreeNode` via a\n * `nodesByKey` lookup, so the `<Item>`'s body is only used by\n * Stately to build the collection (`textValue` for keyboard nav,\n * `childItems` for nested traversal).\n *\n * For nested traversal to work, the `children` of the `<Tree>` must\n * be passed as a *function* together with the top-level `items`\n * array — see the `<Tree>` `useCollection` call below. Stately\n * propagates that renderer into `childItems` so nested arrays of\n * raw `CubeTreeNodeData` are turned back into `<Item>` elements.\n */\nfunction renderItem(node: CubeTreeNodeData): ReactElement {\n  const textValue =\n    typeof node.title === 'string' ? node.title : String(node.key);\n  return (\n    <Item\n      key={node.key}\n      textValue={textValue}\n      childItems={node.children as CubeTreeNodeData[] | undefined}\n    >\n      {node.title as any}\n    </Item>\n  );\n}\n\n/** Walk the treeData and build a flat `key -> node` index. */\nfunction buildNodesByKey(\n  treeData: CubeTreeNodeData[],\n): Map<string, CubeTreeNodeData> {\n  const map = new Map<string, CubeTreeNodeData>();\n  const visit = (nodes: CubeTreeNodeData[]) => {\n    for (const node of nodes) {\n      map.set(node.key, node);\n      if (node.children) visit(node.children);\n    }\n  };\n  visit(treeData);\n  return map;\n}\n\n/** Walk the treeData and collect all keys whose `isDisabled === true`. */\nfunction collectDisabledKeys(\n  treeData: CubeTreeNodeData[],\n  treeIsDisabled: boolean,\n): string[] {\n  const keys: string[] = [];\n  const visit = (nodes: CubeTreeNodeData[]) => {\n    for (const node of nodes) {\n      if (treeIsDisabled || node.isDisabled) keys.push(node.key);\n      if (node.children) visit(node.children);\n    }\n  };\n  visit(treeData);\n  return keys;\n}\n\n/**\n * Map `key -> parentKey` (used for `autoExpandParent`).\n */\nfunction buildParentOf(\n  treeData: CubeTreeNodeData[],\n): Map<string, string | null> {\n  const parentOf = new Map<string, string | null>();\n  const visit = (nodes: CubeTreeNodeData[], parent: string | null) => {\n    for (const node of nodes) {\n      parentOf.set(node.key, parent);\n      if (node.children) visit(node.children, node.key);\n    }\n  };\n  visit(treeData, null);\n  return parentOf;\n}\n\n/**\n * Expand the supplied keys with all of their ancestors. Used when\n * `autoExpandParent` is `true` so that the consumer can pass deep keys\n * (e.g. search matches) without having to manually walk parents.\n */\nfunction expandWithParents(\n  keys: string[] | undefined,\n  parentOf: Map<string, string | null>,\n): string[] | undefined {\n  if (!keys || keys.length === 0) return keys;\n  const set = new Set<string>(keys);\n  for (const key of keys) {\n    let parent = parentOf.get(key);\n    while (parent) {\n      set.add(parent);\n      parent = parentOf.get(parent);\n    }\n  }\n  return Array.from(set);\n}\n\n/**\n * Coerce the public `selectionMode` / `isSelectable` pair into a single\n * `selectionMode` value for `useTreeState`.\n *\n * - `selectionMode` wins when both are passed.\n * - `isSelectable === false` is sugar for `selectionMode='none'`.\n * - `selectionMode` defaults to `'single'` (matches AntD's default).\n */\nfunction resolveSelectionMode(\n  selectionMode: TreeSelectionMode | undefined,\n  isSelectable: boolean | undefined,\n): TreeSelectionMode {\n  if (selectionMode != null) return selectionMode;\n  if (isSelectable === false) return 'none';\n  return 'single';\n}\n\nfunction TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {\n  const {\n    treeData,\n    isCheckable = false,\n    isSelectable,\n    selectionMode: selectionModeProp,\n    blockNode = false,\n    isDisabled = false,\n    defaultExpandedKeys,\n    expandedKeys,\n    autoExpandParent = false,\n    defaultCheckedKeys,\n    checkedKeys,\n    defaultSelectedKeys,\n    selectedKeys,\n    height,\n    loadData,\n    onExpand,\n    onCheck,\n    onSelect,\n    rowStyles,\n    qa,\n    ...otherProps\n  } = props;\n\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  const treeRef = useRef<HTMLDivElement>(null);\n\n  const nodesByKey = useMemo(() => buildNodesByKey(treeData), [treeData]);\n  const parentOf = useMemo(() => buildParentOf(treeData), [treeData]);\n\n  const disabledKeys = useMemo(\n    () => collectDisabledKeys(treeData, isDisabled),\n    [treeData, isDisabled],\n  );\n\n  const selectionMode = resolveSelectionMode(selectionModeProp, isSelectable);\n\n  /**\n   * Apply `autoExpandParent` to the controlled `expandedKeys`. This is\n   * a one-shot thing — once the consumer responds to `onExpand` and\n   * sets `autoExpandParent` to `false`, we stop force-expanding parents.\n   */\n  const effectiveExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(expandedKeys, parentOf)\n        : expandedKeys,\n    [autoExpandParent, expandedKeys, parentOf],\n  );\n\n  const checkbox = useCheckboxTree({\n    treeData,\n    isCheckable,\n    defaultCheckedKeys,\n    checkedKeys,\n    onCheck,\n  });\n\n  const loadDataController = useLoadData({ nodesByKey, loadData });\n\n  /**\n   * Translate Stately's `Set<Key>` callbacks into the public AntD-flavoured\n   * `Key[]` shape and dispatch the per-key load.\n   */\n  const handleExpandedChange = useEvent((nextSet: Set<Key>) => {\n    loadDataController.onExpandedChanged(nextSet);\n\n    if (!onExpand) return;\n    const nextArr: Key[] = Array.from(nextSet);\n    const previous = new Set<Key>(effectiveExpandedKeys ?? []);\n\n    /**\n     * Find the single key that toggled relative to the previous set.\n     * Useful for `info.node` and `info.expanded` — matches AntD.\n     */\n    let toggledKey: Key | null = null;\n    let toggledExpanded = false;\n    for (const k of nextArr) {\n      if (!previous.has(k)) {\n        toggledKey = k;\n        toggledExpanded = true;\n        break;\n      }\n    }\n    if (toggledKey == null) {\n      for (const k of previous) {\n        if (!nextSet.has(k)) {\n          toggledKey = k;\n          toggledExpanded = false;\n          break;\n        }\n      }\n    }\n\n    const node =\n      toggledKey != null ? nodesByKey.get(String(toggledKey)) : undefined;\n    const info: TreeOnExpandInfo = {\n      expanded: toggledExpanded,\n      node: node ?? ({} as CubeTreeNodeData),\n    };\n    onExpand(nextArr, info);\n  });\n\n  const handleSelectionChange = useEvent((selection: Selection) => {\n    if (!onSelect) return;\n    const arr: Key[] =\n      selection === 'all'\n        ? Array.from(nodesByKey.keys())\n        : Array.from(selection);\n    /**\n     * Stately's `onSelectionChange` hands us the *next* selection only —\n     * we don't get a \"toggled key\" diff for free. For `single` mode we\n     * can infer it cheaply (it's the only entry); for `multiple` we\n     * report the most recent addition. Falls back to the first key.\n     */\n    let toggledKey: Key | null = null;\n    let toggledSelected = false;\n    if (selectionMode === 'single') {\n      toggledKey = arr[0] ?? null;\n      toggledSelected = arr.length > 0;\n    } else if (selection !== 'all') {\n      toggledKey = arr.length > 0 ? arr[arr.length - 1] : null;\n      toggledSelected = arr.length > 0;\n    } else {\n      toggledKey = arr[0] ?? null;\n      toggledSelected = true;\n    }\n\n    const node =\n      toggledKey != null ? nodesByKey.get(String(toggledKey)) : undefined;\n    const selectedNodes = arr\n      .map((k) => nodesByKey.get(String(k)))\n      .filter((n): n is CubeTreeNodeData => !!n);\n\n    const info: TreeOnSelectInfo = {\n      selected: toggledSelected,\n      node: node ?? ({} as CubeTreeNodeData),\n      selectedNodes,\n    };\n\n    onSelect(arr, info);\n  });\n\n  /**\n   * Stately propagates the `children` function through `childItems`,\n   * so a single render function recursively turns the entire\n   * `treeData` array into `<Item>` elements.\n   */\n  const renderCollectionItem = useEvent((item: CubeTreeNodeData) =>\n    renderItem(item),\n  );\n\n  const ariaProps = useMemo(\n    () => ({\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelectionChange:\n        onSelect && selectionMode !== 'none'\n          ? handleSelectionChange\n          : undefined,\n      expandedKeys: effectiveExpandedKeys,\n      defaultExpandedKeys,\n      onExpandedChange: handleExpandedChange,\n      disabledKeys,\n      disabledBehavior: 'all' as const,\n      items: treeData,\n      children: renderCollectionItem as any,\n      'aria-label': 'Tree',\n    }),\n    [\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelect,\n      handleSelectionChange,\n      effectiveExpandedKeys,\n      defaultExpandedKeys,\n      handleExpandedChange,\n      disabledKeys,\n      treeData,\n      renderCollectionItem,\n    ],\n  );\n\n  const baseState = useTreeState<CubeTreeNodeData>(ariaProps);\n\n  /**\n   * The legacy `TreeCollection` returned by `useTreeState` doesn't\n   * implement `getChildren`, but `@react-aria/tree`'s `useTree`\n   * (via `useGridListItem`) calls it unguarded for any nested row\n   * (`node.level > 0`). Patch it once so `useTree` works on top of\n   * the legacy state without forking.\n   */\n  const state = useMemo(() => {\n    const collection = baseState.collection;\n    if (typeof (collection as any).getChildren === 'function') {\n      return baseState;\n    }\n    const getChildren = (key: Key): Iterable<Node<CubeTreeNodeData>> => {\n      const result: Node<CubeTreeNodeData>[] = [];\n      const node = collection.getItem(key);\n      if (!node) return result;\n      for (const child of node.childNodes) {\n        result.push(child);\n      }\n      return result;\n    };\n    const patched = Object.assign(\n      Object.create(Object.getPrototypeOf(collection)),\n      collection,\n      { getChildren },\n    );\n    return { ...baseState, collection: patched };\n  }, [baseState]);\n\n  const { gridProps } = useTree(ariaProps, state, treeRef);\n\n  /**\n   * Iterate the collection in DOM order. The TreeCollection only walks\n   * into expanded subtrees, so `getKeys()` already gives us *only*\n   * visible rows — no manual filtering required.\n   */\n  const visibleNodes: Node<CubeTreeNodeData>[] = useMemo(() => {\n    const out: Node<CubeTreeNodeData>[] = [];\n    for (const key of state.collection.getKeys()) {\n      const node = state.collection.getItem(key);\n      if (node && node.type === 'item') out.push(node);\n    }\n    return out;\n  }, [state.collection, state.expandedKeys]);\n\n  const heightStyle = useMemo<CSSProperties | undefined>(\n    () =>\n      height != null\n        ? ({\n            ['--tree-height' as keyof CSSProperties]: `${height}px`,\n          } as CSSProperties)\n        : undefined,\n    [height],\n  );\n\n  const mods = useMemo(\n    () => ({\n      'has-height': height != null,\n    }),\n    [height],\n  );\n\n  const elementProps = mergeProps(gridProps, {\n    ref: ref ?? treeRef,\n  });\n\n  return (\n    <TreeElement\n      {...elementProps}\n      ref={ref ?? treeRef}\n      qa={qa ?? 'Tree'}\n      mods={mods}\n      styles={baseStyles}\n      style={heightStyle}\n    >\n      {visibleNodes.map((node) => {\n        const data = nodesByKey.get(String(node.key));\n        if (!data) return null;\n        const isExpanded = state.expandedKeys.has(node.key);\n        return (\n          <TreeNode\n            key={node.key}\n            node={node}\n            data={data}\n            state={state}\n            isCheckable={isCheckable}\n            isExpanded={isExpanded}\n            isChecked={checkbox.checkedSet.has(String(node.key))}\n            isIndeterminate={checkbox.halfCheckedSet.has(String(node.key))}\n            isLoading={loadDataController.loadingKeys.has(String(node.key))}\n            isBlockNode={blockNode}\n            rowStyles={rowStyles}\n            onToggleChecked={checkbox.toggle}\n          />\n        );\n      })}\n    </TreeElement>\n  );\n}\n\nconst _Tree = forwardRef(TreeBase);\n\n/**\n * Hierarchical data display with optional checkboxes, single/multi\n * selection, async lazy loading, and keyboard navigation.\n *\n * Built on `useTree` / `useTreeState` (React Aria + React Stately) and\n * styled with Tasty.\n *\n * @example\n * ```tsx\n * <Tree\n *   treeData={data}\n *   isCheckable\n *   selectionMode=\"none\"\n *   defaultExpandedKeys={['root']}\n *   onCheck={(keys) => console.log(keys)}\n * />\n * ```\n */\nexport const Tree = _Tree;\n"],"mappings":"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"}

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

@@ -0,0 +1,131 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cb3e2bd | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.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 { jsx } from "react/jsx-runtime";
+import { useTreeItem } from "react-aria";
+
+//#region src/components/content/Tree/TreeNode.tsx
+const ROW_LEVEL_OFFSET = 0;
+function TreeNodeInner(props) {
+	const { node, data, state, isCheckable, isExpanded, isIndeterminate, isChecked, isLoading, isBlockNode, onToggleChecked, rowStyles } = props;
+	const rowRef = useRef(null);
+	const { rowProps, gridCellProps, expandButtonProps } = useTreeItem({ node }, state, rowRef);
+	const isDisabled = state.disabledKeys.has(node.key);
+	const isSelected = state.selectionManager.isSelected(node.key);
+	/**
+	* `useTreeItem` reports `aria-expanded` only on rows that *can* expand
+	* (i.e. have child nodes in the collection). For lazy rows with no
+	* children loaded yet but `isLeaf !== true`, we still want to render
+	* a toggle so the consumer can fire `loadData`.
+	*/
+	const isLeaf = data.isLeaf === true || data.isLeaf !== false && !node.hasChildNodes;
+	const isRowCheckable = isCheckable && data.isCheckable !== false;
+	const handleCheckboxClick = useEvent((e) => {
+		e.stopPropagation();
+	});
+	const handleCheckboxChange = useEvent(() => {
+		onToggleChecked(String(node.key));
+	});
+	const rowMods = useMemo(() => ({
+		checked: isChecked,
+		indeterminate: isIndeterminate,
+		expanded: isExpanded,
+		disabled: isDisabled,
+		loading: isLoading,
+		leaf: isLeaf,
+		"block-node": isBlockNode,
+		"has-checkbox": isRowCheckable
+	}), [
+		isChecked,
+		isIndeterminate,
+		isExpanded,
+		isDisabled,
+		isLoading,
+		isLeaf,
+		isBlockNode,
+		isRowCheckable
+	]);
+	const itemMods = useMemo(() => ({
+		checked: isChecked,
+		indeterminate: isIndeterminate,
+		expanded: isExpanded,
+		loading: isLoading,
+		leaf: isLeaf,
+		"has-checkbox": isRowCheckable
+	}), [
+		isChecked,
+		isIndeterminate,
+		isExpanded,
+		isLoading,
+		isLeaf,
+		isRowCheckable
+	]);
+	/**
+	* Indent each row by its depth. `node.level` is 0-based at the root.
+	* Pushed down via a CSS custom property so the styled element can
+	* compute padding without re-extracting styles per row.
+	*/
+	const levelStyle = useMemo(() => ({ ["--tree-level"]: String((node.level ?? ROW_LEVEL_OFFSET) - ROW_LEVEL_OFFSET) }), [node.level]);
+	/**
+	* `aria-checked` for treegrid rows that act as multi-state checkboxes.
+	* Only set when the tree is checkable, so we don't pollute the row
+	* with checkbox semantics in select-only mode.
+	*/
+	const ariaChecked = isRowCheckable ? isIndeterminate ? "mixed" : isChecked ? "true" : "false" : void 0;
+	const finalRowProps = mergeProps$1(rowProps, { "aria-checked": ariaChecked });
+	/**
+	* Always render a toggle slot — even for leaf rows — so siblings
+	* at the same indent level visually align. Leaves get a
+	* non-interactive placeholder (a plain div) so user clicks can't
+	* trigger anything.
+	*/
+	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: handleCheckboxClick,
+		onKeyDown: handleCheckboxClick,
+		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;
+	return /* @__PURE__ */ jsx(TreeNodeRow, {
+		...finalRowProps,
+		ref: rowRef,
+		mods: rowMods,
+		style: levelStyle,
+		"data-element": "Row",
+		"data-qa-key": String(node.key),
+		children: /* @__PURE__ */ jsx(TreeRowItem, {
+			...gridCellProps,
+			isSelected,
+			mods: itemMods,
+			icon: toggleNode,
+			prefix: checkboxNode,
+			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 { useTreeItem } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { DirectionIcon, LoadingIcon } from '../../../icons';\nimport { mergeProps } 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 {\n  CSSProperties,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n} from 'react';\nimport type { TreeState } from 'react-stately';\nimport type { CubeTreeNodeData } from './types';\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  /** Whether the entire tree is `blockNode`. */\n  isBlockNode: boolean;\n\n  /** Toggle this row's checkbox (cascades). */\n  onToggleChecked: (key: string) => void;\n\n  /** Styles applied to the visible row (`TreeRowItem`). */\n  rowStyles?: Styles;\n}\n\nconst ROW_LEVEL_OFFSET = 0; // root nodes start at level 0\n\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const {\n    node,\n    data,\n    state,\n    isCheckable,\n    isExpanded,\n    isIndeterminate,\n    isChecked,\n    isLoading,\n    isBlockNode,\n    onToggleChecked,\n    rowStyles,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const { rowProps, gridCellProps, expandButtonProps } = 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` reports `aria-expanded` only on rows that *can* expand\n   * (i.e. have child nodes in the collection). For lazy rows with no\n   * children loaded yet but `isLeaf !== true`, we still want to render\n   * a toggle so the consumer can fire `loadData`.\n   */\n  const isLeaf =\n    data.isLeaf === true || (data.isLeaf !== false && !node.hasChildNodes);\n  const isRowCheckable = isCheckable && data.isCheckable !== false;\n\n  const handleCheckboxClick = useEvent(\n    (e: ReactMouseEvent | ReactKeyboardEvent) => {\n      e.stopPropagation();\n    },\n  );\n\n  const handleCheckboxChange = useEvent(() => {\n    onToggleChecked(String(node.key));\n  });\n\n  const rowMods = useMemo(\n    () => ({\n      checked: isChecked,\n      indeterminate: isIndeterminate,\n      expanded: isExpanded,\n      disabled: isDisabled,\n      loading: isLoading,\n      leaf: isLeaf,\n      'block-node': isBlockNode,\n      'has-checkbox': isRowCheckable,\n    }),\n    [\n      isChecked,\n      isIndeterminate,\n      isExpanded,\n      isDisabled,\n      isLoading,\n      isLeaf,\n      isBlockNode,\n      isRowCheckable,\n    ],\n  );\n\n  const itemMods = 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  /**\n   * Indent each row by its depth. `node.level` is 0-based at the root.\n   * Pushed down via a CSS custom property so the styled element can\n   * compute padding without re-extracting styles per row.\n   */\n  const levelStyle = useMemo<CSSProperties>(\n    () => ({\n      ['--tree-level' as keyof CSSProperties]: String(\n        (node.level ?? ROW_LEVEL_OFFSET) - ROW_LEVEL_OFFSET,\n      ),\n    }),\n    [node.level],\n  );\n\n  /**\n   * `aria-checked` for treegrid rows that act as multi-state checkboxes.\n   * Only set when the tree is checkable, so we don't pollute the row\n   * with checkbox semantics in select-only mode.\n   */\n  const ariaChecked: ReactNode = isRowCheckable\n    ? isIndeterminate\n      ? 'mixed'\n      : isChecked\n        ? 'true'\n        : 'false'\n    : undefined;\n\n  const finalRowProps = mergeProps(rowProps, {\n    'aria-checked': ariaChecked as string | boolean | undefined,\n  });\n\n  /**\n   * Always render a toggle slot — even for leaf rows — so siblings\n   * at the same indent level visually align. Leaves get a\n   * non-interactive placeholder (a plain div) so user clicks can't\n   * trigger anything.\n   */\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={handleCheckboxClick}\n      onKeyDown={handleCheckboxClick}\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  return (\n    <TreeNodeRow\n      {...finalRowProps}\n      ref={rowRef}\n      mods={rowMods}\n      style={levelStyle}\n      data-element=\"Row\"\n      data-qa-key={String(node.key)}\n    >\n      <TreeRowItem\n        {...gridCellProps}\n        isSelected={isSelected}\n        mods={itemMods}\n        icon={toggleNode}\n        prefix={checkboxNode}\n        styles={rowStyles}\n      >\n        {data.title}\n      </TreeRowItem>\n    </TreeNodeRow>\n  );\n}\n\nexport const TreeNode = memo(TreeNodeInner);\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAM,mBAAmB;AAEzB,SAAS,cAAc,OAAsB;CAC3C,MAAM,EACJ,MACA,MACA,OACA,aACA,YACA,iBACA,WACA,WACA,aACA,iBACA,cACE;CAEJ,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,EAAE,UAAU,eAAe,sBAAsB,YACrD,EAAE,MAAM,EACR,OACA,OACD;CAED,MAAM,aAAa,MAAM,aAAa,IAAI,KAAK,IAAI;CACnD,MAAM,aAAa,MAAM,iBAAiB,WAAW,KAAK,IAAI;;;;;;;CAO9D,MAAM,SACJ,KAAK,WAAW,QAAS,KAAK,WAAW,SAAS,CAAC,KAAK;CAC1D,MAAM,iBAAiB,eAAe,KAAK,gBAAgB;CAE3D,MAAM,sBAAsB,UACzB,MAA4C;AAC3C,IAAE,iBAAiB;GAEtB;CAED,MAAM,uBAAuB,eAAe;AAC1C,kBAAgB,OAAO,KAAK,IAAI,CAAC;GACjC;CAEF,MAAM,UAAU,eACP;EACL,SAAS;EACT,eAAe;EACf,UAAU;EACV,UAAU;EACV,SAAS;EACT,MAAM;EACN,cAAc;EACd,gBAAgB;EACjB,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,WAAW,eACR;EACL,SAAS;EACT,eAAe;EACf,UAAU;EACV,SAAS;EACT,MAAM;EACN,gBAAgB;EACjB,GACD;EAAC;EAAW;EAAiB;EAAY;EAAW;EAAQ;EAAe,CAC5E;;;;;;CAOD,MAAM,aAAa,eACV,GACJ,iBAAwC,QACtC,KAAK,SAAS,oBAAoB,iBACpC,EACF,GACD,CAAC,KAAK,MAAM,CACb;;;;;;CAOD,MAAM,cAAyB,iBAC3B,kBACE,UACA,YACE,SACA,UACJ;CAEJ,MAAM,gBAAgBA,aAAW,UAAU,EACzC,gBAAgB,aACjB,CAAC;;;;;;;CAQF,MAAM,aAAa,SACjB,oBAAC;EAA0B;EAAY,gBAAa;GAAW,GAE/D,oBAAC;EAAe,GAAI;EAAmB,UAAU;EAAI,gBAAa;YAC/D,YACC,oBAAC,gBAAc,GAEf,oBAAC,iBAAc,IAAI,aAAa,WAAW,UAAW;GAEzC;CAGnB,MAAM,eAAe,iBACnB,oBAAC;EACC,gBAAa;EACb,MAAK;EACL,SAAS;EACT,WAAW;YAEX,oBAACC;GACC,YAAY;GACK;GACjB,YAAY,cAAc,KAAK;GAC/B,cACE,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,OAAO,KAAK,IAAI;GAGhE,UAAU;IACV;GACsB,GACxB;AAEJ,QACE,oBAAC;EACC,GAAI;EACJ,KAAK;EACL,MAAM;EACN,OAAO;EACP,gBAAa;EACb,eAAa,OAAO,KAAK,IAAI;YAE7B,oBAAC;GACC,GAAI;GACQ;GACZ,MAAM;GACN,MAAM;GACN,QAAQ;GACR,QAAQ;aAEP,KAAK;IACM;GACF;;AAIlB,MAAa,WAAW,KAAK,cAAc"}

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";