@linzjs/step-ag-grid 15.1.3 → 17.0.0

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

@@ -1,10 +1,13 @@
+import "../../../styles/GridTheme.scss";
+import "../../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { userEvent, waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -21,8 +24,6 @@ import {
   MenuOption,
   wait,
 } from "../../../";
-import "../../../styles/GridTheme.scss";
-import "../../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
@@ -34,6 +35,14 @@ export default {
     selectable: false,
     rowSelection: "single",
   },
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ width: 1024, height: 400 }}>
@@ -216,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;
@@ -223,14 +236,14 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
     expect(activeCell).toHaveAttribute("aria-colindex", "1");
     expect(activeCell?.parentElement).toHaveAttribute("row-index", "0");
   });
-  userEvent.keyboard("{arrowdown}{arrowdown}");
-  userEvent.keyboard("{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}");
+  await userEvent.keyboard("{arrowdown}{arrowdown}");
+  await userEvent.keyboard("{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}");
 
   // Test enter post focus
   const test = async (fn: () => any, colId: string, rowId: string) => {
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
     await wait(1000);
-    userEvent.keyboard("{arrowdown}{arrowdown}");
+    await userEvent.keyboard("{arrowdown}{arrowdown}");
     fn();
     await waitFor(async () => {
       expect(multiEditAction).toHaveBeenCalled();
@@ -247,16 +260,16 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
 
   await test(() => userEvent.keyboard("{Enter}"), "8", "2");
   await test(() => userEvent.tab(), "9", "2");
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   await test(() => userEvent.tab({ shift: true }), "6", "2");
-  userEvent.keyboard("{Esc}");
-  userEvent.tab();
+  await userEvent.keyboard("{Esc}");
+  await userEvent.tab();
 
-  userEvent.keyboard("{Enter}");
+  await userEvent.keyboard("{Enter}");
   await wait(250);
   expect(eAction).not.toHaveBeenCalled();
 
-  userEvent.keyboard("e");
+  await userEvent.keyboard("e");
   await waitFor(async () => {
     expect(eAction).toHaveBeenCalled();
   });

package/src/stories/react-menu/ReactMenu.stories.tsx

@@ -1,3 +1,5 @@
+import "../../react-menu3/styles/index.scss";
+
 import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { userEvent, within } from "@storybook/testing-library";
@@ -42,7 +44,7 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
   const keyboard = async (key: string) => {
-    userEvent.keyboard(key);
+    await userEvent.keyboard(key);
     await wait(100); // Wait for debounce
   };
 
@@ -51,13 +53,13 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
 
   const openMenu = async () => {
     await wait(500); // Wait for debounce
-    userEvent.click(menuButton);
+    await userEvent.click(menuButton);
     expect(await canvas.findByRole("menuitem", { name: "New File" })).toBeInTheDocument();
   };
 
   // Check menu closes on click outside
   await openMenu();
-  userEvent.click(menuButton.parentElement as Element);
+  await userEvent.click(menuButton.parentElement as Element);
   expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
 
   // Test arrow down/up
@@ -73,7 +75,7 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
   expect(document.activeElement?.innerHTML).toBe("Print...");
 
   // Escape close
-  userEvent.type(menuButton.parentElement as Element, "{Escape}");
+  await userEvent.type(menuButton.parentElement as Element, "{Escape}");
   expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
 
   // Test enter to select

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;