@linzjs/step-ag-grid 25.0.1 → 26.0.1

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

@@ -1,43 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
-import { RowHighlightPosition } from 'ag-grid-community';
+import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, findIndex, defer as defer$1, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, compact, filter, sumBy, remove, pull, castArray, flatten } from 'lodash-es';
+import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, compact, filter, sumBy, remove, pull, castArray, flatten } 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';
 
-/**
- * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
- * This passes the event to the checkbox when you click anywhere in the cell.
- */
-const clickInputWhenContainingCellClicked = (params) => {
-    const { data, event, colDef } = params;
-    if (!data || !event)
-        return;
-    const element = event.target;
-    // Already handled
-    if (element.closest('.GridCell-readonly') ||
-        (['BUTTON', 'INPUT'].includes(element?.tagName) && element.closest('.ag-cell-inline-editing'))) {
-        return;
-    }
-    const row = element.closest('[row-id]');
-    if (!row)
-        return;
-    const colId = colDef.colId;
-    if (!colId)
-        return;
-    const clickInput = () => {
-        const cell = row.querySelector(`[col-id='${colId}']`);
-        if (!cell)
-            return;
-        const input = cell.querySelector('input, button');
-        if (!input)
-            return;
-        input?.dispatchEvent(event);
-    };
-    setTimeout(clickInput, 20);
-};
-
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
  */
