pixel-react 1.10.8 → 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.8",
+  "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':

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 (

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);
 
@@ -152,20 +167,6 @@
       z-index: 9999;
       align-items: center;
     }
-    &: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;
-      }
-    }
 
     &::after {
       content: '';

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;