@linzjs/step-ag-grid 17.0.1 → 17.0.3

package/package.json

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

package/src/components/Grid.tsx

@@ -326,8 +326,8 @@ export const Grid = ({
           {
             colId: "selection",
             editable: false,
-            minWidth: 42,
-            maxWidth: 42,
+            minWidth: 48,
+            maxWidth: 48,
             pinned: selectColumnPinned,
             headerComponentParams: {
               exportable: false,

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -16,6 +16,7 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
       minWidth: 48,
       maxWidth: 48,
       width: 40,
+      sortable: false,
       editable: colDef.editable != null ? colDef.editable : true,
       exportable: false,
       cellStyle: { flex: 1, justifyContent: "center" },

package/src/contexts/GridContextProvider.tsx

@@ -193,7 +193,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
     (
       filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true,
     ): ColDefT<RowType>[] =>
-      filter(columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<RowType>[],
+      filter(columnApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<RowType>[],
     [columnApi],
   );
 
@@ -589,15 +589,16 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
     [gridApiOp, modifyUpdating, selectNextEditableCell],
   );
 
-  const redrawRows = useCallback(
-    (rowNodes?: IRowNode[]) => {
-      // redraw rows can throw exceptions in jest, so we ignore them
-      try {
-        gridApi && gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
-      } catch (ex) {
-        console.error(ex);
-      }
-    },
+  const redrawRows = useMemo(
+    () =>
+      debounce((rowNodes?: IRowNode[]) => {
+        try {
+          gridApi && gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
+        } catch (ex) {
+          // Hide errors in jest, but log them in browser
+          if (typeof jest === "undefined") console.error(ex);
+        }
+      }, 50),
     [gridApi],
   );
 

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -21,6 +19,7 @@ import {
   GridUpdatingContextProvider,
   GridWrapper,
 } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 
 export default {
   title: "Components / Grids",
@@ -106,8 +105,4 @@ const GridFilterButtonsTemplate: ComponentStory<typeof Grid> = (props: GridProps
 };
 
 export const _FilterButtonsExample = GridFilterButtonsTemplate.bind({});
-_FilterButtonsExample.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+_FilterButtonsExample.play = waitForGridReady;

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { ColDef } from "ag-grid-community";
 import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
@@ -25,16 +23,15 @@ import {
   MenuOption,
   wait,
 } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 
 export default {
   title: "Components / Grids",
   component: Grid,
   args: {
-    quickFilter: true,
-    quickFilterValue: "",
-    quickFilterPlaceholder: "Quick filter...",
-    selectable: false,
+    selectable: true,
     rowSelection: "single",
+    autoSelectFirstRow: true,
   },
   decorators: [
     (Story) => (
@@ -179,9 +176,4 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
 };
 
 export const _NonEditableRow = GridNonEditableRowTemplate.bind({});
-_NonEditableRow.args = { autoSelectFirstRow: true, selectable: true };
-_NonEditableRow.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+_NonEditableRow.play = waitForGridReady;

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { ReactElement, useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -22,6 +20,7 @@ import {
   MenuItem,
   wait,
 } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 import { IFormTestRow } from "./FormTest";
 
 export default {
@@ -137,8 +136,4 @@ const GridPopoutContextMenuTemplate: ComponentStory<typeof Grid> = (props: GridP
 };
 
 export const _EditContextMenu = GridPopoutContextMenuTemplate.bind({});
-_EditContextMenu.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+_EditContextMenu.play = waitForGridReady;

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -2,14 +2,13 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 import { FormTest, IFormTestRow } from "./FormTest";
 
 export default {
@@ -73,8 +72,4 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
 };
 
 export const _EditGeneric = GridPopoutEditGenericTemplate.bind({});
-_EditGeneric.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+_EditGeneric.play = waitForGridReady;

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -28,6 +26,7 @@ import {
   isFloat,
   wait,
 } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 import { IFormTestRow } from "./FormTest";
 
 export default {
@@ -228,8 +227,4 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
 };
 
 export const _EditGenericTextArea = GridPopoutEditGenericTemplate.bind({});
-_EditGenericTextArea.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+_EditGenericTextArea.play = waitForGridReady;

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -25,6 +23,7 @@ import {
   GridWrapper,
   wait,
 } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 
 export default {
   title: "Components / Grids",
@@ -124,8 +123,4 @@ const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: Grid
 };
 
 export const _GridPopoverEditBearing = GridPopoverEditBearingTemplate.bind({});
-_GridPopoverEditBearing.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+_GridPopoverEditBearing.play = waitForGridReady;

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -30,6 +28,7 @@ import {
   MenuSeparatorString,
   wait,
 } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 
 export default {
   title: "Components / Grids",
@@ -156,6 +155,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       ),
       GridPopoverEditDropDown(
         {
+          colId: "position3filtered",
           field: "position3",
           headerName: "Filtered",
           editable: false,
@@ -316,8 +316,4 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
 };
 
 export const EditDropdown = GridEditDropDownTemplate.bind({});
-EditDropdown.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+EditDropdown.play = waitForGridReady;

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { isEmpty, partition } from "lodash-es";
 import { useMemo, useState } from "react";
 
@@ -23,6 +21,7 @@ import {
   MultiSelectOption,
   wait,
 } from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 
 export default {
   title: "Components / Grids",
@@ -196,8 +195,4 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
 };
 
 export const EditMultiSelect = GridEditMultiSelectTemplate.bind({});
-EditMultiSelect.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+EditMultiSelect.play = waitForGridReady;

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { countBy, mergeWith, pull, range, union } from "lodash-es";
 import { useMemo, useState } from "react";
 
@@ -13,6 +11,7 @@ import "@linzjs/lui/dist/fonts";
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from "../..";
 import { MultiSelectGridOption } from "../../components/gridForm/GridFormMultiSelectGrid";
 import { GridPopoutEditMultiSelectGrid } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelectGrid";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 import { EditMultiSelect } from "./GridPopoverEditMultiSelect.stories";
 
 export default {
@@ -111,8 +110,4 @@ const GridEditMultiSelectGridTemplate: ComponentStory<typeof Grid> = (props: Gri
 };
 
 export const EditMultiSelectGrid = GridEditMultiSelectGridTemplate.bind({});
-EditMultiSelect.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+EditMultiSelect.play = waitForGridReady;

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -2,9 +2,7 @@ import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { waitFor } from "@storybook/testing-library";
 import { ReactElement, useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -31,6 +29,7 @@ import {
 import { GridFilterColumnsToggle } from "../../components";
 import { GridFilterDownloadCsvButton } from "../../components";
 import { GridCellFiller } from "../../components/GridCellFiller";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
 
 export default {
   title: "Components / Grids",
@@ -280,8 +279,4 @@ const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): Rea
 };
 
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});
-ReadOnlySingleSelection.play = async ({ canvasElement }) => {
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
-};
+ReadOnlySingleSelection.play = waitForGridReady;

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

@@ -24,6 +24,7 @@ import {
   MenuOption,
   wait,
 } from "../../../";
+import { waitForGridReady } from "../../../utils/storybookTestUtil";
 
 export default {
   title: "Components / Grids",
@@ -225,9 +226,7 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
   multiEditAction.mockReset();
   eAction.mockReset();
 
-  await waitFor(() => {
-    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
-  });
+  await waitForGridReady({ canvasElement });
 
   // Ensure first row/cell is selected on render
   await waitFor(async () => {

package/src/styles/GridTheme.scss

@@ -81,7 +81,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 }
 
 .ag-header .ag-header-cell[aria-colindex="1"] {
-  padding-left: lui.$unit-rg;
+  padding-left: 17px;
 }
 
 .ag-cell[role="gridcell"] {
@@ -90,7 +90,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 }
 
 .ag-cell[aria-colindex="1"] {
-  border-left: none;
+  border-left: 1px solid transparent;
   padding-left: lui.$unit-rg;
 }
 

package/src/utils/storybookTestUtil.ts

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

package/src/utils/testUtil.ts

@@ -215,3 +215,13 @@ export const clickActionButton = async (text: string, container?: HTMLElement):
   const button = await findActionButton(text, container);
   await user.click(button);
 };
+
+export const waitForGridReady = async ({ grid, timeout = 5000 }: { grid?: HTMLElement; timeout: number }) =>
+  waitFor(() => expect(getAllQuick({ classes: ".Grid-ready" }, grid)).toBeInTheDocument(), {
+    timeout,
+  });
+
+export const waitForGridRows = async ({ grid, timeout = 5000 }: { grid?: HTMLElement; timeout: number }) =>
+  waitFor(async () => expect(getAllQuick({ classes: ".ag-row" }, grid).length > 0).toBe(true), {
+    timeout,
+  });