@@ -62,14 +30,384 @@ function getDefaultExportFromCjs (x) {
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+var lodash_debounce;
+var hasRequiredLodash_debounce;
+
+function requireLodash_debounce () {
+	if (hasRequiredLodash_debounce) return lodash_debounce;
+	hasRequiredLodash_debounce = 1;
+	/** Used as the `TypeError` message for "Functions" methods. */
+	var FUNC_ERROR_TEXT = 'Expected a function';
+
+	/** Used as references for various `Number` constants. */
+	var NAN = 0 / 0;
+
+	/** `Object#toString` result references. */
+	var symbolTag = '[object Symbol]';
+
+	/** Used to match leading and trailing whitespace. */
+	var reTrim = /^\s+|\s+$/g;
+
+	/** Used to detect bad signed hexadecimal string values. */
+	var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+	/** Used to detect binary string values. */
+	var reIsBinary = /^0b[01]+$/i;
+
+	/** Used to detect octal string values. */
+	var reIsOctal = /^0o[0-7]+$/i;
+
+	/** Built-in method references without a dependency on `root`. */
+	var freeParseInt = parseInt;
+
+	/** Detect free variable `global` from Node.js. */
+	var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+	/** Detect free variable `self`. */
+	var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+	/** Used as a reference to the global object. */
+	var root = freeGlobal || freeSelf || Function('return this')();
+
+	/** Used for built-in method references. */
+	var objectProto = Object.prototype;
+
+	/**
+	 * Used to resolve the
+	 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+	 * of values.
+	 */
+	var objectToString = objectProto.toString;
+
+	/* Built-in method references for those with the same name as other `lodash` methods. */
+	var nativeMax = Math.max,
+	    nativeMin = Math.min;
+
+	/**
+	 * Gets the timestamp of the number of milliseconds that have elapsed since
+	 * the Unix epoch (1 January 1970 00:00:00 UTC).
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 2.4.0
+	 * @category Date
+	 * @returns {number} Returns the timestamp.
+	 * @example
+	 *
+	 * _.defer(function(stamp) {
+	 *   console.log(_.now() - stamp);
+	 * }, _.now());
+	 * // => Logs the number of milliseconds it took for the deferred invocation.
+	 */
+	var now = function() {
+	  return root.Date.now();
+	};
 
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+	/**
+	 * Creates a debounced function that delays invoking `func` until after `wait`
+	 * milliseconds have elapsed since the last time the debounced function was
+	 * invoked. The debounced function comes with a `cancel` method to cancel
+	 * delayed `func` invocations and a `flush` method to immediately invoke them.
+	 * Provide `options` to indicate whether `func` should be invoked on the
+	 * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+	 * with the last arguments provided to the debounced function. Subsequent
+	 * calls to the debounced function return the result of the last `func`
+	 * invocation.
+	 *
+	 * **Note:** If `leading` and `trailing` options are `true`, `func` is
+	 * invoked on the trailing edge of the timeout only if the debounced function
+	 * is invoked more than once during the `wait` timeout.
+	 *
+	 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+	 * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+	 *
+	 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+	 * for details over the differences between `_.debounce` and `_.throttle`.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Function
+	 * @param {Function} func The function to debounce.
+	 * @param {number} [wait=0] The number of milliseconds to delay.
+	 * @param {Object} [options={}] The options object.
+	 * @param {boolean} [options.leading=false]
+	 *  Specify invoking on the leading edge of the timeout.
+	 * @param {number} [options.maxWait]
+	 *  The maximum time `func` is allowed to be delayed before it's invoked.
+	 * @param {boolean} [options.trailing=true]
+	 *  Specify invoking on the trailing edge of the timeout.
+	 * @returns {Function} Returns the new debounced function.
+	 * @example
+	 *
+	 * // Avoid costly calculations while the window size is in flux.
+	 * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+	 *
+	 * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+	 * jQuery(element).on('click', _.debounce(sendMail, 300, {
+	 *   'leading': true,
+	 *   'trailing': false
+	 * }));
+	 *
+	 * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+	 * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+	 * var source = new EventSource('/stream');
+	 * jQuery(source).on('message', debounced);
+	 *
+	 * // Cancel the trailing debounced invocation.
+	 * jQuery(window).on('popstate', debounced.cancel);
+	 */
+	function debounce(func, wait, options) {
+	  var lastArgs,
+	      lastThis,
+	      maxWait,
+	      result,
+	      timerId,
+	      lastCallTime,
+	      lastInvokeTime = 0,
+	      leading = false,
+	      maxing = false,
+	      trailing = true;
+
+	  if (typeof func != 'function') {
+	    throw new TypeError(FUNC_ERROR_TEXT);
+	  }
+	  wait = toNumber(wait) || 0;
+	  if (isObject(options)) {
+	    leading = !!options.leading;
+	    maxing = 'maxWait' in options;
+	    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+	    trailing = 'trailing' in options ? !!options.trailing : trailing;
+	  }
+
+	  function invokeFunc(time) {
+	    var args = lastArgs,
+	        thisArg = lastThis;
+
+	    lastArgs = lastThis = undefined;
+	    lastInvokeTime = time;
+	    result = func.apply(thisArg, args);
+	    return result;
+	  }
+
+	  function leadingEdge(time) {
+	    // Reset any `maxWait` timer.
+	    lastInvokeTime = time;
+	    // Start the timer for the trailing edge.
+	    timerId = setTimeout(timerExpired, wait);
+	    // Invoke the leading edge.
+	    return leading ? invokeFunc(time) : result;
+	  }
+
+	  function remainingWait(time) {
+	    var timeSinceLastCall = time - lastCallTime,
+	        timeSinceLastInvoke = time - lastInvokeTime,
+	        result = wait - timeSinceLastCall;
+
+	    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+	  }
+
+	  function shouldInvoke(time) {
+	    var timeSinceLastCall = time - lastCallTime,
+	        timeSinceLastInvoke = time - lastInvokeTime;
+
+	    // Either this is the first call, activity has stopped and we're at the
+	    // trailing edge, the system time has gone backwards and we're treating
+	    // it as the trailing edge, or we've hit the `maxWait` limit.
+	    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+	      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+	  }
+
+	  function timerExpired() {
+	    var time = now();
+	    if (shouldInvoke(time)) {
+	      return trailingEdge(time);
+	    }
+	    // Restart the timer.
+	    timerId = setTimeout(timerExpired, remainingWait(time));
+	  }
+
+	  function trailingEdge(time) {
+	    timerId = undefined;
+
+	    // Only invoke if we have `lastArgs` which means `func` has been
+	    // debounced at least once.
+	    if (trailing && lastArgs) {
+	      return invokeFunc(time);
+	    }
+	    lastArgs = lastThis = undefined;
+	    return result;
+	  }
+
+	  function cancel() {
+	    if (timerId !== undefined) {
+	      clearTimeout(timerId);
+	    }
+	    lastInvokeTime = 0;
+	    lastArgs = lastCallTime = lastThis = timerId = undefined;
+	  }
+
+	  function flush() {
+	    return timerId === undefined ? result : trailingEdge(now());
+	  }
+
+	  function debounced() {
+	    var time = now(),
+	        isInvoking = shouldInvoke(time);
+
+	    lastArgs = arguments;
+	    lastThis = this;
+	    lastCallTime = time;
+
+	    if (isInvoking) {
+	      if (timerId === undefined) {
+	        return leadingEdge(lastCallTime);
+	      }
+	      if (maxing) {
+	        // Handle invocations in a tight loop.
+	        timerId = setTimeout(timerExpired, wait);
+	        return invokeFunc(lastCallTime);
+	      }
+	    }
+	    if (timerId === undefined) {
+	      timerId = setTimeout(timerExpired, wait);
+	    }
+	    return result;
+	  }
+	  debounced.cancel = cancel;
+	  debounced.flush = flush;
+	  return debounced;
+	}
 
-/** Used as a reference to the global object. */
-freeGlobal || freeSelf || Function('return this')();
+	/**
+	 * Checks if `value` is the
+	 * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+	 * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+	 * @example
+	 *
+	 * _.isObject({});
+	 * // => true
+	 *
+	 * _.isObject([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isObject(_.noop);
+	 * // => true
+	 *
+	 * _.isObject(null);
+	 * // => false
+	 */
+	function isObject(value) {
+	  var type = typeof value;
+	  return !!value && (type == 'object' || type == 'function');
+	}
+
+	/**
+	 * Checks if `value` is object-like. A value is object-like if it's not `null`
+	 * and has a `typeof` result of "object".
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+	 * @example
+	 *
+	 * _.isObjectLike({});
+	 * // => true
+	 *
+	 * _.isObjectLike([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isObjectLike(_.noop);
+	 * // => false
+	 *
+	 * _.isObjectLike(null);
+	 * // => false
+	 */
+	function isObjectLike(value) {
+	  return !!value && typeof value == 'object';
+	}
+
+	/**
+	 * Checks if `value` is classified as a `Symbol` primitive or object.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+	 * @example
+	 *
+	 * _.isSymbol(Symbol.iterator);
+	 * // => true
+	 *
+	 * _.isSymbol('abc');
+	 * // => false
+	 */
+	function isSymbol(value) {
+	  return typeof value == 'symbol' ||
+	    (isObjectLike(value) && objectToString.call(value) == symbolTag);
+	}
+
+	/**
+	 * Converts `value` to a number.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to process.
+	 * @returns {number} Returns the number.
+	 * @example
+	 *
+	 * _.toNumber(3.2);
+	 * // => 3.2
+	 *
+	 * _.toNumber(Number.MIN_VALUE);
+	 * // => 5e-324
+	 *
+	 * _.toNumber(Infinity);
+	 * // => Infinity
+	 *
+	 * _.toNumber('3.2');
+	 * // => 3.2
+	 */
+	function toNumber(value) {
+	  if (typeof value == 'number') {
+	    return value;
+	  }
+	  if (isSymbol(value)) {
+	    return NAN;
+	  }
+	  if (isObject(value)) {
+	    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+	    value = isObject(other) ? (other + '') : other;
+	  }
+	  if (typeof value != 'string') {
+	    return value === 0 ? value : +value;
+	  }
+	  value = value.replace(reTrim, '');
+	  var isBinary = reIsBinary.test(value);
+	  return (isBinary || reIsOctal.test(value))
+	    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+	    : (reIsBadHex.test(value) ? NAN : +value);
+	}
+
+	lodash_debounce = debounce;
+	return lodash_debounce;
+}
+
+requireLodash_debounce();
 
 var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useInterval(callback, delay) {
@@ -186,7 +524,8 @@ const GridContext = createContext({
     cancelEdit: () => {
         console.error('no context provider for cancelEdit');
     },
-    startCellEditing: () => {
+    // eslint-disable-next-line @typescript-eslint/require-await
+    startCellEditing: async () => {
         console.error('no context provider for startCellEditing');
     },
     stopEditing: () => {
@@ -301,6 +640,38 @@ const sanitiseFileName = (filename) => {
     return valid.slice(0, -fileExt.length - 1).slice(0, 64) + '.' + fileExt;
 };
 
+/**
+ * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
+ * This passes the event to the checkbox when you click anywhere in the cell.
+ */
+const clickInputWhenContainingCellClicked = (params) => {
+    const { data, event, colDef } = params;
+    if (!data || !event)
+        return;
+    const element = event.target;
+    // Already handled
+    if (element.closest('.GridCell-readonly') ||
+        (['BUTTON', 'INPUT'].includes(element?.tagName) && element.closest('.ag-cell-inline-editing'))) {
+        return;
+    }
+    const row = element.closest('[row-id]');
+    if (!row)
+        return;
+    const colId = colDef.colId;
+    if (!colId)
+        return;
+    const clickInput = () => {
+        const cell = row.querySelector(`[col-id='${colId}']`);
+        if (!cell)
+            return;
+        const input = cell.querySelector('input, button');
+        if (!input)
+            return;
+        input?.dispatchEvent(event);
+    };
+    setTimeout(clickInput, 20);
+};
+
 /**
  * AgGrid's existing select header doesn't work the way we want.
  * If you have partial select then clicking the header checkbox will select all,
@@ -321,7 +692,7 @@ const GridHeaderSelect = ({ api }) => {
     }, [api, updateCounter]);
     const handleMultiSelect = () => {
         if (selectedNodeCount == 0) {
-            api.selectAllFiltered();
+            api.selectAll('filtered');
         }
         else {
             api.deselectAll();
@@ -621,7 +992,7 @@ const useItems = (menuRef, focusRef) => {
                 sortItems();
                 index = nextIndex;
                 newItem = items[index];
-                defer$1(() => newItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }));
+                defer(() => newItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }));
                 break;
             case HoverActionTypes.INCREASE:
                 sortItems();
@@ -810,7 +1181,6 @@ const useTransitionState = ({
       enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
     }
   }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
-  useEffect(() => () => clearTimeout(timeoutId.current), []);
   return [state, toggle, endTransition];
 };
 
@@ -1625,15 +1995,23 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
     const handleKeyboardTabAndEnter = useCallback((isDown) => (ev) => {
         const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
         const activeElement = thisDocument.activeElement;
-        if (!anchorRef?.current || !activeElement)
+        if (!anchorRef?.current || !activeElement) {
             return;
-        if (ev.key !== 'Tab' && ev.key !== 'Enter')
+        }
+        if (ev.key !== 'Tab' && ev.key !== 'Enter' && ev.key !== 'Esc') {
             return;
+        }
         if (ev.repeat) {
             ev.preventDefault();
             ev.stopPropagation();
             return;
         }
+        if (ev.key === 'Esc') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            safeCall(onClose, { key: ev.key, reason: CloseReason.CANCEL });
+            return;
+        }
         const invokeSave = (reason) => {
             if (!saveButtonRef?.current)
                 return;
@@ -1749,6 +2127,7 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
         },
     }), [onItemClick, onClose]);
     const onKeyUp = (e) => {
+        console.log(e);
         switch (e.key) {
             case Keys.ESC:
                 e.preventDefault();
@@ -1780,7 +2159,7 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
             block: menuContainerClass,
             modifiers,
             className,
-        }), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsx(SettingsContext.Provider, { value: settings, children: jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsx(MenuList, { ...restProps, ariaLabel: ariaLabel || 'Menu', externalRef: externalRef, containerRef: containerRef, onClose: onClose }) }) }) })) }));
+        }), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsx(SettingsContext.Provider, { value: settings, children: jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsx(MenuList, { ...restProps, ariaLabel: ariaLabel || 'Menu', externalRef: externalRef, containerRef: containerRef, onClose: onClose, onBlur: () => console.log('blur') }) }) }) })) }));
     if (portal === true && anchorRef?.current != null) {
         if (hasParentClass('react-menu-inline-test', anchorRef.current)) {
             portal = false;
@@ -2372,12 +2751,14 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
     }, [redrawRows, setStaleGrid]);
 };
 
+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 = null, contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, ...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, ...params }) => {
     const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, stopEditing, } = useContext(GridContext);
-    const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
+    const { startCellEditing } = useGridContext();
+    const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
     const gridDivRef = useRef(null);
     const lastSelectedIds = useRef([]);
     const [staleGrid, setStaleGrid] = useState(false);
@@ -2543,7 +2924,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
      */
     const columnDefs = useMemo(() => {
-        const adjustColDefs = params.columnDefs.map((colDef) => {
+        return params.columnDefs.map((colDef) => {
             const colDefEditable = colDef.editable;
             const editable = combineEditables(params.loading !== true && params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
             return {
@@ -2555,50 +2936,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 },
             };
         });
-        return params.selectable || params.onRowDragEnd
-            ? [
-                {
-                    colId: 'selection',
-                    editable: false,
-                    rowDrag: !!params.onRowDragEnd,
-                    minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
-                    maxWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
-                    pinned: selectColumnPinned,
-                    headerComponentParams: {
-                        exportable: false,
-                    },
-                    checkboxSelection: params.selectable,
-                    headerClass: params.onRowDragEnd ? 'ag-header-select-draggable' : undefined,
-                    headerComponent: rowSelection === 'multiple' ? GridHeaderSelect : null,
-                    suppressHeaderKeyboardEvent: (e) => {
-                        if (!params.selectable)
-                            return false;
-                        if ((e.event.key === 'Enter' || e.event.key === ' ') && !e.event.repeat) {
-                            if (isEmpty(e.api.getSelectedRows())) {
-                                e.api.selectAllFiltered();
-                            }
-                            else {
-                                e.api.deselectAll();
-                            }
-                            return true;
-                        }
-                        return false;
-                    },
-                    onCellClicked: clickInputWhenContainingCellClicked,
-                },
-                ...adjustColDefs,
-            ]
-            : adjustColDefs;
-    }, [
-        params.columnDefs,
-        params.selectable,
-        params.onRowDragEnd,
-        params.loading,
-        params.readOnly,
-        params.defaultColDef?.editable,
-        selectColumnPinned,
-        rowSelection,
-    ]);
+    }, [params.columnDefs, params.loading, params.readOnly, params.defaultColDef?.editable]);
     /**
      * When grid is ready set the apis to the grid context and sync selected items to grid.
      */
@@ -2639,44 +2977,28 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     /**
      * Force-refresh all selected rows to re-run class function, to update selection highlighting
      */
-    const refreshSelectedRows = useCallback((event) => {
-        event.api.refreshCells({
-            force: true,
-            rowNodes: event.api.getSelectedNodes(),
-        });
+    const refreshSelectedRows = useCallback((_event) => {
+        // MATT Disabled I don't believe these are needed anymore
+        // I've left them here just in case they are
+        /*event.api.refreshCells({
+          force: true,
+          rowNodes: event.api.getSelectedNodes(),
+        });*/
     }, []);
-    /**
-     * Make sure node is selected for editing and start edit
-     */
-    const startCellEditing = useCallback((event) => {
-        prePopupOps();
-        if (!event.node.isSelected()) {
-            event.node.setSelected(true, true);
-        }
-        // Cell already being edited, so don't re-edit until finished
-        if (checkUpdating([event.colDef.field ?? ''], event.data.id)) {
-            return;
-        }
-        if (event.rowIndex !== null) {
-            event.api.startEditingCell({
-                rowIndex: event.rowIndex,
-                colKey: event.column.getColId(),
-            });
-        }
-    }, [checkUpdating, prePopupOps]);
     /**
      * Handle double click edit
      */
     const onCellDoubleClick = useCallback((event) => {
-        if (!invokeEditAction(event))
-            startCellEditing(event);
+        if (!invokeEditAction(event)) {
+            void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
+        }
     }, [startCellEditing]);
     /**
      * Handle single click edits
      */
     const onCellClicked = useCallback((event) => {
         if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
-            startCellEditing(event);
+            void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
         }
     }, [singleClickEdit, startCellEditing]);
     /**
@@ -2701,11 +3023,11 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const onCellKeyPress = useCallback((e) => {
         const kbe = e.event;
         if (kbe.key === 'Enter') {
-            if (!invokeEditAction(e))
-                startCellEditing(e);
+            if (!invokeEditAction(e)) {
+                void startCellEditing({ rowId: e.data.id, colId: e.column.getColId() });
+            }
         }
         if (kbe.key === 'Tab') {
-            // eslint-disable-next-line
             prePopupOps();
         }
     }, [prePopupOps, startCellEditing]);
@@ -2745,7 +3067,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             if (!isEmpty(colIdsEdited.current)) {
                 const skipHeader = sizeColumns === 'auto-skip-headers';
                 if (sizeColumns === 'auto' || skipHeader) {
-                    defer$1(() => {
+                    defer(() => {
                         if (hasSetContentSize.current) {
                             autoSizeColumns({
                                 skipHeader,
@@ -2805,55 +3127,93 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, []);
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
-    const onRowDragLeave = useCallback((event) => {
-        const clientSideRowModel = event.api.getModel();
-        clientSideRowModel.highlightRowAtPixel(null);
+    const startDragYRef = useRef(null);
+    const clearHighlightRowClasses = useCallback(() => {
+        document.querySelectorAll(`.ag-row-highlight-above`)?.forEach((el) => {
+            el.classList.remove('ag-row-highlight-above');
+        });
+        document.querySelectorAll(`.ag-row-highlight-below`)?.forEach((el) => {
+            el.classList.remove('ag-row-highlight-below');
+        });
     }, []);
+    const gridElementRef = useRef();
     const onRowDragMove = useCallback((event) => {
-        if (event.overNode && event.node.rowIndex != null) {
-            const clientSideRowModel = event.api.getModel();
-            //position 0 means highlight above, 1 means below
-            const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode);
-            //we don't want to show the row highlight if it wouldn't result in the row moving
-            const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
-            if (event.node.rowIndex != targetIndex) {
-                clientSideRowModel.highlightRowAtPixel(event.node, event.y);
+        if (startDragYRef.current === null) {
+            startDragYRef.current = event.y;
+        }
+        const yDiff = event.y - startDragYRef.current;
+        const data = event.overNode?.data;
+        if (data) {
+            clearHighlightRowClasses();
+            // Find the grid element, this can only be found on start drag.
+            // Once dragging is no progress the event target is the drag element not the start drag column.
+            const targetEl = event.event.target;
+            if (targetEl) {
+                const gridElement = targetEl.closest('.ag-body');
+                if (gridElement) {
+                    gridElementRef.current = gridElement;
+                }
             }
+            gridElementRef.current?.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
+                el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
+            });
         }
-    }, []);
+    }, [clearHighlightRowClasses]);
     const onRowDragEnd = useCallback((event) => {
-        void (async () => {
-            const clientSideRowModel = event.api.getModel();
-            if (event.node.rowIndex != null) {
-                const lastHighlightedRowNode = clientSideRowModel.getLastHighlightedRowNode();
-                const isBelow = lastHighlightedRowNode && lastHighlightedRowNode.highlighted === RowHighlightPosition.Below;
-                let targetIndex = event.overIndex;
-                if (event.node.rowIndex > event.overIndex) {
-                    targetIndex += isBelow ? 1 : 0;
-                }
-                else {
-                    targetIndex += isBelow ? 0 : -1;
-                }
-                const moved = event.node.data;
-                const target = event.overNode?.data;
-                moved.id !== target?.id && //moved over a different row
-                    event.node.rowIndex != targetIndex && //moved to a different index
-                    params.onRowDragEnd &&
-                    (await params.onRowDragEnd(moved, target, targetIndex));
+        clearHighlightRowClasses();
+        gridElementRef.current = undefined;
+        if (!params.onRowDragEnd || startDragYRef.current === null) {
+            return;
+        }
+        const yDiff = event.y - startDragYRef.current;
+        startDragYRef.current = null;
+        if (event.node.rowIndex != null) {
+            const movedRow = event.node.data;
+            const targetRow = event.overNode?.data;
+            if (!movedRow || !targetRow || movedRow === targetRow || yDiff === 0) {
+                return;
             }
-            clientSideRowModel.highlightRowAtPixel(null);
-        })();
-    }, [params]);
+            void params.onRowDragEnd({ movedRow, targetRow, direction: yDiff > 0 ? 1 : -1 });
+        }
+    }, [params, clearHighlightRowClasses]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
     const headerRowCount = columnDefs.some((c) => c.children) ? 2 : 1;
-    return (jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
-                        setInitialContentSize();
-                    }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...omit(params.defaultColDef, ['editable']) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
+    return (jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { theme: 'legacy', rowSelection: selectable
+                        ? {
+                            enableClickSelection: false,
+                            mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
+                        }
+                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...omit(params.defaultColDef, ['editable']) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText, noRowsMatchingOverlayText: params.noRowsMatchingOverlayText }));
-                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData }) })] }));
+                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, 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, selectionColumnDef: {
+                        rowDrag: !!params.onRowDragEnd,
+                        minWidth: selectable && params.onRowDragEnd ? 76 : 48,
+                        maxWidth: selectable && params.onRowDragEnd ? 76 : 48,
+                        pinned: selectColumnPinned,
+                        headerComponentParams: {
+                            exportable: false,
+                        },
+                        headerClass: clsx('ag-header-hide-default-select', params.onRowDragEnd && 'ag-header-select-draggable'),
+                        headerComponent: rowSelection == 'multiple' ? GridHeaderSelect : undefined,
+                        suppressHeaderKeyboardEvent: (e) => {
+                            if (!selectable)
+                                return false;
+                            if ((e.event.key === 'Enter' || e.event.key === ' ') && !e.event.repeat) {
+                                if (isEmpty(e.api.getSelectedRows())) {
+                                    e.api.selectAll('filtered');
+                                }
+                                else {
+                                    e.api.deselectAll();
+                                }
+                                return true;
+                            }
+                            return false;
+                        },
+                        onCellClicked: clickInputWhenContainingCellClicked,
+                    } }) })] }));
 };
 
 const GridPopoverContext = createContext({
@@ -3243,79 +3603,89 @@ const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }) => {
 
 const GridFilters = ({ children }) => (jsx("div", { className: "Grid-container-filters", children: children }));
 
-/* global setTimeout, clearTimeout */
+var dist;
+var hasRequiredDist;
 
-var dist = function debounce(fn) {
-  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+function requireDist () {
+	if (hasRequiredDist) return dist;
+	hasRequiredDist = 1;
 
-  var lastCallAt = undefined;
-  var deferred = undefined;
-  var timer = undefined;
-  var pendingArgs = [];
-  return function debounced() {
-    var currentWait = getWait(wait);
-    var currentTime = new Date().getTime();
+	/* global setTimeout, clearTimeout */
 
-    var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;
+	dist = function debounce(fn) {
+	  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+	  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-    lastCallAt = currentTime;
+	  var lastCallAt = void 0;
+	  var deferred = void 0;
+	  var timer = void 0;
+	  var pendingArgs = [];
+	  return function debounced() {
+	    var currentWait = getWait(wait);
+	    var currentTime = new Date().getTime();
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+	    var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;
 
-    if (isCold && options.leading) {
-      return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {
-        return result[0];
-      }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));
-    }
+	    lastCallAt = currentTime;
 
-    if (deferred) {
-      clearTimeout(timer);
-    } else {
-      deferred = defer();
-    }
+	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+	      args[_key] = arguments[_key];
+	    }
 
-    pendingArgs.push(args);
-    timer = setTimeout(flush.bind(this), currentWait);
+	    if (isCold && options.leading) {
+	      return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {
+	        return result[0];
+	      }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));
+	    }
 
-    if (options.accumulate) {
-      var argsIndex = pendingArgs.length - 1;
-      return deferred.promise.then(function (results) {
-        return results[argsIndex];
-      });
-    }
+	    if (deferred) {
+	      clearTimeout(timer);
+	    } else {
+	      deferred = defer();
+	    }
 
-    return deferred.promise;
-  };
+	    pendingArgs.push(args);
+	    timer = setTimeout(flush.bind(this), currentWait);
 
-  function flush() {
-    var thisDeferred = deferred;
-    clearTimeout(timer);
+	    if (options.accumulate) {
+	      var argsIndex = pendingArgs.length - 1;
+	      return deferred.promise.then(function (results) {
+	        return results[argsIndex];
+	      });
+	    }
 
-    Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);
+	    return deferred.promise;
+	  };
 
-    pendingArgs = [];
-    deferred = null;
-  }
-};
+	  function flush() {
+	    var thisDeferred = deferred;
+	    clearTimeout(timer);
 
-function getWait(wait) {
-  return typeof wait === 'function' ? wait() : wait;
-}
+	    Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);
 
-function defer() {
-  var deferred = {};
-  deferred.promise = new Promise(function (resolve, reject) {
-    deferred.resolve = resolve;
-    deferred.reject = reject;
-  });
-  return deferred;
-}
+	    pendingArgs = [];
+	    deferred = null;
+	  }
+	};
 
+	function getWait(wait) {
+	  return typeof wait === 'function' ? wait() : wait;
+	}
+
+	function defer() {
+	  var deferred = {};
+	  deferred.promise = new Promise(function (resolve, reject) {
+	    deferred.resolve = resolve;
+	    deferred.reject = reject;
+	  });
+	  return deferred;
+	}
+	
+	return dist;
+}
 
