@linzjs/step-ag-grid 17.4.6 → 17.4.8

package/dist/GridTheme.scss

@@ -8,13 +8,13 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 @include ag.grid-styles(
   (
     themes: (
-      step-compact: (
+      'step-compact.theme-specific': (
         extend-theme: alpine,
         --ag-row-height: 36px,
         --ag-header-height: 36px,
         --ag-font-size: calc($grid-base-font-size - 2px),
       ),
-      step-default: (
+      'step-default.theme-specific': (
         extend-theme: alpine,
         --ag-row-height: 40px,
         --ag-header-height: 40px,
@@ -47,98 +47,144 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
+.ag-theme-step-default.theme-specific,
+.ag-theme-step-compact.theme-specific {
+  .ag-cell[col-id="selection"] {
+    display: flex; // Fix that when you click below checkbox it doesn't process a click
+  }
 
-.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 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;
+  }
 
-// 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-row:last-of-type {
-  border-bottom: 1px solid lui.$dew;
-}
+  .ag-header-cell {
+    font-size: 14px;
+    font-weight: 600;
+
+    // fix: Display descender line
+    padding: 0 11px;
 
-.ag-header-cell {
-  font-size: 14px;
-  font-weight: 600;
+    .LuiIcon {
+      fill: lui.$surfie;
+    }
+  }
 
-  // fix: Display descender line
-  padding: 0 11px;
+  .ag-cell-label-container {
+    padding: 8px 0;
 
-  .LuiIcon {
-    fill: lui.$surfie;
+    // Help ag-grid to calculate column height in react portal
+    height: fit-content;
   }
-}
 
-.ag-cell-label-container {
-  padding: 8px 0;
+  .ag-header .ag-header-cell[aria-colindex="1"] {
+    padding-left: 17px;
+    padding-right: 15px;
+  }
 
-  // Help ag-grid to calculate column height in react portal
-  height: fit-content;
-}
+  .ag-cell[aria-colindex="1"] {
+    padding-left: lui.$unit-rg;
+  }
 
-.ag-header .ag-header-cell[aria-colindex="1"] {
-  padding-left: 17px;
-  padding-right: 15px;
-}
+  .ag-cell {
+    padding-left: 11px;
+    padding-right: 11px;
+    display: flex;
+    align-items: center;
+  }
 
-.ag-cell[role="gridcell"] {
-  border-right: none;
-  border-left: 1px var(--ag-cell-horizontal-border);
-}
+  .ag-cell-wrap-text {
+    word-break: break-word;
+  }
 
-.ag-cell[aria-colindex="1"] {
-  border-left: 1px solid transparent;
-  padding-left: lui.$unit-rg;
-}
+  .ag-cell.ag-cell-popup-editing,
+  .ag-cell.ag-selected-for-edit,
+  .ag-cell-inline-editing {
+    padding-left: 9px;
+    padding-right: 9px;
+    background: rgb(72 160 244 / 20%);
 
-.ag-cell {
-  padding-left: 11px;
-  padding-right: 11px;
-  display: flex;
-  align-items: center;
-}
+    // These are important, it needs to override ag-grid to work
+    border: 3px solid #48a0f4 !important;
+    border-right: 3px solid #48a0f4 !important;
+  }
 
-.ag-cell-wrap-text {
-  word-break: break-word;
-}
+  .ag-row .ag-cell-data-changed {
+    // ag-grid natively has !important on this style so we have to use it here :(
+    background-color: lightgoldenrodyellow;
+  }
 
-.ag-cell.ag-cell-popup-editing,
-.ag-cell.ag-selected-for-edit,
-.ag-cell-inline-editing {
-  padding-left: 9px;
-  padding-right: 9px;
-  background: rgb(72 160 244 / 20%);
+  .ag-center-cols-clipper {
+    // when using domLayout={"autoHeight"}, ag grid has a default min-height
+    // set to 150px so the !important is necessary here
+    min-height: 40px !important;
+  }
 
-  // These are important, it needs to override ag-grid to work
-  border: 3px solid #48a0f4 !important;
-  border-right: 3px solid #48a0f4 !important;
-}
+  .ag-body-horizontal-scroll-viewport {
+    // It's set to scroll by default, but this causes issues with selecting the last row
+    overflow-x: auto;
+  }
 
-.ag-row .ag-cell-data-changed {
-  // ag-grid natively has !important on this style so we have to use it here :(
-  background-color: lightgoldenrodyellow;
-}
+  .ag-cell {
+    font-weight: 400;
+  }
 
-.ag-center-cols-clipper {
-  // when using domLayout={"autoHeight"}, ag grid has a default min-height
-  // set to 150px so the !important is necessary here
-  min-height: 40px !important;
-}
+  .ag-cell-value {
+    display: flex;
+    align-items: center;
+  }
 
-.ag-body-horizontal-scroll-viewport {
-  // It's set to scroll by default, but this causes issues with selecting the last row
-  overflow-x: auto;
-}
+  .ag-cell .GridCell-editableIcon {
+    fill: lui.$silver;
+    visibility: hidden;
+  }
+
+  .ag-cell:hover .GridCell-editableIcon,
+  .ag-cell.ag-cell-focus .GridCell-editableIcon {
+    visibility: visible;
+  }
+
+  .ag-drag-handle.ag-row-drag {
+    opacity: 0;
 
-.Grid-container .ag-cell {
-  font-weight: 400;
-}
+    .ag-icon-grip {
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239999B3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z' /%3E%3C/svg%3E");
+      background-repeat: no-repeat no-repeat;
+      background-position: center center;
+      background-size: cover;
+      color: transparent;
+    }
+  }
+
+  .ag-row:hover {
+    .ag-drag-handle.ag-row-drag {
+      opacity: 1;
+      transition: opacity 0.2s ease-in-out;
+    }
+  }
+
+  .GridCell-readonly {
+    color: lui.$fuscous;
+  }
+
+  .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
+    visibility: hidden;
+  }
+
+  .ag-cell:hover .Grid-displayWhenCellFocused {
+    visibility: inherit;
+  }
+
+  .ag-cell-wrapper {
+    width: 100%;
+  }
+}

package/dist/index.css

@@ -383,57 +383,6 @@
   padding: 0.375rem 0.75rem;
 }
 
-.ag-cell-value {
-  display: flex;
-  align-items: center;
-}
-
-.ag-cell .GridCell-editableIcon {
-  fill: #beb9b4;
-  visibility: hidden;
-}
-
-.ag-cell:hover .GridCell-editableIcon, .ag-cell.ag-cell-focus .GridCell-editableIcon {
-  visibility: visible;
-}
-
-.ag-drag-handle.ag-row-drag {
-  opacity: 0;
-}
-.ag-drag-handle.ag-row-drag .ag-icon-grip {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239999B3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z' /%3E%3C/svg%3E");
-  background-repeat: no-repeat no-repeat;
-  background-position: center center;
-  background-size: cover;
-  color: transparent;
-}
-
-.ag-row:hover .ag-drag-handle.ag-row-drag {
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.GridFormMessage-container {
-  padding: 4px 8px;
-  max-width: 400px;
-}
-
-.GridCell-readonly {
-  color: #6b6966;
-}
-
-.Grid-container.ag-theme-alpine .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
-  visibility: hidden;
-}
-
-.Grid-container.ag-theme-alpine .ag-cell:hover .Grid-displayWhenCellFocused {
-  visibility: inherit;
-}
-
-.Grid-container.ag-theme-alpine .ag-cell-wrapper {
-  width: 100%;
-}
-
 .flex-col-center {
   display: flex;
   flex-direction: column;
@@ -446,6 +395,11 @@
   align-items: center;
 }
 
+.GridFormMessage-container {
+  padding: 4px 8px;
+  max-width: 400px;
+}
+
 .GridCell-container {
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -2791,7 +2791,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     }, [params]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
                         setInitialContentSize();
                     }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;