pixel-react 1.10.7 → 1.10.8

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.8",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/MenuOption/MenuOption.tsx

@@ -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

@@ -118,46 +118,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 +259,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 +274,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

@@ -150,6 +150,7 @@
     .table-row-add-button {
       display: inline-flex;
       z-index: 9999;
+      align-items: center;
     }
     &:hover {
       background-color: var(--hover-color);