pixel-react 1.10.7 → 1.10.9

package/package.json

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

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx

@@ -33,7 +33,6 @@ const ArrowsButton = ({
             iconButtonSize={24}
             iconButtonBorderRadius={3}
             onOptionClick={() => {}}
-            targetRef={menuOptionRef}
             treeRowRef={treeRowRef}
           />
         </span>

package/src/components/MenuOption/MenuOption.tsx

@@ -52,7 +52,7 @@ const calculatePosition = (
     left,
     right: window.innerWidth - (left + width),
   };
-  const gap = 8; // Required gap
+  const gap = 0;
 
   switch (dropdownPlacement) {
     case 'top':
@@ -150,13 +150,13 @@ const MenuOption = ({
   useEffect(() => {
     if (targetRef) {
       const parentDom = getAnchorElement(targetRef);
-      parentDom?.classList.toggle('ff-menu-parent-hover', isClicked);
+      parentDom?.classList.toggle('hover', isClicked);
     }
 
     return () => {
       if (targetRef) {
         const parentDom = getAnchorElement(targetRef);
-        parentDom?.classList.remove('ff-menu-parent-hover');
+        parentDom?.classList.remove('hover');
       }
     };
   }, [isClicked, targetRef]);

package/src/components/Table/Table.scss

@@ -41,6 +41,20 @@
   }
 
   tbody {
+    tr:hover,
+    tr.hover {
+      background-color: var(--hover-color);
+
+      .icon-container {
+        opacity: 1;
+        transform: translateX(0);
+      }
+
+      .ff-table-drag,
+      .ff-table-drag-icon {
+        opacity: 1;
+      }
+    }
     tr {
       .action-column {
         opacity: 0;
@@ -75,20 +89,6 @@
         }
       }
 
-      &:hover {
-        background-color: var(--hover-color);
-
-        .icon-container {
-          opacity: 1;
-          transform: translateX(0);
-        }
-
-        .ff-table-drag,
-        .ff-table-drag-icon {
-          opacity: 1;
-        }
-      }
-
       td {
         position: relative;
         color: var(--table-column-text-color);
@@ -148,4 +148,4 @@
 tbody tr.disabled-row {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}

package/src/components/Table/Table.tsx

@@ -40,14 +40,16 @@ const SortableRow = ({
     transform: CSS.Transform.toString(transform),
     transition,
   };
+  const key = row._id || row.id;
   return (
     <tr
       ref={setNodeRef}
       style={style}
-      key={row._id || row.id}
+      key={key}
       className={classNames(tableBodyRowClass, {
         'disabled-row': row.disabled,
       })}
+      id={key}
     >
       {columns.map((column: any, index: number) => {
         return (
@@ -118,46 +120,45 @@ const Table = ({
   onDragEnd,
   loadMore = () => {},
 }: TableProps) => {
-
   const observerRef = useRef<IntersectionObserver | null>(null);
-  
-    useEffect(() => {
-      const scrollContainer = document.getElementById(
-        'ff-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
-      if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
-        return;
+
+  useEffect(() => {
+    const scrollContainer = document.getElementById(
+      'ff-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
+    if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
+      return;
+    }
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const direction =
+              entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
+            loadMore(direction);
+          }
+        });
+      },
+      {
+        root: scrollContainer,
+        rootMargin: '8px',
+        threshold: 0.1,
       }
-  
-      observerRef.current = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              const direction =
-                entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
-              loadMore(direction);
-            }
-          });
-        },
-        {
-          root: scrollContainer,
-          rootMargin: '8px',
-          threshold: 0.1,
-        }
-      );
-  
-      observerRef.current.observe(firstNode);
-      observerRef.current.observe(lastNode);
-  
-      return () => {
-        // Cleanup observer
-        observerRef.current?.disconnect();
-      };
-    }, [data, loadMore]);
+    );
+
+    observerRef.current.observe(firstNode);
+    observerRef.current.observe(lastNode);
+
+    return () => {
+      // Cleanup observer
+      observerRef.current?.disconnect();
+    };
+  }, [data, loadMore]);
 
   const handleOnclick = (column: ColumnsProps, row: DataProps) => {
     let { onClick, accessor } = column;
@@ -260,7 +261,7 @@ const Table = ({
               </tr>
             </thead>
             <tbody className="ff-fixed-header-table">
-            <tr id="ff-table-first-node" />
+              <tr id="ff-table-first-node" />
               {data?.length > 0 &&
                 data?.map((row: any) => (
                   <SortableRow
@@ -275,8 +276,7 @@ const Table = ({
                     draggable={draggable}
                   />
                 ))}
-                      <tr id="ff-table-last-node" />
-
+              <tr id="ff-table-last-node" />
             </tbody>
           </table>
           {data?.length <= 0 && (

package/src/components/TableTree/TableTree.scss

@@ -140,6 +140,21 @@
     z-index: 2;
   }
 
+  .ff-table-tree-row:hover,
+  .ff-table-tree-row.hover {
+    background-color: var(--hover-color);
+
+    .ff-table-tree-td {
+      &:first-child {
+        background-color: var(--hover-color);
+      }
+    }
+
+    .table-tree-row-action {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
   .ff-table-tree-row {
     background-color: var(--base-bg-color);
 
@@ -150,20 +165,7 @@
     .table-row-add-button {
       display: inline-flex;
       z-index: 9999;
-    }
-    &:hover {
-      background-color: var(--hover-color);
-
-      .ff-table-tree-td {
-        &:first-child {
-          background-color: var(--hover-color);
-        }
-      }
-
-      .table-tree-row-action {
-        display: inline-flex;
-        align-items: center;
-      }
+      align-items: center;
     }
 
     &::after {

package/src/utils/TableCell/TableCell.ts

@@ -1,10 +1,13 @@
 export const prepareData = (dataObj: any, columnObj: any) => {
   let cellData = dataObj[columnObj.accessor];
   if (columnObj.cell) {
+    const refId = dataObj._id || dataObj.id;
+
     return columnObj.cell({
       value: cellData,
       row: dataObj,
       column: columnObj.accessor,
+      ...(refId && { refId }),
     });
   } else if (columnObj.accessor) {
     return cellData;