@linzjs/step-ag-grid 15.0.2 → 15.1.0

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

@@ -59,6 +59,9 @@ const GridContext = React.createContext({
     prePopupOps: () => {
         console.error("no context provider for prePopupOps");
     },
+    postPopupOps: () => {
+        console.error("no context provider for prePopupOps");
+    },
     externallySelectedItemsAreInSync: false,
     setApis: () => {
         console.error("no context provider for setApis");
@@ -475,1007 +478,378 @@ const GridHeaderSelect = ({ api }) => {
             } }) }));
 };
 
-/**
- * Wrapper for AgGrid to add commonly used functionality.
- */
-const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-alpine", sizeColumns = "auto", selectColumnPinned = null, ...params }) => {
-    const { gridReady, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = React.useContext(GridContext);
-    const { checkUpdating, updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
-    const { prePopupOps } = React.useContext(GridContext);
-    const gridDivRef = React.useRef(null);
-    const lastSelectedIds = React.useRef([]);
-    const [staleGrid, setStaleGrid] = React.useState(false);
-    const postSortRows = usePostSortRowsHook({ setStaleGrid });
-    /**
-     * onContentSize should only be called at maximum twice.
-     * Once when an empty grid is loaded.
-     * And again when the grid has content.
-     */
-    const hasSetContentSize = React.useRef(false);
-    const hasSetContentSizeEmpty = React.useRef(false);
-    const needsAutoSize = React.useRef(false);
-    const setInitialContentSize = React.useCallback(() => {
-        if (!gridDivRef.current?.clientWidth) {
-            // Don't resize grids if they are offscreen as it doesn't work.
-            needsAutoSize.current = true;
-            return;
-        }
-        const headerCellCount = gridDivRef.current?.getElementsByClassName("ag-header-cell-label")?.length;
-        if (headerCellCount < 2) {
-            // Don't resize grids until all the columns are visible
-            // as `autoSizeColumns` will fail silently in this case
-            needsAutoSize.current = true;
-            return;
-        }
-        const skipHeader = sizeColumns === "auto-skip-headers" && !lodashEs.isEmpty(params.rowData);
-        if (sizeColumns === "auto" || skipHeader) {
-            const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current });
-            if (lodashEs.isEmpty(params.rowData)) {
-                if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
-                    hasSetContentSizeEmpty.current = true;
-                    params.onContentSize && params.onContentSize(result);
-                }
+// 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(() => {
+    const blockElement = element ? `${block}__${element}` : block;
+    let classString = blockElement;
+    modifiers &&
+        Object.keys(modifiers).forEach((name) => {
+            const value = modifiers[name];
+            if (value)
+                classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
+        });
+    let expandedClassName = typeof className === "function" ? className(modifiers) : className;
+    if (typeof expandedClassName === "string") {
+        expandedClassName = expandedClassName.trim();
+        if (expandedClassName)
+            classString += ` ${expandedClassName}`;
+    }
+    return classString;
+}, [block, element, modifiers, className]);
+
+// 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") {
+        ref(instance);
+    }
+    else if (ref) {
+        ref.current = instance;
+    }
+};
+const useCombinedRef = (refA, refB) => {
+    return React.useMemo(() => {
+        return (instance) => {
+            setRef(refA, instance);
+            setRef(refB, instance);
+        };
+    }, [refA, refB]);
+};
+
+// Get around a warning when using useLayoutEffect on the server.
+// 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"
+    ? 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 Keys = Object.freeze({
+    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,
+    SET: 1,
+    UNSET: 2,
+    INCREASE: 3,
+    DECREASE: 4,
+    FIRST: 5,
+    LAST: 6,
+    SET_INDEX: 7,
+});
+const CloseReason = Object.freeze({
+    CLICK: "click",
+    CANCEL: "cancel",
+    BLUR: "blur",
+    SCROLL: "scroll",
+    TAB_FORWARD: "tab_forward",
+    TAB_BACKWARD: "tab_backward",
+});
+const FocusPositions = Object.freeze({
+    FIRST: "first",
+    LAST: "last",
+});
+const MenuStateMap = Object.freeze({
+    entering: "opening",
+    entered: "open",
+    exiting: "closing",
+    exited: "closed",
+});
+
+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;
+}
+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) {
+                target[key] = (...arg) => {
+                    sourceProp(...arg);
+                    targetProp(...arg);
+                };
             }
             else {
-                if (result && !hasSetContentSize.current) {
-                    hasSetContentSize.current = true;
-                    params.onContentSize && params.onContentSize(result);
-                }
+                target[key] = sourceProp;
             }
+        });
+    return target;
+};
+const parsePadding = (paddingStr) => {
+    if (paddingStr == null)
+        return { top: 0, right: 0, bottom: 0, left: 0 };
+    const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
+    const top = !isNaN(padding[0]) ? padding[0] : 0;
+    const right = !isNaN(padding[1]) ? padding[1] : top;
+    return {
+        top,
+        right,
+        bottom: !isNaN(padding[2]) ? padding[2] : top,
+        left: !isNaN(padding[3]) ? padding[3] : right,
+    };
+};
+// Adapted from https://github.com/popperjs/popper-core/tree/v2.9.1/src/dom-utils
+const getScrollAncestor = (node) => {
+    const thisWindow = (node?.ownerDocument ?? document).defaultView ?? window;
+    while (node) {
+        node = node.parentNode;
+        if (!node || node === thisWindow?.document?.body)
+            return null;
+        if (node instanceof Element) {
+            const { overflow, overflowX, overflowY } = thisWindow.getComputedStyle(node);
+            if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX))
+                return node;
         }
