@lobehub/ui 5.46.3 → 5.47.0

package/es/base-ui/Tree/Tree.mjs

@@ -0,0 +1,175 @@
+"use client";
+import { FocusScope } from "../FocusScope/FocusScope.mjs";
+import { focusScopeItem, useScopeArrowNav } from "../FocusScope/useScopeArrowNav.mjs";
+import { styles } from "./style.mjs";
+import { TreeContext } from "./context.mjs";
+import { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from "./utils.mjs";
+import TreeNode from "./TreeNode.mjs";
+import { memo, useId, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+//#region src/base-ui/Tree/Tree.tsx
+const EMPTY = [];
+const Tree = memo(({ blockNode = false, checkStrictly = false, checkable = false, checkedKeys: checkedKeysProp, className, classNames = {}, defaultCheckedKeys = EMPTY, defaultExpandAll = false, defaultExpandedKeys = EMPTY, defaultSelectedKeys = EMPTY, disabled = false, expandedKeys: expandedKeysProp, indent = 20, multiple = false, onCheck, onExpand, onRightClick, onSelect, scopeId: scopeIdProp, selectedKeys: selectedKeysProp, showIcon = false, showLine = false, size = "middle", style, styles: customStyles = {}, switcherIcon, titleRender, treeData, vimKeys = false }) => {
+	const generatedId = useId();
+	const scopeId = scopeIdProp ?? generatedId;
+	const [expandedKeys, setExpandedKeys] = useMergeState(defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys, { value: expandedKeysProp });
+	const [selectedKeys, setSelectedKeys] = useMergeState(defaultSelectedKeys, { value: selectedKeysProp });
+	const [checkedKeys, setCheckedKeys] = useMergeState(defaultCheckedKeys, { value: checkedKeysProp });
+	const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);
+	const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+	const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);
+	const { checked, halfChecked } = useMemo(() => checkStrictly ? {
+		checked: new Set(checkedKeys),
+		halfChecked: /* @__PURE__ */ new Set()
+	} : conductCheck(treeData, checkedKeys), [
+		checkStrictly,
+		treeData,
+		checkedKeys
+	]);
+	const [activeKeyState, setActiveKeyState] = useState(null);
+	const setActiveKey = setActiveKeyState;
+	const activeKey = activeKeyState && flat.some((row) => row.node.key === activeKeyState) ? activeKeyState : selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ?? flat[0]?.node.key ?? null;
+	const anchorRef = useRef(null);
+	const rowOf = (key) => document.querySelector(`[data-focus-scope="${scopeId}"] [data-id="${key}"]`);
+	const focusRow = (key) => {
+		setActiveKey(key);
+		const row = rowOf(key);
+		if (row) focusScopeItem(scopeId, row);
+	};
+	const isDisabled = (node) => disabled || !!node.disabled;
+	const toggleExpand = (node) => {
+		const willExpand = !expanded.has(node.key);
+		const next = willExpand ? [...expandedKeys, node.key] : expandedKeys.filter((key) => key !== node.key);
+		setExpandedKeys(next);
+		onExpand?.(next, {
+			expanded: willExpand,
+			node
+		});
+	};
+	const toggleSelect = (node, event) => {
+		if (isDisabled(node) || node.selectable === false) return;
+		let next;
+		if (multiple && event?.shiftKey && anchorRef.current) {
+			const a = flat.findIndex((row) => row.node.key === anchorRef.current);
+			const b = flat.findIndex((row) => row.node.key === node.key);
+			next = flat.slice(Math.min(a, b), Math.max(a, b) + 1).filter((row) => !isDisabled(row.node) && row.node.selectable !== false).map((row) => row.node.key);
+		} else if (multiple && (event?.metaKey || event?.ctrlKey)) {
+			next = selected.has(node.key) ? selectedKeys.filter((key) => key !== node.key) : [...selectedKeys, node.key];
+			anchorRef.current = node.key;
+		} else {
+			next = [node.key];
+			anchorRef.current = node.key;
+		}
+		setSelectedKeys(next);
+		setActiveKey(node.key);
+		onSelect?.(next, {
+			node,
+			selected: next.includes(node.key)
+		});
+	};
+	const toggleCheck = (node) => {
+		if (isDisabled(node) || node.checkable === false) return;
+		const willCheck = !checked.has(node.key);
+		const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);
+		const base = new Set(checkStrictly ? checkedKeys : checked);
+		keys.forEach((key) => willCheck ? base.add(key) : base.delete(key));
+		if (!willCheck && !checkStrictly) getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));
+		const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];
+		setCheckedKeys(next);
+		setActiveKey(node.key);
+		onCheck?.(next, {
+			checked: willCheck,
+			node
+		});
+	};
+	const currentRow = () => {
+		const key = (document.activeElement?.closest("[role=\"treeitem\"]"))?.dataset.id ?? activeKey;
+		return flat.find((row) => row.node.key === key);
+	};
+	const withRow = (fn) => (event) => {
+		const row = currentRow();
+		if (row) fn(row, event);
+	};
+	useScopeArrowNav({
+		extra: {
+			" ": withRow((row, event) => {
+				if (checkable && row.node.checkable !== false) toggleCheck(row.node);
+				else toggleSelect(row.node, event);
+			}),
+			"*": withRow((row) => {
+				const siblings = flat.filter((r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key));
+				if (siblings.length === 0) return;
+				const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];
+				setExpandedKeys(next);
+				onExpand?.(next, {
+					expanded: true,
+					node: row.node
+				});
+			}),
+			ArrowLeft: withRow((row) => {
+				if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);
+				else if (row.parentKey) focusRow(row.parentKey);
+			}),
+			ArrowRight: withRow((row) => {
+				if (!row.hasChildren) return;
+				if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);
+				else toggleExpand(row.node);
+			}),
+			Enter: withRow((row, event) => toggleSelect(row.node, event))
+		},
+		itemSelector: "[role=\"treeitem\"]",
+		onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),
+		scopeId,
+		vimKeys
+	});
+	return /* @__PURE__ */ jsx(TreeContext, {
+		value: {
+			activeKey,
+			blockNode,
+			checkable,
+			checked,
+			classNames,
+			disabled,
+			expanded,
+			halfChecked,
+			indent,
+			onRightClick: (event, node) => onRightClick?.({
+				event,
+				node
+			}),
+			selected,
+			setActiveKey,
+			showIcon,
+			showLine,
+			size,
+			styles: customStyles,
+			switcherIcon,
+			titleRender,
+			toggleCheck,
+			toggleExpand,
+			toggleSelect
+		},
+		children: /* @__PURE__ */ jsx(FocusScope, {
+			className: cx(styles.root, classNames.root, className),
+			id: scopeId,
+			role: "tree",
+			style: {
+				...customStyles.root,
+				...style
+			},
+			children: treeData.map((node, i) => /* @__PURE__ */ jsx(TreeNode, {
+				depth: 0,
+				isLast: i === treeData.length - 1,
+				node,
+				trail: []
+			}, node.key))
+		})
+	});
+});
+Tree.displayName = "Tree";
+//#endregion
+export { Tree as default };
+
+//# sourceMappingURL=Tree.mjs.map

