pixel-react 1.4.7 → 1.4.9

package/src/components/TableTree/TableTree.scss

@@ -1,15 +1,18 @@
 @use '../../assets/styles/fonts';
+
 .ff-tree-container {
   width: 100%;
   font-size: 12px;
   color: var(--brand-color);
   transition: all 0.3s ease;
   @extend .fontSm;
+
   table {
     border-collapse: collapse;
     width: 100%;
     text-align: left;
   }
+
   .ff-toggle-arrow-icon {
     height: 12px;
     width: 12px;
@@ -40,6 +43,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   th {
     vertical-align: middle;
     height: 32px;
@@ -53,8 +57,10 @@
     .ff-action-section {
       display: none;
     }
+
     &:hover {
       background-color: var(--hover-color);
+
       .ff-title-action-container {
         display: flex;
       }
@@ -70,6 +76,7 @@
       display: flex;
       cursor: pointer;
     }
+
     &.ff-folder {
       font-weight: 600;
     }
@@ -77,6 +84,7 @@
     &.ff-file {
       font-weight: 400;
     }
+
     .ff-title {
       display: flex;
       gap: 4px;
@@ -96,12 +104,6 @@
         position: absolute;
         right: 10px;
       }
-
-      // &:hover {
-      //   > .ff-title-action-container {
-      //     display: flex;
-      //   }
-      // }
     }
   }
 
@@ -144,12 +146,25 @@
       height: calc(var(--node-height) / 2);
     }
 
-    // Remove the  lines for root level
+    // Remove the lines for root level
     &[style*='--level: 0']::before,
     &[style*='--level: 0']::after {
       content: none;
     }
   }
