@linzjs/step-ag-grid 29.1.1 → 29.1.3

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

@@ -65,7 +65,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
      * When pressing tab whilst editing the grid will select and edit the next cell if available.
      * Once the last cell to edit closes this callback is called.
      */
-    onBulkEditingComplete?: () => void;
+    onBulkEditingComplete?: () => Promise<void> | void;
     /**
      * Context menu definition if required.
      */

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

@@ -6,7 +6,8 @@ export interface GridPopoverHookProps<TData> {
     save?: (selectedRows: TData[]) => Promise<boolean>;
     dontSaveOnExternalClick?: boolean;
 }
-export declare const useGridPopoverHook: <TData extends GridBaseRow>(props: GridPopoverHookProps<TData>) => {
+export declare const CancelPromise: () => Promise<boolean>;
+export declare const useGridPopoverHook: <TData extends GridBaseRow>({ className, save, invalid, dontSaveOnExternalClick, }: GridPopoverHookProps<TData>) => {
     popoverWrapper: (children: ReactElement) => import("react/jsx-runtime").JSX.Element;
     triggerSave: (reason?: string) => Promise<void>;
 };

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

@@ -57,8 +57,8 @@ export interface GridContextType<TData extends GridBaseRow> {
     invisibleColumnIds: string[] | undefined;
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;
-    onBulkEditingComplete: () => void;
-    setOnBulkEditingComplete: (callback: (() => void) | undefined) => void;
+    onBulkEditingComplete: () => Promise<void> | void;
+    setOnBulkEditingComplete: (callback: (() => Promise<void> | void) | undefined) => void;
     showNoRowsOverlay: () => void;
 }
 export declare const GridContext: import("react").Context<GridContextType<any>>;

package/dist/src/index.d.ts

@@ -17,3 +17,4 @@ export * from './utils/deferredPromise';
 export * from './utils/textMatcher';
 export * from './utils/textValidator';
 export * from './utils/util';
+export * from './utils/waitForCondition';

package/dist/src/utils/waitForCondition.d.ts

@@ -0,0 +1 @@
+export declare const waitForCondition: (error: string, condition: () => boolean, timeoutMs: number) => Promise<boolean>;

package/dist/step-ag-grid.cjs

@@ -3400,20 +3400,25 @@ const GridCell = (props, custom) => {
         sortable: true,
         resizable: true,
         valueSetter: custom?.editor ? blockValueSetter : undefined,
-        editable: props.editable ?? false,
-        ...(custom?.editor && {
-            cellClassRules: GridCellMultiSelectClassRules,
-            editable: props.editable ?? true,
-            cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
-        }),
+        editable: props.editable ?? !!custom?.editor,
+        ...(custom?.editor
+            ? {
+                cellClassRules: GridCellMultiSelectClassRules,
+                cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
+            }
+            : {
+                cellEditor: CellEditorToBlockEditing,
+            }),
         suppressKeyboardEvent: suppressCellKeyboardEvents,
-        ...(custom?.editorParams && {
-            cellEditorParams: {
-                ...custom.editorParams,
-                multiEdit: custom.multiEdit,
-                preventAutoEdit: custom.preventAutoEdit ?? false,
-            },
-        }),
+        ...(custom?.editorParams
+            ? {
+                cellEditorParams: {
+                    ...custom.editorParams,
+                    multiEdit: custom.multiEdit,
+                    preventAutoEdit: custom.preventAutoEdit ?? !custom?.editor,
+                },
+            }
+            : { cellEditorParams: { preventAutoEdit: !custom?.editor } }),
         // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
         getQuickFilterText: filterValueGetter,
         // Default value formatter, otherwise react freaks out on objects
@@ -3430,6 +3435,19 @@ 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, _) {
@@ -3938,8 +3956,8 @@ const textMatch = (text, filter) => {
             negativeFilters.every((superFilter) => values.every((value) => isMatch(value, superFilter)))));
 };
 
