@linzjs/step-ag-grid 23.0.1 → 25.0.0

package/src/stories/grid/GridNoRowsOverlay.stories.tsx

@@ -1,15 +1,14 @@
-import "@linzjs/lui/dist/scss/base.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 { within } from "@storybook/test";
+import { Meta, StoryFn } from '@storybook/react';
+import { expect } from '@storybook/test';
+import { within } from '@storybook/test';
 
-import "@linzjs/lui/dist/fonts";
-
-import { GridNoRowsOverlay, GridNoRowsOverlayProps } from "../../components";
+import { GridNoRowsOverlay, GridNoRowsOverlayProps } from '../../components';
 
 export default {
-  title: "Components / Grids / GridNoRowsOverlay",
+  title: 'Components / Grids / GridNoRowsOverlay',
   component: GridNoRowsOverlay,
   args: {},
 } as Meta<typeof GridNoRowsOverlay>;
@@ -25,7 +24,7 @@ _GridNoRowsEmpty.args = {
 };
 _GridNoRowsEmpty.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  expect(await canvas.findByText("There are currently no rows")).toBeInTheDocument();
+  expect(await canvas.findByText('There are currently no rows')).toBeInTheDocument();
 };
 
 export const _GridNoRowsFiltered = GridNoRowsOverlayTemplate.bind({});
@@ -35,5 +34,5 @@ _GridNoRowsFiltered.args = {
 };
 _GridNoRowsFiltered.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  expect(await canvas.findByText("All rows have been filtered")).toBeInTheDocument();
+  expect(await canvas.findByText('All rows have been filtered')).toBeInTheDocument();
 };

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

@@ -1,13 +1,12 @@
-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 { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
-import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
-import { useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { GridPopoverEditDropDown } from 'components/gridPopoverEdit/GridPopoverEditDropDown';
+import { GridPopoverTextArea } from 'components/gridPopoverEdit/GridPopoverTextArea';
+import { useMemo, useState } from 'react';
 
 import {
   ColDefT,
@@ -21,15 +20,15 @@ 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: {
     selectable: true,
-    rowSelection: "single",
+    rowSelection: 'single',
     autoSelectFirstRow: true,
   },
   decorators: [
@@ -57,31 +56,31 @@ const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
       }),
       GridPopoverEditDropDown(
         {
-          field: "position",
-          headerName: "Position",
+          field: 'position',
+          headerName: 'Position',
         },
         {
           multiEdit: true,
           editorParams: {
-            filtered: "local",
-            filterPlaceholder: "Filter",
-            options: ["Architect", "Developer", "Product Owner", "Scrum Master", "Tester"],
+            filtered: 'local',
+            filterPlaceholder: 'Filter',
+            options: ['Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'],
           },
         },
       ),
       GridCell({
-        field: "age",
-        headerName: "Age",
+        field: 'age',
+        headerName: 'Age',
       }),
       GridPopoverTextArea(
         {
-          field: "desc",
-          headerName: "Description",
+          field: 'desc',
+          headerName: 'Description',
         },
         {},
       ),
@@ -95,48 +94,48 @@ const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
               await wait(500);
               return [
                 {
-                  label: "Single edit only",
+                  label: 'Single edit only',
                   action: async ({ selectedRows }) => {
-                    alert(`Single-edit: ${selectedRows.map((r) => r.id)} rowId(s) selected`);
+                    alert(`Single-edit: ${selectedRows.map((r) => r.id).join()} rowId(s) selected`);
                     await wait(1500);
                   },
                   disabled: selectedItems.length > 1,
                 },
                 {
-                  label: "Multi-edit",
+                  label: 'Multi-edit',
                   action: async ({ selectedRows }) => {
-                    alert(`Multi-edit: ${selectedRows.map((r) => r.id)} rowId(s) selected`);
+                    alert(`Multi-edit: ${selectedRows.map((r) => r.id).join()} rowId(s) selected`);
                     await wait(1500);
                   },
                 },
                 {
-                  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 ({ menuOption }) => {
                     // eslint-disable-next-line no-console
                     console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
                     await wait(500);
                   },
                   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>[];
@@ -149,14 +148,14 @@ const GridNonEditableRowTemplate: 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' },
   ]);
 
   const defaultColDef: ColDefT<ITestRow> = useMemo(
     () => ({
-      editable: ({ data }) => data?.position !== "Manager",
+      editable: ({ data }) => data?.position !== 'Manager',
     }),
     [],
   );
@@ -169,7 +168,7 @@ const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
       defaultColDef={defaultColDef}
       columnDefs={columnDefs}
       rowData={rowData}
-      domLayout={"autoHeight"}
+      domLayout={'autoHeight'}
     />
   );
 };

