pixel-react 1.20.17 → 1.20.19

package/lib/components/TableTreeFn/TableTreeFn.js

@@ -1,771 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable max-lines */
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef, } from 'react';
-import './TableTreeFn.scss';
-import TableBody from './Components/TableBody';
-import TableHead from './Components/TableHead';
-import { debounce } from '../../utils/debounce/debounce';
-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 === sourceId);
-            if (parentIndex !== -1) {
-                insertionIndex = parentIndex + 1;
-            }
-            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);
-    const [virtualRange, setVirtualRange] = useState({ start: 0, end: 20 });
-    const [newNodeEditable, setNewNodeEditable] = useState(false);
-    const containerRef = useRef(null);
-    const headerRef = useRef(null);
-    const headerHeightRef = useRef(0);
-    const loadingRef = useRef(loading);
-    const scrollDirectionRef = useRef(null);
-    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]);
-    useEffect(() => {
-        scrollDirectionRef.current = scrollDirection;
-    }, [scrollDirection]);
-    const updateScrollDirection = useCallback((direction) => {
-        scrollDirectionRef.current = direction;
-        setScrollDirection(direction);
-    }, []);
-    const updateVirtualRange = useCallback(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        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;
-        scrollRafRef.current = requestAnimationFrame(() => {
-            scrollRafRef.current = null;
-            updateVirtualRange();
-        });
-    }, [updateVirtualRange]);
-    // Handle scroll position safety when searching/filtering/collapsing
-    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) {
-            // 1. EXPLICIT COLLAPSE: The table knows you manually clicked the collapse arrow
-            if (expanding) {
-                container.scrollTop = maxScrollTop;
-                scrollPositionRef.current.lastScrollTop = maxScrollTop;
-            }
-            // 2. MASSIVE DATA RESET: Clone (without navigation), Refresh, or Search
-            // If the list height drops drastically (by more than one full screen), reset to top
-            else if (scrollPositionRef.current.lastScrollTop - maxScrollTop >
-                container.clientHeight) {
-                container.scrollTop = 0;
-                scrollPositionRef.current.lastScrollTop = 0;
-            }
-        }
-        updateVirtualRange();
-    }, [
-        visiblePreparedRows.length,
-        updateVirtualRange,
-        newNode,
-        navigateTreeNode,
-        expanding,
-    ]);
-    const handleScroll = useCallback(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const currentScrollTop = container.scrollTop;
-        const direction = currentScrollTop > scrollPositionRef.current.lastScrollTop
-            ? 'down'
-            : 'up';
-        scrollPositionRef.current.lastScrollTop = currentScrollTop;
-        scheduleRangeUpdate();
-        onScroll?.();
-        debouncedScrollEndRef.current?.();
-        if (!pagination ||
-            loading ||
-            scrollDirectionRef.current ||
-            checkEmpty(treeData))
-            return;
-        const scrollHeight = container.scrollHeight;
-        const clientHeight = container.clientHeight;
-        const nearBottom = scrollHeight - (currentScrollTop + clientHeight) < scrollThreshold;
-        const nearTop = currentScrollTop < scrollThreshold + headerHeightRef.current;
-        if (direction === 'down' &&
-            nearBottom &&
-            !treeData[treeData.length - 1]?.lastResource) {
-            updateScrollDirection('below');
-            loadMore('below');
-        }
-        if (direction === 'up' && nearTop && !treeData[0]?.lastResource) {
-            updateScrollDirection('above');
-            previousFirstKeyRef.current = treeData[0]?.key ?? null;
-            loadMore('above');
-        }
-    }, [
-        treeData,
-        pagination,
-        loading,
-        scrollDirection,
-        scrollThreshold,
-        scheduleRangeUpdate,
-        onScroll,
-        loadMore,
-        updateScrollDirection,
-    ]);
-    useEffect(() => {
-        if (loading || !pagination || checkEmpty(treeData))
-            return;
-        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;
-            updateScrollDirection('above');
-            loadMore('above');
-        }
-    }, [
-        loading,
-        pagination,
-        treeData,
-        visiblePreparedRows.length,
-        rootNode,
-        loadMore,
-        updateScrollDirection,
-    ]);
-    useLayoutEffect(() => {
-        if (!loading && scrollDirection === 'above') {
-            const container = containerRef.current;
-            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;
-            updateScrollDirection(null);
-        }
-        else if (!loading && scrollDirection === 'below') {
-            updateScrollDirection(null);
-        }
-    }, [loading, scrollDirection, keyIndexMap, updateScrollDirection]);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const handleWheelAtTop = (event) => {
-            if (event.deltaY >= 0)
-                return;
-            if (!pagination || checkEmpty(treeData) || loadingRef.current)
-                return;
-            if (scrollDirectionRef.current)
-                return;
-            if (container.scrollTop > 1 || treeData[0]?.lastResource)
-                return;
-            previousFirstKeyRef.current = treeData[0]?.key ?? null;
-            updateScrollDirection('above');
-            loadMore('above');
-        };
-        container.addEventListener('wheel', handleWheelAtTop, { passive: true });
-        return () => {
-            container.removeEventListener('wheel', handleWheelAtTop);
-        };
-    }, [pagination, treeData, loadMore, updateScrollDirection]);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        debouncedScrollEndRef.current = onScrollEnd
-            ? debounce(() => {
-                onScrollEnd?.();
-            }, 150)
-            : null;
-        container.addEventListener('scroll', handleScroll, { passive: true });
-        return () => {
-            container.removeEventListener('scroll', handleScroll);
-            debouncedScrollEndRef.current?.cancel();
-        };
-    }, [handleScroll, onScrollEnd]);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const handleScrollCapture = (event) => {
-            if (Date.now() < suppressScrollCancelUntilRef.current) {
-                event.stopImmediatePropagation();
-            }
-        };
-        container.addEventListener('scroll', handleScrollCapture, {
-            passive: true,
-            capture: true,
-        });
-        return () => {
-            container.removeEventListener('scroll', handleScrollCapture, true);
-        };
-    }, []);
-    useEffect(() => {
-        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);
-        }
-        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 (!newNode) {
-            setNewNodeEditable(false);
-        }
-    }, [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;
-            updateScrollDirection('above');
-            loadMore('above');
-            return;
-        }
-        if (retryState.attempts > 2) {
-            handleRemoveNavigateTreeNode?.();
-        }
-    }, [
-        navigateTreeNode,
-        newNode,
-        keyIndexMap,
-        loading,
-        scrollDirection,
-        pagination,
-        treeData,
-        loadMore,
-        scheduleRangeUpdate,
-        handleRemoveNavigateTreeNode,
-        updateScrollDirection,
-    ]);
-    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);
-    }, [expanding, onExpand, clearExpanding]);
-    const handleCheckBoxChange = useCallback((e, node) => {
-        if (expanding)
-            return;
-        onChange?.(e, node);
-    }, [onChange, expanding]);
-    const handleRowClick = useCallback((e, node) => {
-        if (expanding)
-            return;
-        onClick?.(e, node);
-    }, [onClick, expanding]);
-    useEffect(() => {
-        return () => {
-            if (scrollRafRef.current !== null) {
-                cancelAnimationFrame(scrollRafRef.current);
-                scrollRafRef.current = null;
-            }
-            if (expandingFallbackTimerRef.current) {
-                clearTimeout(expandingFallbackTimerRef.current);
-            }
-            if (navigateClearTimerRef.current) {
-                clearTimeout(navigateClearTimerRef.current);
-            }
-        };
-    }, []);
-    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("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
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as n,useState as r,useRef as o,useMemo as l,useCallback as c,useEffect as a,useLayoutEffect as s}from"react";import"./TableTreeFn.scss.js";import i from"./Components/TableBody.js";import u from"./Components/TableHead.js";import{debounce as d}from"../../utils/debounce/debounce.js";import{checkEmpty as h}from"../../utils/checkEmpty/checkEmpty.js";const p=32,m="__root__",f=(e,t)=>{if(!e?.length)return[];const n=new Map,r=new Map,o=new Map,l=new Map;t&&t.key&&n.set(t.key,t),e.forEach(e=>{n.set(e.key,e);const t=e.parentId??m;r.has(t)||(r.set(t,[]),l.set(t,{container:0,resource:0})),r.get(t)?.push(e);const o=l.get(t);o&&(e.container?o.container++:o.resource++)}),r.forEach(e=>{e.forEach((e,t)=>{o.set(e.key,t)})});const c=e=>{const t=e.parentId??m,c=r.get(t);if(!c||0===c.length)return!1;if((o.get(e.key)??0)<c.length-1)return!0;const a=n.get(t),s=l.get(t);if(a&&s){const t=c.filter(e=>e.container).reduce((e,t)=>e+(t.totalResourceCount??0),0),n=c.filter(e=>!e.container).length,r=Math.max(0,(a.totalResourceCount??0)-(t+n));if(e.container){return s.container<(a.subContainerCount??0)||r>0}return s.resource<r}return!1},a=e=>{if(void 0!==e.selectedStatus)return e.selectedStatus;let r=e;for(;r?.parentId;){const e=n.get(r.parentId);if(!e)break;if("completely"===e.selectedStatus)return"completely";if("none"===e.selectedStatus)return"none";r=e}return"completely"===t?.selectedStatus?"completely":"none"===t?.selectedStatus?"none":e.selectedStatus};return e.map(e=>{const t=e,r=t.parentSiblings&&t.parentSiblings.length>0?t.parentSiblings:(e=>{const t=e.hierarchy??0;if(t<=0)return[];const r=[];let o=e;for(;o&&(r.unshift(o),o.parentId);){const e=n.get(o.parentId);if(!e)break;o=e}const l=r.map(e=>c(e));return l.length===t?l:l.length>t?l.slice(l.length-t):new Array(t-l.length).fill(!1).concat(l)})(e);return{...e,lastChild:!c(e),parentSiblings:r,selectedStatus:a(e)}})},g=n(({treeData:n,columnsData:m,selected:g=[],select:b=null,onChange:y=()=>{},onClick:v=()=>{},onExpand:k=()=>{},loadMore:w=()=>{},tableBorder:T,height:I="calc(100vh - 134px)",newNode:x,onAddConfirm:C=()=>{},onAddCancel:E=()=>{},handleEditFieldError:M,loading:S=!1,rootNode:A,pagination:F=!0,selectedNode:H,tableHeaderBgColor:N="var(--border-color)",hideOnDisable:D=!1,freezeColumns:R,scriptLengthTruncate:B=25,addModuleInputWidth:L=150,addModuleSelectWidth:W,onScroll:$,onScrollEnd:j,disableEditLabelConfirmIcon:O=!1,transparentHeader:q=!1,navigateTreeNode:z=null,handleRemoveNavigateTreeNode:_=()=>{},scrollThreshold:P=128,showHeader:Y=!0},G)=>{const[J,K]=r(null),[Q,U]=r(null),[V,X]=r({start:0,end:20}),[Z,ee]=r(!1),te=o(null),ne=o(null),re=o(0),oe=o(S),le=o(null),ce=o(null),ae=o({lastScrollTop:0}),se=o(null),ie=o(0),ue=o(null),de=o(null),he=o(null),pe=o({key:null,attempts:0}),me=o(null),fe=(e,t)=>{const n=String(e??t);return n.endsWith("%")?{value:parseFloat(n),unit:"%"}:{value:parseFloat(n)||0,unit:"px"}},ge=l(()=>{let e=0,t=0;return m.map((n,r)=>{const{value:o,unit:l}=fe(n.width,400),c=!!R&&r<R,a="%"===l?`${o}%`:`${o}px`,s=`calc(${e}px + ${t}%)`;return c&&("%"===l?t+=o:e+=o),{width:a,sticky:c,left:s,zIndex:c?100+(R??0)-r:1}})},[m,R]),be=l(()=>{let e=0,t=0;return m.forEach(n=>{const{value:r,unit:o}=fe(n.width,400);"%"===o?t+=r:e+=r}),`calc(${e}px + ${t}%)`},[m]),ye=l(()=>{if(!R)return"0px";let e=0,t=0;return ge.slice(0,R).forEach(n=>{const r=parseFloat(n.width)||0;n.width.endsWith("%")?t+=r:e+=r}),`calc(${e}px + ${t}%)`},[ge,R]),ve=l(()=>((e,t,n)=>{if(!t?.sourceId||!t.action)return e;const{sourceId:r,action:o,value:l="",error:c="",label:a,type:s,options:i,selectedOption:u,confirmIconTooltip:d,cancelIconTooltip:h,payloadSourceId:p}=t,m=t?.parentId,f=t?.hierarchy,g=i?.map(e=>({label:e,value:e})),b=u?{label:u,value:u}:void 0,y=new Map;e.forEach(e=>y.set(e.key,e)),n&&y.set(n.key,n);const v=y.get(r);let k;p&&(k=y.get(p));let w=v??("addInside"===o?k:void 0);!w&&"addInside"===o&&m&&(w=y.get(m));const T="addInside"===o&&!w&&e.length>=0;if(!w&&!T)return e;const I=[...e],x=w?e.findIndex(e=>e.key===w.key):-1;let C=null,E=0,M=x+1;switch(o){case"addAbove":{const t=w;if(!t)return e;C=t.parentId,E=t.hierarchy;break}case"addBelow":{const t=w;if(!t)return e;C=k?.parentId??t.parentId,E=k?.hierarchy??t.hierarchy;break}case"addInside":{if(T){C=m??p??r??null,E=f??1,M=I.length;break}const t=k??w;if(!t)return e;C=t.key,E=(t.hierarchy??0)+1;const n=I.findIndex(e=>e.key===r);-1!==n&&(M=n+1);break}}const S={hierarchy:E,parentId:C,sourceId:w?.key??r??p??"new-node",isNewNode:!0,key:"new-node",value:l,error:c,label:a,type:s,options:g,selectedOption:b,confirmIconTooltip:d,cancelIconTooltip:h};switch(o){case"addAbove":I.splice(x,0,S);break;case"addBelow":I.splice(x+1,0,S);break;case"addInside":I.splice(Math.max(0,M),0,S)}return I})(n,x,A?.node),[n,x,A]),ke=l(()=>f(ve,A?.node),[ve,A?.node]),we=l(()=>ke.filter(e=>!e.hide),[ke]),Te=l(()=>{const e=new Map;return ke.forEach(t=>e.set(t.key,t)),e},[ke]),Ie=l(()=>{const e=new Map;return we.forEach((t,n)=>e.set(t.key,n)),e},[we]),xe=c(e=>{K(t=>t?e&&t!==e?t:null:t),e&&de.current?.key!==e||(de.current=null),he.current&&(clearTimeout(he.current),he.current=null)},[]);a(()=>{oe.current=S},[S]),a(()=>{le.current=Q},[Q]);const Ce=c(e=>{le.current=e,U(e)},[]),Ee=c(()=>{const e=te.current;if(!e)return;const t=re.current||0,n=Math.max(0,e.scrollTop-t),r=e.clientHeight-t;let o=Math.floor(n/p)-6,l=Math.ceil((n+r)/p)+6;o=Math.max(0,o),l=Math.min(we.length,l),X(e=>e.start===o&&e.end===l?e:{start:o,end:l})},[we.length]),Me=c(()=>{null===ce.current&&(ce.current=requestAnimationFrame(()=>{ce.current=null,Ee()}))},[Ee]);s(()=>{const e=te.current;if(!e)return;const t=we.length*p,n=Math.max(0,t-(e.clientHeight-re.current));ae.current.lastScrollTop>n&&we.length>0&&(J?(e.scrollTop=n,ae.current.lastScrollTop=n):ae.current.lastScrollTop-n>e.clientHeight&&(e.scrollTop=0,ae.current.lastScrollTop=0)),Ee()},[we.length,Ee,x,z,J]);const Se=c(()=>{const e=te.current;if(!e)return;const t=e.scrollTop,r=t>ae.current.lastScrollTop?"down":"up";if(ae.current.lastScrollTop=t,Me(),$?.(),ue.current?.(),!F||S||le.current||h(n))return;const o=e.scrollHeight-(t+e.clientHeight)<P,l=t<P+re.current;"down"===r&&o&&!n[n.length-1]?.lastResource&&(Ce("below"),w("below")),"up"===r&&l&&!n[0]?.lastResource&&(Ce("above"),se.current=n[0]?.key??null,w("above"))},[n,F,S,Q,P,Me,$,w,Ce]);a(()=>{if(S||!F||h(n))return;const e=n[0],t=!e?.lastResource,{totalSubContainerCount:r=0,totalResourceCount:o=0}=A?.node||{},l=r+o,c=we.length<10&&we.length<l;t&&c&&(se.current=e?.key??null,Ce("above"),w("above"))},[S,F,n,we.length,A,w,Ce]),s(()=>{if(S||"above"!==Q)S||"below"!==Q||Ce(null);else{const e=te.current,t=se.current;if(e&&t){const n=Ie.get(t);void 0!==n&&n>0&&(e.scrollTop+=n*p)}se.current=null,Ce(null)}},[S,Q,Ie,Ce]),a(()=>{const e=te.current;if(!e)return;const t=t=>{t.deltaY>=0||!F||h(n)||oe.current||le.current||e.scrollTop>1||n[0]?.lastResource||(se.current=n[0]?.key??null,Ce("above"),w("above"))};return e.addEventListener("wheel",t,{passive:!0}),()=>{e.removeEventListener("wheel",t)}},[F,n,w,Ce]),a(()=>{const e=te.current;if(e)return ue.current=j?d(()=>{j?.()},150):null,e.addEventListener("scroll",Se,{passive:!0}),()=>{e.removeEventListener("scroll",Se),ue.current?.cancel()}},[Se,j]),a(()=>{const e=te.current;if(!e)return;const t=e=>{Date.now()<ie.current&&e.stopImmediatePropagation()};return e.addEventListener("scroll",t,{passive:!0,capture:!0}),()=>{e.removeEventListener("scroll",t,!0)}},[]),a(()=>{const e=ne.current;if(!e)return;const t=new ResizeObserver(()=>{re.current=e.getBoundingClientRect().height,Ee()});return t.observe(e),()=>t.disconnect()},[Ee]),s(()=>{if(!x||!te.current)return;const e=te.current,t=Ie.get("new-node");if(void 0===t)return;const n=re.current||0,r=e.clientHeight-n;if(r<=0)return;const o=t*p,l=o+p,c=Math.max(0,e.scrollTop-n);let a=c;o<c?a=o:l>c+r&&(a=Math.max(0,l-r)),a!==c&&(ie.current=Date.now()+300,e.scrollTop=a+n,Ee());const s=requestAnimationFrame(()=>{ee(!0)});return()=>cancelAnimationFrame(s)},[x,Ie,Ee]),a(()=>{x||ee(!1)},[x]),s(()=>{if(!J||S)return;const e=de.current;if(!e||e.key!==J){const e=requestAnimationFrame(()=>{xe(J)});return()=>cancelAnimationFrame(e)}const t=Te.get(e.key);if(!t){const t=requestAnimationFrame(()=>{xe(e.key)});return()=>cancelAnimationFrame(t)}if(Boolean(t.expanded)!==e.expanded)return;const n=requestAnimationFrame(()=>{xe(e.key)});return()=>cancelAnimationFrame(n)},[Te,J,S,xe]),a(()=>{pe.current.key!==z&&(pe.current={key:z,attempts:0}),!z&&me.current&&(clearTimeout(me.current),me.current=null)},[z]),s(()=>{if(!z||x)return;const e=te.current;if(!e)return;const t=Ie.get(z);if(void 0!==t){pe.current={key:z,attempts:0};const n=re.current||0,r=Math.max(p,e.clientHeight-n),o=t*p+16,l=Math.max(0,o-r/2)+n;return ie.current=Date.now()+400,e.scrollTo({top:l,behavior:"smooth"}),Me(),me.current&&clearTimeout(me.current),void(me.current=setTimeout(()=>{_?.()},350))}if(S||Q)return;const r=pe.current;if(r.key!==z&&(r.key=z,r.attempts=0),r.attempts+=1,!(r.attempts>30))return F&&!0!==n[0]?.lastResource?(se.current=null,Ce("above"),void w("above")):void(r.attempts>2&&_?.());_?.()},[z,x,Ie,S,Q,F,n,w,Me,_,Ce]);const Ae=c(e=>{if(J)return;const t=!e?.expanded;K(e.key),de.current={key:e.key,expanded:t},he.current&&clearTimeout(he.current);const n=Date.now(),r=()=>{if(de.current?.key!==e.key)return;const t=oe.current,o=Date.now()-n>=2e3;!t||o?xe(e.key):he.current=setTimeout(r,1e3)};he.current=setTimeout(r,1e3),k?.(e)},[J,k,xe]),Fe=c((e,t)=>{J||y?.(e,t)},[y,J]),He=c((e,t)=>{J||v?.(e,t)},[v,J]);a(()=>()=>{null!==ce.current&&(cancelAnimationFrame(ce.current),ce.current=null),he.current&&clearTimeout(he.current),me.current&&clearTimeout(me.current)},[]);const Ne=we.length*p,De=we.slice(V.start,V.end);return e("div",{className:"tree-table-wrapper-container table-tree-fn",children:e("div",{className:"tree-table-fn-wrap",ref:G,children:e("div",{className:"table-fn-scrollable "+(we.length?"":"table-fn-empty"),ref:te,style:{"--table-height":we.length?I:"auto","--frozen-column-width":ye,border:T},children:t("div",{className:"tree-table-fn",style:{width:be},children:[e("div",{ref:ne,style:{position:"sticky",top:0,zIndex:98},children:e(u,{columnsData:m,columnMeta:ge,totalWidth:be,rootNode:A,onCheckBoxChange:Fe,selected:g,selectedNode:H,tableHeaderBgColor:N,hideOnDisable:D,transparentHeader:q,scriptLengthTruncate:B,showHeader:Y})}),e(i,{flattenedTreeData:De,columnsData:m,columnMeta:ge,totalWidth:be,rowHeight:p,startIndex:V.start,totalHeight:Ne,selected:g,select:b,onRowClick:He,onToggleExpand:Ae,onCheckBoxChange:Fe,onAddConfirm:C,onAddCancel:E,handleEditFieldError:M,expanding:J,selectedNode:H,hideOnDisable:D,scriptLengthTruncate:B,addModuleInputWidth:L,addModuleSelectWidth:W,disableEditLabelConfirmIcon:O,isEditable:x?Z:void 0,setIsEditable:x?e=>{ee(Boolean(e))}:void 0})]})})})})});g.displayName="TableTreeFn";export{g as default};