package/es/base-ui/Tree/Tree.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useId, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/base-ui/FocusScope';\n\nimport { TreeContext, type TreeContextValue } from './context';\nimport { styles } from './style';\nimport TreeNode from './TreeNode';\nimport type { TreeDataNode, TreeProps } from './type';\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\n\nconst EMPTY: string[] = [];\n\nconst Tree = memo<TreeProps>(\n  ({\n    blockNode = false,\n    checkStrictly = false,\n    checkable = false,\n    checkedKeys: checkedKeysProp,\n    className,\n    classNames = {},\n    defaultCheckedKeys = EMPTY,\n    defaultExpandAll = false,\n    defaultExpandedKeys = EMPTY,\n    defaultSelectedKeys = EMPTY,\n    disabled = false,\n    expandedKeys: expandedKeysProp,\n    indent = 20,\n    multiple = false,\n    onCheck,\n    onExpand,\n    onRightClick,\n    onSelect,\n    scopeId: scopeIdProp,\n    selectedKeys: selectedKeysProp,\n    showIcon = false,\n    showLine = false,\n    size = 'middle',\n    style,\n    styles: customStyles = {},\n    switcherIcon,\n    titleRender,\n    treeData,\n    vimKeys = false,\n  }) => {\n    const generatedId = useId();\n    const scopeId = scopeIdProp ?? generatedId;\n    const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\n      defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\n      { value: expandedKeysProp },\n    );\n    const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\n      value: selectedKeysProp,\n    });\n    const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\n      value: checkedKeysProp,\n    });\n\n    const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\n    const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n    const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\n    const { checked, halfChecked } = useMemo(\n      () =>\n        checkStrictly\n          ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\n          : conductCheck(treeData, checkedKeys),\n      [checkStrictly, treeData, checkedKeys],\n    );\n\n    const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\n    const setActiveKey = setActiveKeyState;\n    const activeKey =\n      activeKeyState && flat.some((row) => row.node.key === activeKeyState)\n        ? activeKeyState\n        : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\n          flat[0]?.node.key ??\n          null);\n\n    const anchorRef = useRef<string | null>(null);\n\n    const rowOf = (key: string) =>\n      document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\n    const focusRow = (key: string) => {\n      setActiveKey(key);\n      const row = rowOf(key);\n      if (row) focusScopeItem(scopeId, row);\n    };\n\n    const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\n\n    const toggleExpand = (node: TreeDataNode) => {\n      const willExpand = !expanded.has(node.key);\n      const next = willExpand\n        ? [...expandedKeys, node.key]\n        : expandedKeys.filter((key) => key !== node.key);\n      setExpandedKeys(next);\n      onExpand?.(next, { expanded: willExpand, node });\n    };\n\n    const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\n      if (isDisabled(node) || node.selectable === false) return;\n      let next: string[];\n      if (multiple && event?.shiftKey && anchorRef.current) {\n        const a = flat.findIndex((row) => row.node.key === anchorRef.current);\n        const b = flat.findIndex((row) => row.node.key === node.key);\n        next = flat\n          .slice(Math.min(a, b), Math.max(a, b) + 1)\n          .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\n          .map((row) => row.node.key);\n      } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\n        next = selected.has(node.key)\n          ? selectedKeys.filter((key) => key !== node.key)\n          : [...selectedKeys, node.key];\n        anchorRef.current = node.key;\n      } else {\n        next = [node.key];\n        anchorRef.current = node.key;\n      }\n      setSelectedKeys(next);\n      setActiveKey(node.key);\n      onSelect?.(next, { node, selected: next.includes(node.key) });\n    };\n\n    const toggleCheck = (node: TreeDataNode) => {\n      if (isDisabled(node) || node.checkable === false) return;\n      const willCheck = !checked.has(node.key);\n      const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\n      const base = new Set(checkStrictly ? checkedKeys : checked);\n      keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\n      if (!willCheck && !checkStrictly) getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\n      const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\n      setCheckedKeys(next);\n      setActiveKey(node.key);\n      onCheck?.(next, { checked: willCheck, node });\n    };\n\n    const currentRow = () => {\n      const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\n      const key = focused?.dataset.id ?? activeKey;\n      return flat.find((row) => row.node.key === key);\n    };\n\n    const withRow = (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\n      (event: KeyboardEvent) => {\n        const row = currentRow();\n        if (row) fn(row, event);\n      };\n\n    useScopeArrowNav({\n      extra: {\n        ' ': withRow((row, event) => {\n          if (checkable && row.node.checkable !== false) toggleCheck(row.node);\n          else toggleSelect(row.node, event);\n        }),\n        '*': withRow((row) => {\n          const siblings = flat.filter(\n            (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\n          );\n          if (siblings.length === 0) return;\n          const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\n          setExpandedKeys(next);\n          onExpand?.(next, { expanded: true, node: row.node });\n        }),\n        ArrowLeft: withRow((row) => {\n          if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\n          else if (row.parentKey) focusRow(row.parentKey);\n        }),\n        ArrowRight: withRow((row) => {\n          if (!row.hasChildren) return;\n          if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\n          else toggleExpand(row.node);\n        }),\n        Enter: withRow((row, event) => toggleSelect(row.node, event)),\n      },\n      itemSelector: '[role=\"treeitem\"]',\n      onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\n      scopeId,\n      vimKeys,\n    });\n\n    const ctx: TreeContextValue = {\n      activeKey,\n      blockNode,\n      checkable,\n      checked,\n      classNames,\n      disabled,\n      expanded,\n      halfChecked,\n      indent,\n      onRightClick: (event, node) => onRightClick?.({ event, node }),\n      selected,\n      setActiveKey,\n      showIcon,\n      showLine,\n      size,\n      styles: customStyles,\n      switcherIcon,\n      titleRender,\n      toggleCheck,\n      toggleExpand,\n      toggleSelect,\n    };\n\n    return (\n      <TreeContext value={ctx}>\n        <FocusScope\n          className={cx(styles.root, classNames.root, className)}\n          id={scopeId}\n          role=\"tree\"\n          style={{ ...customStyles.root, ...style }}\n        >\n          {treeData.map((node, i) => (\n            <TreeNode\n              depth={0}\n              isLast={i === treeData.length - 1}\n              key={node.key}\n              node={node}\n              trail={[]}\n            />\n          ))}\n        </FocusScope>\n      </TreeContext>\n    );\n  },\n);\n\nTree.displayName = 'Tree';\n\nexport default Tree;\n"],"mappings":"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"}