package/src/stories/grid/GridPinnedRow.stories.tsx

@@ -1,11 +1,10 @@
-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 { useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { useMemo, useState } from 'react';
 
 import {
   ColDefT,
@@ -15,11 +14,11 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
-} from "../..";
-import { waitForGridReady } from "../../utils/storybookTestUtil";
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   args: {
     selectable: false,
@@ -28,13 +27,13 @@ export default {
   parameters: {
     docs: {
       source: {
-        type: "code",
+        type: 'code',
       },
     },
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 260, display: "flex", flexDirection: "column" }}>
+      <div style={{ maxWidth: 1024, height: 260, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -62,35 +61,35 @@ const PinnedRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "name",
-        headerName: "Name",
+        field: 'name',
+        headerName: 'Name',
       }),
       GridCell({
-        field: "position",
-        headerName: "Position",
+        field: 'position',
+        headerName: 'Position',
       }),
       GridCell({
-        field: "age",
-        headerName: "Age",
+        field: 'age',
+        headerName: 'Age',
       }),
     ],
     [],
   );
 
   const [rowData] = useState<ITestRow[]>([
-    { id: 1, name: "Opeyemi", position: "Tester", age: 30 },
-    { id: 2, name: "Johnie", position: "Developer", age: 21 },
-    { id: 3, name: "Laxmi", position: "Manager", age: 65 },
-    { id: 4, name: "Salama", position: "Developer", age: 22 },
-    { id: 5, name: "Husni", position: "Developer", age: 24 },
+    { id: 1, name: 'Opeyemi', position: 'Tester', age: 30 },
+    { id: 2, name: 'Johnie', position: 'Developer', age: 21 },
+    { id: 3, name: 'Laxmi', position: 'Manager', age: 65 },
+    { id: 4, name: 'Salama', position: 'Developer', age: 22 },
+    { id: 5, name: 'Husni', position: 'Developer', age: 24 },
   ]);
-  const [pinnedBottomRowData] = useState<ITestPinnedRow[]>([{ name: "Total Age", position: "", age: 170 }]);
-  const [pinnedTopRowData] = useState<ITestPinnedRow[]>([{ name: "Min Age", position: "", age: 21 }]);
+  const [pinnedBottomRowData] = useState<ITestPinnedRow[]>([{ name: 'Total Age', position: '', age: 170 }]);
+  const [pinnedTopRowData] = useState<ITestPinnedRow[]>([{ name: 'Min Age', position: '', age: 21 }]);
 
   return (
     <GridWrapper maxHeight={400}>
       <Grid
-        data-testid={"readonly"}
+        data-testid={'readonly'}
         {...props}
         selectable={false}
         columnDefs={columnDefs}

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

@@ -1,11 +1,10 @@
-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 { ReactElement, useCallback, useContext, useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { ReactElement, useCallback, useContext, useMemo, useState } from 'react';
 
 import {
   ActionButton,
@@ -19,15 +18,15 @@ import {
   GridUpdatingContextProvider,
   MenuItem,
   wait,
-} from "../..";
-import { waitForGridReady } from "../../utils/storybookTestUtil";
-import { IFormTestRow } from "./FormTest";
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+import { IFormTestRow } from './FormTest';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   args: {
-    quickFilterValue: "",
+    quickFilterValue: '',
     selectable: true,
   },
   decorators: [
@@ -46,10 +45,10 @@ export default {
 const ContextMenu = ({ clickedRow, colDef, close }: GridContextMenuComponentProps<IFormTestRow>): ReactElement => {
   const onClick = useCallback(() => {
     switch (colDef.field) {
-      case "name":
-        clickedRow.name = "";
+      case 'name':
+        clickedRow.name = '';
         break;
-      case "distance":
+      case 'distance':
         clickedRow.distance = null;
         break;
     }
@@ -68,26 +67,26 @@ const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) =
   const { selectRowsWithFlashDiff } = useContext(GridContext);
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [rowData, setRowData] = useState([
-    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
-    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", distance: null },
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345', distance: 10 },
+    { id: 1001, name: 'PEG V SD523', nameType: 'PEG', numba: 'V', plan: 'SD 523', distance: null },
   ] as IFormTestRow[]);
 
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
       }),
       GridCell({
-        field: "name",
-        headerName: "Name",
+        field: 'name',
+        headerName: 'Name',
       }),
       GridCell({
-        field: "distance",
-        headerName: "Number input",
+        field: 'distance',
+        headerName: 'Number input',
         valueFormatter: ({ data }) => {
           const v = data?.distance;
-          return v != null ? `${v}m` : "–";
+          return v != null ? `${v}m` : '–';
         },
       }),
     ],
@@ -98,16 +97,18 @@ const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) =
     await wait(1000);
 
     const lastRow = rowData[rowData.length - 1];
+    // eslint-disable-next-line @typescript-eslint/require-await
     await selectRowsWithFlashDiff(async () => {
       setRowData([
         ...rowData,
         {
           id: (lastRow?.id ?? 0) + 1,
-          name: "?",
-          nameType: "?",
-          numba: "?",
-          plan: "",
+          name: '?',
+          nameType: '?',
+          numba: '?',
+          plan: '',
           distance: null,
+          bold: false,
         },
       ]);
     });
@@ -121,16 +122,16 @@ const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) =
         setExternalSelectedItems={setExternalSelectedItems}
         columnDefs={columnDefs}
         rowData={rowData}
-        domLayout={"autoHeight"}
+        domLayout={'autoHeight'}
         defaultColDef={{ minWidth: 70 }}
-        sizeColumns={"auto"}
+        sizeColumns={'auto'}
         onCellEditingComplete={() => {
           /* eslint-disable-next-line no-console */
-          console.log("Cell editing complete");
+          console.log('Cell editing complete');
         }}
         contextMenu={ContextMenu}
       />
-      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onClick={addRowAction} />
+      <ActionButton icon={'ic_add'} name={'Add new row'} inProgressName={'Adding...'} onClick={addRowAction} />
     </>
   );
 };

