@linzjs/step-ag-grid 30.4.0 → 30.4.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "30.4.0",
+  "version": "30.4.2",
   "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/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/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/styles/react-menu-customisations.scss

@@ -15,7 +15,7 @@
     @include lui.font-regular();
   }
 
-  li[role="menuitem"]:hover {
+  li[role="menuitem"]:not(.szh-menu__item--disabled):hover {
     background-color: lui.$polar;
   }
 

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(() => {