-const useGridPopoverHook = (props) => {
-    const { onBulkEditingComplete } = useGridContext();
+const CancelPromise = () => Promise.resolve(true);
+const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick, }) => {
     const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext();
     const saveButtonRef = React.useRef(null);
     const [isOpen, setOpen] = React.useState(false);
@@ -3948,24 +3966,18 @@ const useGridPopoverHook = (props) => {
     }, []);
     const triggerSave = React.useCallback(async (reason) => {
         if (reason == CloseReason.CANCEL) {
+            await updateValue(CancelPromise, 0);
             stopEditing();
-            onBulkEditingComplete();
             return;
         }
-        if (props?.invalid?.()) {
+        if (invalid?.()) {
             // Don't close, don't do anything it's invalid
             return;
         }
-        if (!props.save) {
-            // No save method so just close
-            stopEditing();
-            onBulkEditingComplete();
-            return;
-        }
-        if (await updateValue(props.save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)) {
+        if (await updateValue(save ?? (() => Promise.resolve(true)), reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)) {
             stopEditing();
         }
-    }, [onBulkEditingComplete, props, stopEditing, updateValue]);
+    }, [invalid, save, stopEditing, updateValue]);
     const popoverWrapper = React.useCallback((children) => {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, { state: isOpen ? 'open' : 'closed', portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: 'step-ag-grid-react-menu', onClose: (event) => {
                     // Prevent menu from closing when modals are invoked
@@ -3973,15 +3985,15 @@ const useGridPopoverHook = (props) => {
                         return;
                     }
                     void triggerSave(event.reason);
-                }, viewScroll: 'auto', dontShrinkIfDirectionIsTop: true, className: props.className, children: [saving && ( // This is the overlay that prevents editing when the editor is saving
+                }, viewScroll: 'auto', dontShrinkIfDirectionIsTop: true, className: className, children: [saving && ( // This is the overlay that prevents editing when the editor is saving
                     jsxRuntime.jsx("div", { className: 'ComponentLoadingWrapper-saveOverlay' })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, "data-reason": '', onClick: (e) => {
                             let reason = e.currentTarget.getAttribute('data-reason') ?? undefined;
-                            if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
+                            if (dontSaveOnExternalClick && reason === CloseReason.BLUR) {
                                 reason = CloseReason.CANCEL;
                             }
                             void triggerSave(reason);
                         }, style: { display: 'none' } })] })) }));
