@linzjs/step-ag-grid 17.10.0 → 17.12.0

package/dist/GridTheme.scss

@@ -20,6 +20,14 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
         header-height: 40px,
         font-size: calc($grid-base-font-size),
       ),
+      'step-view-list-default.theme-specific': (
+        extend-theme: alpine,
+        row-height: 60px,
+        header-height: 40px,
+        font-size: calc($grid-base-font-size),
+        header-background-color: lui.$iceberg,
+        cell-horizontal-border: none,
+      ),
     ),
 
     input-focus-border-color: lui.$sea,
@@ -52,28 +60,12 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
-  .ag-text-area-input:focus {
-    border-color: lui.$sea;
-  }
-
-  .ag-cell[col-id="selection"] {
-    display: flex; // Fix that when you click below checkbox it doesn't process a click
-  }
 
   // fix alignment of cell content when grabber is present
   .ag-header-cell-comp-wrapper {
     justify-content: end;
   }
 
-  // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
-    height: auto;
-  }
-
-  .ag-row:last-of-type {
-    border-bottom: 1px solid lui.$dew;
-  }
-
   .ag-header-cell {
     font-size: 14px;
     font-weight: 600;
@@ -86,6 +78,28 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     }
   }
 
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 17px;
+    padding-right: 15px;
+  }
+
+  .ag-text-area-input:focus {
+    border-color: lui.$sea;
+  }
+
+  .ag-cell[col-id="selection"] {
+    display: flex; // Fix that when you click below checkbox it doesn't process a click
+  }
+
+  // Fix that when you click below checkbox it doesn't process a click
+  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
+    height: auto;
+  }
+
+  .ag-row:last-of-type {
+    border-bottom: 1px solid lui.$dew;
+  }
+
   .ag-cell-label-container {
     padding: 8px 0;
 
@@ -93,10 +107,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     height: fit-content;
   }
 
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 17px;
-    padding-right: 15px;
-  }
 
   .ag-cell[aria-colindex="1"] {
     padding-left: lui.$unit-rg;
@@ -200,14 +210,14 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     height: 2px;
     background-color: transparent;
   }
-  
+
   .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
+    top:0; // 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 {
@@ -225,7 +235,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   //   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;
@@ -249,3 +259,36 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
   }
 }
+
+.ag-theme-step-view-list-default.theme-specific {
+
+  .ag-header-cell {
+    font-size: 14px;
+    font-weight: 600;
+
+    // fix: Display descender line
+    padding: 0 12px;
+
+    .LuiIcon {
+      fill: lui.$surfie;
+    }
+  }
+
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 32px;
+    padding-right: 12px;
+  }
+
+  .ag-header-group-cell {
+    font-weight: normal;
+    font-size: 22px;
+  }
+
+  .ag-header-cell {
+    font-size: 14px;
+  }
+
+  .ag-row .ag-cell[aria-colindex="1"] {
+    padding-left: 32px;
+  }
+}

package/dist/src/components/Grid.d.ts

@@ -69,6 +69,7 @@ export interface GridProps {
      */
     singleClickEdit?: boolean;
     loading?: boolean;
+    suppressCellFocus?: boolean;
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.

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

@@ -2826,7 +2826,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsxRuntime.jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
-                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave }) })] }));
+                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave, suppressCellFocus: params.suppressCellFocus }) })] }));
 };
 
 const GridPopoverContext = React.createContext({