@ioca/react 1.5.19 → 1.5.21

package/lib/index.js

@@ -5,7 +5,7 @@ import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneEleme
 import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
-import { createPortal } from 'react-dom';
+import { createPortal, flushSync } from 'react-dom';
 import xss from 'xss';
 import { renderToStaticMarkup } from 'react-dom/server';
 import PubSub from 'pubsub-js';
@@ -1186,7 +1186,7 @@ function Row(props) {
     }, [data, onRowClick, row]);
     return (jsx("div", { className: 'i-datagrid-row', onClick: handleRowClick, children: columns.map((col, i) => (jsx(Cell, { column: col, col: i, row: row, data: data, cellEllipsis: cellEllipsis, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
 }
-function Header$1(props) {
+function Header(props) {
     const { columns, resizable, cellEllipsis, sortBy, sortType, onWidthChange, onHeaderClick, } = props;
     const columnById = useMemo(() => {
         const map = new Map();
@@ -1216,6 +1216,84 @@ function Header$1(props) {
         }) }));
 }
 
+const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader, cellEllipsis, sortBy, sortType, resizable, onWidthChange, }) {
+    const { id, fixed, justify, colSpan, render, title, sorter, renderHeader } = column;
+    const style = useMemo(() => ({
+        "--datagrid-justify": justify,
+        gridColumn: `${col + 1} / span ${colSpan ?? 1}`,
+        insetInline: `var(--datagrid-cell-inset-${col})`,
+        ...(isHeader ? { insetBlockStart: 0 } : null),
+        position: !isHeader && !fixed ? "static" : undefined,
+    }), [col, colSpan, fixed, isHeader, justify]);
+    const order = isHeader && sortBy === id ? sortType : "";
+    return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
+            [`i-datagrid-cell-fixed-${fixed}`]: fixed,
+            "i-datagrid-has-sorter": isHeader && sorter,
+        }), style: style, children: [isHeader
+                ? (renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                        "i-datagrid-cell-content-ellipsis": cellEllipsis,
+                    }), children: title || id })))
+                : (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                        "i-datagrid-cell-content-ellipsis": cellEllipsis,
+                    }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }));
+});
+// ---------------------------------------------------------------------------
+// VirtualRow — memoised row rendered by react-window
+// ---------------------------------------------------------------------------
+const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttributes, rows, columns, columnById, columnIndexById, contentWidthPx, virtualRowHeight, header, striped, cellEllipsis, loaderNode, sortBy, sortType, resizable, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, }) {
+    if (index >= rows.length) {
+        return (jsx("div", { ...ariaAttributes, style: {
+                ...itemStyle,
+                width: contentWidthPx,
+                minWidth: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }, children: loaderNode }));
+    }
+    const rowData = rows[index];
+    const rowNum = index + (header ? 1 : 0);
+    const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
+    const handleCellClick = useCallback((e) => {
+        if (!onCellClick)
+            return;
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        if (!id)
+            return;
+        const column = columnById.get(id);
+        const col = columnIndexById.get(id);
+        if (!column || col == null)
+            return;
+        onCellClick(rowData, column, rowNum, col, e);
+    }, [columnById, columnIndexById, onCellClick, rowData, rowNum]);
+    const handleCellDoubleClick = useCallback((e) => {
+        if (!onCellDoubleClick)
+            return;
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        if (!id)
+            return;
+        const column = columnById.get(id);
+        const col = columnIndexById.get(id);
+        if (!column || col == null)
+            return;
+        onCellDoubleClick(rowData, column, rowNum, col, e);
+    }, [columnById, columnIndexById, onCellDoubleClick, rowData, rowNum]);
+    const handleRowClick = useCallback(() => onRowClick?.(rowData, rowNum), [onRowClick, rowData, rowNum]);
+    return (jsx("div", { style: {
+            ...itemStyle,
+            width: contentWidthPx,
+            minWidth: "100%",
+            display: "grid",
+            gridTemplateColumns: "var(--grid-template-columns)",
+            height: virtualRowHeight,
+            "--datagrid-cell-background": bg,
+        }, className: 'i-datagrid-row', onClick: handleRowClick, onClickCapture: handleCellClick, onDoubleClickCapture: handleCellDoubleClick, children: columns.map((c, col) => (jsx(VirtualCell, { column: c, data: rowData, row: rowNum, col: col, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))) }));
+});
+// ---------------------------------------------------------------------------
+// VirtualDatagrid
+// ---------------------------------------------------------------------------
 function VirtualDatagrid(props) {
     const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll, } = props;
     const headerRef = useRef(null);