package/es/base-ui/Tree/TreeNode.mjs

@@ -0,0 +1,124 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { controlHeight } from "../controlSize.mjs";
+import Checkbox from "../Checkbox/Checkbox.mjs";
+import { styles } from "./style.mjs";
+import { useTreeContext } from "./context.mjs";
+import { hasChildren } from "./utils.mjs";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronRight, File, Folder } from "lucide-react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/base-ui/Tree/TreeNode.tsx
+const ARC = 6;
+const SWITCHER_CENTER = 11.5;
+const guidePath = (depth, isLast, trail, indent, height) => {
+	const cx = (i) => i * indent + SWITCHER_CENTER;
+	let d = "";
+	trail.forEach((more, i) => {
+		if (more && i > 0) d += `M${cx(i)} 0V${height}`;
+	});
+	const x = cx(depth - 1);
+	const y = height / 2;
+	const elbow = `M${x} ${y - ARC}A${ARC} ${ARC} 0 0 0 ${x + ARC} ${y}H${x + indent - 2}`;
+	d += isLast ? `M${x} 0V${y - ARC}${elbow.slice(elbow.indexOf("A"))}` : `M${x} 0V${height}${elbow}`;
+	return d;
+};
+const TreeNode = memo(({ node, depth, isLast, trail }) => {
+	const ctx = useTreeContext();
+	const expandable = hasChildren(node);
+	const expanded = expandable && ctx.expanded.has(node.key);
+	const disabled = ctx.disabled || !!node.disabled;
+	const checkable = ctx.checkable && node.checkable !== false;
+	const checkState = ctx.checked.has(node.key) ? "checked" : ctx.halfChecked.has(node.key) ? "mixed" : "unchecked";
+	const rowHeight = typeof ctx.styles.node?.height === "number" ? ctx.styles.node.height : controlHeight[ctx.size];
+	const switcherIcon = typeof ctx.switcherIcon === "function" ? ctx.switcherIcon({
+		expanded,
+		node
+	}) : ctx.switcherIcon ?? /* @__PURE__ */ jsx(Icon, {
+		icon: ChevronRight,
+		size: 14
+	});
+	const rowStyle = {
+		height: rowHeight,
+		paddingInlineStart: depth * ctx.indent,
+		...ctx.styles.node
+	};
+	const select = (event) => ctx.toggleSelect(node, event);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		"data-scope-item": true,
+		"aria-disabled": disabled || void 0,
+		"aria-expanded": expandable ? expanded : void 0,
+		"aria-level": depth + 1,
+		"aria-selected": ctx.selected.has(node.key),
+		"data-id": node.key,
+		role: "treeitem",
+		style: rowStyle,
+		tabIndex: ctx.activeKey === node.key ? 0 : -1,
+		"aria-checked": checkable ? checkState === "mixed" ? "mixed" : checkState === "checked" : void 0,
+		className: cx(styles.node, ctx.blockNode && styles.nodeBlock, disabled && styles.nodeDisabled, ctx.classNames.node),
+		onClick: ctx.blockNode ? select : void 0,
+		onContextMenu: (event) => ctx.onRightClick(event, node),
+		onFocus: () => ctx.setActiveKey(node.key),
+		children: [
+			ctx.showLine && depth > 0 && /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": true,
+				className: cx(styles.guide, ctx.classNames.guide),
+				height: rowHeight,
+				style: ctx.styles.guide,
+				width: depth * ctx.indent,
+				children: /* @__PURE__ */ jsx("path", { d: guidePath(depth, isLast, trail, ctx.indent, rowHeight) })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-hidden": true,
+				style: ctx.styles.switcher,
+				tabIndex: -1,
+				type: "button",
+				className: cx(styles.switcher, !expandable && styles.switcherLeaf, ctx.classNames.switcher),
+				onClick: (event) => {
+					event.stopPropagation();
+					ctx.toggleExpand(node);
+				},
+				children: switcherIcon
+			}),
+			checkable && /* @__PURE__ */ jsx(Checkbox, {
+				checked: checkState === "checked",
+				className: styles.checkbox,
+				disabled,
+				indeterminate: checkState === "mixed",
+				onChange: () => ctx.toggleCheck(node),
+				onClick: (event) => event.stopPropagation()
+			}),
+			ctx.showIcon && /* @__PURE__ */ jsx("span", {
+				className: styles.icon,
+				children: node.icon ?? /* @__PURE__ */ jsx(Icon, {
+					icon: expandable ? Folder : File,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: ctx.styles.title,
+				className: cx(styles.title, ctx.blockNode ? styles.titleBlock : styles.titleInline, ctx.classNames.title),
+				onClick: ctx.blockNode ? void 0 : select,
+				children: ctx.titleRender ? ctx.titleRender(node) : node.title
+			})
+		]
+	}), expandable && /* @__PURE__ */ jsx(Collapsible.Root, {
+		open: expanded,
+		children: /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: styles.panel,
+			children: node.children.map((child, i) => /* @__PURE__ */ jsx(TreeNode, {
+				depth: depth + 1,
+				isLast: i === node.children.length - 1,
+				node: child,
+				trail: [...trail, !isLast]
+			}, child.key))
+		})
+	})] });
+});
+TreeNode.displayName = "TreeNode";
+//#endregion
+export { TreeNode as default };
+
+//# sourceMappingURL=TreeNode.mjs.map

