@linzjs/step-ag-grid 29.1.5 → 29.2.0

package/dist/src/components/Grid.d.ts

@@ -88,4 +88,4 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, ...params }: GridProps<TData>) => ReactElement;
+export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, onCellFocused: paramsOnCellFocused, ...params }: GridProps<TData>) => ReactElement;

package/dist/src/contexts/GridContext.d.ts

@@ -11,6 +11,10 @@ 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';
@@ -37,10 +41,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>;
     resetFocusedCellAfterCellEditing: () => void;
     updatingCells: (props: {
         selectedRows: GridBaseRow[];

package/dist/step-ag-grid.cjs

@@ -2762,7 +2762,7 @@ agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.AllCommunityModu
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, ...params }) => {
+const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, ...params }) => {
     const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing, } = useGridContext();
     const { updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
     const gridDivRef = React.useRef(null);
@@ -2828,10 +2828,27 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         needsAutoSize.current = false;
     }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = React.useRef();
+    const wasVisibleRef = React.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.__stepaggrid_lastfocuseventtarget;
+            if (el) {
+                // Setting this to null will cause a new refocus event
+                window.__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) {
@@ -3158,7 +3175,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, [clearHighlightRowClasses]);
     const onCellFocused = React.useCallback((event) => {
-        if (!params.onCellFocused || event.rowIndex == null) {
+        if (event.rowIndex == null) {
             return;
         }
         const api = event.api;
@@ -3172,8 +3189,17 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         if (!colDef || typeof colDef === 'string') {
             return;
         }
-        params.onCellFocused({ colDef, data });
-    }, [params]);
+        // Prevent repeated callbacks to cell focus when focus didn't change
+        const { sourceEvent } = event;
+        if (sourceEvent) {
+            const cell = sourceEvent.target.closest('.ag-cell');
+            if (window.__stepaggrid_lastfocuseventtarget === cell) {
+                return;
+            }
+            window.__stepaggrid_lastfocuseventtarget = cell;
+        }
+        paramsOnCellFocused?.({ colDef, data });
+    }, [paramsOnCellFocused]);
     const onRowDragEnd = React.useCallback((event) => {
         clearHighlightRowClasses();
         gridElementRef.current = undefined;
@@ -3256,7 +3282,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                             enableClickSelection: params.enableClickSelection ?? false,
                             mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
                         }
-                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked }) })] }));
+                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
 };
 const quickFilterParser = (filterStr) => {
     // filter is exact matches exactly groups separated by commas
@@ -3401,14 +3427,10 @@ const GridCell = (props, custom) => {
         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
             ? {
@@ -3435,19 +3457,6 @@ const GridCell = (props, custom) => {
         },
     };
 };
-/**
- * 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 }) => {
-    React.useEffect(() => {
-        lodashEs.defer(() => {
-            stopEditing();
-        });
-    }, [stopEditing]);
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-};
 const GenericCellEditorComponentWrapper = (editor) => {
     const obj = { editor };
     return React.forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
@@ -5541,12 +5550,9 @@ const GridContextProvider = (props) => {
             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()) {
                 return true;