@linzjs/step-ag-grid 29.1.1 → 29.1.3

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

@@ -3398,20 +3398,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
@@ -3428,6 +3433,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 }) => {
+    useEffect(() => {
+        defer(() => {
+            stopEditing();
+        });
+    }, [stopEditing]);
+    return jsx(Fragment, {});
+};
 const GenericCellEditorComponentWrapper = (editor) => {
     const obj = { editor };
     return forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
@@ -3936,8 +3954,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 = useRef(null);
     const [isOpen, setOpen] = useState(false);
@@ -3946,24 +3964,18 @@ const useGridPopoverHook = (props) => {
     }, []);
     const triggerSave = 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 = useCallback((children) => {
         return (jsx(Fragment, { children: anchorRef.current && (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
@@ -3971,15 +3983,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
                     jsx("div", { className: 'ComponentLoadingWrapper-saveOverlay' })), children, 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,
@@ -3989,7 +4001,7 @@ const useGridPopoverHook = (props) => {
 const primitiveToSelectOption = (value) => {
     return {
         value: value,
-        label: value ? String(value) : '',
+        label: value ? String(value) : '-',
     };
 };
 const MenuSeparatorString = '_____MENU_SEPARATOR_____';
@@ -4081,7 +4093,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 (!isEmpty(filter)) {
+                    await onSelectFilter({
+                        selectedRows,
+                        selectedRowIds: selectedRows.map((row) => row.id),
+                        value: filter,
+                    });
+                }
                 return true;
             }
             else {
@@ -4111,7 +4129,7 @@ const GridFormDropDown = (props) => {
                             setSubSelectedValue(null);
                             subComponentIsValid.current = true;
                         }, children: ({ ref }) => (jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [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) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsx(MenuDivider, {}, `$$divider_filter`)] })), jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxs(Fragment, { children: [options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (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) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsx(MenuDivider, {}, `$$divider_filter`)] })), jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxs(Fragment, { children: [options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (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 jsx(MenuDivider, {}, `$$divider_${index}`);
@@ -4341,11 +4359,13 @@ const GridFormMultiSelect = (props) => {
             props.invalid(selectedRows, options.filter((o) => o.checked)));
     }, [options, props, selectedRows]);
     const save = 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),
@@ -4438,8 +4458,9 @@ const FilterInput = (props) => {
         setOptions([...options]);
     }, [filter, headerGroups, options, setOptions]);
     const addCustomFilterValue = useCallback(() => {
-        if (!options || !onSelectFilter)
+        if (!options || !onSelectFilter) {
             return;
+        }
         const filterTrimmed = filter.trim();
         if (isEmpty(filterTrimmed)) {
             void triggerSave();
@@ -4448,8 +4469,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]);
@@ -5044,6 +5066,7 @@ const GridPopoverMessage = (colDef, props) => GridCell({
     singleClickEdit: true,
 }, {
     editor: GridFormMessage,
+    preventAutoEdit: true,
     ...props,
 });
 
@@ -5059,6 +5082,18 @@ const GridWrapper = ({ children, maxHeight }) => (jsx("div", { className: 'Grid-
 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.
@@ -5404,8 +5439,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);
@@ -5427,11 +5461,12 @@ const GridContextProvider = (props) => {
             const rowIndex = rowNode.rowIndex;
             if (rowIndex != null) {
                 defer(() => {
-                    !gridApi.isDestroyed() &&
+                    if (!gridApi.isDestroyed()) {
                         gridApi.startEditingCell({
                             rowIndex,
                             colKey: colId,
                         });
+                    }
                 });
             }
         }
@@ -5440,9 +5475,9 @@ const GridContextProvider = (props) => {
         }
     }, [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
     const bulkEditingCompleteCallbackRef = useRef();
-    const onBulkEditingComplete = useCallback(() => {
+    const onBulkEditingComplete = useCallback(async () => {
         resetFocusedCellAfterCellEditing();
-        bulkEditingCompleteCallbackRef.current?.();
+        await bulkEditingCompleteCallbackRef.current?.();
     }, [resetFocusedCellAfterCellEditing]);
     const setOnBulkEditingComplete = useCallback((cellEditingCompleteCallback) => {
         bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
@@ -5473,8 +5508,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 {
@@ -5511,29 +5548,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
@@ -5543,11 +5576,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;
@@ -5731,17 +5764,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 = useRef({});
@@ -5869,5 +5891,5 @@ const useDeferredPromise = () => {
     };
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, TextInputValidator, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, convertDDToDMS, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, TextInputValidator, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, convertDDToDMS, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
 //# sourceMappingURL=step-ag-grid.esm.js.map