package/es/base-ui/Tree/TreeNode.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.mjs","names":["isExpandable"],"sources":["../../../src/base-ui/Tree/TreeNode.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { cx } from 'antd-style';\nimport { ChevronRight, File, Folder } from 'lucide-react';\nimport { type CSSProperties, memo, type MouseEvent } from 'react';\n\nimport { Checkbox } from '@/base-ui/Checkbox';\nimport { controlHeight } from '@/base-ui/controlSize';\nimport Icon from '@/Icon';\n\nimport { useTreeContext } from './context';\nimport { styles } from './style';\nimport type { TreeDataNode } from './type';\nimport { hasChildren as isExpandable } from './utils';\n\ninterface TreeNodeProps {\n  depth: number;\n  isLast: boolean;\n  node: TreeDataNode;\n  trail: boolean[];\n}\n\nconst ARC = 6;\nconst SWITCHER_CENTER = 11.5;\n\nconst guidePath = (\n  depth: number,\n  isLast: boolean,\n  trail: boolean[],\n  indent: number,\n  height: number,\n) => {\n  const cx = (i: number) => i * indent + SWITCHER_CENTER;\n  let d = '';\n  trail.forEach((more, i) => {\n    if (more && i > 0) d += `M${cx(i)} 0V${height}`;\n  });\n  const x = cx(depth - 1);\n  const y = height / 2;\n  const elbow = `M${x} ${y - ARC}A${ARC} ${ARC} 0 0 0 ${x + ARC} ${y}H${x + indent - 2}`;\n  d += isLast\n    ? `M${x} 0V${y - ARC}${elbow.slice(elbow.indexOf('A'))}`\n    : `M${x} 0V${height}${elbow}`;\n  return d;\n};\n\nconst TreeNode = memo<TreeNodeProps>(({ node, depth, isLast, trail }) => {\n  const ctx = useTreeContext();\n  const expandable = isExpandable(node);\n  const expanded = expandable && ctx.expanded.has(node.key);\n  const disabled = ctx.disabled || !!node.disabled;\n  const checkable = ctx.checkable && node.checkable !== false;\n  const checkState = ctx.checked.has(node.key)\n    ? 'checked'\n    : ctx.halfChecked.has(node.key)\n      ? 'mixed'\n      : 'unchecked';\n  const rowHeight =\n    typeof ctx.styles.node?.height === 'number' ? ctx.styles.node.height : controlHeight[ctx.size];\n\n  const switcherIcon =\n    typeof ctx.switcherIcon === 'function'\n      ? ctx.switcherIcon({ expanded, node })\n      : (ctx.switcherIcon ?? <Icon icon={ChevronRight} size={14} />);\n\n  const rowStyle: CSSProperties = {\n    height: rowHeight,\n    paddingInlineStart: depth * ctx.indent,\n    ...ctx.styles.node,\n  };\n\n  const select = (event: MouseEvent) => ctx.toggleSelect(node, event);\n\n  return (\n    <>\n      <div\n        data-scope-item\n        aria-disabled={disabled || undefined}\n        aria-expanded={expandable ? expanded : undefined}\n        aria-level={depth + 1}\n        aria-selected={ctx.selected.has(node.key)}\n        data-id={node.key}\n        role=\"treeitem\"\n        style={rowStyle}\n        tabIndex={ctx.activeKey === node.key ? 0 : -1}\n        aria-checked={\n          checkable ? (checkState === 'mixed' ? 'mixed' : checkState === 'checked') : undefined\n        }\n        className={cx(\n          styles.node,\n          ctx.blockNode && styles.nodeBlock,\n          disabled && styles.nodeDisabled,\n          ctx.classNames.node,\n        )}\n        onClick={ctx.blockNode ? select : undefined}\n        onContextMenu={(event) => ctx.onRightClick(event, node)}\n        onFocus={() => ctx.setActiveKey(node.key)}\n      >\n        {ctx.showLine && depth > 0 && (\n          <svg\n            aria-hidden\n            className={cx(styles.guide, ctx.classNames.guide)}\n            height={rowHeight}\n            style={ctx.styles.guide}\n            width={depth * ctx.indent}\n          >\n            <path d={guidePath(depth, isLast, trail, ctx.indent, rowHeight)} />\n          </svg>\n        )}\n        <button\n          aria-hidden\n          style={ctx.styles.switcher}\n          tabIndex={-1}\n          type=\"button\"\n          className={cx(\n            styles.switcher,\n            !expandable && styles.switcherLeaf,\n            ctx.classNames.switcher,\n          )}\n          onClick={(event) => {\n            event.stopPropagation();\n            ctx.toggleExpand(node);\n          }}\n        >\n          {switcherIcon}\n        </button>\n        {checkable && (\n          <Checkbox\n            checked={checkState === 'checked'}\n            className={styles.checkbox}\n            disabled={disabled}\n            indeterminate={checkState === 'mixed'}\n            onChange={() => ctx.toggleCheck(node)}\n            onClick={(event) => event.stopPropagation()}\n          />\n        )}\n        {ctx.showIcon && (\n          <span className={styles.icon}>\n            {node.icon ?? <Icon icon={expandable ? Folder : File} size={16} />}\n          </span>\n        )}\n        <span\n          style={ctx.styles.title}\n          className={cx(\n            styles.title,\n            ctx.blockNode ? styles.titleBlock : styles.titleInline,\n            ctx.classNames.title,\n          )}\n          onClick={ctx.blockNode ? undefined : select}\n        >\n          {ctx.titleRender ? ctx.titleRender(node) : node.title}\n        </span>\n      </div>\n      {expandable && (\n        <Collapsible.Root open={expanded}>\n          <Collapsible.Panel className={styles.panel}>\n            {node.children!.map((child, i) => (\n              <TreeNode\n                depth={depth + 1}\n                isLast={i === node.children!.length - 1}\n                key={child.key}\n                node={child}\n                trail={[...trail, !isLast]}\n              />\n            ))}\n          </Collapsible.Panel>\n        </Collapsible.Root>\n      )}\n    </>\n  );\n});\n\nTreeNode.displayName = 'TreeNode';\n\nexport default TreeNode;\n"],"mappings":"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"}

package/es/base-ui/Tree/context.mjs

@@ -0,0 +1,12 @@
+import { createContext, use } from "react";
+//#region src/base-ui/Tree/context.ts
+const TreeContext = createContext(null);
+const useTreeContext = () => {
+	const ctx = use(TreeContext);
+	if (!ctx) throw new Error("Tree components must be rendered inside <Tree>");
+	return ctx;
+};
+//#endregion
+export { TreeContext, useTreeContext };
+
+//# sourceMappingURL=context.mjs.map

package/es/base-ui/Tree/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/base-ui/Tree/context.ts"],"sourcesContent":["import { createContext, type MouseEvent, type ReactNode, use } from 'react';\n\nimport type { ControlSize } from '../controlSize';\nimport type { TreeClassNames, TreeDataNode, TreeProps, TreeStyles } from './type';\n\nexport interface TreeContextValue {\n  activeKey: string | null;\n  blockNode: boolean;\n  checkable: boolean;\n  checked: Set<string>;\n  classNames: TreeClassNames;\n  disabled: boolean;\n  expanded: Set<string>;\n  halfChecked: Set<string>;\n  indent: number;\n  onRightClick: (event: MouseEvent<HTMLDivElement>, node: TreeDataNode) => void;\n  selected: Set<string>;\n  setActiveKey: (key: string) => void;\n  showIcon: boolean;\n  showLine: boolean;\n  size: ControlSize;\n  styles: TreeStyles;\n  switcherIcon?: TreeProps['switcherIcon'];\n  titleRender?: (node: TreeDataNode) => ReactNode;\n  toggleCheck: (node: TreeDataNode) => void;\n  toggleExpand: (node: TreeDataNode) => void;\n  toggleSelect: (node: TreeDataNode, event?: { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean }) => void;\n}\n\nexport const TreeContext = createContext<TreeContextValue | null>(null);\n\nexport const useTreeContext = () => {\n  const ctx = use(TreeContext);\n  if (!ctx) throw new Error('Tree components must be rendered inside <Tree>');\n  return ctx;\n};\n"],"mappings":";;AA6BA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,uBAAuB;CAClC,MAAM,MAAM,IAAI,WAAW;CAC3B,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gDAAgD;CAC1E,OAAO;AACT"}

package/es/base-ui/Tree/index.d.mts

@@ -0,0 +1,5 @@
+import { styles } from "./style.mjs";
+import { TreeClassNames, TreeDataNode, TreeFlatRow, TreeProps, TreeStyles } from "./type.mjs";
+import Tree from "./Tree.mjs";
+import { conductCheck, flattenVisible, getAllKeys } from "./utils.mjs";
+export { type TreeClassNames, type TreeDataNode, type TreeFlatRow, type TreeProps, type TreeStyles, conductCheck, Tree as default, flattenVisible, getAllKeys, styles as treeStyles };

package/es/base-ui/Tree/style.d.mts

@@ -0,0 +1,19 @@
+//#region src/base-ui/Tree/style.d.ts
+declare const styles: {
+  checkbox: string;
+  guide: string;
+  icon: string;
+  node: string;
+  nodeBlock: string;
+  nodeDisabled: string;
+  panel: string;
+  root: string;
+  switcher: string;
+  switcherLeaf: string;
+  title: string;
+  titleBlock: string;
+  titleInline: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/Tree/style.mjs

@@ -0,0 +1,149 @@
+import { focusRing } from "../focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Tree/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	checkbox: css`
+    margin-inline-end: 8px;
+  `,
+	guide: css`
+    pointer-events: none;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    height: 100%;
+    overflow: visible;
+
+    path {
+      fill: none;
+      stroke: ${cssVar.colorBorderSecondary};
+      stroke-width: 1;
+      stroke-linecap: round;
+    }
+  `,
+	icon: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-end: 6px;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	node: css`
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: ${cssVar.borderRadius};
+    color: ${cssVar.colorText};
+    outline: none;
+    ${focusRing}
+  `,
+	nodeBlock: css`
+    cursor: pointer;
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &[aria-selected='true'] {
+      background: ${cssVar.colorFillSecondary};
+    }
+  `,
+	nodeDisabled: css`
+    cursor: not-allowed;
+    color: ${cssVar.colorTextDisabled};
+
+    &:hover {
+      background: transparent;
+    }
+  `,
+	panel: css`
+    height: var(--collapsible-panel-height);
+    overflow: hidden;
+    transition: height 200ms ${cssVar.motionEaseOut};
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      height: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    outline: none;
+  `,
+	switcher: css`
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    border-radius: ${cssVar.borderRadiusSM};
+    background: none;
+    color: ${cssVar.colorTextSecondary};
+    cursor: pointer;
+
+    &:hover {
+      background: ${cssVar.colorFillSecondary};
+      color: ${cssVar.colorText};
+    }
+
+    svg {
+      transition: transform 200ms ${cssVar.motionEaseOut};
+    }
+
+    [aria-expanded='true'] > & svg {
+      transform: rotate(90deg);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      svg {
+        transition-duration: 0s;
+      }
+    }
+  `,
+	switcherLeaf: css`
+    visibility: hidden;
+    pointer-events: none;
+  `,
+	title: css`
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    padding-block: 2px;
+    padding-inline: 6px;
+    border-radius: ${cssVar.borderRadiusSM};
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
+	titleBlock: css`
+    flex: 1;
+  `,
+	titleInline: css`
+    cursor: pointer;
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    [aria-selected='true'] > & {
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    [aria-disabled='true'] > & {
+      cursor: not-allowed;
+      background: transparent;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Tree/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tree/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  checkbox: css`\n    margin-inline-end: 8px;\n  `,\n  guide: css`\n    pointer-events: none;\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    height: 100%;\n    overflow: visible;\n\n    path {\n      fill: none;\n      stroke: ${cssVar.colorBorderSecondary};\n      stroke-width: 1;\n      stroke-linecap: round;\n    }\n  `,\n  icon: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    margin-inline-end: 6px;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  node: css`\n    position: relative;\n    display: flex;\n    align-items: center;\n    border-radius: ${cssVar.borderRadius};\n    color: ${cssVar.colorText};\n    outline: none;\n    ${focusRing}\n  `,\n  nodeBlock: css`\n    cursor: pointer;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[aria-selected='true'] {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  nodeDisabled: css`\n    cursor: not-allowed;\n    color: ${cssVar.colorTextDisabled};\n\n    &:hover {\n      background: transparent;\n    }\n  `,\n  panel: css`\n    height: var(--collapsible-panel-height);\n    overflow: hidden;\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    user-select: none;\n    outline: none;\n  `,\n  switcher: css`\n    display: grid;\n    flex: none;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: ${cssVar.borderRadiusSM};\n    background: none;\n    color: ${cssVar.colorTextSecondary};\n    cursor: pointer;\n\n    &:hover {\n      background: ${cssVar.colorFillSecondary};\n      color: ${cssVar.colorText};\n    }\n\n    svg {\n      transition: transform 200ms ${cssVar.motionEaseOut};\n    }\n\n    [aria-expanded='true'] > & svg {\n      transform: rotate(90deg);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      svg {\n        transition-duration: 0s;\n      }\n    }\n  `,\n  switcherLeaf: css`\n    visibility: hidden;\n    pointer-events: none;\n  `,\n  title: css`\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    min-width: 0;\n    padding-block: 2px;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `,\n  titleBlock: css`\n    flex: 1;\n  `,\n  titleInline: css`\n    cursor: pointer;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    [aria-selected='true'] > & {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    [aria-disabled='true'] > & {\n      cursor: not-allowed;\n      background: transparent;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;CAGb,OAAO,GAAG;;;;;;;;;;gBAUI,OAAO,qBAAqB;;;;;CAK1C,MAAM,GAAG;;;;;aAKE,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;qBAIU,OAAO,aAAa;aAC5B,OAAO,UAAU;;MAExB,UAAU;;CAEd,WAAW,GAAG;;;;oBAII,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAG5C,cAAc,GAAG;;aAEN,OAAO,kBAAkB;;;;;;CAMpC,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;CAWlD,MAAM,GAAG;;;;;;CAMT,UAAU,GAAG;;;;;;;;qBAQM,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;oBAInB,OAAO,mBAAmB;eAC/B,OAAO,UAAU;;;;oCAII,OAAO,cAAc;;;;;;;;;;;;;CAavD,cAAc,GAAG;;;;CAIjB,OAAO,GAAG;;;;;;;qBAOS,OAAO,eAAe;;;;;CAKzC,YAAY,GAAG;;;CAGf,aAAa,GAAG;;;;oBAIE,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;;;;;;AAQ9C,EAAE"}

package/es/base-ui/Tree/type.d.mts

@@ -0,0 +1,85 @@
+import { ControlSize } from "../controlSize.mjs";
+import { CSSProperties, MouseEvent, ReactNode } from "react";
+//#region src/base-ui/Tree/type.d.ts
+interface TreeDataNode {
+  checkable?: boolean;
+  children?: TreeDataNode[];
+  disabled?: boolean;
+  icon?: ReactNode;
+  isLeaf?: boolean;
+  key: string;
+  selectable?: boolean;
+  title: ReactNode;
+}
+interface TreeFlatRow {
+  depth: number;
+  hasChildren: boolean;
+  index: number;
+  isLast: boolean;
+  node: TreeDataNode;
+  parentKey: string | null;
+  trail: boolean[];
+}
+interface TreeClassNames {
+  guide?: string;
+  node?: string;
+  root?: string;
+  switcher?: string;
+  title?: string;
+}
+interface TreeStyles {
+  guide?: CSSProperties;
+  node?: CSSProperties;
+  root?: CSSProperties;
+  switcher?: CSSProperties;
+  title?: CSSProperties;
+}
+interface TreeProps {
+  blockNode?: boolean;
+  checkable?: boolean;
+  checkedKeys?: string[];
+  checkStrictly?: boolean;
+  className?: string;
+  classNames?: TreeClassNames;
+  defaultCheckedKeys?: string[];
+  defaultExpandAll?: boolean;
+  defaultExpandedKeys?: string[];
+  defaultSelectedKeys?: string[];
+  disabled?: boolean;
+  expandedKeys?: string[];
+  indent?: number;
+  multiple?: boolean;
+  onCheck?: (keys: string[], info: {
+    checked: boolean;
+    node: TreeDataNode;
+  }) => void;
+  onExpand?: (keys: string[], info: {
+    expanded: boolean;
+    node: TreeDataNode;
+  }) => void;
+  onRightClick?: (info: {
+    event: MouseEvent<HTMLDivElement>;
+    node: TreeDataNode;
+  }) => void;
+  onSelect?: (keys: string[], info: {
+    node: TreeDataNode;
+    selected: boolean;
+  }) => void;
+  scopeId?: string;
+  selectedKeys?: string[];
+  showIcon?: boolean;
+  showLine?: boolean;
+  size?: ControlSize;
+  style?: CSSProperties;
+  styles?: TreeStyles;
+  switcherIcon?: ReactNode | ((info: {
+    expanded: boolean;
+    node: TreeDataNode;
+  }) => ReactNode);
+  titleRender?: (node: TreeDataNode) => ReactNode;
+  treeData: TreeDataNode[];
+  vimKeys?: boolean;
+}
+//#endregion
+export { TreeClassNames, TreeDataNode, TreeFlatRow, TreeProps, TreeStyles };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Tree/utils.d.mts

@@ -0,0 +1,11 @@
+import { TreeDataNode, TreeFlatRow } from "./type.mjs";
+//#region src/base-ui/Tree/utils.d.ts
+declare const flattenVisible: (data: TreeDataNode[], expanded: Set<string>, depth?: number, parentKey?: string | null, trail?: boolean[], out?: TreeFlatRow[]) => TreeFlatRow[];
+declare const getAllKeys: (data: TreeDataNode[], out?: string[]) => string[];
+declare const conductCheck: (data: TreeDataNode[], checkedKeys: Iterable<string>) => {
+  checked: Set<string>;
+  halfChecked: Set<string>;
+};
+//#endregion
+export { conductCheck, flattenVisible, getAllKeys };
+//# sourceMappingURL=utils.d.mts.map