@linzjs/step-ag-grid 17.5.1 → 17.5.3

package/dist/GridTheme.scss

@@ -201,12 +201,51 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     background-color: transparent;
   }
   
-  .ag-row-highlight-above::after{
+  .ag-row-highlight-above::after {
+    top:-3px; // moves the top highlight to the position of the bottom highlight
     border-top: 2px dashed lui.$andrea;
-  
+  }
+
+  .ag-row-highlight-above:first-of-type::after {
+    top:0px; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
   }
 
   .ag-row-highlight-below::after {
     border-bottom: 2px dashed lui.$andrea;
   }
+
+  // .ag-header .ag-pinned-left-header:after,
+  // .ag-body-viewport .ag-pinned-left-cols-container:after {
+  //   content: " ";
+  //   height: 100%;
+  //   position: absolute;
+  //   z-index: 1;
+  //   top: 0;
+  //   width: 15px;
+  //   box-shadow: -4px 0px 15px -4px rgba(0, 0, 0, 0.1);
+  //   right: -4px;
+  // }
+  
+  // div:after {
+  //   box-shadow: 15px 0 15px -15px inset;
+  //   right: -15px;
+  // }
+  .ag-pinned-left-header,
+  .ag-pinned-right-header,
+  .ag-pinned-right-cols-container,
+  .ag-pinned-left-cols-container {
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);
+  }
+
+  .ag-pinned-left-header,
+  .ag-pinned-left-cols-container {
+      clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
+  }
+
+  .ag-pinned-right-header,
+  .ag-pinned-right-cols-container {
+    clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
+  }
 }

package/dist/step-ag-grid.cjs.js

@@ -2765,8 +2765,17 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         clientSideRowModel.highlightRowAtPixel(null);
     }, []);
     const onRowDragMove = React.useCallback((event) => {
-        const clientSideRowModel = event.api.getModel();
-        clientSideRowModel.highlightRowAtPixel(event.node, event.y);
+        if (event.overNode && event.node.rowIndex != null) {
+            const clientSideRowModel = event.api.getModel();
+            //position 0 means highlight above, 1 means below
+            const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode);
+            //we don't want to show the row highlight if it wouldn't result in the row moving
+            const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
+            //console.log(targetIndex)
+            if (event.node.rowIndex != targetIndex) {
+                clientSideRowModel.highlightRowAtPixel(event.node, event.y);
+            }
+        }
     }, []);
     const onRowDragEnd = React.useCallback(async (event) => {
         const clientSideRowModel = event.api.getModel();