@linzjs/step-ag-grid 23.0.1 → 25.0.0

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

@@ -1,14 +1,13 @@
-import "../../../styles/GridTheme.scss";
-import "../../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../../styles/GridTheme.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { Meta, StoryFn } from "@storybook/react";
-import { expect } from "@storybook/test";
-import { fn } from "@storybook/test";
-import { userEvent, waitFor } from "@storybook/test";
-import { useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { expect } from '@storybook/test';
+import { fn } from '@storybook/test';
+import { userEvent, waitFor } from '@storybook/test';
+import { useMemo, useState } from 'react';
 
 import {
   ColDefT,
@@ -24,24 +23,24 @@ import {
   GridUpdatingContextProvider,
   MenuOption,
   wait,
-} from "../../../";
-import { waitForGridReady } from "../../../utils/storybookTestUtil";
+} from '../../../';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   args: {
     quickFilter: true,
-    quickFilterValue: "",
-    quickFilterPlaceholder: "Quick filter...",
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
     selectable: false,
-    rowSelection: "single",
+    rowSelection: 'single',
   },
   // Storybook hangs otherwise
   parameters: {
     docs: {
       source: {
-        type: "code",
+        type: 'code',
       },
     },
   },
@@ -79,28 +78,28 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
       }),
-      GridCell<ITestRow, ITestRow["position"]>({
-        field: "position",
-        headerName: "Position",
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
         cellRendererParams: {
-          warning: ({ value }) => value === "Tester" && "Testers are testing",
-          info: ({ value }) => value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
         },
       }),
       GridCell({
-        field: "age",
-        headerName: "Age",
+        field: 'age',
+        headerName: 'Age',
       }),
       GridCell({
-        field: "desc",
-        headerName: "Description",
+        field: 'desc',
+        headerName: 'Description',
       }),
       GridPopoverMessage(
         {
-          headerName: "Popout message",
+          headerName: 'Popout message',
           maxWidth: 150,
           cellRenderer: () => <>Single Click me!</>,
         },
@@ -115,13 +114,13 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         },
       ),
       GridCell({
-        headerName: "Custom edit",
+        headerName: 'Custom edit',
         maxWidth: 100,
         editable: true,
-        valueFormatter: () => "Press E",
+        valueFormatter: () => 'Press E',
         cellRendererParams: {
           rightHoverElement: (
-            <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
+            <GridIcon icon={'ic_launch_modal'} title={'Title text'} className={'GridCell-editableIcon'} />
           ),
           editAction: () => {
             //
@@ -136,51 +135,51 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         {
           multiEdit: true,
           editorParams: {
-            defaultAction: async ({ menuOption }) => {
+            defaultAction: ({ menuOption }) => {
               // eslint-disable-next-line no-console
-              console.log("clicked", { menuOption });
+              console.log('clicked', { menuOption });
             },
             options: async (selectedItems) => {
               // Just doing a timeout here to demonstrate deferred loading
               await wait(500);
               return [
                 {
-                  label: "Single edit only",
+                  label: 'Single edit only',
                   action: async () => {
                     //
                   },
                   disabled: selectedItems.length > 1,
                 },
                 {
-                  label: "Multi-edit",
+                  label: 'Multi-edit',
                   action: multiEditAction,
                 },
                 {
-                  label: "Disabled item",
-                  disabled: "Disabled for test",
+                  label: 'Disabled item',
+                  disabled: 'Disabled for test',
                 },
                 {
-                  label: "Developer Only",
-                  hidden: selectedItems.some((x) => x.position != "Developer"),
+                  label: 'Developer Only',
+                  hidden: selectedItems.some((x) => x.position != 'Developer'),
                 },
                 {
-                  label: "Other (TextInput)",
+                  label: 'Other (TextInput)',
                   action: async () => {
                     //
                   },
                   subComponent: () => (
-                    <GridFormSubComponentTextInput placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                    <GridFormSubComponentTextInput placeholder={'Other'} maxLength={5} required defaultValue={''} />
                   ),
                 },
                 {
-                  label: "Other (TextArea)",
+                  label: 'Other (TextArea)',
                   action: async ({ menuOption }) => {
                     // eslint-disable-next-line no-console
                     console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
                     await wait(500);
                   },
                   subComponent: () => (
-                    <GridFormSubComponentTextArea placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                    <GridFormSubComponentTextArea placeholder={'Other'} maxLength={5} required defaultValue={''} />
                   ),
                 },
               ] as MenuOption<ITestRow>[];
@@ -194,9 +193,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         },
         {
           editorParams: {
-            options: async () => {
-              return [];
-            },
+            options: () => [],
           },
         },
       ),
@@ -205,9 +202,9 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
   );
 
   const [rowData] = useState([
-    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
-    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
-    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
+    { id: 1000, position: 'Tester', age: 30, desc: 'Tests application', dd: '1' },
+    { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
+    { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
   ]);
 
   return (
@@ -218,7 +215,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
-      domLayout={"autoHeight"}
+      domLayout={'autoHeight'}
       autoSelectFirstRow={true}
     />
   );
@@ -232,47 +229,47 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
   await waitForGridReady({ canvasElement });
 
   // Ensure first row/cell is selected on render
-  await waitFor(async () => {
+  await waitFor(() => {
     const activeCell = canvasElement.ownerDocument.activeElement;
-    expect(activeCell).toHaveClass("ag-cell-focus");
-    expect(activeCell).toHaveAttribute("aria-colindex", "1");
-    expect(activeCell?.parentElement).toHaveAttribute("row-index", "0");
+    expect(activeCell).toHaveClass('ag-cell-focus');
+    expect(activeCell).toHaveAttribute('aria-colindex', '1');
+    expect(activeCell?.parentElement).toHaveAttribute('row-index', '0');
   });
-  await userEvent.keyboard("{arrowdown}{arrowdown}");
-  await 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) => {
-    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard('{Enter}');
     await wait(1000);
-    await userEvent.keyboard("{arrowdown}{arrowdown}");
+    await userEvent.keyboard('{arrowdown}{arrowdown}');
     fn();
-    await waitFor(async () => {
+    await waitFor(() => {
       expect(multiEditAction).toHaveBeenCalled();
     });
 
-    await waitFor(async () => {
+    await waitFor(() => {
       const activeCell = canvasElement.ownerDocument.activeElement;
-      expect(activeCell).toHaveClass("ag-cell-focus");
-      expect(activeCell).toHaveAttribute("aria-colindex", colId);
-      expect(activeCell?.parentElement).toHaveAttribute("row-index", rowId);
+      expect(activeCell).toHaveClass('ag-cell-focus');
+      expect(activeCell).toHaveAttribute('aria-colindex', colId);
+      expect(activeCell?.parentElement).toHaveAttribute('row-index', rowId);
     });
     await wait(1000);
   };
 
-  await test(() => userEvent.keyboard("{Enter}"), "8", "2");
-  await test(() => userEvent.tab(), "9", "2");
+  await test(() => userEvent.keyboard('{Enter}'), '8', '2');
+  await test(() => userEvent.tab(), '9', '2');
   await userEvent.tab({ shift: true });
-  await test(() => userEvent.tab({ shift: true }), "6", "2");
-  await userEvent.keyboard("{Esc}");
+  await test(() => userEvent.tab({ shift: true }), '6', '2');
+  await userEvent.keyboard('{Esc}');
   await userEvent.tab();
 
-  await userEvent.keyboard("{Enter}");
+  await userEvent.keyboard('{Enter}');
   await wait(250);
   expect(eAction).not.toHaveBeenCalled();
 
-  await userEvent.keyboard("e");
-  await waitFor(async () => {
+  await userEvent.keyboard('e');
+  await waitFor(() => {
     expect(eAction).toHaveBeenCalled();
   });
 };

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

@@ -1,16 +1,16 @@
-import "../../react-menu3/styles/index.scss";
+import '../../react-menu3/styles/index.scss';
 
-import { Meta, StoryFn } from "@storybook/react";
-import { expect } from "@storybook/test";
-import * as test from "@storybook/test";
-import { userEvent, within } from "@storybook/test";
+import { Meta, StoryFn } from '@storybook/react';
+import { expect } from '@storybook/test';
+import * as test from '@storybook/test';
+import { userEvent, within } from '@storybook/test';
 
-import { Grid } from "../../components/Grid";
-import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "../../react-menu3";
-import { wait } from "../../utils/util";
+import { Grid } from '../../components/Grid';
+import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from '../../react-menu3';
+import { wait } from '../../utils/util';
 
 export default {
-  title: "Components / React-menu",
+  title: 'Components / React-menu',
   component: Grid,
   args: {
     externalSelectedItems: [],
@@ -49,40 +49,40 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
     await wait(100); // Wait for debounce
   };
 
-  const menuButton = await canvas.findByRole("button");
+  const menuButton = await canvas.findByRole('button');
   expect(menuButton).toBeInTheDocument();
 
   const openMenu = async () => {
     await wait(500); // Wait for debounce
     await userEvent.click(menuButton);
-    expect(await canvas.findByRole("menuitem", { name: "New File" })).toBeInTheDocument();
+    expect(await canvas.findByRole('menuitem', { name: 'New File' })).toBeInTheDocument();
   };
 
   // Check menu closes on click outside
   await openMenu();
   await userEvent.click(menuButton.parentElement as Element);
-  expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
+  expect(canvas.queryByRole('menuitem', { name: 'New File' })).not.toBeInTheDocument();
 
   // Test arrow down/up
   await openMenu();
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  expect(document.activeElement?.innerHTML).toBe("Exit");
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  expect(document.activeElement?.innerHTML).toBe('Exit');
 
-  await keyboard("{arrowup}");
-  expect(document.activeElement?.innerHTML).toBe("Print...");
+  await keyboard('{arrowup}');
+  expect(document.activeElement?.innerHTML).toBe('Print...');
 
   // Escape close
-  await userEvent.type(menuButton.parentElement as Element, "{Escape}");
-  expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
+  await userEvent.type(menuButton.parentElement as Element, '{Escape}');
+  expect(canvas.queryByRole('menuitem', { name: 'New File' })).not.toBeInTheDocument();
 
   // Test enter to select
   await openMenu();
-  await keyboard("{arrowdown}");
-  await keyboard("{enter}");
+  await keyboard('{arrowdown}');
+  await keyboard('{enter}');
   expect(menuItemClickAction).toHaveBeenCalled();
   expect(newFileAction).toHaveBeenCalled();
 
@@ -91,10 +91,10 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
 
   // Test tab to select
   await openMenu();
-  await keyboard("{arrowdown}");
+  await keyboard('{arrowdown}');
   // For some reason arrow down takes a little time to activate
   await wait(10);
-  await keyboard("{Tab}");
+  await keyboard('{Tab}');
   expect(menuItemClickAction).toHaveBeenCalled();
   expect(newFileAction).toHaveBeenCalled();
 

package/src/styles/Grid.scss

@@ -1,6 +1,6 @@
 @use "../react-menu3/styles/index";
 @use "./react-menu-customisations";
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .LabelPreferencesPanelGridCellAlignCenter .ag-wrapper {
   margin-left: auto;
@@ -40,9 +40,9 @@
   align-items: center;
   flex-direction: row;
   padding: 12px;
-  background-color: colors.$hint;
-  border-bottom: 1px solid colors.$silver;
-  border-top: 2px solid colors.$lily;
+  background-color: lui.$hint;
+  border-bottom: 1px solid lui.$silver;
+  border-top: 2px solid lui.$lily;
 }
 
 .Grid-container-filters button {
@@ -68,21 +68,21 @@
   position: absolute;
   margin: 8px;
   pointer-events: none;
-  fill: colors.$fuscous;
+  fill: lui.$fuscous;
 }
 
 .GridFilterQuick-input {
   width: 100%;
   height: 40px;
   min-height: 40px;
-  border: 0.06rem solid colors.$silver;
+  border: 0.06rem solid lui.$silver;
   border-radius: 3px;
   padding-left: 36px;
   padding-right: 0.75rem;
   font-family: "Open Sans", system-ui, sans-serif;
 
   &::placeholder {
-    color: colors.$fuscous;
+    color: lui.$fuscous;
     font-style: italic;
   }
 }
@@ -109,11 +109,11 @@
 }
 
 .ag-floating-top-container .ag-row {
-  background-color: colors.$hint;
+  background-color: lui.$hint;
 }
 
 .ag-floating-bottom-container .ag-row {
-  background-color: colors.$hint;
+  background-color: lui.$hint;
 }
 
 .GridHeaderAlignCenter .ag-header-cell-text {

package/src/styles/GridIcon.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .AgGridGenericCellRenderer-icon {
   margin-right: 4px;
@@ -6,24 +6,24 @@
 
 .AgGridGenericCellRenderer-ic_infoIcon {
   margin-right: 4px;
-  fill: colors.$info;
+  fill: lui.$info;
 }
 
 .AgGridGenericCellRenderer-ic_info_outlineIcon {
   margin-right: 4px;
-  fill: colors.$info;
+  fill: lui.$info;
 }
 
 .AgGridGenericCellRenderer-ic_warningIcon {
   margin-right: 4px;
-  fill: colors.$warning;
+  fill: lui.$warning;
 }
 
 .AgGridGenericCellRenderer-ic_warning_outlineIcon {
   margin-right: 4px;
-  fill: colors.$warning;
+  fill: lui.$warning;
 }
 
 .GridIcon-disabled {
-  fill: colors.$silver !important;
+  fill: lui.$silver !important;
 }

package/src/styles/GridPopoverMenu.scss

@@ -1,14 +1,14 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .ag-cell .GridPopoutMenu-burger {
   cursor: pointer;
   display: block;
 
   svg {
-    fill: colors.$sea;
+    fill: lui.$sea;
   }
 }
 
 .ag-cell .GridPopoutMenu-burgerDisabled svg {
-  fill: colors.$disabled-color;
+  fill: lui.$disabled-color;
 }

package/src/styles/GridTheme.scss

@@ -1,4 +1,4 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 @use "ag-grid-community/styles" as ag;
 
 // ag-grid likes to add 1px to this, so we subtract to compensate

package/src/styles/react-menu-customisations.scss

@@ -1,25 +1,22 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/FontVars" as fonts;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/SpacingVars" as spacing;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Utilities" as *;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 /**
  * Here is where we can override the styles of react-menu
  */
 .step-ag-grid-react-menu.szh-menu {
   z-index: 900;
-  color: colors.$base-type-color;
-  @include fonts.font-regular();
+  color: lui.$base-type-color;
+  @include lui.font-regular();
 
   div,
   a[role="menuitem"] {
     text-decoration: none;
-    color: colors.$base-type-color;
-    @include fonts.font-regular();
+    color: lui.$base-type-color;
+    @include lui.font-regular();
   }
 
   li[role="menuitem"]:hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 
   .szh-menu__header {
@@ -31,85 +28,73 @@
 /**
  * Here are styles for lui select menu
  */
-.lui-select-menu.szh-menu-container {
-  @include breakpoint(sm) {
-    position: absolute;
-  }
-}
-
 .lui-select-menu.szh-menu {
   z-index: 900;
   width: 92vw;
   overflow-y: scroll;
 
-  @include breakpoint(sm) {
-    overflow: visible;
-    height: auto;
-    width: 240px;
-  }
-
-  color: colors.$base-type-color;
-  @include fonts.font-light();
+  color: lui.$base-type-color;
+  @include lui.font-light();
 }
 
 .lui-select-menuItem {
-  padding: spacing.$unit-xs spacing.$unit-sm spacing.$unit-xs spacing.$unit-xs;
+  padding: lui.$unit-xs lui.$unit-sm lui.$unit-xs lui.$unit-xs;
   display: flex;
   line-height: 1;
   transition: all 0.2s ease-in-out;
-  fill: colors.$fuscous;
+  fill: lui.$fuscous;
 
   &:hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 }
 
 .lui-select-menuItem--error {
   p {
-    color: colors.$error;
+    color: lui.$error;
   }
 
   .LuiIcon {
-    fill: colors.$error;
+    fill: lui.$error;
   }
 }
 
 .lui-select-menuItemText {
-  @include fonts.font-regular();
-  color: colors.$charcoal;
+  @include lui.font-regular();
+  color: lui.$charcoal;
   margin: 0;
-  padding-left: spacing.$unit-lg;
+  padding-left: lui.$unit-lg;
 
   // if no icon, give it 4px to align with the group header
   &--noPadding {
-    padding-left: spacing.$unit-xxs;
+    padding-left: lui.$unit-xxs;
   }
 }
 
 .lui-select-icon + .lui-select-menuItemText {
-  padding-left: spacing.$unit-xs;
+  padding-left: lui.$unit-xs;
 }
 
 .lui-select-menu-group {
   height: 32px;
-  color: colors.$fuscous;
+  color: lui.$fuscous;
   padding-left: 0.75rem;
   text-transform: none;
-  @include fonts.font-semibold();
+  @include lui.font-semibold();
 }
 
 .lui-select-submenu {
   flex: 1;
 
   div[role="menuitem"] {
-    padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 2.5rem;
+    padding: lui.$unit-xs lui.$unit-xs lui.$unit-xs 2.5rem;
     text-decoration: none;
-    @include fonts.font-regular();
+    @include lui.font-regular();
     height: 40px;
   }
   // overwrite the hover color
   .szh-menu__item--hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 }
 
@@ -119,7 +104,7 @@
   div[role="menuitem"] {
     padding-left: 0;
     text-decoration: none;
-    @include fonts.font-regular();
+    @include lui.font-regular();
     height: 40px;
   }
 }
@@ -130,6 +115,6 @@
 
 
 .step-ag-grid-react-menu-sub-header-icon {
-  margin: spacing.$unit-xs;
-  fill: colors.$fuscous;
+  margin: lui.$unit-xs;
+  fill: lui.$fuscous;
 }

package/src/utils/__tests__/storybookTestUtil.ts

@@ -0,0 +1,4 @@
+import { expect, waitFor } from '@storybook/test';
+
+export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
+  waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });