@linzjs/step-ag-grid 16.0.0 → 17.0.0

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -10,7 +10,12 @@ import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridContextProvider, GridFormEditBearing, GridPopoverEditBearingCorrectionEditorParams } from "../../..";
+import {
+  GridContextProvider,
+  GridFormEditBearing,
+  GridFormEditBearingProps,
+  GridPopoverEditBearingCorrectionEditorParams,
+} from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -20,7 +25,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -10,7 +10,12 @@ import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridContextProvider, GridFormEditBearing, GridPopoverEditBearingEditorParams } from "../../..";
+import {
+  GridContextProvider,
+  GridFormEditBearing,
+  GridFormEditBearingProps,
+  GridPopoverEditBearingEditorParams,
+} from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -20,7 +25,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -34,7 +34,7 @@ const onSave = jest
 const onSelectFilter = jest.fn();
 
 let options: MultiSelectGridOption[] = [];
-const Template: ComponentStory<typeof GridFormMultiSelectGrid> = (props) => {
+const Template: ComponentStory<typeof GridFormMultiSelectGrid> = (props: GridFormMultiSelectGridProps<any>) => {
   options = [
     { label: "Zero", value: 0 },
     { label: "One", value: 1 },

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.stories.tsx

@@ -34,7 +34,7 @@ const onSave = jest.fn<Promise<boolean>, [GridFormMultiSelectSaveProps<any>]>().
 const onSelectFilter = jest.fn();
 
 let options: MultiSelectOption[] = [];
-const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
+const Template: ComponentStory<typeof GridFormMultiSelect> = (props: GridFormMultiSelectProps<any>) => {
   options = [
     { label: "Zero", value: 0 },
     { label: "One", value: 1 },
@@ -145,7 +145,7 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   // Test invalid value doesn't save
   updateValue.mockClear();
   onSave.mockClear();
-  userEvent.clear(textInput);
+  await userEvent.clear(textInput);
   await userEvent.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
   expect(onSave).not.toHaveBeenCalled();

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -14,6 +14,7 @@ import {
   GridBaseRow,
   GridContextProvider,
   GridFormPopoverMenu,
+  GridFormPopoverMenuProps,
   GridFormSubComponentTextArea,
   GridFormSubComponentTextInput,
   PopoutMenuSeparator,
@@ -40,7 +41,7 @@ const disabledAction = jest
   .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
   .mockResolvedValue(undefined);
 
-const Template: ComponentStory<typeof GridFormPopoverMenu> = (props) => {
+const Template: ComponentStory<typeof GridFormPopoverMenu> = (props: GridFormPopoverMenuProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -137,7 +138,7 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.clear(textInput);
+  await userEvent.clear(textInput);
   await userEvent.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
 
@@ -169,7 +170,7 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.clear(textArea);
+  await userEvent.clear(textArea);
   await userEvent.type(textArea, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
 };

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.stories.tsx

@@ -10,7 +10,7 @@ import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridContextProvider, GridFormTextArea } from "../../..";
+import { GridContextProvider, GridFormTextArea, GridFormTextAreaProps } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -20,7 +20,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormTextArea> = (props) => {
+const Template: ComponentStory<typeof GridFormTextArea> = (props: GridFormTextAreaProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -71,7 +71,7 @@ GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.clear(inputField);
+  await userEvent.clear(inputField);
 
   expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
   await userEvent.tab();

package/src/stories/grid/gridFormInteraction/GridFormTextInputInteraction.stories.tsx

@@ -10,7 +10,7 @@ import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridContextProvider, GridFormTextInput } from "../../..";
+import { GridContextProvider, GridFormTextInput, GridFormTextInputProps } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -20,7 +20,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormTextInput> = (props) => {
+const Template: ComponentStory<typeof GridFormTextInput> = (props: GridFormTextInputProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -76,7 +76,7 @@ GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.clear(inputField);
+  await userEvent.clear(inputField);
 
   expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
   await userEvent.type(inputField, "{Enter}");

package/src/stories/grid/gridFormStatic/GridFormDropDown.stories.tsx

@@ -16,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormDropDown>;
 
-const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
+const Template: ComponentStory<typeof GridFormDropDown> = (props: GridFormDropDownProps<any>) => {
   const configs: [string, GridFormDropDownProps<GridBaseRow>, string?][] = [
     ["No options", { options: [] }],
     ["Custom no options", { options: [], noOptionsMessage: "Custom no options" }],

package/src/stories/grid/gridFormStatic/GridFormEditBearing.stories.tsx

@@ -21,7 +21,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const values: [string, GridFormEditBearingProps<any>, number | null][] = [
     ["Null value", {}, null],
     ["Custom placeholder", { placeHolder: "Custom placeholder" }, null],

package/src/stories/grid/gridFormStatic/GridFormEditBearingCorrection.stories.tsx

@@ -21,7 +21,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const values: [string, GridFormEditBearingProps<any>, number | null][] = [
     ["Null value", {}, null],
     ["Custom placeholder", { placeHolder: "Custom placeholder" }, null],

package/src/stories/grid/gridFormStatic/GridFormMessage.stories.tsx

@@ -8,7 +8,7 @@ import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridContextProvider, GridFormMessage } from "../../..";
+import { GridContextProvider, GridFormMessage, GridFormMessageProps } from "../../..";
 
 export default {
   title: "GridForm / Static Tests",
@@ -16,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormMessage>;
 
-const Template: ComponentStory<typeof GridFormMessage> = (props) => {
+const Template: ComponentStory<typeof GridFormMessage> = (props: GridFormMessageProps<any>) => {
   const anchorRef1 = useRef<HTMLHeadingElement>(null);
 
   return (

package/src/stories/grid/gridFormStatic/GridFormTextArea.stories.tsx

@@ -16,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormTextArea>;
 
-const Template: ComponentStory<typeof GridFormTextArea> = (props) => {
+const Template: ComponentStory<typeof GridFormTextArea> = (props: GridFormTextAreaProps<any>) => {
   const configs: [string, GridFormTextAreaProps<GridBaseRow>, string?][] = [
     ["Text area", {}],
     ["Text area with text", {}, "Some text"],

package/src/stories/grid/gridFormStatic/GridFormTextInput.stories.tsx

@@ -16,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormTextInput>;
 
-const Template: ComponentStory<typeof GridFormTextInput> = (props) => {
+const Template: ComponentStory<typeof GridFormTextInput> = (props: GridFormTextInputProps<any>) => {
   const configs: [string, GridFormTextInputProps<GridBaseRow>, string?][] = [
     ["Text input", {}],
     ["Text input with text", {}, "Some text"],

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -225,6 +225,10 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
   multiEditAction.mockReset();
   eAction.mockReset();
 
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+
   // Ensure first row/cell is selected on render
   await waitFor(async () => {
     const activeCell = canvasElement.ownerDocument.activeElement;

package/src/styles/ComponentLoadingWrapper.scss

@@ -1,9 +1,6 @@
 .ComponentLoadingWrapper-saveOverlay {
   position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0;
   background-color: rgb(64 64 64 / 10%);
   z-index: 1000;
 }

package/src/styles/Grid.scss

@@ -94,10 +94,6 @@
   color: colors.$fuscous;
 }
 
-.Grid-container.ag-theme-alpine .ag-cell {
-  font-weight: 400;
-}
-
 .Grid-container.ag-theme-alpine .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
   visibility: hidden;
 }

package/src/styles/GridTheme.scss

@@ -1,106 +1,138 @@
-@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
-
-// These break if we use urls so ignore stylelint
-/* stylelint-disable-next-line */
-@import "ag-grid-community/src/styles/ag-grid";
-/* stylelint-disable-next-line */
-@import "ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
-
-.ag-theme-alpine {
-  // AG Grid themes can be customized using theme parameters, which are arguments that change its appearance. Refer to
-  // https://www.ag-grid.com/javascript-data-grid/themes-customising/#full-list-of-theme-parameters for a full list of
-  // the available theme parameters, which should be used whenever possible.
-  @include ag-theme-alpine(
-    (
-      alpine-active-color: lui.$sea,
-      foreground-color: lui.$charcoal,
-      data-color: lui.$charcoal,
-      // ag-grid-community >=28
-      selected-row-background-color: lui.$polar,
-      header-foreground-color: lui.$surfie,
-      background-color: lui.$white,
-      odd-row-background-color: lui.$white,
-      header-background-color: lui.$white,
-      border-color: lui.$lily,
-      secondary-border-color: lui.$lily,
-      cell-horizontal-border: solid ag-derived(secondary-border-color),
-      cell-horizontal-padding: 12,
-      row-hover-color: lui.$hint,
-      font-family: (
-        "Open Sans",
-        system-ui,
-        sans-serif,
-      ),
-      font-size: 1rem !important,
-      borders: false,
-      borders-critical: true,
-      borders-secondary: false,
-    )
-  );
-
-  // 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
-  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
-    height: auto;
-  }
-
-  .ag-row:last-of-type {
-    border-bottom: 1px solid lui.$lily;
-  }
-
-  // ag-grid-community 27.x.x needs this vs 28 using the selected-row-background-color above
-  // You can set a background _color_ with theme parameters, but for something like a gradient, you need to override CSS.
-  .ag-row-selected {
-    background-color: lui.$polar;
-  }
-
-  .ag-header-cell {
-    font-weight: 600;
-    padding: 7px 11px;
-
-    .LuiIcon {
-      fill: lui.$surfie;
-    }
-  }
-
-  .ag-cell {
-    padding-left: 11px;
-    padding-right: 11px;
-    display: flex;
-    align-items: center;
-  }
-
-  .ag-cell-wrap-text {
-    word-break: break-word;
-  }
-
-  .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%);
-    // These are important, it needs to override ag-grid to work
-    border: 3px solid #48a0f4 !important;
-    border-right: 3px solid #48a0f4 !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 !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-body-horizontal-scroll-viewport {
-    // It's set to scroll by default, but this causes issues with selecting the last row
-    overflow-x: auto;
-  }
-}
+@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "node_modules/ag-grid-community/styles" as ag;
+
+// ag-grid likes to add 1px to this, so we subtract to compensate
+$grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
+
+// GridTheme that support ag-grid v29 new SASS API
+@include ag.grid-styles(
+  (
+    themes: (
+      step-compact: (
+        extend-theme: alpine,
+        --ag-row-height: 36px,
+        --ag-header-height: 36px,
+        --ag-font-size: calc($grid-base-font-size - 2px),
+      ),
+      step-default: (
+        extend-theme: alpine,
+        --ag-row-height: 40px,
+        --ag-header-height: 40px,
+        --ag-font-size: calc($grid-base-font-size),
+      ),
+    ),
+
+    alpine-active-color: lui.$sea,
+    background-color: lui.$white,
+    border-color: lui.$dew,
+    borders: false,
+    borders-critical: true,
+    borders-secondary: false,
+    cell-horizontal-border: solid lui.$dew,
+    cell-horizontal-padding: lui.$unit-sm,
+    data-color: lui.$charcoal,
+    foreground-color: lui.$charcoal,
+    font-family: (
+      "Open Sans",
+      system-ui,
+      sans-serif,
+    ),
+    font-size: 1rem,
+    header-background-color: lui.$white,
+    header-foreground-color: lui.$surfie,
+    odd-row-background-color: lui.$white,
+    row-hover-color: lui.$hint,
+    secondary-border-color: lui.$dew,
+    selected-row-background-color: lui.$polar,
+  )
+);
+
+// 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
+.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;
+
+  // fix: Display descender line
+  padding: 0 11px;
+
+  .LuiIcon {
+    fill: lui.$surfie;
+  }
+}
+
+.ag-cell-label-container {
+  padding: 8px 0;
+
+  // Help ag-grid to calculate column height in react portal
+  height: fit-content;
+}
+
+.ag-header .ag-header-cell[aria-colindex="1"] {
+  padding-left: lui.$unit-rg;
+}
+
+.ag-cell[role="gridcell"] {
+  border-right: none;
+  border-left: 1px var(--ag-cell-horizontal-border);
+}
+
+.ag-cell[aria-colindex="1"] {
+  border-left: none;
+  padding-left: lui.$unit-rg;
+}
+
+.ag-cell {
+  padding-left: 11px;
+  padding-right: 11px;
+  display: flex;
+  align-items: center;
+}
+
+.ag-cell-wrap-text {
+  word-break: break-word;
+}
+
+.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%);
+
+  // These are important, it needs to override ag-grid to work
+  border: 3px solid #48a0f4 !important;
+  border-right: 3px solid #48a0f4 !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-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-body-horizontal-scroll-viewport {
+  // It's set to scroll by default, but this causes issues with selecting the last row
+  overflow-x: auto;
+}
+
+.Grid-container .ag-cell {
+  font-weight: 400;
+}

package/src/utils/testUtil.ts

@@ -18,6 +18,9 @@ export const countRows = async (within?: HTMLElement): Promise<number> => {
 };
 
 export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
+  await waitFor(async () => {
+    expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
+  });
   return await findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
 };
 

package/src/utils/textValidator.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from "react";
+
 import { GridBaseRow } from "../components/Grid";
 import { isFloat, stringByteLengthIsInvalid } from "./util";
 
@@ -5,7 +7,7 @@ export interface TextInputValidatorProps<RowType extends GridBaseRow> {
   required?: boolean;
   maxLength?: number;
   maxBytes?: number;
-  invalid?: (value: string, data: RowType, context: any) => JSX.Element | string | null;
+  invalid?: (value: string, data: RowType, context: any) => ReactElement | string | null;
   numberFormat?: {
     precision?: number;
     scale?: number;