@linzjs/step-ag-grid 31.2.5 → 32.1.0

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, useShowLUIMessage, LuiStatusSpinner, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
 import React13, { forwardRef, useContext, useRef, useState, useImperativeHandle, useLayoutEffect, useCallback, useMemo, createContext, memo, useEffect, createElement, Suspense, Component as Component$1, useReducer, cloneElement, Fragment as Fragment$1, useId } from 'react';
 import ReactDOM, { createPortal, unstable_batchedUpdates, flushSync } from 'react-dom';
-import { negate, isEmpty, findIndex, defer, debounce as debounce$1, compact, xorBy, last, difference, delay, omit, sortBy, partition, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
+import { negate, isEmpty, findIndex, defer, debounce as debounce$1, compact, xorBy, last, difference, omit, delay, sortBy, partition, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
 import { createRoot } from 'react-dom/client';
 
 /**
@@ -58454,8 +58454,10 @@ function requireLib () {
 }
 
 var libExports = requireLib();
-var natsort = /*@__PURE__*/getDefaultExportFromCjs(libExports);
+var natsortModule = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
+// natsort is a CJS module that sets exports.default, so interop wraps it in an extra layer
+const natsort = natsortModule.default ?? natsortModule;
 const isNotEmpty = negate(isEmpty);
 const wait = (timeoutMs) => new Promise((resolve) => {
     setTimeout(resolve, timeoutMs);
@@ -58497,7 +58499,7 @@ const fnOrVar = (fn, param) => (typeof fn === 'function' ? fn(param) : fn);
 const sanitiseFileName = (filename) => {
     const valid = filename
         .trim()
-        .replaceAll(/(\/|\\)+/g, '-')
+        .replaceAll(/([\/\\])+/g, '-')
         .replaceAll(/\s+/g, '_')
         .replaceAll(/[^\w\-āēīōūĀĒĪŌŪ.]/g, '');
     const parts = valid.split('.');
@@ -59020,14 +59022,6 @@ const useMenuChange = (onMenuChange, isOpen) => {
     }, [onMenuChange, isOpen]);
 };
 
-//#region src/utils.ts
-const PRE_ENTER = 0;
-const ENTERING = 1;
-const ENTERED = 2;
-const PRE_EXIT = 3;
-const EXITING = 4;
-const EXITED = 5;
-const UNMOUNTED = 6;
 const STATUS = [
 	"preEnter",
 	"entering",
@@ -59038,67 +59032,76 @@ const STATUS = [
 	"unmounted"
 ];
 const getState = (status) => ({
-	_s: status,
+	$: status,
 	status: STATUS[status],
-	isEnter: status < PRE_EXIT,
-	isMounted: status !== UNMOUNTED,
-	isResolved: status === ENTERED || status > EXITING
+	isEnter: status < 3,
+	isMounted: status !== 6,
+	isResolved: status === 2 || status > 4
 });
-const startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;
+const startOrEnd = (unmounted) => unmounted ? 6 : 5;
 const getEndStatus = (status, unmountOnExit) => {
 	switch (status) {
-		case ENTERING:
-		case PRE_ENTER: return ENTERED;
-		case EXITING:
-		case PRE_EXIT: return startOrEnd(unmountOnExit);
+		case 1:
+		case 0: return 2;
+		case 4:
+		case 3: return startOrEnd(unmountOnExit);
 	}
 };
 const getTimeout = (timeout) => typeof timeout === "object" ? [timeout.enter, timeout.exit] : [timeout, timeout];
-const _setTimeout = (...args) => setTimeout(...args);
-const nextTick = (transitState, status) => _setTimeout(() => {
-	isNaN(document.body.offsetTop) || transitState(status + 1);
-}, 0);
+const nextTick = (callback, config) => {
+	config.r = requestAnimationFrame(() => {
+		config.r = requestAnimationFrame(callback);
+	});
+};
 
 //#region src/useTransitionState.ts
-const updateState = (status, setState, latestState, timeoutId, onChange) => {
-	clearTimeout(timeoutId.current);
+const updateState = (status, setState, ref, onChange) => {
+	clearTimeout(ref.t);
+	cancelAnimationFrame(ref.r);
 	const state = getState(status);
 	setState(state);
-	latestState.current = state;
-	onChange && onChange({ current: state });
+	ref.s = state;
+	onChange?.({ current: state });
 };
 const useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {
-	const [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
-	const latestState = useRef(state);
-	const timeoutId = useRef(0);
+	const [state, setState] = useState(() => getState(initialEntered ? 2 : startOrEnd(mountOnEnter)));
+	const [ref] = useState({
+		s: state,
+		r: 0
+	});
 	const [enterTimeout, exitTimeout] = getTimeout(timeout);
 	const endTransition = useCallback(() => {
-		const status = getEndStatus(latestState.current._s, unmountOnExit);
-		status && updateState(status, setState, latestState, timeoutId, onChange);
-	}, [onChange, unmountOnExit]);
+		const status = getEndStatus(ref.s.$, unmountOnExit);
+		if (status) updateState(status, setState, ref, onChange);
+	}, [
+		onChange,
+		unmountOnExit,
+		ref
+	]);
 	return [
 		state,
 		useCallback((toEnter) => {
 			const transitState = (status) => {
-				updateState(status, setState, latestState, timeoutId, onChange);
+				updateState(status, setState, ref, onChange);
 				switch (status) {
-					case ENTERING:
-						if (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);
+					case 1:
+						if (enterTimeout >= 0) ref.t = setTimeout(endTransition, enterTimeout);
 						break;
-					case EXITING:
-						if (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);
+					case 4:
+						if (exitTimeout >= 0) ref.t = setTimeout(endTransition, exitTimeout);
 						break;
-					case PRE_ENTER:
-					case PRE_EXIT:
-						timeoutId.current = nextTick(transitState, status);
+					case 0:
+					case 3:
+						nextTick(() => transitState(status + 1), ref);
 						break;
 				}
 			};
-			const enterStage = latestState.current.isEnter;
+			const enterStage = ref.s.isEnter;
 			if (typeof toEnter !== "boolean") toEnter = !enterStage;
-			if (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-			else enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+			if (toEnter) !enterStage && transitState(enter ? preEnter ? 0 : 1 : 2);
+			else enterStage && transitState(exit ? preExit ? 3 : 4 : startOrEnd(unmountOnExit));
 		}, [
+			ref,
 			endTransition,
 			onChange,
 			enter,
@@ -61420,9 +61423,11 @@ maxInitialWidth,
         }
         else {
             const colDefEditable = colDef.editable;
-            const editable = combineEditables(params.loading !== true && params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
+            const ignoreGridReadOnly = colDef.ignoreGridReadOnly === true;
+            const editable = combineEditables(params.loading !== true, ignoreGridReadOnly ? true : params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
             return {
-                ...colDef,
+                // ag-grid warns on unrecognised colDef properties, so it can't be left on the returned colDef
+                ...omit(colDef, 'ignoreGridReadOnly'),
                 editable,
                 cellClassRules: {
                     ...colDef.cellClassRules,
@@ -62693,20 +62698,25 @@ const regexpCache = new Map();
 const sanitizeArray = (input, inputName) => {
 	if (!Array.isArray(input)) {
 		switch (typeof input) {
-			case 'string':
+			case 'string': {
 				input = [input];
 				break;
-			case 'undefined':
+			}
+
+			case 'undefined': {
 				input = [];
 				break;
-			default:
+			}
+
+			default: {
 				throw new TypeError(`Expected '${inputName}' to be a string or an array, but got a type of '${typeof input}'`);
+			}
 		}
 	}
 
 	return input.filter(string => {
 		if (typeof string !== 'string') {
-			if (typeof string === 'undefined') {
+			if (string === undefined) {
 				return false;
 			}
 
@@ -62723,7 +62733,8 @@ const makeRegexp = (pattern, options) => {
 		...options,
 	};
 
-	const cacheKey = pattern + JSON.stringify(options);
+	const flags = 's' + (options.caseSensitive ? '' : 'i'); // Always dotAll, optionally case-insensitive
+	const cacheKey = pattern + '|' + flags;
 
 	if (regexpCache.has(cacheKey)) {
 		return regexpCache.get(cacheKey);
@@ -62735,9 +62746,19 @@ const makeRegexp = (pattern, options) => {
 		pattern = pattern.slice(1);
 	}
 
-	pattern = escapeStringRegexp(pattern).replace(/\\\*/g, '[\\s\\S]*');
+	// Handle escapes: first preserve escaped chars, then convert * to wildcards
+	pattern = pattern
+		.replaceAll(String.raw`\*`, '__ESCAPED_STAR__') // \* -> placeholder
+		.replaceAll('\\\\', '__ESCAPED_BACKSLASH__') // \\ -> placeholder
+		.replaceAll(/\\(.)/g, '$1'); // Other escapes like \<space> -> <space>
+
+	pattern = escapeStringRegexp(pattern).replaceAll(String.raw`\*`, '.*'); // * -> .*
+
+	pattern = pattern
+		.replaceAll('__ESCAPED_STAR__', String.raw`\*`) // Restore escaped *
+		.replaceAll('__ESCAPED_BACKSLASH__', '\\\\'); // Restore escaped \
 
-	const regexp = new RegExp(`^${pattern}$`, options.caseSensitive ? '' : 'i');
+	const regexp = new RegExp(`^${pattern}$`, flags);
 	regexp.negated = negated;
 	regexpCache.set(cacheKey, regexp);
 
@@ -62754,39 +62775,75 @@ const baseMatcher = (inputs, patterns, options, firstMatchOnly) => {
 
 	patterns = patterns.map(pattern => makeRegexp(pattern, options));
 
+	// Partition patterns for faster processing
+	const negatedPatterns = patterns.filter(pattern => pattern.negated);
+	const positivePatterns = patterns.filter(pattern => !pattern.negated);
+
 	const {allPatterns} = {};
 	const result = [];
 
-	for (const input of inputs) {
-		// String is included only if it matches at least one non-negated pattern supplied.
-		// Note: the `allPatterns` option requires every non-negated pattern to be matched once.
-		// Matching a negated pattern excludes the string.
-		let matches;
-		const didFit = [...patterns].fill(false);
+	// Special handling for multiple negations with allPatterns and isMatch
+	if (allPatterns && firstMatchOnly && negatedPatterns.length > 1 && positivePatterns.length === 0) {
+		// Multiple negations only: ALL inputs must satisfy constraints (none should match any negation)
+		for (const input of inputs) {
+			for (const pattern of negatedPatterns) {
+				if (pattern.test(input)) {
+					return []; // Any input matching a negation means no match
+				}
+			}
+		}
 
-		for (const [index, pattern] of patterns.entries()) {
-			if (pattern.test(input)) {
-				didFit[index] = true;
-				matches = !pattern.negated;
+		return inputs.slice(0, 1); // All inputs passed negation constraints
+	}
 
-				if (!matches) {
-					break;
-				}
+	for (const input of inputs) {
+		// Check negated patterns first (immediate exclusion)
+		let excludedByNegation = false;
+		for (const pattern of negatedPatterns) {
+			if (pattern.test(input)) {
+				excludedByNegation = true;
+				break;
 			}
 		}
 
-		if (
-			!(
-				matches === false
-				|| (matches === undefined && patterns.some(pattern => !pattern.negated))
-				|| (allPatterns && didFit.some((yes, index) => !yes && !patterns[index].negated))
-			)
-		) {
+		if (excludedByNegation) {
+			continue; // Skip this input
+		}
+
+		// Check positive patterns
+		if (positivePatterns.length === 0) {
+			// No positive patterns - include if no negations matched (already checked above)
 			result.push(input);
+		} else if (allPatterns) {
+			// AND logic: include if ALL positive patterns match
+			const matchedPositive = Array.from({length: positivePatterns.length}, () => false);
+			for (const [index, pattern] of positivePatterns.entries()) {
+				if (pattern.test(input)) {
+					matchedPositive[index] = true;
+				}
+			}
 
-			{
-				break;
+			// All positive patterns must match
+			if (matchedPositive.every(Boolean)) {
+				result.push(input);
 			}
+		} else {
+			// OR logic: include if any positive pattern matches
+			let matchedAny = false;
+			for (const pattern of positivePatterns) {
+				if (pattern.test(input)) {
+					matchedAny = true;
+					break; // Short-circuit on first match
+				}
+			}
+
+			if (matchedAny) {
+				result.push(input);
+			}
+		}
+
+		if (result.length > 0) {
+			break;
 		}
 	}
 
@@ -62794,7 +62851,7 @@ const baseMatcher = (inputs, patterns, options, firstMatchOnly) => {
 };
 
 function isMatch(inputs, patterns, options) {
-	return baseMatcher(inputs, patterns, options).length > 0;
+	return baseMatcher(inputs, patterns, options, true).length > 0;
 }
 
 /**
@@ -63744,7 +63801,11 @@ const GridFormPopoverMenu = (props) => {
         invalid: () => subComponentSelected && !subComponentIsValid.current,
         save,
     });
-    return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormPopupMenu', children: jsx(Fragment, { children: isEmpty(options) ? (jsx(MenuItem, { className: 'GridPopoverMenu-noOptions', disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === '__isMenuSeparator__' ? (jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxs(Fragment$1, { children: [item.subMenu ? (jsx(SubMenu, { disabled: !!item.disabled, label: item.label, title: item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : '', children: jsx(item.subMenu, {}) })) : (jsx(MenuItem, { onClick: (e) => void onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : '', children: item.label })), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsx(GridSubComponentContext.Provider, { value: {
+    // isEmpty(options) alone isn't enough: options can be a non-empty array where every item is
+    // hidden (e.g. all actions unavailable in a given mode), which must also show "No actions"
+    // rather than rendering an empty menu body.
+    const hasVisibleOption = options?.some((item) => !item.hidden && item.label !== __isMenuSeparator__);
+    return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormPopupMenu', children: jsx(Fragment, { children: !hasVisibleOption ? (jsx(MenuItem, { className: 'GridPopoverMenu-noOptions', disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === '__isMenuSeparator__' ? (jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxs(Fragment$1, { children: [item.subMenu ? (jsx(SubMenu, { disabled: !!item.disabled, label: item.label, title: item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : '', children: jsx(item.subMenu, {}) })) : (jsx(MenuItem, { onClick: (e) => void onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : '', children: item.label })), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsx(GridSubComponentContext.Provider, { value: {
                                 context: {},
                                 data,
                                 value: subSelectedValue,
@@ -63891,9 +63952,57 @@ const GridButton = (colDef, editor) => {
     });
 };
 
+const isNode = typeof process !== 'undefined' && process.env.NODE_ENV === 'test';
+let sharedIntervalId = null;
+const callbacks = new Set();
+const startSharedInterval = () => {
+    if (isNode || sharedIntervalId !== null) {
+        return;
+    }
+    sharedIntervalId = setInterval(() => {
+        callbacks.forEach((cb) => {
+            try {
+                cb();
+            }
+            catch (e) {
+                console.error(e);
+            }
+        });
+    }, 100);
+};
+const stopSharedInterval = () => {
+    if (sharedIntervalId === null) {
+        return;
+    }
+    clearInterval(sharedIntervalId);
+    sharedIntervalId = null;
+};
+/**
+ * Like useInterval, but all callers share a single 100ms interval.
+ * Each callback is isolated in a try/catch so a throwing callback won't prevent others from running.
+ */
+const useSharedInterval = (callback) => {
+    const savedCallback = useRef(callback);
+    useIsomorphicLayoutEffect$1(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        const cb = () => savedCallback.current();
+        callbacks.add(cb);
+        startSharedInterval();
+        return () => {
+            callbacks.delete(cb);
+            if (callbacks.size === 0) {
+                stopSharedInterval();
+            }
+        };
+    }, []);
+};
+
 const BooleanCellRenderer = (props) => {
-    const { onValueChange, value, api, node, column, colDef, data } = props;
+    const { onValueChange, value, api, node, column, colDef, data, eGridCell } = props;
     const inputRef = useRef(null);
+    const { updatingCells, redrawRows, resetFocusedCellAfterCellEditing, prePopupOps } = useGridContext();
     useEffect(() => {
         const checkFocus = (event) => {
             if (event.rowIndex === node.rowIndex && event.column === column) {
@@ -63901,34 +64010,62 @@ const BooleanCellRenderer = (props) => {
             }
         };
         api.addEventListener('cellFocused', checkFocus);
-        return () => {
-            api.removeEventListener('cellFocused', checkFocus);
-        };
+        return () => void api.removeEventListener('cellFocused', checkFocus);
     }, [api, column, node.rowIndex]);
     const isDisabled = !fnOrVar(colDef?.editable, props);
-    return (jsx("div", { className: clsx('ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', {
+    const toggleCheckbox = useCallback(() => {
+        if (!onValueChange) {
+            return;
+        }
+        const params = props?.colDef?.cellEditorParams;
+        if (!params) {
+            return;
+        }
+        const nodes = [];
+        api.forEachNode((n) => {
+            if (n.data.id === data.id) {
+                nodes.push(n);
+            }
+        });
+        prePopupOps();
+        const checked = !value;
+        onValueChange(checked);
+        const field = props.colDef?.field ?? props.colDef?.colId ?? '';
+        const selectedRows = nodes.map((node) => node.data);
+        void updatingCells({ selectedRows, field }, async () => {
+            redrawRows(nodes);
+            return params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked });
+        }).finally(() => {
+            resetFocusedCellAfterCellEditing();
+        });
+    }, [
+        api,
+        data.id,
+        onValueChange,
+        prePopupOps,
+        props.colDef?.cellEditorParams,
+        props.colDef?.colId,
+        props.colDef?.field,
+        redrawRows,
+        resetFocusedCellAfterCellEditing,
+        updatingCells,
+        value,
+    ]);
+    useSharedInterval(() => {
+        if (isDisabled) {
+            return;
+        }
+        const cell = eGridCell?.querySelector('.ag-cell-focus .grid-edit-boolean input.ag-checkbox-input:not(:disabled)');
+        if (cell && cell.ownerDocument.activeElement !== cell) {
+            cell.focus();
+        }
+    });
+    return (jsx("div", { className: clsx('grid-edit-boolean ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', {
             'ag-checked': props.value,
             'ag-disabled': isDisabled,
         }), children: jsx("input", { type: "checkbox", className: "ag-input-field-input ag-checkbox-input", disabled: isDisabled, ref: inputRef, checked: value, onChange: () => { }, onClick: (e) => {
                 e.stopPropagation();
-                // cell has to be in edit mode
-                // if in non-edit mode clickInputWhenContainingCellClicked will click to put it in edit mode
-                if (!onValueChange)
-                    return;
-                const params = props?.colDef?.cellEditorParams;
-                if (!params)
-                    return;
-                // The data cannot be relied upon if grid changed whilst editing, data will be stale
-                // So I get the data from the node itself which will be up to date.
-                const selectedRows = [];
-                api.forEachNode((n) => {
-                    if (n.data.id === data.id) {
-                        selectedRows.push(n.data);
-                    }
-                });
-                const checked = !value;
-                onValueChange(checked);
-                void params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked });
+                toggleCheckbox();
             } }) }));
 };
 const GridEditBoolean = (colDef, editorProps) => {
@@ -63942,7 +64079,7 @@ const GridEditBoolean = (colDef, editorProps) => {
         singleClickEdit: true,
         resizable: false,
         editable: true,
-        cellClass: 'GridCellAlignCenter',
+        cellClass: 'GridCellAlignCenter GridCellEditableWithNoPopup',
         headerClass: 'GridHeaderAlignCenter',
         ...colDef,
     });
@@ -64037,6 +64174,9 @@ const GridPopoverMenu = (colDef, custom) => GridCell({
     editable: colDef.editable != null ? colDef.editable : true,
     exportable: false,
     cellStyle: { flex: 1, justifyContent: 'center' },
+    suppressMovable: true,
+    lockPosition: 'right',
+    resizable: false,
     cellRenderer: GridRenderPopoutMenuCell,
     // Menus open on single click, this parameter is picked up in Grid.tsx
     singleClickEdit: true,
@@ -64530,15 +64670,19 @@ const GridContextProvider = (props) => {
         if (!gridApi) {
             return true;
         }
+        /**
+         * @returns true if editable with a popup, false if editable without popup, null if not editable
+         */
         const focusedCellIsEditable = () => {
             const focusedCell = gridApi.isDestroyed() ? null : gridApi.getFocusedCell();
             const nextColumn = focusedCell?.column;
             const nextColDef = nextColumn?.getColDef();
             const rowNode = focusedCell && gridApi.getDisplayedRowAtIndex(focusedCell?.rowIndex);
+            const popupable = String(nextColDef?.cellClass).indexOf("GridCellEditableWithNoPopup") === -1;
             return (!!(rowNode && nextColumn && nextColDef) &&
                 nextColumn.isCellEditable(rowNode) &&
                 !nextColDef.cellEditorParams?.preventAutoEdit &&
-                !nextColDef.cellRendererParams?.editAction);
+                !nextColDef.cellRendererParams?.editAction) ? popupable : null;
         };
         // Just in case I've missed something, we don't want the loop to hang everything
         for (let maxIterations = 0; maxIterations < 50; maxIterations++) {
@@ -64571,7 +64715,10 @@ const GridContextProvider = (props) => {
                     break;
                 }
             }
-            if (focusedCellIsEditable()) {
+            // checkbox cells are editable but don't have a popup
+            // we need to end bulk editing and just select the cell
+            const editable = focusedCellIsEditable();
+            if (editable !== null) {
                 const focusedCell = gridApi.getFocusedCell();
                 if (focusedCell) {
                     const rowNode = gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
@@ -64579,8 +64726,15 @@ const GridContextProvider = (props) => {
                     if (rowId == null) {
                         return false;
                     }
-                    await startCellEditing({ rowId, colId: focusedCell.column.getColId() });
-                    return true;
+                    if (editable) {
+                        await startCellEditing({ rowId, colId: focusedCell.column.getColId() });
+                        // Continue bulk edit
+                        return true;
+                    }
+                    else {
+                        // This will terminate bulk editing as there was no popup editor
+                        return false;
+                    }
                 }
             }
         }