@linzjs/step-ag-grid 30.3.0 → 30.4.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "30.3.0",
+  "version": "30.4.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -116,7 +116,7 @@
     "eslint-plugin-storybook": "^9.1.17",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.6",

package/src/components/Grid.tsx

@@ -206,7 +206,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const { updatedDep, anyUpdating, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
-  const lastSelectedIds = useRef<TData['id'][] | undefined>();
+  const lastSelectedIds = useRef<TData['id'][]>(undefined);
 
   const [staleGrid, setStaleGrid] = useState(false);
   const [autoSized, setAutoSized] = useState(false);
@@ -299,7 +299,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     }
   }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
 
-  const lastOwnerDocumentRef = useRef<Document>();
+  const lastOwnerDocumentRef = useRef<Document>(undefined);
   const wasVisibleRef = useRef(false);
 
   /**
@@ -858,7 +858,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     });
   }, []);
 
-  const gridElementRef = useRef<Element>();
+  const gridElementRef = useRef<Element>(undefined);
   const onRowDragMove = useCallback(
     (event: RowDragMoveEvent) => {
       if (startDragYRef.current === null) {

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/contexts/GridContextProvider.tsx

@@ -36,11 +36,11 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const [gridReady, setGridReady] = useState(false);
   const [quickFilter, _setQuickFilter] = useState('');
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
-  const testId = useRef<string | undefined>();
+  const testId = useRef<string>(undefined);
   const hasExternallySelectedItemsRef = useRef(false);
   const enableMultilineBulkEditRef = useRef(false);
   const idsBeforeUpdate = useRef<TData['id'][]>([]);
-  const prePopupFocusedCell = useRef<CellPosition>();
+  const prePopupFocusedCell = useRef<CellPosition>(undefined);
   const [externallySelectedItemsAreInSync, _setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
 
@@ -621,7 +621,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     [anyUpdating, gridApi, prePopupOps, setExternallySelectedItemsAreInSync, waitForExternallySelectedItemsToBeInSync],
   );
 
-  const bulkEditingCompleteCallbackRef = useRef<() => Promise<void> | void>();
+  const bulkEditingCompleteCallbackRef = useRef<() => Promise<void> | void>(undefined);
   const onBulkEditingComplete = useCallback(async () => {
     await bulkEditingCompleteCallbackRef.current?.();
   }, []);

package/src/contexts/GridPopoverContext.tsx

@@ -3,7 +3,7 @@ import { createContext, RefObject, useContext } from 'react';
 import { GridBaseRow } from '../components/types';
 
 export interface GridPopoverContextType<TData extends GridBaseRow> {
-  anchorRef: RefObject<Element>;
+  anchorRef: RefObject<Element | undefined>;
   saving: boolean;
   setSaving: (saving: boolean) => void;
   stopEditing: () => void;
@@ -20,7 +20,7 @@ export interface GridPopoverContextType<TData extends GridBaseRow> {
 }
 
 export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
-  anchorRef: { current: null },
+  anchorRef: { current: undefined },
   saving: false,
   setSaving: () => {},
   stopEditing: () => {},

package/src/contexts/GridUpdatingContextProvider.tsx

@@ -35,13 +35,16 @@ export const GridUpdatingContextProvider = (props: PropsWithChildren) => {
         const fieldUpdatingIds = updatingBlocks.current[field] ?? (updatingBlocks.current[field] = []);
         fieldUpdatingIds.push(idRef);
       });
-      resetUpdating();
-      await fn();
-      castArray(fields).forEach((field) => {
-        const fieldUpdatingIds = updatingBlocks.current[field];
-        remove(fieldUpdatingIds, (idList) => idList === idRef);
-      });
-      resetUpdating();
+      try {
+        resetUpdating();
+        await fn();
+      } finally {
+        castArray(fields).forEach((field) => {
+          const fieldUpdatingIds = updatingBlocks.current[field];
+          remove(fieldUpdatingIds, (idList) => idList === idRef);
+        });
+        resetUpdating();
+      }
     },
     [resetUpdating],
   );

package/src/lui/reactUtils.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react';
  * @param value Value to track.
  */
 export const usePrevious = <T,>(value: T): T | undefined => {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   useEffect(() => {
     ref.current = value;
   }, [value]);

package/src/lui/timeoutHook.tsx

@@ -8,7 +8,7 @@ import { useCallback, useEffect, useRef } from 'react';
  * but there's no way to enforce that, so  it would lead to bugs.
  */
 export const useTimeoutHook = () => {
-  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   /**
    * Clear any pending timeouts.

package/src/react-menu3/components/ControlledMenu.tsx

@@ -35,7 +35,7 @@ export const ControlledMenuFr = (
   }: ControlledMenuProps & { saveButtonRef?: MutableRefObject<HTMLButtonElement | null> },
   externalRef: ForwardedRef<HTMLUListElement>,
 ) => {
-  const containerRef = useRef<HTMLElement>();
+  const containerRef = useRef<HTMLElement>(undefined);
   const scrollNodesRef = useRef<{ anchors?: HTMLDivElement[] }>({});
   const { anchorRef, state } = restProps;
 
@@ -114,8 +114,8 @@ export const ControlledMenuFr = (
     [isWithinMenu],
   );
 
-  const lastTabDownEl = useRef<Element>();
-  const lastEnterDownEl = useRef<Element>();
+  const lastTabDownEl = useRef<Element>(undefined);
+  const lastEnterDownEl = useRef<Element>(undefined);
   const handleKeyboardTabAndEnter = useCallback(
     (isDown: boolean) => (ev: KeyboardEvent) => {
       const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;

package/src/react-menu3/components/SubMenu.tsx

@@ -182,7 +182,7 @@ export const SubMenuFr = ({
   const isDisabled = !!disabled;
   const isOpen = isMenuOpen(state);
   const containerRef = useRef(null);
-  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const stopTimer = () => {
     if (timeoutId.current) {

package/src/react-menu3/hooks/useItemState.ts

@@ -14,7 +14,7 @@ export const useItemState = (
 ) => {
   const { submenuCloseDelay } = useContext(ItemSettingsContext);
   const { isParentOpen, isSubmenuOpen, dispatch, updateItems } = useContext(MenuListItemContext);
-  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const setHover = () => {
     !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);

package/src/react-menu3/positionUtils/placeArrowHorizontal.ts

@@ -1,7 +1,7 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 
 export const placeArrowHorizontal = (p: {
-  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrowRef: RefObject<HTMLElement | undefined>;
   menuX: number;
   anchorRect: DOMRect;
   containerRect: DOMRect;

package/src/react-menu3/positionUtils/placeArrowVertical.ts

@@ -1,7 +1,7 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 
 export const placeArrowVertical = (p: {
-  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrowRef: RefObject<HTMLElement | undefined>;
   menuY: number;
   anchorRect: DOMRect;
   containerRect: DOMRect;

package/src/react-menu3/positionUtils/placeLeftorRight.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 
 import { MenuDirection } from '../types';
 import { getPositionHelpers } from './getPositionHelpers';
@@ -9,7 +9,7 @@ export interface placeLeftorRightParams {
   placeLeftorRightY: number;
   placeLeftX: number;
   placeRightX: number;
-  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrowRef: RefObject<HTMLElement | undefined>;
   arrow?: boolean;
   direction: MenuDirection;
   position: 'auto' | 'anchor' | 'initial';

package/src/react-menu3/positionUtils/placeToporBottom.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 
 import { MenuDirection } from '../types';
 import { getPositionHelpers } from './getPositionHelpers';
@@ -9,7 +9,7 @@ export interface placeToporBottomParams {
   placeToporBottomX: number;
   placeTopY: number;
   placeBottomY: number;
-  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrowRef: RefObject<HTMLElement | undefined>;
   arrow?: boolean;
   direction: 'left' | 'right' | 'top' | 'bottom';
   position: 'auto' | 'anchor' | 'initial';

package/src/react-menu3/positionUtils/positionMenu.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 
 import { MenuDirection } from '../types';
 import { getPositionHelpers } from './getPositionHelpers';
@@ -8,8 +8,8 @@ import { placeToporBottom } from './placeToporBottom';
 interface positionMenuProps {
   offsetX: number;
   offsetY: number;
-  arrowRef: MutableRefObject<HTMLDivElement | null>;
-  anchorRef: MutableRefObject<Element | null>;
+  arrowRef: RefObject<HTMLDivElement | undefined>;
+  anchorRef: RefObject<Element | undefined>;
   arrow?: boolean;
   direction: MenuDirection;
   position: 'auto' | 'anchor' | 'initial';

package/src/react-menu3/types.ts

@@ -411,7 +411,7 @@ export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
    *
    * *Don't set this prop for context menu*
    */
-  anchorRef?: React.RefObject<Element>;
+  anchorRef?: React.RefObject<Element | undefined>;
   skipOpen?: React.MutableRefObject<boolean>;
   /**
    * If `true`, the menu list element will gain focus after menu is open.

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();
+};

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

@@ -256,11 +256,20 @@ KeyboardInteractions.play = async ({ canvasElement }) => {
   await userEvent.keyboard('{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}');
 
   // Test enter post focus
-  const test = async (fn: () => any, coldIndex: string, rowIndex: string) => {
+  const test = async (fn: () => Promise<any>, coldIndex: string, rowIndex: string) => {
     await userEvent.keyboard('{Enter}');
+    await waitFor(() => {
+      expect(canvasElement.ownerDocument.querySelector('.szh-menu')).toBeInTheDocument();
+    });
     await wait(1000);
-    await userEvent.keyboard('{arrowdown}{arrowdown}');
-    fn();
+    for (let i = 0; i < 2; i++) {
+      await userEvent.keyboard('{arrowdown}');
+      await waitFor(() => {
+        const menuItems = canvasElement.ownerDocument.querySelectorAll('[role="menuitem"]');
+        expect(menuItems[i]).toHaveClass('szh-menu__item--hover');
+      });
+    }
+    await fn();
 
     await waitFor(() => {
       const activeCell = canvasElement.ownerDocument.activeElement;

package/src/utils/deferredPromise.ts

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 
 export const useDeferredPromise = <T>() => {
-  const promiseResolve = useRef<((value: T | PromiseLike<T>) => void) | undefined>();
-  const promiseReject = useRef<() => void>();
+  const promiseResolve = useRef<(value: T | PromiseLike<T>) => void>(undefined);
+  const promiseReject = useRef<() => void>(undefined);
 
   // End promise on unload
   useEffect(() => {