+
+  th:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 999;
+    background-color: var(--slider-table-color);
+  }
+  td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 99;
+    background-color: var(--ff-status-card-text-color);
+  }
 }
 
 .ff-title-action-container {

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

@@ -4,6 +4,7 @@ import Button from '../Button';
 import treeData from './data';
 import Icon from '../Icon/Icon';
 import './TableTreeStories.scss';
+import React from 'react';
 
 const meta: Meta<typeof TableTree> = {
   title: 'Components/Table tree',
@@ -19,6 +20,9 @@ type Story = StoryObj<typeof TableTree>;
 
 export const Default: Story = {
   args: {
+    onPagination: (node) => {
+      console.log(node);
+    },
     select: 'radio',
     onChange: (e: any, node: any) => {
       e.preventDefault();
@@ -45,6 +49,43 @@ export const Default: Story = {
         },
       },
 
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
       {
         name: 'Module Path',
         accessor: 'path',

package/src/components/TableTree/TableTree.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // @ts-nocheck
-import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { prepareData } from '../../utils/TableCell/TableCell';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
@@ -36,6 +36,7 @@ interface TableTreeProps {
   ) => void;
   onChange?: (e: any, node: any) => void;
   selected: Array<string>;
+  onPagination?: (node: ObjectProps) => void; // New prop for pagination
 }
 
 const TableTree = ({
@@ -45,10 +46,12 @@ const TableTree = ({
   onClick = () => {},
   onChange,
   selected,
+  onPagination,
 }: TableTreeProps) => {
   const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
     new Set()
   );
+  const triggeredPaginationNodes = useRef(new Set()); // Tracks nodes for which pagination is triggered
 
   useLayoutEffect(() => {
     const defaultExpanded: Set<ObjectProps> = new Set();
@@ -56,10 +59,8 @@ const TableTree = ({
     // Recursive function to add nodes and their children to the expanded set
     const expandNodeRecursively = (node: ObjectProps) => {
       if (node.expanded) {
-        // Add the node to the expanded set
         defaultExpanded.add(node);
 
-        // If the node has children, recursively expand them as well
         if (node.children) {
           node.children.forEach((child: ObjectProps) =>
             expandNodeRecursively(child)
@@ -68,20 +69,18 @@ const TableTree = ({
       }
     };
 
-    // Iterate over the treeData to check which nodes should be expanded
     treeData.forEach((node) => {
       expandNodeRecursively(node);
     });
 
-    // Set the expanded nodes state
     setExpandedNodes(defaultExpanded);
   }, [treeData]);
+
   // Function to calculate total children height
   const calculateTotalChildrenHeight = (node: any): number => {
     if (!node.children || node.children.length === 0) {
       return 1;
     }
-    // Start with 1 for the current node and  node itself is included in the height calculation before considering its children.
     let totalHeight = 1;
     if (expandedNodes.has(node)) {
       node.children.forEach((child: any) => {
@@ -93,30 +92,22 @@ const TableTree = ({
 
   const TreeNode = ({ node, level, isLast }: any) => {
     const nodeRef = useRef<HTMLTableRowElement | null>(null);
+    const lastChildRef = useRef<HTMLTableRowElement | null>(null); // Ref for pagination
     const [nodeHeight, setNodeHeight] = useState<number>(0);
     const [totalChildrenHeight, setTotalChildrenHeight] = useState<number>(0);
 
     const isExpanded = expandedNodes.has(node);
 
-    const handleCheckBoxChange = (e, node) => {
-      if (onChange) {
-        onChange(e, node);
-      }
-    };
-
     useLayoutEffect(() => {
       if (nodeRef.current) {
         const observer = new ResizeObserver(() => {
-          // Update nodeHeight when the size of the element changes
           const currentHeight = nodeRef.current?.offsetHeight || 0;
           setNodeHeight(currentHeight);
 
-          // Calculate total children height
           const childrenHeight = calculateTotalChildrenHeight(node);
           setTotalChildrenHeight(childrenHeight);
         });
 
-        // Start observing the current node
         observer.observe(nodeRef.current);
 
         return () => {
@@ -125,6 +116,30 @@ const TableTree = ({
       }
     }, [isExpanded, node]);
 
+    useEffect(() => {
+      if (!isExpanded || !lastChildRef.current || !onPagination) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (
+            entries[0].isIntersecting &&
+            !triggeredPaginationNodes.current.has(node.key)
+          ) {
+            triggeredPaginationNodes.current.add(node.key); // Mark node as paginated
+            onPagination(node); // Trigger the pagination callback
+          }
+        },
+        {
+          root: null, // Use the viewport as the root
+          threshold: 1.0, // Trigger when fully visible
+        }
+      );
+
+      observer.observe(lastChildRef.current);
+
+      return () => observer.disconnect();
+    }, [isExpanded, onPagination, node]);
+
     const handleToggleExpand = () => {
       setExpandedNodes((prev) => {
         const newExpandedNodes = new Set(prev);
@@ -136,6 +151,13 @@ const TableTree = ({
         return newExpandedNodes;
       });
     };
+
+    const handleCheckBoxChange = (e, node) => {
+      if (onChange) {
+        onChange(e, node);
+      }
+    };
+
     const renderRowData = (columnsData: any) => {
       return columnsData.map((column: any) => {
         if (column.accessor === 'title') {
@@ -166,7 +188,6 @@ const TableTree = ({
                 )}
                 {select === 'radio' && (
                   <RadioButton
-                    // checked={selected.includes(node.key)}
                     name={node.title}
                     value={node.key}
                     onChange={(e) => handleCheckBoxChange(e, node)}
@@ -194,6 +215,23 @@ const TableTree = ({
         }
       });
     };
+
+    const renderTree = (nodes: any, level = 0) => {
+      return nodes.map((childNode: any, index: number) => {
+        const isChildLast = index === nodes.length - 1;
+        const ref = isChildLast ? lastChildRef : null;
+        return (
+          <TreeNode
+            key={childNode.key || index}
+            node={childNode}
+            level={level}
+            isLast={isChildLast}
+            ref={ref}
+          />
+        );
+      });
+    };
+
     return (
       <>
         <tr
@@ -214,7 +252,6 @@ const TableTree = ({
           {renderRowData(columnsData)}
         </tr>
 
-        {/* Render children only if the node is expanded */}
         {isExpanded &&
           !checkEmpty(node?.children) &&
           renderTree(node.children, level + 1)}
@@ -225,7 +262,7 @@ const TableTree = ({
   const renderTree = (nodes: any, level = 0) => {
     return nodes.map((node: any, index: number) => {
       const isLast = index === nodes.length - 1;
-      return <TreeNode key={index} node={node} level={level} isLast={isLast} />;
+      return <TreeNode key={node.key || index} node={node} level={level} isLast={isLast} />;
     });
   };
 

package/src/components/Typography/Typography.scss

@@ -8,7 +8,7 @@
   font-weight: 400;
   src:
     local('Poppins-Regular'),
-    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-Regular.woff2) format('woff2');
 }
 
 @font-face {
@@ -16,7 +16,7 @@
   font-weight: 500;
   src:
     local('Poppins-Medium'),
-    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-Medium.woff2) format('woff2');
 }
 
 @font-face {
@@ -24,7 +24,7 @@
   font-weight: 600;
   src:
     local('Poppins-SemiBold'),
-    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-SemiBold.woff2) format('woff2');
 }
 
 @font-face {
@@ -32,7 +32,7 @@
   font-weight: 700;
   src:
     local('Poppins-Bold'),
-    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+    url(../../fonts/Poppins/Poppins-Bold.woff2) format('woff2');
 }
 
 .ff-text {