-    }, [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave]);
+    }, [anchorRef, isOpen, className, dontSaveOnExternalClick, saving, triggerSave]);
     return {
         popoverWrapper,
         triggerSave,
@@ -3991,7 +4003,7 @@ const useGridPopoverHook = (props) => {
 const primitiveToSelectOption = (value) => {
     return {
         value: value,
-        label: value ? String(value) : '',
+        label: value ? String(value) : '-',
     };
 };
 const MenuSeparatorString = '_____MENU_SEPARATOR_____';
@@ -4083,7 +4095,13 @@ const GridFormDropDown = (props) => {
         if (selectedItem === null) {
             if (props.onSelectFilter) {
                 const { onSelectFilter } = props;
-                await onSelectFilter({ selectedRows, selectedRowIds: selectedRows.map((row) => row.id), value: filter });
+                if (!lodashEs.isEmpty(filter)) {
+                    await onSelectFilter({
+                        selectedRows,
+                        selectedRowIds: selectedRows.map((row) => row.id),
+                        value: filter,
+                    });
+                }
                 return true;
             }
             else {
@@ -4113,7 +4131,7 @@ const GridFormDropDown = (props) => {
                             setSubSelectedValue(null);
                             subComponentIsValid.current = true;
                         }, children: ({ ref }) => (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [jsxRuntime.jsx("input", { className: 'LuiTextInput-input', ref: ref, type: "text", placeholder: props.filterPlaceholder ?? 'Filter...', "data-testid": 'filteredMenu-free-text-input', defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter &&
-                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value) }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.jsx(MenuItem, { className: 'GridPopoverEditDropDown-noOptions', disabled: true, children: props.noOptionsMessage ?? 'No Options' }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
+                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value.trim()) }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.jsx(MenuItem, { className: 'GridPopoverEditDropDown-noOptions', disabled: true, children: props.noOptionsMessage ?? 'No Options' }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
                             showHeader = null;
                             if (item.value === MenuSeparatorString) {
                                 return jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`);
@@ -4343,11 +4361,13 @@ const GridFormMultiSelect = (props) => {
             props.invalid(selectedRows, options.filter((o) => o.checked)));
     }, [options, props, selectedRows]);
     const save = React.useCallback(async (selectedRows) => {
-        if (!options || !props.onSave)
+        if (!options || !props.onSave) {
             return true;
+        }
         // Any changes to save?
-        if (initialValues === JSON.stringify(options))
+        if (initialValues === JSON.stringify(options)) {
             return true;
+        }
         return props.onSave({
             selectedRows,
             selectedOptions: options.filter((o) => o.checked),
@@ -4440,8 +4460,9 @@ const FilterInput = (props) => {
         setOptions([...options]);
     }, [filter, headerGroups, options, setOptions]);
     const addCustomFilterValue = React.useCallback(() => {
-        if (!options || !onSelectFilter)
+        if (!options || !onSelectFilter) {
             return;
+        }
         const filterTrimmed = filter.trim();
         if (lodashEs.isEmpty(filterTrimmed)) {
             void triggerSave();
@@ -4450,8 +4471,9 @@ const FilterInput = (props) => {
         const preFilterOptions = JSON.stringify(options);
         onSelectFilter({ filter: filterTrimmed, options });
         // Detect if options list changed and update
-        if (preFilterOptions === JSON.stringify(options))
+        if (preFilterOptions === JSON.stringify(options)) {
             return;
+        }
         setOptions([...options]);
         setFilter('');
     }, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
@@ -5046,6 +5068,7 @@ const GridPopoverMessage = (colDef, props) => GridCell({
     singleClickEdit: true,
 }, {
     editor: GridFormMessage,
+    preventAutoEdit: true,
     ...props,
 });
 
@@ -5061,6 +5084,18 @@ const GridWrapper = ({ children, maxHeight }) => (jsxRuntime.jsx("div", { classN
 const getColId = (colDef) => colDef.colId ?? '';
 const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
 
+const waitForCondition = async (error, condition, timeoutMs) => {
+    const endTime = Date.now() + timeoutMs;
+    while (Date.now() < endTime) {
+        if (condition()) {
+            return true;
+        }
+        await wait(100);
+    }
+    console.warn(error);
+    return false;
+};
+
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
@@ -5406,8 +5441,7 @@ const GridContextProvider = (props) => {
         startCellEditingInProgressRef.current = true;
         try {
             // Edit in progress so don't edit until finished, timeout waiting after 5s
-            if (!(await waitForCondition(() => !anyUpdating(), 5000))) {
-                console.error("Could not start edit because previous edit hasn't finished after 5 seconds");
+            if (!(await waitForCondition('startCellEditing failed as update still in progress, waited for 15 seconds', () => !anyUpdating(), 15000))) {
                 return;
             }
             const colDef = gridApi.getColumnDef(colId);
@@ -5429,11 +5463,12 @@ const GridContextProvider = (props) => {
             const rowIndex = rowNode.rowIndex;
             if (rowIndex != null) {
                 lodashEs.defer(() => {
-                    !gridApi.isDestroyed() &&
+                    if (!gridApi.isDestroyed()) {
                         gridApi.startEditingCell({
                             rowIndex,
                             colKey: colId,
                         });
+                    }
                 });
             }
         }
@@ -5442,9 +5477,9 @@ const GridContextProvider = (props) => {
         }
     }, [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
     const bulkEditingCompleteCallbackRef = React.useRef();
-    const onBulkEditingComplete = React.useCallback(() => {
+    const onBulkEditingComplete = React.useCallback(async () => {
         resetFocusedCellAfterCellEditing();
-        bulkEditingCompleteCallbackRef.current?.();
+        await bulkEditingCompleteCallbackRef.current?.();
     }, [resetFocusedCellAfterCellEditing]);
     const setOnBulkEditingComplete = React.useCallback((cellEditingCompleteCallback) => {
         bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
@@ -5475,8 +5510,10 @@ const GridContextProvider = (props) => {
             // Prevent resetting focus to original editing cell
             prePopupFocusedCell.current = undefined;
             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.stopEditing();
                 gridApi.tabToNextCell();
             }
             else {
@@ -5513,29 +5550,25 @@ const GridContextProvider = (props) => {
                 const selectedRows = props.selectedRows;
                 let ok = false;
                 await modifyUpdating(props.field ?? '', selectedRows.map((data) => data.id), async () => {
-                    // MATT Disabled I don't believe these are needed anymore
-                    // I've left them here just in case they are
                     // Need to refresh to get spinners to work on all rows
-                    // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
+                    gridApi.refreshCells({ rowNodes: props.selectedRows, force: true });
                     ok = await fnUpdate(selectedRows).catch((ex) => {
                         console.error('Exception during modifyUpdating', ex);
                         return false;
                     });
                 });
-                // MATT Disabled I don't believe these are needed anymore
-                // I've left them here just in case they are
                 // async processes need to refresh their own rows
-                // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
+                gridApi.refreshCells({ rowNodes: selectedRows, force: true });
                 if (gridApi.isDestroyed()) {
                     return ok;
                 }
                 if (ok) {
-                    const cell = gridApi.getFocusedCell();
-                    if (cell && gridApi.getFocusedCell() == null) {
-                        !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
-                    }
+                    //const cell = gridApi.getFocusedCell();
+                    //if (cell && gridApi.getFocusedCell() == null) {
+                    //  !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
+                    // }
                     // This is needed to trigger postSortRowsHook
-                    gridApi.refreshClientSideRowModel();
+                    !gridApi.isDestroyed && gridApi.refreshClientSideRowModel();
                 }
                 void (async () => {
                     // Only focus next cell if user hasn't already manually changed focus
@@ -5545,11 +5578,11 @@ const GridContextProvider = (props) => {
                         prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
                         prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
                         if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
-                            onBulkEditingComplete();
+                            await onBulkEditingComplete();
                         }
                     }
                     else {
-                        onBulkEditingComplete();
+                        await onBulkEditingComplete();
                     }
                 })();
                 return ok;
@@ -5733,17 +5766,6 @@ const downloadCsvUseValueFormattersProcessCellCallback = (params) => {
     // We add an extra encodeToString here just in case valueFormatter is returning non string values
     return encodeToString(result);
 };
-const waitForCondition = async (condition, timeoutMs) => {
-    const endTime = Date.now() + timeoutMs;
-    while (Date.now() < endTime) {
-        if (condition()) {
-            return true;
-        }
-        await wait(100);
-    }
-    console.warn('waitForCondition failed');
-    return false;
-};
 
 const GridUpdatingContextProvider = (props) => {
     const updatingBlocks = React.useRef({});
@@ -5872,6 +5894,7 @@ const useDeferredPromise = () => {
 };
 
 exports.ActionButton = ActionButton;
+exports.CancelPromise = CancelPromise;
 exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
 exports.ControlledMenu = ControlledMenu;
 exports.Editor = Editor;
@@ -5973,4 +5996,5 @@ exports.useGridPopoverHook = useGridPopoverHook;
 exports.useMenuState = useMenuState;
 exports.usePostSortRowsHook = usePostSortRowsHook;
 exports.wait = wait;
+exports.waitForCondition = waitForCondition;
 //# sourceMappingURL=step-ag-grid.cjs.map