-var debounce = /*@__PURE__*/getDefaultExportFromCjs(dist);
+var distExports = requireDist();
+var debounce = /*@__PURE__*/getDefaultExportFromCjs(distExports);
 
 const GridSubComponentContext = createContext({
     value: 'GridSubComponentContext value no context',
@@ -3334,7 +3704,7 @@ const GridSubComponentContext = createContext({
 });
 
 function styleInject(css, ref) {
-  if ( ref === undefined ) ref = {};
+  if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
   if (!css || typeof document === 'undefined') { return; }
@@ -3991,7 +4361,7 @@ const GridFormMultiSelect = (props) => {
                         const subOptions = headerGroups[`${header.filter}`];
                         return (!isEmpty(subOptions) && (jsxs(Fragment$1, { children: [header.header && jsx(MenuHeader, { children: header.header }), subOptions.map((item, index) => item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, `div_${index}`)) : (jsxs(Fragment$1, { children: [jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions, onChecked: () => {
                                                 // Default to focus on first input in subComponent
-                                                defer$1(() => {
+                                                defer(() => {
                                                     firstInputSubComponent.current?.focus();
                                                 });
                                             } }), item.checked && item.subComponent && (jsx(MenuSubComponent, { item, options, setOptions, data, triggerSave, ref: firstInputSubComponent, subComponentIsValid: subComponentIsValidRef.current }))] }, `val_${item.value}`)))] }, `group_${index}`)));
@@ -4701,10 +5071,10 @@ const GridContextProvider = (props) => {
     const ensureRowVisible = useCallback((id) => {
         if (!gridApi)
             return false;
-        const node = gridApi?.getRowNode(`${id}`);
+        const node = gridApi.getRowNode(`${id}`);
         if (!node)
             return false;
-        defer$1(() => gridApi.ensureNodeVisible(node));
+        defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(node));
         return true;
     }, [gridApi]);
     const getFirstRowId = useCallback(() => {
@@ -4762,16 +5132,20 @@ const GridContextProvider = (props) => {
      * Before a popup record the currently focused cell.
      */
     const prePopupOps = useCallback(() => {
-        prePopupFocusedCell.current = gridApi?.getFocusedCell() ?? undefined;
+        if (!gridApi || gridApi.isDestroyed()) {
+            return;
+        }
+        prePopupFocusedCell.current = gridApi.getFocusedCell() ?? undefined;
     }, [gridApi]);
     /**
      * After a popup refocus the cell.
      */
     const postPopupOps = useCallback(() => {
-        if (!gridApi)
+        if (!gridApi || gridApi.isDestroyed()) {
             return;
+        }
         if (prePopupFocusedCell.current) {
-            gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+            gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
         }
     }, [gridApi]);
     /**
@@ -4839,7 +5213,7 @@ const GridContextProvider = (props) => {
             const rowsThatNeedSelecting = sortBy(rowNodes.filter((node) => !node.isSelected()), (node) => node.data.id);
             const firstNode = rowsThatNeedSelecting[0];
             if (firstNode) {
-                defer$1(() => gridApi.ensureNodeVisible(firstNode));
+                defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(firstNode));
                 const colDefs = getColumns();
                 if (!isEmpty(colDefs)) {
                     const col = colDefs[0];
@@ -4850,9 +5224,14 @@ const GridContextProvider = (props) => {
                         // as they will start to edit the cell before this stuff has a chance to run
                         colId &&
                             delay(() => {
-                                if (isEmpty(gridApi.getEditingCells()) && (!ifNoCellFocused || gridApi.getFocusedCell() == null)) {
-                                    // ifNoCellFocused
+                                if (isEmpty(gridApi.getEditingCells()) &&
+                                    (!ifNoCellFocused || gridApi.getFocusedCell() == null) &&
+                                    !gridApi.isDestroyed()) {
                                     gridApi.setFocusedCell(rowIndex, colId);
+                                    // It may be that the first cell is the selection cell, this doesn't exist as a colDef
+                                    // so instead, I just try and select it.  If it doesn't exist selection will stay on the
+                                    // previously focused cell
+                                    gridApi.setFocusedCell(rowIndex, 'ag-Grid-SelectionColumn');
                                 }
                             }, 100);
                     }
@@ -4871,7 +5250,7 @@ const GridContextProvider = (props) => {
             if (flash) {
                 delay(() => {
                     try {
-                        gridApi.flashCells({ rowNodes });
+                        !gridApi.isDestroyed && gridApi.flashCells({ rowNodes });
                     }
                     catch {
                         // ignore, flash cells sometimes throws errors as nodes have gone out of scope
@@ -4925,7 +5304,7 @@ const GridContextProvider = (props) => {
             const selectedNodes = gridApi.getSelectedNodes();
             if (isEmpty(selectedNodes))
                 return;
-            defer$1(() => gridApi.ensureNodeVisible(last(selectedNodes)));
+            defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(last(selectedNodes)));
         });
     }, [gridApiOp]);
     /**
@@ -4955,44 +5334,58 @@ const GridContextProvider = (props) => {
         gridApi?.sizeColumnsToFit();
     }, [gridApi]);
     const stopEditing = useCallback(() => {
-        if (!gridApi)
+        if (!gridApi || gridApi.isDestroyed()) {
             return;
-        if (prePopupFocusedCell.current) {
-            gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
         }
         gridApi.stopEditing();
+        if (prePopupFocusedCell.current) {
+            gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+        }
     }, [gridApi]);
-    const startCellEditing = useCallback(
-    // eslint-disable-next-line @typescript-eslint/require-await
-    ({ rowId, colId }) => {
+    // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
+    const externallySelectedItemsAreInSyncRef = useRef(false);
+    useEffect(() => {
+        externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
+    }, [externallySelectedItemsAreInSync]);
+    const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
+        // Wait for up to 5 seconds
+        for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
+            await wait(200);
+        }
+    }, []);
+    const startCellEditing = useCallback(async ({ rowId, colId }) => {
         if (!gridApi)
             return;
         const colDef = gridApi.getColumnDef(colId);
-        if (!colDef)
+        if (!colDef) {
             return;
-        prePopupOps();
+        }
         const rowNode = gridApi.getRowNode(`${rowId}`);
         if (!rowNode) {
             return;
         }
-        if (!rowNode.isSelected()) {
+        prePopupOps();
+        const shouldSelectNode = !rowNode.isSelected();
+        if (shouldSelectNode) {
+            externallySelectedItemsAreInSyncRef.current = false;
             rowNode.setSelected(true, true);
+            await waitForExternallySelectedItemsToBeInSync();
         }
         // Cell already being edited, so don't re-edit until finished
-        if (checkUpdating([colDef.field ?? ''], rowId)) {
+        if (checkUpdating([colDef.field ?? colDef.colId ?? ''], rowId)) {
             return;
         }
         const rowIndex = rowNode.rowIndex;
         if (rowIndex != null) {
-            const focusAndEdit = () => {
-                gridApi.startEditingCell({
-                    rowIndex,
-                    colKey: colId,
-                });
-            };
-            defer$1(focusAndEdit);
+            defer(() => {
+                !gridApi.isDestroyed() &&
+                    gridApi.startEditingCell({
+                        rowIndex,
+                        colKey: colId,
+                    });
+            });
         }
-    }, [checkUpdating, gridApi, prePopupOps]);
+    }, [checkUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
     /**
      * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
      */
@@ -5007,12 +5400,12 @@ const GridContextProvider = (props) => {
     /**
      * Returns true if an editable cell on same row was selected, else false.
      */
-    const selectNextEditableCell = useCallback((tabDirection) => {
+    const selectNextEditableCell = useCallback(async (tabDirection) => {
         // Pretend it succeeded to prevent unwanted cellEditingCompleteCallback
         if (!gridApi)
             return true;
         const focusedCellIsEditable = () => {
-            const focusedCell = gridApi.getFocusedCell();
+            const focusedCell = gridApi.isDestroyed() ? null : gridApi.getFocusedCell();
             const nextColumn = focusedCell?.column;
             const nextColDef = nextColumn?.getColDef();
             const rowNode = focusedCell && gridApi.getDisplayedRowAtIndex(focusedCell?.rowIndex);
@@ -5023,8 +5416,22 @@ const GridContextProvider = (props) => {
         };
         // Just in case I've missed something, we don't want the loop to hang everything
         for (let maxIterations = 0; maxIterations < 50; maxIterations++) {
+            if (gridApi.isDestroyed()) {
+                return true;
+            }
             const preRow = gridApi.getFocusedCell();
-            tabDirection === 1 ? gridApi.tabToNextCell() : gridApi.tabToPreviousCell();
+            if (tabDirection === 1) {
+                gridApi.tabToNextCell();
+            }
+            else {
+                gridApi.tabToPreviousCell();
+            }
+            // If we don't wait the tab to next element won't work
+            // I think this is due to the grid resizing
+            await wait(150);
+            if (gridApi.isDestroyed()) {
+                return true;
+            }
             const postRow = gridApi.getFocusedCell();
             if (preRow?.rowIndex !== postRow?.rowIndex || preRow?.column === postRow?.column) {
                 // We didn't find an editable cell in the same row, or the cell column didn't change
@@ -5032,7 +5439,7 @@ const GridContextProvider = (props) => {
                 break;
             }
             if (focusedCellIsEditable()) {
-                const focusedCell = gridApi?.getFocusedCell();
+                const focusedCell = gridApi.getFocusedCell();
                 if (focusedCell) {
                     prePopupOps();
                     gridApi.startEditingCell({
@@ -5051,19 +5458,23 @@ 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, force: true });
+                // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], 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, force: true });
+            // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
             if (ok) {
                 const cell = gridApi.getFocusedCell();
                 if (cell && gridApi.getFocusedCell() == null) {
-                    gridApi.setFocusedCell(cell.rowIndex, cell.column);
+                    !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
                 }
                 // This is needed to trigger postSortRowsHook
                 gridApi.refreshClientSideRowModel();
@@ -5078,7 +5489,7 @@ const GridContextProvider = (props) => {
                 postPopupFocusedCell &&
                 prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
                 prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
-                if (!tabDirection || !selectNextEditableCell(tabDirection)) {
+                if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
                     cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
                 }
             }
@@ -5093,17 +5504,6 @@ const GridContextProvider = (props) => {
             console.error(ex);
         }
     }, 50), [gridApi]);
-    // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
-    const externallySelectedItemsAreInSyncRef = useRef(false);
-    useEffect(() => {
-        externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
-    }, [externallySelectedItemsAreInSync]);
-    const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
-        // Wait for up to 5 seconds
-        for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
-            await wait(200);
-        }
-    }, []);
     const onFilterChanged = useMemo(() => debounce(() => {
         // This is terrible, but there's no other way for me to check whether a filter has changed the grid
         const getDisplayedRowsHash = () => {
@@ -5392,5 +5792,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, GridHeaderSelect, 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, clickInputWhenContainingCellClicked, convertDDToDMS, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+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, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map