package/src/stories/grid/GridPopoutEditBoolean.stories.tsx

@@ -1,11 +1,10 @@
-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 { useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { useMemo, useState } from 'react';
 
 import {
   ColDefT,
@@ -15,12 +14,12 @@ import {
   GridContextProvider,
   GridEditBoolean,
   GridUpdatingContextProvider,
-} from "../..";
-import { waitForGridReady } from "../../utils/storybookTestUtil";
-import { IFormTestRow } from "./FormTest";
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+import { IFormTestRow } from './FormTest';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   decorators: [
     (Story) => (
@@ -37,37 +36,37 @@ export default {
 
 const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
   const [rowData, setRowData] = useState([
-    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", bold: true },
-    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", bold: false },
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345', bold: true },
+    { id: 1001, name: 'PEG V SD523', nameType: 'PEG', numba: 'V', plan: 'SD 523', bold: false },
   ] as IFormTestRow[]);
 
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
       }),
       GridButton(
         {
-          colId: "button",
-          headerName: "Button",
+          colId: 'button',
+          headerName: 'Button',
         },
         {
           visible: ({ data }) => !!(data.id & 1),
           onClick: ({ selectedRowIds }) => {
-            alert("click " + selectedRowIds);
+            alert('click ' + String(selectedRowIds));
           },
         },
       ),
       GridEditBoolean(
         {
-          field: "bold",
+          field: 'bold',
         },
         {
-          onClick: async ({ selectedRowIds, checked }) => {
+          onClick: ({ selectedRowIds, checked }) => {
             setRowData((rowData) => {
               // eslint-disable-next-line no-console
-              console.log("onchange", selectedRowIds, checked);
+              console.log('onchange', selectedRowIds, checked);
               return rowData.map((row) => (selectedRowIds.includes(row.id) ? { ...row, bold: checked } : row));
             });
             return true;
@@ -85,7 +84,7 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
       selectable={false}
       singleClickEdit={true}
       rowSelection="single"
-      domLayout={"autoHeight"}
+      domLayout={'autoHeight'}
     />
   );
 };

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

@@ -1,21 +1,20 @@
-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 { useMemo, useState } from "react";
+import { Meta, StoryFn } from '@storybook/react';
+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";
+import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+import { FormTest, IFormTestRow } from './FormTest';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   args: {
-    quickFilterValue: "",
+    quickFilterValue: '',
     selectable: true,
   },
   decorators: [
@@ -36,13 +35,13 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) =
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
       }),
       GridCell(
         {
-          field: "name",
-          headerName: "Popout Generic Edit",
+          field: 'name',
+          headerName: 'Popout Generic Edit',
         },
         {
           multiEdit: true,
@@ -55,8 +54,8 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) =
   );
 
   const [rowData] = useState([
-    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
-    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
+    { id: 1001, name: 'PEG V SD523', nameType: 'PEG', numba: 'V', plan: 'SD 523' },
   ] as IFormTestRow[]);
 
   return (
@@ -66,7 +65,7 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) =
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
-      domLayout={"autoHeight"}
+      domLayout={'autoHeight'}
     />
   );
 };