-        if (sizeColumns !== "none") {
-            sizeColumnsToFit();
-        }
-        needsAutoSize.current = false;
-    }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
-    const lastOwnerDocumentRef = React.useRef();
-    /**
-     * Auto-size windows that had deferred auto-size
-     */
-    useIntervalHook({
-        callback: () => {
-            // Check if window has been popped out and needs resize
-            const currentDocument = gridDivRef.current?.ownerDocument;
-            if (currentDocument !== lastOwnerDocumentRef.current) {
-                lastOwnerDocumentRef.current = currentDocument;
-                if (currentDocument) {
-                    needsAutoSize.current = true;
-                }
-            }
-            if (needsAutoSize.current) {
-                needsAutoSize.current = false;
-                setInitialContentSize();
-            }
-        },
-        timeoutMs: 1000,
+    }
+    return null;
+};
+function commonProps(isDisabled, isHovering) {
+    return {
+        "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))
+        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))
+        return false;
+    input.focus();
+    // Text areas should start at end
+    // this is a proxy for instanceof HTMLTextAreaElement
+    if (["textarea", "text"].includes(input.type)) {
+        input.setSelectionRange(0, input.value.length);
+    }
+    return true;
+};
+
+const HoverItemContext = React.createContext(undefined);
+
+const withHovering = (name, WrappedComponent) => {
+    const Component = React.memo(WrappedComponent);
+    const WithHovering = React.forwardRef((props, ref) => {
+        const menuItemRef = React.useRef(null);
+        return (jsxRuntime.jsx(Component, { ...props, menuItemRef: menuItemRef, externalRef: ref, isHovering: React.useContext(HoverItemContext) === menuItemRef.current }));
     });
-    const previousGridReady = React.useRef(gridReady);
-    React.useEffect(() => {
-        if (!previousGridReady.current && gridReady) {
-            previousGridReady.current = true;
-            setInitialContentSize();
+    WithHovering.displayName = `WithHovering(${name})`;
+    return WithHovering;
+};
+
+const useItems = (menuRef, focusRef) => {
+    const [hoverItem, setHoverItem] = React.useState();
+    const stateRef = React.useRef({
+        items: [],
+        hoverIndex: -1,
+        sorted: false,
+    });
+    const mutableState = stateRef.current;
+    const updateItems = React.useCallback((item, isMounted) => {
+        const { items } = mutableState;
+        if (!item) {
+            mutableState.items = [];
         }
-    }, [gridReady, setInitialContentSize]);
-    /**
-     * On data load select the first row of the grid if required.
-     */
-    const hasSelectedFirstItem = React.useRef(false);
-    React.useEffect(() => {
-        if (!gridReady || hasSelectedFirstItem.current || !params.rowData || !externallySelectedItemsAreInSync)
-            return;
-        hasSelectedFirstItem.current = true;
-        if (isNotEmpty(params.rowData) && lodashEs.isEmpty(params.externalSelectedItems)) {
-            const firstRowId = getFirstRowId();
-            if (params.autoSelectFirstRow) {
-                selectRowsById([firstRowId]);
+        else if (isMounted) {
+            items.push(item);
+        }
+        else {
+            const index = items.indexOf(item);
+            if (index > -1) {
+                items.splice(index, 1);
+                if (item.contains(document.activeElement)) {
+                    focusRef?.current?.focus();
+                    setHoverItem(undefined);
+                }
             }
-            else {
-                focusByRowById(firstRowId);
+        }
+        mutableState.hoverIndex = -1;
+        mutableState.sorted = false;
+    }, [mutableState, focusRef]);
+    const dispatch = React.useCallback((actionType, item, nextIndex) => {
+        const { items, hoverIndex } = mutableState;
+        const sortItems = () => {
+            if (mutableState.sorted)
+                return;
+            const orderedNodes = menuRef.current.querySelectorAll(".szh-menu__item");
+            items.sort((a, b) => indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b));
+            mutableState.sorted = true;
+        };
+        let index = -1;
+        let newItem = undefined;
+        let newItemFn = undefined;
+        switch (actionType) {
+            case HoverActionTypes.RESET:
+                break;
+            case HoverActionTypes.SET:
+                newItem = item;
+                break;
+            case HoverActionTypes.UNSET:
+                newItemFn = (prevItem) => (prevItem === item ? undefined : prevItem);
+                break;
+            case HoverActionTypes.FIRST:
+                sortItems();
+                index = 0;
+                newItem = items[index];
+                break;
+            case HoverActionTypes.LAST:
+                sortItems();
+                index = items.length - 1;
+                newItem = items[index];
+                break;
+            case HoverActionTypes.SET_INDEX:
+                if (typeof nextIndex !== "number")
+                    break;
+                sortItems();
+                index = nextIndex;
+                newItem = items[index];
+                lodashEs.defer(() => newItem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }));
+                break;
+            case HoverActionTypes.INCREASE:
+                sortItems();
+                index = hoverIndex;
+                if (index < 0)
+                    index = items.indexOf(item);
+                index++;
+                if (index >= items.length)
+                    index = 0;
+                newItem = items[index];
+                focusFirstInput(newItem);
+                break;
+            case HoverActionTypes.DECREASE: {
+                sortItems();
+                index = hoverIndex;
+                if (index < 0)
+                    index = items.indexOf(item);
+                index--;
+                if (index < 0)
+                    index = items.length - 1;
+                newItem = items[index];
+                focusFirstInput(newItem);
+                break;
             }
+            default:
+                if (process.env.NODE_ENV !== "production")
+                    throw new Error(`[React-Menu] Unknown hover action type: ${actionType}`);
         }
-    }, [
-        externallySelectedItemsAreInSync,
-        focusByRowById,
-        gridReady,
-        params.externalSelectedItems,
-        params.autoSelectFirstRow,
-        params.rowData,
-        selectRowsById,
-        getFirstRowId,
-    ]);
-    /**
-     * 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 clickSelectorCheckboxWhenContainingCellClicked = React.useCallback(({ event }) => {
-        if (!event)
-            return;
-        const input = event.target.querySelector("input");
-        input?.dispatchEvent(event);
-    }, []);
-    /**
-     * Ensure external selected items list is in sync with panel.
-     */
-    const synchroniseExternalStateToGridSelection = React.useCallback(({ api }) => {
-        if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
-            setExternallySelectedItemsAreInSync(true);
+        if (!newItem && !newItemFn)
+            index = -1;
+        setHoverItem(newItem ?? newItemFn);
+        mutableState.hoverIndex = index;
+    }, [menuRef, mutableState]);
+    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}`);
         }
-        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 ||
-            isNotEmpty(lodashEs.xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))) {
-            setExternallySelectedItemsAreInSync(false);
-            params.setExternalSelectedItems([...selectedRows]);
+        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: () => { },
+    setOpenSubmenuCount: () => 0,
+});
+
+// This hook includes some common stateful logic in MenuItem and FocusableItem
+const useItemState = (menuItemRef, focusRef, isHovering, isDisabled) => {
+    const { submenuCloseDelay } = React.useContext(ItemSettingsContext);
+    const { isParentOpen, isSubmenuOpen, dispatch, updateItems } = React.useContext(MenuListItemContext);
+    const timeoutId = React.useRef();
+    const setHover = () => {
+        !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
+    };
+    const unsetHover = () => {
+        !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
+    };
+    const onBlur = (e) => {
+        // Focus has moved out of the entire item
+        // It handles situation such as clicking on a sibling disabled menu item
+        if (isHovering && !e.currentTarget.contains(e.relatedTarget))
+            unsetHover();
+    };
+    const onPointerMove = () => {
+        if (isSubmenuOpen) {
+            if (!timeoutId.current)
+                timeoutId.current = setTimeout(() => {
+                    timeoutId.current = undefined;
+                    setHover();
+                }, submenuCloseDelay);
         }
         else {
-            setExternallySelectedItemsAreInSync(true);
+            setHover();
         }
-    }, [params, setExternallySelectedItemsAreInSync]);
-    /**
-     * Synchronise externally selected items to grid.
-     * If new ids are selected scroll them into view.
-     */
-    const synchroniseExternallySelectedItemsToGrid = React.useCallback(() => {
-        if (!gridReady)
-            return;
-        if (!params.externalSelectedItems) {
-            setExternallySelectedItemsAreInSync(true);
-            return;
+    };
+    const onPointerLeave = (_, keepHover) => {
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+            timeoutId.current = undefined;
         }
-        const selectedIds = params.externalSelectedItems.map((row) => row.id);
-        const lastNewId = lodashEs.last(lodashEs.difference(selectedIds, lastSelectedIds.current));
-        if (lastNewId != null) {
-            ensureRowVisible(lastNewId);
+        !keepHover && unsetHover();
+    };
+    useItemEffect(isDisabled, menuItemRef, updateItems);
+    React.useEffect(() => () => clearTimeout(timeoutId.current), []);
+    React.useEffect(() => {
+        // Don't set focus when parent menu is closed, otherwise focus will be lost
+        // and onBlur event will be fired with relatedTarget setting as null.
+        if (isHovering && isParentOpen) {
+            focusRef?.current && focusRef.current.focus();
         }
-        lastSelectedIds.current = selectedIds;
-        selectRowsById(selectedIds);
-        setExternallySelectedItemsAreInSync(true);
-    }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
-    /**
-     * Combine grid and cell editable into one function
-     */
-    const combineEditables = (...editables) => (params) => {
-        const results = editables.map((editable) => fnOrVar(editable, params));
-        // If editable is not set anywhere then it's non-editable
-        if (results.every((v) => v == null))
-            return false;
-        // If any editable value is or returns false then it's non-editable
-        return !results.some((v) => v == false);
-    };
-    /**
-     * Synchronise externally selected items to grid on externalSelectedItems change
-     */
-    React.useEffect(synchroniseExternallySelectedItemsToGrid, [synchroniseExternallySelectedItemsToGrid]);
-    /**
-     * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
-     */
-    const columnDefs = React.useMemo(() => {
-        const adjustColDefs = params.columnDefs.map((colDef) => {
-            const colDefEditable = colDef.editable;
-            const editable = combineEditables(params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
-            return {
-                ...colDef,
-                editable,
-                cellClassRules: {
-                    ...colDef.cellClassRules,
-                    "GridCell-readonly": (ccp) => !editable(ccp),
-                },
-            };
-        });
-        return params.selectable
-            ? [
-                {
-                    colId: "selection",
-                    editable: false,
-                    minWidth: 42,
-                    maxWidth: 42,
-                    pinned: selectColumnPinned,
-                    headerComponentParams: {
-                        exportable: false,
-                    },
-                    checkboxSelection: true,
-                    headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
-                    suppressHeaderKeyboardEvent: (e) => {
-                        if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
-                            if (lodashEs.isEmpty(e.api.getSelectedRows())) {
-                                e.api.selectAllFiltered();
-                            }
-                            else {
-                                e.api.deselectAll();
-                            }
-                            return true;
-                        }
-                        return false;
-                    },
-                    onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
-                },
-                ...adjustColDefs,
-            ]
-            : adjustColDefs;
-    }, [
-        params.columnDefs,
-        params.selectable,
-        params.readOnly,
-        params.defaultColDef?.editable,
-        selectColumnPinned,
-        rowSelection,
-        clickSelectorCheckboxWhenContainingCellClicked,
-    ]);
-    /**
-     * When grid is ready set the apis to the grid context and sync selected items to grid.
-     */
-    const onGridReady = React.useCallback((event) => {
-        setApis(event.api, event.columnApi, dataTestId);
-        synchroniseExternallySelectedItemsToGrid();
-    }, [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid]);
-    /**
-     * When the grid is being initialized the data may be empty.
-     * This will resize columns when we have at least one row.
-     */
-    const previousRowDataLength = React.useRef(0);
-    const onRowDataChanged = React.useCallback(() => {
-        const length = params.rowData?.length ?? 0;
-        if (previousRowDataLength.current !== length) {
-            setInitialContentSize();
-            previousRowDataLength.current = length;
-        }
-        if (lastUpdatedDep.current === updatedDep || lodashEs.isEmpty(colIdsEdited.current))
-            return;
-        lastUpdatedDep.current = updatedDep;
-        // Don't update while there are spinners
-        if (!lodashEs.isEmpty(updatingCols()))
-            return;
-        const skipHeader = sizeColumns === "auto-skip-headers";
-        autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
-        colIdsEdited.current.clear();
-    }, [autoSizeColumns, params.rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
-    /**
-     * Show/hide no rows overlay when model changes.
-     */
-    const isShowingNoRowsOverlay = React.useRef(false);
-    const onModelUpdated = React.useCallback((event) => {
-        if (event.api.getDisplayedRowCount() === 0) {
-            if (!isShowingNoRowsOverlay.current) {
-                event.api.showNoRowsOverlay();
-                isShowingNoRowsOverlay.current = true;
-            }
-        }
-        else {
-            if (isShowingNoRowsOverlay.current) {
-                event.api.hideOverlay();
-                isShowingNoRowsOverlay.current = false;
-            }
-        }
-    }, []);
-    /**
-     * Force-refresh all selected rows to re-run class function, to update selection highlighting
-     */
-    const refreshSelectedRows = React.useCallback((event) => {
-        event.api.refreshCells({
-            force: true,
-            rowNodes: event.api.getSelectedNodes(),
-        });
-    }, []);
-    /**
-     * Make sure node is selected for editing and start edit
-     */
-    const startCellEditing = React.useCallback((event) => {
-        prePopupOps();
-        if (!event.node.isSelected()) {
-            event.node.setSelected(true, true);
-        }
-        // Cell already being edited, so don't re-edit until finished
-        if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
-            return;
-        }
-        if (event.rowIndex !== null) {
-            event.api.startEditingCell({
-                rowIndex: event.rowIndex,
-                colKey: event.column.getColId(),
-            });
-        }
-    }, [checkUpdating, prePopupOps]);
-    /**
-     * Handle double click edit
-     */
-    const onCellDoubleClick = React.useCallback((event) => {
-        if (!invokeEditAction(event))
-            startCellEditing(event);
-    }, [startCellEditing]);
-    /**
-     * Handle single click edits
-     */
-    const onCellClicked = React.useCallback((event) => {
-        if (event.colDef?.cellRendererParams?.singleClickEdit) {
-            startCellEditing(event);
-        }
-    }, [startCellEditing]);
-    /**
-     * If cell has an edit action invoke it (if editable)
-     */
-    const invokeEditAction = (e) => {
-        const editAction = e.colDef?.cellRendererParams?.editAction;
-        if (!editAction)
-            return false;
-        const editable = fnOrVar(e.colDef?.editable, e);
-        if (editable) {
-            if (!e.node.isSelected()) {
-                e.node.setSelected(true, true);
-            }
-            editAction([e.data, ...e.api.getSelectedRows().filter((row) => row.id !== e.data.id)]);
-        }
-        return true;
-    };
-    /**
-     * Start editing on pressing Enter
-     */
-    const onCellKeyPress = React.useCallback((e) => {
-        if (e.event.key === "Enter") {
-            if (!invokeEditAction(e))
-                startCellEditing(e);
-        }
-    }, [startCellEditing]);
-    /**
-     * Once the grid has auto-sized we want to run fit to fit the grid in its container,
-     * 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 adjustGroupColDef = (colDef) => ({
-            ...colDef,
-            children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
-        });
-        const adjustColDef = (colDef) => ({
-            ...colDef,
-            suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex,
-            sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
-        });
-        return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
-    }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
-    /**
-     * Set of colIds that need auto-sizing.
-     */
-    const colIdsEdited = React.useRef(new Set());
-    const lastUpdatedDep = React.useRef(updatedDep);
-    /**
-     * When cell editing has completed the colId as needing auto-sizing
-     */
-    React.useEffect(() => {
-        if (lastUpdatedDep.current === updatedDep)
-            return;
-        lastUpdatedDep.current = updatedDep;
-        const colIds = updatingCols();
-        // Updating possibly completed
-        if (lodashEs.isEmpty(colIds)) {
-            // Columns to resize?
-            if (!lodashEs.isEmpty(colIdsEdited.current)) {
-                const skipHeader = sizeColumns === "auto-skip-headers";
-                if (sizeColumns === "auto" || skipHeader) {
-                    lodashEs.defer(() => autoSizeColumns({
-                        skipHeader,
-                        userSizedColIds: userSizedColIds.current,
-                        colIds: colIdsEdited.current,
-                    }));
-                }
-                colIdsEdited.current.clear();
-            }
-        }
-        else {
-            // Updates not complete, add them to a list of columns needing resize
-            colIds.forEach((colId) => {
-                if (colId && !getColDef(colId)?.flex) {
-                    colIdsEdited.current.add(colId);
-                }
-            });
-        }
-    }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
-    /**
-     * Resize columns to fit if required on window/container resize
-     */
-    const onGridSizeChanged = React.useCallback(() => {
-        if (sizeColumns !== "none") {
-            sizeColumnsToFit();
-        }
-    }, [sizeColumns, sizeColumnsToFit]);
-    /**
-     * Set of column Id's that are prevented from auto-sizing as they are user set
-     */
-    const userSizedColIds = React.useRef(new Set());
-    /**
-     * Lock/unlock column width on user edit/reset.
-     */
-    const onColumnResized = React.useCallback((e) => {
-        const colId = e.column?.getColId();
-        if (colId == null)
-            return;
-        switch (e.source) {
-            case "uiColumnDragged":
-                userSizedColIds.current.add(colId);
-                break;
-            case "autosizeColumns":
-                userSizedColIds.current.delete(colId);
-                break;
-        }
-    }, []);
-    setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready"), children: jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: params.rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
-                    setInitialContentSize();
-                }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
-                    rowData: params.rowData,
-                    noRowsOverlayText: params.noRowsOverlayText,
-                }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.postSortRows ?? postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true }) }) }));
-};
-
-const GridPopoverContext = React.createContext({
-    anchorRef: { current: null },
-    saving: false,
-    setSaving: () => { },
-    field: "",
-    value: null,
-    data: {},
-    selectedRows: [],
-    updateValue: async () => false,
-    formatValue: () => "! No gridPopoverContextProvider !",
-});
-const useGridPopoverContext = () => React.useContext(GridPopoverContext);
-
-const GridPopoverContextProvider = ({ props, children }) => {
-    const { getFilteredSelectedRows, updatingCells } = React.useContext(GridContext);
-    const anchorRef = React.useRef(props.eGridCell);
-    const hasSaved = React.useRef(false);
-    const [saving, setSaving] = React.useState(false);
-    const { colDef } = props;
-    const { cellEditorParams } = colDef;
-    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 updateValue = React.useCallback(async (saveFn, tabDirection) => {
-        if (hasSaved.current)
-            return true;
-        hasSaved.current = true;
-        return saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
-    }, [field, saving, selectedRows, updatingCells]);
-    return (jsxRuntime.jsx(GridPopoverContext.Provider, { value: {
-            anchorRef: anchorRef,
-            saving,
-            setSaving,
-            selectedRows,
-            field,
-            data: props.data,
-            value: props.value,
-            updateValue,
-            formatValue: props.formatValue,
-        }, children: children }));
-};
-
-const GridCellMultiSelectClassRules = {
-    "ag-selected-for-edit": (params) => {
-        const { api, node, colDef } = params;
-        const cep = colDef.cellEditorSelector
-            ? colDef.cellEditorSelector(params)?.params
-            : colDef.cellEditorParams;
-        return (cep?.multiEdit &&
-            api
-                .getSelectedNodes()
-                .map((row) => row.id)
-                .includes(node.id) &&
-            api.getEditingCells().some((cell) => cell.column.getColDef() === colDef));
-    },
-};
-
-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 GridCellRenderer = (props) => {
-    const { checkUpdating } = React.useContext(GridUpdatingContext);
-    const colDef = props.colDef;
-    const rendererParams = colDef.cellRendererParams;
-    const warningFn = rendererParams?.warning;
-    let warningText = warningFn ? warningFn(props) : undefined;
-    const infoFn = rendererParams?.info;
-    let infoText = infoFn ? infoFn(props) : undefined;
-    if (Array.isArray(warningText))
-        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 }))] }));
-};
-const suppressCellKeyboardEvents = (e) => {
-    const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
-    const exec = shortcutKeys[e.event.key];
-    if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
-        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);
-};
-const generateFilterGetter = (field, filterValueGetter, valueFormatter) => {
-    if (filterValueGetter)
-        return filterValueGetter;
-    // aggrid will default to valueGetter
-    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 += " -";
-        // Search by raw value as well as formatted
-        const gotValue = ["string", "number"].includes(typeof value) ? value : undefined;
-        return (formattedValue + (gotValue != null && formattedValue != gotValue ? " " + gotValue : "")) //
-            .replaceAll(/\s+/g, " ")
-            .trim();
-    };
-};
-/*
- * All cells should use this.
- */
-const GridCell = (props, custom) => {
-    // Generate a default filter value getter which uses the formatted value plus
-    // the editable value if it's a string and different from the formatted value.
-    // This is so that e.g. bearings can be searched for by DMS or raw number.
-    const valueFormatter = props.valueFormatter;
-    const filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter, valueFormatter);
-    const exportable = props.exportable;
-    // Can't leave this here ag-grid will complain
-    delete props.exportable;
-    return {
-        colId: props.field ?? props.field,
-        headerTooltip: props.headerName,
-        sortable: !!(props?.field || props?.valueGetter),
-        resizable: true,
-        editable: props.editable ?? false,
-        ...(custom?.editor && {
-            cellClassRules: GridCellMultiSelectClassRules,
-            editable: props.editable ?? true,
-            cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
-        }),
-        suppressKeyboardEvent: suppressCellKeyboardEvents,
-        ...(custom?.editorParams && {
-            cellEditorParams: {
-                ...custom.editorParams,
-                multiEdit: custom.multiEdit,
-                preventAutoEdit: custom.preventAutoEdit ?? false,
-            },
-        }),
-        // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
-        filterValueGetter,
-        // Default value formatter, otherwise react freaks out on objects
-        valueFormatter: (params) => {
-            if (params.value == null)
-                return "–";
-            const types = ["number", "boolean", "string"];
-            if (types.includes(typeof params.value))
-                return `${params.value}`;
-            else
-                return JSON.stringify(params.value);
-        },
-        ...props,
-        cellRenderer: GridCellRenderer,
-        cellRendererParams: {
-            originalCellRenderer: props.cellRenderer,
-            ...props.cellRendererParams,
-        },
-        headerComponentParams: {
-            exportable,
-            ...props.headerComponentParams,
-        },
-    };
-};
-const GenericCellEditorComponentWrapper = (editor) => {
-    const obj = { 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 })] }));
-    });
-};
-
-const GridCellFillerColId = "gridCellFiller";
-const isGridCellFiller = (col) => col.colId === GridCellFillerColId;
-const GridCellFiller = () => ({
-    colId: GridCellFillerColId,
-    headerName: "",
-    flex: 1,
-});
-
-const Editor = (props) => ({
-    component: GenericCellEditorComponentWrapper(props.editor),
-    params: { ...props.editorParams, multiEdit: props.multiEdit },
-});
-/**
- * Used to choose between cell editors based in data.
- */
-const GridCellMultiEditor = (props, cellEditorSelector) => GridCell({
-    cellClassRules: GridCellMultiSelectClassRules,
-    cellEditorSelector,
-    editable: props.editable ?? true,
-    ...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 }) }));
-});
-
-// 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(() => {
-    const blockElement = element ? `${block}__${element}` : block;
-    let classString = blockElement;
-    modifiers &&
-        Object.keys(modifiers).forEach((name) => {
-            const value = modifiers[name];
-            if (value)
-                classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
-        });
-    let expandedClassName = typeof className === "function" ? className(modifiers) : className;
-    if (typeof expandedClassName === "string") {
-        expandedClassName = expandedClassName.trim();
-        if (expandedClassName)
-            classString += ` ${expandedClassName}`;
-    }
-    return classString;
-}, [block, element, modifiers, className]);
-
-// 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") {
-        ref(instance);
-    }
-    else if (ref) {
-        ref.current = instance;
-    }
-};
-const useCombinedRef = (refA, refB) => {
-    return React.useMemo(() => {
-        return (instance) => {
-            setRef(refA, instance);
-            setRef(refB, instance);
-        };
-    }, [refA, refB]);
-};
-
-// Get around a warning when using useLayoutEffect on the server.
-// 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"
-    ? 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 Keys = Object.freeze({
-    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,
-    SET: 1,
-    UNSET: 2,
-    INCREASE: 3,
-    DECREASE: 4,
-    FIRST: 5,
-    LAST: 6,
-    SET_INDEX: 7,
-});
-const CloseReason = Object.freeze({
-    CLICK: "click",
-    CANCEL: "cancel",
-    BLUR: "blur",
-    SCROLL: "scroll",
-    TAB_FORWARD: "tab_forward",
-    TAB_BACKWARD: "tab_backward",
-});
-const FocusPositions = Object.freeze({
-    FIRST: "first",
-    LAST: "last",
-});
-const MenuStateMap = Object.freeze({
-    entering: "opening",
-    entered: "open",
-    exiting: "closing",
-    exited: "closed",
-});
-
-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;
-}
-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) {
-                target[key] = (...arg) => {
-                    sourceProp(...arg);
-                    targetProp(...arg);
-                };
-            }
-            else {
-                target[key] = sourceProp;
-            }
-        });
-    return target;
-};
-const parsePadding = (paddingStr) => {
-    if (paddingStr == null)
-        return { top: 0, right: 0, bottom: 0, left: 0 };
-    const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
-    const top = !isNaN(padding[0]) ? padding[0] : 0;
-    const right = !isNaN(padding[1]) ? padding[1] : top;
-    return {
-        top,
-        right,
-        bottom: !isNaN(padding[2]) ? padding[2] : top,
-        left: !isNaN(padding[3]) ? padding[3] : right,
-    };
-};
-// Adapted from https://github.com/popperjs/popper-core/tree/v2.9.1/src/dom-utils
-const getScrollAncestor = (node) => {
-    const thisWindow = (node?.ownerDocument ?? document).defaultView ?? window;
-    while (node) {
-        node = node.parentNode;
-        if (!node || node === thisWindow?.document?.body)
-            return null;
-        if (node instanceof Element) {
-            const { overflow, overflowX, overflowY } = thisWindow.getComputedStyle(node);
-            if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX))
-                return node;
-        }
-    }
-    return null;
-};
-function commonProps(isDisabled, isHovering) {
-    return {
-        "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))
-        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))
-        return false;
-    input.focus();
-    // Text areas should start at end
-    // this is a proxy for instanceof HTMLTextAreaElement
-    if (["textarea", "text"].includes(input.type)) {
-        input.setSelectionRange(0, input.value.length);
-    }
-    return true;
-};
-
-const HoverItemContext = React.createContext(undefined);
-
-const withHovering = (name, WrappedComponent) => {
-    const Component = React.memo(WrappedComponent);
-    const WithHovering = React.forwardRef((props, ref) => {
-        const menuItemRef = React.useRef(null);
-        return (jsxRuntime.jsx(Component, { ...props, menuItemRef: menuItemRef, externalRef: ref, isHovering: React.useContext(HoverItemContext) === menuItemRef.current }));
-    });
-    WithHovering.displayName = `WithHovering(${name})`;
-    return WithHovering;
-};
-
-const useItems = (menuRef, focusRef) => {
-    const [hoverItem, setHoverItem] = React.useState();
-    const stateRef = React.useRef({
-        items: [],
-        hoverIndex: -1,
-        sorted: false,
-    });
-    const mutableState = stateRef.current;
-    const updateItems = React.useCallback((item, isMounted) => {
-        const { items } = mutableState;
-        if (!item) {
-            mutableState.items = [];
-        }
-        else if (isMounted) {
-            items.push(item);
-        }
-        else {
-            const index = items.indexOf(item);
-            if (index > -1) {
-                items.splice(index, 1);
-                if (item.contains(document.activeElement)) {
-                    focusRef?.current?.focus();
-                    setHoverItem(undefined);
-                }
-            }
-        }
-        mutableState.hoverIndex = -1;
-        mutableState.sorted = false;
-    }, [mutableState, focusRef]);
-    const dispatch = React.useCallback((actionType, item, nextIndex) => {
-        const { items, hoverIndex } = mutableState;
-        const sortItems = () => {
-            if (mutableState.sorted)
-                return;
-            const orderedNodes = menuRef.current.querySelectorAll(".szh-menu__item");
-            items.sort((a, b) => indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b));
-            mutableState.sorted = true;
-        };
-        let index = -1;
-        let newItem = undefined;
-        let newItemFn = undefined;
-        switch (actionType) {
-            case HoverActionTypes.RESET:
-                break;
-            case HoverActionTypes.SET:
-                newItem = item;
-                break;
-            case HoverActionTypes.UNSET:
-                newItemFn = (prevItem) => (prevItem === item ? undefined : prevItem);
-                break;
-            case HoverActionTypes.FIRST:
-                sortItems();
-                index = 0;
-                newItem = items[index];
-                break;
-            case HoverActionTypes.LAST:
-                sortItems();
-                index = items.length - 1;
-                newItem = items[index];
-                break;
-            case HoverActionTypes.SET_INDEX:
-                if (typeof nextIndex !== "number")
-                    break;
-                sortItems();
-                index = nextIndex;
-                newItem = items[index];
-                lodashEs.defer(() => newItem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }));
-                break;
-            case HoverActionTypes.INCREASE:
-                sortItems();
-                index = hoverIndex;
-                if (index < 0)
-                    index = items.indexOf(item);
-                index++;
-                if (index >= items.length)
-                    index = 0;
-                newItem = items[index];
-                focusFirstInput(newItem);
-                break;
-            case HoverActionTypes.DECREASE: {
-                sortItems();
-                index = hoverIndex;
-                if (index < 0)
-                    index = items.indexOf(item);
-                index--;
-                if (index < 0)
-                    index = items.length - 1;
-                newItem = items[index];
-                focusFirstInput(newItem);
-                break;
-            }
-            default:
-                if (process.env.NODE_ENV !== "production")
-                    throw new Error(`[React-Menu] Unknown hover action type: ${actionType}`);
-        }
-        if (!newItem && !newItemFn)
-            index = -1;
-        setHoverItem(newItem ?? newItemFn);
-        mutableState.hoverIndex = index;
-    }, [menuRef, mutableState]);
-    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: () => { },
-    setOpenSubmenuCount: () => 0,
-});
-
-// This hook includes some common stateful logic in MenuItem and FocusableItem
-const useItemState = (menuItemRef, focusRef, isHovering, isDisabled) => {
-    const { submenuCloseDelay } = React.useContext(ItemSettingsContext);
-    const { isParentOpen, isSubmenuOpen, dispatch, updateItems } = React.useContext(MenuListItemContext);
-    const timeoutId = React.useRef();
-    const setHover = () => {
-        !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
-    };
-    const unsetHover = () => {
-        !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
-    };
-    const onBlur = (e) => {
-        // Focus has moved out of the entire item
-        // It handles situation such as clicking on a sibling disabled menu item
-        if (isHovering && !e.currentTarget.contains(e.relatedTarget))
-            unsetHover();
-    };
-    const onPointerMove = () => {
-        if (isSubmenuOpen) {
-            if (!timeoutId.current)
-                timeoutId.current = setTimeout(() => {
-                    timeoutId.current = undefined;
-                    setHover();
-                }, submenuCloseDelay);
-        }
-        else {
-            setHover();
-        }
-    };
-    const onPointerLeave = (_, keepHover) => {
-        if (timeoutId.current) {
-            clearTimeout(timeoutId.current);
-            timeoutId.current = undefined;
-        }
-        !keepHover && unsetHover();
-    };
-    useItemEffect(isDisabled, menuItemRef, updateItems);
-    React.useEffect(() => () => clearTimeout(timeoutId.current), []);
-    React.useEffect(() => {
-        // Don't set focus when parent menu is closed, otherwise focus will be lost
-        // and onBlur event will be fired with relatedTarget setting as null.
-        if (isHovering && isParentOpen) {
-            focusRef?.current && focusRef.current.focus();
-        }
-    }, [focusRef, isHovering, isParentOpen]);
-    return {
-        setHover,
-        onBlur,
-        onPointerMove,
-        onPointerLeave,
+    }, [focusRef, isHovering, isParentOpen]);
+    return {
+        setHover,
+        onBlur,
+        onPointerMove,
+        onPointerLeave,
     };
 };
 
@@ -2585,339 +1959,1007 @@ function MenuFr({ "aria-label": ariaLabel, menuButton, instanceRef, onMenuChange
         // Focus (hover) the first menu item when onClick event is trigger by keyboard
         openMenu(e.detail === 0 ? FocusPositions.FIRST : undefined);
     };
-    const onKeyDown = (e) => {
+    const onKeyDown = (e) => {
+        switch (e.key) {
+            case Keys.UP:
+                openMenu(FocusPositions.LAST);
+                break;
+            case Keys.DOWN:
+                openMenu(FocusPositions.FIRST);
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+    };
+    // 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.");
+    const buttonProps = {
+        ref: useCombinedRef(button.ref, buttonRef),
+        ...mergeProps({ onClick, onKeyDown }, button.props),
+        isOpen: false,
+    };
+    if (getName(button.type) === "MenuButton") {
+        buttonProps.isOpen = isOpen;
+    }
+    const renderButton = React.cloneElement(button, buttonProps);
+    useMenuChange(onMenuChange, isOpen);
+    React.useImperativeHandle(instanceRef, () => ({
+        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 })] }));
+}
+const Menu = React.forwardRef(MenuFr);
+
+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 [stateProps, toggleMenu, _openMenu] = useMenuStateAndFocus(settings);
+    const { state } = stateProps;
+    const isDisabled = !!disabled;
+    const isOpen = isMenuOpen(state);
+    const containerRef = React.useRef(null);
+    const timeoutId = React.useRef();
+    const stopTimer = () => {
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+            timeoutId.current = undefined;
+        }
+    };
+    const openMenu = (...args) => {
+        stopTimer();
+        setHover();
+        !isDisabled && _openMenu(...args);
+    };
+    const setHover = () => !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
+    const delayOpen = (delay) => {
+        setHover();
+        if (!openTrigger)
+            timeoutId.current = setTimeout(() => batchedUpdates(openMenu), Math.max(delay, 0));
+    };
+    const handlePointerMove = () => {
+        if (timeoutId.current || isOpen || isDisabled)
+            return;
+        if (isSubmenuOpen) {
+            timeoutId.current = setTimeout(() => delayOpen(submenuOpenDelay - submenuCloseDelay), submenuCloseDelay);
+        }
+        else {
+            delayOpen(submenuOpenDelay);
+        }
+    };
+    const handlePointerLeave = () => {
+        stopTimer();
+        if (!isOpen)
+            dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
+    };
+    const handleKeyDown = (e) => {
+        let handled = false;
+        switch (e.key) {
+            // LEFT key is bubbled up from submenu items
+            case Keys.LEFT:
+                if (isOpen) {
+                    menuItemRef?.current && menuItemRef.current.focus();
+                    toggleMenu(false);
+                    handled = true;
+                }
+                break;
+            // prevent browser from scrolling page to the right
+            case Keys.RIGHT:
+                if (!isOpen)
+                    handled = true;
+                break;
+        }
+        if (handled) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    const handleItemKeyDown = (e) => {
+        if (!isHovering)
+            return;
+        switch (e.key) {
+            case Keys.ENTER:
+            case Keys.SPACE:
+            case Keys.RIGHT:
+                openTrigger !== "none" && openMenu(FocusPositions.FIRST);
+                break;
+        }
+    };
+    useItemEffect(isDisabled, menuItemRef, updateItems);
+    useMenuChange(onMenuChange, isOpen);
+    React.useEffect(() => () => clearTimeout(timeoutId.current), []);
+    React.useEffect(() => {
+        // Don't set focus when parent menu is closed, otherwise focus will be lost
+        // and onBlur event will be fired with relatedTarget setting as null.
+        if (isHovering && isParentOpen) {
+            menuItemRef?.current && menuItemRef.current.focus();
+        }
+        else {
+            toggleMenu(false);
+        }
+    }, [isHovering, isParentOpen, toggleMenu, menuItemRef]);
+    React.useEffect(() => {
+        setOpenSubmenuCount((count) => (isOpen ? count + 1 : Math.max(count - 1, 0)));
+    }, [setOpenSubmenuCount, isOpen]);
+    React.useImperativeHandle(instanceRef, () => ({
+        openMenu: (...args) => {
+            isParentOpen && openMenu(...args);
+        },
+        closeMenu: () => {
+            if (isOpen) {
+                menuItemRef?.current && menuItemRef.current.focus();
+                toggleMenu(false);
+            }
+        },
+    }));
+    const modifiers = React.useMemo(() => ({
+        open: isOpen,
+        hover: isHovering,
+        disabled: isDisabled,
+        submenu: true,
+    }), [isOpen, isHovering, isDisabled]);
+    const { ref: externalItemRef, className: itemClassName, ...restItemProps } = itemProps;
+    const mergedItemProps = mergeProps({
+        onPointerMove: handlePointerMove,
+        onPointerLeave: handlePointerLeave,
+        onKeyDown: handleItemKeyDown,
+        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 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({
+                    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.UP:
-                openMenu(FocusPositions.LAST);
-                break;
-            case Keys.DOWN:
-                openMenu(FocusPositions.FIRST);
+            case Keys.ENTER:
+            case Keys.TAB:
+            case Keys.SPACE:
+                e.preventDefault();
+                e.stopPropagation();
+                if (isAnchor) {
+                    menuItemRef?.current && menuItemRef.current.click();
+                }
+                else {
+                    handleClick(e);
+                }
                 break;
-            default:
-                return;
         }
-        e.preventDefault();
     };
-    // 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.");
-    const buttonProps = {
-        ref: useCombinedRef(button.ref, buttonRef),
-        ...mergeProps({ onClick, onKeyDown }, button.props),
-        isOpen: false,
+    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 (getName(button.type) === "MenuButton") {
-        buttonProps.isOpen = isOpen;
+    if (isAnchor) {
+        return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsx("a", { href: href, ...menuItemProps }) }));
     }
-    const renderButton = React.cloneElement(button, buttonProps);
-    useMenuChange(onMenuChange, isOpen);
-    React.useImperativeHandle(instanceRef, () => ({
-        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 })] }));
-}
-const Menu = React.forwardRef(MenuFr);
+    else {
+        return jsxRuntime.jsx("li", { ...menuItemProps });
+    }
+};
+const MenuItem = withHovering("MenuItem", MenuItemFr);
 
-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 [stateProps, toggleMenu, _openMenu] = useMenuStateAndFocus(settings);
-    const { state } = stateProps;
+const FocusableItemFr = ({ className, disabled, children, isHovering, menuItemRef, externalRef, ...restProps }) => {
     const isDisabled = !!disabled;
-    const isOpen = isMenuOpen(state);
-    const containerRef = React.useRef(null);
-    const timeoutId = React.useRef();
-    const stopTimer = () => {
-        if (timeoutId.current) {
-            clearTimeout(timeoutId.current);
-            timeoutId.current = undefined;
+    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 useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, }) => {
+    const { redrawRows, prePopupOps, postPopupOps, getSelectedRows } = React.useContext(GridContext);
+    const [isOpen, setOpen] = React.useState(false);
+    const [anchorPoint, setAnchorPoint] = React.useState({ x: 0, y: 0 });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const clickedColDefRef = React.useRef(null);
+    const selectedRowsRef = React.useRef([]);
+    const clickedRowRef = React.useRef(null);
+    const openMenu = React.useCallback((e) => {
+        if (!e)
+            return;
+        prePopupOps();
+        setAnchorPoint({ x: e.clientX, y: e.clientY });
+        setOpen(true);
+    }, [prePopupOps]);
+    const closeMenu = React.useCallback(() => {
+        setOpen(false);
+        redrawRows();
+        postPopupOps();
+    }, [postPopupOps, redrawRows]);
+    const cellContextMenu = React.useCallback((event) => {
+        if (contextMenuSelectRow && !event.node.isSelected()) {
+            event.node.setSelected(true, true);
+        }
+        clickedColDefRef.current = event.colDef;
+        selectedRowsRef.current = getSelectedRows();
+        clickedRowRef.current = event.data;
+        // This is actually a pointer event
+        openMenu(event.event);
+    }, [contextMenuSelectRow, getSelectedRows, openMenu]);
+    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,
     };
-    const openMenu = (...args) => {
-        stopTimer();
-        setHover();
-        !isDisabled && _openMenu(...args);
-    };
-    const setHover = () => !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
-    const delayOpen = (delay) => {
-        setHover();
-        if (!openTrigger)
-            timeoutId.current = setTimeout(() => batchedUpdates(openMenu), Math.max(delay, 0));
-    };
-    const handlePointerMove = () => {
-        if (timeoutId.current || isOpen || isDisabled)
+};
+
+/**
+ * Wrapper for AgGrid to add commonly used functionality.
+ */
+const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-alpine", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, ...params }) => {
+    const { gridReady, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = React.useContext(GridContext);
+    const { checkUpdating, updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
+    const { prePopupOps } = React.useContext(GridContext);
+    const gridDivRef = React.useRef(null);
+    const lastSelectedIds = React.useRef([]);
+    const [staleGrid, setStaleGrid] = React.useState(false);
+    const postSortRows = usePostSortRowsHook({ setStaleGrid });
+    /**
+     * onContentSize should only be called at maximum twice.
+     * Once when an empty grid is loaded.
+     * And again when the grid has content.
+     */
+    const hasSetContentSize = React.useRef(false);
+    const hasSetContentSizeEmpty = React.useRef(false);
+    const needsAutoSize = React.useRef(false);
+    const setInitialContentSize = React.useCallback(() => {
+        if (!gridDivRef.current?.clientWidth) {
+            // Don't resize grids if they are offscreen as it doesn't work.
+            needsAutoSize.current = true;
             return;
-        if (isSubmenuOpen) {
-            timeoutId.current = setTimeout(() => delayOpen(submenuOpenDelay - submenuCloseDelay), submenuCloseDelay);
         }
-        else {
-            delayOpen(submenuOpenDelay);
+        const headerCellCount = gridDivRef.current?.getElementsByClassName("ag-header-cell-label")?.length;
+        if (headerCellCount < 2) {
+            // Don't resize grids until all the columns are visible
+            // as `autoSizeColumns` will fail silently in this case
+            needsAutoSize.current = true;
+            return;
         }
-    };
-    const handlePointerLeave = () => {
-        stopTimer();
-        if (!isOpen)
-            dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
-    };
-    const handleKeyDown = (e) => {
-        let handled = false;
-        switch (e.key) {
-            // LEFT key is bubbled up from submenu items
-            case Keys.LEFT:
-                if (isOpen) {
-                    menuItemRef?.current && menuItemRef.current.focus();
-                    toggleMenu(false);
-                    handled = true;
+        const skipHeader = sizeColumns === "auto-skip-headers" && !lodashEs.isEmpty(params.rowData);
+        if (sizeColumns === "auto" || skipHeader) {
+            const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current });
+            if (lodashEs.isEmpty(params.rowData)) {
+                if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
+                    hasSetContentSizeEmpty.current = true;
+                    params.onContentSize && params.onContentSize(result);
+                }
+            }
+            else {
+                if (result && !hasSetContentSize.current) {
+                    hasSetContentSize.current = true;
+                    params.onContentSize && params.onContentSize(result);
+                }
+            }
+        }
+        if (sizeColumns !== "none") {
+            sizeColumnsToFit();
+        }
+        needsAutoSize.current = false;
+    }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
+    const lastOwnerDocumentRef = React.useRef();
+    /**
+     * Auto-size windows that had deferred auto-size
+     */
+    useIntervalHook({
+        callback: () => {
+            // Check if window has been popped out and needs resize
+            const currentDocument = gridDivRef.current?.ownerDocument;
+            if (currentDocument !== lastOwnerDocumentRef.current) {
+                lastOwnerDocumentRef.current = currentDocument;
+                if (currentDocument) {
+                    needsAutoSize.current = true;
                 }
-                break;
-            // prevent browser from scrolling page to the right
-            case Keys.RIGHT:
-                if (!isOpen)
-                    handled = true;
-                break;
+            }
+            if (needsAutoSize.current) {
+                needsAutoSize.current = false;
+                setInitialContentSize();
+            }
+        },
+        timeoutMs: 1000,
+    });
+    const previousGridReady = React.useRef(gridReady);
+    React.useEffect(() => {
+        if (!previousGridReady.current && gridReady) {
+            previousGridReady.current = true;
+            setInitialContentSize();
         }
-        if (handled) {
-            e.preventDefault();
-            e.stopPropagation();
+    }, [gridReady, setInitialContentSize]);
+    /**
+     * On data load select the first row of the grid if required.
+     */
+    const hasSelectedFirstItem = React.useRef(false);
+    React.useEffect(() => {
+        if (!gridReady || hasSelectedFirstItem.current || !params.rowData || !externallySelectedItemsAreInSync)
+            return;
+        hasSelectedFirstItem.current = true;
+        if (isNotEmpty(params.rowData) && lodashEs.isEmpty(params.externalSelectedItems)) {
+            const firstRowId = getFirstRowId();
+            if (params.autoSelectFirstRow) {
+                selectRowsById([firstRowId]);
+            }
+            else {
+                focusByRowById(firstRowId);
+            }
         }
-    };
-    const handleItemKeyDown = (e) => {
-        if (!isHovering)
+    }, [
+        externallySelectedItemsAreInSync,
+        focusByRowById,
+        gridReady,
+        params.externalSelectedItems,
+        params.autoSelectFirstRow,
+        params.rowData,
+        selectRowsById,
+        getFirstRowId,
+    ]);
+    /**
+     * 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 clickSelectorCheckboxWhenContainingCellClicked = React.useCallback(({ event }) => {
+        if (!event)
+            return;
+        const input = event.target.querySelector("input");
+        input?.dispatchEvent(event);
+    }, []);
+    /**
+     * Ensure external selected items list is in sync with panel.
+     */
+    const synchroniseExternalStateToGridSelection = React.useCallback(({ api }) => {
+        if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
+            setExternallySelectedItemsAreInSync(true);
             return;
-        switch (e.key) {
-            case Keys.ENTER:
-            case Keys.SPACE:
-            case Keys.RIGHT:
-                openTrigger !== "none" && openMenu(FocusPositions.FIRST);
-                break;
         }
-    };
-    useItemEffect(isDisabled, menuItemRef, updateItems);
-    useMenuChange(onMenuChange, isOpen);
-    React.useEffect(() => () => clearTimeout(timeoutId.current), []);
-    React.useEffect(() => {
-        // Don't set focus when parent menu is closed, otherwise focus will be lost
-        // and onBlur event will be fired with relatedTarget setting as null.
-        if (isHovering && isParentOpen) {
-            menuItemRef?.current && menuItemRef.current.focus();
+        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 ||
+            isNotEmpty(lodashEs.xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))) {
+            setExternallySelectedItemsAreInSync(false);
+            params.setExternalSelectedItems([...selectedRows]);
         }
         else {
-            toggleMenu(false);
+            setExternallySelectedItemsAreInSync(true);
         }
-    }, [isHovering, isParentOpen, toggleMenu, menuItemRef]);
-    React.useEffect(() => {
-        setOpenSubmenuCount((count) => (isOpen ? count + 1 : Math.max(count - 1, 0)));
-    }, [setOpenSubmenuCount, isOpen]);
-    React.useImperativeHandle(instanceRef, () => ({
-        openMenu: (...args) => {
-            isParentOpen && openMenu(...args);
-        },
-        closeMenu: () => {
-            if (isOpen) {
-                menuItemRef?.current && menuItemRef.current.focus();
-                toggleMenu(false);
-            }
-        },
-    }));
-    const modifiers = React.useMemo(() => ({
-        open: isOpen,
-        hover: isHovering,
-        disabled: isDisabled,
-        submenu: true,
-    }), [isOpen, isHovering, isDisabled]);
-    const { ref: externalItemRef, className: itemClassName, ...restItemProps } = itemProps;
-    const mergedItemProps = mergeProps({
-        onPointerMove: handlePointerMove,
-        onPointerLeave: handlePointerLeave,
-        onKeyDown: handleItemKeyDown,
-        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 container = rootMenuRef?.current;
-        return isPortal && container ? ReactDOM.createPortal(menuList, container) : menuList;
+    }, [params, setExternallySelectedItemsAreInSync]);
+    /**
+     * Synchronise externally selected items to grid.
+     * If new ids are selected scroll them into view.
+     */
+    const synchroniseExternallySelectedItemsToGrid = React.useCallback(() => {
+        if (!gridReady)
+            return;
+        if (!params.externalSelectedItems) {
+            setExternallySelectedItemsAreInSync(true);
+            return;
+        }
+        const selectedIds = params.externalSelectedItems.map((row) => row.id);
+        const lastNewId = lodashEs.last(lodashEs.difference(selectedIds, lastSelectedIds.current));
+        if (lastNewId != null) {
+            ensureRowVisible(lastNewId);
+        }
+        lastSelectedIds.current = selectedIds;
+        selectRowsById(selectedIds);
+        setExternallySelectedItemsAreInSync(true);
+    }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
+    /**
+     * Combine grid and cell editable into one function
+     */
+    const combineEditables = (...editables) => (params) => {
+        const results = editables.map((editable) => fnOrVar(editable, params));
+        // If editable is not set anywhere then it's non-editable
+        if (results.every((v) => v == null))
+            return false;
+        // If any editable value is or returns false then it's non-editable
+        return !results.some((v) => v == false);
     };
-    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();
+    /**
+     * Synchronise externally selected items to grid on externalSelectedItems change
+     */
+    React.useEffect(synchroniseExternallySelectedItemsToGrid, [synchroniseExternallySelectedItemsToGrid]);
+    /**
+     * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
+     */
+    const columnDefs = React.useMemo(() => {
+        const adjustColDefs = params.columnDefs.map((colDef) => {
+            const colDefEditable = colDef.editable;
+            const editable = combineEditables(params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
+            return {
+                ...colDef,
+                editable,
+                cellClassRules: {
+                    ...colDef.cellClassRules,
+                    "GridCell-readonly": (ccp) => !editable(ccp),
+                },
+            };
+        });
+        return params.selectable
+            ? [
+                {
+                    colId: "selection",
+                    editable: false,
+                    minWidth: 42,
+                    maxWidth: 42,
+                    pinned: selectColumnPinned,
+                    headerComponentParams: {
+                        exportable: false,
+                    },
+                    checkboxSelection: true,
+                    headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
+                    suppressHeaderKeyboardEvent: (e) => {
+                        if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
+                            if (lodashEs.isEmpty(e.api.getSelectedRows())) {
+                                e.api.selectAllFiltered();
+                            }
+                            else {
+                                e.api.deselectAll();
+                            }
+                            return true;
+                        }
+                        return false;
+                    },
+                    onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
+                },
+                ...adjustColDefs,
+            ]
+            : adjustColDefs;
+    }, [
+        params.columnDefs,
+        params.selectable,
+        params.readOnly,
+        params.defaultColDef?.editable,
+        selectColumnPinned,
+        rowSelection,
+        clickSelectorCheckboxWhenContainingCellClicked,
+    ]);
+    /**
+     * When grid is ready set the apis to the grid context and sync selected items to grid.
+     */
+    const onGridReady = React.useCallback((event) => {
+        setApis(event.api, event.columnApi, dataTestId);
+        synchroniseExternallySelectedItemsToGrid();
+    }, [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid]);
+    /**
+     * When the grid is being initialized the data may be empty.
+     * This will resize columns when we have at least one row.
+     */
+    const previousRowDataLength = React.useRef(0);
+    const onRowDataChanged = React.useCallback(() => {
+        const length = params.rowData?.length ?? 0;
+        if (previousRowDataLength.current !== length) {
+            setInitialContentSize();
+            previousRowDataLength.current = length;
+        }
+        if (lastUpdatedDep.current === updatedDep || lodashEs.isEmpty(colIdsEdited.current))
+            return;
+        lastUpdatedDep.current = updatedDep;
+        // Don't update while there are spinners
+        if (!lodashEs.isEmpty(updatingCols()))
+            return;
+        const skipHeader = sizeColumns === "auto-skip-headers";
+        autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
+        colIdsEdited.current.clear();
+    }, [autoSizeColumns, params.rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
+    /**
+     * Show/hide no rows overlay when model changes.
+     */
+    const isShowingNoRowsOverlay = React.useRef(false);
+    const onModelUpdated = React.useCallback((event) => {
+        if (event.api.getDisplayedRowCount() === 0) {
+            if (!isShowingNoRowsOverlay.current) {
+                event.api.showNoRowsOverlay();
+                isShowingNoRowsOverlay.current = true;
             }
-            else {
-                e.stopPropagation();
-                e.preventDefault();
+        }
+        else {
+            if (isShowingNoRowsOverlay.current) {
+                event.api.hideOverlay();
+                isShowingNoRowsOverlay.current = false;
             }
+        }
+    }, []);
+    /**
+     * Force-refresh all selected rows to re-run class function, to update selection highlighting
+     */
+    const refreshSelectedRows = React.useCallback((event) => {
+        event.api.refreshCells({
+            force: true,
+            rowNodes: event.api.getSelectedNodes(),
+        });
+    }, []);
+    /**
+     * Make sure node is selected for editing and start edit
+     */
+    const startCellEditing = React.useCallback((event) => {
+        prePopupOps();
+        if (!event.node.isSelected()) {
+            event.node.setSelected(true, true);
+        }
+        // Cell already being edited, so don't re-edit until finished
+        if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
             return;
         }
-        const event = {
-            value,
-            syntheticEvent: e,
-        };
-        if (e.key !== undefined) {
-            const ke = e;
-            event.key = ke.key;
-            event.shiftKey = ke.shiftKey;
+        if (event.rowIndex !== null) {
+            event.api.startEditingCell({
+                rowIndex: event.rowIndex,
+                colKey: event.column.getColId(),
+            });
         }
-        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();
+    }, [checkUpdating, prePopupOps]);
+    /**
+     * Handle double click edit
+     */
+    const onCellDoubleClick = React.useCallback((event) => {
+        if (!invokeEditAction(event))
+            startCellEditing(event);
+    }, [startCellEditing]);
+    /**
+     * Handle single click edits
+     */
+    const onCellClicked = React.useCallback((event) => {
+        if (event.colDef?.cellRendererParams?.singleClickEdit) {
+            startCellEditing(event);
+        }
+    }, [startCellEditing]);
+    /**
+     * If cell has an edit action invoke it (if editable)
+     */
+    const invokeEditAction = (e) => {
+        const editAction = e.colDef?.cellRendererParams?.editAction;
+        if (!editAction)
+            return false;
+        const editable = fnOrVar(e.colDef?.editable, e);
+        if (editable) {
+            if (!e.node.isSelected()) {
+                e.node.setSelected(true, true);
+            }
+            editAction([e.data, ...e.api.getSelectedRows().filter((row) => row.id !== e.data.id)]);
         }
+        return true;
     };
     /**
-     * Keyboard events are triggered on up, otherwise subcomponents get spaces and enters typed in them
+     * Start editing on pressing Enter
      */
-    const handleKeyUp = (e) => {
-        if (!isHovering)
+    const onCellKeyPress = React.useCallback((e) => {
+        if (e.event.key === "Enter") {
+            if (!invokeEditAction(e))
+                startCellEditing(e);
+        }
+    }, [startCellEditing]);
+    /**
+     * Once the grid has auto-sized we want to run fit to fit the grid in its container,
+     * 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 adjustGroupColDef = (colDef) => ({
+            ...colDef,
+            children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
+        });
+        const adjustColDef = (colDef) => ({
+            ...colDef,
+            suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex,
+            sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
+        });
+        return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
+    }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
+    /**
+     * Set of colIds that need auto-sizing.
+     */
+    const colIdsEdited = React.useRef(new Set());
+    const lastUpdatedDep = React.useRef(updatedDep);
+    /**
+     * When cell editing has completed the colId as needing auto-sizing
+     */
+    React.useEffect(() => {
+        if (lastUpdatedDep.current === updatedDep)
             return;
-        switch (e.key) {
-            case Keys.ENTER:
-            case Keys.TAB:
-            case Keys.SPACE:
-                e.preventDefault();
-                e.stopPropagation();
-                if (isAnchor) {
-                    menuItemRef?.current && menuItemRef.current.click();
+        lastUpdatedDep.current = updatedDep;
+        const colIds = updatingCols();
+        // Updating possibly completed
+        if (lodashEs.isEmpty(colIds)) {
+            // Columns to resize?
+            if (!lodashEs.isEmpty(colIdsEdited.current)) {
+                const skipHeader = sizeColumns === "auto-skip-headers";
+                if (sizeColumns === "auto" || skipHeader) {
+                    lodashEs.defer(() => autoSizeColumns({
+                        skipHeader,
+                        userSizedColIds: userSizedColIds.current,
+                        colIds: colIdsEdited.current,
+                    }));
                 }
-                else {
-                    handleClick(e);
+                colIdsEdited.current.clear();
+            }
+        }
+        else {
+            // Updates not complete, add them to a list of columns needing resize
+            colIds.forEach((colId) => {
+                if (colId && !getColDef(colId)?.flex) {
+                    colIdsEdited.current.add(colId);
                 }
+            });
+        }
+    }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
+    /**
+     * Resize columns to fit if required on window/container resize
+     */
+    const onGridSizeChanged = React.useCallback(() => {
+        if (sizeColumns !== "none") {
+            sizeColumnsToFit();
+        }
+    }, [sizeColumns, sizeColumnsToFit]);
+    /**
+     * Set of column Id's that are prevented from auto-sizing as they are user set
+     */
+    const userSizedColIds = React.useRef(new Set());
+    /**
+     * Lock/unlock column width on user edit/reset.
+     */
+    const onColumnResized = React.useCallback((e) => {
+        const colId = e.column?.getColId();
+        if (colId == null)
+            return;
+        switch (e.source) {
+            case "uiColumnDragged":
+                userSizedColIds.current.add(colId);
+                break;
+            case "autosizeColumns":
+                userSizedColIds.current.delete(colId);
                 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 gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
+    // This is setting a ref in the GridContext so won't be triggering an update loop
+    setOnCellEditingComplete(params.onCellEditingComplete);
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: params.rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+                        setInitialContentSize();
+                    }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
+                        rowData: params.rowData,
+                        noRowsOverlayText: params.noRowsOverlayText,
+                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.postSortRows ?? postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu }) })] }));
+};
+
+const GridPopoverContext = React.createContext({
+    anchorRef: { current: null },
+    saving: false,
+    setSaving: () => { },
+    field: "",
+    value: null,
+    data: {},
+    selectedRows: [],
+    updateValue: async () => false,
+    formatValue: () => "! No gridPopoverContextProvider !",
+});
+const useGridPopoverContext = () => React.useContext(GridPopoverContext);
+
+const GridPopoverContextProvider = ({ props, children }) => {
+    const { getFilteredSelectedRows, updatingCells } = React.useContext(GridContext);
+    const anchorRef = React.useRef(props.eGridCell);
+    const hasSaved = React.useRef(false);
+    const [saving, setSaving] = React.useState(false);
+    const { colDef } = props;
+    const { cellEditorParams } = colDef;
+    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 updateValue = React.useCallback(async (saveFn, tabDirection) => {
+        if (hasSaved.current)
+            return true;
+        hasSaved.current = true;
+        return saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
+    }, [field, saving, selectedRows, updatingCells]);
+    return (jsxRuntime.jsx(GridPopoverContext.Provider, { value: {
+            anchorRef: anchorRef,
+            saving,
+            setSaving,
+            selectedRows,
+            field,
+            data: props.data,
+            value: props.value,
+            updateValue,
+            formatValue: props.formatValue,
+        }, children: children }));
+};
+
+const GridCellMultiSelectClassRules = {
+    "ag-selected-for-edit": (params) => {
+        const { api, node, colDef } = params;
+        const cep = colDef.cellEditorSelector
+            ? colDef.cellEditorSelector(params)?.params
+            : colDef.cellEditorParams;
+        return (cep?.multiEdit &&
+            api
+                .getSelectedNodes()
+                .map((row) => row.id)
+                .includes(node.id) &&
+            api.getEditingCells().some((cell) => cell.column.getColDef() === colDef));
+    },
+};
+
+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 GridCellRenderer = (props) => {
+    const { checkUpdating } = React.useContext(GridUpdatingContext);
+    const colDef = props.colDef;
+    const rendererParams = colDef.cellRendererParams;
+    const warningFn = rendererParams?.warning;
+    let warningText = warningFn ? warningFn(props) : undefined;
+    const infoFn = rendererParams?.info;
+    let infoText = infoFn ? infoFn(props) : undefined;
+    if (Array.isArray(warningText))
+        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 }))] }));
+};
+const suppressCellKeyboardEvents = (e) => {
+    const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
+    const exec = shortcutKeys[e.event.key];
+    if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
+        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);
 };
-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 generateFilterGetter = (field, filterValueGetter, valueFormatter) => {
+    if (filterValueGetter)
+        return filterValueGetter;
+    // aggrid will default to valueGetter
+    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 += " -";
+        // Search by raw value as well as formatted
+        const gotValue = ["string", "number"].includes(typeof value) ? value : undefined;
+        return (formattedValue + (gotValue != null && formattedValue != gotValue ? " " + gotValue : "")) //
+            .replaceAll(/\s+/g, " ")
+            .trim();
+    };
 };
-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 }) }));
+/*
+ * All cells should use this.
+ */
+const GridCell = (props, custom) => {
+    // Generate a default filter value getter which uses the formatted value plus
+    // the editable value if it's a string and different from the formatted value.
+    // This is so that e.g. bearings can be searched for by DMS or raw number.
+    const valueFormatter = props.valueFormatter;
+    const filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter, valueFormatter);
+    const exportable = props.exportable;
+    // Can't leave this here ag-grid will complain
+    delete props.exportable;
+    return {
+        colId: props.field ?? props.field,
+        headerTooltip: props.headerName,
+        sortable: !!(props?.field || props?.valueGetter),
+        resizable: true,
+        editable: props.editable ?? false,
+        ...(custom?.editor && {
+            cellClassRules: GridCellMultiSelectClassRules,
+            editable: props.editable ?? true,
+            cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
+        }),
+        suppressKeyboardEvent: suppressCellKeyboardEvents,
+        ...(custom?.editorParams && {
+            cellEditorParams: {
+                ...custom.editorParams,
+                multiEdit: custom.multiEdit,
+                preventAutoEdit: custom.preventAutoEdit ?? false,
+            },
+        }),
+        // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
+        filterValueGetter,
+        // Default value formatter, otherwise react freaks out on objects
+        valueFormatter: (params) => {
+            if (params.value == null)
+                return "–";
+            const types = ["number", "boolean", "string"];
+            if (types.includes(typeof params.value))
+                return `${params.value}`;
+            else
+                return JSON.stringify(params.value);
+        },
+        ...props,
+        cellRenderer: GridCellRenderer,
+        cellRendererParams: {
+            originalCellRenderer: props.cellRenderer,
+            ...props.cellRendererParams,
+        },
+        headerComponentParams: {
+            exportable,
+            ...props.headerComponentParams,
+        },
+    };
 };
-const MenuDivider = React.memo(React.forwardRef(MenuDividerFr));
+const GenericCellEditorComponentWrapper = (editor) => {
+    const obj = { 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 })] }));
+    });
+};
 
-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 GridCellFillerColId = "gridCellFiller";
+const isGridCellFiller = (col) => col.colId === GridCellFillerColId;
+const GridCellFiller = () => ({
+    colId: GridCellFillerColId,
+    headerName: "",
+    flex: 1,
+});
 
-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 Editor = (props) => ({
+    component: GenericCellEditorComponentWrapper(props.editor),
+    params: { ...props.editorParams, multiEdit: props.multiEdit },
+});
+/**
+ * Used to choose between cell editors based in data.
+ */
+const GridCellMultiEditor = (props, cellEditorSelector) => GridCell({
+    cellClassRules: GridCellMultiSelectClassRules,
+    cellEditorSelector,
+    editable: props.editable ?? true,
+    ...props,
+});
 
-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 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 GridFilterColumnsToggle = ({ saveState = true }) => {
     const [loaded, setLoaded] = React.useState(false);
@@ -4527,6 +4569,16 @@ const GridContextProvider = (props) => {
     const prePopupOps = React.useCallback(() => {
         prePopupFocusedCell.current = gridApi?.getFocusedCell() ?? undefined;
     }, [gridApi]);
+    /**
+     * After a popup refocus the cell.
+     */
+    const postPopupOps = React.useCallback(() => {
+        if (!gridApi)
+            return;
+        if (prePopupFocusedCell.current) {
+            gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+        }
+    }, [gridApi]);
     /**
      * Get all row id's in grid.
      */
@@ -4899,6 +4951,7 @@ const GridContextProvider = (props) => {
             setInvisibleColumnIds,
             gridReady,
             prePopupOps,
+            postPopupOps,
             setApis,
             setQuickFilter,
             selectRowsById,
@@ -28628,6 +28681,7 @@ exports.typeOtherTextArea = typeOtherTextArea;
 exports.useDeferredPromise = useDeferredPromise;
 exports.useGenerateOrDefaultId = useGenerateOrDefaultId;
 exports.useGridContext = useGridContext;
+exports.useGridContextMenu = useGridContextMenu;
 exports.useGridFilter = useGridFilter;
 exports.useGridPopoverContext = useGridPopoverContext;
 exports.useGridPopoverHook = useGridPopoverHook;