pixel-react 1.13.92 → 1.13.94

package/lib/index.cjs

@@ -4641,7 +4641,7 @@ const Textarea = ({
 }) => {
   const labelClasses = classNames('ff-textarea-label ff-textarea-label--' + variant, {
     'ff-textarea-label--danger': error,
-    'ff-textarea-label--disabled': disabled
+    'ff-textarea-label--disabled': disabled && !value
   });
   const textareaClasses = classNames(`ff-textarea ff-textarea--${variant}`, className, {
     'ff-textarea--danger': error,
@@ -9826,10 +9826,25 @@ var DNDSortable = /*#__PURE__*/Object.freeze({
 	verticalListSortingStrategy: verticalListSortingStrategy
 });
 
-const getColumnWidth = (index, column, columns) => {
-  if (index === 0) return `${index * (column?.width || 0)}px`;
-  if (index === 1) return `${columns?.[0]?.width || 0}px`;
-  return 'auto';
+const getColumnLeftPosition = (index, columns, freezeColumns) => {
+  if (index === 0) return '0px';
+  // Calculate cumulative width of all previous columns including padding
+  let leftPosition = 0;
+  const CELL_PADDING = 8; // Each cell has 8px padding
+  for (let i = 0; i < index; i++) {
+    const width = columns[i]?.width;
+    // Add column width plus left padding only
+    leftPosition += width ? parseInt(width.toString(), 10) : DEFAULT_COLUMN_WIDTH;
+    // Add padding between frozen columns
+    if (freezeColumns && i < freezeColumns - 1) {
+      leftPosition += CELL_PADDING;
+    }
+  }
+  return `${leftPosition}px`;
+};
+const DEFAULT_COLUMN_WIDTH = 400;
+const calculateFrozenWidth = (columnData, freezeColumns) => {
+  return columnData.slice(0, freezeColumns).reduce((acc, col) => acc + parseInt(col.width?.toString() || `${DEFAULT_COLUMN_WIDTH}`, 10), 1) + 8 * (freezeColumns - 0.17);
 };
 const SortableRow = ({
   row,
@@ -9844,9 +9859,9 @@ const SortableRow = ({
   editMode,
   isAccordionOpen,
   accordionContent,
-  columnSticky,
   isRowCheckBoxDisable,
-  isRowDisabled = true
+  isRowDisabled = true,
+  freezeColumns
 }) => {
   const {
     attributes,
@@ -9872,15 +9887,19 @@ const SortableRow = ({
       }),
       id: key,
       children: columns.map((column, index) => {
-        const isSticky = columnSticky && (index === 0 || index === 1);
+        const isFrozen = freezeColumns && index < freezeColumns;
         return jsxRuntime.jsx("td", {
           style: {
-            paddingLeft: index === 0 && draggable ? '0px' : '8px',
-            position: isSticky ? 'sticky' : 'static',
-            left: getColumnWidth(index, column, columns),
-            zIndex: isSticky ? 999 : 'auto',
-            backgroundColor: isSticky ? 'var(--input-label-bg-color)' : 'transparent'
+            position: isFrozen ? 'sticky' : 'static',
+            left: isFrozen ? getColumnLeftPosition(index, columns, freezeColumns) : 'auto',
+            zIndex: isFrozen ? 999 : 'auto',
+            backgroundColor: isFrozen ? 'var(--input-label-bg-color)' : 'transparent',
+            width: column.width ? `${column.width}px` : 'auto',
+            padding: '7px 8px',
+            boxSizing: 'border-box',
+            paddingRight: isFrozen ? 0 : '8px'
           },
+          "data-frozen": isFrozen || undefined,
           onClick: () => handleOnclick(column, row),
           className: classNames(column.className, {
             'clickable-cell': column.onClick
@@ -9954,15 +9973,19 @@ const Table$1 = ({
   editComponent,
   getAccordionStatus = () => {},
   accordionContent,
-  columnSticky = false,
   tableRef = null,
   isRowCheckBoxDisable,
   isRowDisabled = true,
-  tableHeaderZindex = 99
+  tableHeaderZindex = 99,
+  freezeColumns
 }) => {
   const observerRef = React.useRef(null);
+  let frozenWidth;
+  if (freezeColumns) {
+    frozenWidth = calculateFrozenWidth(columns, freezeColumns);
+  }
   React.useEffect(() => {
-    const scrollContainer = document.getElementById('ff-table-scroll-container');
+    const scrollContainer = document.getElementById('ff-sortable-table-scroll-container');
     const firstNode = document.getElementById('ff-table-first-node');
     const lastNode = document.getElementById('ff-table-last-node');
     // Exit early if data is empty or elements are missing
@@ -10023,12 +10046,10 @@ const Table$1 = ({
       children: jsxRuntime.jsxs("div", {
         style: {
           height: height,
-          position: 'relative',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          scrollbarWidth: draggable ? 'none' : 'auto'
+          scrollbarWidth: draggable ? 'none' : 'auto',
+          '--frozen-column-width': freezeColumns ? `${frozenWidth}px` : '0px'
         },
-        id: "ff-table-scroll-container",
+        id: "ff-sortable-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-table': withFixedHeader,
           'border-borderRadius': borderWithRadius
@@ -10045,44 +10066,52 @@ const Table$1 = ({
               zIndex: tableHeaderZindex
             },
             children: jsxRuntime.jsx("tr", {
-              children: columns.map((column, index) => jsxRuntime.jsxs("th", {
-                className: classNames(`${headerType !== 'default' ? `${headerType}-bg` : ''}`, `${headerTextColor && `${headerTextColor}-color`}`, {
-                  'sticky-column': columnSticky && (index === 0 || index === 1)
-                }),
-                style: {
-                  width: column?.width,
-                  left: getColumnWidth(index, column, columns)
-                },
-                children: [jsxRuntime.jsx("div", {
-                  className: "ff-table-icon",
-                  children: jsxRuntime.jsx(Icon, {
-                    height: 14,
-                    width: 14,
-                    name: headerIconName,
-                    onClick: headerIconOnClick
-                  })
-                }), jsxRuntime.jsxs(Typography, {
-                  style: column?.width && {
-                    width: column?.width
+              children: columns.map((column, index) => {
+                const isFrozen = freezeColumns && index < freezeColumns;
+                return jsxRuntime.jsxs("th", {
+                  className: classNames(`${headerType !== 'default' ? `${headerType}-bg` : ''}`, `${headerTextColor && `${headerTextColor}-color`}`),
+                  style: {
+                    position: isFrozen ? 'sticky' : 'static',
+                    left: isFrozen ? getColumnLeftPosition(index, columns, freezeColumns) : 'auto',
+                    zIndex: isFrozen ? 999 : 'auto',
+                    backgroundColor: isFrozen ? 'var(--input-label-bg-color)' : 'transparent',
+                    width: column.width ? `${column.width}px` : 'auto',
+                    padding: '7px 8px',
+                    boxSizing: 'border-box',
+                    // Remove right padding from frozen columns to prevent overlap
+                    paddingRight: isFrozen ? 0 : '8px'
                   },
-                  as: "div",
-                  fontWeight: "semi-bold",
-                  className: "ff-label-checkbox-container",
-                  children: [index === 0 && withCheckbox && jsxRuntime.jsx("span", {
-                    className: "ff-table-checkbox",
-                    children: jsxRuntime.jsx(Checkbox, {
-                      onChange: e => {
-                        onSelectClick(e, {
-                          allSelected: e.target.checked
-                        });
-                      },
-                      checked: allSelected !== undefined ? allSelected : false,
-                      partial: !!partialSelected,
-                      disabled: headerCheckboxDisabled
+                  children: [jsxRuntime.jsx("div", {
+                    className: "ff-table-icon",
+                    children: jsxRuntime.jsx(Icon, {
+                      height: 14,
+                      width: 14,
+                      name: headerIconName,
+                      onClick: headerIconOnClick
                     })
-                  }), column.header]
-                })]
-              }, column.header))
+                  }), jsxRuntime.jsxs(Typography, {
+                    style: column?.width && {
+                      width: column?.width
+                    },
+                    as: "div",
+                    fontWeight: "semi-bold",
+                    className: "ff-label-checkbox-container",
+                    children: [index === 0 && withCheckbox && jsxRuntime.jsx("span", {
+                      className: "ff-table-checkbox",
+                      children: jsxRuntime.jsx(Checkbox, {
+                        onChange: e => {
+                          onSelectClick(e, {
+                            allSelected: e.target.checked
+                          });
+                        },
+                        checked: allSelected !== undefined ? allSelected : false,
+                        partial: !!partialSelected,
+                        disabled: headerCheckboxDisabled
+                      })
+                    }), column.header]
+                  })]
+                }, column.header);
+              })
             })
           }), jsxRuntime.jsxs("tbody", {
             className: "ff-fixed-header-table",
@@ -10115,11 +10144,12 @@ const Table$1 = ({
                   withCheckbox: withCheckbox,
                   onSelectClick: onSelectClick,
                   draggable: draggable,
-                  columnSticky: columnSticky,
                   isAccordionOpen: isOpen,
                   accordionContent: accordionContent,
                   isRowCheckBoxDisable: isRowCheckBoxDisable,
-                  isRowDisabled: isRowDisabled
+                  isRowDisabled: isRowDisabled,
+                  freezeColumns: freezeColumns,
+                  frozenWidth: frozenWidth
                 })
               });
             }), jsxRuntime.jsx("tr", {
@@ -16977,7 +17007,7 @@ const EditLabel = ({
         })]
       })]
     }) : jsxRuntime.jsx(Tooltip, {
-      title: getTooltipTitle(),
+      title: isTextTruncated(text, truncatedTextCount, truncatedType) ? getTooltipTitle() : '',
       placement: tooltip?.tooltipPlacement ?? 'bottom',
       children: jsxRuntime.jsx("span", {
         className: 'ff-add-module-display-text',
@@ -35097,7 +35127,8 @@ const MachineInputField = ({
     edge: 'edge',
     firefox: 'fire_fox',
     chrome: 'chrome_icon',
-    explorer: 'internet_explorer'
+    explorer: 'internet_explorer',
+    ios: 'mac_icon'
   };
   const isManualScript = scriptType.toLowerCase() === 'manual';
   return jsxRuntime.jsxs("div", {
@@ -35125,7 +35156,8 @@ const MachineInputField = ({
       }),
       children: options.map(({
         label,
-        type = 'local'
+        type = 'local',
+        version
       }) => jsxRuntime.jsxs("div", {
         className: classNames('ff-machine-icon-text-wrapper', {
           'ff-machine-icon-text-wrapper-reverse': contentReverse
@@ -35140,8 +35172,17 @@ const MachineInputField = ({
               'ff-machine-text-reverse': contentReverse
             }),
             color: "var(--ff-machine-input-field-text-color)",
-            children: isTextTruncated(label, 15) ? truncateText(label, 15) : label
+            children: isTextTruncated(label, 10) ? truncateText(label, 10) : label
           })
+        }), isManualScript && !checkEmpty(version) && jsxRuntime.jsxs(Tooltip, {
+          title: version,
+          children: ["\u00A0 \u00A0", jsxRuntime.jsx(Typography, {
+            className: classNames('ff-machine-text', {
+              'ff-machine-text-reverse': contentReverse
+            }),
+            color: "var(--ff-machine-input-field-text-color)",
+            children: isTextTruncated(version ?? '', 10) ? truncateText(version ?? '', 10) : version
+          })]
         })]
       }, type))
     })]
@@ -35271,8 +35312,9 @@ const Branches = ({
     const mobileOptions = deviceInfo?.reduce((acc, device, index) => {
       if (device?.name) {
         acc.push({
-          label: scriptType.toLowerCase() === 'manual' ? device?.version : device?.name,
-          type: index === 0 ? 'android' : 'mac'
+          label: device?.name,
+          type: index === 0 ? 'android' : 'mac',
+          version: scriptType?.toLowerCase() === 'manual' ? device?.version : ''
         });
       }
       return acc;
@@ -35758,7 +35800,7 @@ const AttachmentButton = ({
     if (fileInputRef.current?.files) {
       const files = Array.from(fileInputRef.current.files);
       if (files.length > 5) {
-        setFileError('Maximun file(s) can be uploaded: 5');
+        setFileError('Maximum file(s) can be uploaded: 5');
         fileInputRef.current.value = '';
         return;
       }
@@ -41026,7 +41068,6 @@ const Cell = ({
   row,
   column,
   DataViewer,
-  selected,
   active,
   dragging,
   mode,
@@ -41060,13 +41101,15 @@ const Cell = ({
   }, [setCellDimensions, select, dragging, point]);
   React__namespace.useEffect(() => {
     const root = rootRef.current;
-    if (selected && root) {
+    if (!root) return;
+    const updateDimensions = () => {
       setCellDimensions(point, getOffsetRect(root));
-    }
-    if (root && active && mode === 'view') {
-      root.focus();
-    }
-  }, [setCellDimensions, selected, active, mode, point, data]);
+    };
+    updateDimensions();
+    const observer = new ResizeObserver(updateDimensions);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [setCellDimensions, point]);
   if (data && data.DataViewer) {
     DataViewer = data.DataViewer;
   }
@@ -41109,12 +41152,10 @@ const enhance = CellComponent => {
     const mode = useSelector(state => active ? state.mode : 'view');
     const data = useSelector(state => get$1(point, state.model.data));
     const evaluatedData = useSelector(state => get$1(point, state.model.evaluatedData));
-    const selected = useSelector(state => state.selected.has(state.model.data, point));
     const dragging = useSelector(state => state.dragging);
     const copied = useSelector(state => state.copied?.has(point) || false);
     return jsxRuntime.jsx(CellComponent, {
       ...props,
-      selected: selected,
       active: active,
       copied: copied,
       dragging: dragging,
@@ -41143,10 +41184,10 @@ const DataViewer = ({
       return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
     const fileList = JSON.parse(value);
-    return fileList.map((file, index) => {
-      return jsxRuntime.jsxs("div", {
+    return fileList.map(file => {
+      return jsxRuntime.jsx("div", {
         className: "ff-spreadsheet-data-viewer--fileType",
-        children: [index + 1, ". ", file.name]
+        children: file.name.split('*')[0]
       }, file.name);
     });
   };
@@ -41304,9 +41345,6 @@ const ActiveCell = props => {
             const fileLength = selectedFiles?.length + uniqueFiles?.length;
             const extractHeight = fileLength > 0 ? fileLength * 25 : 1;
             const processedFiles = [...existingFiles];
-            if (duplicateCount > 0) {
-              toast.info('Duplicate attachments not allowed within the same row');
-            }
             const uploadPromises = uniqueFiles?.map(async file => {
               try {
                 if (file.name.includes('*')) {
@@ -41428,7 +41466,7 @@ const ActiveCell = props => {
                 inputType: cell?.inputType
               });
               dispatch(setRowHeight(active?.row || 0, extractHeight));
-              setSelectedFiles(processedFiles.map(file => new File([new Blob()], file.name)));
+              setSelectedFiles(processedFiles.map(file => new File([new Blob()], file.name?.split('*')[0] ?? 'default')));
             }
             if (memoryFullCount > 0) {
               toast.info('No memory available to add the file');
@@ -41443,8 +41481,6 @@ const ActiveCell = props => {
             console.error('Upload operation failed:', error);
             toast.error('Operation failed');
           }
-        } else if (duplicateCount > 0) {
-          toast.info('Duplicate attachments not allowed within the same row');
         }
       } else if (actionType === 'DELETE' && cell?.inputType?.type === 'file') {
         try {
@@ -41486,7 +41522,7 @@ const ActiveCell = props => {
               style: cell?.style,
               inputType: cell?.inputType
             });
-            setSelectedFiles(updatedFileDetails?.map(file => new File([new Blob()], file.name)));
+            setSelectedFiles(updatedFileDetails?.map(file => new File([new Blob()], file.name.split('*')[0])));
             toast.success(`${deletedCount} file${deletedCount > 1 ? 's' : ''} deleted successfully`);
           } else if (selected?.length) {
             const validFiles = updatedFileDetails?.filter(file => file.id && file.name);
@@ -41498,7 +41534,7 @@ const ActiveCell = props => {
                 style: cell?.style,
                 inputType: cell?.inputType
               });
-              setSelectedFiles(validFiles.map(file => new File([new Blob()], file.name)));
+              setSelectedFiles(validFiles.map(file => new File([new Blob()], file.name.split('*')[0])));
               toast.error('Failed to delete file(s). Invalid file data detected.');
             } else {
               toast.error('Failed to delete file(s). No valid files removed.');
@@ -41515,13 +41551,24 @@ const ActiveCell = props => {
     }
   };
   const handleClick = e => {
-    const selectedList = e.target.innerText;
-    if (selectedList) {
-      JSON.parse(cell?.value).map(file => {
-        if (file.name === selectedList && props.attachmentAction?.viewAttachment) {
-          props.attachmentAction?.viewAttachment(file.id, file.name);
-        }
-      });
+    const fileElement = e.target.closest('.ff-attachment-files');
+    const isIconClick = e.target.closest('.ff-icon-container, .ff-icon-click, .ff-icon-danger');
+    if (!fileElement || isIconClick || !cell?.value || !props.attachmentAction?.viewAttachment) {
+      console.warn('Missing file element, icon click, cell value, or viewAttachment action');
+      return;
+    }
+    try {
+      const files = JSON.parse(cell.value);
+      const fileElements = fileElement.parentElement?.querySelectorAll('.ff-attachment-files') || [];
+      const fileIndex = Array.from(fileElements).indexOf(fileElement);
+      if (fileIndex === -1 || !files[fileIndex]) {
+        console.error('File index not found or invalid');
+        return;
+      }
+      const file = files[fileIndex];
+      props.attachmentAction.viewAttachment(file.id, file.name?.split('*')[0] ?? 'default');
+    } catch (error) {
+      console.error('Error parsing cell value:', error);
     }
   };
   React__namespace.useEffect(() => {
@@ -41529,11 +41576,13 @@ const ActiveCell = props => {
     if (!hidden && root) {
       root.focus();
       if (cell?.inputType?.type === 'file' && cell?.value) {
-        const parsedFiles = JSON.parse(cell.value).map(file => {
-          const blob = new Blob([]);
-          return new File([blob], file.name);
-        });
-        setSelectedFiles(parsedFiles);
+        try {
+          const parsedFiles = JSON.parse(cell.value).map(file => new File([new Blob()], file.name.split('*')[0] ?? 'default'));
+          setSelectedFiles(parsedFiles);
+        } catch (error) {
+          console.error('Error parsing cell value for files:', error);
+          setSelectedFiles([]);
+        }
       } else {
         setSelectedFiles([]);
       }
@@ -41640,6 +41689,7 @@ const ActiveCell = props => {
       buttonLabel: "+ Attachments",
       buttonVariant: "tertiary",
       deleteButton: true,
+      selectedFileMessage: 'Duplicate attachments not allowed within the same row',
       addAttachmentButton: true,
       isInfoIconRequired: false,
       truncateMaxLimit: dimensions.width - 60
@@ -42249,7 +42299,9 @@ const Spreadsheet = props => {
           clientHeight
         } = target;
         setMaxHeight(Math.min(rootRef.current.clientHeight, clientHeight));
-        showHider && setMaxWidth(Math.min(rootRef.current.clientWidth, clientWidth));
+        if (showHider) {
+          setMaxWidth(Math.min(rootRef.current.clientWidth, clientWidth));
+        }
       }
     }
   });
@@ -47036,15 +47088,9 @@ const TableBody = ({
   // if (checkEmpty(flattenedTreeData)) {
   //   return null;
   // }
-  return jsxRuntime.jsxs("tbody", {
+  return jsxRuntime.jsx("tbody", {
     className: "ff-table-tree-body",
-    children: [jsxRuntime.jsx("div", {
-      style: {
-        position: 'sticky',
-        left: 0
-      },
-      id: "ff-table-tree-first-node"
-    }), addNewRow(flattenedTreeData, newNode ?? {}, rootNode)?.map((node, index) => !node?.hide ? jsxRuntime.jsx(TableRow, {
+    children: addNewRow(flattenedTreeData, newNode ?? {}, rootNode)?.map((node, index) => !node?.hide ? jsxRuntime.jsx(TableRow, {
       node: node,
       columnsData: columnsData,
       selected: selected,
@@ -47063,13 +47109,7 @@ const TableBody = ({
       addModuleInputWidth: addModuleInputWidth,
       addModuleSelectWidth: addModuleSelectWidth,
       disableEditLabelConfirmIcon: disableEditLabelConfirmIcon
-    }, node.key) : null), jsxRuntime.jsx("div", {
-      style: {
-        position: 'sticky',
-        left: 0
-      },
-      id: "ff-table-tree-last-node"
-    })]
+    }, node.key) : null)
   });
 };
 
@@ -47090,7 +47130,6 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
   handleEditFieldError,
   loading = false,
   rootNode,
-  getContentLength,
   pagination = true,
   selectedNode,
   tableHeaderBgColor = 'var(--border-color)',
@@ -47102,130 +47141,167 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
   onScroll,
   disableEditLabelConfirmIcon = false,
   transparentHeader = false,
-  navigateTreeNode = null
+  navigateTreeNode = null,
+  handleRemoveNavigateTreeNode = () => {}
 }, ref) => {
   const [expanding, setExpanding] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(null);
-  const observerRef = React.useRef(null);
-  const containerRef = React.useRef(null); // Reference for scroll container
+  const [scrollDirection, setScrollDirection] = React.useState(null); // this state will help to idenetify the direction during the pagination api call
   const [prevScrollTop, setPrevScrollTop] = React.useState(null);
+  const [prevScrollHeight, setPrevScrollHeight] = React.useState(null);
+  const [maintainScrollPosition, setMaintainScrollPosition] = React.useState(null);
+  const containerRef = React.useRef(null);
   const previousTreeDataRef = React.useRef([]);
-  //new loadMoreAbove function
-  const loadMoreAbove = () => {
-    if (loading || isLoading === 'above') return;
-    console.log('calling above');
-    setIsLoading('above');
+  const scrollPositionRef = React.useRef({
+    lastScrollTop: 0,
+    lastScrollTime: 0,
+    direction: null
+  });
+  const scrollDebounceRef = React.useRef(null);
+  // this is the  Distance from edge to trigger the scroll below and above
+  const scrollThreshold = 128;
+  // this is  loadMore  functions which will the trigger the pagination apis in platform
+  const loadMoreAbove = React.useCallback(() => {
+    if (loading || scrollDirection === 'above') return;
+    setScrollDirection('above');
     setPrevScrollTop(containerRef.current?.scrollTop ?? null);
+    setPrevScrollHeight(containerRef.current?.scrollHeight ?? null);
     loadMore('above');
-  };
-  const loadMoreBelow = () => {
-    if (loading || isLoading === 'below') return;
-    console.log('calling below');
-    setIsLoading('below');
-    // Trigger the loadMore callback for data loading from below
+  }, [loading, scrollDirection, loadMore]);
+  const loadMoreBelow = React.useCallback(() => {
+    if (loading || scrollDirection === 'below') return;
+    setScrollDirection('below');
     loadMore('below');
-  };
-  //new handle Scroll function
+  }, [loading, scrollDirection, loadMore]);
+  // this is  scroll handler
   const handleScroll = React.useCallback(() => {
     const container = containerRef.current;
-    const previousTreeData = previousTreeDataRef.current;
-    if (!loading && container && isLoading === 'above' && previousTreeData.length > 0 && prevScrollTop !== null) {
-      let addedRowsCount = 0;
-      if (getContentLength) {
-        addedRowsCount = getContentLength;
-      } else {
-        for (let i = 0; i < treeData.length; i++) {
-          if (previousTreeData[0] === treeData[i]) break;
-          addedRowsCount++;
-        }
+    if (!container) return;
+    const now = Date.now();
+    const currentScrollTop = container.scrollTop;
+    const scrollHeight = container.scrollHeight;
+    const clientHeight = container.clientHeight;
+    // Determine scroll direction
+    const direction = currentScrollTop > scrollPositionRef.current.lastScrollTop ? 'down' : 'up';
+    scrollPositionRef.current = {
+      lastScrollTop: currentScrollTop,
+      lastScrollTime: now,
+      direction
+    };
+    // Clear any pending debounce
+    if (scrollDebounceRef.current) {
+      clearTimeout(scrollDebounceRef.current);
+    }
+    // Check if we're near the bottom (for loading more below)
+    const nearBottom = scrollHeight - (currentScrollTop + clientHeight) < scrollThreshold;
+    if (direction === 'down' && nearBottom && !loading && !scrollDirection && treeData[treeData.length - 1]?.lastResource !== true) {
+      console.log('Loading more below');
+      scrollDebounceRef.current = setTimeout(() => {
+        loadMoreBelow();
+      }, 150);
+    }
+    // Check if we're near the top (for loading more above)
+    const nearTop = currentScrollTop < scrollThreshold;
+    if (direction === 'up' && nearTop && !loading && !scrollDirection && treeData[0]?.lastResource !== true) {
+      console.log('Loading more above');
+      scrollDebounceRef.current = setTimeout(() => {
+        loadMoreAbove();
+      }, 150);
+    }
+    console.log('hanldeScroll called');
+    // if (onScroll) {
+    //   onScroll();
+    // }
+  }, [loading, scrollDirection, treeData, loadMoreAbove, loadMoreBelow, onScroll]);
+  // Attach scroll event listener for updated first node when we scroll
+  React.useEffect(() => {
+    const scrollDiv = containerRef.current;
+    if (scrollDiv && onScroll) {
+      scrollDiv.addEventListener('scroll', onScroll);
+    }
+    return () => {
+      if (scrollDiv && onScroll) {
+        scrollDiv.removeEventListener('scroll', onScroll);
       }
-      let retries = 0;
-      const maxRetries = 30;
-      const tryRestoreScroll = () => {
-        const allRows = Array.from(container.querySelectorAll('.ff-table-tree-row'));
-        // Total added height of new rows
-        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');
-        }
-      };
-      console.log(`Attempting to restore scroll position after loading more data. Added rows count: ${addedRowsCount}, retries: ${retries}`);
-      // Start scroll adjustment
-      requestAnimationFrame(tryRestoreScroll);
+    };
+  }, [onScroll]);
+  React.useEffect(() => {
+    return () => {
+      if (scrollDebounceRef.current) {
+        clearTimeout(scrollDebounceRef.current);
+      }
+    };
+  }, []);
+  // Handle scroll position restoration after loading
+  React.useLayoutEffect(() => {
+    if (!loading && scrollDirection === 'above' && prevScrollTop !== null && prevScrollHeight !== null) {
+      const container = containerRef.current;
+      if (!container) return;
+      const scrollHeightDiff = container.scrollHeight - prevScrollHeight;
+      if (scrollHeightDiff > 0) {
+        container.scrollTop = prevScrollTop + scrollHeightDiff;
+      }
+      setScrollDirection(null);
+      setPrevScrollTop(null);
+      setPrevScrollHeight(null);
+    } else if (!loading) {
+      setScrollDirection(null);
     }
-  }, [loading, isLoading, treeData, getContentLength, prevScrollTop]);
+  }, [loading, scrollDirection, prevScrollTop, prevScrollHeight]);
+  // Handle navigation to specific nodes
   React.useEffect(() => {
-    const scrollContainer = document.getElementById('ff-table-tree-scroll-container');
-    const lastNode = document.getElementById('ff-table-tree-last-node');
-    const firstNode = document.getElementById('ff-table-tree-first-node');
-    if (!scrollContainer || !lastNode || !firstNode || !treeData?.length || !pagination) return;
-    const isLastResourceBelow = !!treeData[treeData.length - 1]?.lastResource;
-    const isLastResourceAbove = !!treeData[0]?.lastResource;
-    // Clean up old observer before creating a new one
-    observerRef.current?.disconnect();
-    const observerCallback = entries => {
-      entries.forEach(entry => {
-        const nodeId = entry.target.id;
-        const direction = nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
-        console.log('entries', entry);
-        if (entry.isIntersecting) {
-          if (direction === 'below' && !isLastResourceBelow) {
-            console.log('LoadMoreBelow from observer');
-            loadMoreBelow();
-          } else if (direction === 'above' && !isLastResourceAbove) {
-            console.log('LoadMoreAbove from observer');
-            loadMoreAbove();
-          }
-        }
-      });
+    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'
+        });
+      }
+    }
+    return () => {
+      handleRemoveNavigateTreeNode();
     };
-    observerRef.current = new IntersectionObserver(observerCallback, {
-      root: scrollContainer,
-      rootMargin: '30px',
-      threshold: 1
-    });
-    if (!isLastResourceBelow) observerRef.current.observe(lastNode);
-    if (!isLastResourceAbove) observerRef.current.observe(firstNode);
-    if (previousTreeDataRef.current.length === 0) {
-      previousTreeDataRef.current = treeData;
+  }, [navigateTreeNode, treeData]);
+  // Restore scroll position after navigation
+  React.useEffect(() => {
+    if (maintainScrollPosition !== null && !loading && containerRef.current) {
+      containerRef.current.scrollTop = maintainScrollPosition;
+      setMaintainScrollPosition(null);
     }
+  }, [maintainScrollPosition, loading]);
+  // Setup scroll listener
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !pagination) return;
+    container.addEventListener('scroll', handleScroll);
+    // Initial check in case we're already at the bottom/top
+    handleScroll();
     return () => {
-      observerRef.current?.disconnect();
+      container.removeEventListener('scroll', handleScroll);
+      if (scrollDebounceRef.current) {
+        clearTimeout(scrollDebounceRef.current);
+      }
     };
-  }, [treeData, loadMore, isLoading]);
-  // new useLayoutEffect to handle loading state
-  React.useLayoutEffect(() => {
-    if (!loading && isLoading === 'above' && pagination) {
-      const raf = requestAnimationFrame(() => {
-        handleScroll();
-        setIsLoading(null);
-      });
-      return () => {
-        cancelAnimationFrame(raf);
-      };
-    } else if (!loading) {
+  }, [handleScroll, pagination]);
+  // Track previous tree data for scroll restoration
+  React.useEffect(() => {
+    if (treeData.length > 0) {
       previousTreeDataRef.current = treeData;
-      setIsLoading(null);
     }
-    return undefined;
-  }, [loading, onScroll]);
+  }, [treeData]);
   React.useEffect(() => {
     if (!loading && expanding) {
       setExpanding(null);
-      previousTreeDataRef.current = treeData;
     }
   }, [loading]);
   const handleToggleExpand = React.useCallback(node => {
@@ -47233,17 +47309,6 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
     setExpanding(node.key);
     onExpand?.(node);
   }, [onExpand, expanding]);
-  React.useEffect(() => {
-    const scrollDiv = containerRef.current;
-    if (scrollDiv && onScroll) {
-      scrollDiv.addEventListener('scroll', onScroll);
-    }
-    return () => {
-      if (scrollDiv && onScroll) {
-        scrollDiv.removeEventListener('scroll', onScroll);
-      }
-    };
-  }, [onScroll]);
   const handleCheckBoxChange = React.useCallback((e, node) => {
     if (expanding) return;
     onChange?.(e, node);
@@ -47252,18 +47317,6 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
     if (expanding) return;
     onClick?.(e, node);
   }, [onClick, expanding]);
-  React.useEffect(() => {
-    console.log(`Navigating to tree nodeFromUseEffect: ${navigateTreeNode}`);
-    if (navigateTreeNode) {
-      const node = document.getElementById(navigateTreeNode);
-      if (node) {
-        node.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest'
-        });
-      }
-    }
-  }, [navigateTreeNode]);
   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);
@@ -47278,7 +47331,6 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
     children: jsxRuntime.jsx("div", {
       className: `table-scrollable ${treeData.length ? '' : 'table-empty'}`,
       ref: containerRef,
-      id: "ff-table-tree-scroll-container",
       style: {
         '--table-height': treeData.length ? height : 'auto',
         '--frozen-column-width': freezeColumns ? `${frozenWidth}px` : '0px',