@jinmi/ui 0.0.0-stage → 6.0.2

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

@@ -0,0 +1,180 @@
+import { HotkeyProps } from "../../Hotkey/type.mjs";
+import "../../Hotkey/index.mjs";
+import { Placement } from "../../utils/placement.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import { Tooltip, TooltipPopupProps, TooltipPortalProps, TooltipPositionerProps, TooltipTriggerProps } from "@base-ui/react/tooltip";
+//#region src/base-ui/Tooltip/type.d.ts
+type TooltipPlacement = Placement;
+/**
+ * Base UI Positioner props that can be passed through
+ */
+type TooltipPositionerProps$1 = Omit<TooltipPositionerProps, 'className' | 'style' | 'children'>;
+/**
+ * Base UI Trigger props that can be passed through
+ */
+type TooltipTriggerComponentProps = Omit<TooltipTriggerProps, 'className' | 'style' | 'children' | 'render' | 'handle' | 'payload'>;
+/**
+ * Base UI Popup props that can be passed through
+ */
+type TooltipPopupComponentProps = Omit<TooltipPopupProps, 'className' | 'style' | 'children'>;
+/**
+ * Base UI Portal props that can be passed through
+ */
+type TooltipPortalProps$1 = Omit<TooltipPortalProps, 'children' | 'container'>;
+interface TooltipProps {
+  /**
+   * Whether the tooltip has an arrow pointer.
+   * @default false
+   */
+  arrow?: boolean;
+  /**
+   * Trigger element. Prefer a single React element.
+   */
+  children: ReactElement | ReactNode;
+  /**
+   * Custom className for the tooltip floating root.
+   */
+  className?: string;
+  /**
+   * Compatible with Ant Design `classNames` shape (subset).
+   */
+  classNames?: {
+    arrow?: string;
+    container?: string;
+    content?: string;
+    root?: string;
+  };
+  /**
+   * Delay (in milliseconds) before closing the tooltip.
+   * Takes precedence over `mouseLeaveDelay`.
+   */
+  closeDelay?: number;
+  /**
+   * Uncontrolled initial open state.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Disable tooltip behavior.
+   */
+  disabled?: boolean;
+  /**
+   * An Ant Design compatible escape hatch for portal container.
+   * @deprecated Use `popupContainer` instead.
+   */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  hotkey?: string;
+  hotkeyProps?: Omit<HotkeyProps, 'keys'>;
+  /**
+   * Delay (in seconds) before showing the tooltip on hover.
+   * Kept compatible with Ant Design `Tooltip`.
+   */
+  mouseEnterDelay?: number;
+  /**
+   * Delay (in seconds) before hiding the tooltip on hover out.
+   * Kept compatible with Ant Design `Tooltip`.
+   */
+  mouseLeaveDelay?: number;
+  /**
+   * Callback when open state changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Controlled open state.
+   */
+  open?: boolean;
+  /**
+   * Delay (in milliseconds) before opening the tooltip.
+   * Takes precedence over `mouseEnterDelay`.
+   */
+  openDelay?: number;
+  /**
+   * Tooltip placement. Supports Floating UI placements and Ant Design legacy placements.
+   */
+  placement?: TooltipPlacement;
+  /**
+   * Direct HTMLElement to use as the portal container.
+   * Takes precedence over `getPopupContainer`.
+   */
+  popupContainer?: HTMLElement;
+  /**
+   * Base UI Popup 组件的 props
+   */
+  popupProps?: TooltipPopupComponentProps;
+  /**
+   * Base UI Portal 组件的 props
+   */
+  portalProps?: TooltipPortalProps$1;
+  /**
+   * Base UI Positioner 组件的 props
+   */
+  positionerProps?: TooltipPositionerProps$1;
+  ref?: ComponentPropsWithRef<typeof Tooltip.Trigger>['ref'];
+  /**
+   * When true, this tooltip will render independently even inside a TooltipGroup,
+   * ignoring the group singleton behavior.
+   */
+  standalone?: boolean;
+  /**
+   * Compatible with Ant Design `styles` shape (subset).
+   */
+  styles?: {
+    arrow?: CSSProperties;
+    /**
+     * Backwards-compatible alias for the floating root style.
+     */
+    container?: CSSProperties;
+    content?: CSSProperties;
+    root?: CSSProperties;
+  };
+  /**
+   * Tooltip content.
+   */
+  title: ReactNode;
+  /**
+   * Base UI Trigger 组件的 props
+   */
+  triggerProps?: TooltipTriggerComponentProps;
+  /**
+   * z-index for tooltip floating root.
+   */
+  zIndex?: number;
+}
+/**
+ * Props for `TooltipGroup`.
+ */
+interface TooltipGroupProps {
+  arrow?: boolean;
+  children: ReactNode;
+  className?: string;
+  classNames?: TooltipProps['classNames'];
+  closeDelay?: number;
+  disabled?: boolean;
+  /**
+   * Disable the "destroy on invalid trigger (display:none / disconnected)" guard for performance.
+   * @default false
+   */
+  disableDestroyOnInvalidTrigger?: boolean;
+  /**
+   * Disable the "hide when positioner falls back to (0,0)" visual guard for performance.
+   * @default false
+   */
+  disableZeroOriginGuard?: boolean;
+  getPopupContainer?: TooltipProps['getPopupContainer'];
+  hotkey?: string;
+  hotkeyProps?: Omit<HotkeyProps, 'keys'>;
+  layoutAnimation?: boolean;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
+  openDelay?: number;
+  placement?: TooltipPlacement;
+  popupContainer?: TooltipProps['popupContainer'];
+  popupProps?: TooltipPopupComponentProps;
+  portalProps?: TooltipPortalProps$1;
+  positionerProps?: TooltipPositionerProps$1;
+  styles?: TooltipProps['styles'];
+  triggerProps?: TooltipTriggerComponentProps;
+  zIndex?: number;
+}
+//#endregion
+export { TooltipGroupProps, TooltipPlacement, TooltipPopupComponentProps, TooltipPortalProps$1 as TooltipPortalProps, TooltipPositionerProps$1 as TooltipPositionerProps, TooltipProps, TooltipTriggerComponentProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Tooltip/useMergedTooltipProps.mjs

@@ -0,0 +1,110 @@
+"use client";
+import { TooltipGroupPropsContext } from "./groupContext.mjs";
+import { useContext, useMemo } from "react";
+//#region src/base-ui/Tooltip/useMergedTooltipProps.ts
+const useMergedTooltipProps = (props) => {
+	const sharedProps = useContext(TooltipGroupPropsContext);
+	const { arrow, className, classNames, closeDelay, disabled, getPopupContainer, hotkey, hotkeyProps, mouseEnterDelay, mouseLeaveDelay, onOpenChange, openDelay, placement, popupContainer, styles: styleProps, title, zIndex, positionerProps, triggerProps, popupProps } = props;
+	const mergedClassName = useMemo(() => {
+		if (!sharedProps?.className && !className) return void 0;
+		return [sharedProps?.className, className].filter(Boolean).join(" ");
+	}, [className, sharedProps?.className]);
+	const mergedClassNames = useMemo(() => {
+		if (!sharedProps?.classNames && !classNames) return void 0;
+		return {
+			...sharedProps?.classNames,
+			...classNames
+		};
+	}, [classNames, sharedProps?.classNames]);
+	const resolvedSharedStyles = useMemo(() => {
+		if (typeof sharedProps?.styles === "function") return void 0;
+		return sharedProps?.styles;
+	}, [sharedProps?.styles]);
+	const resolvedLocalStyles = useMemo(() => {
+		if (typeof styleProps === "function") return void 0;
+		return styleProps;
+	}, [styleProps]);
+	const mergedStyles = useMemo(() => {
+		if (!resolvedSharedStyles && !resolvedLocalStyles) return void 0;
+		return {
+			...resolvedSharedStyles,
+			...resolvedLocalStyles
+		};
+	}, [resolvedSharedStyles, resolvedLocalStyles]);
+	const mergedHotkeyProps = useMemo(() => {
+		if (!sharedProps?.hotkeyProps && !hotkeyProps) return void 0;
+		return {
+			...sharedProps?.hotkeyProps,
+			...hotkeyProps
+		};
+	}, [hotkeyProps, sharedProps?.hotkeyProps]);
+	const mergedOnOpenChange = useMemo(() => {
+		if (!sharedProps?.onOpenChange && !onOpenChange) return void 0;
+		return (open) => {
+			sharedProps?.onOpenChange?.(open);
+			onOpenChange?.(open);
+		};
+	}, [onOpenChange, sharedProps?.onOpenChange]);
+	return useMemo(() => ({
+		arrow: arrow ?? sharedProps?.arrow ?? false,
+		className: mergedClassName,
+		classNames: mergedClassNames,
+		closeDelay: closeDelay ?? sharedProps?.closeDelay,
+		disabled: disabled ?? sharedProps?.disabled,
+		getPopupContainer: getPopupContainer ?? sharedProps?.getPopupContainer,
+		hotkey: hotkey ?? sharedProps?.hotkey,
+		popupContainer: popupContainer ?? sharedProps?.popupContainer,
+		hotkeyProps: mergedHotkeyProps,
+		mouseEnterDelay: mouseEnterDelay ?? sharedProps?.mouseEnterDelay,
+		mouseLeaveDelay: mouseLeaveDelay ?? sharedProps?.mouseLeaveDelay,
+		onOpenChange: mergedOnOpenChange,
+		openDelay: openDelay ?? sharedProps?.openDelay,
+		placement: placement ?? sharedProps?.placement ?? "top",
+		popupProps: popupProps ?? sharedProps?.popupProps,
+		positionerProps: positionerProps ?? sharedProps?.positionerProps,
+		styles: mergedStyles,
+		title,
+		triggerProps: triggerProps ?? sharedProps?.triggerProps,
+		zIndex: zIndex ?? sharedProps?.zIndex
+	}), [
+		arrow,
+		closeDelay,
+		disabled,
+		getPopupContainer,
+		hotkey,
+		mergedClassName,
+		mergedClassNames,
+		mergedHotkeyProps,
+		mergedOnOpenChange,
+		mergedStyles,
+		mouseEnterDelay,
+		mouseLeaveDelay,
+		openDelay,
+		placement,
+		popupContainer,
+		popupProps,
+		positionerProps,
+		sharedProps?.arrow,
+		sharedProps?.closeDelay,
+		sharedProps?.disabled,
+		sharedProps?.getPopupContainer,
+		sharedProps?.hotkey,
+		sharedProps?.mouseEnterDelay,
+		sharedProps?.mouseLeaveDelay,
+		sharedProps?.onOpenChange,
+		sharedProps?.openDelay,
+		sharedProps?.placement,
+		sharedProps?.popupContainer,
+		sharedProps?.popupProps,
+		sharedProps?.positionerProps,
+		sharedProps?.triggerProps,
+		sharedProps?.zIndex,
+		title,
+		triggerProps,
+		zIndex
+	]);
+};
+//#endregion
+export { useMergedTooltipProps };
+
+//# sourceMappingURL=useMergedTooltipProps.mjs.map

package/es/base-ui/Tooltip/useMergedTooltipProps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedTooltipProps.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/useMergedTooltipProps.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useMemo } from 'react';\r\n\r\nimport { type TooltipGroupItem, TooltipGroupPropsContext } from './groupContext';\r\nimport type { TooltipProps } from './type';\r\n\r\nexport const useMergedTooltipProps = (props: Partial<TooltipProps>): TooltipGroupItem => {\r\n  const sharedProps = useContext(TooltipGroupPropsContext);\r\n\r\n  const {\r\n    arrow,\r\n    className,\r\n    classNames,\r\n    closeDelay,\r\n    disabled,\r\n    getPopupContainer,\r\n    hotkey,\r\n    hotkeyProps,\r\n    mouseEnterDelay,\r\n    mouseLeaveDelay,\r\n    onOpenChange,\r\n    openDelay,\r\n    placement,\r\n    popupContainer,\r\n    styles: styleProps,\r\n    title,\r\n    zIndex,\r\n    positionerProps,\r\n    triggerProps,\r\n    popupProps,\r\n  } = props;\r\n\r\n  const mergedClassName = useMemo(() => {\r\n    if (!sharedProps?.className && !className) return undefined;\r\n    return [sharedProps?.className, className].filter(Boolean).join(' ');\r\n  }, [className, sharedProps?.className]);\r\n\r\n  const mergedClassNames = useMemo(() => {\r\n    if (!sharedProps?.classNames && !classNames) return undefined;\r\n    return { ...sharedProps?.classNames, ...classNames };\r\n  }, [classNames, sharedProps?.classNames]);\r\n\r\n  const resolvedSharedStyles = useMemo(() => {\r\n    if (typeof sharedProps?.styles === 'function') return undefined;\r\n    return sharedProps?.styles;\r\n  }, [sharedProps?.styles]);\r\n\r\n  const resolvedLocalStyles = useMemo(() => {\r\n    if (typeof styleProps === 'function') return undefined;\r\n    return styleProps;\r\n  }, [styleProps]);\r\n\r\n  const mergedStyles = useMemo(() => {\r\n    if (!resolvedSharedStyles && !resolvedLocalStyles) return undefined;\r\n    return { ...resolvedSharedStyles, ...resolvedLocalStyles };\r\n  }, [resolvedSharedStyles, resolvedLocalStyles]);\r\n\r\n  const mergedHotkeyProps = useMemo(() => {\r\n    if (!sharedProps?.hotkeyProps && !hotkeyProps) return undefined;\r\n    return { ...sharedProps?.hotkeyProps, ...hotkeyProps };\r\n  }, [hotkeyProps, sharedProps?.hotkeyProps]);\r\n\r\n  const mergedOnOpenChange = useMemo(() => {\r\n    if (!sharedProps?.onOpenChange && !onOpenChange) return undefined;\r\n    return (open: boolean) => {\r\n      sharedProps?.onOpenChange?.(open);\r\n      onOpenChange?.(open);\r\n    };\r\n  }, [onOpenChange, sharedProps?.onOpenChange]);\r\n\r\n  const item: TooltipGroupItem = useMemo(\r\n    () => ({\r\n      arrow: arrow ?? sharedProps?.arrow ?? false,\r\n      className: mergedClassName,\r\n      classNames: mergedClassNames,\r\n      closeDelay: closeDelay ?? sharedProps?.closeDelay,\r\n      disabled: disabled ?? sharedProps?.disabled,\r\n      getPopupContainer: getPopupContainer ?? sharedProps?.getPopupContainer,\r\n      hotkey: hotkey ?? sharedProps?.hotkey,\r\n      popupContainer: popupContainer ?? sharedProps?.popupContainer,\r\n      hotkeyProps: mergedHotkeyProps,\r\n      mouseEnterDelay: mouseEnterDelay ?? sharedProps?.mouseEnterDelay,\r\n      mouseLeaveDelay: mouseLeaveDelay ?? sharedProps?.mouseLeaveDelay,\r\n      onOpenChange: mergedOnOpenChange,\r\n      openDelay: openDelay ?? sharedProps?.openDelay,\r\n      placement: placement ?? sharedProps?.placement ?? 'top',\r\n      popupProps: popupProps ?? sharedProps?.popupProps,\r\n      positionerProps: positionerProps ?? sharedProps?.positionerProps,\r\n      styles: mergedStyles,\r\n      title,\r\n      triggerProps: triggerProps ?? sharedProps?.triggerProps,\r\n      zIndex: zIndex ?? sharedProps?.zIndex,\r\n    }),\r\n    [\r\n      arrow,\r\n      closeDelay,\r\n      disabled,\r\n      getPopupContainer,\r\n      hotkey,\r\n      mergedClassName,\r\n      mergedClassNames,\r\n      mergedHotkeyProps,\r\n      mergedOnOpenChange,\r\n      mergedStyles,\r\n      mouseEnterDelay,\r\n      mouseLeaveDelay,\r\n      openDelay,\r\n      placement,\r\n      popupContainer,\r\n      popupProps,\r\n      positionerProps,\r\n      sharedProps?.arrow,\r\n      sharedProps?.closeDelay,\r\n      sharedProps?.disabled,\r\n      sharedProps?.getPopupContainer,\r\n      sharedProps?.hotkey,\r\n      sharedProps?.mouseEnterDelay,\r\n      sharedProps?.mouseLeaveDelay,\r\n      sharedProps?.onOpenChange,\r\n      sharedProps?.openDelay,\r\n      sharedProps?.placement,\r\n      sharedProps?.popupContainer,\r\n      sharedProps?.popupProps,\r\n      sharedProps?.positionerProps,\r\n      sharedProps?.triggerProps,\r\n      sharedProps?.zIndex,\r\n      title,\r\n      triggerProps,\r\n      zIndex,\r\n    ],\r\n  );\r\n\r\n  return item;\r\n};\r\n"],"mappings":";;;;AAOA,MAAa,yBAAyB,UAAmD;CACvF,MAAM,cAAc,WAAW,wBAAwB;CAEvD,MAAM,EACJ,OACA,WACA,YACA,YACA,UACA,mBACA,QACA,aACA,iBACA,iBACA,cACA,WACA,WACA,gBACA,QAAQ,YACR,OACA,QACA,iBACA,cACA,eACE;CAEJ,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,aAAa,aAAa,CAAC,WAAW,OAAO,KAAA;EAClD,OAAO,CAAC,aAAa,WAAW,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACrE,GAAG,CAAC,WAAW,aAAa,SAAS,CAAC;CAEtC,MAAM,mBAAmB,cAAc;EACrC,IAAI,CAAC,aAAa,cAAc,CAAC,YAAY,OAAO,KAAA;EACpD,OAAO;GAAE,GAAG,aAAa;GAAY,GAAG;EAAW;CACrD,GAAG,CAAC,YAAY,aAAa,UAAU,CAAC;CAExC,MAAM,uBAAuB,cAAc;EACzC,IAAI,OAAO,aAAa,WAAW,YAAY,OAAO,KAAA;EACtD,OAAO,aAAa;CACtB,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,sBAAsB,cAAc;EACxC,IAAI,OAAO,eAAe,YAAY,OAAO,KAAA;EAC7C,OAAO;CACT,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,wBAAwB,CAAC,qBAAqB,OAAO,KAAA;EAC1D,OAAO;GAAE,GAAG;GAAsB,GAAG;EAAoB;CAC3D,GAAG,CAAC,sBAAsB,mBAAmB,CAAC;CAE9C,MAAM,oBAAoB,cAAc;EACtC,IAAI,CAAC,aAAa,eAAe,CAAC,aAAa,OAAO,KAAA;EACtD,OAAO;GAAE,GAAG,aAAa;GAAa,GAAG;EAAY;CACvD,GAAG,CAAC,aAAa,aAAa,WAAW,CAAC;CAE1C,MAAM,qBAAqB,cAAc;EACvC,IAAI,CAAC,aAAa,gBAAgB,CAAC,cAAc,OAAO,KAAA;EACxD,QAAQ,SAAkB;GACxB,aAAa,eAAe,IAAI;GAChC,eAAe,IAAI;EACrB;CACF,GAAG,CAAC,cAAc,aAAa,YAAY,CAAC;CAgE5C,OA9D+B,eACtB;EACL,OAAO,SAAS,aAAa,SAAS;EACtC,WAAW;EACX,YAAY;EACZ,YAAY,cAAc,aAAa;EACvC,UAAU,YAAY,aAAa;EACnC,mBAAmB,qBAAqB,aAAa;EACrD,QAAQ,UAAU,aAAa;EAC/B,gBAAgB,kBAAkB,aAAa;EAC/C,aAAa;EACb,iBAAiB,mBAAmB,aAAa;EACjD,iBAAiB,mBAAmB,aAAa;EACjD,cAAc;EACd,WAAW,aAAa,aAAa;EACrC,WAAW,aAAa,aAAa,aAAa;EAClD,YAAY,cAAc,aAAa;EACvC,iBAAiB,mBAAmB,aAAa;EACjD,QAAQ;EACR;EACA,cAAc,gBAAgB,aAAa;EAC3C,QAAQ,UAAU,aAAa;CACjC,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb;EACA;EACA;CACF,CAGQ;AACZ"}

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

