@ioca/react 1.5.18 → 1.5.20

package/lib/cjs/components/tree/item.js

@@ -3,38 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@ricons/material');
 var classNames = require('classnames');
-var react = require('react');
 var checkbox = require('../checkbox/checkbox.js');
 var icon = require('../icon/icon.js');
+var loading = require('../loading/loading.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
-function TreeList(props) {
-    const { data = [], depth = 0, round, style, className, parent, nodeProps, ...restProps } = props;
-    const contents = data.map((item, i) => {
-        const { type } = item;
-        const title = item[nodeProps.title];
-        const itemKey = item[nodeProps.key] ||
-            (parent?.key !== undefined ? `${parent.key}-${i}` : `${i}`);
-        item.key = itemKey;
-        item.parent = parent;
-        if (type === "title") {
-            return (jsxRuntime.jsx("div", { className: 'i-tree-group-title', children: title }, i));
-        }
-        if (type && type !== "item") {
-            return (jsxRuntime.jsx("div", { className: `i-tree-type-${type}`, children: title }, i));
-        }
-        return (jsxRuntime.jsx(TreeItem, { index: i, item: item, depth: depth, nodeProps: nodeProps, ...restProps }, itemKey));
-    });
-    if (depth > 0)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: contents });
-    return (jsxRuntime.jsx("div", { className: classNames__default("i-tree", className, {
-            "i-tree-round": round,
-        }), style: style, children: contents }));
-}
-const Header = (props) => {
+const TreeItemHeader = (props) => {
     const { as: Tag = "a", href, selected, children, ...restProps } = props;
     const className = classNames__default("i-tree-item-header", {
         "i-tree-item-selected": selected,
@@ -44,37 +21,48 @@ const Header = (props) => {
     }
     return (jsxRuntime.jsx(Tag, { to: href || "", className: className, ...restProps, children: children }));
 };
-const TreeItem = (props) => {
-    const { item, depth = 0, index, selected, checked = [], partofs = {}, checkable, nodeProps, renderExtra, onItemClick, onItemSelect, onItemCheck, ...restProps } = props;
-    const { as, key = "", href, icon: icon$1, title, expanded, disabled } = item;
-    const children = item[nodeProps.children];
-    const [expand, setExpand] = react.useState(expanded);
-    const handleExpand = (e, fromToggle) => {
-        if (fromToggle) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        if (disabled || !children?.length)
-            return;
-        setExpand((v) => !v);
-    };
-    const handleItemClick = (e) => {
-        if (disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        handleExpand(e);
-        onItemClick?.(item, e);
-        onItemSelect?.(key, item);
-    };
-    const handleItemCheck = (checked) => onItemCheck?.(item, checked, []);
-    const itemChecked = checked.includes(key);
-    return (jsxRuntime.jsxs("div", { className: classNames__default("i-tree-item", {
-            "i-tree-expand": expand,
-        }), children: [jsxRuntime.jsxs(Header, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: handleItemClick, children: [checkable && (jsxRuntime.jsx(checkbox.default.Item, { value: itemChecked, partof: !itemChecked && partofs[key], className: 'i-tree-checkbox', onChange: handleItemCheck, onClick: (e) => e.stopPropagation() })), icon$1 && jsxRuntime.jsx("span", { className: 'i-tree-item-icon', children: icon$1 }), jsxRuntime.jsx("span", { className: 'i-tree-item-title', children: title }), renderExtra?.(item), children && (jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.KeyboardArrowDownRound, {}), className: 'i-tree-toggle', onClick: (e) => handleExpand(e, true) }))] }), children?.length && (jsxRuntime.jsx("div", { className: 'i-tree-item-content', children: jsxRuntime.jsx(TreeList, { data: children, depth: depth + 1, selected: selected, checkable: checkable, parent: item, partofs: partofs, checked: checked, nodeProps: nodeProps, renderExtra: renderExtra, onItemClick: onItemClick, onItemSelect: onItemSelect, onItemCheck: onItemCheck, ...restProps }) }))] }));
-};
+function TreeRow(props) {
+    const { flatNode, wrapperStyle, virtualMode, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, onExpand, onItemClick, onItemSelect, onItemCheck, } = props;
+    const { node, depth, isExpanded } = flatNode;
+    const { key = "", as, href, icon: icon$1, title, disabled, type } = node;
+    const children = node[nodeProps.children];
+    const hasChildren = children instanceof Promise || (Array.isArray(children) && children.length > 0);
+    const loading$1 = loadingKeys?.includes(key);
+    if (type === "title") {
+        return jsxRuntime.jsx("div", { style: wrapperStyle, className: "i-tree-group-title", children: title });
+    }
+    if (type && type !== "item") {
+        return jsxRuntime.jsx("div", { style: wrapperStyle, className: `i-tree-type-${type}`, children: title });
+    }
+    return (jsxRuntime.jsx("div", { className: !virtualMode ? classNames__default("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxRuntime.jsxs(TreeItemHeader, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
+                if (disabled) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
+                if (hasChildren)
+                    onExpand(key);
+                onItemClick?.(node, e);
+                onItemSelect?.(key, node);
+            }, children: [checkable && (jsxRuntime.jsx(checkbox.default.Item, { value: checkedSet.has(key), partof: !checkedSet.has(key) && partofs[key], className: "i-tree-checkbox", onChange: () => onItemCheck?.(node, !checkedSet.has(key), []), onClick: (e) => e.stopPropagation() })), icon$1 && jsxRuntime.jsx("span", { className: "i-tree-item-icon", children: icon$1 }), jsxRuntime.jsx("span", { className: "i-tree-item-title", children: title }), renderExtra?.(node), hasChildren && (jsxRuntime.jsx(icon.default, { icon: loading$1 ? jsxRuntime.jsx(loading.default, { size: ".86em" }) : jsxRuntime.jsx(material.KeyboardArrowDownRound, {}), className: classNames__default("i-tree-toggle", {
+                        "i-tree-expand": virtualMode ? isExpanded : false,
+                    }), onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onExpand(key);
+                    } }))] }) }));
+}
+function TreeList(props) {
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, round, className, style, onItemClick, onItemSelect, onItemCheck } = props;
+    return (jsxRuntime.jsx("div", { className: classNames__default("i-tree", className, {
+            "i-tree-round": round,
+        }), style: style, children: flatNodes.map((flatNode) => {
+            const { key = "" } = flatNode.node;
+            return (jsxRuntime.jsx(TreeRow, { flatNode: flatNode, selected: selected, checkedSet: checkedSet, partofs: partofs, checkable: checkable, nodeProps: nodeProps, renderExtra: renderExtra, loadingKeys: loadingKeys, onExpand: onExpand, onItemClick: onItemClick, onItemSelect: onItemSelect, onItemCheck: onItemCheck }, key));
+        }) }));
+}
 
-exports.TreeItem = TreeItem;
+exports.TreeItemHeader = TreeItemHeader;
 exports.TreeList = TreeList;
+exports.TreeRow = TreeRow;
 //# sourceMappingURL=item.js.map

