pixel-react 1.10.10-0 → 1.10.10-2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.10.10-00",
+  "version": "1.10.10-2",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -81,7 +81,7 @@ interface ExcelFileProps {
   /**
    * Delay time (in milliseconds) before the onSave callback is executed.
    */
-  onSaveDelay: number;
+  onSaveDelay?: number;
 
   /**
    * Optional: Sets the vertical (Y-axis) positioning of the context menu.

package/src/components/TableTree/Components/TableCell.tsx

@@ -19,7 +19,7 @@ const renderSpaces = (
     isLastNode = false;
 
     if (!isNaN(level)) {
-      siblingsArray = Array(level).fill(true);
+      siblingsArray = Array(level - 1).fill(true);
     }
   }
 
@@ -97,8 +97,8 @@ const TableCell = React.memo(
               {col.isTree && select === 'radio' && (
                 <RadioButton
                   name={node.title}
-                  checked={selected.includes(node.id)}
-                  value={node.id}
+                  checked={selected.includes(node.key)}
+                  value={node.key}
                   onChange={(e) => onCheckBoxChange(e, node)}
                 />
               )}

package/src/components/TableTree/TableTree.stories.tsx

@@ -205,6 +205,7 @@ export const Default: Story = {
 export const ControlledCheckBox: Story = {
   render: () => {
     const [selected, setSelected] = useState<string[]>([]);
+
     return (
       <TableTree
         height={100}

package/src/components/TableTree/TableTree.tsx

@@ -22,7 +22,9 @@ const TreeTable: React.FC<TreeTableProps> = ({
   onAddCancel = () => {},
 }) => {
   const observerRef = useRef<IntersectionObserver | null>(null);
-  const triggeredNodesRef = useRef<Set<string>>(new Set()); // Track already triggered nodes
+  const isTriggeredAbove = useRef(false); // Track if pagination for "above" direction has been triggered
+  const isTriggeredBelow = useRef(false); // Track if pagination for "below" direction has been triggered
+  const isTriggeredOnce = useRef(false); // Ensure 2-second delay triggers only once
 
   // Throttled version of loadMore
   const throttledLoadMore = useRef(
@@ -42,9 +44,10 @@ const TreeTable: React.FC<TreeTableProps> = ({
     if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
       return;
 
-    const isLastResourceAbove = treeData[0]?.lastResource;
-    const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
+    const isLastResourceAbove = !!treeData[0]?.lastResource;
+    const isLastResourceBelow = !!treeData[treeData.length - 1]?.lastResource;
 
+    // Skip pagination if both last resources are present
     if (isLastResourceAbove && isLastResourceBelow) return;
 
     const observerCallback = (entries: IntersectionObserverEntry[]) => {
@@ -54,17 +57,18 @@ const TreeTable: React.FC<TreeTableProps> = ({
           nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
 
         if (entry.isIntersecting) {
-          if (
-            !triggeredNodesRef.current.has(nodeId) &&
-            ((direction === 'above' && !isLastResourceAbove) ||
-              (direction === 'below' && !isLastResourceBelow))
-          ) {
-            triggeredNodesRef.current.add(nodeId);
-            throttledLoadMore(direction);
+          // Trigger only once for each direction
+          if (direction === 'above' && !isTriggeredAbove.current) {
+            if (!isLastResourceAbove) {
+              throttledLoadMore(direction);
+              isTriggeredAbove.current = true;
+            }
+          } else if (direction === 'below' && !isTriggeredBelow.current) {
+            if (!isLastResourceBelow) {
+              throttledLoadMore(direction);
+              isTriggeredBelow.current = true;
+            }
           }
-        } else {
-          // Remove node from triggered set when it goes out of view
-          triggeredNodesRef.current.delete(nodeId);
         }
       });
     };
@@ -75,8 +79,40 @@ const TreeTable: React.FC<TreeTableProps> = ({
       threshold: 0.1,
     });
 
-    if (!isLastResourceAbove) observerRef.current.observe(firstNode);
-    if (!isLastResourceBelow) observerRef.current.observe(lastNode);
+    // Initial pagination trigger after 2 seconds if first or last node is in view inside the scroll container
+    const checkInitialPaginationTrigger = () => {
+      if (isTriggeredOnce.current) return;
+
+      const scrollContainerRect = scrollContainer.getBoundingClientRect();
+      const firstNodeRect = firstNode?.getBoundingClientRect();
+      const lastNodeRect = lastNode?.getBoundingClientRect();
+
+      // Check if the first node is inside the scroll container
+      const isFirstNodeInView =
+        firstNodeRect &&
+        firstNodeRect.top >= scrollContainerRect.top &&
+        firstNodeRect.bottom <= scrollContainerRect.bottom;
+
+      // Check if the last node is inside the scroll container
+      const isLastNodeInView =
+        lastNodeRect &&
+        lastNodeRect.top >= scrollContainerRect.top &&
+        lastNodeRect.bottom <= scrollContainerRect.bottom;
+
+      if (isFirstNodeInView || isLastNodeInView) {
+        isTriggeredOnce.current = true;
+        setTimeout(() => {
+          if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
+          if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
+        }, 2000); // Delay the first pagination trigger by 2 seconds
+      } else {
+        // Observe first and last node immediately
+        if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
+        if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
+      }
+    };
+
+    checkInitialPaginationTrigger();
 
     return () => {
       observerRef.current?.disconnect();