@@ -1228,6 +1306,7 @@ function VirtualDatagrid(props) {
     const rafRef = useRef({
         viewport: 0,
         contentWidth: 0,
+        scrollSync: 0,
     });
     const columnById = useMemo(() => {
         const map = new Map();
@@ -1239,38 +1318,6 @@ function VirtualDatagrid(props) {
         columns.forEach((c, i) => map.set(c.id, i));
         return map;
     }, [columns]);
-    const getVirtualCellStyle = useCallback(({ justify, col, colSpan = 1, }) => {
-        return {
-            "--datagrid-justify": justify,
-            gridColumn: `${col + 1} / span ${colSpan}`,
-            insetInline: `var(--datagrid-cell-inset-${col})`,
-        };
-    }, []);
-    const renderVirtualCell = useCallback(({ column, data, row, col, isHeader, }) => {
-        const { id, fixed, justify, colSpan, render, title, sorter, renderHeader, } = column;
-        const style = {
-            ...getVirtualCellStyle({ justify, col, colSpan }),
-            ...(isHeader ? { insetBlockStart: 0 } : null),
-        };
-        const order = isHeader && sortBy === id ? sortType : "";
-        return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
-                [`i-datagrid-cell-fixed-${fixed}`]: fixed,
-                "i-datagrid-has-sorter": isHeader && sorter,
-            }), style: style, children: [isHeader
-                    ? (renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
-                            "i-datagrid-cell-content-ellipsis": cellEllipsis,
-                        }), children: title || id })))
-                    : (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
-                            "i-datagrid-cell-content-ellipsis": cellEllipsis,
-                        }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, id));
-    }, [
-        cellEllipsis,
-        getVirtualCellStyle,
-        onWidthChange,
-        resizable,
-        sortBy,
-        sortType,
-    ]);
     const handleHeaderClick = useCallback((e) => {
         const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
         const id = el?.dataset?.col;
@@ -1280,10 +1327,17 @@ function VirtualDatagrid(props) {
         const el = e.currentTarget;
         if (!el)
             return;
-        if (headerRef.current &&
-            headerRef.current.scrollLeft !== el.scrollLeft) {
-            headerRef.current.scrollLeft = el.scrollLeft;
-        }
+        if (rafRef.current.scrollSync)
+            return;
+        rafRef.current.scrollSync = requestAnimationFrame(() => {
+            rafRef.current.scrollSync = 0;
+            if (!headerRef.current)
+                return;
+            const target = el.scrollLeft;
+            if (headerRef.current.scrollLeft !== target) {
+                headerRef.current.scrollLeft = target;
+            }
+        });
     }, []);
     const handleReachEnd = useCallback(() => {
         if (virtual.onReachEnd) {
@@ -1313,32 +1367,6 @@ function VirtualDatagrid(props) {
             listEl.scrollLeft = el.scrollLeft;
         }
     }, []);
-    const handleBodyClickCapture = useCallback((e, rowData, rowNum) => {
-        if (!onCellClick)
-            return;
-        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
-        const id = el?.dataset?.col;
-        if (!id)
-            return;
-        const column = columnById.get(id);
-        const col = columnIndexById.get(id);
-        if (!column || col == null)
-            return;
-        onCellClick(rowData, column, rowNum, col, e);
-    }, [columnById, columnIndexById, onCellClick]);
-    const handleBodyDoubleClickCapture = useCallback((e, rowData, rowNum) => {
-        if (!onCellDoubleClick)
-            return;
-        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
-        const id = el?.dataset?.col;
-        if (!id)
-            return;
-        const column = columnById.get(id);
-        const col = columnIndexById.get(id);
-        if (!column || col == null)
-            return;
-        onCellDoubleClick(rowData, column, rowNum, col, e);
-    }, [columnById, columnIndexById, onCellDoubleClick]);
     useEffect(() => {
         const el = wrapRef.current;
         if (!el)
@@ -1409,12 +1437,14 @@ function VirtualDatagrid(props) {
     const contentWidthPx = measuredContentWidth
         ? `${measuredContentWidth}px`
         : "fit-content";
-    const headerCells = useMemo(() => columns.map((c, col) => renderVirtualCell({
-        column: c,
-        row: 0,
-        col,
-        isHeader: true,
-    })), [columns, renderVirtualCell]);
+    const headerCells = useMemo(() => columns.map((c, col) => (jsx(VirtualCell, { column: c, row: 0, col: col, isHeader: true, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))), [
+        cellEllipsis,
+        columns,
+        onWidthChange,
+        resizable,
+        sortBy,
+        sortType,
+    ]);
     const headerInnerStyle = useMemo(() => ({
         display: "grid",
         gridTemplateColumns: "var(--grid-template-columns)",
@@ -1434,50 +1464,47 @@ function VirtualDatagrid(props) {
         }
         : undefined, [scrollbarSize]);
     const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: 'my-12' }), [virtual.loader]);
-    const rowComponent = useCallback(({ index, style: itemStyle }) => {
-        if (index >= rows.length) {
-            return (jsx("div", { style: {
-                    ...itemStyle,
-                    width: contentWidthPx,
-                    minWidth: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                }, children: loaderNode }));
-        }
-        const rowData = rows[index];
-        const rowNum = index + (header ? 1 : 0);
-        const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
-        return (jsx("div", { style: {
-                ...itemStyle,
-                width: contentWidthPx,
-                minWidth: "100%",
-                display: "grid",
-                gridTemplateColumns: "var(--grid-template-columns)",
-                height: virtual.rowHeight,
-                "--datagrid-cell-background": bg,
-            }, className: 'i-datagrid-row', onClickCapture: (e) => handleBodyClickCapture(e, rowData, rowNum), onDoubleClickCapture: (e) => handleBodyDoubleClickCapture(e, rowData, rowNum), onClick: () => onRowClick?.(rowData, rowNum), children: columns.map((c, col) => renderVirtualCell({
-                column: c,
-                data: rowData,
-                row: rowNum,
-                col,
-            })) }));
-    }, [
+    // Stable row-component reference so react-window can memoise rows.
+    const rowProps = useMemo(() => ({
+        rows,
         columns,
+        columnById,
+        columnIndexById,
         contentWidthPx,
-        handleBodyClickCapture,
-        handleBodyDoubleClickCapture,
+        virtualRowHeight: virtual.rowHeight,
         header,
+        striped,
+        cellEllipsis,
         loaderNode,
+        sortBy,
+        sortType,
+        resizable,
+        onWidthChange,
         onRowClick,
-        renderVirtualCell,
+        onCellClick,
+        onCellDoubleClick,
+    }), [
         rows,
-        striped,
+        columns,
+        columnById,
+        columnIndexById,
+        contentWidthPx,
         virtual.rowHeight,
+        header,
+        striped,
+        cellEllipsis,
+        loaderNode,
+        sortBy,
+        sortType,
+        resizable,
+        onWidthChange,
+        onRowClick,
+        onCellClick,
+        onCellDoubleClick,
     ]);
     return (jsxs("div", { ref: containerRef, className: classNames("i-datagrid", {
             "i-datagrid-loading": loading,
-        }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List$2, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: rowComponent }), rows.length < 1 && !virtual.hasMore && empty] }));
+        }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List$2, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: rowProps, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: VirtualRow }), rows.length < 1 && !virtual.hasMore && empty] }));
 }
 
 const Datagrid = (props) => {
@@ -1675,7 +1702,7 @@ const Datagrid = (props) => {
             "i-datagrid-striped": striped,
         }), children: [useVirtual && virtual ? (jsx(VirtualDatagrid, { virtual: virtual, columns: columns, rows: rows, header: header, sortBy: state.sortBy, sortType: state.sortType, height: height, loading: loading, resizable: resizable, striped: striped, cellEllipsis: cellEllipsis, empty: empty, wrapRef: wrapRef, containerRef: container, getRowKey: getRowKey, onHeaderClick: handleHeaderClick, onWidthChange: handleWidthChange, onRowClick: onRowClick, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick, onScroll: onScroll })) : (jsxs("div", { ref: container, className: classNames("i-datagrid", {
                     "i-datagrid-loading": loading,
-                }), onWheel: onScroll, children: [header && (jsx(Header$1, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
+                }), onWheel: onScroll, children: [header && (jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
 };
 
 const Description = (props) => {
@@ -3142,7 +3169,7 @@ class IFormInstance {
         const { id, rules, data } = this;
         if (!rules)
             return data;
-        const names = field ? [field] : Object.keys(this.cacheData);
+        const names = field ? [field] : [...new Set([...Object.keys(this.cacheData), ...Object.keys(rules)])];
         let isAllValid = true;
         names.forEach((name) => {
             const o = rules[name];
@@ -3894,7 +3921,7 @@ function renderFile(props) {
 }
 
 function Content(props) {
-    const { items = [], initial = 0, renderFile: renderFile$1 = renderFile, onRotate, onChange, onClose, onZoom, } = props;
+    const { items = [], initial = 0, hideControl, renderFile: renderFile$1 = renderFile, onRotate, onChange, onClose, onZoom, } = props;
     const state = useReactive({
         current: initial,
         rotate: 0,
@@ -4030,9 +4057,9 @@ function Content(props) {
                     transform: `translate(${state.translate
                         .map((n) => `${n}px`)
                         .join(",")}) rotate(${state.rotate}deg) scale(${state.scale})`,
-                }, onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation(), children: content }), jsxs("div", { className: classNames("i-preview-controls", {
+                }, onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation(), children: content }), !hideControl && (jsxs("div", { className: classNames("i-preview-controls", {
                     "i-preview-controls-hidden": state.controlHidden,
-                }), children: [jsx(Button, { square: true, flat: true, onClick: onClose, children: jsx(Icon, { icon: jsx(CloseRound, {}) }) }), files.length > 1 && (jsxs("span", { className: 'px-8', children: [state.current + 1, " / ", files.length] })), state.scale !== 1 && (jsxs(Button, { flat: true, onClick: () => (state.scale = 1), children: [jsx(Icon, { icon: jsx(AspectRatioRound, {}) }), jsxs("span", { className: 'mt-2', children: [(state.scale * 100).toFixed(0), "%"] })] })), jsx(Button, { square: true, flat: true, href: file.src, target: '_blank', children: jsx(Icon, { icon: jsx(OpenInNewRound, {}) }) }), jsx(Button, { square: true, flat: true, href: file.src, download: true, target: '_blank', children: jsx(Icon, { icon: jsx(FileDownloadOutlined, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(90), children: jsx(Icon, { icon: jsx(RotateRightRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(-90), children: jsx(Icon, { icon: jsx(RotateLeftRound, {}) }) }), files.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current - 1), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current + 1), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }))] })] }));
+                }), children: [jsx(Button, { square: true, flat: true, onClick: onClose, children: jsx(Icon, { icon: jsx(CloseRound, {}) }) }), files.length > 1 && (jsxs("span", { className: 'px-8', children: [state.current + 1, " / ", files.length] })), state.scale !== 1 && (jsxs(Button, { flat: true, onClick: () => (state.scale = 1), children: [jsx(Icon, { icon: jsx(AspectRatioRound, {}) }), jsxs("span", { className: 'mt-2', children: [(state.scale * 100).toFixed(0), "%"] })] })), jsx(Button, { square: true, flat: true, href: file.src, target: '_blank', children: jsx(Icon, { icon: jsx(OpenInNewRound, {}) }) }), jsx(Button, { square: true, flat: true, href: file.src, download: true, target: '_blank', children: jsx(Icon, { icon: jsx(FileDownloadOutlined, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(90), children: jsx(Icon, { icon: jsx(RotateRightRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(-90), children: jsx(Icon, { icon: jsx(RotateLeftRound, {}) }) }), files.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current - 1), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current + 1), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }))] }))] }));
 }
 
 function usePreview() {
@@ -6052,11 +6079,8 @@ const Tabs = ((props) => {
         });
         sourceKeysRef.current = sourceKeys;
         contentsRef.current = nextContents;
-        const nextTabs = [
-            ...sourceTabs.filter((tab) => !hiddenSourceKeysRef.current.has(String(tab.key))),
-            ...dynamicTabs,
-        ];
-        setTabs((currentTabs) => isSameTabs(currentTabs, nextTabs) ? currentTabs : nextTabs);
+        const nextTabs = [...sourceTabs.filter((tab) => !hiddenSourceKeysRef.current.has(String(tab.key))), ...dynamicTabs];
+        setTabs((currentTabs) => (isSameTabs(currentTabs, nextTabs) ? currentTabs : nextTabs));
     }, [parsedTabs]);
     const add = (tab, position) => {
         const currentTabs = tabsRef.current;
@@ -6070,9 +6094,7 @@ const Tabs = ((props) => {
         const { content, ...rest } = tab;
         setTabs((ts) => {
             const nextTabs = [...ts];
-            const index = position === undefined
-                ? nextTabs.length
-                : Math.max(0, Math.min(position, nextTabs.length));
+            const index = position === undefined ? nextTabs.length : Math.max(0, Math.min(position, nextTabs.length));
             nextTabs.splice(index, 0, { ...rest, key: tkey });
             return nextTabs;
         });
@@ -6154,8 +6176,7 @@ const Tabs = ((props) => {
             setTabs((ts) => {
                 let changed = false;
                 const next = ts.map((t) => {
-                    if (t.intersecting === undefined ||
-                        t.intersecting === true) {
+                    if (t.intersecting === undefined || t.intersecting === true) {
                         return t;
                     }
                     changed = true;
@@ -6176,7 +6197,7 @@ const Tabs = ((props) => {
                         return ts;
                     if (ts[i]?.intersecting === visible)
                         return ts;
-                    return ts.map((t, idx) => idx === i ? { ...t, intersecting: visible } : t);
+                    return ts.map((t, idx) => (idx === i ? { ...t, intersecting: visible } : t));
                 });
             });
         });
@@ -6201,10 +6222,9 @@ const Tabs = ((props) => {
                 });
             }
             const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
-            const isLine = type === "line";
             setBarStyle({
-                height: !vertical && isLine ? ".25em" : offsetHeight * 0.5,
-                width: vertical && isLine ? ".25em" : offsetWidth,
+                height: offsetHeight * 0.5,
+                width: offsetWidth,
                 transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
             });
         }, 16);
@@ -6246,39 +6266,14 @@ const Tabs = ((props) => {
         navs: navsRef,
     }));
     const cachedTabKeySet = useMemo(() => new Set(cachedTabs), [cachedTabs]);
-    const moreTabs = useMemo(() => !hideMore && overflow
-        ? tabs.filter((tab) => tab.intersecting === false)
-        : [], [hideMore, overflow, tabs]);
+    const moreTabs = useMemo(() => (!hideMore && overflow ? tabs.filter((tab) => tab.intersecting === false) : []), [hideMore, overflow, tabs]);
     return (jsxs("div", { className: classNames("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxs("div", { className: classNames("i-tab-navs-container", navsClass, {
                     "i-tab-navs-vertical": vertical,
                 }), children: [prepend, jsx(TabsNavs$1, { tabs: tabs, moreTabs: moreTabs, activeKey: activeKey, vertical: vertical, overflow: overflow, hideMore: hideMore, navsJustify: navsJustify, bar: bar, barClass: barClass, barStyle: barStyle, navsRef: navsRef, renderMore: renderMore, setNavRef: setNavRef, onOpen: open, onClose: close, onMoreTabClick: handleMoreTabClick, onKeyAction: handleKeyAction }), append] }), jsx(TabsContents$1, { tabs: tabs, activeKey: activeKey, cachedTabKeySet: cachedTabKeySet, getContent: getContent })] }));
 });
 Tabs.Item = Item;
 
