@linzjs/step-ag-grid 23.0.0 → 24.0.0

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

@@ -8,11 +8,43 @@ 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.
  */
 const ComponentLoadingWrapper = (props) => {
-    return props.loading ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: { role: "status", ["aria-label"]: "Loading", style: { padding: 16 } } })) : (jsxRuntime.jsxs("div", { style: { pointerEvents: props.saving ? "none" : "inherit" }, className: props.className, children: [props.saving && jsxRuntime.jsx("div", { className: "ComponentLoadingWrapper-saveOverlay" }), props.children] }));
+    return props.loading ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: { role: 'status', ['aria-label']: 'Loading', style: { padding: 16 } } })) : (jsxRuntime.jsxs("div", { style: { pointerEvents: props.saving ? 'none' : 'inherit' }, className: props.className, children: [props.saving && jsxRuntime.jsx("div", { className: 'ComponentLoadingWrapper-saveOverlay' }), props.children] }));
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -61,153 +93,160 @@ const GridContext = React.createContext({
     gridReady: false,
     gridRenderState: () => null,
     getColDef: () => {
-        console.error("no context provider for getColDef");
+        console.error('no context provider for getColDef');
         return undefined;
     },
     getColumns: () => {
-        console.error("no context provider for getColumns");
+        console.error('no context provider for getColumns');
         return [];
     },
     getColumnIds: () => {
-        console.error("no context provider for getColumnIds");
+        console.error('no context provider for getColumnIds');
         return [];
     },
     invisibleColumnIds: undefined,
     setInvisibleColumnIds: () => {
-        console.error("no context provider for setInvisibleColumnIds");
+        console.error('no context provider for setInvisibleColumnIds');
     },
     prePopupOps: () => {
-        console.error("no context provider for prePopupOps");
+        console.error('no context provider for prePopupOps');
     },
     postPopupOps: () => {
-        console.error("no context provider for prePopupOps");
+        console.error('no context provider for prePopupOps');
     },
     externallySelectedItemsAreInSync: false,
     setApis: () => {
-        console.error("no context provider for setApis");
+        console.error('no context provider for setApis');
     },
     setQuickFilter: () => {
-        console.error("no context provider for setQuickFilter");
+        console.error('no context provider for setQuickFilter');
     },
     selectRowsById: () => {
-        console.error("no context provider for selectRows");
+        console.error('no context provider for selectRows');
     },
     getSelectedRows: () => {
-        console.error("no context provider for getSelectedRows");
+        console.error('no context provider for getSelectedRows');
         return [];
     },
     getFilteredSelectedRows: () => {
-        console.error("no context provider for getFilteredSelectedRows");
+        console.error('no context provider for getFilteredSelectedRows');
         return [];
     },
     getSelectedRowIds: () => {
-        console.error("no context provider for getSelectedRowIds");
+        console.error('no context provider for getSelectedRowIds');
         return [];
     },
     getFilteredSelectedRowIds: () => {
-        console.error("no context provider for getFilteredSelectedRowIds");
+        console.error('no context provider for getFilteredSelectedRowIds');
         return [];
     },
+    // eslint-disable-next-line @typescript-eslint/require-await
     selectRowsDiff: async () => {
-        console.error("no context provider for selectRowsDiff");
+        console.error('no context provider for selectRowsDiff');
     },
     selectRowsByIdWithFlash: () => {
-        console.error("no context provider for selectRowsWithFlash");
+        console.error('no context provider for selectRowsWithFlash');
     },
+    // eslint-disable-next-line @typescript-eslint/require-await
     selectRowsWithFlashDiff: async () => {
-        console.error("no context provider for selectRowsWithFlashDiff");
+        console.error('no context provider for selectRowsWithFlashDiff');
     },
     flashRows: () => {
-        console.error("no context provider for flashRows");
+        console.error('no context provider for flashRows');
     },
+    // eslint-disable-next-line @typescript-eslint/require-await
     flashRowsDiff: async () => {
-        console.error("no context provider for flashRows");
+        console.error('no context provider for flashRows');
     },
+    // eslint-disable-next-line @typescript-eslint/require-await,@typescript-eslint/no-misused-promises
     focusByRowById: async () => {
-        console.error("no context provider for focusByRowById");
+        console.error('no context provider for focusByRowById');
     },
     ensureRowVisible: () => {
-        console.error("no context provider for ensureRowVisible");
+        console.error('no context provider for ensureRowVisible');
         return true;
     },
     ensureSelectedRowIsVisible: () => {
-        console.error("no context provider for ensureSelectedRowIsVisible");
+        console.error('no context provider for ensureSelectedRowIsVisible');
     },
     getFirstRowId: () => {
-        console.error("no context provider for getFirstRowId");
+        console.error('no context provider for getFirstRowId');
         return -1;
     },
     autoSizeColumns: () => {
-        console.error("no context provider for autoSizeColumns");
+        console.error('no context provider for autoSizeColumns');
         return null;
     },
     sizeColumnsToFit: () => {
-        console.error("no context provider for autoSizeAllColumns");
+        console.error('no context provider for autoSizeAllColumns');
         return null;
     },
     editingCells: () => {
-        console.error("no context provider for editingCells");
+        console.error('no context provider for editingCells');
         return false;
     },
     cancelEdit: () => {
-        console.error("no context provider for cancelEdit");
+        console.error('no context provider for cancelEdit');
     },
     startCellEditing: () => {
-        console.error("no context provider for startCellEditing");
+        console.error('no context provider for startCellEditing');
     },
     stopEditing: () => {
-        console.error("no context provider for stopEditing");
+        console.error('no context provider for stopEditing');
     },
+    // eslint-disable-next-line @typescript-eslint/require-await
     updatingCells: async () => {
-        console.error("no context provider for modifyUpdating");
+        console.error('no context provider for modifyUpdating');
         return false;
     },
     redrawRows: () => {
-        console.error("no context provider for redrawRows");
+        console.error('no context provider for redrawRows');
     },
     setExternallySelectedItemsAreInSync: () => {
-        console.error("no context provider for setExternallySelectedItemsAreInSync");
+        console.error('no context provider for setExternallySelectedItemsAreInSync');
     },
+    // eslint-disable-next-line @typescript-eslint/require-await
     waitForExternallySelectedItemsToBeInSync: async () => {
-        console.error("no context provider for waitForExternallySelectedItemsToBeInSync");
+        console.error('no context provider for waitForExternallySelectedItemsToBeInSync');
     },
     addExternalFilter: () => {
-        console.error("no context provider for addExternalFilter");
+        console.error('no context provider for addExternalFilter');
     },
     removeExternalFilter: () => {
-        console.error("no context provider for removeExternalFilter");
+        console.error('no context provider for removeExternalFilter');
     },
     isExternalFilterPresent: () => {
-        console.error("no context provider for isExternalFilterPresent");
+        console.error('no context provider for isExternalFilterPresent');
         return false;
     },
     doesExternalFilterPass: () => {
-        console.error("no context provider for doesExternalFilterPass");
+        console.error('no context provider for doesExternalFilterPass');
         return true;
     },
     downloadCsv: () => {
-        console.error("no context provider for downloadCsv");
+        console.error('no context provider for downloadCsv');
     },
     setOnCellEditingComplete: () => {
-        console.error("no context provider for setOnCellEditingComplete");
+        console.error('no context provider for setOnCellEditingComplete');
     },
     showNoRowsOverlay: () => {
-        console.error("no context provider for showLoadingOverlay");
+        console.error('no context provider for showLoadingOverlay');
     },
 });
 const useGridContext = () => React.useContext(GridContext);
 
 const GridUpdatingContext = React.createContext({
     checkUpdating: () => {
-        console.error("Missing GridUpdatingContext");
+        console.error('Missing GridUpdatingContext');
         return false;
     },
     updatingCols: () => {
-        console.error("Missing GridUpdatingContext");
+        console.error('Missing GridUpdatingContext');
         return [];
     },
+    // eslint-disable-next-line @typescript-eslint/require-await
     modifyUpdating: async () => {
-        console.error("Missing GridUpdatingContext");
+        console.error('Missing GridUpdatingContext');
     },
     updatedDep: 0,
 });
@@ -249,196 +288,19 @@ const hasParentClass = function (className, child) {
     return false;
 };
 const stringByteLengthIsInvalid = (str, maxBytes) => new TextEncoder().encode(str).length > maxBytes;
-const fnOrVar = (fn, param) => (typeof fn === "function" ? fn(param) : fn);
+const fnOrVar = (fn, param) => (typeof fn === 'function' ? fn(param) : fn);
 const sanitiseFileName = (filename) => {
     const valid = filename
         .trim()
-        .replaceAll(/(\/|\\)+/g, "-")
-        .replaceAll(/\s+/g, "_")
-        .replaceAll(/[^\w\-āēīōūĀĒĪŌŪ.]/g, "");
-    const parts = valid.split(".");
+        .replaceAll(/(\/|\\)+/g, '-')
+        .replaceAll(/\s+/g, '_')
+        .replaceAll(/[^\w\-āēīōūĀĒĪŌŪ.]/g, '');
+    const parts = valid.split('.');
     const fileExt = parts.length > 1 ? parts.pop() : undefined;
     // Arbitrary max filename length of 64 chars + extension
     if (!fileExt)
         return valid.slice().slice(0, 64);
-    return valid.slice(0, -fileExt.length - 1).slice(0, 64) + "." + fileExt;
-};
-
-const GridLoadingOverlayComponentFr = (props, externalRef) => (jsxRuntime.jsx("div", { ref: externalRef, style: {
-        left: 0,
-        top: 0,
-        bottom: 0,
-        right: 0,
-        position: "absolute",
-        backgroundColor: "rgba(255,255,255,0.5)",
-    }, children: jsxRuntime.jsx("div", { style: { height: "100%", position: "relative" }, children: jsxRuntime.jsx("div", { style: { position: "absolute", left: 0, top: props.headerRowHeight, right: 0, bottom: 0 }, children: jsxRuntime.jsx(lui.LuiStatusSpinner, {}) }) }) }));
-const GridLoadingOverlayComponent = React.forwardRef(GridLoadingOverlayComponentFr);
-const GridNoRowsOverlayFr = (props, externalRef) => {
-    if (props.loading) {
-        return jsxRuntime.jsx(GridLoadingOverlayComponent, { ref: externalRef, headerRowHeight: props.headerRowHeight });
-    }
-    if (props.rowCount === 0) {
-        return jsxRuntime.jsx("div", { ref: externalRef, children: props.noRowsOverlayText ?? "There are currently no rows" });
-    }
-    if (props.filteredRowCount === 0) {
-        return jsxRuntime.jsx("div", { ref: externalRef, children: props.noRowsMatchingOverlayText ?? "All rows have been filtered" });
-    }
-    return jsxRuntime.jsx("div", { ref: externalRef });
-};
-const GridNoRowsOverlay = React.forwardRef(GridNoRowsOverlayFr);
-
-/**
- * Retains last sort order from via <AgGrid postRowSort>.
- * Then applies this sort until next sort column change.
- * Handles stale sort, when you edit a row but don't want to re-sort.
- */
-const usePostSortRowsHook = ({ setStaleGrid }) => {
-    const { redrawRows } = React.useContext(GridContext);
-    // On first run we need to init the first backed up sort order
-    const initialised = React.useRef(false);
-    // Used to detect sort order has changed since last run
-    const lastSortOrderHash = React.useRef("");
-    // Used to detect if sort order was the same, has the direction changed
-    const previousRowSortIndexRef = React.useRef({});
-    // stale sort is when there's a sort and user edits a row
-    // this applies a class to the div wrapping the grid which in turn adds a * beside the sort arrow
-    const sortWasStale = React.useRef(false);
-    // Previous col sort is stored and reapplied if the sort direction changes on the same column and the sort was stale
-    // As a sort on a stale row should just resort, not change sort direction
-    const previousColSort = React.useRef([]);
-    const previousQuickFilter = React.useRef("");
-    return React.useCallback(({ api, nodes }) => {
-        // Grid is destroyed
-        if (!api)
-            return;
-        const previousRowSortIndex = previousRowSortIndexRef.current;
-        const hashNode = (node) => {
-            return node ? JSON.stringify(node.data) : "";
-        };
-        const copyCurrentSortSettings = () => api.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
-        const backupSortOrder = () => {
-            for (const x in previousRowSortIndex)
-                delete previousRowSortIndex[x];
-            nodes.forEach((node, index) => (previousRowSortIndex[`${node.data.id}`] = { index, hash: hashNode(node) }));
-        };
-        // Check if column is the first sorted column.  Note: column is preconfigured to sort its sortIndex is null not 1
-        const isFirstSortColumn = (row) => row.sort && [0, null].includes(row.sortIndex ?? null);
-        const isSameColumnAndDifferentSort = (col1, col2) => col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;
-        const restorePreviousSortColumnState = () => api.applyColumnState({ state: previousColSort.current });
-        const sortNodesByPreviousSort = () => {
-            nodes.sort((a, b) => (previousRowSortIndex[`${a.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER) -
-                (previousRowSortIndex[`${b.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER));
-        };
-        // On first load copy the current sort
-        if (!initialised.current) {
-            initialised.current = true;
-            previousColSort.current = copyCurrentSortSettings();
-        }
-        const newSortOrder = JSON.stringify(copyCurrentSortSettings());
-        let sortOrderChanged = newSortOrder != lastSortOrderHash.current;
-        const quickFilter = api.getQuickFilter();
-        if (previousQuickFilter.current != quickFilter) {
-            previousQuickFilter.current = quickFilter ?? "";
-            sortOrderChanged = true;
-        }
-        if (lodashEs.isEmpty(previousRowSortIndex)) {
-            backupSortOrder();
-        }
-        if (sortOrderChanged) {
-            const thisFirstCol = copyCurrentSortSettings().find(isFirstSortColumn);
-            const previousFirstCol = previousColSort.current.find(isFirstSortColumn);
-            // Change to sort can be: (in the context of stale sort do...)
-            // - no sort to sorted (do nothing)
-            // - asc to desc       (resort as asc, and remove stale sort)
-            // - desc to no sort   (resort as desc, and remove stale sort)
-            const wasSortChangedOnSameColumn = previousFirstCol && (!thisFirstCol || isSameColumnAndDifferentSort(previousFirstCol, thisFirstCol));
-            // if sort was stale, and we're here, someone has clicked a stale sort order (^*) in the column header
-            if (sortWasStale.current && wasSortChangedOnSameColumn) {
-                // Sort was an existing priority 1 column
-                // We want to re-sort with the old sort direction and clear stale sort
-                sortWasStale.current = false;
-                setStaleGrid(false);
-                // trigger a recapture of sort order
-                lastSortOrderHash.current = "";
-                restorePreviousSortColumnState();
-            }
-            else {
-                // Sort was on a different column so clear sort and sort like normal
-                if (sortWasStale.current) {
-                    sortWasStale.current = false;
-                    setStaleGrid(false);
-                }
-                // Columns were sorted so retain the sort
-                backupSortOrder();
-                lastSortOrderHash.current = newSortOrder;
-            }
-        }
-        else {
-            let firstChangedNodeIndex = -1;
-            let lastNewNode = undefined;
-            let changedRowCount = 0;
-            let newRowCount = 0;
-            let index = 0;
-            for (const node of nodes) {
-                const psr = previousRowSortIndex[`${node.data.id}`];
-                if (psr) {
-                    if (psr.hash != hashNode(node)) {
-                        if (firstChangedNodeIndex === -1)
-                            firstChangedNodeIndex = index;
-                        changedRowCount++;
-                    }
-                }
-                else {
-                    lastNewNode = node;
-                    newRowCount++;
-                }
-                index++;
-            }
-            let wasStale = false;
-            if (changedRowCount === 0 && newRowCount === 1) {
-                // insert new row at end
-                const newIndex = index - 1;
-                previousRowSortIndex[`${lastNewNode?.data.id}`] = { index: newIndex, hash: hashNode(lastNewNode) };
-                wasStale = true;
-            }
-            else if (changedRowCount === 2 && newRowCount === 0) {
-                // This must be a swap rows (sometimes it's not, needs further attention)
-                backupSortOrder();
-                wasStale = false;
-            }
-            else if (changedRowCount > 1 && newRowCount === 1) {
-                // This must be a insert so, insert new row near the row that changed
-                previousRowSortIndex[`${lastNewNode?.data.id}`] = {
-                    index: firstChangedNodeIndex + 0.5,
-                    hash: hashNode(lastNewNode),
-                };
-                wasStale = true;
-                // For some reason AgGrid mis-positions the inserted row.
-                lastNewNode && redrawRows();
-            }
-            else if (changedRowCount == 1 && newRowCount === 0) {
-                // User edited one row so, do nothing, retain sort
-                wasStale = true;
-            }
-            else if (changedRowCount !== 0 || newRowCount != 0) {
-                // too many rows changed, resort
-                backupSortOrder();
-            }
-            if (wasStale) {
-                // Check if the sort order the aggrid passed matches our stale sort order
-                const stillStale = Object.keys(previousRowSortIndex).length != nodes.length ||
-                    nodes.some((node, index) => previousRowSortIndex[`${node.data.id}`]?.index !== index);
-                // If we haven't already processed a stale sort then...
-                if (stillStale && !sortWasStale.current) {
-                    // backup sort state, so we can restore it when sort is clicked on a stale column
-                    previousColSort.current = copyCurrentSortSettings();
-                    sortWasStale.current = true;
-                    setStaleGrid(true);
-                }
-            }
-            sortNodesByPreviousSort();
-        }
-    }, [redrawRows, setStaleGrid]);
+    return valid.slice(0, -fileExt.length - 1).slice(0, 64) + '.' + fileExt;
 };
 
 /**
@@ -454,9 +316,9 @@ const GridHeaderSelect = ({ api }) => {
         const clickHandler = () => {
             setUpdateCounter(updateCounter + 1);
         };
-        api.addEventListener("selectionChanged", clickHandler);
+        api.addEventListener('selectionChanged', clickHandler);
         return () => {
-            !api.isDestroyed() && api.removeEventListener("selectionChanged", clickHandler);
+            !api.isDestroyed() && api.removeEventListener('selectionChanged', clickHandler);
         };
     }, [api, updateCounter]);
     const handleMultiSelect = () => {
@@ -470,11 +332,23 @@ const GridHeaderSelect = ({ api }) => {
     const totalNodeCount = api.getDisplayedRowCount();
     const partialSelect = selectedNodeCount != 0 && selectedNodeCount != totalNodeCount;
     const allSelected = selectedNodeCount != 0 && selectedNodeCount == totalNodeCount;
-    return (jsxRuntime.jsx("div", { className: clsx("ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper", partialSelect && "ag-indeterminate", allSelected && "ag-checked"), onClick: handleMultiSelect, children: jsxRuntime.jsx("input", { type: "checkbox", className: "ag-checkbox-input-wrapper", onChange: () => {
+    return (jsxRuntime.jsx("div", { className: clsx('ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', partialSelect && 'ag-indeterminate', allSelected && 'ag-checked'), onClick: handleMultiSelect, children: jsxRuntime.jsx("input", { type: "checkbox", className: 'ag-checkbox-input-wrapper', onChange: () => {
                 /* do nothing */
             } }) }));
 };
 