package/lib/cjs/components/tree/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../../packages/components/tree/item.tsx"],"sourcesContent":["import { KeyboardArrowDownRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { MouseEvent, useState } from \"react\";\nimport Checkbox from \"../checkbox\";\nimport Icon from \"../icon\";\nimport { ITree, ITreeHeader, PropsTreeItem } from \"./type\";\n\ninterface ITreeList extends Omit<ITree, \"nodeProps\"> {\n\tnodeProps: {\n\t\tkey: string;\n\t\ttitle: string;\n\t\tchildren: string;\n\t};\n}\n\nexport function TreeList(props: ITreeList) {\n\tconst {\n\t\tdata = [],\n\t\tdepth = 0,\n\t\tround,\n\t\tstyle,\n\t\tclassName,\n\t\tparent,\n\t\tnodeProps,\n\t\t...restProps\n\t} = props;\n\n\tconst contents = data.map((item, i) => {\n\t\tconst { type } = item;\n\t\tconst title = item[nodeProps.title];\n\t\tconst itemKey =\n\t\t\titem[nodeProps.key] ||\n\t\t\t(parent?.key !== undefined ? `${parent.key}-${i}` : `${i}`);\n\n\t\titem.key = itemKey;\n\t\titem.parent = parent;\n\n\t\tif (type === \"title\") {\n\t\t\treturn (\n\t\t\t\t<div key={i} className='i-tree-group-title'>\n\t\t\t\t\t{title}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\tif (type && type !== \"item\") {\n\t\t\treturn (\n\t\t\t\t<div key={i} className={`i-tree-type-${type}`}>\n\t\t\t\t\t{title}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TreeItem\n\t\t\t\tkey={itemKey}\n\t\t\t\tindex={i}\n\t\t\t\titem={item}\n\t\t\t\tdepth={depth}\n\t\t\t\tnodeProps={nodeProps}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t});\n\n\tif (depth > 0) return <>{contents}</>;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-tree\", className, {\n\t\t\t\t\"i-tree-round\": round,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{contents}\n\t\t</div>\n\t);\n}\n\nconst Header = (props: ITreeHeader) => {\n\tconst { as: Tag = \"a\", href, selected, children, ...restProps } = props;\n\n\tconst className = classNames(\"i-tree-item-header\", {\n\t\t\"i-tree-item-selected\": selected,\n\t});\n\n\tif (typeof Tag === \"string\") {\n\t\treturn (\n\t\t\t<Tag href={href} className={className} {...restProps}>\n\t\t\t\t{children}\n\t\t\t</Tag>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Tag to={href || \"\"} className={className} {...restProps}>\n\t\t\t{children}\n\t\t</Tag>\n\t);\n};\n\nexport const TreeItem = (props: PropsTreeItem) => {\n\tconst {\n\t\titem,\n\t\tdepth = 0,\n\t\tindex,\n\t\tselected,\n\t\tchecked = [],\n\t\tpartofs = {},\n\t\tcheckable,\n\t\tnodeProps,\n\t\trenderExtra,\n\t\tonItemClick,\n\t\tonItemSelect,\n\t\tonItemCheck,\n\t\t...restProps\n\t} = props;\n\n\tconst { as, key = \"\", href, icon, title, expanded, disabled } = item;\n\tconst children = item[nodeProps.children];\n\n\tconst [expand, setExpand] = useState(expanded);\n\n\tconst handleExpand = (e: MouseEvent<HTMLElement>, fromToggle?: boolean) => {\n\t\tif (fromToggle) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t}\n\n\t\tif (disabled || !children?.length) return;\n\n\t\tsetExpand((v) => !v);\n\t};\n\n\tconst handleItemClick = (e: MouseEvent<HTMLElement>) => {\n\t\tif (disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\treturn;\n\t\t}\n\n\t\thandleExpand(e);\n\t\tonItemClick?.(item, e);\n\t\tonItemSelect?.(key, item);\n\t};\n\n\tconst handleItemCheck = (checked) => onItemCheck?.(item, checked, []);\n\tconst itemChecked = checked.includes(key);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-tree-item\", {\n\t\t\t\t\"i-tree-expand\": expand,\n\t\t\t})}\n\t\t>\n\t\t\t<Header\n\t\t\t\tas={as}\n\t\t\t\thref={href}\n\t\t\t\tstyle={{ paddingLeft: `${depth * 1.5 + 0.5}em` }}\n\t\t\t\tselected={selected === key}\n\t\t\t\tonClick={handleItemClick}\n\t\t\t>\n\t\t\t\t{checkable && (\n\t\t\t\t\t<Checkbox.Item\n\t\t\t\t\t\tvalue={itemChecked}\n\t\t\t\t\t\tpartof={!itemChecked && partofs[key]}\n\t\t\t\t\t\tclassName='i-tree-checkbox'\n\t\t\t\t\t\tonChange={handleItemCheck}\n\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{icon && <span className='i-tree-item-icon'>{icon}</span>}\n\n\t\t\t\t<span className='i-tree-item-title'>{title}</span>\n\n\t\t\t\t{renderExtra?.(item)}\n\n\t\t\t\t{children && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<KeyboardArrowDownRound />}\n\t\t\t\t\t\tclassName='i-tree-toggle'\n\t\t\t\t\t\tonClick={(e) => handleExpand(e, true)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Header>\n\n\t\t\t{children?.length && (\n\t\t\t\t<div className='i-tree-item-content'>\n\t\t\t\t\t<TreeList\n\t\t\t\t\t\tdata={children}\n\t\t\t\t\t\tdepth={depth + 1}\n\t\t\t\t\t\tselected={selected}\n\t\t\t\t\t\tcheckable={checkable}\n\t\t\t\t\t\tparent={item}\n\t\t\t\t\t\tpartofs={partofs}\n\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\tnodeProps={nodeProps}\n\t\t\t\t\t\trenderExtra={renderExtra}\n\t\t\t\t\t\tonItemClick={onItemClick}\n\t\t\t\t\t\tonItemSelect={onItemSelect}\n\t\t\t\t\t\tonItemCheck={onItemCheck}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["_jsx","_Fragment","classNames","icon","useState","_jsxs","Checkbox","Icon","KeyboardArrowDownRound"],"mappings":"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"}
+{"version":3,"file":"item.js","sources":["../../../../packages/components/tree/item.tsx"],"sourcesContent":["import { KeyboardArrowDownRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { MouseEvent } from \"react\";\nimport Checkbox from \"../checkbox\";\nimport Icon from \"../icon\";\nimport Loading from \"../loading\";\nimport { FlatNode, ITreeItem } from \"./type\";\n\nexport const TreeItemHeader = (props: {\n    as?: ITreeItem[\"as\"];\n    href?: string;\n    selected?: boolean;\n    style?: React.CSSProperties;\n    children: React.ReactNode;\n    onClick?: (e: MouseEvent<HTMLElement>) => void;\n}) => {\n    const { as: Tag = \"a\", href, selected, children, ...restProps } = props;\n\n    const className = classNames(\"i-tree-item-header\", {\n        \"i-tree-item-selected\": selected,\n    });\n\n    if (typeof Tag === \"string\") {\n        return (\n            <Tag href={href} className={className} {...restProps}>\n                {children}\n            </Tag>\n        );\n    }\n\n    return (\n        <Tag to={href || \"\"} className={className} {...restProps}>\n            {children}\n        </Tag>\n    );\n};\n\nexport interface TreeRowProps {\n\tflatNode: FlatNode;\n\twrapperStyle?: React.CSSProperties;\n\tvirtualMode?: boolean;\n\tselected?: string;\n\tcheckedSet: Set<string>;\n\tpartofs?: Record<string, boolean>;\n\tcheckable?: boolean;\n\tnodeProps: { key: string; title: string; children: string };\n\trenderExtra?: (item: ITreeItem) => React.ReactNode;\n\tloadingKeys?: string[];\n\tonExpand: (key: string) => void;\n\tonItemClick?: (item: ITreeItem, e: MouseEvent<HTMLElement>) => void;\n\tonItemSelect?: (key: string, item: ITreeItem) => void;\n\tonItemCheck?: (item: ITreeItem, checked: boolean, checkedKeys: string[]) => void;\n}\n\nexport function TreeRow(props: TreeRowProps) {\n\tconst {\n\t\tflatNode,\n\t\twrapperStyle,\n\t\tvirtualMode,\n\t\tselected,\n\t\tcheckedSet,\n\t\tpartofs = {},\n\t\tcheckable,\n\t\tnodeProps,\n\t\trenderExtra,\n\t\tloadingKeys,\n\t\tonExpand,\n\t\tonItemClick,\n\t\tonItemSelect,\n\t\tonItemCheck,\n\t} = props;\n\n\tconst { node, depth, isExpanded } = flatNode;\n\tconst { key = \"\", as, href, icon, title, disabled, type } = node;\n\tconst children = node[nodeProps.children];\n\tconst hasChildren = children instanceof Promise || (Array.isArray(children) && children.length > 0);\n\tconst loading = loadingKeys?.includes(key);\n\n\tif (type === \"title\") {\n\t\treturn <div style={wrapperStyle} className=\"i-tree-group-title\">{title}</div>;\n\t}\n\n\tif (type && type !== \"item\") {\n\t\treturn <div style={wrapperStyle} className={`i-tree-type-${type}`}>{title}</div>;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={!virtualMode ? classNames(\"i-tree-item\", { \"i-tree-expand\": isExpanded }) : undefined}\n\t\t\tstyle={wrapperStyle}\n\t\t>\n\t\t\t<TreeItemHeader\n\t\t\t\tas={as}\n\t\t\t\thref={href}\n\t\t\t\tstyle={{ paddingLeft: `${depth * 1.5 + 0.5}em` }}\n\t\t\t\tselected={selected === key}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\tif (disabled) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (hasChildren) onExpand(key);\n\t\t\t\t\tonItemClick?.(node, e);\n\t\t\t\t\tonItemSelect?.(key, node);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{checkable && (\n\t\t\t\t\t<Checkbox.Item\n\t\t\t\t\t\tvalue={checkedSet.has(key)}\n\t\t\t\t\t\tpartof={!checkedSet.has(key) && partofs[key]}\n\t\t\t\t\t\tclassName=\"i-tree-checkbox\"\n\t\t\t\t\t\tonChange={() => onItemCheck?.(node, !checkedSet.has(key), [])}\n\t\t\t\t\t\tonClick={(e: MouseEvent) => e.stopPropagation()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{icon && <span className=\"i-tree-item-icon\">{icon}</span>}\n\n\t\t\t\t<span className=\"i-tree-item-title\">{title}</span>\n\n\t\t\t\t{renderExtra?.(node)}\n\n\t\t\t\t{hasChildren && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={loading ? <Loading size=\".86em\" /> : <KeyboardArrowDownRound />}\n\t\t\t\t\t\tclassName={classNames(\"i-tree-toggle\", {\n\t\t\t\t\t\t\t\"i-tree-expand\": virtualMode ? isExpanded : false,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\tonExpand(key);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TreeItemHeader>\n\t\t</div>\n\t);\n}\n\ninterface TreeListProps {\n    flatNodes: FlatNode[];\n    onExpand: (key: string) => void;\n    selected?: string;\n    checkedSet: Set<string>;\n    partofs?: Record<string, boolean>;\n    checkable?: boolean;\n    nodeProps: { key: string; title: string; children: string };\n    renderExtra?: (item: ITreeItem) => React.ReactNode;\n    loadingKeys?: string[];\n    round?: boolean;\n    className?: string;\n    style?: React.CSSProperties;\n    onItemClick?: (item: ITreeItem, e: MouseEvent<HTMLElement>) => void;\n    onItemSelect?: (key: string, item: ITreeItem) => void;\n    onItemCheck?: (item: ITreeItem, checked: boolean, checkedKeys: string[]) => void;\n}\n\nexport function TreeList(props: TreeListProps) {\n    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, round, className, style, onItemClick, onItemSelect, onItemCheck } = props;\n\n    return (\n        <div\n            className={classNames(\"i-tree\", className, {\n                \"i-tree-round\": round,\n            })}\n            style={style}\n        >\n            {flatNodes.map((flatNode) => {\n                const { key = \"\" } = flatNode.node;\n                return (\n                    <TreeRow\n                        key={key}\n                        flatNode={flatNode}\n                        selected={selected}\n                        checkedSet={checkedSet}\n                        partofs={partofs}\n                        checkable={checkable}\n                        nodeProps={nodeProps}\n                        renderExtra={renderExtra}\n                        loadingKeys={loadingKeys}\n                        onExpand={onExpand}\n                        onItemClick={onItemClick}\n                        onItemSelect={onItemSelect}\n                        onItemCheck={onItemCheck}\n                    />\n                );\n            })}\n        </div>\n    );\n}\n"],"names":["classNames","_jsx","icon","loading","_jsxs","Checkbox","Icon","Loading","KeyboardArrowDownRound"],"mappings":"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"}

package/lib/cjs/components/tree/tree.js

@@ -3,22 +3,95 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var react = require('react');
 var item = require('./item.js');
+var virtual = require('./virtual.js');
 
 const defaultNodeProps = {
     key: "key",
     title: "title",
     children: "children",
 };
+function flattenTree(nodes, expandedMap, nodeProps, depth = 0, parentItem, asyncChildrenMap = {}) {
+    const result = [];
+    nodes.forEach((item, i) => {
+        const mapKey = item[nodeProps.key];
+        item.key = mapKey || `${parentItem?.key ?? ""}-${i}`;
+        item.parent = parentItem;
+        const isExpanded = !!expandedMap[item.key];
+        result.push({ node: item, depth, isExpanded });
+        const children = asyncChildrenMap[item.key] || item[nodeProps.children];
+        if (Array.isArray(children) && children.length) {
+            const childNodes = flattenTree(children, expandedMap, nodeProps, depth + 1, item, asyncChildrenMap);
+            if (isExpanded)
+                result.push(...childNodes);
+        }
+    });
+    return result;
+}
 const Tree = (props) => {
-    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, onItemSelect, onItemCheck, ...restProps } = props;
+    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, useVirtual, onItemSelect, onItemCheck, ...restProps } = props;
     const [selectedKey, setSelectedKey] = react.useState(selected);
     const [checkedKeys, setCheckedKeys] = react.useState(checked);
     const [partofs, setPartofs] = react.useState({});
