xmlui 0.10.20 → 0.10.21

package/dist/scripts/src/components/Tree/TreeNative.js

@@ -15,14 +15,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeComponent = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_window_1 = require("react-window");
-const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
+const virtua_1 = require("virtua");
 const classnames_1 = __importDefault(require("classnames"));
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const SpinnerNative_1 = require("../Spinner/SpinnerNative");
 const TreeComponent_module_scss_1 = __importDefault(require("./TreeComponent.module.scss"));
 const treeUtils_1 = require("../../components-core/utils/treeUtils");
-const TreeRow = (0, react_1.memo)(({ index, style, data }) => {
+const TreeRow = (0, react_1.memo)(({ index, data }) => {
     const { nodes, toggleNode, selectedId, itemRenderer, itemClickExpands, onItemClick, onSelection, focusedIndex, treeContainerRef, iconCollapsed, iconExpanded, iconSize, animateExpand, expandRotation, } = data;
     const treeItem = nodes[index];
     const isFocused = focusedIndex === index && focusedIndex >= 0;
@@ -64,7 +63,7 @@ const TreeRow = (0, react_1.memo)(({ index, style, data }) => {
     // Get loading state for styling and interaction
     const nodeWithState = treeItem;
     const isLoading = nodeWithState.loadingState === "loading";
-    return ((0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({}, style), { width: "auto", minWidth: "100%", display: "flex" }), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.rowWrapper, {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%", display: "flex" }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.rowWrapper, {
                 [TreeComponent_module_scss_1.default.selected]: isSelected,
                 [TreeComponent_module_scss_1.default.focused]: isFocused,
             }), role: "treeitem", "aria-level": treeItem.depth + 1, "aria-expanded": treeItem.hasChildren ? treeItem.isExpanded : undefined, "aria-selected": isSelected, "aria-label": treeItem.displayName, "aria-busy": isLoading, tabIndex: isFocused ? 0 : -1, children: [(0, jsx_runtime_1.jsxs)("div", { onClick: onToggleNode, className: TreeComponent_module_scss_1.default.gutter, style: { cursor: isLoading ? "default" : "pointer" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: treeItem.depth * 10 }, className: TreeComponent_module_scss_1.default.depthPlaceholder }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.toggleWrapper, {
@@ -614,10 +613,6 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
         animateExpand,
         expandRotation,
     ]);
-    const getItemKey = (0, react_1.useCallback)((index, data) => {
-        const node = data.nodes[index];
-        return (node === null || node === void 0 ? void 0 : node.key) || (node === null || node === void 0 ? void 0 : node.id) || `fallback-${index}`;
-    }, []);
     // Shared API implementation to avoid duplication between ref and component APIs
     const treeApiMethods = (0, react_1.useMemo)(() => {
         return {
@@ -790,8 +785,8 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                     const updatedFlatTreeData = (0, treeUtils_1.toFlatTree)(treeData, newExpandedIds, fieldConfig.dynamicField, nodeStates);
                     const nodeIndex = updatedFlatTreeData.findIndex((item) => String(item.key) === String(nodeId));
                     if (nodeIndex >= 0 && listRef.current) {
-                        // Scroll to the item using the FixedSizeList's scrollToItem method
-                        listRef.current.scrollToItem(nodeIndex, "center");
+                        // Scroll to the item using virtua's scrollToIndex method
+                        listRef.current.scrollToIndex(nodeIndex, { align: "center" });
                     }
                 }, 0);
             },
@@ -799,7 +794,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                 // Simple scroll without expanding - just scroll to the item if it's visible
                 const nodeIndex = findNodeIndexById(nodeId);
                 if (nodeIndex >= 0 && listRef.current) {
-                    listRef.current.scrollToItem(nodeIndex, "center");
+                    listRef.current.scrollToIndex(nodeIndex, { align: "center" });
                 }
             },
             appendNode: (parentNodeId, nodeData) => {
@@ -1130,5 +1125,5 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
             setFocusedIndex(-1);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: treeContainerRef, className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.wrapper, className), role: "tree", "aria-label": "Tree navigation", "aria-multiselectable": "false", tabIndex: 0, onFocus: handleTreeFocus, onBlur: handleTreeBlur, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)(react_virtualized_auto_sizer_1.default, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { ref: listRef, height: height, itemCount: itemData.nodes.length, itemData: itemData, itemSize: itemHeight, itemKey: getItemKey, width: width, children: TreeRow })) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: treeContainerRef, className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.wrapper, className), role: "tree", "aria-label": "Tree navigation", "aria-multiselectable": "false", tabIndex: 0, onFocus: handleTreeFocus, onBlur: handleTreeBlur, onKeyDown: handleKeyDown, style: { height: "100%", overflow: "auto" }, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: listRef, children: flatTreeData.map((node, index) => ((0, jsx_runtime_1.jsx)(TreeRow, { index: index, data: itemData }, node.key))) }) }));
 });