+const EventHandlersContext = React.createContext({
+    handleClick: () => { },
+});
+
+const ItemSettingsContext = React.createContext({
+    submenuOpenDelay: 0,
+    submenuCloseDelay: 0,
+});
+
+// FIXME hacking a default context in here is probably bad, but the context is mess
+const SettingsContext = React.createContext({});
+
 // Generate className following BEM methodology: http://getbem.com/naming/
 // Modifier value can be one of the following types: boolean, string, undefined
 const useBEM = ({ block, element, modifiers, className }) => React.useMemo(() => {
@@ -486,8 +360,8 @@ const useBEM = ({ block, element, modifiers, className }) => React.useMemo(() =>
             if (value)
                 classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
         });
-    let expandedClassName = typeof className === "function" ? className(modifiers) : className;
-    if (typeof expandedClassName === "string") {
+    let expandedClassName = typeof className === 'function' ? className(modifiers) : className;
+    if (typeof expandedClassName === 'string') {
         expandedClassName = expandedClassName.trim();
         if (expandedClassName)
             classString += ` ${expandedClassName}`;
@@ -498,7 +372,7 @@ const useBEM = ({ block, element, modifiers, className }) => React.useMemo(() =>
 // Adapted from material-ui
 // https://github.com/mui-org/material-ui/blob/f996027d00e7e4bff3fc040786c1706f9c6c3f82/packages/material-ui-utils/src/useForkRef.ts
 const setRef = (ref, instance) => {
-    if (typeof ref === "function") {
+    if (typeof ref === 'function') {
         ref(instance);
     }
     else if (ref) {
@@ -518,33 +392,50 @@ const useCombinedRef = (refA, refB) => {
 // https://github.com/reduxjs/react-redux/blob/b48d087d76f666e1c6c5a9713bbec112a1631841/src/utils/useIsomorphicLayoutEffect.js#L12
 // https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
 // https://github.com/facebook/react/issues/14927#issuecomment-549457471
-const useIsomorphicLayoutEffect = typeof window !== "undefined" &&
-    typeof window.document !== "undefined" &&
-    typeof window.document.createElement !== "undefined"
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined'
     ? React.useLayoutEffect
     : React.useEffect;
 
-const menuContainerClass = "szh-menu-container";
-const menuClass = "szh-menu";
-const menuButtonClass = "szh-menu-button";
-const menuArrowClass = "arrow";
-const menuItemClass = "item";
-const menuDividerClass = "divider";
-const menuHeaderClass = "header";
-const menuGroupClass = "group";
-const subMenuClass = "submenu";
-const radioGroupClass = "radio-group";
+const useItemEffect = (isDisabled, menuItemRef, updateItems) => {
+    useIsomorphicLayoutEffect(() => {
+        if (!menuItemRef)
+            return;
+        if (process.env.NODE_ENV !== 'production' && !updateItems) {
+            throw new Error(`[React-Menu] This menu item or submenu should be rendered under a menu: ${menuItemRef.current.outerHTML}`);
+        }
+        if (isDisabled)
+            return;
+        const item = menuItemRef.current;
+        updateItems(item, true);
+        return () => {
+            updateItems(item);
+        };
+    }, [isDisabled, menuItemRef, updateItems]);
+};
+
+const menuContainerClass = 'szh-menu-container';
+const menuClass = 'szh-menu';
+const menuButtonClass = 'szh-menu-button';
+const menuArrowClass = 'arrow';
+const menuItemClass = 'item';
+const menuDividerClass = 'divider';
+const menuHeaderClass = 'header';
+const menuGroupClass = 'group';
+const subMenuClass = 'submenu';
+const radioGroupClass = 'radio-group';
 const Keys = Object.freeze({
-    ENTER: "Enter",
-    TAB: "Tab",
-    ESC: "Escape",
-    SPACE: " ",
-    HOME: "Home",
-    END: "End",
-    LEFT: "ArrowLeft",
-    RIGHT: "ArrowRight",
-    UP: "ArrowUp",
-    DOWN: "ArrowDown",
+    ENTER: 'Enter',
+    TAB: 'Tab',
+    ESC: 'Escape',
+    SPACE: ' ',
+    HOME: 'Home',
+    END: 'End',
+    LEFT: 'ArrowLeft',
+    RIGHT: 'ArrowRight',
+    UP: 'ArrowUp',
+    DOWN: 'ArrowDown',
 });
 const HoverActionTypes = Object.freeze({
     RESET: 0,
@@ -557,39 +448,39 @@ const HoverActionTypes = Object.freeze({
     SET_INDEX: 7,
 });
 const CloseReason = Object.freeze({
-    CLICK: "click",
-    CANCEL: "cancel",
-    BLUR: "blur",
-    SCROLL: "scroll",
-    TAB_FORWARD: "tab_forward",
-    TAB_BACKWARD: "tab_backward",
+    CLICK: 'click',
+    CANCEL: 'cancel',
+    BLUR: 'blur',
+    SCROLL: 'scroll',
+    TAB_FORWARD: 'tab_forward',
+    TAB_BACKWARD: 'tab_backward',
 });
 const FocusPositions = Object.freeze({
-    FIRST: "first",
-    LAST: "last",
+    FIRST: 'first',
+    LAST: 'last',
 });
 const MenuStateMap = Object.freeze({
-    entering: "opening",
-    entered: "open",
-    exiting: "closing",
-    exited: "closed",
+    entering: 'opening',
+    entered: 'open',
+    exiting: 'closing',
+    exited: 'closed',
 });
 
-const isMenuOpen = (state) => !!state && state[0] === "o";
+const isMenuOpen = (state) => !!state && state[0] === 'o';
 const batchedUpdates = reactDom.unstable_batchedUpdates || ((callback) => callback());
 const floatEqual = (a, b, diff = 0.0001) => Math.abs(a - b) < diff;
 const getTransition = (transition, name) => transition === true || !!(transition && transition[name]);
 function safeCall(fn, arg) {
-    return typeof fn === "function" ? fn(arg) : fn;
+    return typeof fn === 'function' ? fn(arg) : fn;
 }
-const internalKey = "_szhsinMenu";
+const internalKey = '_szhsinMenu';
 const getName = (component) => component[internalKey];
 const mergeProps = (target, source) => {
     source &&
         Object.keys(source).forEach((key) => {
             const targetProp = target[key];
             const sourceProp = source[key];
-            if (typeof sourceProp === "function" && targetProp) {
+            if (typeof sourceProp === 'function' && targetProp) {
                 target[key] = (...arg) => {
                     sourceProp(...arg);
                     targetProp(...arg);
@@ -631,24 +522,24 @@ const getScrollAncestor = (node) => {
 };
 function commonProps(isDisabled, isHovering) {
     return {
-        "aria-disabled": isDisabled || undefined,
+        'aria-disabled': isDisabled || undefined,
         tabIndex: isHovering ? 0 : -1,
     };
 }
 const indexOfNode = (nodeList, node) => lodashEs.findIndex(nodeList, node);
 const focusFirstInput = (container) => {
     // We can't use instanceof Element in portals, so I use querySelectorAll as a proxy here
-    if (!container || !("querySelectorAll" in container))
+    if (!container || !('querySelectorAll' in container))
         return false;
     const inputs = container.querySelectorAll("input[type='text'],input:not([type]),textarea");
     const input = inputs[0];
     // Using focus as proxy for HTMLElement
-    if (!input || !("focus" in input))
+    if (!input || !('focus' in input))
         return false;
     input.focus();
     // Text areas should start at end
     // this is a proxy for instanceof HTMLTextAreaElement
-    if (["textarea", "text"].includes(input.type)) {
+    if (['textarea', 'text'].includes(input.type)) {
         input.setSelectionRange(0, input.value.length);
     }
     return true;
@@ -700,7 +591,7 @@ const useItems = (menuRef, focusRef) => {
         const sortItems = () => {
             if (mutableState.sorted)
                 return;
-            const orderedNodes = menuRef.current.querySelectorAll(".szh-menu__item");
+            const orderedNodes = menuRef.current.querySelectorAll('.szh-menu__item');
             items.sort((a, b) => indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b));
             mutableState.sorted = true;
         };
@@ -727,12 +618,12 @@ const useItems = (menuRef, focusRef) => {
                 newItem = items[index];
                 break;
             case HoverActionTypes.SET_INDEX:
-                if (typeof nextIndex !== "number")
+                if (typeof nextIndex !== 'number')
                     break;
                 sortItems();
                 index = nextIndex;
                 newItem = items[index];
-                lodashEs.defer(() => newItem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }));
+                lodashEs.defer(() => newItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }));
                 break;
             case HoverActionTypes.INCREASE:
                 sortItems();
@@ -758,7 +649,7 @@ const useItems = (menuRef, focusRef) => {
                 break;
             }
             default:
-                if (process.env.NODE_ENV !== "production")
+                if (process.env.NODE_ENV !== 'production')
                     throw new Error(`[React-Menu] Unknown hover action type: ${actionType}`);
         }
         if (!newItem && !newItemFn)
@@ -769,28 +660,6 @@ const useItems = (menuRef, focusRef) => {
     return { hoverItem, dispatch, updateItems };
 };
 
-const useItemEffect = (isDisabled, menuItemRef, updateItems) => {
-    useIsomorphicLayoutEffect(() => {
-        if (!menuItemRef)
-            return;
-        if (process.env.NODE_ENV !== "production" && !updateItems) {
-            throw new Error(`[React-Menu] This menu item or submenu should be rendered under a menu: ${menuItemRef.current.outerHTML}`);
-        }
-        if (isDisabled)
-            return;
-        const item = menuItemRef.current;
-        updateItems(item, true);
-        return () => {
-            updateItems(item);
-        };
-    }, [isDisabled, menuItemRef, updateItems]);
-};
-
-const ItemSettingsContext = React.createContext({
-    submenuOpenDelay: 0,
-    submenuCloseDelay: 0,
-});
-
 const MenuListItemContext = React.createContext({
     dispatch: () => { },
     updateItems: () => { },
@@ -958,8 +827,8 @@ const useMenuState = (props) => {
         mountOnEnter: !initialMounted,
         unmountOnExit: unmountOnClose,
         timeout: transitionTimeout ?? 500,
-        enter: getTransition(transition, "open"),
-        exit: getTransition(transition, "close"),
+        enter: getTransition(transition, 'open'),
+        exit: getTransition(transition, 'close'),
     });
     return [{ state: MenuStateMap[state.status], endTransition }, toggleMenu];
 };
@@ -974,18 +843,6 @@ const useMenuStateAndFocus = (options) => {
     return [{ menuItemFocus, ...menuProps }, toggleMenu, openMenu];
 };
 
-const MenuButton = React.forwardRef(function MenuButton({ className, isOpen, disabled, children, ...restProps }, ref) {
-    const modifiers = React.useMemo(() => ({ open: isOpen }), [isOpen]);
-    return (jsxRuntime.jsx("button", { "aria-haspopup": true, "aria-expanded": isOpen, "aria-disabled": disabled || undefined, type: "button", disabled: disabled, ...restProps, ref: ref, className: useBEM({ block: menuButtonClass, modifiers, className }), children: children }));
-});
-
-const EventHandlersContext = React.createContext({
-    handleClick: () => { },
-});
-
-// FIXME hacking a default context in here is probably bad, but the context is mess
-const SettingsContext = React.createContext({});
-
 const MenuListContext = React.createContext({});
 
 const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBoxPadding) => {
@@ -1080,14 +937,14 @@ const positionContextMenu = ({ positionHelpers, anchorPoint, }) => {
         x = confineHorizontally(x);
     }
     // Similar logic to the left and right side above.
-    let computedDirection = "bottom";
+    let computedDirection = 'bottom';
     const bottomOverflow = getBottomOverflow(y);
     if (bottomOverflow > 0) {
         const adjustedY = y - menuRect.height;
         const topOverflow = getTopOverflow(adjustedY);
         if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
             y = adjustedY;
-            computedDirection = "top";
+            computedDirection = 'top';
         }
         y = confineVertically(y);
     }
@@ -1106,18 +963,18 @@ const placeLeftorRight = (props) => {
     const { anchorRect, containerRect, menuRect, placeLeftorRightY, placeLeftX, placeRightX, getLeftOverflow, getRightOverflow, confineHorizontally, confineVertically, arrowRef, arrow, direction, position, } = props;
     let computedDirection = direction;
     let y = placeLeftorRightY;
-    if (position !== "initial") {
+    if (position !== 'initial') {
         y = confineVertically(y);
-        if (position === "anchor") {
+        if (position === 'anchor') {
             // restrict menu to the edge of anchor element
             y = Math.min(y, anchorRect.bottom - containerRect.top);
             y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height);
         }
     }
     let x, leftOverflow, rightOverflow;
-    if (computedDirection === "left") {
+    if (computedDirection === 'left') {
         x = placeLeftX;
-        if (position !== "initial") {
+        if (position !== 'initial') {
             // if menu overflows to the left,
             // try to reposition it to the right of the anchor.
             leftOverflow = getLeftOverflow(x);
@@ -1127,7 +984,7 @@ const placeLeftorRight = (props) => {
                 rightOverflow = getRightOverflow(placeRightX);
                 if (rightOverflow <= 0 || -leftOverflow > rightOverflow) {
                     x = placeRightX;
-                    computedDirection = "right";
+                    computedDirection = 'right';
                 }
             }
         }
@@ -1135,18 +992,18 @@ const placeLeftorRight = (props) => {
     else {
         // Opposite logic to the 'left' direction above
         x = placeRightX;
-        if (position !== "initial") {
+        if (position !== 'initial') {
             rightOverflow = getRightOverflow(x);
             if (rightOverflow > 0) {
                 leftOverflow = getLeftOverflow(placeLeftX);
                 if (leftOverflow >= 0 || -leftOverflow < rightOverflow) {
                     x = placeLeftX;
-                    computedDirection = "left";
+                    computedDirection = 'left';
                 }
             }
         }
     }
-    if (position === "auto")
+    if (position === 'auto')
         x = confineHorizontally(x);
     const arrowY = arrow
         ? placeArrowVertical({
@@ -1171,20 +1028,20 @@ const placeArrowHorizontal = (p) => {
 const placeToporBottom = (props) => {
     const { anchorRect, containerRect, menuRect, placeToporBottomX, placeTopY, placeBottomY, getTopOverflow, getBottomOverflow, confineHorizontally, confineVertically, arrowRef, arrow, direction, position, } = props;
     // make sure invalid direction is treated as 'bottom'
-    let computedDirection = direction === "top" ? "top" : "bottom";
+    let computedDirection = direction === 'top' ? 'top' : 'bottom';
     let x = placeToporBottomX;
-    if (position !== "initial") {
+    if (position !== 'initial') {
         x = confineHorizontally(x);
-        if (position === "anchor") {
+        if (position === 'anchor') {
             // restrict menu to the edge of anchor element
             x = Math.min(x, anchorRect.right - containerRect.left);
             x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width);
         }
     }
     let y, topOverflow, bottomOverflow;
-    if (computedDirection === "top") {
+    if (computedDirection === 'top') {
         y = placeTopY;
-        if (position !== "initial") {
+        if (position !== 'initial') {
             // if menu overflows to the top,
             // try to reposition it to the bottom of the anchor.
             topOverflow = getTopOverflow(y);
@@ -1194,7 +1051,7 @@ const placeToporBottom = (props) => {
                 bottomOverflow = getBottomOverflow(placeBottomY);
                 if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) {
                     y = placeBottomY;
-                    computedDirection = "bottom";
+                    computedDirection = 'bottom';
                 }
             }
         }
@@ -1202,18 +1059,18 @@ const placeToporBottom = (props) => {
     else {
         // Opposite logic to the 'top' direction above
         y = placeBottomY;
-        if (position !== "initial") {
+        if (position !== 'initial') {
             bottomOverflow = getBottomOverflow(y);
             if (bottomOverflow > 0) {
                 topOverflow = getTopOverflow(placeTopY);
                 if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
                     y = placeTopY;
-                    computedDirection = "top";
+                    computedDirection = 'top';
                 }
             }
         }
     }
-    if (position === "auto")
+    if (position === 'auto')
         y = confineVertically(y);
     const arrowX = arrow
         ? placeArrowHorizontal({
@@ -1233,7 +1090,7 @@ const positionMenu = (props) => {
     let horizontalOffset = offsetX;
     let verticalOffset = offsetY;
     if (arrow && arrowRef.current) {
-        if (direction === "left" || direction === "right") {
+        if (direction === 'left' || direction === 'right') {
             horizontalOffset += arrowRef.current.offsetWidth;
         }
         else {
@@ -1248,11 +1105,11 @@ const positionMenu = (props) => {
     const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;
     const placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset;
     let placeToporBottomX, placeLeftorRightY;
-    if (align === "end") {
+    if (align === 'end') {
         placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width;
         placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height;
     }
-    else if (align === "center") {
+    else if (align === 'center') {
         placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2;
         placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2;
     }
@@ -1277,17 +1134,17 @@ const positionMenu = (props) => {
         position,
     };
     switch (direction) {
-        case "left":
-        case "right":
+        case 'left':
+        case 'right':
             return placeLeftorRight(options);
-        case "top":
-        case "bottom":
+        case 'top':
+        case 'bottom':
         default:
             return placeToporBottom(options);
     }
 };
 
-const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowStyle, anchorPoint, anchorRef, containerRef, externalRef, parentScrollingRef, arrow, align = "start", direction = "bottom", position = "auto", overflow = "visible", setDownOverflow, repositionFlag, captureFocus = true, state, endTransition, isDisabled, menuItemFocus, dontShrinkIfDirectionIsTop, offsetX = 0, offsetY = 0, children, onClose, ...restProps }) => {
+const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowStyle, anchorPoint, anchorRef, containerRef, externalRef, parentScrollingRef, arrow, align = 'start', direction = 'bottom', position = 'auto', overflow = 'visible', setDownOverflow, repositionFlag, captureFocus = true, state, endTransition, isDisabled, menuItemFocus, dontShrinkIfDirectionIsTop, offsetX = 0, offsetY = 0, children, onClose, ...restProps }) => {
     const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
     const [arrowPosition, setArrowPosition] = React.useState({ x: 0, y: 0 });
     const [overflowData, setOverflowData] = React.useState();
@@ -1305,8 +1162,8 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
     const latestHandlePosition = React.useRef(() => { });
     const { hoverItem, dispatch, updateItems } = useItems(menuRef, focusRef);
     const isOpen = isMenuOpen(state);
-    const openTransition = getTransition(transition, "open");
-    const closeTransition = getTransition(transition, "close");
+    const openTransition = getTransition(transition, 'open');
+    const closeTransition = getTransition(transition, 'close');
     const scrollNodes = scrollNodesRef.current;
     /**
      * Given the menu-item we are on, find the closest or furthest next menu-item horizontally and focus it.
@@ -1316,8 +1173,8 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
         if (!menuItemEl)
             return false;
         let [best, worst] = [];
-        findParentWithClass("szh-menu", menuItemEl)
-            ?.querySelectorAll(".szh-menu__item")
+        findParentWithClass('szh-menu', menuItemEl)
+            ?.querySelectorAll('.szh-menu__item')
             ?.forEach((item, i) => {
             // Must be at same height as currently focused menu-item
             if (item.offsetTop === menuItemEl.offsetTop) {
@@ -1332,14 +1189,14 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
         const r = best ?? worst;
         if (!r)
             return false;
-        dispatch(HoverActionTypes.SET_INDEX, undefined, r["i"]);
+        dispatch(HoverActionTypes.SET_INDEX, undefined, r['i']);
         return true;
     };
     const onKeyDown = (e) => {
         const elementTarget = e.target instanceof HTMLElement ? e.target : null;
         const isTextInputTarget = elementTarget &&
-            (elementTarget.nodeName === "TEXTAREA" ||
-                (elementTarget.nodeName === "INPUT" && elementTarget.getAttribute("type") === "text"));
+            (elementTarget.nodeName === 'TEXTAREA' ||
+                (elementTarget.nodeName === 'INPUT' && elementTarget.getAttribute('type') === 'text'));
         switch (e.key) {
             case Keys.HOME:
                 // Don't eat home/end events on inputs
@@ -1383,14 +1240,14 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
         e.stopPropagation();
     };
     const onAnimationEnd = () => {
-        if (state === "closing") {
+        if (state === 'closing') {
             setOverflowData(undefined); // reset overflowData after closing
         }
         endTransition && safeCall(endTransition);
     };
     const handlePosition = React.useCallback((noOverflowCheck) => {
         if (!containerRef?.current) {
-            if (process.env.NODE_ENV !== "production") {
+            if (process.env.NODE_ENV !== 'production') {
                 console.error('[React-Menu] Menu cannot be positioned properly as container ref is null. If you need to initialise `state` prop to "open" for ControlledMenu, please see this solution: https://codesandbox.io/s/initial-open-sp10wn');
             }
             return;
@@ -1404,7 +1261,7 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
         const positionHelpers = getPositionHelpers(containerRef, menuRef, scrollNodes.menu, boundingBoxPadding);
         const { menuRect } = positionHelpers;
         let results = {
-            computedDirection: "bottom",
+            computedDirection: 'bottom',
             x: 0,
             y: 0,
         };
@@ -1427,7 +1284,7 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
         let { y } = results;
         const { x, arrowX, arrowY, computedDirection } = results;
         let menuHeight = menuRect.height;
-        if (!noOverflowCheck && overflow !== "visible") {
+        if (!noOverflowCheck && overflow !== 'visible') {
             const { getTopOverflow, getBottomOverflow } = positionHelpers;
             let height, overflowAmt;
             const prevHeight = latestMenuSize.current.height;
@@ -1508,21 +1365,21 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
             }
         }
         let scroll = viewScroll;
-        if (scrollNodes.anchors.length && scroll === "initial")
-            scroll = "auto";
-        if (scroll === "initial")
+        if (scrollNodes.anchors.length && scroll === 'initial')
+            scroll = 'auto';
+        if (scroll === 'initial')
             return;
         const handleScroll = () => {
-            if (scroll === "auto") {
+            if (scroll === 'auto') {
                 batchedUpdates(() => handlePosition(true));
             }
             else {
                 safeCall(onClose, { reason: CloseReason.SCROLL });
             }
         };
-        const scrollObservers = scrollNodes.anchors.concat(viewScroll !== "initial" ? menuScroll : []);
-        scrollObservers.forEach((o) => o.addEventListener("scroll", handleScroll));
-        return () => scrollObservers.forEach((o) => o.removeEventListener("scroll", handleScroll));
+        const scrollObservers = scrollNodes.anchors.concat(viewScroll !== 'initial' ? menuScroll : []);
+        scrollObservers.forEach((o) => o.addEventListener('scroll', handleScroll));
+        return () => scrollObservers.forEach((o) => o.removeEventListener('scroll', handleScroll));
     }, [rootAnchorRef, scrollNodes, isOpen, onClose, viewScroll, handlePosition]);
     const hasOverflow = !!overflowData && overflowData.overflowAmt != null && overflowData.overflowAmt > 0;
     React.useEffect(() => {
@@ -1530,11 +1387,11 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
             return;
         const handleScroll = () => batchedUpdates(handlePosition);
         const parentScroll = parentScrollingRef.current;
-        parentScroll.addEventListener("scroll", handleScroll);
-        return () => parentScroll.removeEventListener("scroll", handleScroll);
+        parentScroll.addEventListener('scroll', handleScroll);
+        return () => parentScroll.removeEventListener('scroll', handleScroll);
     }, [isOpen, hasOverflow, parentScrollingRef, handlePosition]);
     React.useEffect(() => {
-        if (typeof ResizeObserver !== "function" || reposition === "initial")
+        if (typeof ResizeObserver !== 'function' || reposition === 'initial')
             return;
         const resizeObserver = new ResizeObserver(([entry]) => {
             const { borderBoxSize, target } = entry;
@@ -1559,12 +1416,12 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
             });
         });
         const observeTarget = menuRef.current;
-        resizeObserver.observe(observeTarget, { box: "border-box" });
+        resizeObserver.observe(observeTarget, { box: 'border-box' });
         return () => resizeObserver.unobserve(observeTarget);
     }, [reposition]);
     // Matt added window resize observer
     React.useEffect(() => {
-        if (typeof ResizeObserver !== "function" || reposition === "initial")
+        if (typeof ResizeObserver !== 'function' || reposition === 'initial')
             return;
         const callback = lodashEs.debounce(() => {
             const { width, height } = menuRef.current.ownerDocument.body.getBoundingClientRect();
@@ -1582,7 +1439,7 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
         }, 250);
         const resizeObserver = new ResizeObserver(callback);
         const observeTarget = menuRef.current.ownerDocument.body;
-        resizeObserver.observe(observeTarget, { box: "border-box" });
+        resizeObserver.observe(observeTarget, { box: 'border-box' });
         return () => {
             callback.cancel();
             resizeObserver.unobserve(observeTarget);
@@ -1603,7 +1460,7 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
             else if (position === FocusPositions.LAST) {
                 dispatch(HoverActionTypes.LAST, undefined, 0);
             }
-            else if (typeof position === "number" && position >= -1) {
+            else if (typeof position === 'number' && position >= -1) {
                 dispatch(HoverActionTypes.SET_INDEX, undefined, position);
             }
         };
@@ -1665,10 +1522,10 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
         if (minHeight.current < h)
             minHeight.current = h;
     }
-    const dontShrinkOps = React.useMemo(() => expandedDirection === "top" && dontShrinkIfDirectionIsTop
+    const dontShrinkOps = React.useMemo(() => expandedDirection === 'top' && dontShrinkIfDirectionIsTop
         ? {
-            overflowY: isSubmenuOpen ? "" : "auto",
-            minHeight: (isSubmenuOpen ? 0 : minHeight.current) + "px",
+            overflowY: isSubmenuOpen ? '' : 'auto',
+            minHeight: (isSubmenuOpen ? 0 : minHeight.current) + 'px',
         }
         : undefined, [dontShrinkIfDirectionIsTop, expandedDirection, isSubmenuOpen]);
     return (jsxRuntime.jsxs("ul", { role: "menu", "aria-label": ariaLabel, ...mergeProps({ onKeyDown, onAnimationEnd }, restProps), ...commonProps(isDisabled), ref: useCombinedRef(externalRef, menuRef), className: useBEM({ block: menuClass, modifiers, className: menuClassName }), style: {
@@ -1676,18 +1533,18 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
             ...overflowStyle,
             ...dontShrinkOps,
             margin: 0,
-            display: state === "closed" ? "none" : undefined,
-            position: "absolute",
+            display: state === 'closed' ? 'none' : undefined,
+            position: 'absolute',
             left: menuPosition.x,
             top: menuPosition.y,
-        }, children: [jsxRuntime.jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 }, onKeyDown: (event) => {
-                    if (event.key == "Tab") {
+        }, children: [jsxRuntime.jsx("div", { ref: focusRef, tabIndex: -1, style: { position: 'absolute', left: 0, top: 0 }, onKeyDown: (event) => {
+                    if (event.key == 'Tab') {
                         event.preventDefault();
                         event.stopPropagation();
                         safeCall(onClose, {
                             key: event.key,
                             shiftKey: event.shiftKey,
-                            reason: event.key === "Tab"
+                            reason: event.key === 'Tab'
                                 ? event.shiftKey
                                     ? CloseReason.TAB_BACKWARD
                                     : CloseReason.TAB_FORWARD
@@ -1696,13 +1553,13 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
                     }
                 } }), arrow && (jsxRuntime.jsx("div", { className: _arrowClass, style: {
                     ...arrowStyle,
-                    position: "absolute",
+                    position: 'absolute',
                     left: arrowPosition.x,
                     top: arrowPosition.y,
                 }, ref: arrowRef })), jsxRuntime.jsx(MenuListContext.Provider, { value: listContext, children: jsxRuntime.jsx(MenuListItemContext.Provider, { value: itemContext, children: jsxRuntime.jsx(HoverItemContext.Provider, { value: hoverItem, children: children }) }) })] }));
 };
 
-const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps, initialMounted, unmountOnClose, transition, transitionTimeout, boundingBoxRef, boundingBoxPadding, reposition = "auto", submenuOpenDelay = 300, submenuCloseDelay = 150, skipOpen, viewScroll = "initial", portal, theming, onItemClick, onClose, saveButtonRef, ...restProps }, externalRef) => {
+const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps, initialMounted, unmountOnClose, transition, transitionTimeout, boundingBoxRef, boundingBoxPadding, reposition = 'auto', submenuOpenDelay = 300, submenuCloseDelay = 150, skipOpen, viewScroll = 'initial', portal, theming, onItemClick, onClose, saveButtonRef, ...restProps }, externalRef) => {
     const containerRef = React.useRef();
     const scrollNodesRef = React.useRef({});
     const { anchorRef, state } = restProps;
@@ -1729,10 +1586,10 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
         reposition,
         viewScroll,
     ]);
-    const isWithinMenu = React.useCallback((target) => hasParentClass("szh-menu--state-open", target) ||
+    const isWithinMenu = React.useCallback((target) => hasParentClass('szh-menu--state-open', target) ||
         // This is temporary, it will be removed when the overlay click is fixed
-        hasParentClass("LuiModalPrefab", target) ||
-        hasParentClass("prefab-modal", target), []);
+        hasParentClass('LuiModalPrefab', target) ||
+        hasParentClass('prefab-modal', target), []);
     const handleScreenEventForSave = React.useCallback((ev) => {
         if (!isWithinMenu(ev.target)) {
             ev.preventDefault();
@@ -1742,7 +1599,7 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
             // This doesn't happen in React18
             // To work around it, I invoke the save by clicking on a passed in invisible button ref
             if (saveButtonRef?.current) {
-                saveButtonRef.current.setAttribute("data-reason", CloseReason.BLUR);
+                saveButtonRef.current.setAttribute('data-reason', CloseReason.BLUR);
                 saveButtonRef.current.click();
             }
             else
@@ -1772,7 +1629,7 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
         const activeElement = thisDocument.activeElement;
         if (!anchorRef?.current || !activeElement)
             return;
-        if (ev.key !== "Tab" && ev.key !== "Enter")
+        if (ev.key !== 'Tab' && ev.key !== 'Enter')
             return;
         if (ev.repeat) {
             ev.preventDefault();
@@ -1782,12 +1639,12 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
         const invokeSave = (reason) => {
             if (!saveButtonRef?.current)
                 return;
-            saveButtonRef.current?.setAttribute("data-reason", reason);
+            saveButtonRef.current?.setAttribute('data-reason', reason);
             saveButtonRef?.current?.click();
         };
         // data-allowtabtosave is used such that list filter inputs can use tab to save
-        const allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
-        const inputElsIterator = thisDocument.querySelectorAll(".szh-menu--state-open input,textarea");
+        const allowTabToSave = activeElement.getAttribute('data-allowtabtosave') == 'true';
+        const inputElsIterator = thisDocument.querySelectorAll('.szh-menu--state-open input,textarea');
         let inputEls = [];
         inputElsIterator.forEach((el) => inputEls.push(el));
         inputEls = inputEls.filter((el) => !el.disabled);
@@ -1795,9 +1652,9 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
             return;
         const firstInputEl = inputEls[0];
         const lastInputEl = inputEls[inputEls.length - 1];
-        const isTextArea = activeElement.nodeName === "TEXTAREA";
-        const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") == "true" || isTextArea;
-        if (ev.key === "Tab") {
+        const isTextArea = activeElement.nodeName === 'TEXTAREA';
+        const suppressEnterAutoSave = activeElement.getAttribute('data-disableenterautosave') == 'true' || isTextArea;
+        if (ev.key === 'Tab') {
             const tabDirection = ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD;
             if ((activeElement === lastInputEl && !ev.shiftKey) ||
                 (activeElement === firstInputEl && ev.shiftKey) ||
@@ -1812,13 +1669,13 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
                 }
             }
         }
-        const type = activeElement.getAttribute("type");
-        const isTextInput = type === "text" || type == null || type === "textarea";
+        const type = activeElement.getAttribute('type');
+        const isTextInput = type === 'text' || type == null || type === 'textarea';
         switch (activeElement.nodeName) {
-            case "INPUT":
+            case 'INPUT':
                 {
                     // If there's only one input element, we support tab and enter
-                    if (isTextInput && ev.key === "Enter" && !suppressEnterAutoSave) {
+                    if (isTextInput && ev.key === 'Enter' && !suppressEnterAutoSave) {
                         ev.preventDefault();
                         ev.stopPropagation();
                         if (isDown) {
@@ -1837,19 +1694,19 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
     React.useEffect(() => {
         if (isMenuOpen(state)) {
             const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
-            thisDocument.addEventListener("keydown", handleKeydownTabAndEnter, true);
-            thisDocument.addEventListener("keyup", handleKeyupTabAndEnter, true);
-            thisDocument.addEventListener("mousedown", handleScreenEventForSave, true);
-            thisDocument.addEventListener("mouseup", handleScreenEventForCancel, true);
-            thisDocument.addEventListener("click", handleScreenEventForCancel, true);
-            thisDocument.addEventListener("dblclick", handleScreenEventForCancel, true);
+            thisDocument.addEventListener('keydown', handleKeydownTabAndEnter, true);
+            thisDocument.addEventListener('keyup', handleKeyupTabAndEnter, true);
+            thisDocument.addEventListener('mousedown', handleScreenEventForSave, true);
+            thisDocument.addEventListener('mouseup', handleScreenEventForCancel, true);
+            thisDocument.addEventListener('click', handleScreenEventForCancel, true);
+            thisDocument.addEventListener('dblclick', handleScreenEventForCancel, true);
             return () => {
-                thisDocument.removeEventListener("keydown", handleKeydownTabAndEnter, true);
-                thisDocument.removeEventListener("keyup", handleKeyupTabAndEnter, true);
-                thisDocument.removeEventListener("mousedown", handleScreenEventForSave, true);
-                thisDocument.removeEventListener("mouseup", handleScreenEventForCancel, true);
-                thisDocument.removeEventListener("click", handleScreenEventForCancel, true);
-                thisDocument.removeEventListener("dblclick", handleScreenEventForCancel, true);
+                thisDocument.removeEventListener('keydown', handleKeydownTabAndEnter, true);
+                thisDocument.removeEventListener('keyup', handleKeyupTabAndEnter, true);
+                thisDocument.removeEventListener('mousedown', handleScreenEventForSave, true);
+                thisDocument.removeEventListener('mouseup', handleScreenEventForCancel, true);
+                thisDocument.removeEventListener('click', handleScreenEventForCancel, true);
+                thisDocument.removeEventListener('dblclick', handleScreenEventForCancel, true);
             };
         }
         return () => { };
@@ -1881,7 +1738,7 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
                     value: event.value,
                     key: event.key,
                     shiftKey: event.shiftKey,
-                    reason: event.key === "Tab"
+                    reason: event.key === 'Tab'
                         ? event.shiftKey
                             ? CloseReason.TAB_BACKWARD
                             : CloseReason.TAB_FORWARD
@@ -1919,15 +1776,15 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
             }
         }
     };
-    const itemTransition = getTransition(transition, "item");
+    const itemTransition = getTransition(transition, 'item');
     const modifiers = React.useMemo(() => ({ theme: theming, itemTransition }), [theming, itemTransition]);
     const menuList = (jsxRuntime.jsx("div", { ...mergeProps({ onKeyUp, onBlur }, containerProps), className: useBEM({
             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 }) }) }) })) }));
     if (portal === true && anchorRef?.current != null) {
-        if (hasParentClass("react-menu-inline-test", anchorRef.current)) {
+        if (hasParentClass('react-menu-inline-test', anchorRef.current)) {
             portal = false;
         }
         else {
@@ -1935,8 +1792,8 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
         }
     }
     if (portal) {
-        if (typeof portal === "boolean") {
-            if (portal && typeof document !== "undefined") {
+        if (typeof portal === 'boolean') {
+            if (portal && typeof document !== 'undefined') {
                 return reactDom.createPortal(menuList, document.body);
             }
         }
@@ -1948,7 +1805,31 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
 };
 const ControlledMenu = React.forwardRef(ControlledMenuFr);
 
-function MenuFr({ "aria-label": ariaLabel, menuButton, instanceRef, onMenuChange, ...restProps }, externalRef) {
+const FocusableItemFr = ({ className, disabled, children, isHovering, menuItemRef, externalRef, ...restProps }) => {
+    const isDisabled = !!disabled;
+    const ref = React.useRef(null);
+    const { setHover, onPointerLeave, ...restStateProps } = useItemState(menuItemRef, ref, isHovering, isDisabled);
+    const { handleClose } = React.useContext(EventHandlersContext);
+    const modifiers = React.useMemo(() => ({
+        disabled: isDisabled,
+        hover: isHovering,
+        focusable: true,
+    }), [isDisabled, isHovering]);
+    const renderChildren = React.useMemo(() => safeCall(children, {
+        ...modifiers,
+        ref,
+        closeMenu: handleClose,
+    }), [children, modifiers, handleClose]);
+    const mergedProps = mergeProps({
+        ...restStateProps,
+        onPointerLeave: (e) => onPointerLeave(e, true),
+        onFocus: setHover,
+    }, restProps);
+    return (jsxRuntime.jsx("li", { role: "menuitem", ...mergedProps, ...commonProps(isDisabled), ref: useCombinedRef(externalRef, menuItemRef), className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }), children: renderChildren }));
+};
+const FocusableItem = withHovering('FocusableItem', FocusableItemFr);
+
+function MenuFr({ 'aria-label': ariaLabel, menuButton, instanceRef, onMenuChange, ...restProps }, externalRef) {
     const [stateProps, toggleMenu, openMenu] = useMenuStateAndFocus(restProps);
     const isOpen = isMenuOpen(stateProps.state);
     const skipOpen = React.useRef(false);
@@ -1980,13 +1861,13 @@ function MenuFr({ "aria-label": ariaLabel, menuButton, instanceRef, onMenuChange
     // Too many mixed types here to figure out what to pick for button.  Bad code.
     const button = safeCall(menuButton, { open: isOpen });
     if (!button || !button.type)
-        throw new Error("Menu requires a menuButton prop.");
+        throw new Error('Menu requires a menuButton prop.');
     const buttonProps = {
         ref: useCombinedRef(button.ref, buttonRef),
         ...mergeProps({ onClick, onKeyDown }, button.props),
         isOpen: false,
     };
-    if (getName(button.type) === "MenuButton") {
+    if (getName(button.type) === 'MenuButton') {
         buttonProps.isOpen = isOpen;
     }
     const renderButton = React.cloneElement(button, buttonProps);
@@ -1995,17 +1876,165 @@ function MenuFr({ "aria-label": ariaLabel, menuButton, instanceRef, onMenuChange
         openMenu,
         closeMenu: () => toggleMenu(false),
     }));
-    return (jsxRuntime.jsxs(React.Fragment, { children: [renderButton, jsxRuntime.jsx(ControlledMenu, { ...restProps, ...stateProps, "aria-label": ariaLabel || (typeof button.props.children === "string" ? button.props.children : "Menu"), anchorRef: buttonRef, ref: externalRef, onClose: handleClose, skipOpen: skipOpen })] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [renderButton, jsxRuntime.jsx(ControlledMenu, { ...restProps, ...stateProps, "aria-label": ariaLabel || (typeof button.props.children === 'string' ? button.props.children : 'Menu'), anchorRef: buttonRef, ref: externalRef, onClose: handleClose, skipOpen: skipOpen })] }));
 }
 const Menu = React.forwardRef(MenuFr);
 
-const SubMenuFr = ({ "aria-label": ariaLabel, className, disabled, direction, label, openTrigger, onMenuChange, isHovering, instanceRef, menuItemRef, itemProps = {}, ...restProps }) => {
+const MenuButton = React.forwardRef(function MenuButton({ className, isOpen, disabled, children, ...restProps }, ref) {
+    const modifiers = React.useMemo(() => ({ open: isOpen }), [isOpen]);
+    return (jsxRuntime.jsx("button", { "aria-haspopup": true, "aria-expanded": isOpen, "aria-disabled": disabled || undefined, type: "button", disabled: disabled, ...restProps, ref: ref, className: useBEM({ block: menuButtonClass, modifiers, className }), children: children }));
+});
+
+const MenuDividerFr = ({ className, ...restProps }, externalRef) => {
+    return (jsxRuntime.jsx("li", { role: "separator", ...restProps, ref: externalRef, className: useBEM({ block: menuClass, element: menuDividerClass, className }) }));
+};
+const MenuDivider = React.memo(React.forwardRef(MenuDividerFr));
+
+const MenuGroupFr = ({ className, style, takeOverflow, ...restProps }, externalRef) => {
+    const ref = React.useRef(null);
+    const [overflowStyle, setOverflowStyle] = React.useState();
+    const { overflow, overflowAmt } = React.useContext(MenuListContext);
+    useIsomorphicLayoutEffect(() => {
+        let maxHeight;
+        if (takeOverflow && overflowAmt != null && overflowAmt >= 0 && ref.current) {
+            maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
+            if (maxHeight < 0)
+                maxHeight = 0;
+        }
+        setOverflowStyle(maxHeight != null && maxHeight >= 0 ? { maxHeight, overflow } : undefined);
+    }, [takeOverflow, overflow, overflowAmt]);
+    useIsomorphicLayoutEffect(() => {
+        if (overflowStyle && ref.current)
+            ref.current.scrollTop = 0;
+    }, [overflowStyle]);
+    return (jsxRuntime.jsx("div", { ...restProps, ref: useCombinedRef(externalRef, ref), className: useBEM({ block: menuClass, element: menuGroupClass, className }), style: { ...style, ...overflowStyle } }));
+};
+const MenuGroup = React.forwardRef(MenuGroupFr);
+
+const MenuHeaderFr = ({ className, ...restProps }, externalRef) => {
+    return (jsxRuntime.jsx("li", { role: "presentation", ...restProps, ref: externalRef, className: useBEM({ block: menuClass, element: menuHeaderClass, className }) }));
+};
+const MenuHeader = React.memo(React.forwardRef(MenuHeaderFr));
+
+const RadioGroupContext = React.createContext({});
+
+const MenuItemFr = ({ className, value, href, type, checked, disabled, children, onClick, isHovering, menuItemRef, externalRef, ...restProps }) => {
+    const isDisabled = !!disabled;
+    const { setHover, ...restStateProps } = useItemState(menuItemRef, menuItemRef, isHovering, isDisabled);
+    const eventHandlers = React.useContext(EventHandlersContext);
+    const radioGroup = React.useContext(RadioGroupContext);
+    const isRadio = type === 'radio';
+    const isCheckBox = type === 'checkbox';
+    const isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
+    const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
+    // handle click seems to be a combination of multiple event types, bad code.
+    const handleClick = (e) => {
+        if (isDisabled) {
+            if (e.syntheticEvent) {
+                e.syntheticEvent.stopPropagation();
+                e.syntheticEvent.preventDefault();
+            }
+            else {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+            return;
+        }
+        const event = {
+            value,
+            syntheticEvent: e,
+        };
+        if (e.key !== undefined) {
+            const ke = e;
+            event.key = ke.key;
+            event.shiftKey = ke.shiftKey;
+        }
+        if (isCheckBox)
+            event.checked = !isChecked;
+        if (isRadio)
+            event.name = radioGroup.name;
+        safeCall(onClick, event);
+        if (isRadio)
+            safeCall(radioGroup.onRadioChange, event);
+        eventHandlers.handleClick(event, isCheckBox || isRadio);
+    };
+    const handleKeyDown = (e) => {
+        // if tab is allowed the handleKeyUp event can't process the tab
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    /**
+     * Keyboard events are triggered on up, otherwise subcomponents get spaces and enters typed in them
+     */
+    const handleKeyUp = (e) => {
+        if (!isHovering)
+            return;
+        switch (e.key) {
+            case Keys.ENTER:
+            case Keys.TAB:
+            case Keys.SPACE:
+                e.preventDefault();
+                e.stopPropagation();
+                if (isAnchor) {
+                    menuItemRef?.current && menuItemRef.current.click();
+                }
+                else {
+                    handleClick(e);
+                }
+                break;
+        }
+    };
+    const modifiers = React.useMemo(() => ({
+        type,
+        disabled: isDisabled,
+        hover: isHovering,
+        checked: isChecked,
+        anchor: isAnchor,
+    }), [type, isDisabled, isHovering, isChecked, isAnchor]);
+    const mergedProps = mergeProps({
+        ...restStateProps,
+        onPointerDown: setHover,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onClick: handleClick,
+    }, restProps);
+    // Order of props overriding (same in all components):
+    // 1. Preset props adhering to WAI-ARIA Authoring Practices.
+    // 2. Merged outer and local props
+    // 3. ref, className
+    const menuItemProps = {
+        role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : 'menuitem',
+        'aria-checked': isRadio || isCheckBox ? isChecked : undefined,
+        ...mergedProps,
+        ...commonProps(isDisabled, isHovering),
+        ref: useCombinedRef(externalRef, menuItemRef),
+        className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }),
+        children: React.useMemo(() => safeCall(children, modifiers), [children, modifiers]),
+    };
+    if (isAnchor) {
+        return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsx("a", { href: href, ...menuItemProps }) }));
+    }
+    else {
+        return jsxRuntime.jsx("li", { ...menuItemProps });
+    }
+};
+const MenuItem = withHovering('MenuItem', MenuItemFr);
+
+const MenuRadioGroupFr = ({ 'aria-label': ariaLabel, className, name, value, onRadioChange, ...restProps }, externalRef) => {
+    const contextValue = React.useMemo(() => ({ name, value, onRadioChange }), [name, value, onRadioChange]);
+    return (jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsx("ul", { role: "group", "aria-label": ariaLabel || name || 'Radio group', ...restProps, ref: externalRef, className: useBEM({ block: menuClass, element: radioGroupClass, className }) }) }) }));
+};
+const MenuRadioGroup = React.forwardRef(MenuRadioGroupFr);
+
+const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, label, openTrigger, onMenuChange, isHovering, instanceRef, menuItemRef, itemProps = {}, ...restProps }) => {
     const settings = React.useContext(SettingsContext);
     const { rootMenuRef } = settings;
     const { submenuOpenDelay, submenuCloseDelay } = React.useContext(ItemSettingsContext);
     const { parentMenuRef, parentDir, overflow: parentOverflow } = React.useContext(MenuListContext);
     const { isParentOpen, isSubmenuOpen, setOpenSubmenuCount, dispatch, updateItems } = React.useContext(MenuListItemContext);
-    const isPortal = parentOverflow !== "visible";
+    const isPortal = parentOverflow !== 'visible';
     const [stateProps, toggleMenu, _openMenu] = useMenuStateAndFocus(settings);
     const { state } = stateProps;
     const isDisabled = !!disabled;
@@ -2073,7 +2102,7 @@ const SubMenuFr = ({ "aria-label": ariaLabel, className, disabled, direction, la
             case Keys.ENTER:
             case Keys.SPACE:
             case Keys.RIGHT:
-                openTrigger !== "none" && openMenu(FocusPositions.FIRST);
+                openTrigger !== 'none' && openMenu(FocusPositions.FIRST);
                 break;
         }
     };
@@ -2115,188 +2144,21 @@ const SubMenuFr = ({ "aria-label": ariaLabel, className, disabled, direction, la
         onPointerMove: handlePointerMove,
         onPointerLeave: handlePointerLeave,
         onKeyDown: handleItemKeyDown,
-        onClick: () => openTrigger !== "none" && openMenu(),
+        onClick: () => openTrigger !== 'none' && openMenu(),
     }, restItemProps);
     const getMenuList = () => {
-        const menuList = (jsxRuntime.jsx(MenuList, { ...restProps, ...stateProps, ariaLabel: ariaLabel || (typeof label === "string" ? label : "Submenu"), anchorRef: menuItemRef, containerRef: isPortal ? rootMenuRef : containerRef, direction: direction || (parentDir === "right" || parentDir === "left" ? parentDir : "right"), parentScrollingRef: isPortal && parentMenuRef, isDisabled: isDisabled }));
+        const menuList = (jsxRuntime.jsx(MenuList, { ...restProps, ...stateProps, ariaLabel: ariaLabel || (typeof label === 'string' ? label : 'Submenu'), anchorRef: menuItemRef, containerRef: isPortal ? rootMenuRef : containerRef, direction: direction || (parentDir === 'right' || parentDir === 'left' ? parentDir : 'right'), parentScrollingRef: isPortal && parentMenuRef, isDisabled: isDisabled }));
         const container = rootMenuRef?.current;
         return isPortal && container ? reactDom.createPortal(menuList, container) : menuList;
     };
-    return (jsxRuntime.jsxs("li", { className: useBEM({ block: menuClass, element: subMenuClass, className }), style: { position: "relative" }, role: "presentation", ref: containerRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("div", { role: "menuitem", "aria-haspopup": true, "aria-expanded": isOpen, ...mergedItemProps, ...commonProps(isDisabled, isHovering), ref: useCombinedRef(externalItemRef, menuItemRef), className: useBEM({
+    return (jsxRuntime.jsxs("li", { className: useBEM({ block: menuClass, element: subMenuClass, className }), style: { position: 'relative' }, role: "presentation", ref: containerRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("div", { role: "menuitem", "aria-haspopup": true, "aria-expanded": isOpen, ...mergedItemProps, ...commonProps(isDisabled, isHovering), ref: useCombinedRef(externalItemRef, menuItemRef), className: useBEM({
                     block: menuClass,
                     element: menuItemClass,
                     modifiers,
                     className: itemClassName,
                 }), children: React.useMemo(() => safeCall(label, modifiers), [label, modifiers]) }), state && getMenuList()] }));
 };
-const SubMenu = withHovering("SubMenu", SubMenuFr);
-
-const RadioGroupContext = React.createContext({});
-
-const MenuItemFr = ({ className, value, href, type, checked, disabled, children, onClick, isHovering, menuItemRef, externalRef, ...restProps }) => {
-    const isDisabled = !!disabled;
-    const { setHover, ...restStateProps } = useItemState(menuItemRef, menuItemRef, isHovering, isDisabled);
-    const eventHandlers = React.useContext(EventHandlersContext);
-    const radioGroup = React.useContext(RadioGroupContext);
-    const isRadio = type === "radio";
-    const isCheckBox = type === "checkbox";
-    const isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
-    const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
-    // handle click seems to be a combination of multiple event types, bad code.
-    const handleClick = (e) => {
-        if (isDisabled) {
-            if (e.syntheticEvent) {
-                e.syntheticEvent.stopPropagation();
-                e.syntheticEvent.preventDefault();
-            }
-            else {
-                e.stopPropagation();
-                e.preventDefault();
-            }
-            return;
-        }
-        const event = {
-            value,
-            syntheticEvent: e,
-        };
-        if (e.key !== undefined) {
-            const ke = e;
-            event.key = ke.key;
-            event.shiftKey = ke.shiftKey;
-        }
-        if (isCheckBox)
-            event.checked = !isChecked;
-        if (isRadio)
-            event.name = radioGroup.name;
-        safeCall(onClick, event);
-        if (isRadio)
-            safeCall(radioGroup.onRadioChange, event);
-        eventHandlers.handleClick(event, isCheckBox || isRadio);
-    };
-    const handleKeyDown = (e) => {
-        // if tab is allowed the handleKeyUp event can't process the tab
-        if (e.key === "Tab") {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    };
-    /**
-     * Keyboard events are triggered on up, otherwise subcomponents get spaces and enters typed in them
-     */
-    const handleKeyUp = (e) => {
-        if (!isHovering)
-            return;
-        switch (e.key) {
-            case Keys.ENTER:
-            case Keys.TAB:
-            case Keys.SPACE:
-                e.preventDefault();
-                e.stopPropagation();
-                if (isAnchor) {
-                    menuItemRef?.current && menuItemRef.current.click();
-                }
-                else {
-                    handleClick(e);
-                }
-                break;
-        }
-    };
-    const modifiers = React.useMemo(() => ({
-        type,
-        disabled: isDisabled,
-        hover: isHovering,
-        checked: isChecked,
-        anchor: isAnchor,
-    }), [type, isDisabled, isHovering, isChecked, isAnchor]);
-    const mergedProps = mergeProps({
-        ...restStateProps,
-        onPointerDown: setHover,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        onClick: handleClick,
-    }, restProps);
-    // Order of props overriding (same in all components):
-    // 1. Preset props adhering to WAI-ARIA Authoring Practices.
-    // 2. Merged outer and local props
-    // 3. ref, className
-    const menuItemProps = {
-        role: isRadio ? "menuitemradio" : isCheckBox ? "menuitemcheckbox" : "menuitem",
-        "aria-checked": isRadio || isCheckBox ? isChecked : undefined,
-        ...mergedProps,
-        ...commonProps(isDisabled, isHovering),
-        ref: useCombinedRef(externalRef, menuItemRef),
-        className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }),
-        children: React.useMemo(() => safeCall(children, modifiers), [children, modifiers]),
-    };
-    if (isAnchor) {
-        return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsx("a", { href: href, ...menuItemProps }) }));
-    }
-    else {
-        return jsxRuntime.jsx("li", { ...menuItemProps });
-    }
-};
-const MenuItem = withHovering("MenuItem", MenuItemFr);
-
-const FocusableItemFr = ({ className, disabled, children, isHovering, menuItemRef, externalRef, ...restProps }) => {
-    const isDisabled = !!disabled;
-    const ref = React.useRef(null);
-    const { setHover, onPointerLeave, ...restStateProps } = useItemState(menuItemRef, ref, isHovering, isDisabled);
-    const { handleClose } = React.useContext(EventHandlersContext);
-    const modifiers = React.useMemo(() => ({
-        disabled: isDisabled,
-        hover: isHovering,
-        focusable: true,
-    }), [isDisabled, isHovering]);
-    const renderChildren = React.useMemo(() => safeCall(children, {
-        ...modifiers,
-        ref,
-        closeMenu: handleClose,
-    }), [children, modifiers, handleClose]);
-    const mergedProps = mergeProps({
-        ...restStateProps,
-        onPointerLeave: (e) => onPointerLeave(e, true),
-        onFocus: setHover,
-    }, restProps);
-    return (jsxRuntime.jsx("li", { role: "menuitem", ...mergedProps, ...commonProps(isDisabled), ref: useCombinedRef(externalRef, menuItemRef), className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }), children: renderChildren }));
-};
-const FocusableItem = withHovering("FocusableItem", FocusableItemFr);
-
-const MenuDividerFr = ({ className, ...restProps }, externalRef) => {
-    return (jsxRuntime.jsx("li", { role: "separator", ...restProps, ref: externalRef, className: useBEM({ block: menuClass, element: menuDividerClass, className }) }));
-};
-const MenuDivider = React.memo(React.forwardRef(MenuDividerFr));
-
-const MenuHeaderFr = ({ className, ...restProps }, externalRef) => {
-    return (jsxRuntime.jsx("li", { role: "presentation", ...restProps, ref: externalRef, className: useBEM({ block: menuClass, element: menuHeaderClass, className }) }));
-};
-const MenuHeader = React.memo(React.forwardRef(MenuHeaderFr));
-
-const MenuGroupFr = ({ className, style, takeOverflow, ...restProps }, externalRef) => {
-    const ref = React.useRef(null);
-    const [overflowStyle, setOverflowStyle] = React.useState();
-    const { overflow, overflowAmt } = React.useContext(MenuListContext);
-    useIsomorphicLayoutEffect(() => {
-        let maxHeight;
-        if (takeOverflow && overflowAmt != null && overflowAmt >= 0 && ref.current) {
-            maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
-            if (maxHeight < 0)
-                maxHeight = 0;
-        }
-        setOverflowStyle(maxHeight != null && maxHeight >= 0 ? { maxHeight, overflow } : undefined);
-    }, [takeOverflow, overflow, overflowAmt]);
-    useIsomorphicLayoutEffect(() => {
-        if (overflowStyle && ref.current)
-            ref.current.scrollTop = 0;
-    }, [overflowStyle]);
-    return (jsxRuntime.jsx("div", { ...restProps, ref: useCombinedRef(externalRef, ref), className: useBEM({ block: menuClass, element: menuGroupClass, className }), style: { ...style, ...overflowStyle } }));
-};
-const MenuGroup = React.forwardRef(MenuGroupFr);
-
-const MenuRadioGroupFr = ({ "aria-label": ariaLabel, className, name, value, onRadioChange, ...restProps }, externalRef) => {
-    const contextValue = React.useMemo(() => ({ name, value, onRadioChange }), [name, value, onRadioChange]);
-    return (jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsx("ul", { role: "group", "aria-label": ariaLabel || name || "Radio group", ...restProps, ref: externalRef, className: useBEM({ block: menuClass, element: radioGroupClass, className }) }) }) }));
-};
-const MenuRadioGroup = React.forwardRef(MenuRadioGroupFr);
+const SubMenu = withHovering('SubMenu', SubMenuFr);
 
 const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, }) => {
     const { redrawRows, prePopupOps, postPopupOps, getSelectedRows } = React.useContext(GridContext);
@@ -2331,46 +2193,191 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
     return {
         openMenu,
         cellContextMenu,
-        component: ContextMenu ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ControlledMenu, { anchorPoint: anchorPoint, state: isOpen ? "open" : "closed", direction: "right", onClose: closeMenu, children: isOpen && (jsxRuntime.jsx(ContextMenu, { selectedRows: selectedRowsRef.current, clickedRow: clickedRowRef.current, colDef: clickedColDefRef.current, close: closeMenu })) }) })) : null,
+        component: ContextMenu ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ControlledMenu, { anchorPoint: anchorPoint, state: isOpen ? 'open' : 'closed', direction: "right", onClose: closeMenu, children: isOpen && (jsxRuntime.jsx(ContextMenu, { selectedRows: selectedRowsRef.current, clickedRow: clickedRowRef.current, colDef: clickedColDefRef.current, close: closeMenu })) }) })) : null,
     };
 };
 
+const GridLoadingOverlayComponentFr = (props, externalRef) => (jsxRuntime.jsx("div", { ref: externalRef, style: {
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        position: 'absolute',
+        backgroundColor: 'rgba(255,255,255,0.5)',
+    }, children: jsxRuntime.jsx("div", { style: { height: '100%', position: 'relative' }, children: jsxRuntime.jsx("div", { style: { position: 'absolute', left: 0, top: props.headerRowHeight, right: 0, bottom: 0 }, children: jsxRuntime.jsx(lui.LuiStatusSpinner, {}) }) }) }));
+const GridLoadingOverlayComponent = React.forwardRef(GridLoadingOverlayComponentFr);
+const GridNoRowsOverlayFr = (props, externalRef) => {
+    if (props.loading) {
+        return jsxRuntime.jsx(GridLoadingOverlayComponent, { ref: externalRef, headerRowHeight: props.headerRowHeight });
+    }
+    if (props.rowCount === 0) {
+        return jsxRuntime.jsx("div", { ref: externalRef, children: props.noRowsOverlayText ?? 'There are currently no rows' });
+    }
+    if (props.filteredRowCount === 0) {
+        return jsxRuntime.jsx("div", { ref: externalRef, children: props.noRowsMatchingOverlayText ?? 'All rows have been filtered' });
+    }
+    return jsxRuntime.jsx("div", { ref: externalRef });
+};
+const GridNoRowsOverlay = React.forwardRef(GridNoRowsOverlayFr);
+
 /**
- * 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.
+ * Retains last sort order from via <AgGrid postRowSort>.
+ * Then applies this sort until next sort column change.
+ * Handles stale sort, when you edit a row but don't want to re-sort.
  */
-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)
+const usePostSortRowsHook = ({ setStaleGrid }) => {
+    const { redrawRows } = React.useContext(GridContext);
+    // On first run we need to init the first backed up sort order
+    const initialised = React.useRef(false);
+    // Used to detect sort order has changed since last run
+    const lastSortOrderHash = React.useRef('');
+    // Used to detect if sort order was the same, has the direction changed
+    const previousRowSortIndexRef = React.useRef({});
+    // stale sort is when there's a sort and user edits a row
+    // this applies a class to the div wrapping the grid which in turn adds a * beside the sort arrow
+    const sortWasStale = React.useRef(false);
+    // Previous col sort is stored and reapplied if the sort direction changes on the same column and the sort was stale
+    // As a sort on a stale row should just resort, not change sort direction
+    const previousColSort = React.useRef([]);
+    const previousQuickFilter = React.useRef('');
+    return React.useCallback(({ api, nodes }) => {
+        // Grid is destroyed
+        if (!api)
             return;
-        input?.dispatchEvent(event);
-    };
-    setTimeout(clickInput, 20);
+        const previousRowSortIndex = previousRowSortIndexRef.current;
+        const hashNode = (node) => {
+            return node ? JSON.stringify(node.data) : '';
+        };
+        const copyCurrentSortSettings = () => api.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
+        const backupSortOrder = () => {
+            for (const x in previousRowSortIndex)
+                delete previousRowSortIndex[x];
+            nodes.forEach((node, index) => (previousRowSortIndex[`${node.data.id}`] = { index, hash: hashNode(node) }));
+        };
+        // Check if column is the first sorted column.  Note: column is preconfigured to sort its sortIndex is null not 1
+        const isFirstSortColumn = (row) => row.sort && [0, null].includes(row.sortIndex ?? null);
+        const isSameColumnAndDifferentSort = (col1, col2) => col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;
+        const restorePreviousSortColumnState = () => api.applyColumnState({ state: previousColSort.current });
+        const sortNodesByPreviousSort = () => {
+            nodes.sort((a, b) => (previousRowSortIndex[`${a.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER) -
+                (previousRowSortIndex[`${b.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER));
+        };
+        // On first load copy the current sort
+        if (!initialised.current) {
+            initialised.current = true;
+            previousColSort.current = copyCurrentSortSettings();
+        }
+        const newSortOrder = JSON.stringify(copyCurrentSortSettings());
+        let sortOrderChanged = newSortOrder != lastSortOrderHash.current;
+        const quickFilter = api.getQuickFilter();
+        if (previousQuickFilter.current != quickFilter) {
+            previousQuickFilter.current = quickFilter ?? '';
+            sortOrderChanged = true;
+        }
+        if (lodashEs.isEmpty(previousRowSortIndex)) {
+            backupSortOrder();
+        }
+        if (sortOrderChanged) {
+            const thisFirstCol = copyCurrentSortSettings().find(isFirstSortColumn);
+            const previousFirstCol = previousColSort.current.find(isFirstSortColumn);
+            // Change to sort can be: (in the context of stale sort do...)
+            // - no sort to sorted (do nothing)
+            // - asc to desc       (resort as asc, and remove stale sort)
+            // - desc to no sort   (resort as desc, and remove stale sort)
+            const wasSortChangedOnSameColumn = previousFirstCol && (!thisFirstCol || isSameColumnAndDifferentSort(previousFirstCol, thisFirstCol));
+            // if sort was stale, and we're here, someone has clicked a stale sort order (^*) in the column header
+            if (sortWasStale.current && wasSortChangedOnSameColumn) {
+                // Sort was an existing priority 1 column
+                // We want to re-sort with the old sort direction and clear stale sort
+                sortWasStale.current = false;
+                setStaleGrid(false);
+                // trigger a recapture of sort order
+                lastSortOrderHash.current = '';
+                restorePreviousSortColumnState();
+            }
+            else {
+                // Sort was on a different column so clear sort and sort like normal
+                if (sortWasStale.current) {
+                    sortWasStale.current = false;
+                    setStaleGrid(false);
+                }
+                // Columns were sorted so retain the sort
+                backupSortOrder();
+                lastSortOrderHash.current = newSortOrder;
+            }
+        }
+        else {
+            let firstChangedNodeIndex = -1;
+            let lastNewNode = undefined;
+            let changedRowCount = 0;
+            let newRowCount = 0;
+            let index = 0;
+            for (const node of nodes) {
+                const psr = previousRowSortIndex[`${node.data.id}`];
+                if (psr) {
+                    if (psr.hash != hashNode(node)) {
+                        if (firstChangedNodeIndex === -1)
+                            firstChangedNodeIndex = index;
+                        changedRowCount++;
+                    }
+                }
+                else {
+                    lastNewNode = node;
+                    newRowCount++;
+                }
+                index++;
+            }
+            let wasStale = false;
+            if (changedRowCount === 0 && newRowCount === 1) {
+                // insert new row at end
+                const newIndex = index - 1;
+                previousRowSortIndex[`${lastNewNode?.data.id}`] = { index: newIndex, hash: hashNode(lastNewNode) };
+                wasStale = true;
+            }
+            else if (changedRowCount === 2 && newRowCount === 0) {
+                // This must be a swap rows (sometimes it's not, needs further attention)
+                backupSortOrder();
+                wasStale = false;
+            }
+            else if (changedRowCount > 1 && newRowCount === 1) {
+                // This must be a insert so, insert new row near the row that changed
+                previousRowSortIndex[`${lastNewNode?.data.id}`] = {
+                    index: firstChangedNodeIndex + 0.5,
+                    hash: hashNode(lastNewNode),
+                };
+                wasStale = true;
+                // For some reason AgGrid mis-positions the inserted row.
+                lastNewNode && redrawRows();
+            }
+            else if (changedRowCount == 1 && newRowCount === 0) {
+                // User edited one row so, do nothing, retain sort
+                wasStale = true;
+            }
+            else if (changedRowCount !== 0 || newRowCount != 0) {
+                // too many rows changed, resort
+                backupSortOrder();
+            }
+            if (wasStale) {
+                // Check if the sort order the aggrid passed matches our stale sort order
+                const stillStale = Object.keys(previousRowSortIndex).length != nodes.length ||
+                    nodes.some((node, index) => previousRowSortIndex[`${node.data.id}`]?.index !== index);
+                // If we haven't already processed a stale sort then...
+                if (stillStale && !sortWasStale.current) {
+                    // backup sort state, so we can restore it when sort is clicked on a stale column
+                    previousColSort.current = copyCurrentSortSettings();
+                    sortWasStale.current = true;
+                    setStaleGrid(true);
+                }
+            }
+            sortNodesByPreviousSort();
+        }
+    }, [redrawRows, setStaleGrid]);
 };
 
 /**
  * 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 = null, contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, ...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 gridDivRef = React.useRef(null);
@@ -2399,20 +2406,20 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
             needsAutoSize.current = true;
             return;
         }
-        const skipHeader = sizeColumns === "auto-skip-headers" && gridRendered === "rows-visible";
-        if (sizeColumns === "auto" || skipHeader) {
+        const skipHeader = sizeColumns === 'auto-skip-headers' && gridRendered === 'rows-visible';
+        if (sizeColumns === 'auto' || skipHeader) {
             const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, includeFlex: true });
             if (!result) {
                 needsAutoSize.current = true;
                 return;
             }
-            if (gridRendered === "empty") {
+            if (gridRendered === 'empty') {
                 if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
                     hasSetContentSizeEmpty.current = true;
                     params.onContentSize?.(result);
                 }
             }
-            else if (gridRendered === "rows-visible") {
+            else if (gridRendered === 'rows-visible') {
                 if (!hasSetContentSize.current) {
                     if (lastFullResize.current === result.width) {
                         hasSetContentSize.current = true;
@@ -2426,10 +2433,10 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
             }
             else {
                 // It should be impossible to get here
-                console.error("Unknown value returned from hasGridRendered");
+                console.error('Unknown value returned from hasGridRendered');
             }
         }
-        if (sizeColumns !== "none") {
+        if (sizeColumns !== 'none') {
             sizeColumnsToFit();
         }
         setAutoSized(true);
@@ -2448,7 +2455,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
                 needsAutoSize.current = true;
             }
         }
-        if (needsAutoSize.current || (!hasSetContentSize.current && sizeColumns === "auto")) {
+        if (needsAutoSize.current || (!hasSetContentSize.current && sizeColumns === 'auto')) {
             needsAutoSize.current = false;
             setInitialContentSize();
         }
@@ -2490,7 +2497,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
         }
         const selectedRows = api.getSelectedRows();
         // We don't want to update selected Items if it hasn't changed to prevent excess renders
-        if (params.externalSelectedItems.length != selectedRows.length ||
+        if (params.externalSelectedItems.length !== selectedRows.length ||
             isNotEmpty(lodashEs.xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))) {
             setExternallySelectedItemsAreInSync(false);
             params.setExternalSelectedItems([...selectedRows]);
@@ -2546,14 +2553,14 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
                 editable,
                 cellClassRules: {
                     ...colDef.cellClassRules,
-                    "GridCell-readonly": (ccp) => !editable(ccp),
+                    'GridCell-readonly': (ccp) => !editable(ccp),
                 },
             };
         });
         return params.selectable || params.onRowDragEnd
             ? [
                 {
-                    colId: "selection",
+                    colId: 'selection',
                     editable: false,
                     rowDrag: !!params.onRowDragEnd,
                     minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
@@ -2563,12 +2570,12 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
                         exportable: false,
                     },
                     checkboxSelection: params.selectable,
-                    headerClass: params.onRowDragEnd ? "ag-header-select-draggable" : undefined,
-                    headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
+                    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 ((e.event.key === 'Enter' || e.event.key === ' ') && !e.event.repeat) {
                             if (lodashEs.isEmpty(e.api.getSelectedRows())) {
                                 e.api.selectAllFiltered();
                             }
@@ -2619,7 +2626,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
         // Don't update while there are spinners
         if (!lodashEs.isEmpty(updatingCols()))
             return;
-        const skipHeader = sizeColumns === "auto-skip-headers";
+        const skipHeader = sizeColumns === 'auto-skip-headers';
         if (hasSetContentSize.current) {
             autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
         }
@@ -2649,7 +2656,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
             event.node.setSelected(true, true);
         }
         // Cell already being edited, so don't re-edit until finished
-        if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
+        if (checkUpdating([event.colDef.field ?? ''], event.data.id)) {
             return;
         }
         if (event.rowIndex !== null) {
@@ -2695,11 +2702,11 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
      */
     const onCellKeyPress = React.useCallback((e) => {
         const kbe = e.event;
-        if (kbe.key === "Enter") {
+        if (kbe.key === 'Enter') {
             if (!invokeEditAction(e))
                 startCellEditing(e);
         }
-        if (kbe.key === "Tab") {
+        if (kbe.key === 'Tab') {
             // eslint-disable-next-line
             prePopupOps();
         }
@@ -2709,14 +2716,14 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
      * but we don't want the non-flex auto-sized columns to "fit" size, so suppressSizeToFit is set to true.
      */
     const columnDefsAdjusted = React.useMemo(() => {
-        const adjustColDefOrGroup = (colDef) => "children" in colDef ? adjustGroupColDef(colDef) : adjustColDef(colDef);
+        const adjustColDefOrGroup = (colDef) => 'children' in colDef ? adjustGroupColDef(colDef) : adjustColDef(colDef);
         const adjustGroupColDef = (colDef) => ({
             ...colDef,
             children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
         });
         const adjustColDef = (colDef) => ({
             ...colDef,
-            suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex,
+            suppressSizeToFit: (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && !colDef.flex,
             sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
         });
         return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
@@ -2738,8 +2745,8 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
         if (lodashEs.isEmpty(colIds)) {
             // Columns to resize?
             if (!lodashEs.isEmpty(colIdsEdited.current)) {
-                const skipHeader = sizeColumns === "auto-skip-headers";
-                if (sizeColumns === "auto" || skipHeader) {
+                const skipHeader = sizeColumns === 'auto-skip-headers';
+                if (sizeColumns === 'auto' || skipHeader) {
                     lodashEs.defer(() => {
                         if (hasSetContentSize.current) {
                             autoSizeColumns({
@@ -2775,7 +2782,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
      * Resize columns to fit if required on window/container resize
      */
     const onGridSizeChanged = React.useCallback(() => {
-        if (sizeColumns !== "none") {
+        if (sizeColumns !== 'none') {
             sizeColumnsToFit();
         }
     }, [sizeColumns, sizeColumnsToFit]);
@@ -2791,10 +2798,10 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
         if (colId == null)
             return;
         switch (e.source) {
-            case "uiColumnDragged":
+            case 'uiColumnDragged':
                 userSizedColIds.current.add(colId);
                 break;
-            case "autosizeColumns":
+            case 'autosizeColumns':
                 userSizedColIds.current.delete(colId);
                 break;
         }
@@ -2816,33 +2823,35 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
             }
         }
     }, []);
-    const onRowDragEnd = React.useCallback(async (event) => {
-        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 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));
             }
-            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));
-        }
-        clientSideRowModel.highlightRowAtPixel(null);
+            clientSideRowModel.highlightRowAtPixel(null);
+        })();
     }, [params]);
     // 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: () => {
+    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) => {
+                    }, 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 }));
@@ -2853,18 +2862,20 @@ const GridPopoverContext = React.createContext({
     anchorRef: { current: null },
     saving: false,
     setSaving: () => { },
-    colId: "",
-    field: "",
+    colId: '',
+    field: '',
     value: null,
     data: {},
     selectedRows: [],
-    updateValue: async () => false,
-    formatValue: () => "! No gridPopoverContextProvider !",
+    updateValue: () => false,
+    formatValue: () => '! No gridPopoverContextProvider !',
 });
 const useGridPopoverContext = () => React.useContext(GridPopoverContext);
 
-const GridPopoverContextProvider = ({ props, children }) => {
+const GridPopoverContextProvider = (props2) => {
     const { getFilteredSelectedRows, updatingCells } = React.useContext(GridContext);
+    const children = props2.children;
+    const props = props2.props;
     const anchorRef = React.useRef(props.eGridCell);
     const hasSaved = React.useRef(false);
     const [saving, setSaving] = React.useState(false);
@@ -2873,8 +2884,8 @@ const GridPopoverContextProvider = ({ props, children }) => {
     const multiEdit = cellEditorParams?.multiEdit ?? false;
     // Then item that is clicked on will always be first in the list
     const selectedRows = React.useMemo(() => multiEdit ? lodashEs.sortBy(getFilteredSelectedRows(), (row) => row.id !== props.data.id) : [props.data], [getFilteredSelectedRows, multiEdit, props.data]);
-    const field = props.colDef?.field ?? "";
-    const colId = props.colDef?.colId ?? field ?? "";
+    const field = props.colDef?.field ?? '';
+    const colId = props.colDef?.colId ?? field ?? '';
     const updateValue = React.useCallback(async (saveFn, tabDirection) => {
         if (hasSaved.current)
             return true;
@@ -2896,7 +2907,7 @@ const GridPopoverContextProvider = ({ props, children }) => {
 };
 
 const GridCellMultiSelectClassRules = {
-    "ag-selected-for-edit": (params) => {
+    'ag-selected-for-edit': (params) => {
         const { api, node, colDef } = params;
         const cep = colDef.cellEditorSelector
             ? colDef.cellEditorSelector(params)?.params
@@ -2910,9 +2921,9 @@ const GridCellMultiSelectClassRules = {
     },
 };
 
-const GridIcon = (props) => (jsxRuntime.jsx(lui.LuiIcon, { name: props.icon, title: props.title, alt: props.title, size: props.size ?? "md", className: clsx(`AgGridGenericCellRenderer-${props.icon}Icon`, props.className, props.disabled && "GridIcon-disabled") }));
+const GridIcon = (props) => (jsxRuntime.jsx(lui.LuiIcon, { name: props.icon, title: props.title, alt: props.title, size: props.size ?? 'md', className: clsx(`AgGridGenericCellRenderer-${props.icon}Icon`, props.className, props.disabled && 'GridIcon-disabled') }));
 
-const GridLoadableCell = () => (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: { className: "GridLoadableCell-container", role: "status", "aria-label": "Loading" } }));
+const GridLoadableCell = () => (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: { className: 'GridLoadableCell-container', role: 'status', 'aria-label': 'Loading' } }));
 
 const GridCellRenderer = (props) => {
     const { checkUpdating } = React.useContext(GridUpdatingContext);
@@ -2923,38 +2934,38 @@ const GridCellRenderer = (props) => {
     const infoFn = rendererParams?.info;
     let infoText = props.data !== undefined && infoFn ? infoFn(props) : undefined;
     if (Array.isArray(warningText))
-        warningText = warningText.join("\n");
+        warningText = warningText.join('\n');
     if (Array.isArray(infoText))
-        infoText = infoText.join("\n");
-    return checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id) ? (jsxRuntime.jsx(GridLoadableCell, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!warningText && (jsxRuntime.jsx(GridIcon, { icon: "ic_warning_outline", title: typeof warningText === "string" ? warningText : "Warning" })), !!infoText && jsxRuntime.jsx(GridIcon, { icon: "ic_info_outline", title: typeof infoText === "string" ? infoText : "Info" }), jsxRuntime.jsx("div", { className: "GridCell-container", children: colDef.cellRendererParams?.originalCellRenderer ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsxRuntime.jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsxRuntime.jsx("div", { className: "GridCell-hoverRight", children: rendererParams?.rightHoverElement }))] }));
+        infoText = infoText.join('\n');
+    return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (jsxRuntime.jsx(GridLoadableCell, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!warningText && (jsxRuntime.jsx(GridIcon, { icon: 'ic_warning_outline', title: typeof warningText === 'string' ? warningText : 'Warning' })), !!infoText && jsxRuntime.jsx(GridIcon, { icon: 'ic_info_outline', title: typeof infoText === 'string' ? infoText : 'Info' }), jsxRuntime.jsx("div", { className: 'GridCell-container', children: colDef.cellRendererParams?.originalCellRenderer ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsxRuntime.jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsxRuntime.jsx("div", { className: 'GridCell-hoverRight', children: rendererParams?.rightHoverElement }))] }));
 };
 const suppressCellKeyboardEvents = (e) => {
     const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
     const exec = shortcutKeys[e.event.key];
-    if (exec && !e.editing && !e.event.repeat && e.event.type === "keydown") {
+    if (exec && !e.editing && !e.event.repeat && e.event.type === 'keydown') {
         const editable = fnOrVar(e.colDef?.editable, e);
         return editable ? (exec(e) ?? true) : true;
     }
     // It's important that aggrid doesn't trigger edit on enter
     // as the incorrect selected rows will be returned
-    return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " ", "Home", "End", "PageUp", "PageDown"].includes(e.event.key);
+    return !['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp', 'Tab', ' ', 'Home', 'End', 'PageUp', 'PageDown'].includes(e.event.key);
 };
 const generateFilterGetter = (field, filterValueGetter, valueFormatter) => {
     if (filterValueGetter)
         return filterValueGetter;
     // aggrid will default to valueGetter
-    if (typeof valueFormatter !== "function" || !field)
+    if (typeof valueFormatter !== 'function' || !field)
         return undefined;
     return (params) => {
         const value = params.getValue(field);
         let formattedValue = valueFormatter({ ...params, value });
         // Search for null values using standard dash
-        if (formattedValue === "–")
-            formattedValue += " -";
+        if (formattedValue === '–')
+            formattedValue += ' -';
         // Search by raw value as well as formatted
-        const gotValue = ["string", "number"].includes(typeof value) ? value : undefined;
-        return (formattedValue + (gotValue != null && formattedValue != gotValue ? " " + gotValue : "")) //
-            .replace(/\s+/g, " ")
+        const gotValue = ['string', 'number'].includes(typeof value) ? value : undefined;
+        return (formattedValue + (gotValue != null && formattedValue != gotValue ? ' ' + gotValue : '')) //
+            .replace(/\s+/g, ' ')
             .trim();
     };
 };
@@ -2997,15 +3008,15 @@ const GridCell = (props, custom) => {
         // Default value formatter, otherwise react freaks out on objects
         valueFormatter: (params) => {
             if (params.value == null)
-                return "–";
-            const types = ["number", "boolean", "string"];
+                return '–';
+            const types = ['number', 'boolean', 'string'];
             if (types.includes(typeof params.value))
                 return `${params.value}`;
             else
                 return JSON.stringify(params.value);
         },
         ...props,
-        cellRenderer: typeof props.cellRenderer === "string" ? props.cellRenderer : GridCellRenderer,
+        cellRenderer: typeof props.cellRenderer === 'string' ? props.cellRenderer : GridCellRenderer,
         cellRendererParams: {
             originalCellRenderer: props.cellRenderer,
             ...props.cellRendererParams,
@@ -3021,16 +3032,16 @@ const GenericCellEditorComponentWrapper = (editor) => {
     return React.forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
         const valueFormatted = cellEditorParams.formatValue
             ? cellEditorParams.formatValue(cellEditorParams.value)
-            : "Missing formatter";
-        return (jsxRuntime.jsxs(GridPopoverContextProvider, { props: cellEditorParams, children: [jsxRuntime.jsx(cellEditorParams.colDef.cellRenderer, { ...cellEditorParams, valueFormatted: valueFormatted, ...cellEditorParams.colDef.cellRendererParams }), obj.editor && jsxRuntime.jsx(obj.editor, { ...cellEditorParams })] }));
+            : 'Missing formatter';
+        return (jsxRuntime.jsx(GridPopoverContextProvider, { props: cellEditorParams, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(cellEditorParams.colDef.cellRenderer, { ...cellEditorParams, valueFormatted: valueFormatted, ...cellEditorParams.colDef.cellRendererParams }), obj.editor && jsxRuntime.jsx(obj.editor, { ...cellEditorParams })] }) }));
     });
 };
 
-const GridCellFillerColId = "gridCellFiller";
+const GridCellFillerColId = 'gridCellFiller';
 const isGridCellFiller = (col) => col.colId === GridCellFillerColId;
 const GridCellFiller = () => ({
     colId: GridCellFillerColId,
-    headerName: "",
+    headerName: '',
     flex: 1,
 });
 
@@ -3048,8 +3059,27 @@ const GridCellMultiEditor = (props, cellEditorSelector) => GridCell({
     ...props,
 });
 
-const GridFilterHeaderIconButton = React.forwardRef(function columnsButton({ icon, title, onClick, buttonProps, disabled = false, size = "md" }, ref) {
-    return (jsxRuntime.jsx(lui.LuiButton, { ...buttonProps, type: "button", level: "tertiary", className: "lui-button-icon-only", ref: ref, "aria-label": title, title: title, onClick: onClick, disabled: disabled, children: jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: "Menu", size: size }) }));
+const useGridFilter = (filter) => {
+    const { addExternalFilter, removeExternalFilter } = React.useContext(GridContext);
+    React.useEffect(() => {
+        const thisFilter = filter;
+        thisFilter && addExternalFilter(thisFilter);
+        return () => {
+            thisFilter && removeExternalFilter(thisFilter);
+        };
+    }, [addExternalFilter, filter, removeExternalFilter]);
+};
+
+const GridFilterButtons = ({ className, luiButtonProps, options, }) => {
+    // Select defaultSelected option, otherwise first option.  If no options select none.
+    const [selectedOption, setSelectedOption] = React.useState(options.find((option) => option.defaultSelected) ?? options[0]);
+    const filter = React.useMemo(() => selectedOption?.filter, [selectedOption]);
+    useGridFilter(filter);
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'flex-col-center'), children: jsxRuntime.jsx(lui.LuiButtonGroup, { children: options.map((option, index) => (jsxRuntime.jsx(lui.LuiButton, { ...luiButtonProps, className: clsx(`lui-button lui-button-secondary`, selectedOption?.label === option.label && `lui-button-active`, luiButtonProps?.className), onClick: () => setSelectedOption(option), children: option.label }, `${index}`))) }) }));
+};
+
+const GridFilterHeaderIconButton = React.forwardRef(function columnsButton({ icon, title, onClick, buttonProps, disabled = false, size = 'md' }, ref) {
+    return (jsxRuntime.jsx(lui.LuiButton, { ...buttonProps, type: 'button', level: 'tertiary', className: 'lui-button-icon-only', ref: ref, buttonProps: { 'aria-label': title }, title: title, onClick: onClick, disabled: disabled, children: jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: 'Menu', size: size }) }));
 });
 
 const GridFilterColumnsToggle = ({ saveState = true }) => {
@@ -3057,9 +3087,9 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
     const { getColumns, getColumnIds, invisibleColumnIds, setInvisibleColumnIds } = React.useContext(GridContext);
     const columnStorageKey = React.useMemo(() => lodashEs.isEmpty(getColumnIds())
         ? null // Grid hasn't been initialised yet
-        : "stepAgGrid_invisibleColumnIds_" + getColumnIds().join("_"), [getColumnIds]);
+        : 'stepAgGrid_invisibleColumnIds_' + getColumnIds().join('_'), [getColumnIds]);
     // infer the invisible ids from colDefs
-    const resetColumns = React.useCallback(() => setInvisibleColumnIds(getColumnIds("initialHide")), [getColumnIds, setInvisibleColumnIds]);
+    const resetColumns = React.useCallback(() => setInvisibleColumnIds(getColumnIds('initialHide')), [getColumnIds, setInvisibleColumnIds]);
     // Load state on start
     React.useEffect(() => {
         if (!columnStorageKey || loaded)
@@ -3071,11 +3101,11 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
                     resetColumns();
                 }
                 else {
-                    const invisibleIds = JSON.parse(stored ?? "[]");
+                    const invisibleIds = JSON.parse(stored ?? '[]');
                     if (!Array.isArray(invisibleIds)) {
                         console.error(`stored invisible ids not an array: ${stored}`);
                     }
-                    else if (!invisibleIds.every((id) => typeof id === "string")) {
+                    else if (!invisibleIds.every((id) => typeof id === 'string')) {
                         console.error(`stored invisible ids not strings: ${stored}`);
                     }
                     else {
@@ -3105,15 +3135,15 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
     }, [invisibleColumnIds, setInvisibleColumnIds]);
     const numericRegExp = /^\d+$/;
     const isNonManageableColumn = (col) => col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
-    return (jsxRuntime.jsxs(Menu, { menuButton: jsxRuntime.jsx(GridFilterHeaderIconButton, { icon: "ic_columns", title: "Column visibility" }), menuClassName: "step-ag-grid-react-menu", portal: true, unmountOnClose: true, children: [jsxRuntime.jsx("div", { className: "GridFilterColumnsToggle-container", children: getColumns("headerName").map((col) => (jsxRuntime.jsx(MenuItem, { disabled: isNonManageableColumn(col), onClick: (e) => {
+    return (jsxRuntime.jsxs(Menu, { menuButton: jsxRuntime.jsx(GridFilterHeaderIconButton, { icon: 'ic_columns', title: 'Column visibility' }), menuClassName: 'step-ag-grid-react-menu', portal: true, unmountOnClose: true, children: [jsxRuntime.jsx("div", { className: 'GridFilterColumnsToggle-container', children: getColumns('headerName').map((col) => (jsxRuntime.jsx(MenuItem, { disabled: isNonManageableColumn(col), onClick: (e) => {
                         // Global react-menu MenuItem handler handles tabs
-                        if (e.key !== "Tab") {
+                        if (e.key !== 'Tab') {
                             e.keepOpen = true;
-                            if (e.key !== "Enter") {
+                            if (e.key !== 'Enter') {
                                 toggleColumn(col.colId);
                             }
                         }
-                    }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: !!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? ""), value: `${col.colId}`, label: col.headerName ?? "", isDisabled: isNonManageableColumn(col), inputProps: {
+                    }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: !!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? ''), value: `${col.colId}`, label: col.headerName ?? '', isDisabled: isNonManageableColumn(col), inputProps: {
                             onClick: (e) => {
                                 // Click is handled by MenuItem onClick so keyboard events work
                                 e.preventDefault();
@@ -3121,47 +3151,15 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
                             },
                         }, onChange: () => {
                             /*Do nothing, change handled by menuItem*/
-                        } }) }, col.colId ?? "no_col_id"))) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_reset_columns`), jsxRuntime.jsxs(MenuItem, { onClick: (e) => {
+                        } }) }, col.colId ?? 'no_col_id'))) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_reset_columns`), jsxRuntime.jsxs(MenuItem, { onClick: (e) => {
                     // Global react-menu MenuItem handler handles tabs
-                    if (e.key !== "Tab") {
-                        e.keepOpen = e.key !== "Enter";
+                    if (e.key !== 'Tab') {
+                        e.keepOpen = e.key !== 'Enter';
                         resetColumns();
                     }
-                }, children: [jsxRuntime.jsx(lui.LuiIcon, { name: "ic_regenerate", alt: "Reset columns", size: "md", className: "MenuItem-icon" }), "Reset columns"] }, "$$reset_columns")] }));
-};
-
-const useGridFilter = (filter) => {
-    const { addExternalFilter, removeExternalFilter } = React.useContext(GridContext);
-    React.useEffect(() => {
-        const thisFilter = filter;
-        thisFilter && addExternalFilter(thisFilter);
-        return () => {
-            thisFilter && removeExternalFilter(thisFilter);
-        };
-    }, [addExternalFilter, filter, removeExternalFilter]);
-};
-
-const GridFilterButtons = ({ className, luiButtonProps, options, }) => {
-    // Select defaultSelected option, otherwise first option.  If no options select none.
-    const [selectedOption, setSelectedOption] = React.useState(options.find((option) => option.defaultSelected) ?? options[0]);
-    const filter = React.useMemo(() => selectedOption?.filter, [selectedOption]);
-    useGridFilter(filter);
-    return (jsxRuntime.jsx("div", { className: clsx(className, "flex-col-center"), children: jsxRuntime.jsx(lui.LuiButtonGroup, { children: options.map((option, index) => (jsxRuntime.jsx(lui.LuiButton, { ...luiButtonProps, className: clsx(`lui-button lui-button-secondary`, selectedOption?.label === option.label && `lui-button-active`, luiButtonProps?.className), onClick: () => setSelectedOption(option), children: option.label }, `${index}`))) }) }));
-};
-
-const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }) => {
-    const { setQuickFilter } = React.useContext(GridContext);
-    const [quickFilterValue, setQuickFilterValue] = React.useState(defaultValue ?? "");
-    React.useEffect(() => {
-        setQuickFilter(quickFilterValue);
-    }, [quickFilterValue, setQuickFilter]);
-    return (jsxRuntime.jsxs("div", { className: "GridFilterQuick-container", children: [jsxRuntime.jsx("div", { className: "GridFilterQuick-icon", children: jsxRuntime.jsx(lui.LuiIcon, { name: "ic_search", alt: "Search", size: "md" }) }), jsxRuntime.jsx("input", { "aria-label": "Search", className: "GridFilterQuick-input", type: "text", placeholder: quickFilterPlaceholder ?? "Search", value: quickFilterValue, onChange: (event) => {
-                    setQuickFilterValue(event.target.value);
-                } })] }));
+                }, children: [jsxRuntime.jsx(lui.LuiIcon, { name: 'ic_regenerate', alt: 'Reset columns', size: 'md', className: 'MenuItem-icon' }), "Reset columns"] }, '$$reset_columns')] }));
 };
 
-const GridFilters = ({ children }) => (jsxRuntime.jsx("div", { className: "Grid-container-filters", children: children }));
-
 /**
  * Cancels timeouts on scope being destroyed.
  *
@@ -3228,12 +3226,25 @@ const GridFilterDownloadCsvButton = (csvExportParams) => {
         }, 100);
     };
     return downloading ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: {
-            role: "status",
-            ["aria-label"]: "Downloading...",
-            style: { width: 42, display: "flex", justifyContent: "center" },
-        } })) : (jsxRuntime.jsx(GridFilterHeaderIconButton, { icon: "ic_csv_file", title: "Download CSV", onClick: handleDownloadClick, disabled: downloading }));
+            role: 'status',
+            ['aria-label']: 'Downloading...',
+            style: { width: 42, display: 'flex', justifyContent: 'center' },
+        } })) : (jsxRuntime.jsx(GridFilterHeaderIconButton, { icon: 'ic_csv_file', title: 'Download CSV', onClick: handleDownloadClick, disabled: downloading }));
+};
+
+const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }) => {
+    const { setQuickFilter } = React.useContext(GridContext);
+    const [quickFilterValue, setQuickFilterValue] = React.useState(defaultValue ?? '');
+    React.useEffect(() => {
+        setQuickFilter(quickFilterValue);
+    }, [quickFilterValue, setQuickFilter]);
+    return (jsxRuntime.jsxs("div", { className: "GridFilterQuick-container", children: [jsxRuntime.jsx("div", { className: "GridFilterQuick-icon", children: jsxRuntime.jsx(lui.LuiIcon, { name: 'ic_search', alt: 'Search', size: 'md' }) }), jsxRuntime.jsx("input", { "aria-label": "Search", className: "GridFilterQuick-input", type: "text", placeholder: quickFilterPlaceholder ?? 'Search', value: quickFilterValue, onChange: (event) => {
+                    setQuickFilterValue(event.target.value);
+                } })] }));
 };
 
+const GridFilters = ({ children }) => (jsxRuntime.jsx("div", { className: "Grid-container-filters", children: children }));
+
 /* global setTimeout, clearTimeout */
 
 var dist = function debounce(fn) {
@@ -3309,16 +3320,17 @@ function defer() {
 var debounce = /*@__PURE__*/getDefaultExportFromCjs(dist);
 
 const GridSubComponentContext = React.createContext({
-    value: "GridSubComponentContext value no context",
+    value: 'GridSubComponentContext value no context',
     data: {},
     setValue: () => {
-        console.error("GridSubComponentContext setValue no context");
+        console.error('GridSubComponentContext setValue no context');
     },
     setValid: () => {
-        console.error("GridSubComponentContext setValid no context");
+        console.error('GridSubComponentContext setValid no context');
     },
+    // eslint-disable-next-line @typescript-eslint/require-await
     triggerSave: async () => {
-        console.error("GridSubComponentContext triggerSave no context");
+        console.error('GridSubComponentContext triggerSave no context');
     },
     context: null,
 });
@@ -3354,7 +3366,7 @@ var css_248z$2 = ".FormError{display:flex}.FormError-helpText{color:#6b6966;font
 styleInject(css_248z$2);
 
 const FormError = (props) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsxs("div", { className: "FormError", children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "FormError-text-icon", size: "sm", status: "error" }), jsxRuntime.jsx("span", { className: "FormError-error", children: props.error })] })), props.helpText && !props.error && jsxRuntime.jsx("span", { className: "FormError-helpText", children: props.helpText })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsxs("div", { className: "FormError", children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "FormError-text-icon", size: "sm", status: "error" }), jsxRuntime.jsx("span", { className: "FormError-error", children: props.error })] })), props.helpText && !props.error && jsxRuntime.jsx("span", { className: 'FormError-helpText', children: props.helpText })] }));
 };
 
 function escapeStringRegexp(string) {
@@ -3494,18 +3506,18 @@ const textMatch = (text, filter) => {
     if (text == null)
         return true;
     const superFilters = filter
-        .split(",")
+        .split(',')
         .map((sf) => sf.trim())
         .filter((sf) => sf)
         .map((r) => r
         .split(/\s+/)
-        .map((f) => (f.startsWith("=") ? f.slice(1) : f + "*"))
-        .join(" "));
-    const [negativeFilters, positiveFilters] = lodashEs.partition(superFilters, (superFilters) => superFilters.startsWith("!"));
-    const values = text.replaceAll(",", " ").trim().split(/\s+/);
+        .map((f) => (f.startsWith('=') ? f.slice(1) : f + '*'))
+        .join(' '));
+    const [negativeFilters, positiveFilters] = lodashEs.partition(superFilters, (superFilters) => superFilters.startsWith('!'));
+    const values = text.replaceAll(',', ' ').trim().split(/\s+/);
     return ((lodashEs.isEmpty(positiveFilters) || // Not filtered
         positiveFilters.some((superFilter) => {
-            const subFilters = superFilter.split(/\s+/).map((s) => s.replaceAll(/([!?])/g, "\\$1"));
+            const subFilters = superFilter.split(/\s+/).map((s) => s.replaceAll(/([!?])/g, '\\$1'));
             return subFilters.every((subFilter) => values.some((value) => isMatch(value, subFilter)));
         })) &&
         (lodashEs.isEmpty(negativeFilters) ||
@@ -3542,19 +3554,19 @@ const useGridPopoverHook = (props) => {
         }
     }, [cancelEdit, props, stopEditing, updateValue]);
     const popoverWrapper = React.useCallback((children) => {
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, { state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: (event) => {
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, { state: isOpen ? 'open' : 'closed', portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: 'step-ag-grid-react-menu', onClose: (event) => {
                     // Prevent menu from closing when modals are invoked
                     if (event.reason === CloseReason.BLUR)
                         return;
-                    triggerSave(event.reason).then();
-                }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, children: [saving && ( // This is the overlay that prevents editing when the editor is saving
-                    jsxRuntime.jsx("div", { className: "ComponentLoadingWrapper-saveOverlay" })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, "data-reason": "", onClick: (e) => {
-                            let reason = e.currentTarget.getAttribute("data-reason") ?? undefined;
+                    void triggerSave(event.reason);
+                }, viewScroll: 'auto', dontShrinkIfDirectionIsTop: true, className: props.className, children: [saving && ( // This is the overlay that prevents editing when the editor is saving
+                    jsxRuntime.jsx("div", { className: 'ComponentLoadingWrapper-saveOverlay' })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, "data-reason": '', onClick: (e) => {
+                            let reason = e.currentTarget.getAttribute('data-reason') ?? undefined;
                             if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
                                 reason = CloseReason.CANCEL;
                             }
-                            triggerSave(reason).then();
-                        }, style: { display: "none" } })] })) }));
+                            void triggerSave(reason);
+                        }, style: { display: 'none' } })] })) }));
     }, [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave]);
     return {
         popoverWrapper,
@@ -3562,19 +3574,19 @@ const useGridPopoverHook = (props) => {
     };
 };
 
