@linzjs/step-ag-grid 29.1.4 → 29.1.6

package/dist/step-ag-grid.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, pull, compact, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
+import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, compact, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
 import React, { useRef, useLayoutEffect, useEffect, createContext, useContext, useState, useMemo, memo, forwardRef, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1, useId } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 
@@ -2760,7 +2760,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
 /**
  * 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 } = useContext(GridUpdatingContext);
     const gridDivRef = useRef(null);
@@ -3156,7 +3156,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, [clearHighlightRowClasses]);
     const onCellFocused = useCallback((event) => {
-        if (!params.onCellFocused || event.rowIndex == null) {
+        if (!paramsOnCellFocused || event.rowIndex == null) {
             return;
         }
         const api = event.api;
@@ -3170,8 +3170,16 @@ 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 it focus didn't change
+        const { sourceEvent } = event;
+        if (sourceEvent) {
+            if (window.__stepaggrid_lastfocuseventtarget === sourceEvent.target) {
+                return;
+            }
+            window.__stepaggrid_lastfocuseventtarget = sourceEvent.target;
+        }
+        paramsOnCellFocused({ colDef, data });
+    }, [paramsOnCellFocused]);
     const onRowDragEnd = useCallback((event) => {
         clearHighlightRowClasses();
         gridElementRef.current = undefined;
@@ -3254,7 +3262,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
@@ -3399,14 +3407,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
             ? {
@@ -3433,19 +3437,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 }) => {
-    useEffect(() => {
-        defer(() => {
-            stopEditing();
-        });
-    }, [stopEditing]);
-    return jsx(Fragment, {});
-};
 const GenericCellEditorComponentWrapper = (editor) => {
     const obj = { editor };
     return forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
@@ -4008,7 +3999,6 @@ const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick,
     return {
         popoverWrapper,
         triggerSave,
-        gridPopoverOpen: isOpen,
     };
 };
 
@@ -4033,7 +4023,7 @@ const GridFormDropDown = (props) => {
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
     const [filter, setFilter] = useState(props.filterDefaultValue ?? '');
     const [filteredValues, setFilteredValues] = useState();
-    const [options, setOptions] = useState(null);
+    const [options, setOptions] = useState(!!propOptions && typeof propOptions !== 'function' ? propOptions : null);
     const subComponentIsValid = useRef(false);
     const subComponentInitialValue = useRef(null);
     const [subSelectedValue, setSubSelectedValue] = useState(null);
@@ -4100,55 +4090,58 @@ const GridFormDropDown = (props) => {
         selectedRows,
         subSelectedValue,
     ]);
-    const { popoverWrapper, gridPopoverOpen } = useGridPopoverHook({
+    const { popoverWrapper } = useGridPopoverHook({
         className: props.className,
         invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
         save,
         dontSaveOnExternalClick: true,
     });
     // 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;
-            void (async () => {
-                if (typeof optionsConf === 'function') {
-                    optionsConf = await optionsConf(selectedRows, filter);
-                }
-                if (optionsConf !== undefined) {
-                    setOptions(optionsConf);
-                }
-            })();
+        // 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;
+        }
+        // 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 || '', 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 || '', filter) ? option : undefined;
+        })));
     }, [props.filtered, filter, options]);
     const reSearchOnFilterChange = useMemo(() => debounce(() => {
         setOptions(null);
     }, 500), []);
-    const previousFilter = useRef(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 = null;
     let showHeader = null;
     return popoverWrapper(jsxs(Fragment, { children: [props.filtered && (jsxs("div", { className: 'GridFormDropDown-filter', children: [jsx(FocusableItem, { className: 'filter-item', onFocus: () => {
@@ -5537,12 +5530,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;