@linzjs/step-ag-grid 30.2.0 → 30.4.0

package/package.json

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

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -26,6 +26,8 @@ interface FilterUIProps {
 
 const EMPTY_KEY = '__EMPTY__';
 const DEFAULT_EMPTY_LABEL = '-';
+const filterStateMap = new Map<string, boolean>();
+const filterClickCountMap = new Map<string, number>();
 
 const FilterUI: React.FC<FilterUIProps> = ({
   allValues,
@@ -76,7 +78,6 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   private reactRoot: Root | null = null;
   private filterButtonClickListener: ((e: Event) => void) | null = null;
   private filterButton: Element | null = null;
-  private hasOpened = false;
 
   private normalizeCellValue(value: unknown): string {
     if (typeof value === 'string') return value.trim() === '' ? EMPTY_KEY : value;
@@ -134,13 +135,25 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
 
     if (this.filterButton) {
       this.filterButtonClickListener = (e: Event) => {
-        if (this.hasOpened) {
-          e.stopPropagation();
+        const clickCount = filterClickCountMap.get(columnId) || 0;
+        filterClickCountMap.set(columnId, clickCount + 1);
+
+        if (clickCount === 0) {
+          e.stopImmediatePropagation();
+          e.preventDefault();
+          this.params.api.hidePopupMenu();
+          filterStateMap.set(columnId, false);
+          return;
+        }
+
+        const isOpen = filterStateMap.get(columnId) || false;
+        if (isOpen) {
+          e.stopImmediatePropagation();
           e.preventDefault();
           this.params.api.hidePopupMenu();
-          this.hasOpened = false;
+          filterStateMap.set(columnId, false);
         } else {
-          this.hasOpened = true;
+          filterStateMap.set(columnId, true);
         }
       };
 

package/src/components/gridForm/GridFormInlineTextInput.tsx

@@ -16,6 +16,7 @@ export interface GridFormInlineTextInput<TData extends GridBaseRow>
   placeholder?: string;
   units?: string;
   onSave?: (props: { selectedRows: TData[]; selectedRowIds: TData['id'][]; value: string }) => MaybePromise<boolean>;
+  onChange?: (props: { selectedRows: TData[]; selectedRowIds: TData['id'][]; value: string }) => void;
   helpText?: string;
 }
 
@@ -103,7 +104,14 @@ export const GridFormInlineTextInput = <TData extends GridBaseRow>(props: GridFo
         ref={inputRef}
         type={'text'}
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (props.onChange) {
+            const selectedRows = getSelectedRows<TData>();
+            const selectedRowIds = selectedRows.map((data) => data.id);
+            props.onChange({ selectedRows, selectedRowIds, value: e.target.value });
+          }
+        }}
         placeholder={props.placeholder ?? 'Type here'}
         onBlur={() => {
           void triggerSave(CloseReason.BLUR);

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

@@ -3,8 +3,9 @@ import '../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
-import { Meta, StoryFn } from '@storybook/react-vite';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useCallback, useContext, useMemo, useState } from 'react';
+import { expect, screen, userEvent, within } from 'storybook/test';
 
 import {
   ActionButton,
@@ -27,6 +28,11 @@ interface IFormTestRow {
   text2: string | null;
 }
 
+const initialRows: IFormTestRow[] = [
+  { id: 1000, text1: 'a text1', text2: 'a text2' },
+  { id: 1001, text1: 'b text1', text2: 'b text2' },
+];
+
 export default {
   title: 'Components / Grids',
   component: Grid,
@@ -42,11 +48,6 @@ export default {
             <Story />
           </GridContextProvider>
         </GridUpdatingContextProvider>
-        <GridUpdatingContextProvider>
-          <GridContextProvider>
-            <Story />
-          </GridContextProvider>
-        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -55,18 +56,7 @@ export default {
 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 [rowData, setRowData] = useState<IFormTestRow[]>(initialRows);
 
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
@@ -183,3 +173,94 @@ const GridInlineTextTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridP
 
 export const _EditInlineText = GridInlineTextTemplate.bind({});
 _EditInlineText.play = waitForGridReady;
+
+const _InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [isDirty, setIsDirty] = useState(false);
+  const [rowData, setRowData] = useState<IFormTestRow[]>(initialRows);
+
+  // Use a named handler for onChange
+  const handleInlineEditChange = () => {
+    setIsDirty(true);
+  };
+
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridInlineTextInput(
+        {
+          field: 'text1',
+          headerName: 'Text input 1',
+        },
+        {
+          editorParams: {
+            placeholder: 'Enter some text...',
+            onChange: handleInlineEditChange,
+            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: {
+            placeholder: 'Enter some text...',
+            onChange: handleInlineEditChange,
+            onSave: ({ selectedRowIds, value }) => {
+              setRowData(rowData.map((data) => (selectedRowIds.includes(data.id) ? { ...data, text2: value } : data)));
+              return true;
+            },
+          },
+        },
+      ),
+    ],
+    [rowData],
+  );
+
+  return (
+    <>
+      <Grid
+        {...props}
+        selectable={true}
+        hideSelectColumn={true}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+        defaultColDef={{ minWidth: 70 }}
+        sizeColumns={'auto'}
+        singleClickEdit={true}
+        enableMultilineBulkEdit={true}
+      />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
+        <button type="button" data-testid="inline-edit-save" disabled={!isDirty} onClick={() => setIsDirty(false)}>
+          Save
+        </button>
+      </div>
+    </>
+  );
+};
+
+export const _InlineText_ChangeEvents = _InlineText_ChangeEventsTemplate.bind({});
+_InlineText_ChangeEvents.play = async (context) => {
+  await waitForGridReady(context);
+  const canvas = within(context.canvasElement);
+  const saveButtons = canvas.getAllByTestId('inline-edit-save');
+  const saveButton = saveButtons[0];
+  await expect(saveButton).toBeDisabled();
+  const textCells = canvas.getAllByText('a text1');
+  await userEvent.click(textCells[0]);
+  const input = await screen.findByPlaceholderText('Enter some text...');
+  await userEvent.type(input, 'X');
+  await expect(saveButton).toBeEnabled();
+};