-const MenuSeparatorString = "_____MENU_SEPARATOR_____";
+const MenuSeparatorString = '_____MENU_SEPARATOR_____';
 const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
-const MenuHeaderString = "_____MENU_HEADER_____";
+const MenuHeaderString = '_____MENU_HEADER_____';
 const MenuHeaderItem = (title) => {
     return { label: title, value: MenuHeaderString };
 };
 const fieldToString = (field) => {
-    return typeof field == "symbol" ? field.toString() : `${field}`;
+    return typeof field === 'symbol' ? field.toString() : `${field}`;
 };
 const GridFormDropDown = (props) => {
     const { selectedRows, field, data } = useGridPopoverContext();
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-    const [filter, setFilter] = React.useState(props.filterDefaultValue ?? "");
+    const [filter, setFilter] = React.useState(props.filterDefaultValue ?? '');
     const [filteredValues, setFilteredValues] = React.useState();
     const [options, setOptions] = React.useState(null);
     const subComponentIsValid = React.useRef(false);
@@ -3605,12 +3617,12 @@ const GridFormDropDown = (props) => {
         if (options)
             return;
         let optionsConf = props.options;
-        (async () => {
-            if (typeof optionsConf == "function") {
+        void (async () => {
+            if (typeof optionsConf === 'function') {
                 optionsConf = await optionsConf(selectedRows, filter);
             }
             if (optionsConf !== undefined) {
-                const optionsList = optionsConf?.map((item) => item == null || typeof item == "string"
+                const optionsList = optionsConf?.map((item) => item == null || typeof item === 'string'
                     ? {
                         value: item,
                         label: item,
@@ -3623,16 +3635,16 @@ const GridFormDropDown = (props) => {
     }, [filter, options, props, selectedRows]);
     // Local filtering.
     React.useEffect(() => {
-        if (props.filtered == "local") {
+        if (props.filtered == 'local') {
             if (options == null)
                 return;
             setFilteredValues(options
                 .map((option) => {
-                if (option.label != null && typeof option.label !== "string") {
-                    console.error("Cannot filter non-string labels", option);
+                if (option.label != null && typeof option.label !== 'string') {
+                    console.error('Cannot filter non-string labels', option);
                     return undefined;
                 }
-                return textMatch(option.label || "", filter) ? option : undefined;
+                return textMatch(option.label || '', filter) ? option : undefined;
             })
                 .filter((r) => r !== undefined));
         }
@@ -3643,9 +3655,9 @@ const GridFormDropDown = (props) => {
     const previousFilter = React.useRef(filter);
     // Reload filtering.
     React.useEffect(() => {
-        if (previousFilter.current != filter && props.filtered == "reload") {
+        if (previousFilter.current != filter && props.filtered == 'reload') {
             previousFilter.current = filter;
-            reSearchOnFilterChange().then();
+            void reSearchOnFilterChange();
         }
     }, [filter, props, reSearchOnFilterChange]);
     /**
@@ -3683,12 +3695,12 @@ const GridFormDropDown = (props) => {
     });
     let lastHeader = null;
     let showHeader = null;
-    return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", { className: "GridFormDropDown-filter", children: [jsxRuntime.jsx(FocusableItem, { className: "filter-item", onFocus: () => {
+    return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", { className: 'GridFormDropDown-filter', children: [jsxRuntime.jsx(FocusableItem, { className: 'filter-item', onFocus: () => {
                             setSelectedItem(null);
                             setSubSelectedValue(null);
                             subComponentIsValid.current = true;
-                        }, children: ({ ref }) => (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", width: "100%" }, children: [jsxRuntime.jsx("input", { className: "LuiTextInput-input", ref: ref, type: "text", placeholder: props.filterPlaceholder ?? "Filter...", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter &&
-                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value) }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormDropDown-options", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.jsx(MenuItem, { className: "GridPopoverEditDropDown-noOptions", disabled: true, children: props.noOptionsMessage ?? "No Options" }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
+                        }, children: ({ ref }) => (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [jsxRuntime.jsx("input", { className: 'LuiTextInput-input', ref: ref, type: "text", placeholder: props.filterPlaceholder ?? 'Filter...', "data-testid": 'filteredMenu-free-text-input', defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter &&
+                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value) }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.jsx(MenuItem, { className: 'GridPopoverEditDropDown-noOptions', disabled: true, children: props.noOptionsMessage ?? 'No Options' }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
                             showHeader = null;
                             if (item.value === MenuSeparatorString) {
                                 return jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`);
@@ -3703,7 +3715,7 @@ const GridFormDropDown = (props) => {
                                     lastHeader = null;
                                 }
                             }
-                            return ((!filteredValues || filteredValues.includes(item)) && (jsxRuntime.jsxs(React.Fragment, { children: [showHeader, jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(MenuItem, { disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: () => {
+                            return ((!filteredValues || filteredValues.includes(item)) && (jsxRuntime.jsxs(React.Fragment, { children: [showHeader, jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(MenuItem, { disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : '', value: item.value, onFocus: () => {
                                                     if (selectedItem !== item) {
                                                         setSelectedItem(item);
                                                         setSubSelectedValue(null);
@@ -3714,7 +3726,7 @@ const GridFormDropDown = (props) => {
                                                     }
                                                 }, onClick: (e) => {
                                                     e.keepOpen = !!item.subComponent;
-                                                }, children: [item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`), item.subComponent ? "..." : ""] }, `${fieldToString(field)}-${index}`), item.subComponent && selectedItem === item && (jsxRuntime.jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
+                                                }, children: [item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`), item.subComponent ? '...' : ''] }, `${fieldToString(field)}-${index}`), item.subComponent && selectedItem === item && (jsxRuntime.jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
                                                         context: { options },
                                                         data,
                                                         value: subSelectedValue,
@@ -3731,7 +3743,7 @@ const GridFormDropDown = (props) => {
                                                         triggerSave: async () => {
                                                             // empty
                                                         },
-                                                    }, children: item.subComponent && (jsxRuntime.jsx("div", { className: "subComponent", children: jsxRuntime.jsx(item.subComponent, {}) })) })) }, `${item.label}_subcomponent`))] }, `menu-wrapper-${index}`)] }, `${index}`)));
+                                                    }, children: item.subComponent && (jsxRuntime.jsx("div", { className: 'subComponent', children: jsxRuntime.jsx(item.subComponent, {}) })) })) }, `${String(item.label)}_subcomponent`))] }, `menu-wrapper-${index}`)] }, `${index}`)));
                         })] }) })] }));
 };
 
@@ -3739,45 +3751,45 @@ var css_248z$1 = ".LuiTextInput.GridLuiTextInput{margin-bottom:0}.LuiTextInput-f
 styleInject(css_248z$1);
 
 const TextInputFormatted = (props) => {
-    return (jsxRuntime.jsxs("div", { className: clsx("LuiTextInput GridLuiTextInput Grid-popoverContainer", props.error && "hasError", props.className), children: [jsxRuntime.jsxs("span", { className: "LuiTextInput-inputWrapper", children: [jsxRuntime.jsx("input", { type: "text", spellCheck: true, defaultValue: props.value, ...lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), className: "LuiTextInput-input", onMouseEnter: (e) => {
+    return (jsxRuntime.jsxs("div", { className: clsx('LuiTextInput GridLuiTextInput Grid-popoverContainer', props.error && 'hasError', props.className), children: [jsxRuntime.jsxs("span", { className: "LuiTextInput-inputWrapper", children: [jsxRuntime.jsx("input", { type: 'text', spellCheck: true, defaultValue: props.value, ...lodashEs.omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave']), className: 'LuiTextInput-input', onMouseEnter: (e) => {
                             e.currentTarget.focus();
                             props.onMouseEnter && props.onMouseEnter(e);
-                        }, "data-allowtabtosave": props.allowTabToSave }), jsxRuntime.jsx("span", { className: "LuiTextInput-formatted", children: props.formatted })] }), jsxRuntime.jsx(FormError, { error: props.error, helpText: props.helpText })] }));
+                        }, "data-allowtabtosave": props.allowTabToSave }), jsxRuntime.jsx("span", { className: 'LuiTextInput-formatted', children: props.formatted })] }), jsxRuntime.jsx(FormError, { error: props.error, helpText: props.helpText })] }));
 };
 
 const bearingValueFormatter = (value) => {
-    const safeValue = typeof value == "string" ? parseFloat(value) : value;
+    const safeValue = typeof value === 'string' ? parseFloat(value) : value;
     if (safeValue == null) {
-        return "–";
+        return '–';
     }
     return convertDDToDMS(safeValue, false);
 };
 const bearingCorrectionValueFormatter = (value) => {
     const safeValue = value;
     if (safeValue == null) {
-        return "–";
+        return '–';
     }
-    if (typeof safeValue === "string") {
+    if (typeof safeValue === 'string') {
         return convertDDToDMS(bearingNumberParser(safeValue), true, 4);
     }
     return convertDDToDMS(safeValue, true, 4);
 };
 const bearingNumberParser = (value) => {
-    if (value === "")
+    if (value === '')
         return null;
     return parseFloat(value);
 };
 const validMaskForDmsBearing = /^((-)?\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
 const bearingStringValidator = (value, customInvalid) => {
     value = value.trim();
-    if (value === "")
+    if (value === '')
         return null;
     const match = value.match(validMaskForDmsBearing);
     if (!match)
-        return "Bearing must be a number in D.MMSSS format";
+        return 'Bearing must be a number in D.MMSSS format';
     const decimalPart = match[4];
     if (decimalPart != null && decimalPart.length > 5) {
-        return "Bearing has a maximum of 5 decimal places";
+        return 'Bearing has a maximum of 5 decimal places';
     }
     const bearing = parseFloat(value);
     return customInvalid ? customInvalid(bearing) : null;
@@ -3796,9 +3808,9 @@ const bearingStringValidator = (value, customInvalid) => {
  */
 const convertDDToDMS = (dd, showPositiveSymbol = true, trailingZeroDp = 2) => {
     if (dd == null)
-        return "–";
+        return '–';
     // toFixed rounds parts up greater than 60, which has to be corrected below
-    const [bearingWholeString, bearingDecimalString] = dd.toFixed(5).split(".");
+    const [bearingWholeString, bearingDecimalString] = dd.toFixed(5).split('.');
     let bearingWhole = Math.abs(parseInt(bearingWholeString));
     let minNumeric = parseInt(bearingDecimalString?.substring(0, 2));
     let secNumeric = parseInt(bearingDecimalString?.substring(2, 4));
@@ -3814,11 +3826,11 @@ const convertDDToDMS = (dd, showPositiveSymbol = true, trailingZeroDp = 2) => {
     if (bearingWhole >= 360) {
         bearingWhole -= 360;
     }
-    const minString = minNumeric.toString().padStart(2, "0");
-    const secString = secNumeric.toString().padStart(2, "0");
+    const minString = minNumeric.toString().padStart(2, '0');
+    const secString = secNumeric.toString().padStart(2, '0');
     const deciSecString = bearingDecimalString?.substring(4, 5);
-    let dmsString = `${showPositiveSymbol && dd > 0 ? "+" : ""}${dd < 0 ? "-" : ""}${bearingWhole}°`;
-    if (trailingZeroDp === 5 || deciSecString != "0") {
+    let dmsString = `${showPositiveSymbol && dd > 0 ? '+' : ''}${dd < 0 ? '-' : ''}${bearingWhole}°`;
+    if (trailingZeroDp === 5 || deciSecString != '0') {
         dmsString += `\xa0${minString}'\xa0${secString}.${deciSecString}"`; // "\xa0" is here for non-breaking space
     }
     else if (trailingZeroDp === 4 || secNumeric != 0) {
@@ -3831,27 +3843,27 @@ const convertDDToDMS = (dd, showPositiveSymbol = true, trailingZeroDp = 2) => {
 };
 const bearingRangeValidator = (value) => {
     if (value === null)
-        return "Bearing is required";
+        return 'Bearing is required';
     if (value >= 360)
-        return "Bearing must be less than 360 degrees";
+        return 'Bearing must be less than 360 degrees';
     if (value < 0)
-        return "Bearing must not be negative";
+        return 'Bearing must not be negative';
     return null;
 };
 const bearingCorrectionRangeValidator = (value) => {
     if (value === null)
-        return "Bearing correction is required";
+        return 'Bearing correction is required';
     if (value >= 360)
-        return "Bearing correction must be less than 360 degrees";
+        return 'Bearing correction must be less than 360 degrees';
     if (value <= -180)
-        return "Bearing correction must be greater then -180 degrees";
+        return 'Bearing correction must be greater then -180 degrees';
     return null;
 };
 
 const GridFormEditBearing = (props) => {
     const { field, value: initialValue } = useGridPopoverContext();
     // This clears out any scientific precision
-    const defaultValue = React.useMemo(() => (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()), [initialValue]);
+    const defaultValue = React.useMemo(() => (initialValue == null ? '' : parseFloat(parseFloat(initialValue).toFixed(10)).toString()), [initialValue]);
     const [value, setValue] = React.useState(defaultValue);
     const invalid = React.useCallback(() => bearingStringValidator(value, props.range), [props.range, value]);
     const save = React.useCallback(async (selectedRows) => {
@@ -3865,7 +3877,7 @@ const GridFormEditBearing = (props) => {
         }
         else {
             if (field == null) {
-                console.error("field is not defined in ColDef");
+                console.error('field is not defined in ColDef');
             }
             else {
                 selectedRows.forEach((row) => {
@@ -3880,11 +3892,11 @@ const GridFormEditBearing = (props) => {
         invalid,
         save,
     });
-    return popoverWrapper(jsxRuntime.jsx("div", { className: "GridFormEditBearing-input", children: jsxRuntime.jsx(TextInputFormatted, { value: defaultValue, onChange: (e) => {
+    return popoverWrapper(jsxRuntime.jsx("div", { className: 'GridFormEditBearing-input', children: jsxRuntime.jsx(TextInputFormatted, { value: defaultValue, onChange: (e) => {
                 setValue(e.target.value.trim());
             }, autoFocus: true, placeholder: props.placeHolder, formatted: bearingStringValidator(value, props.range) || !props.formatValue
-                ? "?"
-                : props.formatValue(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" }) }));
+                ? '?'
+                : props.formatValue(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: 'Press enter or tab to save' }) }));
 };
 
 const GridFormMessage = (props) => {
@@ -3892,11 +3904,11 @@ const GridFormMessage = (props) => {
     const [message, setMessage] = React.useState(null);
     const { popoverWrapper } = useGridPopoverHook({ className: props.className });
     React.useEffect(() => {
-        (async () => {
+        void (async () => {
             setMessage(await props.message(selectedRows));
-        })().then();
+        })();
     }, [props, selectedRows]);
-    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: message === null, className: clsx("GridFormMessage-container", props.className), children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: message }) }));
+    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: message === null, className: clsx('GridFormMessage-container', props.className), children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: message }) }));
 };
 
 const GridFormMultiSelect = (props) => {
@@ -3904,8 +3916,8 @@ const GridFormMultiSelect = (props) => {
     const subComponentIsValidRef = React.useRef({});
     const optionsInitialising = React.useRef(false);
     const firstInputSubComponent = React.useRef(null);
-    const [filter, setFilter] = React.useState("");
-    const [initialValues, setInitialValues] = React.useState("");
+    const [filter, setFilter] = React.useState('');
+    const [initialValues, setInitialValues] = React.useState('');
     const [options, setOptions] = React.useState();
     const invalid = React.useCallback(() => {
         if (!options)
@@ -3933,8 +3945,8 @@ const GridFormMultiSelect = (props) => {
         if (options || optionsInitialising.current)
             return;
         optionsInitialising.current = true;
-        (async () => {
-            const optionsList = typeof props.options === "function" ? await props.options(selectedRows) : props.options;
+        void (async () => {
+            const optionsList = typeof props.options === 'function' ? await props.options(selectedRows) : props.options;
             setInitialValues(JSON.stringify(optionsList));
             setOptions(optionsList);
             optionsInitialising.current = false;
@@ -3946,7 +3958,7 @@ const GridFormMultiSelect = (props) => {
     const headerGroups = React.useMemo(() => {
         if (!options)
             return undefined;
-        const result = lodashEs.groupBy(options.filter((o) => textMatch(o.label, filter) && o.value != null), "filter");
+        const result = lodashEs.groupBy(options.filter((o) => textMatch(o.label, filter) && o.value != null), 'filter');
         // remove leading/trailing/duplicate dividers
         return lodashEs.fromPairs(lodashEs.toPairs(result).map(([key, arr]) => {
             let lastWasDivider = true;
@@ -3970,14 +3982,14 @@ const GridFormMultiSelect = (props) => {
             ];
         }));
     }, [filter, options]);
-    const headers = React.useMemo(() => props.headers ?? [{ header: "" }], [props.headers]);
+    const headers = React.useMemo(() => props.headers ?? [{ header: '' }], [props.headers]);
     const { popoverWrapper, triggerSave } = useGridPopoverHook({
         className: props.className,
         invalid,
         save,
     });
-    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormMultiSelect-container", children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, { headerGroups, options, setOptions, filter, setFilter, triggerSave, filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder })), headerGroups &&
-                    (lodashEs.isEmpty(headerGroups) || !lodashEs.toPairs(headerGroups).some(([_, options]) => !lodashEs.isEmpty(options))) && (jsxRuntime.jsx(MenuItem, { className: "GridMultiSelect-noOptions", disabled: true, children: props.noOptionsMessage ?? "No Options" }, "noOptions")), headerGroups && !lodashEs.isEmpty(headerGroups) && (jsxRuntime.jsx("div", { className: "GridFormMultiSelect-options", children: headers.map((header, index) => {
+    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormMultiSelect-container', children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, { headerGroups, options, setOptions, filter, setFilter, triggerSave, filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder })), headerGroups &&
+                    (lodashEs.isEmpty(headerGroups) || !lodashEs.toPairs(headerGroups).some(([_, options]) => !lodashEs.isEmpty(options))) && (jsxRuntime.jsx(MenuItem, { className: 'GridMultiSelect-noOptions', disabled: true, children: props.noOptionsMessage ?? 'No Options' }, 'noOptions')), headerGroups && !lodashEs.isEmpty(headerGroups) && (jsxRuntime.jsx("div", { className: 'GridFormMultiSelect-options', children: headers.map((header, index) => {
                         const subOptions = headerGroups[`${header.filter}`];
                         return (!lodashEs.isEmpty(subOptions) && (jsxRuntime.jsxs(React.Fragment, { children: [header.header && jsxRuntime.jsx(MenuHeader, { children: header.header }), subOptions.map((item, index) => item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, `div_${index}`)) : (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions, onChecked: () => {
                                                 // Default to focus on first input in subComponent
@@ -4019,7 +4031,7 @@ const FilterInput = (props) => {
             return;
         const filterTrimmed = filter.trim();
         if (lodashEs.isEmpty(filterTrimmed)) {
-            triggerSave().then();
+            void triggerSave();
             return;
         }
         const preFilterOptions = JSON.stringify(options);
@@ -4028,15 +4040,15 @@ const FilterInput = (props) => {
         if (preFilterOptions === JSON.stringify(options))
             return;
         setOptions([...options]);
-        setFilter("");
+        setFilter('');
     }, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
     const handleKeyDown = React.useCallback((e) => {
-        if (e.key === "Enter") {
+        if (e.key === 'Enter') {
             enterHasBeenPressed.current = true;
         }
     }, []);
     const handleKeyUp = React.useCallback((e) => {
-        if (e.key === "Enter") {
+        if (e.key === 'Enter') {
             e.stopPropagation();
             e.preventDefault();
             if (e.ctrlKey)
@@ -4044,22 +4056,22 @@ const FilterInput = (props) => {
             else if (enterHasBeenPressed.current) {
                 const filterTrimmed = filter.trim();
                 if (lodashEs.isEmpty(filterTrimmed)) {
-                    triggerSave().then();
+                    void triggerSave();
                     return;
                 }
                 onSelectFilter && addCustomFilterValue();
             }
             lastKeyWasEnter.current = true;
         }
-        else if (e.key === "Control") {
-            lastKeyWasEnter.current && setFilter("");
+        else if (e.key === 'Control') {
+            lastKeyWasEnter.current && setFilter('');
             lastKeyWasEnter.current = false;
         }
         else {
             lastKeyWasEnter.current = false;
         }
     }, [addCustomFilterValue, filter, onSelectFilter, setFilter, toggleSelectAllVisible, triggerSave]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, { className: "filter-item", children: (_) => (jsxRuntime.jsxs("div", { style: { width: "100%" }, className: "GridFormMultiSelect-filter", children: [jsxRuntime.jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder ?? "Filter...", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: (e) => setFilter(e.target.value), onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), filterHelpText && (jsxRuntime.jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] })) }, "filter"), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, { className: 'filter-item', children: (_) => (jsxRuntime.jsxs("div", { style: { width: '100%' }, className: 'GridFormMultiSelect-filter', children: [jsxRuntime.jsx("input", { className: 'LuiTextInput-input', type: "text", placeholder: filterPlaceholder ?? 'Filter...', "data-testid": 'filteredMenu-free-text-input', value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: (e) => setFilter(e.target.value), onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), filterHelpText && (jsxRuntime.jsx(FormError, { error: null, helpText: typeof filterHelpText === 'function' ? filterHelpText(filter.trim(), options) : filterHelpText }))] })) }, 'filter'), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] }));
 };
 const MenuRadioItem = (props) => {
     const { item, options, setOptions } = props;
@@ -4069,12 +4081,12 @@ const MenuRadioItem = (props) => {
     }, [options, setOptions]);
     return (jsxRuntime.jsx(MenuItem, { onClick: (e) => {
             // Global react-menu MenuItem handler handles tabs
-            if (e.key !== "Tab" && e.key !== "Enter") {
+            if (e.key !== 'Tab' && e.key !== 'Enter') {
                 e.keepOpen = true;
                 toggleValue(item);
             }
             item.checked && props.onChecked && props.onChecked();
-        }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: item.checked ?? false, value: `${item.value}`, label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.warning && jsxRuntime.jsx(GridIcon, { icon: "ic_warning_outline", title: item.warning }), item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)] }), inputProps: {
+        }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: item.checked ?? false, value: `${item.value}`, label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.warning && jsxRuntime.jsx(GridIcon, { icon: 'ic_warning_outline', title: item.warning }), item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)] }), inputProps: {
                 onClick: (e) => {
                     // Click is handled by MenuItem onClick
                     e.preventDefault();
@@ -4090,8 +4102,8 @@ function MenuSubComponentFr(props, ref) {
     const focusableRef = React.useRef(null);
     React.useEffect(() => {
         if (focusableRef.current) {
-            const firstInputElement = focusableRef.current.querySelectorAll("input")[0] ?? null;
-            if (typeof ref === "function") {
+            const firstInputElement = focusableRef.current.querySelectorAll('input')[0] ?? null;
+            if (typeof ref === 'function') {
                 ref(firstInputElement);
             }
             else if (ref) {
@@ -4099,7 +4111,7 @@ function MenuSubComponentFr(props, ref) {
             }
         }
     }, [ref]);
-    return (jsxRuntime.jsx(FocusableItem, { className: "LuiDeprecatedForms", ref: focusableRef, children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
+    return (jsxRuntime.jsx(FocusableItem, { className: 'LuiDeprecatedForms', ref: focusableRef, children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
                 context: { options },
                 data,
                 value: item.subValue,
@@ -4111,7 +4123,7 @@ function MenuSubComponentFr(props, ref) {
                     subComponentIsValid[`${item.value}`] = valid;
                 },
                 triggerSave,
-            }, children: jsxRuntime.jsx("div", { className: "subComponent", children: item.subComponent && jsxRuntime.jsx(item.subComponent, {}) }) })) }, `${item.value}_subcomponent`));
+            }, children: jsxRuntime.jsx("div", { className: 'subComponent', children: item.subComponent && jsxRuntime.jsx(item.subComponent, {}) }) })) }, `${item.value}_subcomponent`));
 }
 
 const GridFormMultiSelectGrid = (props) => {
@@ -4156,33 +4168,33 @@ const GridFormMultiSelectGrid = (props) => {
         if (options || optionsInitialising.current)
             return;
         optionsInitialising.current = true;
-        (async () => {
-            const optionsList = typeof props.options === "function" ? await props.options(selectedRows) : props.options;
-            setInitialValues(optionsList.map((o) => ({ ...o, label: "" })));
+        void (async () => {
+            const optionsList = typeof props.options === 'function' ? await props.options(selectedRows) : props.options;
+            setInitialValues(optionsList.map((o) => ({ ...o, label: '' })));
             setOptions(optionsList);
             optionsInitialising.current = false;
         })();
     }, [options, props, selectedRows]);
     const toggleValue = React.useCallback((item) => {
         if (options) {
-            item.checked = item.checked === true && item.canSelectPartial ? "partial" : !item.checked;
+            item.checked = item.checked === true && item.canSelectPartial ? 'partial' : !item.checked;
             setOptions([...options]);
         }
     }, [options, setOptions]);
-    return popoverWrapper(jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: "Grid-popoverContainer", children: jsxRuntime.jsx("div", { style: {
-                    display: "grid",
-                    gridAutoFlow: "column",
+    return popoverWrapper(jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: 'Grid-popoverContainer', children: jsxRuntime.jsx("div", { style: {
+                    display: 'grid',
+                    gridAutoFlow: 'column',
                     gridTemplateRows: `repeat(${props.maxRowCount ?? 10}, auto)`,
-                    maxWidth: "calc(min(100vw,500px))",
-                    overflowX: "auto",
+                    maxWidth: 'calc(min(100vw,500px))',
+                    overflowX: 'auto',
                 }, children: options &&
                     options.map((o) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, { onClick: (e) => {
                                 // Global react-menu MenuItem handler handles tabs
-                                if (e.key !== "Tab" && e.key !== "Enter") {
+                                if (e.key !== 'Tab' && e.key !== 'Enter') {
                                     e.keepOpen = true;
                                     toggleValue(o);
                                 }
-                            }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: !!o.checked, isIndeterminate: o.checked === "partial", value: `${o.value}`, label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [o.warning && jsxRuntime.jsx(GridIcon, { icon: "ic_warning_outline", title: o.warning }, "$$icon$$"), jsxRuntime.jsx("span", { className: "GridMultiSelectGrid-Label", children: o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`) }, "$$label$$")] }), inputProps: {
+                            }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: !!o.checked, isIndeterminate: o.checked === 'partial', value: `${o.value}`, label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [o.warning && jsxRuntime.jsx(GridIcon, { icon: 'ic_warning_outline', title: o.warning }, '$$icon$$'), jsxRuntime.jsx("span", { className: 'GridMultiSelectGrid-Label', children: o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`) }, '$$label$$')] }), inputProps: {
                                     onClick: (e) => {
                                         // Click is handled by MenuItem onClick
                                         e.preventDefault();
@@ -4194,7 +4206,7 @@ const GridFormMultiSelectGrid = (props) => {
 };
 
 /** Menu configuration types **/
-const __isMenuSeparator__ = "__isMenuSeparator__";
+const __isMenuSeparator__ = '__isMenuSeparator__';
 const PopoutMenuSeparator = Object.freeze({ label: __isMenuSeparator__ });
 /**
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
@@ -4211,7 +4223,7 @@ const GridFormPopoverMenu = (props) => {
         if (props.defaultAction)
             await props.defaultAction(params);
         else
-            console.error(`No action specified for ${params.menuOption.label} menu options`);
+            console.error(`No action specified for ${String(params.menuOption.label)} menu options`);
     }, [props]);
     // Load up options list if it's async function
     React.useEffect(() => {
@@ -4219,8 +4231,8 @@ const GridFormPopoverMenu = (props) => {
             return;
         optionsInitialising.current = true;
         const optionsConf = props.options ?? [];
-        (async () => {
-            const newOptions = typeof optionsConf == "function" ? await optionsConf(selectedRows) : optionsConf;
+        void (async () => {
+            const newOptions = typeof optionsConf === 'function' ? await optionsConf(selectedRows) : optionsConf;
             setOptions(newOptions);
             if (!props.defaultAction) {
                 const anyOptionsAreMissingAction = newOptions.some((option) => !option.action);
@@ -4250,7 +4262,7 @@ const GridFormPopoverMenu = (props) => {
         else {
             subComponentIsValid.current = true;
             setSubSelectedValue(null);
-            await updateValue(async () => actionClick(item), e.key === "Tab" ? (e.shiftKey ? -1 : 1) : 0);
+            await updateValue(async () => actionClick(item), e.key === 'Tab' ? (e.shiftKey ? -1 : 1) : 0);
         }
     }, [actionClick, subComponentSelected, updateValue]);
     const save = React.useCallback(async () => {
@@ -4268,7 +4280,7 @@ const GridFormPopoverMenu = (props) => {
         invalid: () => subComponentSelected && !subComponentIsValid.current,
         save,
     });
-    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormPopupMenu", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: lodashEs.isEmpty(options) ? (jsxRuntime.jsx(MenuItem, { className: "GridPopoverMenu-noOptions", disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === "__isMenuSeparator__" ? (jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxRuntime.jsxs(React.Fragment, { children: [item.subMenu ? (jsxRuntime.jsx(SubMenu, { disabled: !!item.disabled, label: item.label, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: jsxRuntime.jsx(item.subMenu, {}) }, `${item.label}`)) : (jsxRuntime.jsx(MenuItem, { onClick: (e) => onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: item.label }, `${item.label}`)), item.subComponent && subComponentSelected === item && (jsxRuntime.jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
+    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormPopupMenu', children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: lodashEs.isEmpty(options) ? (jsxRuntime.jsx(MenuItem, { className: 'GridPopoverMenu-noOptions', disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === '__isMenuSeparator__' ? (jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxRuntime.jsxs(React.Fragment, { children: [item.subMenu ? (jsxRuntime.jsx(SubMenu, { disabled: !!item.disabled, label: item.label, title: item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : '', children: jsxRuntime.jsx(item.subMenu, {}) }, `${String(item.label)}`)) : (jsxRuntime.jsx(MenuItem, { onClick: (e) => void onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== 'boolean' ? item.disabled : '', children: item.label }, `${String(item.label)}`)), item.subComponent && subComponentSelected === item && (jsxRuntime.jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
                                 context: {},
                                 data,
                                 value: subSelectedValue,
@@ -4279,13 +4291,13 @@ const GridFormPopoverMenu = (props) => {
                                     subComponentIsValid.current = valid;
                                 },
                                 triggerSave,
-                            }, children: jsxRuntime.jsx("div", { className: "subComponent", children: item.subComponent && jsxRuntime.jsx(item.subComponent, {}) }) })) }, `${item.label}_subcomponent`))] }, `${item.label}`))))) }) }));
+                            }, children: jsxRuntime.jsx("div", { className: 'subComponent', children: item.subComponent && jsxRuntime.jsx(item.subComponent, {}) }) })) }, `${String(item.label)}_subcomponent`))] }, `${String(item.label)}`))))) }) }));
 };
 
 const TextAreaInput = (props) => {
     const reactId = React.useId();
     const id = props?.id ?? reactId;
-    return (jsxRuntime.jsxs("div", { className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className), children: [jsxRuntime.jsxs("label", { htmlFor: id, children: [props.mandatory != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-mandatory", children: "*" }), props.label != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-label", children: props.label }), jsxRuntime.jsx("div", { className: "LuiTextAreaInput-wrapper", children: jsxRuntime.jsx("textarea", { rows: 5, ...lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), id: id, value: props.value ?? "", spellCheck: true, onMouseEnter: (e) => {
+    return (jsxRuntime.jsxs("div", { className: clsx('LuiTextAreaInput Grid-popoverContainer', props.disabled ? 'isDisabled' : '', props.error ? 'hasError' : '', props.className), children: [jsxRuntime.jsxs("label", { htmlFor: id, children: [props.mandatory != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-mandatory", children: "*" }), props.label != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-label", children: props.label }), jsxRuntime.jsx("div", { className: "LuiTextAreaInput-wrapper", children: jsxRuntime.jsx("textarea", { rows: 5, ...lodashEs.omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave']), id: id, value: props.value ?? '', spellCheck: true, onMouseEnter: (e) => {
                                 if (document.activeElement != e.currentTarget) {
                                     e.currentTarget.focus();
                                     e.currentTarget.selectionStart = e.currentTarget.value.length;
@@ -4298,11 +4310,11 @@ const TextInputValidator = (props, value, data, context) => {
     if (value == null)
         return null;
     // This can happen because subcomponent is invoked without type safety
-    if (typeof value !== "string") {
-        return "Value is not a string";
+    if (typeof value !== 'string') {
+        return 'Value is not a string';
     }
-    if (props.required && value.trim() == "") {
-        return "Must not be empty";
+    if (props.required && value.trim() == '') {
+        return 'Must not be empty';
     }
     if (props.maxLength && value.length > props.maxLength) {
         return `Must be no longer than ${props.maxLength} characters`;
@@ -4312,10 +4324,10 @@ const TextInputValidator = (props, value, data, context) => {
     }
     const nf = props.numberFormat;
     if (nf) {
-        if (value != "" && !isFloat(value)) {
+        if (value != '' && !isFloat(value)) {
             return `Must be a valid number`;
         }
-        if (value != "") {
+        if (value != '') {
             const number = parseFloat(value);
             if (nf.notZero && number === 0) {
                 return `Must not be 0`;
@@ -4332,12 +4344,12 @@ const TextInputValidator = (props, value, data, context) => {
             if (nf.leMax != null && number > nf.leMax) {
                 return `Must not be greater than ${nf.leMax.toLocaleString()}`;
             }
-            if (nf.precision != null && value != "") {
+            if (nf.precision != null && value != '') {
                 if (parseFloat(number.toPrecision(nf.precision)) != number) {
                     return `Must have no more than ${nf.precision} digits precision`;
                 }
             }
-            if (nf.scale != null && value != "") {
+            if (nf.scale != null && value != '') {
                 if (parseFloat(number.toFixed(nf.scale)) != number) {
                     return nf.scale == 0 ? `Must be a whole number` : `Must have no more than ${nf.scale} decimal places`;
                 }
@@ -4352,7 +4364,7 @@ const TextInputValidator = (props, value, data, context) => {
 
 const GridFormSubComponentTextArea = (props) => {
     const { value, data, setValue, setValid, context } = React.useContext(GridSubComponentContext);
-    const helpText = props.helpText ?? "Press tab to save";
+    const helpText = props.helpText ?? 'Press tab to save';
     // If is not initialised yet as it's just been created then set the default value
     React.useEffect(() => {
         if (value == null)
@@ -4362,12 +4374,12 @@ const GridFormSubComponentTextArea = (props) => {
     React.useEffect(() => {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsxRuntime.jsx("div", { className: clsx("FreeTextInput", props.className), children: jsxRuntime.jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: (e) => setValue(e.target.value), error: invalid(), helpText: helpText, placeholder: props.placeholder, allowTabToSave: true }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('FreeTextInput', props.className), children: jsxRuntime.jsx(TextAreaInput, { className: 'free-text-input', value: value, onChange: (e) => setValue(e.target.value), error: invalid(), helpText: helpText, placeholder: props.placeholder, allowTabToSave: true }) }));
 };
 
 const GridFormSubComponentTextInput = (props) => {
     const { value, setValue, setValid, data, context } = React.useContext(GridSubComponentContext);
-    const helpText = props.helpText ?? "Press enter or tab to save";
+    const helpText = props.helpText ?? 'Press enter or tab to save';
     // If is not initialised yet as it's just been created then set the default value
     React.useEffect(() => {
         if (value == null)
@@ -4377,14 +4389,14 @@ const GridFormSubComponentTextInput = (props) => {
     React.useEffect(() => {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsxRuntime.jsx(TextInputFormatted, { value: value, error: invalid(), onChange: (e) => setValue(e.target.value), helpText: helpText, placeholder: props.placeholder, style: { width: "100%" }, allowTabToSave: true }));
+    return (jsxRuntime.jsx(TextInputFormatted, { value: value, error: invalid(), onChange: (e) => setValue(e.target.value), helpText: helpText, placeholder: props.placeholder, style: { width: '100%' }, allowTabToSave: true }));
 };
 
 const GridFormTextArea = (props) => {
     const { field, value: initialVale, data } = useGridPopoverContext();
-    const initValue = React.useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);
+    const initValue = React.useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
     const [value, setValue] = React.useState(initValue);
-    const helpText = props.helpText ?? "Press tab to save";
+    const helpText = props.helpText ?? 'Press tab to save';
     const invalid = React.useCallback(() => TextInputValidator(props, value, data, {}), [props, value, data]);
     const save = React.useCallback(async (selectedRows) => {
         if (invalid())
@@ -4404,13 +4416,13 @@ const GridFormTextArea = (props) => {
         invalid,
         save,
     });
-    return popoverWrapper(jsxRuntime.jsx("div", { className: "subComponent", style: { display: "flex", flexDirection: "row", width: props.width ?? 240 }, children: jsxRuntime.jsx(TextAreaInput, { value: value, onChange: (e) => setValue(e.target.value), error: invalid(), placeholder: props.placeholder ?? "Type here", helpText: helpText }) }));
+    return popoverWrapper(jsxRuntime.jsx("div", { className: 'subComponent', style: { display: 'flex', flexDirection: 'row', width: props.width ?? 240 }, children: jsxRuntime.jsx(TextAreaInput, { value: value, onChange: (e) => setValue(e.target.value), error: invalid(), placeholder: props.placeholder ?? 'Type here', helpText: helpText }) }));
 };
 
 const GridFormTextInput = (props) => {
     const { field, value: initialVale, data } = useGridPopoverContext();
-    const helpText = props.helpText ?? "Press enter or tab to save";
-    const initValue = React.useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);
+    const helpText = props.helpText ?? 'Press enter or tab to save';
+    const initValue = React.useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
     const [value, setValue] = React.useState(initValue);
     const invalid = React.useCallback(() => TextInputValidator(props, value, data, {}), [data, props, value]);
     const save = React.useCallback(async (selectedRows) => {
@@ -4431,7 +4443,7 @@ const GridFormTextInput = (props) => {
         invalid,
         save,
     });
-    return popoverWrapper(jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "row" }, className: "FormTest subComponent", children: jsxRuntime.jsx(TextInputFormatted, { value: value, onChange: (e) => setValue(e.target.value), error: invalid(), formatted: props.units, style: { width: props.width ?? 240 }, placeholder: props.placeholder ?? "Type here", helpText: helpText }) }));
+    return popoverWrapper(jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'row' }, className: 'FormTest subComponent', children: jsxRuntime.jsx(TextInputFormatted, { value: value, onChange: (e) => setValue(e.target.value), error: invalid(), formatted: props.units, style: { width: props.width ?? 240 }, placeholder: props.placeholder ?? 'Type here', helpText: helpText }) }));
 };
 
 const ButtonCellRenderer = (props) => {
@@ -4443,24 +4455,24 @@ const ButtonCellRenderer = (props) => {
                 inputRef.current?.focus();
             }
         };
-        api.addEventListener("cellFocused", checkFocus);
+        api.addEventListener('cellFocused', checkFocus);
         return () => {
-            api.removeEventListener("cellFocused", checkFocus);
+            api.removeEventListener('cellFocused', checkFocus);
         };
     }, [api, column, node.rowIndex]);
     return (jsxRuntime.jsx(lui.LuiButton, { ref: inputRef, className: "lui-button-icon-only", size: "sm", level: "text", onClick: () => {
             const selectedRows = [data];
             const selectedRowIds = selectedRows.map((r) => r.id);
             colDef?.cellEditorParams.onClick?.({ selectedRows, selectedRowIds });
-        }, style: { display: colDef?.cellEditorParams?.visible?.(props) !== false ? "" : "none" }, children: jsxRuntime.jsx(lui.LuiIcon, { name: "ic_redo", alt: "revert", size: "md" }) }));
+        }, style: { display: colDef?.cellEditorParams?.visible?.(props) !== false ? '' : 'none' }, children: jsxRuntime.jsx(lui.LuiIcon, { name: "ic_redo", alt: "revert", size: "md" }) }));
 };
 const GridButton = (colDef, editor) => {
     return GridCell({
         minWidth: 72,
         maxWidth: 72,
         resizable: false,
-        headerClass: "GridHeaderAlignCenter",
-        cellClass: "GridCellAlignCenter",
+        headerClass: 'GridHeaderAlignCenter',
+        cellClass: 'GridCellAlignCenter',
         cellRenderer: ButtonCellRenderer,
         cellEditorParams: {
             ...editor,
@@ -4478,15 +4490,15 @@ const BooleanCellRenderer = (props) => {
                 inputRef.current?.focus();
             }
         };
-        api.addEventListener("cellFocused", checkFocus);
+        api.addEventListener('cellFocused', checkFocus);
         return () => {
-            api.removeEventListener("cellFocused", checkFocus);
+            api.removeEventListener('cellFocused', checkFocus);
         };
     }, [api, column, node.rowIndex]);
     const isDisabled = !fnOrVar(colDef?.editable, props);
-    return (jsxRuntime.jsx("div", { className: clsx("ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper", {
-            "ag-checked": props.value,
-            "ag-disabled": isDisabled,
+    return (jsxRuntime.jsx("div", { className: clsx('ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', {
+            'ag-checked': props.value,
+            'ag-disabled': isDisabled,
         }), children: jsxRuntime.jsx("input", { type: "checkbox", className: "ag-input-field-input ag-checkbox-input", disabled: isDisabled, ref: inputRef, checked: value, onChange: () => { }, onClick: (e) => {
                 e.stopPropagation();
                 // cell has to be in edit mode
@@ -4506,7 +4518,7 @@ const BooleanCellRenderer = (props) => {
                 });
                 const checked = !value;
                 onValueChange(checked);
-                params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked }).then();
+                void params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked });
             } }) }));
 };
 const GridEditBoolean = (colDef, editorProps) => {
@@ -4520,8 +4532,8 @@ const GridEditBoolean = (colDef, editorProps) => {
         singleClickEdit: true,
         resizable: false,
         editable: true,
-        cellClass: "GridCellAlignCenter",
-        headerClass: "GridHeaderAlignCenter",
+        cellClass: 'GridCellAlignCenter',
+        headerClass: 'GridHeaderAlignCenter',
         ...colDef,
     });
 };
@@ -4531,7 +4543,7 @@ const GridPopoutEditMultiSelect = (colDef, props) => GridCell(colDef, {
     ...props,
     editorParams: {
         ...props.editorParams,
-        className: clsx("GridMultiSelect-containerMedium", props.editorParams?.className),
+        className: clsx('GridMultiSelect-containerMedium', props.editorParams?.className),
     },
 });
 
@@ -4540,47 +4552,19 @@ const GridPopoutEditMultiSelectGrid = (colDef, props) => GridCell(colDef, {
     ...props,
     editorParams: {
         ...props.editorParams,
-        className: clsx("GridMultiSelect-containerMedium", props.editorParams?.className),
-    },
-});
-
-const GridRenderPopoutMenuCell = (props) => {
-    const disabled = !fnOrVar(props.colDef?.editable, props);
-    return (jsxRuntime.jsx(lui.LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md", className: clsx("GridPopoutMenu-burger", disabled && "GridPopoutMenu-burgerDisabled") }));
-};
-
-/**
- * Popout burger menu
- */
-const GridPopoverMenu = (colDef, custom) => GridCell({
-    minWidth: 48,
-    maxWidth: 48,
-    width: 40,
-    sortable: false,
-    editable: colDef.editable != null ? colDef.editable : true,
-    exportable: false,
-    cellStyle: { flex: 1, justifyContent: "center" },
-    cellRenderer: GridRenderPopoutMenuCell,
-    ...colDef,
-    cellRendererParams: {
-        // Menus open on single click, this parameter is picked up in Grid.tsx
-        singleClickEdit: true,
+        className: clsx('GridMultiSelect-containerMedium', props.editorParams?.className),
     },
-}, {
-    editor: GridFormPopoverMenu,
-    preventAutoEdit: true,
-    ...custom,
 });
 
 const GridPopoverEditBearingLike = (colDef, props) => GridCell({
-    valueFormatter: (params) => props.editorParams?.formatValue(params.value) ?? "",
+    valueFormatter: (params) => props.editorParams?.formatValue(params.value) ?? '',
     ...colDef,
 }, {
     editor: GridFormEditBearing,
     ...props,
 });
 const GridPopoverEditBearingEditorParams = {
-    placeHolder: "Enter bearing",
+    placeHolder: 'Enter bearing',
     formatValue: bearingValueFormatter,
     range: bearingRangeValidator,
 };
@@ -4592,7 +4576,7 @@ const GridPopoverEditBearing = (colDef, props) => GridPopoverEditBearingLike(col
     },
 });
 const GridPopoverEditBearingCorrectionEditorParams = {
-    placeHolder: "Enter bearing correction",
+    placeHolder: 'Enter bearing correction',
     formatValue: bearingCorrectionValueFormatter,
     range: bearingCorrectionRangeValidator,
 };
@@ -4610,11 +4594,39 @@ const GridPopoverEditDropDown = (colDef, props) => GridCell(colDef, {
     editorParams: {
         ...props.editorParams,
         className: clsx({
-            "GridPopoverEditDropDown-containerLarge": !props.editorParams?.className?.includes("GridPopoverEditDropDown-container"),
+            'GridPopoverEditDropDown-containerLarge': !props.editorParams?.className?.includes('GridPopoverEditDropDown-container'),
         }, props.editorParams?.className),
     },
 });
 
+const GridRenderPopoutMenuCell = (props) => {
+    const disabled = !fnOrVar(props.colDef?.editable, props);
+    return (jsxRuntime.jsx(lui.LuiIcon, { name: 'ic_more_vert', alt: 'More actions', size: 'md', className: clsx('GridPopoutMenu-burger', disabled && 'GridPopoutMenu-burgerDisabled') }));
+};
+
+/**
+ * Popout burger menu
+ */
+const GridPopoverMenu = (colDef, custom) => GridCell({
+    minWidth: 48,
+    maxWidth: 48,
+    width: 40,
+    sortable: false,
+    editable: colDef.editable != null ? colDef.editable : true,
+    exportable: false,
+    cellStyle: { flex: 1, justifyContent: 'center' },
+    cellRenderer: GridRenderPopoutMenuCell,
+    ...colDef,
+    cellRendererParams: {
+        // Menus open on single click, this parameter is picked up in Grid.tsx
+        singleClickEdit: true,
+    },
+}, {
+    editor: GridFormPopoverMenu,
+    preventAutoEdit: true,
+    ...custom,
+});
+
 const GridPopoverMessage = (colDef, props) => GridCell({
     resizable: true,
     ...colDef,
@@ -4634,9 +4646,9 @@ const GridPopoverTextInput = (colDef, params) => GridCell(colDef, {
     ...params,
 });
 
-const GridWrapper = ({ children, maxHeight }) => (jsxRuntime.jsx("div", { className: "Grid-wrapper", style: { maxHeight }, children: children }));
+const GridWrapper = ({ children, maxHeight }) => (jsxRuntime.jsx("div", { className: 'Grid-wrapper', style: { maxHeight }, children: children }));
 
-const getColId = (colDef) => colDef.colId ?? "";
+const getColId = (colDef) => colDef.colId ?? '';
 const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
 
 /**
@@ -4648,7 +4660,7 @@ const GridContextProvider = (props) => {
     const { modifyUpdating, checkUpdating } = React.useContext(GridUpdatingContext);
     const [gridApi, setGridApi] = React.useState();
     const [gridReady, setGridReady] = React.useState(false);
-    const [quickFilter, _setQuickFilter] = React.useState("");
+    const [quickFilter, _setQuickFilter] = React.useState('');
     const [invisibleColumnIds, _setInvisibleColumnIds] = React.useState();
     const testId = React.useRef();
     const idsBeforeUpdate = React.useRef([]);
@@ -4668,7 +4680,7 @@ const GridContextProvider = (props) => {
      * Set quick filter directly on grid, based on previously save quickFilter state.
      */
     React.useEffect(() => {
-        gridApi?.setGridOption("quickFilterText", quickFilter);
+        gridApi?.setGridOption('quickFilterText', quickFilter);
     }, [gridApi, quickFilter]);
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
@@ -4701,9 +4713,9 @@ const GridContextProvider = (props) => {
         let id = 0;
         try {
             gridApi?.forEachNodeAfterFilterAndSort((rowNode) => {
-                id = parseInt(rowNode.id ?? "0");
+                id = parseInt(rowNode.id ?? '0');
                 // this is the only way to get out of the loop
-                throw "expected exception - exit_loop";
+                throw 'expected exception - exit_loop';
             });
         }
         catch (ex) {
@@ -4717,7 +4729,7 @@ const GridContextProvider = (props) => {
     const setApis = React.useCallback((gridApi, dataTestId) => {
         testId.current = dataTestId;
         setGridApi(gridApi);
-        gridApi?.setGridOption("quickFilterText", quickFilter);
+        gridApi?.setGridOption('quickFilterText', quickFilter);
         setGridReady(!!gridApi);
     }, [quickFilter]);
     /**
@@ -4727,9 +4739,9 @@ const GridContextProvider = (props) => {
         if (!gridApi)
             return null;
         if (!gridApi.getDisplayedRowCount())
-            return "empty";
+            return 'empty';
         if (!lodashEs.isEmpty(gridApi.getRenderedNodes()))
-            return "rows-visible";
+            return 'rows-visible';
         // If there are rows to render, but there are no rendered nodes then we should wait
         return null;
     }, [gridApi]);
@@ -4785,7 +4797,7 @@ const GridContextProvider = (props) => {
      * Uses beforeUpdate ids to find new nodes.
      */
     const _getNewNodes = React.useCallback(() => {
-        return gridApiOp((gridApi) => lodashEs.compact(lodashEs.difference(_getAllRowIds(), idsBeforeUpdate.current).map((rowId) => gridApi.getRowNode("" + rowId))), () => []);
+        return gridApiOp((gridApi) => lodashEs.compact(lodashEs.difference(_getAllRowIds(), idsBeforeUpdate.current).map((rowId) => gridApi.getRowNode('' + rowId))), () => []);
     }, [_getAllRowIds, gridApiOp]);
     /**
      * Get grid nodes via rowIds.  If rowIds has no matching node the result may be smaller than expected.
@@ -4794,7 +4806,7 @@ const GridContextProvider = (props) => {
      * @param rowIds Row ids to get from grid.
      */
     const _rowIdsToNodes = React.useCallback((rowIds) => {
-        return gridApiOp((gridApi) => lodashEs.compact(rowIds.map((rowId) => gridApi.getRowNode("" + rowId))), () => []);
+        return gridApiOp((gridApi) => lodashEs.compact(rowIds.map((rowId) => gridApi.getRowNode('' + rowId))), () => []);
     }, [gridApiOp]);
     /**
      * Get ColDefs, with flattened ColGroupDefs
@@ -4935,7 +4947,7 @@ const GridContextProvider = (props) => {
             gridApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
         }
         return {
-            width: lodashEs.sumBy(gridApi.getColumnState().filter((col) => !col.hide), "width"),
+            width: lodashEs.sumBy(gridApi.getColumnState().filter((col) => !col.hide), 'width'),
         };
     }, [gridApi]);
     /**
@@ -4952,7 +4964,9 @@ const GridContextProvider = (props) => {
         }
         gridApi.stopEditing();
     }, [gridApi]);
-    const startCellEditing = React.useCallback(async ({ rowId, colId }) => {
+    const startCellEditing = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/require-await
+    ({ rowId, colId }) => {
         if (!gridApi)
             return;
         const colDef = gridApi.getColumnDef(colId);
@@ -4967,7 +4981,7 @@ const GridContextProvider = (props) => {
             rowNode.setSelected(true, true);
         }
         // Cell already being edited, so don't re-edit until finished
-        if (checkUpdating([colDef.field ?? ""], rowId)) {
+        if (checkUpdating([colDef.field ?? ''], rowId)) {
             return;
         }
         const rowIndex = rowNode.rowIndex;
@@ -5038,11 +5052,11 @@ const GridContextProvider = (props) => {
         return await gridApiOp(async (gridApi) => {
             const selectedRows = props.selectedRows;
             let ok = false;
-            await modifyUpdating(props.field ?? "", selectedRows.map((data) => data.id), async () => {
+            await modifyUpdating(props.field ?? '', selectedRows.map((data) => data.id), async () => {
                 // Need to refresh to get spinners to work on all rows
                 gridApi.refreshCells({ rowNodes: props.selectedRows, force: true });
                 ok = await fnUpdate(selectedRows).catch((ex) => {
-                    console.error("Exception during modifyUpdating", ex);
+                    console.error('Exception during modifyUpdating', ex);
                     return false;
                 });
             });
@@ -5079,7 +5093,7 @@ const GridContextProvider = (props) => {
         }
         catch (ex) {
             // Hide errors in jest, but log them in browser
-            if (typeof jest === "undefined")
+            if (typeof jest === 'undefined')
                 console.error(ex);
         }
     }, 50), [gridApi]);
@@ -5101,7 +5115,7 @@ const GridContextProvider = (props) => {
             gridApi?.forEachNodeAfterFilter((rowNode) => {
                 arr.push(rowNode.id);
             });
-            return arr.join("|");
+            return arr.join('|');
         };
         if (gridApi) {
             const hasFocusedCell = gridApi.getFocusedCell();
@@ -5115,11 +5129,11 @@ const GridContextProvider = (props) => {
     }, 200), [gridApi]);
     const addExternalFilter = (filter) => {
         externalFilters.current.push(filter);
-        onFilterChanged().then();
+        void onFilterChanged();
     };
     const removeExternalFilter = (filter) => {
         lodashEs.remove(externalFilters.current, (v) => v === filter);
-        onFilterChanged().then();
+        void onFilterChanged();
     };
     const isExternalFilterPresent = () => !lodashEs.isEmpty(externalFilters.current);
     const doesExternalFilterPass = (node) => externalFilters.current.every((filter) => filter(node.data, node));
@@ -5223,10 +5237,10 @@ const GridContextProvider = (props) => {
 const downloadCsvUseValueFormattersProcessCellCallback = (params) => {
     const encodeToString = (value) => {
         // Convert nullish values to blank
-        if (value === "-" || value === "–" || value == null) {
-            return "";
+        if (value === '-' || value === '–' || value == null) {
+            return '';
         }
-        if (typeof value === "string") {
+        if (typeof value === 'string') {
             return value;
         }
         return JSON.stringify(value);
@@ -5240,19 +5254,19 @@ const downloadCsvUseValueFormattersProcessCellCallback = (params) => {
     const valueFormatter = colDef.valueFormatter;
     // If no valueFormatter then value _must_ be a string
     if (valueFormatter == null) {
-        if (params.value != null && typeof params.value !== "string") {
+        if (params.value != null && typeof params.value !== 'string') {
             console.error(`downloadCsv: valueFormatter missing and getValue is not a string, colId: ${colDef.colId}`);
         }
         return encodeToString(params.value);
     }
     // We don't have access to registered functions, so we can't call them
-    if (typeof valueFormatter !== "function") {
+    if (typeof valueFormatter !== 'function') {
         console.error(`downloadCsv: String type (registered) value formatters are unsupported in downloadCsv, colId: ${colDef.colId}`);
         return encodeToString(params.value);
     }
     const result = valueFormatter({ ...params, data: params.node?.data, colDef, node: null });
     // type may not be string due to casting, leave the type check in
-    if (params.value != null && typeof result !== "string") {
+    if (params.value != null && typeof result !== 'string') {
         console.error(`downloadCsv: valueFormatter is returning non string values, colDef:", colId: ${colDef.colId}`);
     }
     // We add an extra encodeToString here just in case valueFormatter is returning non string values
@@ -5311,7 +5325,7 @@ const usePrevious = (value) => {
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
 const minimumInProgressTimeMs = 950;
-const ActionButton = ({ icon, name, inProgressName, disabled, dataTestId, style, className, title, onClick, size = "sm", iconPosition = "left", level = "tertiary", "aria-label": ariaLabel, }) => {
+const ActionButton = ({ icon, name, inProgressName, disabled, dataTestId, style, className, title, onClick, size = 'sm', iconPosition = 'left', level = 'tertiary', 'aria-label': ariaLabel, }) => {
     const [inProgress, setInProgress] = React.useState(false);
     const lastInProgress = usePrevious(inProgress ?? false);
     const [localInProgress, setLocalInProgress, setLocalInProgressDeferred] = useStateDeferred(inProgress);
@@ -5320,28 +5334,28 @@ const ActionButton = ({ icon, name, inProgressName, disabled, dataTestId, style,
             return;
         inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
     }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
-    const buttonText = (jsxRuntime.jsxs("span", { className: "ActionButton-minimalArea", children: [jsxRuntime.jsx("span", { className: "ActionButton-minimalAreaDisplay", children: (localInProgress ? inProgressName : name) ?? name }), jsxRuntime.jsx("span", { className: "ActionButton-minimalAreaExpand", children: name })] }));
-    return (jsxRuntime.jsxs(lui.LuiButton, { "data-testid": dataTestId, type: "button", level: level, title: title ?? ariaLabel ?? name, "aria-label": ariaLabel ?? name, className: clsx("lui-button-icon-right", "ActionButton", className, localInProgress && "ActionButton-inProgress", name != null && !className?.includes("ActionButton-fill") && "ActionButton-minimal", name == null && "ActionButton-iconOnly"), size: "lg", style: style, onClick: async () => {
+    const buttonText = (jsxRuntime.jsxs("span", { className: 'ActionButton-minimalArea', children: [jsxRuntime.jsx("span", { className: 'ActionButton-minimalAreaDisplay', children: (localInProgress ? inProgressName : name) ?? name }), jsxRuntime.jsx("span", { className: 'ActionButton-minimalAreaExpand', children: name })] }));
+    return (jsxRuntime.jsxs(lui.LuiButton, { "data-testid": dataTestId, type: 'button', level: level, title: title ?? ariaLabel ?? name, buttonProps: { 'aria-label': ariaLabel ?? name }, className: clsx('lui-button-icon-right', 'ActionButton', className, localInProgress && 'ActionButton-inProgress', name != null && !className?.includes('ActionButton-fill') && 'ActionButton-minimal', name == null && 'ActionButton-iconOnly'), size: 'lg', style: style, onClick: () => {
             const promise = onClick();
-            const isPromise = typeof promise !== "undefined";
+            const isPromise = typeof promise !== 'undefined';
             if (isPromise) {
                 setInProgress(true);
-                if (isPromise)
-                    await promise;
-                setInProgress(false);
+                void promise.finally(() => {
+                    setInProgress(false);
+                });
             }
-        }, disabled: localInProgress || disabled, children: [iconPosition === "right" && buttonText, localInProgress && (jsxRuntime.jsx("div", { style: { position: "relative" }, children: jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 14, divProps: {
-                        "data-testid": "loading-spinner",
+        }, disabled: localInProgress || disabled, children: [iconPosition === 'right' && buttonText, localInProgress && (jsxRuntime.jsx("div", { style: { position: 'relative' }, children: jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 14, divProps: {
+                        'data-testid': 'loading-spinner',
                         style: {
-                            position: "absolute",
+                            position: 'absolute',
                             left: 4,
                             top: -10,
                             bottom: 10,
                             right: -4,
                         },
-                        role: "status",
-                        "aria-label": "Loading",
-                    } }) })), jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: ariaLabel ?? name ?? "", size: size }), iconPosition === "left" && buttonText] }));
+                        role: 'status',
+                        'aria-label': 'Loading',
+                    } }) })), jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: ariaLabel ?? name ?? '', size: size }), iconPosition === 'left' && buttonText] }));
 };
 
 const useDeferredPromise = () => {