-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 (jsx("div", { className: 'i-tree-group-title', children: title }, i));
-        }
-        if (type && type !== "item") {
-            return (jsx("div", { className: `i-tree-type-${type}`, children: title }, i));
-        }
-        return (jsx(TreeItem, { index: i, item: item, depth: depth, nodeProps: nodeProps, ...restProps }, itemKey));
-    });
-    if (depth > 0)
-        return jsx(Fragment, { children: contents });
-    return (jsx("div", { className: classNames("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("i-tree-item-header", {
         "i-tree-item-selected": selected,
@@ -6288,50 +6283,166 @@ const Header = (props) => {
     }
     return (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, title, expanded, disabled } = item;
-    const children = item[nodeProps.children];
-    const [expand, setExpand] = 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();
+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, title, disabled, type } = node;
+    const children = node[nodeProps.children];
+    const hasChildren = children instanceof Promise || (Array.isArray(children) && children.length > 0);
+    const loading = loadingKeys?.includes(key);
+    if (type === "title") {
+        return jsx("div", { style: wrapperStyle, className: "i-tree-group-title", children: title });
+    }
+    if (type && type !== "item") {
+        return jsx("div", { style: wrapperStyle, className: `i-tree-type-${type}`, children: title });
+    }
+    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: 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 && (jsx(Checkbox.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 && jsx("span", { className: "i-tree-item-icon", children: icon }), jsx("span", { className: "i-tree-item-title", children: title }), renderExtra?.(node), hasChildren && (jsx(Icon, { icon: loading ? jsx(Loading, { size: ".86em" }) : jsx(KeyboardArrowDownRound, {}), className: classNames("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 (jsx("div", { className: classNames("i-tree", className, {
+            "i-tree-round": round,
+        }), style: style, children: flatNodes.map((flatNode) => {
+            const { key = "" } = flatNode.node;
+            return (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));
+        }) }));
+}
+
+function VirtualTree(props) {
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, useVirtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
+    const listRef = useRef(null);
+    const wrapRef = useRef(null);
+    const ro = useResizeObserver();
+    const [viewportHeight, setViewportHeight] = useState(0);
+    useEffect(() => {
+        const el = wrapRef.current;
+        if (!el)
             return;
-        }
-        handleExpand(e);
-        onItemClick?.(item, e);
-        onItemSelect?.(key, item);
-    };
-    const handleItemCheck = (checked) => onItemCheck?.(item, checked, []);
-    const itemChecked = checked.includes(key);
-    return (jsxs("div", { className: classNames("i-tree-item", {
-            "i-tree-expand": expand,
-        }), children: [jsxs(Header, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: handleItemClick, children: [checkable && (jsx(Checkbox.Item, { value: itemChecked, partof: !itemChecked && partofs[key], className: 'i-tree-checkbox', onChange: handleItemCheck, onClick: (e) => e.stopPropagation() })), icon && jsx("span", { className: 'i-tree-item-icon', children: icon }), jsx("span", { className: 'i-tree-item-title', children: title }), renderExtra?.(item), children && (jsx(Icon, { icon: jsx(KeyboardArrowDownRound, {}), className: 'i-tree-toggle', onClick: (e) => handleExpand(e, true) }))] }), children?.length && (jsx("div", { className: 'i-tree-item-content', children: 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 }) }))] }));
-};
+        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 = useRef(props);
+    propsRef.current = props;
+    const rowComponent = useCallback(({ index, style, }) => {
+        const p = propsRef.current;
+        const flatNode = p.flatNodes[index];
+        if (!flatNode)
+            return null;
+        return (jsx(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 (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List$2, { 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 }) }));
+}
 
 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] = useState(selected);
     const [checkedKeys, setCheckedKeys] = useState(checked);
     const [partofs, setPartofs] = useState({});
