@linzjs/step-ag-grid 29.1.4 → 29.1.6

package/package.json

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

package/src/components/Grid.tsx

@@ -142,6 +142,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   rowData,
   rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   selectable,
+  onCellFocused: paramsOnCellFocused,
   ...params
 }: GridProps<TData>): ReactElement => {
   const {
@@ -450,7 +451,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const invokeEditAction = (e: CellDoubleClickedEvent | CellKeyDownEvent): boolean => {
     const editAction = e.colDef?.cellRendererParams?.editAction;
     if (!editAction) return false;
-
     const editable = fnOrVar(e.colDef?.editable, e);
     if (editable) {
       if (!e.node.isSelected()) {
@@ -625,7 +625,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   const onCellFocused = useCallback(
     (event: CellFocusedEvent<TData>) => {
-      if (!params.onCellFocused || event.rowIndex == null) {
+      if (!paramsOnCellFocused || event.rowIndex == null) {
         return;
       }
       const api = event.api;
@@ -639,9 +639,17 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       if (!colDef || typeof colDef === 'string') {
         return;
       }
-      params.onCellFocused({ colDef, data });
+      // Prevent repeated callbacks to cell focus when it focus didn't change
+      const { sourceEvent } = event;
+      if (sourceEvent) {
+        if ((window as any).__stepaggrid_lastfocuseventtarget === sourceEvent.target) {
+          return;
+        }
+        (window as any).__stepaggrid_lastfocuseventtarget = sourceEvent.target;
+      }
+      paramsOnCellFocused({ colDef, data });
     },
-    [params],
+    [paramsOnCellFocused],
   );
 
   const onRowDragEnd = useCallback(
@@ -812,6 +820,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           pinnedBottomRowData={params.pinnedBottomRowData}
           onRowClicked={params.onRowClicked}
           onRowDoubleClicked={params.onRowDoubleClicked}
+          suppressStartEditOnTab={true}
         />
       </div>
     </div>

package/src/components/GridCell.tsx

@@ -11,8 +11,7 @@ import {
   ValueFormatterParams,
   ValueGetterFunc,
 } from 'ag-grid-community';
-import { defer } from 'lodash-es';
-import { forwardRef, ReactElement, useContext, useEffect } from 'react';
+import { forwardRef, ReactElement, useContext } from 'react';
 
 import { GridPopoverContextProvider } from '../contexts/GridPopoverContextProvider';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
@@ -155,14 +154,10 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
     resizable: true,
     valueSetter: custom?.editor ? blockValueSetter : undefined,
     editable: props.editable ?? !!custom?.editor,
-    ...(custom?.editor
-      ? {
-          cellClassRules: GridCellMultiSelectClassRules,
-          cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
-        }
-      : {
-          cellEditor: CellEditorToBlockEditing,
-        }),
+    ...(custom?.editor && {
+      cellClassRules: GridCellMultiSelectClassRules,
+      cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
+    }),
     suppressKeyboardEvent: suppressCellKeyboardEvents,
     ...(custom?.editorParams
       ? {
@@ -190,20 +185,6 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
   };
 };
 
-/**
- * Ag-grid will start its own editor if editable is true and there is no cell editor
- * like in the case of a cell that is editable because it triggers a modal.
- * This will block that editor.
- */
-const CellEditorToBlockEditing = ({ stopEditing }: { stopEditing: () => void }) => {
-  useEffect(() => {
-    defer(() => {
-      stopEditing();
-    });
-  }, [stopEditing]);
-  return <></>;
-};
-
 export interface CellEditorCommon {
   className?: string | undefined;
 }

package/src/components/GridPopoverHook.tsx

@@ -110,6 +110,5 @@ export const useGridPopoverHook = <TData extends GridBaseRow>({
   return {
     popoverWrapper,
     triggerSave,
-    gridPopoverOpen: isOpen,
   };
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,5 +1,5 @@
 import debounce from 'debounce-promise';
-import { isEmpty } from 'lodash-es';
+import { compact, isEmpty } from 'lodash-es';
 import { Fragment, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
@@ -90,7 +90,9 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const [filter, setFilter] = useState(props.filterDefaultValue ?? '');
   const [filteredValues, setFilteredValues] = useState<any[]>();
-  const [options, setOptions] = useState<FinalSelectOption<TOptionValue>[] | null>(null);
+  const [options, setOptions] = useState<FinalSelectOption<TOptionValue>[] | null>(
+    !!propOptions && typeof propOptions !== 'function' ? propOptions : null,
+  );
   const subComponentIsValid = useRef(false);
   const subComponentInitialValue = useRef<string | null>(null);
   const [subSelectedValue, setSubSelectedValue] = useState<any>(null);
@@ -164,7 +166,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
     subSelectedValue,
   ]);
 
-  const { popoverWrapper, gridPopoverOpen } = useGridPopoverHook({
+  const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
     save,
@@ -172,39 +174,49 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
   });
 
   // Load up options list if it's async function
-  const prevIsOpen = usePrevious(gridPopoverOpen);
-  const prevFilter = usePrevious(filter);
   useEffect(() => {
-    if ((gridPopoverOpen !== prevIsOpen || filter !== prevFilter) && gridPopoverOpen) {
-      let optionsConf = propOptions;
+    // If options is null then we need to load/reload
+    // Options will be set to null during a reload based filter, or on open popup
+    if (options !== null) {
+      return;
+    }
 
-      void (async () => {
-        if (typeof optionsConf === 'function') {
-          optionsConf = await optionsConf(selectedRows, filter);
-        }
-        if (optionsConf !== undefined) {
-          setOptions(optionsConf);
-        }
-      })();
+    // propOptions is a const list
+    if (typeof propOptions !== 'function') {
+      if (propOptions) {
+        setOptions(propOptions);
+      }
+      return;
     }
-  }, [filter, gridPopoverOpen, options, prevFilter, prevIsOpen, propOptions, selectedRows]);
+
+    // propOptions is function, probably loading from web
+    void (async () => {
+      const r = await propOptions(selectedRows, filter);
+      setOptions(r ?? []);
+    })();
+  }, [filter, options, propOptions, selectedRows]);
 
   // Local filtering.
   useEffect(() => {
-    if (props.filtered == 'local') {
-      if (options == null) return;
-      setFilteredValues(
-        options
-          .map((option) => {
-            if (option.label != null && typeof option.label !== 'string') {
-              console.error('Cannot filter non-string labels', option);
-              return undefined;
-            }
-            return textMatch((option.label as string) || '', filter) ? option : undefined;
-          })
-          .filter((r) => r !== undefined),
-      );
+    if (props.filtered !== 'local') {
+      return;
+    }
+    if (options == null) {
+      setFilteredValues([]);
+      return;
     }
+
+    setFilteredValues(
+      compact(
+        options.map((option) => {
+          if (option.label != null && typeof option.label !== 'string') {
+            console.warn('GridFormDropDown: Cannot filter non-string labels', option);
+            return undefined;
+          }
+          return textMatch((option.label as string) || '', filter) ? option : undefined;
+        }),
+      ),
+    );
   }, [props.filtered, filter, options]);
 
   const reSearchOnFilterChange = useMemo(
@@ -215,15 +227,12 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
     [],
   );
 
-  const previousFilter = useRef<string>(filter);
-
-  // Reload filtering.
+  const previousFilter = usePrevious(filter);
   useEffect(() => {
-    if (previousFilter.current != filter && props.filtered == 'reload') {
-      previousFilter.current = filter;
+    if (previousFilter != null && previousFilter != filter && props.filtered === 'reload') {
       void reSearchOnFilterChange();
     }
-  }, [filter, props, reSearchOnFilterChange]);
+  }, [filter, previousFilter, props.filtered, reSearchOnFilterChange]);
 
   let lastHeader: ReactElement | null = null;
   let showHeader: ReactElement | null = null;

package/src/contexts/GridContext.tsx

@@ -15,6 +15,11 @@ export interface AutoSizeColumnsProps {
 
 export type AutoSizeColumnsResult = { width: number } | null;
 
+export interface StartCellEditingProps {
+  rowId: number;
+  colId: string;
+}
+
 export interface GridContextType<TData extends GridBaseRow> {
   gridReady: boolean;
   gridRenderState: () => null | 'empty' | 'rows-visible';
@@ -43,7 +48,7 @@ export interface GridContextType<TData extends GridBaseRow> {
   getFirstRowId: () => number;
   autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
   sizeColumnsToFit: () => void;
-  startCellEditing: ({ rowId, colId }: { rowId: number; colId: string }) => Promise<void>;
+  startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
   // Restores the previous focus after cell editing
   resetFocusedCellAfterCellEditing: () => void;
   updatingCells: (

package/src/contexts/GridContextProvider.tsx

@@ -596,11 +596,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         const preRow = gridApi.getFocusedCell();
         // If we don't do this ag-grid will do its own continuation of an edit on tab, we don't want that as
         // we are managing it ourselves
-        gridApi.stopEditing();
-        if (tabDirection === 1) {
-          gridApi.tabToNextCell();
-        } else {
-          gridApi.tabToPreviousCell();
+        const didTab = tabDirection === 1 ? gridApi.tabToNextCell() : gridApi.tabToPreviousCell();
+        if (!didTab) {
+          break;
         }
 
         if (gridApi.isDestroyed()) {

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -9,7 +9,6 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  CancelPromise,
   GridContextProvider,
   GridFormEditBearing,
   GridFormEditBearingProps,

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

@@ -275,13 +275,11 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
   await test(() => userEvent.keyboard('{Enter}'), '8', '2');
   expect(multiEditAction).toHaveBeenCalled();
 
-  console.log('Open 2nd to last popup menu, tab to next disabled popup');
-  await test(() => userEvent.tab(), '9', '2');
+  console.log('Open 2nd to last popup menu, tab to next disabled popup should fail');
+  await test(() => userEvent.tab(), '8', '2');
   expect(bulkEditingCallback).toHaveBeenCalled();
   bulkEditingCallback.mockClear();
 
-  console.log('Fail to edit last popup menu, tab back to 2nd to last popup menu');
-  await userEvent.tab({ shift: true });
   console.log('Open 2nd to last popup menu, tab to desc cell');
   await test(() => userEvent.tab({ shift: true }), '5', '2');
   console.log('Cancel edit');
@@ -312,9 +310,9 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
   await userEvent.tab();
 
   expect(eAction).not.toHaveBeenCalled();
-  /*await userEvent.keyboard('{Enter}');
+  await userEvent.keyboard('{Enter}');
   await userEvent.keyboard('e');
   await waitFor(() => {
     expect(eAction).toHaveBeenCalled();
-  });*/
+  });
 };