pixel-react 1.16.3 → 1.17.0

package/lib/components/TableTreeFn/TableTreeFn.js

@@ -1,242 +1,688 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, forwardRef, } from 'react';
-import './TableTree.scss';
-import TableHead from './Components/TableHead';
+/* eslint-disable max-lines */
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef, } from 'react';
+import './TableTreeFn.scss';
 import TableBody from './Components/TableBody';
-import { addLastChild } from './Utils/addLastChild';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import TableHead from './Components/TableHead';
 import { debounce } from '../../utils/debounce/debounce';
-const TableTreeFn = forwardRef(({ treeData, columnsData, selected = [], select = null, onChange, onClick, onExpand, loadMore = () => { }, tableBorder, height = 'calc(100vh - 134px)', newNode, onAddConfirm = (_name) => { }, onAddCancel = () => { }, handleEditFieldError, loading = false, rootNode, pagination = true, selectedNode, tableHeaderBgColor = 'var(--border-color)', hideOnDisable = false, freezeColumns, scriptLengthTruncate = 25, addModuleInputWidth = 150, addModuleSelectWidth, onScroll, onScrollEnd, disableEditLabelConfirmIcon = false, transparentHeader = false, navigateTreeNode = null, handleRemoveNavigateTreeNode = () => { }, scrollThreshold = 128, // this is the  Distance from edge to trigger the scroll below and above
-showHeader = true, }, ref) => {
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const DEFAULT_COLUMN_WIDTH = 400;
+const ROW_HEIGHT = 32;
+const OVERSCAN = 6;
+const ROOT_PARENT_ID = '__root__';
+const insertNewNode = (treeData, newNode, rootNode) => {
+    if (!newNode?.sourceId || !newNode.action)
+        return treeData;
+    const { sourceId, action, value = '', error = '', label, type, options, selectedOption, confirmIconTooltip, cancelIconTooltip, payloadSourceId, } = newNode;
+    const fallbackParentId = newNode
+        ?.parentId;
+    const fallbackHierarchy = newNode
+        ?.hierarchy;
+    const convertedOptions = options?.map((option) => ({
+        label: option,
+        value: option,
+    }));
+    const convertedSelectedOption = selectedOption
+        ? { label: selectedOption, value: selectedOption }
+        : undefined;
+    const nodeMap = new Map();
+    treeData.forEach((node) => nodeMap.set(node.key, node));
+    if (rootNode) {
+        nodeMap.set(rootNode.key, rootNode);
+    }
+    const sourceNode = nodeMap.get(sourceId);
+    let payloadSourceNode;
+    if (payloadSourceId) {
+        payloadSourceNode = nodeMap.get(payloadSourceId);
+    }
+    // For add-inside flows, backend can return navigateTo as a parent key or a
+    // key not present in the current page. Fallback to payload source when possible.
+    let effectiveSourceNode = sourceNode ?? (action === 'addInside' ? payloadSourceNode : undefined);
+    if (!effectiveSourceNode && action === 'addInside' && fallbackParentId) {
+        effectiveSourceNode = nodeMap.get(fallbackParentId);
+    }
+    const fallbackInsertAtEnd = action === 'addInside' && !effectiveSourceNode && treeData.length >= 0;
+    if (!effectiveSourceNode && !fallbackInsertAtEnd)
+        return treeData;
+    const updatedTreeData = [...treeData];
+    const sourceIndex = effectiveSourceNode
+        ? treeData.findIndex((node) => node.key === effectiveSourceNode.key)
+        : -1;
+    let newNodeParentId = null;
+    let newNodeHierarchy = 0;
+    let insertionIndex = sourceIndex + 1;
+    switch (action) {
+        case 'addAbove': {
+            const sourceNodeForInsert = effectiveSourceNode;
+            if (!sourceNodeForInsert)
+                return treeData;
+            newNodeParentId = sourceNodeForInsert.parentId;
+            newNodeHierarchy = sourceNodeForInsert.hierarchy;
+            break;
+        }
+        case 'addBelow': {
+            const sourceNodeForInsert = effectiveSourceNode;
+            if (!sourceNodeForInsert)
+                return treeData;
+            newNodeParentId =
+                payloadSourceNode?.parentId ?? sourceNodeForInsert.parentId;
+            newNodeHierarchy =
+                payloadSourceNode?.hierarchy ?? sourceNodeForInsert.hierarchy;
+            break;
+        }
+        case 'addInside': {
+            if (fallbackInsertAtEnd) {
+                newNodeParentId =
+                    fallbackParentId ?? payloadSourceId ?? sourceId ?? null;
+                newNodeHierarchy = fallbackHierarchy ?? 1;
+                insertionIndex = updatedTreeData.length;
+                break;
+            }
+            const parentNode = payloadSourceNode ?? effectiveSourceNode;
+            if (!parentNode)
+                return treeData;
+            newNodeParentId = parentNode.key;
+            newNodeHierarchy = (parentNode.hierarchy ?? 0) + 1;
+            // Keep add-inside input at the end of the current parent subtree.
+            const parentIndex = updatedTreeData.findIndex((node) => node.key === parentNode.key);
+            if (parentIndex !== -1) {
+                insertionIndex = parentIndex + 1;
+                while (insertionIndex < updatedTreeData.length &&
+                    (updatedTreeData[insertionIndex]?.hierarchy ?? 0) >
+                        (parentNode.hierarchy ?? 0)) {
+                    insertionIndex++;
+                }
+            }
+            break;
+        }
+    }
+    const newNodeBase = {
+        hierarchy: newNodeHierarchy,
+        parentId: newNodeParentId,
+        sourceId: effectiveSourceNode?.key ?? sourceId ?? payloadSourceId ?? 'new-node',
+        isNewNode: true,
+        key: 'new-node',
+        value,
+        error,
+        label,
+        type,
+        options: convertedOptions,
+        selectedOption: convertedSelectedOption,
+        confirmIconTooltip,
+        cancelIconTooltip,
+    };
+    switch (action) {
+        case 'addAbove':
+            updatedTreeData.splice(sourceIndex, 0, newNodeBase);
+            break;
+        case 'addBelow':
+            updatedTreeData.splice(sourceIndex + 1, 0, newNodeBase);
+            break;
+        case 'addInside':
+            updatedTreeData.splice(Math.max(0, insertionIndex), 0, newNodeBase);
+            break;
+    }
+    return updatedTreeData;
+};
+const prepareTreeRows = (treeData, rootNode) => {
+    if (!treeData?.length)
+        return [];
+    const nodeById = new Map();
+    const childrenByParent = new Map();
+    const siblingIndex = new Map();
+    const loadedCountsByParent = new Map();
+    if (rootNode && rootNode.key) {
+        nodeById.set(rootNode.key, rootNode);
+    }
+    treeData.forEach((node) => {
+        nodeById.set(node.key, node);
+        const parentKey = node.parentId ?? ROOT_PARENT_ID;
+        if (!childrenByParent.has(parentKey)) {
+            childrenByParent.set(parentKey, []);
+            loadedCountsByParent.set(parentKey, { container: 0, resource: 0 });
+        }
+        childrenByParent.get(parentKey)?.push(node);
+        const counts = loadedCountsByParent.get(parentKey);
+        if (counts) {
+            if (node.container) {
+                counts.container++;
+            }
+            else {
+                counts.resource++;
+            }
+        }
+    });
+    childrenByParent.forEach((children) => {
+        children.forEach((child, index) => {
+            siblingIndex.set(child.key, index);
+        });
+    });
+    const hasNextSibling = (node) => {
+        const parentKey = node.parentId ?? ROOT_PARENT_ID;
+        const siblings = childrenByParent.get(parentKey);
+        if (!siblings || siblings.length === 0)
+            return false;
+        const index = siblingIndex.get(node.key) ?? 0;
+        if (index < siblings.length - 1)
+            return true;
+        const parent = nodeById.get(parentKey);
+        const loadedCounts = loadedCountsByParent.get(parentKey);
+        if (parent && loadedCounts) {
+            const siblingContainerResources = siblings
+                .filter((node) => node.container)
+                .reduce((sum, node) => sum + (node.totalResourceCount ?? 0), 0);
+            const siblingDirectResourcesCount = siblings.filter((node) => !node.container).length;
+            const calculatedDirectResources = Math.max(0, (parent.totalResourceCount ?? 0) -
+                (siblingContainerResources + siblingDirectResourcesCount));
+            if (node.container) {
+                const hasMoreContainers = loadedCounts.container < (parent.subContainerCount ?? 0);
+                const hasResourcesFollowing = calculatedDirectResources > 0;
+                return hasMoreContainers || hasResourcesFollowing;
+            }
+            else {
+                return loadedCounts.resource < calculatedDirectResources;
+            }
+        }
+        return false;
+    };
+    const buildParentSiblings = (node) => {
+        const hierarchy = node.hierarchy ?? 0;
+        if (hierarchy <= 0)
+            return [];
+        const path = [];
+        let current = node;
+        while (current) {
+            path.unshift(current);
+            if (!current.parentId)
+                break;
+            const parent = nodeById.get(current.parentId);
+            if (!parent)
+                break;
+            current = parent;
+        }
+        const flags = path.map((ancestor) => hasNextSibling(ancestor));
+        if (flags.length === hierarchy)
+            return flags;
+        if (flags.length > hierarchy)
+            return flags.slice(flags.length - hierarchy);
+        const padding = new Array(hierarchy - flags.length).fill(false);
+        return padding.concat(flags);
+    };
+    const resolveSelectedStatus = (node) => {
+        if (node.selectedStatus !== undefined)
+            return node.selectedStatus;
+        let current = node;
+        while (current?.parentId) {
+            const parent = nodeById.get(current.parentId);
+            if (!parent)
+                break;
+            if (parent.selectedStatus === 'completely')
+                return 'completely';
+            if (parent.selectedStatus === 'none')
+                return 'none';
+            current = parent;
+        }
+        if (rootNode?.selectedStatus === 'completely')
+            return 'completely';
+        if (rootNode?.selectedStatus === 'none')
+            return 'none';
+        return node.selectedStatus;
+    };
+    return treeData.map((node) => {
+        const nodeWithSiblings = node;
+        const finalParentSiblings = nodeWithSiblings.parentSiblings &&
+            nodeWithSiblings.parentSiblings.length > 0
+            ? nodeWithSiblings.parentSiblings
+            : buildParentSiblings(node);
+        return {
+            ...node,
+            lastChild: !hasNextSibling(node),
+            parentSiblings: finalParentSiblings,
+            selectedStatus: resolveSelectedStatus(node),
+        };
+    });
+};
+const TableTreeFn = forwardRef(({ treeData, columnsData, selected = [], select = null, onChange = () => { }, onClick = () => { }, onExpand = () => { }, loadMore = () => { }, tableBorder, height = 'calc(100vh - 134px)', newNode, onAddConfirm = () => { }, onAddCancel = () => { }, handleEditFieldError, loading = false, rootNode, pagination = true, selectedNode, tableHeaderBgColor = 'var(--border-color)', hideOnDisable = false, freezeColumns, scriptLengthTruncate = 25, addModuleInputWidth = 150, addModuleSelectWidth, onScroll, onScrollEnd, disableEditLabelConfirmIcon = false, transparentHeader = false, navigateTreeNode = null, handleRemoveNavigateTreeNode = () => { }, scrollThreshold = 128, showHeader = true, }, ref) => {
     const [expanding, setExpanding] = useState(null);
-    const [scrollDirection, setScrollDirection] = useState(null); // this state will help to idenetify the direction during the pagination api call
-    const [prevScrollTop, setPrevScrollTop] = useState(null);
-    const [prevScrollHeight, setPrevScrollHeight] = useState(null);
-    const [maintainScrollPosition, setMaintainScrollPosition] = useState(null);
+    const [scrollDirection, setScrollDirection] = useState(null);
+    const [virtualRange, setVirtualRange] = useState({ start: 0, end: 20 });
+    const [newNodeEditable, setNewNodeEditable] = useState(false);
     const containerRef = useRef(null);
-    const previousTreeDataRef = useRef([]);
-    const scrollPositionRef = useRef({
-        lastScrollTop: 0,
-        lastScrollTime: 0,
-        direction: null,
-    });
-    const scrollDebounceRef = useRef(null);
-    // this is  loadMore  functions which will the trigger the pagination apis in platform
-    const loadMoreAbove = useCallback(() => {
-        if (loading || scrollDirection === 'above')
+    const headerRef = useRef(null);
+    const headerHeightRef = useRef(0);
+    const loadingRef = useRef(loading);
+    const scrollRafRef = useRef(null);
+    const scrollPositionRef = useRef({ lastScrollTop: 0 });
+    const previousFirstKeyRef = useRef(null);
+    const suppressScrollCancelUntilRef = useRef(0);
+    const debouncedScrollEndRef = useRef(null);
+    const expandTargetRef = useRef(null);
+    const expandingFallbackTimerRef = useRef(null);
+    const navigateAttemptsRef = useRef({ key: null, attempts: 0 });
+    const navigateClearTimerRef = useRef(null);
+    const getWidthInfo = (width, defaultWidth) => {
+        const w = width ?? defaultWidth;
+        const str = String(w);
+        if (str.endsWith('%')) {
+            return { value: parseFloat(str), unit: '%' };
+        }
+        return { value: parseFloat(str) || 0, unit: 'px' };
+    };
+    const columnMeta = useMemo(() => {
+        let stickyLeftPx = 0;
+        let stickyLeftPct = 0;
+        return columnsData.map((col, index) => {
+            const { value, unit } = getWidthInfo(col.width, DEFAULT_COLUMN_WIDTH);
+            const sticky = !!freezeColumns && index < freezeColumns;
+            const widthCss = unit === '%' ? `${value}%` : `${value}px`;
+            const leftCss = `calc(${stickyLeftPx}px + ${stickyLeftPct}%)`;
+            const meta = {
+                width: widthCss,
+                sticky,
+                left: leftCss,
+                zIndex: sticky ? 100 + (freezeColumns ?? 0) - index : 1,
+            };
+            if (sticky) {
+                if (unit === '%') {
+                    stickyLeftPct += value;
+                }
+                else {
+                    stickyLeftPx += value;
+                }
+            }
+            return meta;
+        });
+    }, [columnsData, freezeColumns]);
+    const totalWidth = useMemo(() => {
+        let totalPx = 0;
+        let totalPct = 0;
+        columnsData.forEach((col) => {
+            const { value, unit } = getWidthInfo(col.width, DEFAULT_COLUMN_WIDTH);
+            if (unit === '%') {
+                totalPct += value;
+            }
+            else {
+                totalPx += value;
+            }
+        });
+        return `calc(${totalPx}px + ${totalPct}%)`;
+    }, [columnsData]);
+    const frozenColumnWidth = useMemo(() => {
+        if (!freezeColumns)
+            return '0px';
+        let totalPx = 0;
+        let totalPct = 0;
+        const frozenCols = columnMeta.slice(0, freezeColumns);
+        frozenCols.forEach((col) => {
+            const val = parseFloat(col.width) || 0;
+            if (col.width.endsWith('%')) {
+                totalPct += val;
+            }
+            else {
+                totalPx += val;
+            }
+        });
+        return `calc(${totalPx}px + ${totalPct}%)`;
+    }, [columnMeta, freezeColumns]);
+    const treeDataWithNewNode = useMemo(() => insertNewNode(treeData, newNode, rootNode?.node), [treeData, newNode, rootNode]);
+    const preparedRows = useMemo(() => prepareTreeRows(treeDataWithNewNode, rootNode?.node), [treeDataWithNewNode, rootNode?.node]);
+    const visiblePreparedRows = useMemo(() => preparedRows.filter((node) => !node.hide), [preparedRows]);
+    const preparedRowsByKey = useMemo(() => {
+        const map = new Map();
+        preparedRows.forEach((node) => map.set(node.key, node));
+        return map;
+    }, [preparedRows]);
+    const keyIndexMap = useMemo(() => {
+        const map = new Map();
+        visiblePreparedRows.forEach((node, index) => map.set(node.key, index));
+        return map;
+    }, [visiblePreparedRows]);
+    const clearExpanding = useCallback((targetKey) => {
+        setExpanding((current) => {
+            if (!current)
+                return current;
+            if (targetKey && current !== targetKey)
+                return current;
+            return null;
+        });
+        if (!targetKey || expandTargetRef.current?.key === targetKey) {
+            expandTargetRef.current = null;
+        }
+        if (expandingFallbackTimerRef.current) {
+            clearTimeout(expandingFallbackTimerRef.current);
+            expandingFallbackTimerRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        loadingRef.current = loading;
+    }, [loading]);
+    const updateVirtualRange = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
             return;
-        setScrollDirection('above');
-        setPrevScrollTop(containerRef.current?.scrollTop ?? null);
-        setPrevScrollHeight(containerRef.current?.scrollHeight ?? null);
-        loadMore('above');
-    }, [loading, scrollDirection, loadMore]);
-    const loadMoreBelow = useCallback(() => {
-        if (loading || scrollDirection === 'below')
+        const headerHeight = headerHeightRef.current || 0;
+        const rowScrollTop = Math.max(0, container.scrollTop - headerHeight);
+        const viewportHeight = container.clientHeight - headerHeight;
+        let start = Math.floor(rowScrollTop / ROW_HEIGHT) - OVERSCAN;
+        let end = Math.ceil((rowScrollTop + viewportHeight) / ROW_HEIGHT) + OVERSCAN;
+        start = Math.max(0, start);
+        end = Math.min(visiblePreparedRows.length, end);
+        setVirtualRange((prev) => {
+            if (prev.start === start && prev.end === end)
+                return prev;
+            return { start, end };
+        });
+    }, [visiblePreparedRows.length]);
+    const scheduleRangeUpdate = useCallback(() => {
+        if (scrollRafRef.current !== null)
             return;
-        setScrollDirection('below');
-        loadMore('below');
-    }, [loading, scrollDirection, loadMore]);
-    // this is  scroll handler
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            updateVirtualRange();
+        });
+    }, [updateVirtualRange]);
+    // Handle scroll position safety when searching/filtering
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const totalContentHeight = visiblePreparedRows.length * ROW_HEIGHT;
+        const maxScrollTop = Math.max(0, totalContentHeight - (container.clientHeight - headerHeightRef.current));
+        if (scrollPositionRef.current.lastScrollTop > maxScrollTop &&
+            visiblePreparedRows.length > 0) {
+            container.scrollTop = 0;
+            scrollPositionRef.current.lastScrollTop = 0;
+        }
+        updateVirtualRange();
+    }, [visiblePreparedRows.length, updateVirtualRange]);
     const handleScroll = useCallback(() => {
         const container = containerRef.current;
-        if (!container || checkEmpty(treeData))
+        if (!container)
             return;
-        const now = Date.now();
         const currentScrollTop = container.scrollTop;
-        const scrollHeight = container.scrollHeight;
-        const clientHeight = container.clientHeight;
-        // Scroll direction calculation
         const direction = currentScrollTop > scrollPositionRef.current.lastScrollTop
             ? 'down'
             : 'up';
-        scrollPositionRef.current = {
-            lastScrollTop: currentScrollTop,
-            lastScrollTime: now,
-            direction,
-        };
-        // Cancel any previous debounce
-        if (scrollDebounceRef.current) {
-            clearTimeout(scrollDebounceRef.current);
-        }
-        // Infinite Scroll
+        scrollPositionRef.current.lastScrollTop = currentScrollTop;
+        scheduleRangeUpdate();
+        onScroll?.();
+        debouncedScrollEndRef.current?.();
+        if (!pagination || loading || scrollDirection || checkEmpty(treeData))
+            return;
+        const scrollHeight = container.scrollHeight;
+        const clientHeight = container.clientHeight;
         const nearBottom = scrollHeight - (currentScrollTop + clientHeight) < scrollThreshold;
-        const nearTop = currentScrollTop < scrollThreshold;
+        const nearTop = currentScrollTop < scrollThreshold + headerHeightRef.current;
         if (direction === 'down' &&
             nearBottom &&
-            !loading &&
-            !scrollDirection &&
-            treeData[treeData.length - 1]?.lastResource !== true) {
-            scrollDebounceRef.current = setTimeout(() => {
-                loadMoreBelow();
-            }, 150);
+            !treeData[treeData.length - 1]?.lastResource) {
+            setScrollDirection('below');
+            loadMore('below');
         }
-        if (direction === 'up' &&
-            nearTop &&
-            !loading &&
-            !scrollDirection &&
-            treeData[0]?.lastResource !== true) {
-            scrollDebounceRef.current = setTimeout(() => {
-                loadMoreAbove();
-            }, 150);
-        }
-        // Scroll Restoration After Loading Above
-        if (!loading &&
-            scrollDirection === 'above' &&
-            previousTreeDataRef.current.length > 0 &&
-            prevScrollTop !== null) {
-            const previousTreeData = previousTreeDataRef.current;
-            let addedRowsCount = 0;
-            for (let i = 0; i < treeData.length; i++) {
-                if (previousTreeData[0] === treeData[i])
-                    break;
-                addedRowsCount++;
-            }
-            let retries = 0;
-            const maxRetries = 30;
-            // this function will try to restore the scroll position after loading more data specially when loading more data above
-            const tryRestoreScroll = () => {
-                const allRows = Array.from(container.querySelectorAll('.ff-table-tree-row'));
-                let totalAddedHeight = 0;
-                for (let i = 0; i < addedRowsCount; i++) {
-                    const height = allRows[i]?.getBoundingClientRect().height || 0;
-                    totalAddedHeight += height;
-                }
-                const canScroll = container.scrollHeight > container.clientHeight;
-                const validHeights = totalAddedHeight > 0;
-                if (validHeights && canScroll) {
-                    container.scrollTop = prevScrollTop + totalAddedHeight;
-                    previousTreeDataRef.current = treeData;
-                }
-                else if (retries < maxRetries) {
-                    retries++;
-                    requestAnimationFrame(tryRestoreScroll);
-                }
-                else {
-                    previousTreeDataRef.current = treeData;
-                    console.warn('Failed to restore scroll position after max retries');
-                }
-            };
-            requestAnimationFrame(tryRestoreScroll);
+        if (direction === 'up' && nearTop && !treeData[0]?.lastResource) {
+            setScrollDirection('above');
+            previousFirstKeyRef.current = treeData[0]?.key ?? null;
+            loadMore('above');
         }
     }, [
+        treeData,
+        pagination,
         loading,
         scrollDirection,
-        treeData,
-        loadMoreAbove,
-        loadMoreBelow,
-        prevScrollTop,
+        scrollThreshold,
+        scheduleRangeUpdate,
         onScroll,
+        loadMore,
     ]);
-    // Attach scroll event listener for updated first node when we scroll
     useEffect(() => {
-        const scrollDiv = containerRef.current;
-        if (!scrollDiv)
+        if (loading || !pagination || checkEmpty(treeData))
             return;
-        const debouncedOnScrollEnd = debounce(() => {
-            onScrollEnd?.();
-        }, 150);
-        const scrollListener = () => {
-            onScroll?.();
-            debouncedOnScrollEnd();
-        };
-        scrollDiv.addEventListener('scroll', scrollListener);
-        return () => {
-            scrollDiv.removeEventListener('scroll', scrollListener);
-            debouncedOnScrollEnd.cancel();
-        };
-    }, [onScroll, onScrollEnd]);
-    useEffect(() => {
-        return () => {
-            if (scrollDebounceRef.current) {
-                clearTimeout(scrollDebounceRef.current);
-            }
-        };
-    }, []);
-    // Handle scroll position restoration after loading
+        const firstNode = treeData[0];
+        const hasMoreAbove = !firstNode?.lastResource;
+        const { totalSubContainerCount = 0, totalResourceCount = 0 } = rootNode?.node || {};
+        const totalItems = totalSubContainerCount + totalResourceCount;
+        const isListTooShort = visiblePreparedRows.length < 10 &&
+            visiblePreparedRows.length < totalItems;
+        if (hasMoreAbove && isListTooShort) {
+            previousFirstKeyRef.current = firstNode?.key ?? null;
+            setScrollDirection('above');
+            loadMore('above');
+        }
+    }, [
+        loading,
+        pagination,
+        treeData,
+        visiblePreparedRows.length,
+        rootNode,
+        loadMore,
+    ]);
     useLayoutEffect(() => {
-        if (!loading &&
-            scrollDirection === 'above' &&
-            prevScrollTop !== null &&
-            prevScrollHeight !== null) {
+        if (!loading && scrollDirection === 'above') {
             const container = containerRef.current;
-            if (!container)
-                return;
-            const scrollHeightDiff = container.scrollHeight - prevScrollHeight;
-            if (scrollHeightDiff > 0) {
-                container.scrollTop = prevScrollTop + scrollHeightDiff;
+            const previousKey = previousFirstKeyRef.current;
+            if (container && previousKey) {
+                const newIndex = keyIndexMap.get(previousKey);
+                if (newIndex !== undefined && newIndex > 0) {
+                    container.scrollTop += newIndex * ROW_HEIGHT;
+                }
             }
+            previousFirstKeyRef.current = null;
             setScrollDirection(null);
-            setPrevScrollTop(null);
-            setPrevScrollHeight(null);
         }
-        else if (!loading) {
+        else if (!loading && scrollDirection === 'below') {
             setScrollDirection(null);
         }
-    }, [loading, scrollDirection, prevScrollTop, prevScrollHeight]);
-    // Handle navigation to specific nodes
+    }, [loading, scrollDirection, keyIndexMap]);
     useEffect(() => {
-        if (navigateTreeNode) {
-            const node = document.getElementById(navigateTreeNode);
-            const container = containerRef.current;
-            if (node && container) {
-                // Store current scroll position
-                setMaintainScrollPosition(container.scrollTop);
-                // Calculate scroll position
-                const nodeRect = node.getBoundingClientRect();
-                const containerRect = container.getBoundingClientRect();
-                const scrollTop = container.scrollTop;
-                const nodeTop = nodeRect.top - containerRect.top + scrollTop;
-                const containerHeight = containerRect.height;
-                // Scroll to center the node
-                container.scrollTo({
-                    top: nodeTop - containerHeight / 2 + nodeRect.height / 2,
-                    behavior: 'smooth',
-                });
-            }
-        }
+        const container = containerRef.current;
+        if (!container)
+            return;
+        debouncedScrollEndRef.current = onScrollEnd
+            ? debounce(() => {
+                onScrollEnd?.();
+            }, 150)
+            : null;
+        container.addEventListener('scroll', handleScroll, { passive: true });
         return () => {
-            handleRemoveNavigateTreeNode();
+            container.removeEventListener('scroll', handleScroll);
+            debouncedScrollEndRef.current?.cancel();
         };
-    }, [navigateTreeNode, treeData]);
-    // Restore scroll position after navigation
-    useEffect(() => {
-        if (maintainScrollPosition !== null && !loading && containerRef.current) {
-            containerRef.current.scrollTop = maintainScrollPosition;
-            setMaintainScrollPosition(null);
-        }
-    }, [maintainScrollPosition, loading]);
-    // Setup scroll listener
+    }, [handleScroll, onScrollEnd]);
     useEffect(() => {
         const container = containerRef.current;
-        if (!container || !pagination)
+        if (!container)
             return;
-        container.addEventListener('scroll', handleScroll);
-        // Initial check in case we're already at the bottom/top
-        handleScroll();
-        return () => {
-            container.removeEventListener('scroll', handleScroll);
-            if (scrollDebounceRef.current) {
-                clearTimeout(scrollDebounceRef.current);
+        const handleScrollCapture = (event) => {
+            if (Date.now() < suppressScrollCancelUntilRef.current) {
+                event.stopImmediatePropagation();
             }
         };
-    }, [handleScroll, pagination]);
-    // Track previous tree data for scroll restoration
+        container.addEventListener('scroll', handleScrollCapture, {
+            passive: true,
+            capture: true,
+        });
+        return () => {
+            container.removeEventListener('scroll', handleScrollCapture, true);
+        };
+    }, []);
     useEffect(() => {
-        if (treeData.length > 0) {
-            previousTreeDataRef.current = treeData;
+        const headerNode = headerRef.current;
+        if (!headerNode)
+            return;
+        const updateHeight = () => {
+            headerHeightRef.current = headerNode.getBoundingClientRect().height;
+            updateVirtualRange();
+        };
+        const resizeObserver = new ResizeObserver(updateHeight);
+        resizeObserver.observe(headerNode);
+        return () => resizeObserver.disconnect();
+    }, [updateVirtualRange]);
+    useLayoutEffect(() => {
+        if (!newNode || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        const newNodeIndex = keyIndexMap.get('new-node');
+        if (newNodeIndex === undefined)
+            return;
+        const headerHeight = headerHeightRef.current || 0;
+        const viewportHeight = container.clientHeight - headerHeight;
+        if (viewportHeight <= 0)
+            return;
+        const rowTop = newNodeIndex * ROW_HEIGHT;
+        const rowBottom = rowTop + ROW_HEIGHT;
+        const rowScrollTop = Math.max(0, container.scrollTop - headerHeight);
+        const viewTop = rowScrollTop;
+        const viewBottom = rowScrollTop + viewportHeight;
+        let nextRowScrollTop = rowScrollTop;
+        if (rowTop < viewTop) {
+            nextRowScrollTop = rowTop;
+        }
+        else if (rowBottom > viewBottom) {
+            nextRowScrollTop = Math.max(0, rowBottom - viewportHeight);
         }
-    }, [treeData]);
+        if (nextRowScrollTop !== rowScrollTop) {
+            suppressScrollCancelUntilRef.current = Date.now() + 300;
+            container.scrollTop = nextRowScrollTop + headerHeight;
+            updateVirtualRange();
+        }
+        const rafId = requestAnimationFrame(() => {
+            setNewNodeEditable(true);
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [newNode, keyIndexMap, updateVirtualRange]);
     useEffect(() => {
-        if (!loading && expanding) {
-            setExpanding(null);
+        if (!newNode) {
+            setNewNodeEditable(false);
         }
-    }, [loading]);
+    }, [newNode]);
+    useLayoutEffect(() => {
+        if (!expanding || loading)
+            return;
+        const expected = expandTargetRef.current;
+        if (!expected || expected.key !== expanding) {
+            const rafId = requestAnimationFrame(() => {
+                clearExpanding(expanding);
+            });
+            return () => cancelAnimationFrame(rafId);
+        }
+        const updatedNode = preparedRowsByKey.get(expected.key);
+        if (!updatedNode) {
+            const rafId = requestAnimationFrame(() => {
+                clearExpanding(expected.key);
+            });
+            return () => cancelAnimationFrame(rafId);
+        }
+        if (Boolean(updatedNode.expanded) !== expected.expanded)
+            return;
+        const rafId = requestAnimationFrame(() => {
+            clearExpanding(expected.key);
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [preparedRowsByKey, expanding, loading, clearExpanding]);
+    useEffect(() => {
+        if (navigateAttemptsRef.current.key !== navigateTreeNode) {
+            navigateAttemptsRef.current = {
+                key: navigateTreeNode,
+                attempts: 0,
+            };
+        }
+        if (!navigateTreeNode && navigateClearTimerRef.current) {
+            clearTimeout(navigateClearTimerRef.current);
+            navigateClearTimerRef.current = null;
+        }
+    }, [navigateTreeNode]);
+    useLayoutEffect(() => {
+        if (!navigateTreeNode || newNode)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const rowIndex = keyIndexMap.get(navigateTreeNode);
+        if (rowIndex !== undefined) {
+            navigateAttemptsRef.current = {
+                key: navigateTreeNode,
+                attempts: 0,
+            };
+            const headerHeight = headerHeightRef.current || 0;
+            const viewportHeight = Math.max(ROW_HEIGHT, container.clientHeight - headerHeight);
+            const rowCenter = rowIndex * ROW_HEIGHT + ROW_HEIGHT / 2;
+            const targetTop = Math.max(0, rowCenter - viewportHeight / 2) + headerHeight;
+            suppressScrollCancelUntilRef.current = Date.now() + 400;
+            container.scrollTo({
+                top: targetTop,
+                behavior: 'smooth',
+            });
+            scheduleRangeUpdate();
+            if (navigateClearTimerRef.current) {
+                clearTimeout(navigateClearTimerRef.current);
+            }
+            navigateClearTimerRef.current = setTimeout(() => {
+                handleRemoveNavigateTreeNode?.();
+            }, 350);
+            return;
+        }
+        if (loading || scrollDirection)
+            return;
+        const retryState = navigateAttemptsRef.current;
+        if (retryState.key !== navigateTreeNode) {
+            retryState.key = navigateTreeNode;
+            retryState.attempts = 0;
+        }
+        retryState.attempts += 1;
+        if (retryState.attempts > 30) {
+            handleRemoveNavigateTreeNode?.();
+            return;
+        }
+        if (pagination && treeData[0]?.lastResource !== true) {
+            previousFirstKeyRef.current = null;
+            setScrollDirection('above');
+            loadMore('above');
+            return;
+        }
+        if (retryState.attempts > 2) {
+            handleRemoveNavigateTreeNode?.();
+        }
+    }, [
+        navigateTreeNode,
+        newNode,
+        keyIndexMap,
+        loading,
+        scrollDirection,
+        pagination,
+        treeData,
+        loadMore,
+        scheduleRangeUpdate,
+        handleRemoveNavigateTreeNode,
+    ]);
     const handleToggleExpand = useCallback((node) => {
         if (expanding)
             return;
+        const nextExpandedState = !node?.expanded;
         setExpanding(node.key);
+        expandTargetRef.current = {
+            key: node.key,
+            expanded: nextExpandedState,
+        };
+        if (expandingFallbackTimerRef.current) {
+            clearTimeout(expandingFallbackTimerRef.current);
+        }
+        const fallbackStartedAt = Date.now();
+        const MAX_FALLBACK_WAIT_MS = 2000;
+        const FALLBACK_CHECK_INTERVAL_MS = 1000;
+        const ensureExpandCleanup = () => {
+            if (expandTargetRef.current?.key !== node.key)
+                return;
+            const isStillLoading = loadingRef.current;
+            const didTimeout = Date.now() - fallbackStartedAt >= MAX_FALLBACK_WAIT_MS;
+            if (isStillLoading && !didTimeout) {
+                expandingFallbackTimerRef.current = setTimeout(ensureExpandCleanup, FALLBACK_CHECK_INTERVAL_MS);
+                return;
+            }
+            clearExpanding(node.key);
+        };
+        expandingFallbackTimerRef.current = setTimeout(ensureExpandCleanup, FALLBACK_CHECK_INTERVAL_MS);
         onExpand?.(node);
-    }, [onExpand, expanding]);
+    }, [expanding, onExpand, clearExpanding]);
     const handleCheckBoxChange = useCallback((e, node) => {
         if (expanding)
             return;
@@ -247,69 +693,32 @@ showHeader = true, }, ref) => {
             return;
         onClick?.(e, node);
     }, [onClick, expanding]);
-    const DEFAULT_COLUMN_WIDTH = 400;
-    const calculateFrozenWidth = (columnData, freezeColumns) => {
-        return columnData
-            .slice(0, freezeColumns)
-            .reduce((acc, col) => acc + parseInt(col.width || `${DEFAULT_COLUMN_WIDTH}`, 10), 0);
-    };
-    let frozenWidth;
-    if (freezeColumns) {
-        frozenWidth = calculateFrozenWidth(columnsData, freezeColumns);
-    }
-    // half visible, click on upward arrow functionality, page auto scrolling
     useEffect(() => {
-        if (!newNode || !containerRef.current)
-            return;
-        const container = containerRef.current;
-        if (newNode.action === 'addAbove' &&
-            newNode.sourceId === treeData[0]?.key) {
-            container.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-        else if (newNode.action === 'addAbove' &&
-            newNode.sourceId === newNode.firstNodeKey) {
-            const newScrollTop = container.scrollTop - 64;
-            container.scrollTo({ top: newScrollTop, behavior: 'smooth' });
-        }
-    }, [newNode]);
-    useLayoutEffect(() => {
-        if (!navigateTreeNode)
-            return;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        let retryCount = 0;
-        const maxRetries = 30;
-        const scrollToNode = () => {
-            const element = document.getElementById(navigateTreeNode);
-            if (element) {
-                setTimeout(() => {
-                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                    handleRemoveNavigateTreeNode();
-                }, 200);
+        return () => {
+            if (scrollRafRef.current !== null) {
+                cancelAnimationFrame(scrollRafRef.current);
+                scrollRafRef.current = null;
             }
-            else {
-                if (retryCount === 0 && treeData?.length > 1) {
-                    loadMoreAbove?.();
-                }
-                if (retryCount < maxRetries) {
-                    retryCount++;
-                    requestAnimationFrame(scrollToNode);
-                }
-                else {
-                    handleRemoveNavigateTreeNode();
-                }
+            if (expandingFallbackTimerRef.current) {
+                clearTimeout(expandingFallbackTimerRef.current);
+            }
+            if (navigateClearTimerRef.current) {
+                clearTimeout(navigateClearTimerRef.current);
             }
         };
-        scrollToNode();
-    }, [navigateTreeNode, loadMoreAbove, handleRemoveNavigateTreeNode]);
-    return (_jsx("div", { className: "tree-table-wrapper-container", children: _jsx("div", { className: "tree-table-wrap", ref: ref, children: _jsx("div", { className: `table-scrollable ${treeData.length ? '' : 'table-empty'}`, ref: containerRef, style: {
-                    '--table-height': treeData.length ? height : 'auto',
-                    '--frozen-column-width': freezeColumns
-                        ? `${frozenWidth}px`
-                        : '0px',
+    }, []);
+    const totalHeight = visiblePreparedRows.length * ROW_HEIGHT;
+    const visibleRows = visiblePreparedRows.slice(virtualRange.start, virtualRange.end);
+    return (_jsx("div", { className: "tree-table-wrapper-container table-tree-fn", children: _jsx("div", { className: "tree-table-fn-wrap", ref: ref, children: _jsx("div", { className: `table-fn-scrollable ${visiblePreparedRows.length ? '' : 'table-fn-empty'}`, ref: containerRef, style: {
+                    '--table-height': visiblePreparedRows.length ? height : 'auto',
+                    '--frozen-column-width': frozenColumnWidth,
                     border: tableBorder,
-                }, children: _jsxs("table", { className: "tree-table", children: [_jsx(TableHead, { columnsData: columnsData, rootNode: rootNode, onCheckBoxChange: handleCheckBoxChange, selected: selected, selectedNode: selectedNode, tableHeaderBgColor: tableHeaderBgColor, hideOnDisable: hideOnDisable, transparentHeader: transparentHeader, scriptLengthTruncate: scriptLengthTruncate, showHeader: showHeader }), _jsx(TableBody, { flattenedTreeData: addLastChild(treeData), rootNode: rootNode?.node, columnsData: columnsData, selected: selected, select: select, onRowClick: handleRowClick, onToggleExpand: handleToggleExpand, onCheckBoxChange: handleCheckBoxChange, newNode: newNode, onAddConfirm: onAddConfirm, onAddCancel: onAddCancel, handleEditFieldError: handleEditFieldError, expanding: expanding, selectedNode: selectedNode, hideOnDisable: hideOnDisable, scriptLengthTruncate: scriptLengthTruncate, addModuleInputWidth: addModuleInputWidth, addModuleSelectWidth: addModuleSelectWidth, disableEditLabelConfirmIcon: disableEditLabelConfirmIcon })] }) }) }) }));
+                }, children: _jsxs("div", { className: "tree-table-fn", style: { width: totalWidth }, children: [_jsx("div", { ref: headerRef, style: { position: 'sticky', top: 0, zIndex: 98 }, children: _jsx(TableHead, { columnsData: columnsData, columnMeta: columnMeta, totalWidth: totalWidth, rootNode: rootNode, onCheckBoxChange: handleCheckBoxChange, selected: selected, selectedNode: selectedNode, tableHeaderBgColor: tableHeaderBgColor, hideOnDisable: hideOnDisable, transparentHeader: transparentHeader, scriptLengthTruncate: scriptLengthTruncate, showHeader: showHeader }) }), _jsx(TableBody, { flattenedTreeData: visibleRows, columnsData: columnsData, columnMeta: columnMeta, totalWidth: totalWidth, rowHeight: ROW_HEIGHT, startIndex: virtualRange.start, totalHeight: totalHeight, selected: selected, select: select, onRowClick: handleRowClick, onToggleExpand: handleToggleExpand, onCheckBoxChange: handleCheckBoxChange, onAddConfirm: onAddConfirm, onAddCancel: onAddCancel, handleEditFieldError: handleEditFieldError, expanding: expanding, selectedNode: selectedNode, hideOnDisable: hideOnDisable, scriptLengthTruncate: scriptLengthTruncate, addModuleInputWidth: addModuleInputWidth, addModuleSelectWidth: addModuleSelectWidth, disableEditLabelConfirmIcon: disableEditLabelConfirmIcon, isEditable: newNode ? newNodeEditable : undefined, setIsEditable: newNode
+                                ? (id) => {
+                                    setNewNodeEditable(Boolean(id));
+                                }
+                                : undefined })] }) }) }) }));
 });
+TableTreeFn.displayName = 'TableTreeFn';
 export default TableTreeFn;
 //# sourceMappingURL=TableTreeFn.js.map