@linzjs/step-ag-grid 17.4.5 → 17.4.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "17.4.5",
+  "version": "17.4.7",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/stories/grid/GridDragRow.stories.tsx

@@ -109,7 +109,7 @@ const GridDragRowTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
         columnDefs={columnDefs}
         defaultColDef={{ sortable: false }}
         rowData={rowData}
-        onRowDragEnd={(row, _, targetIndex) => {
+        onRowDragEnd={async (row, _, targetIndex) => {
           alert(`Row ${row.id} request to be moved to index ${targetIndex}.`);
         }}
         rowDragText={(params) => `${params.rowNode?.data.id} - ${params.rowNode?.data.position}`}

package/src/styles/Grid.scss

@@ -15,6 +15,7 @@
   flex: 1;
 }
 
+
 .Grid-sortIsStale {
   span.ag-icon.ag-icon-desc::after {
     content: "*";
@@ -71,60 +72,6 @@
   padding: 0.375rem 0.75rem;
 }
 
-.ag-cell-value {
-  display: flex;
-  align-items: center;
-}
-
-.ag-cell .GridCell-editableIcon {
-  fill: colors.$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;
-
-  .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: colors.$fuscous;
-}
-
-.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;
@@ -137,3 +84,8 @@
   align-items: center;
 }
 
+.GridFormMessage-container {
+  padding: 4px 8px;
+  max-width: 400px;
+}
+

package/src/styles/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/src/utils/testUtil.ts

@@ -1,4 +1,4 @@
-import { waitFor, within } from "@testing-library/react";
+import { act, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { isEqual } from "lodash-es";
 
@@ -21,7 +21,25 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
   await waitFor(async () => {
     expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
   });
-  return await findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
+  //if this is not wrapped in an act console errors are logged during testing
+  let row!: HTMLDivElement;
+  await act(async () => {
+    row = await findQuick<HTMLDivElement>(
+      { tagName: `.ag-center-cols-container div[row-id='${rowId}']:not(:empty)` },
+      within,
+    );
+    const leftCols = await findQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-left-cols-container div[row-id='${rowId}']` },
+      within,
+    );
+    const rightCols = await findQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-right-cols-container div[row-id='${rowId}']` },
+      within,
+    );
+    const combineChildren = [...leftCols.children, ...row.children, ...rightCols.children];
+    row.replaceChildren(...combineChildren);
+  });
+  return row;
 };
 
 export const queryRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement | null> => {