+    const [loadingMap, setLoadingMap] = useState({});
+    const [asyncChildrenMap, setAsyncChildrenMap] = useState({});
     const nodeMapsRef = useRef(new Map());
-    const oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);
-    const isChecked = (key) => checkedKeys.includes(key || "");
+    const oNodeProps = useMemo(() => ({ ...defaultNodeProps, ...nodeProps }), [nodeProps]);
+    const checkedSet = useMemo(() => new Set(checkedKeys), [checkedKeys]);
+    const [expandedMap, setExpandedMap] = 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) {
+            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 = useMemo(() => flattenTree(data, expandedMap, oNodeProps, 0, undefined, asyncChildrenMap), [data, expandedMap, oNodeProps, asyncChildrenMap]);
+    const loadingKeys = useMemo(() => Object.keys(loadingMap).filter((k) => loadingMap[k]), [loadingMap]);
     const checkItem = (item, checked, direction) => {
         const { key = "", parent, children } = item;
         const shouldChanged = { [key]: checked };
@@ -6340,7 +6451,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);
@@ -6349,9 +6462,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);
@@ -6363,16 +6476,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;
@@ -6383,9 +6498,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);
@@ -6403,15 +6519,37 @@ const Tree = (props) => {
     }, [selected]);
     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]);
+    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]);
     useImperativeHandle(ref, () => {
         return {
             getChecked: () => {
@@ -6440,7 +6578,10 @@ const Tree = (props) => {
             },
         };
     });
-    return (jsx(TreeList, { data: data, selected: selectedKey, checked: checkedKeys, partofs: partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    if (useVirtual) {
+        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, useVirtual: useVirtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    }
+    return (jsx(TreeList, { flatNodes: flatNodes, onExpand: handleExpand, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };
 
 const Dropbox = (props) => {