@linzjs/step-ag-grid 29.15.0 → 29.19.0

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -9,6 +9,7 @@ import {
   GridFilterColumnsMultiSelect,
 } from 'components/gridFilter/GridFilterColumnsMultiSelect';
 import { useMemo, useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 
 import {
   ColDefT,
@@ -21,8 +22,15 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
+  wait,
 } from '../..';
-import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+import {
+  getNumberOfGridRows,
+  gridColumnValues,
+  waitForGridReady,
+  waitForGridRows,
+} from '../../utils/__tests__/storybookTestUtil';
+import { findQuick } from '../../utils/__tests__/testQuick';
 
 export default {
   title: 'Components / Grids',
@@ -57,11 +65,15 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
         field: 'position',
         headerName: 'Position',
         filter: GridFilterColumnsMultiSelect,
-        filterParams: createCheckboxMultiFilterParams({
-          Developer: 'FE Dev',
-          Manager: 'Tech Manager',
-          __EMPTY__: 'None',
-        }),
+        filterParams: createCheckboxMultiFilterParams(
+          {
+            Developer: 'FE Dev',
+            Manager: 'Tech Manager',
+            __EMPTY__: 'None',
+          },
+          undefined,
+          ['Manager', 'Developer', '__EMPTY__', 'Tester'],
+        ),
       }),
       GridCell({
         field: 'desc',
@@ -120,4 +132,37 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
 };
 
 export const _FilterColumnsMultiSelectExample = GridFilterColumnsMultiSelectTemplate.bind({});
-_FilterColumnsMultiSelectExample.play = waitForGridReady;
+_FilterColumnsMultiSelectExample.play = async (context) => {
+  const { canvasElement } = context;
+  await waitForGridReady(context);
+  await waitForGridRows({ grid: canvasElement });
+
+  const setGridFilterAndCheckResultingRows = async (filterString: string, expected: string[] | null) => {
+    await filterGridUsingColumnFilter(filterString);
+    await wait(500);
+    if (expected !== null) {
+      expect(gridColumnValues('id', canvasElement)).toEqual(expected);
+      return;
+    }
+    await waitForGridReady(context);
+    expect(getNumberOfGridRows()).toEqual(0);
+  };
+
+  await setGridFilterAndCheckResultingRows('Tester', ['1001', '1002', '1004', '1005', '1006']);
+  await setGridFilterAndCheckResultingRows('Select All', ['1000', '1001', '1002', '1003', '1004', '1005', '1006']);
+  await setGridFilterAndCheckResultingRows('Select All', null); // Check that deselecting Select All filters out all rows
+};
+
+const filterGridUsingColumnFilter = async (filterString: string): Promise<void> => {
+  const user = userEvent.setup({
+    delay: 100,
+  });
+  const headerCellFilterButton = await findQuick({ classes: `.ag-header-cell-filter-button` });
+  await expect(headerCellFilterButton).toBeInTheDocument();
+  await user.click(headerCellFilterButton);
+  const canvas = within(document.body);
+  const regex = new RegExp(filterString, 'i'); // case‑insensitive
+  const filterCheckbox = await canvas.findByRole('checkbox', { name: regex });
+  await expect(filterCheckbox).toBeInTheDocument();
+  await user.click(filterCheckbox);
+};

package/src/stories/grid/GridInlineText.stories.tsx

@@ -0,0 +1,185 @@
+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-vite';
+import { useCallback, useContext, useMemo, useState } from 'react';
+
+import {
+  ActionButton,
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContext,
+  GridContextProvider,
+  GridInlineTextInput,
+  GridPopoverMenu,
+  GridProps,
+  GridUpdatingContextProvider,
+  wait,
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+
+interface IFormTestRow {
+  id: number;
+  text1: string | null;
+  text2: string | null;
+}
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400 }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridInlineTextTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const { selectRowsWithFlashDiff } = useContext(GridContext);
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [rowData, setRowData] = useState([
+    {
+      id: 1000,
+      text1: 'a text1',
+      text2: 'a text2',
+    },
+    {
+      id: 1001,
+      text1: 'b text1',
+      text2: 'b text2',
+    },
+  ] as IFormTestRow[]);
+
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridInlineTextInput(
+        {
+          field: 'text1',
+          headerName: 'Text input 1',
+        },
+        {
+          editorParams: {
+            placeholder: 'Enter some text...',
+            onSave: ({ selectedRowIds, value }) => {
+              setRowData(rowData.map((data) => (selectedRowIds.includes(data.id) ? { ...data, text1: value } : data)));
+              return true;
+            },
+          },
+        },
+      ),
+      GridInlineTextInput(
+        {
+          field: 'text2',
+          headerName: 'Text input 2',
+        },
+        {
+          editorParams: {
+            required: true,
+            maxLength: 12,
+            placeholder: 'Enter some text...',
+            invalid: (value: string) => {
+              if (value === 'never') return "The value 'never' is not allowed";
+              return null;
+            },
+            onSave: ({ selectedRowIds, value }) => {
+              setRowData(rowData.map((data) => (selectedRowIds.includes(data.id) ? { ...data, text2: value } : data)));
+              return true;
+            },
+          },
+        },
+      ),
+      GridPopoverMenu(
+        {},
+        {
+          multiEdit: true,
+          editorParams: {
+            defaultAction: ({ menuOption }) => {
+              // eslint-disable-next-line no-console
+              console.log('clicked', { menuOption });
+            },
+            options: async (selectedItems) => {
+              // Just doing a timeout here to demonstrate deferred loading
+              await wait(500);
+              return [
+                {
+                  label: 'Test',
+                  action: () => {
+                    // empty
+                  },
+                  disabled: selectedItems.length > 1,
+                },
+              ];
+            },
+          },
+        },
+      ),
+    ],
+    [rowData],
+  );
+
+  const addRowAction = useCallback(async () => {
+    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,
+          text1: '?',
+          text2: '?',
+        },
+      ]);
+    });
+  }, [rowData, selectRowsWithFlashDiff]);
+
+  return (
+    <>
+      <Grid
+        {...props}
+        enableRangeSelection={true}
+        enableMultilineBulkEdit={true}
+        hideSelectedRow={true}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+        defaultColDef={{ minWidth: 70 }}
+        sizeColumns={'auto'}
+        singleClickEdit={true}
+        onBulkEditingComplete={() => {
+          /* eslint-disable-next-line no-console */
+          console.log('onBulkEditingComplete()');
+        }}
+      />
+      <ActionButton icon={'ic_add'} name={'Add new row'} inProgressName={'Adding...'} onClick={addRowAction} />
+    </>
+  );
+};
+
+export const _EditInlineText = GridInlineTextTemplate.bind({});
+_EditInlineText.play = waitForGridReady;

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

