@linzjs/step-ag-grid 17.4.5 → 17.4.7

package/dist/GridTheme.scss

@@ -47,98 +47,150 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
+.ag-theme-step-default,
+.ag-theme-step-compact {
+  .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[role="gridcell"] {
+    border-right: none;
+    border-left: 1px var(--ag-cell-horizontal-border);
+  }
 
-.ag-header .ag-header-cell[aria-colindex="1"] {
-  padding-left: 17px;
-  padding-right: 15px;
-}
+  .ag-cell[aria-colindex="1"] {
+    border-left: 1px solid transparent;
+    padding-left: lui.$unit-rg;
+  }
 
-.ag-cell[role="gridcell"] {
-  border-right: none;
-  border-left: 1px var(--ag-cell-horizontal-border);
-}
+  .ag-cell {
+    padding-left: 11px;
+    padding-right: 11px;
+    display: flex;
+    align-items: center;
+  }
 
-.ag-cell[aria-colindex="1"] {
-  border-left: 1px solid transparent;
-  padding-left: lui.$unit-rg;
-}
+  .ag-cell-wrap-text {
+    word-break: break-word;
+  }
 
-.ag-cell {
-  padding-left: 11px;
-  padding-right: 11px;
-  display: flex;
-  align-items: center;
-}
+  .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-wrap-text {
-  word-break: break-word;
-}
+    // These are important, it needs to override ag-grid to work
+    border: 3px solid #48a0f4 !important;
+    border-right: 3px solid #48a0f4 !important;
+  }
 
-.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-row .ag-cell-data-changed {
+    // ag-grid natively has !important on this style so we have to use it here :(
+    background-color: lightgoldenrodyellow;
+  }
 
-  // These are important, it needs to override ag-grid to work
-  border: 3px solid #48a0f4 !important;
-  border-right: 3px solid #48a0f4 !important;
-}
+  .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-row .ag-cell-data-changed {
-  // ag-grid natively has !important on this style so we have to use it here :(
-  background-color: lightgoldenrodyellow;
-}
+  .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-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 {
+    font-weight: 400;
+  }
 
-.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-value {
+    display: flex;
+    align-items: center;
+  }
+
+  .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

@@ -25593,7 +25593,16 @@ const findRow = async (rowId, within) => {
     await waitForWrapper(async () => {
         expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
     });
-    return await findQuick({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
+    //if this is not wrapped in an act console errors are logged during testing
+    let row;
+    await act(async () => {
+        row = await findQuick({ tagName: `.ag-center-cols-container div[row-id='${rowId}']:not(:empty)` }, within);
+        const leftCols = await findQuick({ tagName: `.ag-pinned-left-cols-container div[row-id='${rowId}']` }, within);
+        const rightCols = await findQuick({ tagName: `.ag-pinned-right-cols-container div[row-id='${rowId}']` }, within);
+        const combineChildren = [...leftCols.children, ...row.children, ...rightCols.children];
+        row.replaceChildren(...combineChildren);
+    });
+    return row;
 };
 const queryRow = async (rowId, within) => {
     return queryQuick({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);