@linzjs/step-ag-grid 29.1.5 → 29.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.1.5",
+  "version": "29.2.0",
   "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 {
@@ -237,11 +238,29 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
 
   const lastOwnerDocumentRef = useRef<Document>();
+  const wasVisibleRef = useRef(false);
 
   /**
    * Auto-size windows that had deferred auto-size
+   * Reset focus if panel went from invisible to visible.
    */
   useInterval(() => {
+    // If grid has become visible after previously being hidden, then refocus the last focused cell.
+    const visible = !!gridDivRef.current?.checkVisibility();
+    if (visible && !wasVisibleRef.current) {
+      wasVisibleRef.current = true;
+      const el = (window as any).__stepaggrid_lastfocuseventtarget;
+      if (el) {
+        // Setting this to null will cause a new refocus event
+        (window as any).__stepaggrid_lastfocuseventtarget = null;
+        // Check element is still part of document
+        if (el.checkVisibility()) {
+          el.focus();
+        }
+      }
+    }
+    wasVisibleRef.current = visible;
+
     // Check if window has been popped out and needs resize
     const currentDocument = gridDivRef.current?.ownerDocument;
     if (currentDocument !== lastOwnerDocumentRef.current) {
@@ -450,7 +469,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 +643,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   const onCellFocused = useCallback(
     (event: CellFocusedEvent<TData>) => {
-      if (!params.onCellFocused || event.rowIndex == null) {
+      if (event.rowIndex == null) {
         return;
       }
       const api = event.api;
@@ -639,9 +657,19 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       if (!colDef || typeof colDef === 'string') {
         return;
       }
-      params.onCellFocused({ colDef, data });
+      // Prevent repeated callbacks to cell focus when focus didn't change
+      const { sourceEvent } = event;
+      if (sourceEvent) {
+        const cell = (sourceEvent.target as unknown as Element).closest('.ag-cell');
+        if ((window as any).__stepaggrid_lastfocuseventtarget === cell) {
+          return;
+        }
+        (window as any).__stepaggrid_lastfocuseventtarget = cell;
+      }
+
+      paramsOnCellFocused?.({ colDef, data });
     },
-    [params],
+    [paramsOnCellFocused],
   );
 
   const onRowDragEnd = useCallback(
@@ -812,6 +840,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/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/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();
-  });*/
+  });
 };