@@ -256,7 +256,7 @@ KeyboardInteractions.play = async ({ canvasElement }) => {
   await userEvent.keyboard('{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}');
 
   // Test enter post focus
-  const test = async (fn: () => any, colId: string, rowId: string) => {
+  const test = async (fn: () => any, coldIndex: string, rowIndex: string) => {
     await userEvent.keyboard('{Enter}');
     await wait(1000);
     await userEvent.keyboard('{arrowdown}{arrowdown}');
@@ -265,8 +265,8 @@ KeyboardInteractions.play = async ({ canvasElement }) => {
     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).toHaveAttribute('aria-colindex', coldIndex);
+      expect(activeCell?.parentElement).toHaveAttribute('row-index', rowIndex);
     });
     await wait(200);
   };

package/src/styles/Grid.scss

@@ -27,6 +27,11 @@
   flex-direction: column;
 }
 
+.Grid-hideSelectedRow div.ag-row::before {
+  content: "";
+  background-color: white !important;
+}
+
 .Grid-wrapper {
   display: flex;
   flex-direction: column;

package/src/styles/GridFormInlineTextInput.scss

@@ -0,0 +1,23 @@
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+
+.GridFormInlineTextInput {
+  height: 100%;
+}
+
+.GridFormInlineTextInput-error > input {
+  border: 2px solid red !important;
+}
+
+.GridFormInlineTextInput > input {
+  display: block;
+  left:0;
+  top:0;
+  right:0;
+  bottom:0;
+  position: absolute;
+  padding-left: 9px;
+  padding-right: 9px;
+  outline: 0;
+  border: 0;
+  font-family: "Open Sans", system-ui, sans-serif;
+}

package/src/styles/index.scss

@@ -13,4 +13,4 @@
 @use "./GridPopoverMenu";
 @use "./GridFilterColumnsToggle";
 @use "./GridFilterHeaderIconButton";
-
+@use "./GridFormInlineTextInput";

package/src/utils/__tests__/storybookTestUtil.ts

@@ -1,7 +1,7 @@
 import { sortBy } from 'lodash-es';
 import { expect, userEvent, waitFor } from 'storybook/test';
 
-import { findQuick, getAllQuick } from './testQuick';
+import { findQuick, getAllQuick, queryAllQuick } from './testQuick';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
   waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });
@@ -22,6 +22,10 @@ export const clickColumnHeaderToSort = async (colId: string, within: HTMLElement
   await user.keyboard('{Enter}');
 };
 
+export const getNumberOfGridRows = (props?: { grid?: HTMLElement }): number => {
+  return queryAllQuick({ classes: '.ag-row' }, props?.grid).length;
+};
+
 export const gridColumnValues = (colId: string, within: HTMLElement): string[] => {
   return sortBy(
     getAllQuick({ tagName: `[col-id="${colId}"]`, classes: `.ag-cell` }, within),