@@ -0,0 +1,6 @@
+import { TreeProps } from "./type.mjs";
+//#region src/base-ui/Tree/Tree.d.ts
+declare const Tree: import("react").NamedExoticComponent<TreeProps>;
+//#endregion
+export { Tree as default };
+//# sourceMappingURL=Tree.d.mts.map

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';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo, useId, useMemo, useRef, useState } from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/base-ui/FocusScope';\r\n\r\nimport { TreeContext, type TreeContextValue } from './context';\r\nimport { styles } from './style';\r\nimport TreeNode from './TreeNode';\r\nimport type { TreeDataNode, TreeProps } from './type';\r\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\r\n\r\nconst EMPTY: string[] = [];\r\n\r\nconst Tree = memo<TreeProps>(\r\n  ({\r\n    blockNode = false,\r\n    checkStrictly = false,\r\n    checkable = false,\r\n    checkedKeys: checkedKeysProp,\r\n    className,\r\n    classNames = {},\r\n    defaultCheckedKeys = EMPTY,\r\n    defaultExpandAll = false,\r\n    defaultExpandedKeys = EMPTY,\r\n    defaultSelectedKeys = EMPTY,\r\n    disabled = false,\r\n    expandedKeys: expandedKeysProp,\r\n    indent = 20,\r\n    multiple = false,\r\n    onCheck,\r\n    onExpand,\r\n    onRightClick,\r\n    onSelect,\r\n    scopeId: scopeIdProp,\r\n    selectedKeys: selectedKeysProp,\r\n    showIcon = false,\r\n    showLine = false,\r\n    size = 'middle',\r\n    style,\r\n    styles: customStyles = {},\r\n    switcherIcon,\r\n    titleRender,\r\n    treeData,\r\n    vimKeys = false,\r\n  }) => {\r\n    const generatedId = useId();\r\n    const scopeId = scopeIdProp ?? generatedId;\r\n    const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\r\n      defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\r\n      { value: expandedKeysProp },\r\n    );\r\n    const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\r\n      value: selectedKeysProp,\r\n    });\r\n    const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\r\n      value: checkedKeysProp,\r\n    });\r\n\r\n    const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\r\n    const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\r\n    const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\r\n    const { checked, halfChecked } = useMemo(\r\n      () =>\r\n        checkStrictly\r\n          ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\r\n          : conductCheck(treeData, checkedKeys),\r\n      [checkStrictly, treeData, checkedKeys],\r\n    );\r\n\r\n    const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\r\n    const setActiveKey = setActiveKeyState;\r\n    const activeKey =\r\n      activeKeyState && flat.some((row) => row.node.key === activeKeyState)\r\n        ? activeKeyState\r\n        : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\r\n          flat[0]?.node.key ??\r\n          null);\r\n\r\n    const anchorRef = useRef<string | null>(null);\r\n\r\n    const rowOf = (key: string) =>\r\n      document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\r\n    const focusRow = (key: string) => {\r\n      setActiveKey(key);\r\n      const row = rowOf(key);\r\n      if (row) focusScopeItem(scopeId, row);\r\n    };\r\n\r\n    const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\r\n\r\n    const toggleExpand = (node: TreeDataNode) => {\r\n      const willExpand = !expanded.has(node.key);\r\n      const next = willExpand\r\n        ? [...expandedKeys, node.key]\r\n        : expandedKeys.filter((key) => key !== node.key);\r\n      setExpandedKeys(next);\r\n      onExpand?.(next, { expanded: willExpand, node });\r\n    };\r\n\r\n    const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\r\n      if (isDisabled(node) || node.selectable === false) return;\r\n      let next: string[];\r\n      if (multiple && event?.shiftKey && anchorRef.current) {\r\n        const a = flat.findIndex((row) => row.node.key === anchorRef.current);\r\n        const b = flat.findIndex((row) => row.node.key === node.key);\r\n        next = flat\r\n          .slice(Math.min(a, b), Math.max(a, b) + 1)\r\n          .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\r\n          .map((row) => row.node.key);\r\n      } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\r\n        next = selected.has(node.key)\r\n          ? selectedKeys.filter((key) => key !== node.key)\r\n          : [...selectedKeys, node.key];\r\n        anchorRef.current = node.key;\r\n      } else {\r\n        next = [node.key];\r\n        anchorRef.current = node.key;\r\n      }\r\n      setSelectedKeys(next);\r\n      setActiveKey(node.key);\r\n      onSelect?.(next, { node, selected: next.includes(node.key) });\r\n    };\r\n\r\n    const toggleCheck = (node: TreeDataNode) => {\r\n      if (isDisabled(node) || node.checkable === false) return;\r\n      const willCheck = !checked.has(node.key);\r\n      const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\r\n      const base = new Set(checkStrictly ? checkedKeys : checked);\r\n      keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\r\n      if (!willCheck && !checkStrictly) getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\r\n      const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\r\n      setCheckedKeys(next);\r\n      setActiveKey(node.key);\r\n      onCheck?.(next, { checked: willCheck, node });\r\n    };\r\n\r\n    const currentRow = () => {\r\n      const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\r\n      const key = focused?.dataset.id ?? activeKey;\r\n      return flat.find((row) => row.node.key === key);\r\n    };\r\n\r\n    const withRow = (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\r\n      (event: KeyboardEvent) => {\r\n        const row = currentRow();\r\n        if (row) fn(row, event);\r\n      };\r\n\r\n    useScopeArrowNav({\r\n      extra: {\r\n        ' ': withRow((row, event) => {\r\n          if (checkable && row.node.checkable !== false) toggleCheck(row.node);\r\n          else toggleSelect(row.node, event);\r\n        }),\r\n        '*': withRow((row) => {\r\n          const siblings = flat.filter(\r\n            (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\r\n          );\r\n          if (siblings.length === 0) return;\r\n          const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\r\n          setExpandedKeys(next);\r\n          onExpand?.(next, { expanded: true, node: row.node });\r\n        }),\r\n        ArrowLeft: withRow((row) => {\r\n          if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\r\n          else if (row.parentKey) focusRow(row.parentKey);\r\n        }),\r\n        ArrowRight: withRow((row) => {\r\n          if (!row.hasChildren) return;\r\n          if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\r\n          else toggleExpand(row.node);\r\n        }),\r\n        Enter: withRow((row, event) => toggleSelect(row.node, event)),\r\n      },\r\n      itemSelector: '[role=\"treeitem\"]',\r\n      onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\r\n      scopeId,\r\n      vimKeys,\r\n    });\r\n\r\n    const ctx: TreeContextValue = {\r\n      activeKey,\r\n      blockNode,\r\n      checkable,\r\n      checked,\r\n      classNames,\r\n      disabled,\r\n      expanded,\r\n      halfChecked,\r\n      indent,\r\n      onRightClick: (event, node) => onRightClick?.({ event, node }),\r\n      selected,\r\n      setActiveKey,\r\n      showIcon,\r\n      showLine,\r\n      size,\r\n      styles: customStyles,\r\n      switcherIcon,\r\n      titleRender,\r\n      toggleCheck,\r\n      toggleExpand,\r\n      toggleSelect,\r\n    };\r\n\r\n    return (\r\n      <TreeContext value={ctx}>\r\n        <FocusScope\r\n          className={cx(styles.root, classNames.root, className)}\r\n          id={scopeId}\r\n          role=\"tree\"\r\n          style={{ ...customStyles.root, ...style }}\r\n        >\r\n          {treeData.map((node, i) => (\r\n            <TreeNode\r\n              depth={0}\r\n              isLast={i === treeData.length - 1}\r\n              key={node.key}\r\n              node={node}\r\n              trail={[]}\r\n            />\r\n          ))}\r\n        </FocusScope>\r\n      </TreeContext>\r\n    );\r\n  },\r\n);\r\n\r\nTree.displayName = 'Tree';\r\n\r\nexport default Tree;\r\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_default 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_default, {
+				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","Checkbox"],"sources":["../../../src/base-ui/Tree/TreeNode.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Collapsible } from '@base-ui/react/collapsible';\r\nimport { cx } from 'antd-style';\r\nimport { ChevronRight, File, Folder } from 'lucide-react';\r\nimport { type CSSProperties, memo, type MouseEvent } from 'react';\r\n\r\nimport { Checkbox } from '@/base-ui/Checkbox';\r\nimport { controlHeight } from '@/base-ui/controlSize';\r\nimport Icon from '@/Icon';\r\n\r\nimport { useTreeContext } from './context';\r\nimport { styles } from './style';\r\nimport type { TreeDataNode } from './type';\r\nimport { hasChildren as isExpandable } from './utils';\r\n\r\ninterface TreeNodeProps {\r\n  depth: number;\r\n  isLast: boolean;\r\n  node: TreeDataNode;\r\n  trail: boolean[];\r\n}\r\n\r\nconst ARC = 6;\r\nconst SWITCHER_CENTER = 11.5;\r\n\r\nconst guidePath = (\r\n  depth: number,\r\n  isLast: boolean,\r\n  trail: boolean[],\r\n  indent: number,\r\n  height: number,\r\n) => {\r\n  const cx = (i: number) => i * indent + SWITCHER_CENTER;\r\n  let d = '';\r\n  trail.forEach((more, i) => {\r\n    if (more && i > 0) d += `M${cx(i)} 0V${height}`;\r\n  });\r\n  const x = cx(depth - 1);\r\n  const y = height / 2;\r\n  const elbow = `M${x} ${y - ARC}A${ARC} ${ARC} 0 0 0 ${x + ARC} ${y}H${x + indent - 2}`;\r\n  d += isLast\r\n    ? `M${x} 0V${y - ARC}${elbow.slice(elbow.indexOf('A'))}`\r\n    : `M${x} 0V${height}${elbow}`;\r\n  return d;\r\n};\r\n\r\nconst TreeNode = memo<TreeNodeProps>(({ node, depth, isLast, trail }) => {\r\n  const ctx = useTreeContext();\r\n  const expandable = isExpandable(node);\r\n  const expanded = expandable && ctx.expanded.has(node.key);\r\n  const disabled = ctx.disabled || !!node.disabled;\r\n  const checkable = ctx.checkable && node.checkable !== false;\r\n  const checkState = ctx.checked.has(node.key)\r\n    ? 'checked'\r\n    : ctx.halfChecked.has(node.key)\r\n      ? 'mixed'\r\n      : 'unchecked';\r\n  const rowHeight =\r\n    typeof ctx.styles.node?.height === 'number' ? ctx.styles.node.height : controlHeight[ctx.size];\r\n\r\n  const switcherIcon =\r\n    typeof ctx.switcherIcon === 'function'\r\n      ? ctx.switcherIcon({ expanded, node })\r\n      : (ctx.switcherIcon ?? <Icon icon={ChevronRight} size={14} />);\r\n\r\n  const rowStyle: CSSProperties = {\r\n    height: rowHeight,\r\n    paddingInlineStart: depth * ctx.indent,\r\n    ...ctx.styles.node,\r\n  };\r\n\r\n  const select = (event: MouseEvent) => ctx.toggleSelect(node, event);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        data-scope-item\r\n        aria-disabled={disabled || undefined}\r\n        aria-expanded={expandable ? expanded : undefined}\r\n        aria-level={depth + 1}\r\n        aria-selected={ctx.selected.has(node.key)}\r\n        data-id={node.key}\r\n        role=\"treeitem\"\r\n        style={rowStyle}\r\n        tabIndex={ctx.activeKey === node.key ? 0 : -1}\r\n        aria-checked={\r\n          checkable ? (checkState === 'mixed' ? 'mixed' : checkState === 'checked') : undefined\r\n        }\r\n        className={cx(\r\n          styles.node,\r\n          ctx.blockNode && styles.nodeBlock,\r\n          disabled && styles.nodeDisabled,\r\n          ctx.classNames.node,\r\n        )}\r\n        onClick={ctx.blockNode ? select : undefined}\r\n        onContextMenu={(event) => ctx.onRightClick(event, node)}\r\n        onFocus={() => ctx.setActiveKey(node.key)}\r\n      >\r\n        {ctx.showLine && depth > 0 && (\r\n          <svg\r\n            aria-hidden\r\n            className={cx(styles.guide, ctx.classNames.guide)}\r\n            height={rowHeight}\r\n            style={ctx.styles.guide}\r\n            width={depth * ctx.indent}\r\n          >\r\n            <path d={guidePath(depth, isLast, trail, ctx.indent, rowHeight)} />\r\n          </svg>\r\n        )}\r\n        <button\r\n          aria-hidden\r\n          style={ctx.styles.switcher}\r\n          tabIndex={-1}\r\n          type=\"button\"\r\n          className={cx(\r\n            styles.switcher,\r\n            !expandable && styles.switcherLeaf,\r\n            ctx.classNames.switcher,\r\n          )}\r\n          onClick={(event) => {\r\n            event.stopPropagation();\r\n            ctx.toggleExpand(node);\r\n          }}\r\n        >\r\n          {switcherIcon}\r\n        </button>\r\n        {checkable && (\r\n          <Checkbox\r\n            checked={checkState === 'checked'}\r\n            className={styles.checkbox}\r\n            disabled={disabled}\r\n            indeterminate={checkState === 'mixed'}\r\n            onChange={() => ctx.toggleCheck(node)}\r\n            onClick={(event) => event.stopPropagation()}\r\n          />\r\n        )}\r\n        {ctx.showIcon && (\r\n          <span className={styles.icon}>\r\n            {node.icon ?? <Icon icon={expandable ? Folder : File} size={16} />}\r\n          </span>\r\n        )}\r\n        <span\r\n          style={ctx.styles.title}\r\n          className={cx(\r\n            styles.title,\r\n            ctx.blockNode ? styles.titleBlock : styles.titleInline,\r\n            ctx.classNames.title,\r\n          )}\r\n          onClick={ctx.blockNode ? undefined : select}\r\n        >\r\n          {ctx.titleRender ? ctx.titleRender(node) : node.title}\r\n        </span>\r\n      </div>\r\n      {expandable && (\r\n        <Collapsible.Root open={expanded}>\r\n          <Collapsible.Panel className={styles.panel}>\r\n            {node.children!.map((child, i) => (\r\n              <TreeNode\r\n                depth={depth + 1}\r\n                isLast={i === node.children!.length - 1}\r\n                key={child.key}\r\n                node={child}\r\n                trail={[...trail, !isLast]}\r\n              />\r\n            ))}\r\n          </Collapsible.Panel>\r\n        </Collapsible.Root>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nTreeNode.displayName = 'TreeNode';\r\n\r\nexport default TreeNode;\r\n"],"mappings":"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"}