+    const [loadingMap, setLoadingMap] = react.useState({});
+    const [asyncChildrenMap, setAsyncChildrenMap] = react.useState({});
     const nodeMapsRef = react.useRef(new Map());
-    const oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);
-    const isChecked = (key) => checkedKeys.includes(key || "");
+    const oNodeProps = react.useMemo(() => ({ ...defaultNodeProps, ...nodeProps }), [nodeProps]);
+    const checkedSet = react.useMemo(() => new Set(checkedKeys), [checkedKeys]);
+    const [expandedMap, setExpandedMap] = react.useState(() => {
+        const map = {};
+        const walk = (nodes, parentKey = "") => {
+            nodes.forEach((item, i) => {
+                const mapKey = item[oNodeProps.key];
+                const key = mapKey || `${parentKey}-${i}`;
+                if (item.expanded)
+                    map[key] = true;
+                const children = item[oNodeProps.children];
+                if (Array.isArray(children) && children.length)
+                    walk(children, key);
+            });
+        };
+        walk(data);
+        return map;
+    });
+    const handleExpand = (key) => {
+        if (loadingMap[key])
+            return;
+        const item = nodeMapsRef.current.get(key);
+        if (!item)
+            return;
+        const rawChildren = item[oNodeProps.children];
+        const isAsync = rawChildren instanceof Promise;
+        const isExpanded = !!expandedMap[key];
+        if (isAsync && !isExpanded) {
+            reactDom.flushSync(() => {
+                setLoadingMap((prev) => ({ ...prev, [key]: true }));
+                setExpandedMap((prev) => ({ ...prev, [key]: true }));
+            });
+            rawChildren
+                .then((resolved) => {
+                item[oNodeProps.children] = resolved;
+                setAsyncChildrenMap((prev) => ({ ...prev, [key]: resolved }));
+            })
+                .finally(() => {
+                setLoadingMap((prev) => {
+                    const next = { ...prev };
+                    delete next[key];
+                    return next;
+                });
+            });
+        }
+        else {
+            setExpandedMap((prev) => ({
+                ...prev,
+                [key]: !prev[key],
+            }));
+        }
+    };
+    const flatNodes = react.useMemo(() => flattenTree(data, expandedMap, oNodeProps, 0, undefined, asyncChildrenMap), [data, expandedMap, oNodeProps, asyncChildrenMap]);
+    const loadingKeys = react.useMemo(() => Object.keys(loadingMap).filter((k) => loadingMap[k]), [loadingMap]);
     const checkItem = (item, checked, direction) => {
         const { key = "", parent, children } = item;
         const shouldChanged = { [key]: checked };
@@ -27,7 +100,9 @@ const Tree = (props) => {
             return [shouldChanged];
         if (checked) {
             if (parent && direction !== "leaf") {
-                const hasUnchecked = parent.children?.some((o) => o.key !== key && !isChecked(o.key));
+                const hasUnchecked = Array.isArray(parent.children)
+                    ? parent.children.some((o) => o.key !== key && !checkedSet.has(o.key))
+                    : false;
                 const [changes, parts] = checkItem(parent, true, "root");
                 if (!hasUnchecked) {
                     Object.assign(shouldChanged, changes);
@@ -36,9 +111,9 @@ const Tree = (props) => {
                     [parent.key]: true,
                 });
             }
-            if (children?.length && direction !== "root") {
+            if (Array.isArray(children) && children.length && direction !== "root") {
                 children.map((o) => {
-                    if (isChecked(o.key))
+                    if (checkedSet.has(o.key))
                         return;
                     const [changes] = checkItem(o, true, "leaf");
                     Object.assign(shouldChanged, changes);
@@ -50,16 +125,18 @@ const Tree = (props) => {
         if (parent && direction !== "leaf") {
             const [changes, parts] = checkItem(parent, false, "root");
             Object.assign(shouldChanged, changes);
-            const hasChecked = parent.children?.some((o) => isChecked(o.key) && o.key !== key);
+            const hasChecked = Array.isArray(parent.children)
+                ? parent.children.some((o) => checkedSet.has(o.key) && o.key !== key)
+                : false;
             Object.assign(partofs, hasChecked ? {} : parts, {
                 [parent.key]: hasChecked,
                 [key]: false,
             });
         }
-        if (children?.length && direction !== "root") {
+        if (Array.isArray(children) && children.length && direction !== "root") {
             children.map((o) => {
                 const [changes] = checkItem(o, false, "leaf");
-                if (!isChecked(o.key))
+                if (!checkedSet.has(o.key))
                     return;
                 Object.assign(shouldChanged, changes);
                 partofs[o.key] = false;
@@ -70,9 +147,10 @@ const Tree = (props) => {
     const handleCheck = (item, checked) => {
         const [shouldChanged, partofs] = checkItem(item, checked);
         const changedKeys = Object.keys(shouldChanged);
+        const changedKeysSet = new Set(changedKeys);
         const nextChecked = checked
             ? Array.from(new Set([...checkedKeys, ...changedKeys]))
-            : checkedKeys.filter((k) => !changedKeys.includes(k));
+            : checkedKeys.filter((k) => !changedKeysSet.has(k));
         setCheckedKeys(nextChecked);
         setPartofs((p) => ({ ...p, ...partofs }));
         onItemCheck?.(item, checked, nextChecked);
@@ -90,15 +168,37 @@ const Tree = (props) => {
     }, [selected]);
     react.useEffect(() => {
         nodeMapsRef.current.clear();
-        const { key, children } = oNodeProps;
-        const recursive = (nodes) => {
-            nodes.map((o) => {
-                nodeMapsRef.current.set(o[key], o);
-                o[children]?.length > 0 && recursive(o[children]);
+        const { key: keyProp, children: childrenProp } = oNodeProps;
+        const walk = (nodes, parentKey = "") => {
+            nodes.forEach((item, i) => {
+                const mapKey = item[keyProp];
+                const key = (mapKey || `${parentKey}-${i}`);
+                nodeMapsRef.current.set(key, item);
+                const itemChildren = item[childrenProp];
+                if (Array.isArray(itemChildren) && itemChildren.length) {
+                    walk(itemChildren, key);
+                }
             });
         };
-        recursive(data);
-    }, [data]);
+        walk(data);
+    }, [data, oNodeProps, asyncChildrenMap]);
+    react.useEffect(() => {
+        if (!props.selected)
+            return;
+        const node = nodeMapsRef.current.get(props.selected);
+        if (!node)
+            return;
+        const toExpand = {};
+        let p = node.parent;
+        while (p) {
+            if (p.key)
+                toExpand[p.key] = true;
+            p = p.parent;
+        }
+        if (Object.keys(toExpand).length > 0) {
+            setExpandedMap((prev) => ({ ...prev, ...toExpand }));
+        }
+    }, [props.selected]);
     react.useImperativeHandle(ref, () => {
         return {
             getChecked: () => {
@@ -127,7 +227,10 @@ const Tree = (props) => {
             },
         };
     });
-    return (jsxRuntime.jsx(item.TreeList, { data: data, selected: selectedKey, checked: checkedKeys, partofs: partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    if (useVirtual) {
+        return (jsxRuntime.jsx(virtual.default, { flatNodes: flatNodes, onExpand: handleExpand, height: height, useVirtual: useVirtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    }
+    return (jsxRuntime.jsx(item.TreeList, { flatNodes: flatNodes, onExpand: handleExpand, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };
 
 exports.default = Tree;

package/lib/cjs/components/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sources":["../../../../packages/components/tree/tree.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport \"./index.css\";\nimport { TreeList } from \"./item\";\nimport { ITree, ITreeItem } from \"./type\";\n\nconst defaultNodeProps = {\n\tkey: \"key\",\n\ttitle: \"title\",\n\tchildren: \"children\",\n};\n\nconst Tree = (props: ITree) => {\n\tconst {\n\t\tdata = [],\n\t\tref,\n\t\tselected,\n\t\tchecked = [],\n\t\tdisabledRelated,\n\t\tnodeProps,\n\t\tonItemSelect,\n\t\tonItemCheck,\n\t\t...restProps\n\t} = props;\n\tconst [selectedKey, setSelectedKey] = useState(selected);\n\tconst [checkedKeys, setCheckedKeys] = useState(checked);\n\tconst [partofs, setPartofs] = useState<Record<string, boolean>>({});\n\tconst nodeMapsRef = useRef<Map<any, any>>(new Map());\n\tconst oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);\n\n\tconst isChecked = (key?: string) => checkedKeys.includes(key || \"\");\n\n\tconst checkItem = (\n\t\titem: ITreeItem,\n\t\tchecked: boolean,\n\t\tdirection?: \"root\" | \"leaf\"\n\t) => {\n\t\tconst { key = \"\", parent, children } = item;\n\t\tconst shouldChanged = { [key]: checked };\n\t\tconst partofs = { [key]: false };\n\n\t\tif (disabledRelated) return [shouldChanged];\n\n\t\tif (checked) {\n\t\t\tif (parent && direction !== \"leaf\") {\n\t\t\t\tconst hasUnchecked = parent.children?.some(\n\t\t\t\t\t(o) => o.key !== key && !isChecked(o.key)\n\t\t\t\t);\n\n\t\t\t\tconst [changes, parts] = checkItem(parent, true, \"root\");\n\n\t\t\t\tif (!hasUnchecked) {\n\t\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\t}\n\n\t\t\t\tObject.assign(partofs, hasUnchecked ? parts : {}, {\n\t\t\t\t\t[parent.key as string]: true,\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (children?.length && direction !== \"root\") {\n\t\t\t\tchildren.map((o) => {\n\t\t\t\t\tif (isChecked(o.key)) return;\n\n\t\t\t\t\tconst [changes] = checkItem(o, true, \"leaf\");\n\n\t\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\t\tpartofs[o.key as string] = false;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn [shouldChanged, partofs];\n\t\t}\n\n\t\tif (parent && direction !== \"leaf\") {\n\t\t\tconst [changes, parts] = checkItem(parent, false, \"root\");\n\n\t\t\tObject.assign(shouldChanged, changes);\n\n\t\t\tconst hasChecked = parent.children?.some(\n\t\t\t\t(o) => isChecked(o.key) && o.key !== key\n\t\t\t);\n\n\t\t\tObject.assign(partofs, hasChecked ? {} : parts, {\n\t\t\t\t[parent.key as string]: hasChecked,\n\t\t\t\t[key]: false,\n\t\t\t});\n\t\t}\n\t\tif (children?.length && direction !== \"root\") {\n\t\t\tchildren.map((o) => {\n\t\t\t\tconst [changes] = checkItem(o, false, \"leaf\");\n\n\t\t\t\tif (!isChecked(o.key)) return;\n\n\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\tpartofs[o.key as string] = false;\n\t\t\t});\n\t\t}\n\n\t\treturn [shouldChanged, partofs];\n\t};\n\n\tconst handleCheck = (item: ITreeItem, checked: boolean) => {\n\t\tconst [shouldChanged, partofs] = checkItem(item, checked);\n\t\tconst changedKeys = Object.keys(shouldChanged);\n\n\t\tconst nextChecked = checked\n\t\t\t? Array.from(new Set([...checkedKeys, ...changedKeys]))\n\t\t\t: checkedKeys.filter((k) => !changedKeys.includes(k));\n\n\t\tsetCheckedKeys(nextChecked);\n\t\tsetPartofs((p) => ({ ...p, ...partofs }));\n\t\tonItemCheck?.(item, checked, nextChecked);\n\t};\n\n\tconst handleSelect = (key: string, item: ITreeItem) => {\n\t\tif (!props.selectable) return;\n\n\t\tsetSelectedKey(key);\n\t\tonItemSelect?.(key, item);\n\t};\n\n\tuseEffect(() => {\n\t\tif (selected === undefined) return;\n\n\t\tsetSelectedKey(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tnodeMapsRef.current.clear();\n\n\t\tconst { key, children } = oNodeProps;\n\t\tconst recursive = (nodes) => {\n\t\t\tnodes.map((o) => {\n\t\t\t\tnodeMapsRef.current.set(o[key], o);\n\n\t\t\t\to[children]?.length > 0 && recursive(o[children]);\n\t\t\t});\n\t\t};\n\n\t\trecursive(data);\n\t}, [data]);\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tgetChecked: () => {\n\t\t\t\tconst items: ITreeItem[] = [];\n\t\t\t\tcheckedKeys.map((k) => {\n\t\t\t\t\tconst item = nodeMapsRef.current.get(k);\n\t\t\t\t\titems.push(item);\n\t\t\t\t});\n\t\t\t\treturn [checkedKeys, items];\n\t\t\t},\n\t\t\tgetSelected: () => {\n\t\t\t\tconst item = nodeMapsRef.current.get(selectedKey);\n\t\t\t\treturn [selectedKey, item];\n\t\t\t},\n\t\t\tgetPartofs: () => {\n\t\t\t\tconst items: ITreeItem[] = [];\n\t\t\t\tconst keys = Object.keys(partofs).filter((k) => {\n\t\t\t\t\tconst indeterminate = partofs[k];\n\n\t\t\t\t\tif (indeterminate) {\n\t\t\t\t\t\tconst item = nodeMapsRef.current.get(k);\n\t\t\t\t\t\titems.push(item);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn indeterminate;\n\t\t\t\t});\n\n\t\t\t\treturn [keys, items];\n\t\t\t},\n\t\t};\n\t});\n\n\treturn (\n\t\t<TreeList\n\t\t\tdata={data}\n\t\t\tselected={selectedKey}\n\t\t\tchecked={checkedKeys}\n\t\t\tpartofs={partofs}\n\t\t\tnodeProps={oNodeProps}\n\t\t\tonItemCheck={handleCheck}\n\t\t\tonItemSelect={handleSelect}\n\t\t\t{...restProps}\n\t\t/>\n\t);\n};\n\nexport default Tree;\n"],"names":["useState","useRef","useEffect","useImperativeHandle","_jsx","TreeList"],"mappings":"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"}
+{"version":3,"file":"tree.js","sources":["../../../../packages/components/tree/tree.tsx"],"sourcesContent":["import { flushSync } from \"react-dom\";\nimport { useEffect, useImperativeHandle, useMemo, useRef, useState } from \"react\";\nimport \"./index.css\";\nimport { TreeList } from \"./item\";\nimport { ITree, ITreeItem, FlatNode } from \"./type\";\nimport VirtualTree from \"./virtual\";\n\nconst defaultNodeProps = {\n\tkey: \"key\",\n\ttitle: \"title\",\n\tchildren: \"children\",\n};\n\nfunction flattenTree(\n\tnodes: ITreeItem[],\n\texpandedMap: Record<string, boolean>,\n\tnodeProps: { key: string; title: string; children: string },\n\tdepth = 0,\n\tparentItem?: ITreeItem,\n\tasyncChildrenMap: Record<string, ITreeItem[]> = {},\n): FlatNode[] {\n\tconst result: FlatNode[] = [];\n\tnodes.forEach((item, i) => {\n\t\tconst mapKey = item[nodeProps.key];\n\t\titem.key = mapKey || `${parentItem?.key ?? \"\"}-${i}`;\n\t\titem.parent = parentItem;\n\t\tconst isExpanded = !!expandedMap[item.key];\n\t\tresult.push({ node: item, depth, isExpanded });\n\t\tconst children = asyncChildrenMap[item.key as string] || item[nodeProps.children];\n\t\tif (Array.isArray(children) && children.length) {\n\t\t\tconst childNodes = flattenTree(children, expandedMap, nodeProps, depth + 1, item, asyncChildrenMap);\n\t\t\tif (isExpanded) result.push(...childNodes);\n\t\t}\n\t});\n\treturn result;\n}\n\nconst Tree = (props: ITree) => {\n\tconst {\n\t\tdata = [],\n\t\tref,\n\t\tselected,\n\t\tchecked = [],\n\t\tdisabledRelated,\n\t\tnodeProps,\n\t\theight,\n\t\tuseVirtual,\n\t\tonItemSelect,\n\t\tonItemCheck,\n\t\t...restProps\n\t} = props;\n\tconst [selectedKey, setSelectedKey] = useState(selected);\n\tconst [checkedKeys, setCheckedKeys] = useState(checked);\n\tconst [partofs, setPartofs] = useState<Record<string, boolean>>({});\n\tconst [loadingMap, setLoadingMap] = useState<Record<string, boolean>>({});\n\tconst [asyncChildrenMap, setAsyncChildrenMap] = useState<Record<string, ITreeItem[]>>({});\n\tconst nodeMapsRef = useRef<Map<string, ITreeItem>>(new Map());\n\tconst oNodeProps = useMemo(\n\t\t() => ({ ...defaultNodeProps, ...nodeProps }),\n\t\t[nodeProps],\n\t);\n\tconst checkedSet = useMemo(() => new Set(checkedKeys), [checkedKeys]);\n\n\tconst [expandedMap, setExpandedMap] = useState<Record<string, boolean>>(\n\t\t() => {\n\t\t\tconst map: Record<string, boolean> = {};\n\t\t\tconst walk = (nodes: ITreeItem[], parentKey = \"\") => {\n\t\t\t\tnodes.forEach((item, i) => {\n\t\t\t\t\tconst mapKey = item[oNodeProps.key] as string | undefined;\n\t\t\t\t\tconst key = mapKey || `${parentKey}-${i}`;\n\t\t\t\t\tif (item.expanded) map[key] = true;\n\t\t\t\t\tconst children = item[oNodeProps.children];\n\t\t\t\t\tif (Array.isArray(children) && children.length) walk(children, key);\n\t\t\t\t});\n\t\t\t};\n\t\t\twalk(data);\n\t\t\treturn map;\n\t\t},\n\t);\n\n\tconst handleExpand = (key: string) => {\n\t\tif (loadingMap[key]) return;\n\n\t\tconst item = nodeMapsRef.current.get(key);\n\t\tif (!item) return;\n\n\t\tconst rawChildren = item[oNodeProps.children];\n\t\tconst isAsync = rawChildren instanceof Promise;\n\t\tconst isExpanded = !!expandedMap[key];\n\n\t\tif (isAsync && !isExpanded) {\n\t\t\tflushSync(() => {\n\t\t\t\tsetLoadingMap((prev) => ({ ...prev, [key]: true }));\n\t\t\t\tsetExpandedMap((prev) => ({ ...prev, [key]: true }));\n\t\t\t});\n\n\t\t\trawChildren\n\t\t\t\t.then((resolved: ITreeItem[]) => {\n\t\t\t\t\titem[oNodeProps.children] = resolved;\n\t\t\t\t\tsetAsyncChildrenMap((prev) => ({ ...prev, [key]: resolved }));\n\t\t\t\t})\n\t\t\t\t.finally(() => {\n\t\t\t\t\tsetLoadingMap((prev) => {\n\t\t\t\t\t\tconst next = { ...prev };\n\t\t\t\t\t\tdelete next[key];\n\t\t\t\t\t\treturn next;\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t} else {\n\t\t\tsetExpandedMap((prev) => ({\n\t\t\t\t...prev,\n\t\t\t\t[key]: !prev[key],\n\t\t\t}));\n\t\t}\n\t};\n\n\tconst flatNodes = useMemo(\n\t\t() => flattenTree(data, expandedMap, oNodeProps, 0, undefined, asyncChildrenMap),\n\t\t[data, expandedMap, oNodeProps, asyncChildrenMap],\n\t);\n\n\tconst loadingKeys = useMemo(\n\t\t() => Object.keys(loadingMap).filter((k) => loadingMap[k]),\n\t\t[loadingMap],\n\t);\n\n\n\tconst checkItem = (\n\t\titem: ITreeItem,\n\t\tchecked: boolean,\n\t\tdirection?: \"root\" | \"leaf\",\n\t) => {\n\t\tconst { key = \"\", parent, children } = item;\n\t\tconst shouldChanged = { [key]: checked };\n\t\tconst partofs = { [key]: false };\n\n\t\tif (disabledRelated) return [shouldChanged];\n\n\t\tif (checked) {\n\t\t\tif (parent && direction !== \"leaf\") {\n\t\t\t\tconst hasUnchecked = Array.isArray(parent.children)\n\t\t\t\t\t? parent.children.some(\n\t\t\t\t\t\t(o) => o.key !== key && !checkedSet.has(o.key),\n\t\t\t\t\t)\n\t\t\t\t\t: false;\n\n\t\t\t\tconst [changes, parts] = checkItem(parent, true, \"root\");\n\n\t\t\t\tif (!hasUnchecked) {\n\t\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\t}\n\n\t\t\t\tObject.assign(partofs, hasUnchecked ? parts : {}, {\n\t\t\t\t\t[parent.key as string]: true,\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (Array.isArray(children) && children.length && direction !== \"root\") {\n\t\t\t\tchildren.map((o) => {\n\t\t\t\t\tif (checkedSet.has(o.key)) return;\n\n\t\t\t\t\tconst [changes] = checkItem(o, true, \"leaf\");\n\n\t\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\t\tpartofs[o.key as string] = false;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn [shouldChanged, partofs];\n\t\t}\n\n\t\tif (parent && direction !== \"leaf\") {\n\t\t\tconst [changes, parts] = checkItem(parent, false, \"root\");\n\n\t\t\tObject.assign(shouldChanged, changes);\n\n\t\t\tconst hasChecked = Array.isArray(parent.children)\n\t\t\t\t? parent.children.some(\n\t\t\t\t\t(o) => checkedSet.has(o.key) && o.key !== key,\n\t\t\t\t)\n\t\t\t\t: false;\n\n\t\t\tObject.assign(partofs, hasChecked ? {} : parts, {\n\t\t\t\t[parent.key as string]: hasChecked,\n\t\t\t\t[key]: false,\n\t\t\t});\n\t\t}\n\t\tif (Array.isArray(children) && children.length && direction !== \"root\") {\n\t\t\tchildren.map((o) => {\n\t\t\t\tconst [changes] = checkItem(o, false, \"leaf\");\n\n\t\t\t\tif (!checkedSet.has(o.key)) return;\n\n\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\tpartofs[o.key as string] = false;\n\t\t\t});\n\t\t}\n\n\t\treturn [shouldChanged, partofs];\n\t};\n\n\tconst handleCheck = (item: ITreeItem, checked: boolean) => {\n\t\tconst [shouldChanged, partofs] = checkItem(item, checked);\n\t\tconst changedKeys = Object.keys(shouldChanged);\n\n\t\tconst changedKeysSet = new Set(changedKeys);\n\t\tconst nextChecked = checked\n\t\t\t? Array.from(new Set([...checkedKeys, ...changedKeys]))\n\t\t\t: checkedKeys.filter((k) => !changedKeysSet.has(k));\n\n\t\tsetCheckedKeys(nextChecked);\n\t\tsetPartofs((p) => ({ ...p, ...partofs }));\n\t\tonItemCheck?.(item, checked, nextChecked);\n\t};\n\n\tconst handleSelect = (key: string, item: ITreeItem) => {\n\t\tif (!props.selectable) return;\n\n\t\tsetSelectedKey(key);\n\t\tonItemSelect?.(key, item);\n\t};\n\n\tuseEffect(() => {\n\t\tif (selected === undefined) return;\n\n\t\tsetSelectedKey(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tnodeMapsRef.current.clear();\n\t\tconst { key: keyProp, children: childrenProp } = oNodeProps;\n\t\tconst walk = (nodes: ITreeItem[], parentKey = \"\") => {\n\t\t\tnodes.forEach((item, i) => {\n\t\t\t\tconst mapKey = item[keyProp];\n\t\t\t\tconst key = (mapKey || `${parentKey}-${i}`) as string;\n\t\t\t\tnodeMapsRef.current.set(key, item);\n\t\t\t\tconst itemChildren = item[childrenProp];\n\t\t\t\tif (Array.isArray(itemChildren) && itemChildren.length) {\n\t\t\t\t\twalk(itemChildren, key);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t\twalk(data);\n\t}, [data, oNodeProps, asyncChildrenMap]);\n\n\tuseEffect(() => {\n\t\tif (!props.selected) return;\n\n\t\tconst node = nodeMapsRef.current.get(props.selected);\n\t\tif (!node) return;\n\n\t\tconst toExpand: Record<string, boolean> = {};\n\t\tlet p = node.parent;\n\t\twhile (p) {\n\t\t\tif (p.key) toExpand[p.key] = true;\n\t\t\tp = p.parent;\n\t\t}\n\n\t\tif (Object.keys(toExpand).length > 0) {\n\t\t\tsetExpandedMap((prev) => ({ ...prev, ...toExpand }));\n\t\t}\n\t}, [props.selected]);\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tgetChecked: () => {\n\t\t\t\tconst items: ITreeItem[] = [];\n\t\t\t\tcheckedKeys.map((k) => {\n\t\t\t\t\tconst item = nodeMapsRef.current.get(k);\n\t\t\t\t\titems.push(item);\n\t\t\t\t});\n\t\t\t\treturn [checkedKeys, items];\n\t\t\t},\n\t\t\tgetSelected: () => {\n\t\t\t\tconst item = nodeMapsRef.current.get(selectedKey);\n\t\t\t\treturn [selectedKey, item];\n\t\t\t},\n\t\t\tgetPartofs: () => {\n\t\t\t\tconst items: ITreeItem[] = [];\n\t\t\t\tconst keys = Object.keys(partofs).filter((k) => {\n\t\t\t\t\tconst indeterminate = partofs[k];\n\n\t\t\t\t\tif (indeterminate) {\n\t\t\t\t\t\tconst item = nodeMapsRef.current.get(k);\n\t\t\t\t\t\titems.push(item);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn indeterminate;\n\t\t\t\t});\n\n\t\t\t\treturn [keys, items];\n\t\t\t},\n\t\t};\n\t});\n\n\tif (useVirtual) {\n\t\treturn (\n\t\t\t<VirtualTree\n\t\t\t\tflatNodes={flatNodes}\n\t\t\t\tonExpand={handleExpand}\n\t\t\t\theight={height}\n\t\t\t\tuseVirtual={useVirtual}\n\t\t\t\tselected={selectedKey}\n\t\t\t\tcheckedSet={checkedSet}\n\t\t\t\tpartofs={partofs}\n\t\t\t\tnodeProps={oNodeProps}\n\t\t\t\tloadingKeys={loadingKeys}\n\t\t\t\tonItemCheck={handleCheck}\n\t\t\t\tonItemSelect={handleSelect}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TreeList\n\t\t\tflatNodes={flatNodes}\n\t\t\tonExpand={handleExpand}\n\t\t\tselected={selectedKey}\n\t\t\tcheckedSet={checkedSet}\n\t\t\tpartofs={partofs}\n\t\t\tnodeProps={oNodeProps}\n\t\t\tloadingKeys={loadingKeys}\n\t\t\tonItemCheck={handleCheck}\n\t\t\tonItemSelect={handleSelect}\n\t\t\t{...restProps}\n\t\t/>\n\t);\n};\n\nexport default Tree;\n"],"names":["useState","useRef","useMemo","flushSync","useEffect","useImperativeHandle","_jsx","VirtualTree","TreeList"],"mappings":"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"}

package/lib/cjs/components/tree/virtual.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var react = require('react');
+var reactWindow = require('react-window');
+var hooks = require('../../js/hooks.js');
+var item = require('./item.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+
+function VirtualTree(props) {
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, useVirtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
+    const listRef = react.useRef(null);
+    const wrapRef = react.useRef(null);
+    const ro = hooks.useResizeObserver();
+    const [viewportHeight, setViewportHeight] = react.useState(0);
+    react.useEffect(() => {
+        const el = wrapRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            const r = el.getBoundingClientRect();
+            setViewportHeight((prev) => (prev === r.height ? prev : r.height));
+        };
+        update();
+        ro.observe?.(el, update);
+        return () => ro.unobserve?.(el);
+    }, [ro]);
+    const listHeight = Math.max(0, (typeof height === "number" ? height : viewportHeight || 360));
+    const propsRef = react.useRef(props);
+    propsRef.current = props;
+    const rowComponent = react.useCallback(({ index, style, }) => {
+        const p = propsRef.current;
+        const flatNode = p.flatNodes[index];
+        if (!flatNode)
+            return null;
+        return (jsxRuntime.jsx(item.TreeRow, { flatNode: flatNode, wrapperStyle: style, virtualMode: true, selected: p.selected, checkedSet: p.checkedSet, partofs: p.partofs, checkable: p.checkable, nodeProps: p.nodeProps, renderExtra: p.renderExtra, loadingKeys: p.loadingKeys, onExpand: p.onExpand, onItemClick: p.onItemClick, onItemSelect: p.onItemSelect, onItemCheck: p.onItemCheck }));
+    }, []);
+    return (jsxRuntime.jsx("div", { ref: wrapRef, className: classNames__default("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsxRuntime.jsx(reactWindow.List, { listRef: listRef, rowCount: flatNodes.length, rowHeight: useVirtual.rowHeight, overscanCount: Math.max(3, useVirtual.threshold ?? 8), rowProps: {}, style: {
+                width: "100%",
+                height: listHeight,
+                overflow: "auto",
+            }, rowComponent: rowComponent }) }));
+}
+
+exports.default = VirtualTree;
+//# sourceMappingURL=virtual.js.map

package/lib/cjs/components/tree/virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual.js","sources":["../../../../packages/components/tree/virtual.tsx"],"sourcesContent":["import { KeyboardArrowDownRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n// @ts-ignore\nimport { List as VirtualList } from \"react-window\";\nimport Checkbox from \"../checkbox\";\nimport Icon from \"../icon\";\nimport Loading from \"../loading\";\nimport { useResizeObserver } from \"../../js/hooks\";\nimport { FlatNode, ITreeItem, TVirtual } from \"./type\";\nimport { TreeRow } from \"./item\";\n\ninterface VirtualTreeProps {\n\tflatNodes: FlatNode[];\n\tonExpand: (key: string) => void;\n\tselected?: string;\n\tcheckedSet: Set<string>;\n\tpartofs?: Record<string, boolean>;\n\tcheckable?: boolean;\n\tnodeProps: { key: string; title: string; children: string };\n\trenderExtra?: (item: ITreeItem) => React.ReactNode;\n\tloadingKeys?: string[];\n\theight?: number | string;\n\tuseVirtual: TVirtual;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonItemClick?: (item: ITreeItem, e: React.MouseEvent<HTMLElement>) => void;\n\tonItemSelect?: (key: string, item: ITreeItem) => void;\n\tonItemCheck?: (\n\t\titem: ITreeItem,\n\t\tchecked: boolean,\n\t\tcheckedKeys: string[],\n\t) => void;\n}\n\nexport default function VirtualTree(props: VirtualTreeProps) {\n\tconst {\n\t\tflatNodes,\n\t\tonExpand,\n\t\tselected,\n\t\tcheckedSet,\n\t\tpartofs = {},\n\t\tcheckable,\n\t\tnodeProps,\n\t\trenderExtra,\n\t\tloadingKeys,\n\t\theight,\n\t\tuseVirtual,\n\t\tclassName,\n\t\tstyle,\n\t\tonItemClick,\n\t\tonItemSelect,\n\t\tonItemCheck,\n\t} = props;\n\n\tconst listRef = useRef<any>(null);\n\tconst wrapRef = useRef<HTMLDivElement>(null);\n\tconst ro = useResizeObserver();\n\tconst [viewportHeight, setViewportHeight] = useState(0);\n\n\tuseEffect(() => {\n\t\tconst el = wrapRef.current;\n\t\tif (!el) return;\n\t\tconst update = () => {\n\t\t\tconst r = el.getBoundingClientRect();\n\t\t\tsetViewportHeight((prev) => (prev === r.height ? prev : r.height));\n\t\t};\n\t\tupdate();\n\t\tro.observe?.(el, update);\n\t\treturn () => ro.unobserve?.(el);\n\t}, [ro]);\n\n\tconst listHeight = Math.max(\n\t\t0,\n\t\t(typeof height === \"number\" ? height : viewportHeight || 360),\n\t);\n\n\tconst propsRef = useRef(props);\n\tpropsRef.current = props;\n\n\tconst rowComponent = useCallback(\n\t\t({\n\t\t\tindex,\n\t\t\tstyle,\n\t\t}: {\n\t\t\tindex: number;\n\t\t\tstyle: React.CSSProperties;\n\t\t}) => {\n\t\t\tconst p = propsRef.current;\n\t\t\tconst flatNode = p.flatNodes[index];\n\t\t\tif (!flatNode) return null;\n\t\t\treturn (\n\t\t\t\t<TreeRow\n\t\t\t\t\tflatNode={flatNode}\n\t\t\t\t\twrapperStyle={style}\n\t\t\t\t\tvirtualMode\n\t\t\t\t\tselected={p.selected}\n\t\t\t\t\tcheckedSet={p.checkedSet}\n\t\t\t\t\tpartofs={p.partofs}\n\t\t\t\t\tcheckable={p.checkable}\n\t\t\t\t\tnodeProps={p.nodeProps}\n\t\t\t\t\trenderExtra={p.renderExtra}\n\t\t\t\t\tloadingKeys={p.loadingKeys}\n\t\t\t\t\tonExpand={p.onExpand}\n\t\t\t\t\tonItemClick={p.onItemClick}\n\t\t\t\t\tonItemSelect={p.onItemSelect}\n\t\t\t\t\tonItemCheck={p.onItemCheck}\n\t\t\t\t/>\n\t\t\t);\n\t\t},\n\t\t[],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={wrapRef}\n\t\t\tclassName={classNames(\"i-tree\", className)}\n\t\t\tstyle={{ display: \"block\", width: \"100%\", height: \"100%\", ...style }}\n\t\t>\n\t\t\t<VirtualList\n\t\t\t\tlistRef={listRef}\n\t\t\t\trowCount={flatNodes.length}\n\t\t\t\trowHeight={useVirtual.rowHeight}\n\t\t\t\toverscanCount={Math.max(3, useVirtual.threshold ?? 8)}\n\t\t\t\trowProps={{} as any}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\theight: listHeight,\n\t\t\t\t\toverflow: \"auto\",\n\t\t\t\t}}\n\t\t\t\trowComponent={rowComponent}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["useRef","useResizeObserver","useState","useEffect","useCallback","_jsx","TreeRow","classNames","VirtualList"],"mappings":"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"}

package/lib/cjs/js/hooks.js

@@ -64,12 +64,15 @@ function useMouseUp(listener, options) {
 }
 function useKeydown(listener, options) {
     initEventsOnce();
+    const listenerRef = react.useRef(listener);
+    listenerRef.current = listener;
     react.useEffect(() => {
         if (options?.disabled)
             return;
-        KeydownEvents.add(listener);
+        const handler = (e) => listenerRef.current(e);
+        KeydownEvents.add(handler);
         return () => {
-            KeydownEvents.delete(listener);
+            KeydownEvents.delete(handler);
         };
     }, []);
 }