@linzjs/step-ag-grid 25.0.0 → 26.0.0

package/dist/step-ag-grid.cjs

@@ -8,38 +8,6 @@ var lodashEs = require('lodash-es');
 var React = require('react');
 var reactDom = require('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.
  */
@@ -64,14 +32,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" ? React.useLayoutEffect : React.useEffect;
 function useInterval(callback, delay) {
@@ -188,7 +526,8 @@ const GridContext = React.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: () => {
@@ -303,6 +642,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,
@@ -323,7 +694,7 @@ const GridHeaderSelect = ({ api }) => {
     }, [api, updateCounter]);
     const handleMultiSelect = () => {
         if (selectedNodeCount == 0) {
-            api.selectAllFiltered();
+            api.selectAll('filtered');
         }
         else {
             api.deselectAll();
@@ -812,7 +1183,6 @@ const useTransitionState = ({
       enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
     }
   }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
-  React.useEffect(() => () => clearTimeout(timeoutId.current), []);
   return [state, toggle, endTransition];
 };
 
@@ -1627,15 +1997,23 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
     const handleKeyboardTabAndEnter = React.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;
@@ -1751,6 +2129,7 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
         },
     }), [onItemClick, onClose]);
     const onKeyUp = (e) => {
+        console.log(e);
         switch (e.key) {
             case Keys.ESC:
                 e.preventDefault();
@@ -1782,7 +2161,7 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
             block: menuContainerClass,
             modifiers,
             className,
-        }), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsxRuntime.jsx(SettingsContext.Provider, { value: settings, children: jsxRuntime.jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsxRuntime.jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsxRuntime.jsx(MenuList, { ...restProps, ariaLabel: ariaLabel || 'Menu', externalRef: externalRef, containerRef: containerRef, onClose: onClose }) }) }) })) }));
+        }), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsxRuntime.jsx(SettingsContext.Provider, { value: settings, children: jsxRuntime.jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsxRuntime.jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsxRuntime.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;
@@ -2374,12 +2753,14 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
     }, [redrawRows, setStaleGrid]);
 };
 
+agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.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, } = React.useContext(GridContext);
-    const { checkUpdating, updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
+    const { startCellEditing } = useGridContext();
+    const { updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
     const gridDivRef = React.useRef(null);
     const lastSelectedIds = React.useRef([]);
     const [staleGrid, setStaleGrid] = React.useState(false);
@@ -2545,7 +2926,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 = React.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 {
@@ -2557,50 +2938,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 (lodashEs.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.
      */
@@ -2641,44 +2979,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 = React.useCallback((event) => {
-        event.api.refreshCells({
-            force: true,
-            rowNodes: event.api.getSelectedNodes(),
-        });
+    const refreshSelectedRows = React.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 = React.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 = React.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 = React.useCallback((event) => {
         if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
-            startCellEditing(event);
+            void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
         }
     }, [singleClickEdit, startCellEditing]);
     /**
@@ -2703,11 +3025,11 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const onCellKeyPress = React.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]);
@@ -2807,55 +3129,82 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, []);
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
-    const onRowDragLeave = React.useCallback((event) => {
-        const clientSideRowModel = event.api.getModel();
-        clientSideRowModel.highlightRowAtPixel(null);
+    const startDragYRef = React.useRef(null);
+    const clearHighlightRowClasses = React.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 onRowDragMove = React.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();
+            document.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
+                el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
+            });
         }
-    }, []);
+    }, [clearHighlightRowClasses]);
     const onRowDragEnd = React.useCallback((event) => {
-        void (async () => {
-            const clientSideRowModel = event.api.getModel();
-            if (event.node.rowIndex != null) {
-                const lastHighlightedRowNode = clientSideRowModel.getLastHighlightedRowNode();
-                const isBelow = lastHighlightedRowNode && lastHighlightedRowNode.highlighted === agGridCommunity.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();
+        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 (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.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, ...lodashEs.omit(params.defaultColDef, ['editable']) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.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, ...lodashEs.omit(params.defaultColDef, ['editable']) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsxRuntime.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 (lodashEs.isEmpty(e.api.getSelectedRows())) {
+                                    e.api.selectAll('filtered');
+                                }
+                                else {
+                                    e.api.deselectAll();
+                                }
+                                return true;
+                            }
+                            return false;
+                        },
+                        onCellClicked: clickInputWhenContainingCellClicked,
+                    } }) })] }));
 };
 
 const GridPopoverContext = React.createContext({
@@ -3245,79 +3594,89 @@ const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }) => {
 
 const GridFilters = ({ children }) => (jsxRuntime.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 = React.createContext({
     value: 'GridSubComponentContext value no context',
@@ -3336,7 +3695,7 @@ const GridSubComponentContext = React.createContext({
 });
 
 function styleInject(css, ref) {
-  if ( ref === undefined ) ref = {};
+  if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
   if (!css || typeof document === 'undefined') { return; }
@@ -4703,10 +5062,10 @@ const GridContextProvider = (props) => {
     const ensureRowVisible = React.useCallback((id) => {
         if (!gridApi)
             return false;
-        const node = gridApi?.getRowNode(`${id}`);
+        const node = gridApi.getRowNode(`${id}`);
         if (!node)
             return false;
-        lodashEs.defer(() => gridApi.ensureNodeVisible(node));
+        lodashEs.defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(node));
         return true;
     }, [gridApi]);
     const getFirstRowId = React.useCallback(() => {
@@ -4764,16 +5123,20 @@ const GridContextProvider = (props) => {
      * Before a popup record the currently focused cell.
      */
     const prePopupOps = React.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 = React.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]);
     /**
@@ -4841,7 +5204,7 @@ const GridContextProvider = (props) => {
             const rowsThatNeedSelecting = lodashEs.sortBy(rowNodes.filter((node) => !node.isSelected()), (node) => node.data.id);
             const firstNode = rowsThatNeedSelecting[0];
             if (firstNode) {
-                lodashEs.defer(() => gridApi.ensureNodeVisible(firstNode));
+                lodashEs.defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(firstNode));
                 const colDefs = getColumns();
                 if (!lodashEs.isEmpty(colDefs)) {
                     const col = colDefs[0];
@@ -4852,9 +5215,14 @@ const GridContextProvider = (props) => {
                         // as they will start to edit the cell before this stuff has a chance to run
                         colId &&
                             lodashEs.delay(() => {
-                                if (lodashEs.isEmpty(gridApi.getEditingCells()) && (!ifNoCellFocused || gridApi.getFocusedCell() == null)) {
-                                    // ifNoCellFocused
+                                if (lodashEs.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);
                     }
@@ -4873,7 +5241,7 @@ const GridContextProvider = (props) => {
             if (flash) {
                 lodashEs.delay(() => {
                     try {
-                        gridApi.flashCells({ rowNodes });
+                        !gridApi.isDestroyed && gridApi.flashCells({ rowNodes });
                     }
                     catch {
                         // ignore, flash cells sometimes throws errors as nodes have gone out of scope
@@ -4927,7 +5295,7 @@ const GridContextProvider = (props) => {
             const selectedNodes = gridApi.getSelectedNodes();
             if (lodashEs.isEmpty(selectedNodes))
                 return;
-            lodashEs.defer(() => gridApi.ensureNodeVisible(lodashEs.last(selectedNodes)));
+            lodashEs.defer(() => !gridApi.isDestroyed() && gridApi.ensureNodeVisible(lodashEs.last(selectedNodes)));
         });
     }, [gridApiOp]);
     /**
@@ -4957,44 +5325,58 @@ const GridContextProvider = (props) => {
         gridApi?.sizeColumnsToFit();
     }, [gridApi]);
     const stopEditing = React.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 = React.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 = React.useRef(false);
+    React.useEffect(() => {
+        externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
+    }, [externallySelectedItemsAreInSync]);
+    const waitForExternallySelectedItemsToBeInSync = React.useCallback(async () => {
+        // Wait for up to 5 seconds
+        for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
+            await wait(200);
+        }
+    }, []);
+    const startCellEditing = React.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,
-                });
-            };
-            lodashEs.defer(focusAndEdit);
+            lodashEs.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
      */
@@ -5009,12 +5391,12 @@ const GridContextProvider = (props) => {
     /**
      * Returns true if an editable cell on same row was selected, else false.
      */
-    const selectNextEditableCell = React.useCallback((tabDirection) => {
+    const selectNextEditableCell = React.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);
@@ -5025,8 +5407,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
@@ -5034,7 +5430,7 @@ const GridContextProvider = (props) => {
                 break;
             }
             if (focusedCellIsEditable()) {
-                const focusedCell = gridApi?.getFocusedCell();
+                const focusedCell = gridApi.getFocusedCell();
                 if (focusedCell) {
                     prePopupOps();
                     gridApi.startEditingCell({
@@ -5053,19 +5449,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();
@@ -5080,7 +5480,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();
                 }
             }
@@ -5095,17 +5495,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 = React.useRef(false);
-    React.useEffect(() => {
-        externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
-    }, [externallySelectedItemsAreInSync]);
-    const waitForExternallySelectedItemsToBeInSync = React.useCallback(async () => {
-        // Wait for up to 5 seconds
-        for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
-            await wait(200);
-        }
-    }, []);
     const onFilterChanged = React.useMemo(() => debounce(() => {
         // This is terrible, but there's no other way for me to check whether a filter has changed the grid
         const getDisplayedRowsHash = () => {
@@ -5428,7 +5817,6 @@ exports.GridFormSubComponentTextArea = GridFormSubComponentTextArea;
 exports.GridFormSubComponentTextInput = GridFormSubComponentTextInput;
 exports.GridFormTextArea = GridFormTextArea;
 exports.GridFormTextInput = GridFormTextInput;
-exports.GridHeaderSelect = GridHeaderSelect;
 exports.GridIcon = GridIcon;
 exports.GridLoadableCell = GridLoadableCell;
 exports.GridNoRowsOverlay = GridNoRowsOverlay;
@@ -5473,7 +5861,6 @@ exports.bearingNumberParser = bearingNumberParser;
 exports.bearingRangeValidator = bearingRangeValidator;
 exports.bearingStringValidator = bearingStringValidator;
 exports.bearingValueFormatter = bearingValueFormatter;
-exports.clickInputWhenContainingCellClicked = clickInputWhenContainingCellClicked;
 exports.convertDDToDMS = convertDDToDMS;
 exports.downloadCsvUseValueFormattersProcessCellCallback = downloadCsvUseValueFormattersProcessCellCallback;
 exports.findParentWithClass = findParentWithClass;