pixel-react 1.13.93 → 1.13.95

package/lib/index.cjs

@@ -16977,7 +16977,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 +35097,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", {
@@ -35769,7 +35770,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;
       }
@@ -41037,7 +41038,6 @@ const Cell = ({
   row,
   column,
   DataViewer,
-  selected,
   active,
   dragging,
   mode,
@@ -41071,13 +41071,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;
   }
@@ -41120,12 +41122,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,
@@ -41154,10 +41154,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);
     });
   };
@@ -41315,9 +41315,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('*')) {
@@ -41439,7 +41436,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');
@@ -41454,8 +41451,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 {
@@ -41497,7 +41492,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);
@@ -41509,7 +41504,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.');
@@ -41526,13 +41521,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(() => {
@@ -41540,11 +41546,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([]);
       }
@@ -41651,6 +41659,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
@@ -42260,7 +42269,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));
+        }
       }
     }
   });
@@ -47047,15 +47058,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,
@@ -47074,13 +47079,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)
   });
 };
 
@@ -47101,7 +47100,6 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
   handleEditFieldError,
   loading = false,
   rootNode,
-  getContentLength,
   pagination = true,
   selectedNode,
   tableHeaderBgColor = 'var(--border-color)',
@@ -47113,130 +47111,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 => {
@@ -47244,17 +47279,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);
@@ -47263,18 +47287,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);
@@ -47289,7 +47301,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',