@linzjs/step-ag-grid 1.4.5 → 1.4.7

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

@@ -1,10 +1,9 @@
-import { createContext, useRef, useContext, useCallback, useState, useEffect, useMemo, useLayoutEffect, memo, forwardRef, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+import { createContext, useRef, useContext, useCallback, useState, useEffect, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { castArray, remove, flatten, isEmpty, delay, sortBy, last, difference, xorBy } from 'lodash-es';
+import { castArray, remove, flatten, isEmpty, delay, sortBy, last, difference, xorBy, findIndex } from 'lodash-es';
 import { AgGridReact } from 'ag-grid-react';
 import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput } from '@linzjs/lui';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
-import { object, bool, number, oneOf, string, oneOfType, exact, func, element, node, shape, any } from 'prop-types';
 import { useTransition } from 'react-transition-state';
 import debounce from 'debounce-promise';
 import { v4 } from 'uuid';
@@ -468,9 +467,11 @@ var GridContextProvider = function (props) {
                                             }
                                             // This is needed to trigger postSortRowsHook
                                             gridApi.refreshClientSideRowModel();
-                                            stopEditing();
                                         }
-                                        setSaving && setSaving(false);
+                                        else {
+                                            // Don't set saving if ok as the form has already closed
+                                            setSaving && setSaving(false);
+                                        }
                                         return [2 /*return*/, ok];
                                 }
                             });
@@ -901,7 +902,7 @@ var GridCell = function (props) {
         cellEditor: GenericCellEditorComponent
     })), props), { cellRendererParams: __assign({ originalCellRender: props.cellRenderer }, props.cellRendererParams) });
 };
-var GenericCellEditorComponent = function (props) {
+var GenericCellEditorComponentFr = function (props, _) {
     var _a, _b, _c;
     var _d = useContext(GridContext), updatingCells = _d.updatingCells, getSelectedRows = _d.getSelectedRows;
     var colDef = props.colDef, data = props.data;
@@ -930,7 +931,8 @@ var GenericCellEditorComponent = function (props) {
     if (cellEditorParams == null)
         return jsx(Fragment, {});
     return (jsxs(Fragment, { children: [jsx("div", { children: colDef.cellRenderer ? jsx(colDef.cellRenderer, __assign({}, props, { saving: saving })) : props.value }), (cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.form) && (jsx(cellEditorParams.form, { cellEditorParams: props, updateValue: updateValue, saving: saving, formProps: formProps, value: value, field: field, selectedRows: selectedRows }))] }));
-};
+};
+var GenericCellEditorComponent = forwardRef(GenericCellEditorComponentFr);
 
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
@@ -983,10 +985,6 @@ var setRef = function (ref, instance) {
 };
 var useCombinedRef = function (refA, refB) {
     return useMemo(function () {
-        if (!refA)
-            return refB;
-        if (!refB)
-            return refA;
         return function (instance) {
             setRef(refA, instance);
             setRef(refB, instance);
@@ -1004,7 +1002,6 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" &&
     ? useLayoutEffect
     : useEffect;
 
-// @ts-nocheck
 var menuContainerClass = "szh-menu-container";
 var menuClass = "szh-menu";
 var menuButtonClass = "szh-menu-button";
@@ -1015,13 +1012,23 @@ var menuHeaderClass = "header";
 var menuGroupClass = "group";
 var subMenuClass = "submenu";
 var radioGroupClass = "radio-group";
-var HoverItemContext = createContext();
-var MenuListItemContext = createContext({});
+var HoverItemContext = createContext(undefined);
+var MenuListItemContext = createContext({
+    dispatch: function () { },
+    updateItems: function () { },
+    setOpenSubmenuCount: function () { return 0; }
+});
 var MenuListContext = createContext({});
-var EventHandlersContext = createContext({});
+var EventHandlersContext = createContext({
+    handleClick: function () { }
+});
 var RadioGroupContext = createContext({});
+// FIXME hacking a default context in here is probably bad
 var SettingsContext = createContext({});
-var ItemSettingsContext = createContext({});
+var ItemSettingsContext = createContext({
+    submenuOpenDelay: 0,
+    submenuCloseDelay: 0
+});
 var Keys = Object.freeze({
     ENTER: "Enter",
     ESC: "Escape",
@@ -1060,10 +1067,8 @@ var MenuStateMap = Object.freeze({
     exited: "closed"
 });
 
-// @ts-nocheck
 var isMenuOpen = function (state) { return !!state && state[0] === "o"; };
 var batchedUpdates = unstable_batchedUpdates || (function (callback) { return callback(); });
-var values = Object.values || (function (obj) { return Object.keys(obj).map(function (key) { return obj[key]; }); });
 var floatEqual = function (a, b, diff) {
     if (diff === void 0) { diff = 0.0001; }
     return Math.abs(a - b) < diff;
@@ -1071,10 +1076,11 @@ var floatEqual = function (a, b, diff) {
 var getTransition = function (transition, name) {
     return transition === true || !!(transition && transition[name]);
 };
-var safeCall = function (fn, arg) { return (typeof fn === "function" ? fn(arg) : fn); };
+function safeCall(fn, arg) {
+    return typeof fn === "function" ? fn(arg) : fn;
+}
 var internalKey = "_szhsinMenu";
 var getName = function (component) { return component[internalKey]; };
-var defineName = function (name, component) { return Object.defineProperty(component, internalKey, { value: name }); };
 var mergeProps = function (target, source) {
     source &&
         Object.keys(source).forEach(function (key) {
@@ -1097,7 +1103,7 @@ var mergeProps = function (target, source) {
     return target;
 };
 var parsePadding = function (paddingStr) {
-    if (typeof paddingStr !== "string")
+    if (paddingStr == null)
         return { top: 0, right: 0, bottom: 0, left: 0 };
     var padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
     var top = !isNaN(padding[0]) ? padding[0] : 0;
@@ -1111,15 +1117,19 @@ var parsePadding = function (paddingStr) {
 };
 // Adapted from https://github.com/popperjs/popper-core/tree/v2.9.1/src/dom-utils
 var getScrollAncestor = function (node) {
-    var thisWindow = node.ownerDocument.defaultView;
+    var _a, _b, _c;
+    var thisWindow = (_b = ((_a = node === null || node === void 0 ? void 0 : node.ownerDocument) !== null && _a !== void 0 ? _a : document).defaultView) !== null && _b !== void 0 ? _b : window;
     while (node) {
         node = node.parentNode;
-        if (!node || node === thisWindow.document.body)
-            return;
-        var _a = thisWindow.getComputedStyle(node), overflow = _a.overflow, overflowX = _a.overflowX, overflowY = _a.overflowY;
-        if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX))
-            return node;
+        if (!node || node === ((_c = thisWindow === null || thisWindow === void 0 ? void 0 : thisWindow.document) === null || _c === void 0 ? void 0 : _c.body))
+            return null;
+        if (node instanceof Element) {
+            var _d = thisWindow.getComputedStyle(node), overflow = _d.overflow, overflowX = _d.overflowX, overflowY = _d.overflowY;
+            if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX))
+                return node;
+        }
     }
+    return null;
 };
 function commonProps(isDisabled, isHovering) {
     return {
@@ -1127,54 +1137,18 @@ function commonProps(isDisabled, isHovering) {
         tabIndex: isHovering ? 0 : -1
     };
 }
-function indexOfNode(nodeList, node) {
-    for (var i = 0; i < nodeList.length; i++) {
-        if (nodeList[i] === node)
-            return i;
-    }
-    return -1;
-}
-
-var stylePropTypes = function (name) {
-    var _a;
-    return (_a = {},
-        _a[name ? "".concat(name, "ClassName") : "className"] = oneOfType([string, func]),
-        _a);
-};
-// Menu, SubMenu and ControlledMenu
-var menuPropTypes = __assign(__assign(__assign({ className: string }, stylePropTypes("menu")), stylePropTypes("arrow")), { menuStyle: object, arrowStyle: object, arrow: bool, setDownOverflow: bool, offsetX: number, offsetY: number, align: oneOf(["start", "center", "end"]), direction: oneOf(["left", "right", "top", "bottom"]), position: oneOf(["auto", "anchor", "initial"]), overflow: oneOf(["auto", "visible", "hidden"]) });
-// Menu and ControlledMenu
-var rootMenuPropTypes = __assign(__assign({}, menuPropTypes), { containerProps: object, initialMounted: bool, unmountOnClose: bool, transition: oneOfType([
-        bool,
-        exact({
-            open: bool,
-            close: bool,
-            item: bool
-        }),
-    ]), transitionTimeout: number, boundingBoxRef: object, boundingBoxPadding: string, reposition: oneOf(["auto", "initial"]), repositionFlag: oneOfType([string, number]), viewScroll: oneOf(["auto", "close", "initial"]), submenuOpenDelay: number, submenuCloseDelay: number, portal: oneOfType([
-        bool,
-        exact({
-            target: object,
-            stablePosition: bool
-        }),
-    ]), theming: string, onItemClick: func });
-// Menu and SubMenu
-var uncontrolledMenuPropTypes = {
-    instanceRef: oneOfType([object, func]),
-    onMenuChange: func
-};
+var indexOfNode = function (nodeList, node) { return findIndex(nodeList, node); };
 
 var withHovering = function (name, WrappedComponent) {
     var Component = memo(WrappedComponent);
     var WithHovering = forwardRef(function (props, ref) {
-        var itemRef = useRef(null);
-        return (jsx(Component, __assign({}, props, { itemRef: itemRef, externalRef: ref, isHovering: useContext(HoverItemContext) === itemRef.current })));
+        var menuItemRef = useRef(null);
+        return (jsx(Component, __assign({}, props, { menuItemRef: menuItemRef, externalRef: ref, isHovering: useContext(HoverItemContext) === menuItemRef.current })));
     });
     WithHovering.displayName = "WithHovering(".concat(name, ")");
     return WithHovering;
 };
 
-// @ts-nocheck
 var useItems = function (menuRef, focusRef) {
     var _a = useState(), hoverItem = _a[0], setHoverItem = _a[1];
     var stateRef = useRef({
@@ -1184,6 +1158,7 @@ var useItems = function (menuRef, focusRef) {
     });
     var mutableState = stateRef.current;
     var updateItems = useCallback(function (item, isMounted) {
+        var _a;
         var items = mutableState.items;
         if (!item) {
             mutableState.items = [];
@@ -1196,8 +1171,8 @@ var useItems = function (menuRef, focusRef) {
             if (index > -1) {
                 items.splice(index, 1);
                 if (item.contains(document.activeElement)) {
-                    focusRef.current.focus();
-                    setHoverItem();
+                    (_a = focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    setHoverItem(undefined);
                 }
             }
         }
@@ -1234,6 +1209,8 @@ var useItems = function (menuRef, focusRef) {
                 newItem = items[index];
                 break;
             case HoverActionTypes.SET_INDEX:
+                if (typeof nextIndex !== "number")
+                    break;
                 sortItems();
                 index = nextIndex;
                 newItem = items[index];
@@ -1270,32 +1247,33 @@ var useItems = function (menuRef, focusRef) {
     return { hoverItem: hoverItem, dispatch: dispatch, updateItems: updateItems };
 };
 
-var useItemEffect = function (isDisabled, itemRef, updateItems) {
+var useItemEffect = function (isDisabled, menuItemRef, updateItems) {
     useIsomorphicLayoutEffect(function () {
+        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: ".concat(itemRef.current.outerHTML));
+            throw new Error("[React-Menu] This menu item or submenu should be rendered under a menu: ".concat(menuItemRef.current.outerHTML));
         }
         if (isDisabled)
             return;
-        var item = itemRef.current;
+        var item = menuItemRef.current;
         updateItems(item, true);
         return function () {
             updateItems(item);
         };
-    }, [isDisabled, itemRef, updateItems]);
+    }, [isDisabled, menuItemRef, updateItems]);
 };
 
-// @ts-nocheck
 // This hook includes some common stateful logic in MenuItem and FocusableItem
-var useItemState = function (itemRef, focusRef, isHovering, isDisabled) {
+var useItemState = function (menuItemRef, focusRef, isHovering, isDisabled) {
     var submenuCloseDelay = useContext(ItemSettingsContext).submenuCloseDelay;
     var _a = useContext(MenuListItemContext), isParentOpen = _a.isParentOpen, isSubmenuOpen = _a.isSubmenuOpen, dispatch = _a.dispatch, updateItems = _a.updateItems;
-    var timeoutId = useRef(0);
+    var timeoutId = useRef();
     var setHover = function () {
-        !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
+        !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current, 0);
     };
     var unsetHover = function () {
-        !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current);
+        !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current, 0);
     };
     var onBlur = function (e) {
         // Focus has moved out of the entire item
@@ -1307,7 +1285,7 @@ var useItemState = function (itemRef, focusRef, isHovering, isDisabled) {
         if (isSubmenuOpen) {
             if (!timeoutId.current)
                 timeoutId.current = setTimeout(function () {
-                    timeoutId.current = 0;
+                    timeoutId.current = undefined;
                     setHover();
                 }, submenuCloseDelay);
         }
@@ -1318,17 +1296,17 @@ var useItemState = function (itemRef, focusRef, isHovering, isDisabled) {
     var onPointerLeave = function (_, keepHover) {
         if (timeoutId.current) {
             clearTimeout(timeoutId.current);
-            timeoutId.current = 0;
+            timeoutId.current = undefined;
         }
         !keepHover && unsetHover();
     };
-    useItemEffect(isDisabled, itemRef, updateItems);
+    useItemEffect(isDisabled, menuItemRef, updateItems);
     useEffect(function () { return function () { return clearTimeout(timeoutId.current); }; }, []);
     useEffect(function () {
         // 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 === null || focusRef === void 0 ? void 0 : focusRef.current) && focusRef.current.focus();
         }
     }, [focusRef, isHovering, isParentOpen]);
     return {
@@ -1339,16 +1317,18 @@ var useItemState = function (itemRef, focusRef, isHovering, isDisabled) {
     };
 };
 
-// @ts-nocheck
 var useMenuChange = function (onMenuChange, isOpen) {
     var prevOpen = useRef(isOpen);
     useEffect(function () {
-        if (prevOpen.current !== isOpen)
-            safeCall(onMenuChange, { open: isOpen });
+        if (onMenuChange && prevOpen.current !== isOpen)
+            safeCall(onMenuChange, { open: !!isOpen });
         prevOpen.current = isOpen;
     }, [onMenuChange, isOpen]);
 };
 
+/**
+ * A custom Hook which helps manage the states of `ControlledMenu`.
+ */
 var useMenuState = function (props) {
     var _a = props !== null && props !== void 0 ? props : {
         transition: false
@@ -1373,18 +1353,17 @@ var useMenuStateAndFocus = function (options) {
     return [__assign({ menuItemFocus: menuItemFocus }, menuProps), toggleMenu, openMenu];
 };
 
-var MenuButton = defineName("MenuButton", forwardRef(function MenuButton(_a, ref) {
+var MenuButton = forwardRef(function MenuButton(_a, ref) {
     var className = _a.className, isOpen = _a.isOpen, disabled = _a.disabled, children = _a.children, restProps = __rest(_a, ["className", "isOpen", "disabled", "children"]);
     var modifiers = useMemo(function () { return ({ open: isOpen }); }, [isOpen]);
     return (jsx("button", __assign({ "aria-haspopup": true, "aria-expanded": isOpen, "aria-disabled": disabled || undefined, type: "button", disabled: disabled }, restProps, { ref: ref, className: useBEM({ block: menuButtonClass, modifiers: modifiers, className: className }) }, { children: children })));
-}));
-MenuButton.propTypes = __assign(__assign({}, stylePropTypes()), { isOpen: bool, disabled: bool });
+});
 
-// @ts-nocheck
 var getPositionHelpers = function (containerRef, menuRef, menuScroll, boundingBoxPadding) {
+    var _a, _b, _c;
     var menuRect = menuRef.current.getBoundingClientRect();
-    var containerRect = containerRef.current.getBoundingClientRect();
-    var thisWindow = containerRef.current.ownerDocument.defaultView;
+    var thisWindow = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.defaultView) !== null && _b !== void 0 ? _b : window;
+    var containerRect = ((_c = containerRef.current) !== null && _c !== void 0 ? _c : thisWindow.document.body).getBoundingClientRect();
     var boundingRect = menuScroll === window || menuScroll === thisWindow
         ? {
             left: 0,
@@ -1399,7 +1378,9 @@ var getPositionHelpers = function (containerRef, menuRef, menuScroll, boundingBo
     var getLeftOverflow = function (x) { return x + containerRect.left - boundingRect.left - padding.left; };
     var getRightOverflow = function (x) { return x + containerRect.left + menuRect.width - boundingRect.right + padding.right; };
     var getTopOverflow = function (y) { return y + containerRect.top - boundingRect.top - padding.top; };
-    var getBottomOverflow = function (y) { return y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom; };
+    var getBottomOverflow = function (y) {
+        return y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
+    };
     var confineHorizontally = function (x) {
         // If menu overflows to the left side, adjust x to have the menu contained within the viewport
         // and there is no need to check the right side;
@@ -1413,7 +1394,7 @@ var getPositionHelpers = function (containerRef, menuRef, menuScroll, boundingBo
             if (rightOverflow > 0) {
                 x -= rightOverflow;
                 // Check again to make sure menu doesn't overflow to the left
-                // because it may go off screen and cannot be scroll into view.
+                // because it may go off-screen and cannot be scrolled into view.
                 leftOverflow = getLeftOverflow(x);
                 if (leftOverflow < 0)
                     x -= leftOverflow;
@@ -1452,7 +1433,6 @@ var getPositionHelpers = function (containerRef, menuRef, menuScroll, boundingBo
     };
 };
 
-// @ts-nocheck
 var positionContextMenu = function (_a) {
     var positionHelpers = _a.positionHelpers, anchorPoint = _a.anchorPoint;
     var menuRect = positionHelpers.menuRect, containerRect = positionHelpers.containerRect, getLeftOverflow = positionHelpers.getLeftOverflow, getRightOverflow = positionHelpers.getRightOverflow, getTopOverflow = positionHelpers.getTopOverflow, getBottomOverflow = positionHelpers.getBottomOverflow, confineHorizontally = positionHelpers.confineHorizontally, confineVertically = positionHelpers.confineVertically;
@@ -1489,19 +1469,16 @@ var positionContextMenu = function (_a) {
     return { x: x, y: y, computedDirection: computedDirection };
 };
 
-// @ts-nocheck
-var placeArrowVertical = function (_a) {
-    var arrowRef = _a.arrowRef, menuY = _a.menuY, anchorRect = _a.anchorRect, containerRect = _a.containerRect, menuRect = _a.menuRect;
-    var y = anchorRect.top - containerRect.top - menuY + anchorRect.height / 2;
-    var offset = arrowRef.current.offsetHeight * 1.25;
+var placeArrowVertical = function (p) {
+    var y = p.anchorRect.top - p.containerRect.top - p.menuY + p.anchorRect.height / 2;
+    var offset = p.arrowRef.current ? p.arrowRef.current.offsetHeight * 1.25 : 0;
     y = Math.max(offset, y);
-    y = Math.min(y, menuRect.height - offset);
+    y = Math.min(y, p.menuRect.height - offset);
     return y;
 };
 
-// @ts-nocheck
-var placeLeftorRight = function (_a) {
-    var anchorRect = _a.anchorRect, containerRect = _a.containerRect, menuRect = _a.menuRect, placeLeftorRightY = _a.placeLeftorRightY, placeLeftX = _a.placeLeftX, placeRightX = _a.placeRightX, getLeftOverflow = _a.getLeftOverflow, getRightOverflow = _a.getRightOverflow, confineHorizontally = _a.confineHorizontally, confineVertically = _a.confineVertically, arrowRef = _a.arrowRef, arrow = _a.arrow, direction = _a.direction, position = _a.position;
+var placeLeftorRight = function (props) {
+    var anchorRect = props.anchorRect, containerRect = props.containerRect, menuRect = props.menuRect, placeLeftorRightY = props.placeLeftorRightY, placeLeftX = props.placeLeftX, placeRightX = props.placeRightX, getLeftOverflow = props.getLeftOverflow, getRightOverflow = props.getRightOverflow, confineHorizontally = props.confineHorizontally, confineVertically = props.confineVertically, arrowRef = props.arrowRef, arrow = props.arrow, direction = props.direction, position = props.position;
     var computedDirection = direction;
     var y = placeLeftorRightY;
     if (position !== "initial") {
@@ -1558,19 +1535,16 @@ var placeLeftorRight = function (_a) {
     return { arrowY: arrowY, x: x, y: y, computedDirection: computedDirection };
 };
 
-// @ts-nocheck
-var placeArrowHorizontal = function (_a) {
-    var arrowRef = _a.arrowRef, menuX = _a.menuX, anchorRect = _a.anchorRect, containerRect = _a.containerRect, menuRect = _a.menuRect;
-    var x = anchorRect.left - containerRect.left - menuX + anchorRect.width / 2;
-    var offset = arrowRef.current.offsetWidth * 1.25;
+var placeArrowHorizontal = function (p) {
+    var x = p.anchorRect.left - p.containerRect.left - p.menuX + p.anchorRect.width / 2;
+    var offset = p.arrowRef.current ? p.arrowRef.current.offsetWidth * 1.25 : 0;
     x = Math.max(offset, x);
-    x = Math.min(x, menuRect.width - offset);
+    x = Math.min(x, p.menuRect.width - offset);
     return x;
 };
 
-// @ts-nocheck
-var placeToporBottom = function (_a) {
-    var anchorRect = _a.anchorRect, containerRect = _a.containerRect, menuRect = _a.menuRect, placeToporBottomX = _a.placeToporBottomX, placeTopY = _a.placeTopY, placeBottomY = _a.placeBottomY, getTopOverflow = _a.getTopOverflow, getBottomOverflow = _a.getBottomOverflow, confineHorizontally = _a.confineHorizontally, confineVertically = _a.confineVertically, arrowRef = _a.arrowRef, arrow = _a.arrow, direction = _a.direction, position = _a.position;
+var placeToporBottom = function (props) {
+    var anchorRect = props.anchorRect, containerRect = props.containerRect, menuRect = props.menuRect, placeToporBottomX = props.placeToporBottomX, placeTopY = props.placeTopY, placeBottomY = props.placeBottomY, getTopOverflow = props.getTopOverflow, getBottomOverflow = props.getBottomOverflow, confineHorizontally = props.confineHorizontally, confineVertically = props.confineVertically, arrowRef = props.arrowRef, arrow = props.arrow, direction = props.direction, position = props.position;
     // make sure invalid direction is treated as 'bottom'
     var computedDirection = direction === "top" ? "top" : "bottom";
     var x = placeToporBottomX;
@@ -1628,12 +1602,12 @@ var placeToporBottom = function (_a) {
     return { arrowX: arrowX, x: x, y: y, computedDirection: computedDirection };
 };
 
-var positionMenu = function (_a) {
-    var arrow = _a.arrow, align = _a.align, direction = _a.direction, offsetX = _a.offsetX, offsetY = _a.offsetY, position = _a.position, anchorRef = _a.anchorRef, arrowRef = _a.arrowRef, positionHelpers = _a.positionHelpers;
+var positionMenu = function (props) {
+    var arrow = props.arrow, align = props.align, direction = props.direction, offsetX = props.offsetX, offsetY = props.offsetY, position = props.position, anchorRef = props.anchorRef, arrowRef = props.arrowRef, positionHelpers = props.positionHelpers;
     var menuRect = positionHelpers.menuRect, containerRect = positionHelpers.containerRect;
     var horizontalOffset = offsetX;
     var verticalOffset = offsetY;
-    if (arrow) {
+    if (arrow && arrowRef.current) {
         if (direction === "left" || direction === "right") {
             horizontalOffset += arrowRef.current.offsetWidth;
         }
@@ -1641,7 +1615,9 @@ var positionMenu = function (_a) {
             verticalOffset += arrowRef.current.offsetHeight;
         }
     }
-    var anchorRect = anchorRef.current.getBoundingClientRect();
+    var anchorRect = anchorRef.current
+        ? anchorRef.current.getBoundingClientRect()
+        : { left: 0, right: 0, top: 200, bottom: 200, width: 200, height: 200 };
     var placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset;
     var placeRightX = anchorRect.right - containerRect.left + horizontalOffset;
     var placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;
@@ -1676,16 +1652,16 @@ var positionMenu = function (_a) {
 var MenuList = function (_a) {
     var ariaLabel = _a.ariaLabel, menuClassName = _a.menuClassName, menuStyle = _a.menuStyle, arrowClassName = _a.arrowClassName, arrowStyle = _a.arrowStyle, anchorPoint = _a.anchorPoint, anchorRef = _a.anchorRef, containerRef = _a.containerRef, externalRef = _a.externalRef, parentScrollingRef = _a.parentScrollingRef, arrow = _a.arrow, _b = _a.align, align = _b === void 0 ? "start" : _b, _c = _a.direction, direction = _c === void 0 ? "bottom" : _c, _d = _a.position, position = _d === void 0 ? "auto" : _d, _e = _a.overflow, overflow = _e === void 0 ? "visible" : _e, setDownOverflow = _a.setDownOverflow, repositionFlag = _a.repositionFlag, _f = _a.captureFocus, captureFocus = _f === void 0 ? true : _f, state = _a.state, endTransition = _a.endTransition, isDisabled = _a.isDisabled, menuItemFocus = _a.menuItemFocus, _g = _a.offsetX, offsetX = _g === void 0 ? 0 : _g, _h = _a.offsetY, offsetY = _h === void 0 ? 0 : _h, children = _a.children, onClose = _a.onClose, restProps = __rest(_a, ["ariaLabel", "menuClassName", "menuStyle", "arrowClassName", "arrowStyle", "anchorPoint", "anchorRef", "containerRef", "externalRef", "parentScrollingRef", "arrow", "align", "direction", "position", "overflow", "setDownOverflow", "repositionFlag", "captureFocus", "state", "endTransition", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"]);
     var _j = useState({ x: 0, y: 0 }), menuPosition = _j[0], setMenuPosition = _j[1];
-    var _k = useState({}), arrowPosition = _k[0], setArrowPosition = _k[1];
+    var _k = useState({ x: 0, y: 0 }), arrowPosition = _k[0], setArrowPosition = _k[1];
     var _l = useState(), overflowData = _l[0], setOverflowData = _l[1];
     var _m = useState(direction), expandedDirection = _m[0], setExpandedDirection = _m[1];
     var _o = useState(0), openSubmenuCount = _o[0], setOpenSubmenuCount = _o[1];
     var _p = useReducer(function (c) { return c + 1; }, 1), reposSubmenu = _p[0], forceReposSubmenu = _p[1];
     var _q = useContext(SettingsContext), transition = _q.transition, boundingBoxRef = _q.boundingBoxRef, boundingBoxPadding = _q.boundingBoxPadding, rootMenuRef = _q.rootMenuRef, rootAnchorRef = _q.rootAnchorRef, scrollNodesRef = _q.scrollNodesRef, reposition = _q.reposition, viewScroll = _q.viewScroll;
     var reposFlag = useContext(MenuListContext).reposSubmenu || repositionFlag;
-    var menuRef = useRef(null);
-    var focusRef = useRef();
-    var arrowRef = useRef();
+    var menuRef = useRef({});
+    var focusRef = useRef(null);
+    var arrowRef = useRef(null);
     var prevOpen = useRef(false);
     var latestMenuSize = useRef({ width: 0, height: 0 });
     var latestHandlePosition = useRef(function () { });
@@ -1695,30 +1671,33 @@ var MenuList = function (_a) {
     var closeTransition = getTransition(transition, "close");
     var scrollNodes = scrollNodesRef.current;
     var onKeyDown = function (e) {
-        var isTextInputTarget = e.target.nodeName === "TEXTAREA" || (e.target.nodeName === "INPUT" && e.target.getAttribute("type") === "text");
+        var elementTarget = e.target instanceof HTMLElement ? e.target : null;
+        var isTextInputTarget = elementTarget &&
+            (elementTarget.nodeName === "TEXTAREA" ||
+                (elementTarget.nodeName === "INPUT" && elementTarget.getAttribute("type") === "text"));
         switch (e.key) {
             case Keys.HOME:
                 // Don't eat home/end events on inputs
                 if (isTextInputTarget)
                     return;
-                dispatch(HoverActionTypes.FIRST);
+                dispatch(HoverActionTypes.FIRST, null, 0);
                 break;
             case Keys.END:
                 // Don't eat home/end events on inputs
                 if (isTextInputTarget)
                     return;
-                dispatch(HoverActionTypes.LAST);
+                dispatch(HoverActionTypes.LAST, null, 0);
                 break;
             case Keys.UP:
-                dispatch(HoverActionTypes.DECREASE, hoverItem);
+                dispatch(HoverActionTypes.DECREASE, hoverItem, 0);
                 break;
             case Keys.DOWN:
-                dispatch(HoverActionTypes.INCREASE, hoverItem);
+                dispatch(HoverActionTypes.INCREASE, hoverItem, 0);
                 break;
             // prevent browser from scrolling the page when SPACE is pressed
             case Keys.SPACE:
                 // Don't preventDefault on children of FocusableItem
-                if (e.target && e.target.className.indexOf(menuClass) !== -1) {
+                if (elementTarget && elementTarget.className.includes(menuClass)) {
                     e.preventDefault();
                 }
                 return;
@@ -1730,12 +1709,12 @@ var MenuList = function (_a) {
     };
     var onAnimationEnd = function () {
         if (state === "closing") {
-            setOverflowData(); // reset overflowData after closing
+            setOverflowData(undefined); // reset overflowData after closing
         }
-        safeCall(endTransition);
+        endTransition && safeCall(endTransition);
     };
     var handlePosition = useCallback(function (noOverflowCheck) {
-        if (!containerRef.current) {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
             if (process.env.NODE_ENV !== "production") {
                 console.error('[React-Menu] Menu cannot be positioned properly as container ref is null. If you need to initialise `state` prop to "open" for ControlledMenu, please see this solution: https://codesandbox.io/s/initial-open-sp10wn');
             }
@@ -1745,11 +1724,15 @@ var MenuList = function (_a) {
             scrollNodes.menu =
                 (boundingBoxRef
                     ? boundingBoxRef.current // user explicitly sets boundingBoxRef
-                    : getScrollAncestor(rootMenuRef.current)) || window; // try to discover bounding box automatically
+                    : getScrollAncestor(rootMenuRef === null || rootMenuRef === void 0 ? void 0 : rootMenuRef.current)) || window; // try to discover bounding box automatically
         }
         var positionHelpers = getPositionHelpers(containerRef, menuRef, scrollNodes.menu, boundingBoxPadding);
         var menuRect = positionHelpers.menuRect;
-        var results = { computedDirection: "bottom" };
+        var results = {
+            computedDirection: "bottom",
+            x: 0,
+            y: 0
+        };
         if (anchorPoint) {
             results = positionContextMenu({ positionHelpers: positionHelpers, anchorPoint: anchorPoint });
         }
@@ -1766,7 +1749,8 @@ var MenuList = function (_a) {
                 positionHelpers: positionHelpers
             });
         }
-        var arrowX = results.arrowX, arrowY = results.arrowY, x = results.x, y = results.y, computedDirection = results.computedDirection;
+        var y = results.y;
+        var x = results.x, arrowX = results.arrowX, arrowY = results.arrowY, computedDirection = results.computedDirection;
         var menuHeight = menuRect.height;
         if (!noOverflowCheck && overflow !== "visible") {
             var getTopOverflow = positionHelpers.getTopOverflow, getBottomOverflow = positionHelpers.getBottomOverflow;
@@ -1790,17 +1774,17 @@ var MenuList = function (_a) {
                         y -= topOverflow;
                 }
             }
-            if (height >= 0) {
+            if (height != null && height >= 0) {
                 // To avoid triggering reposition in the next ResizeObserver callback
                 menuHeight = height;
                 setOverflowData({ height: height, overflowAmt: overflowAmt_1 });
             }
             else {
-                setOverflowData();
+                setOverflowData(undefined);
             }
         }
         if (arrow)
-            setArrowPosition({ x: arrowX, y: arrowY });
+            setArrowPosition({ x: arrowX !== null && arrowX !== void 0 ? arrowX : 0, y: arrowY !== null && arrowY !== void 0 ? arrowY : 0 });
         setMenuPosition({ x: x, y: y });
         setExpandedDirection(computedDirection);
         latestMenuSize.current = { width: menuRect.width, height: menuHeight };
@@ -1865,7 +1849,7 @@ var MenuList = function (_a) {
         scrollObservers.forEach(function (o) { return o.addEventListener("scroll", handleScroll); });
         return function () { return scrollObservers.forEach(function (o) { return o.removeEventListener("scroll", handleScroll); }); };
     }, [rootAnchorRef, scrollNodes, isOpen, onClose, viewScroll, handlePosition]);
-    var hasOverflow = !!overflowData && overflowData.overflowAmt > 0;
+    var hasOverflow = !!overflowData && overflowData.overflowAmt != null && overflowData.overflowAmt > 0;
     useEffect(function () {
         if (hasOverflow || !isOpen || !parentScrollingRef)
             return;
@@ -1906,20 +1890,20 @@ var MenuList = function (_a) {
     }, [reposition]);
     useEffect(function () {
         if (!isOpen) {
-            dispatch(HoverActionTypes.RESET);
+            dispatch(HoverActionTypes.RESET, undefined, 0);
             if (!closeTransition)
-                setOverflowData();
-            return;
+                setOverflowData(undefined);
+            return function () { };
         }
         var _a = menuItemFocus || {}, position = _a.position, alwaysUpdate = _a.alwaysUpdate;
         var setItemFocus = function () {
             if (position === FocusPositions.FIRST) {
-                dispatch(HoverActionTypes.FIRST);
+                dispatch(HoverActionTypes.FIRST, undefined, 0);
             }
             else if (position === FocusPositions.LAST) {
-                dispatch(HoverActionTypes.LAST);
+                dispatch(HoverActionTypes.LAST, undefined, 0);
             }
-            else if (position >= -1) {
+            else if (typeof position === "number" && position >= -1) {
                 dispatch(HoverActionTypes.SET_INDEX, undefined, position);
             }
         };
@@ -1929,14 +1913,33 @@ var MenuList = function (_a) {
         else if (captureFocus) {
             // Use a timeout here because if set focus immediately, page might scroll unexpectedly.
             var id_1 = setTimeout(function () {
+                var _a, _b, _c;
                 // If focus has already been set to a children element, don't set focus on menu or item
                 if (!menuRef.current.contains(document.activeElement)) {
-                    focusRef.current.focus();
+                    // Handle popover portal focus
+                    var popupElement = (_a = focusRef.current) === null || _a === void 0 ? void 0 : _a.nextSibling;
+                    if (popupElement instanceof Element) {
+                        var input = popupElement.querySelectorAll("input,textarea")[0];
+                        if (input) {
+                            input.focus();
+                            // Text areas should start at end
+                            if (input instanceof HTMLTextAreaElement) {
+                                input.selectionStart = input.value.length;
+                            }
+                        }
+                        else {
+                            (_b = focusRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                        }
+                    }
+                    else {
+                        (_c = focusRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                    }
                     setItemFocus();
                 }
             }, openTransition ? 170 : 100);
             return function () { return clearTimeout(id_1); };
         }
+        return function () { };
     }, [isOpen, openTransition, closeTransition, captureFocus, menuItemFocus, dispatch]);
     var isSubmenuOpen = openSubmenuCount > 0;
     var itemContext = useMemo(function () { return ({
@@ -1946,7 +1949,8 @@ var MenuList = function (_a) {
         dispatch: dispatch,
         updateItems: updateItems
     }); }, [isOpen, isSubmenuOpen, dispatch, updateItems]);
-    var maxHeight, overflowAmt;
+    var maxHeight;
+    var overflowAmt;
     if (overflowData) {
         setDownOverflow ? (overflowAmt = overflowData.overflowAmt) : (maxHeight = overflowData.height);
     }
@@ -1957,7 +1961,7 @@ var MenuList = function (_a) {
         parentMenuRef: menuRef,
         parentDir: expandedDirection
     }); }, [reposSubmenu, overflow, overflowAmt, expandedDirection]);
-    var overflowStyle = maxHeight >= 0 ? { maxHeight: maxHeight, overflow: overflow } : undefined;
+    var overflowStyle = maxHeight != null && maxHeight >= 0 ? { maxHeight: maxHeight, overflow: overflow } : undefined;
     var modifiers = useMemo(function () { return ({
         state: state,
         dir: expandedDirection
@@ -1972,9 +1976,9 @@ var MenuList = function (_a) {
     return (jsxs("ul", __assign({ role: "menu", "aria-label": ariaLabel }, mergeProps({ onKeyDown: onKeyDown, onAnimationEnd: onAnimationEnd }, restProps), commonProps(isDisabled), { ref: useCombinedRef(externalRef, menuRef), className: useBEM({ block: menuClass, modifiers: modifiers, className: menuClassName }), style: __assign(__assign(__assign({}, menuStyle), overflowStyle), { margin: 0, display: state === "closed" ? "none" : undefined, position: "absolute", left: menuPosition.x, top: menuPosition.y }) }, { children: [jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 } }), arrow && (jsx("div", { className: _arrowClass, style: __assign(__assign({}, arrowStyle), { position: "absolute", left: arrowPosition.x, top: arrowPosition.y }), ref: arrowRef })), jsx(MenuListContext.Provider, __assign({ value: listContext }, { children: jsx(MenuListItemContext.Provider, __assign({ value: itemContext }, { children: jsx(HoverItemContext.Provider, __assign({ value: hoverItem }, { children: children })) })) }))] })));
 };
 
-var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
+var ControlledMenuFr = function (_a, externalRef) {
     var ariaLabel = _a["aria-label"], className = _a.className, containerProps = _a.containerProps, initialMounted = _a.initialMounted, unmountOnClose = _a.unmountOnClose, transition = _a.transition, transitionTimeout = _a.transitionTimeout, boundingBoxRef = _a.boundingBoxRef, boundingBoxPadding = _a.boundingBoxPadding, _b = _a.reposition, reposition = _b === void 0 ? "auto" : _b, _c = _a.submenuOpenDelay, submenuOpenDelay = _c === void 0 ? 300 : _c, _d = _a.submenuCloseDelay, submenuCloseDelay = _d === void 0 ? 150 : _d, skipOpen = _a.skipOpen, _e = _a.viewScroll, viewScroll = _e === void 0 ? "initial" : _e, portal = _a.portal, theming = _a.theming, onItemClick = _a.onItemClick, onClose = _a.onClose, saveButtonRef = _a.saveButtonRef, restProps = __rest(_a, ["aria-label", "className", "containerProps", "initialMounted", "unmountOnClose", "transition", "transitionTimeout", "boundingBoxRef", "boundingBoxPadding", "reposition", "submenuOpenDelay", "submenuCloseDelay", "skipOpen", "viewScroll", "portal", "theming", "onItemClick", "onClose", "saveButtonRef"]);
-    var containerRef = useRef(null);
+    var containerRef = useRef();
     var scrollNodesRef = useRef({});
     var anchorRef = restProps.anchorRef, state = restProps.state;
     var settings = useMemo(function () { return ({
@@ -2012,7 +2016,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             // the cell doesn't refresh during update if save is invoked from a native event
             // This doesn't happen in React18
             // To work around it, I invoke the save by clicking on a passed in invisible button ref
-            if (saveButtonRef.current)
+            if (saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current)
                 saveButtonRef.current.click();
             else
                 safeCall(onClose, { reason: CloseReason.BLUR });
@@ -2027,7 +2031,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
                 setTimeout(function () { return (skipOpen.current = false); }, 300);
             }
         }
-    }, [clickIsWithinMenu, onClose]);
+    }, [clickIsWithinMenu, onClose, saveButtonRef, skipOpen]);
     var handleScreenEventForCancel = useCallback(function (ev) {
         if (!clickIsWithinMenu(ev)) {
             ev.preventDefault();
@@ -2036,7 +2040,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
     }, [clickIsWithinMenu]);
     useEffect(function () {
         if (isMenuOpen(state)) {
-            var thisDocument_1 = anchorRef.current ? anchorRef.current.ownerDocument : document;
+            var thisDocument_1 = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
             thisDocument_1.addEventListener("mousedown", handleScreenEventForCancel, true);
             thisDocument_1.addEventListener("mouseup", handleScreenEventForSave, true);
             thisDocument_1.addEventListener("click", handleScreenEventForCancel, true);
@@ -2049,13 +2053,13 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             };
         }
         return function () { };
-    }, [handleScreenEventForSave, handleScreenEventForCancel, state]);
+    }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
     var itemSettings = useMemo(function () { return ({
         submenuOpenDelay: submenuOpenDelay,
         submenuCloseDelay: submenuCloseDelay
     }); }, [submenuOpenDelay, submenuCloseDelay]);
     var eventHandlers = useMemo(function () { return ({
-        handleClick: function (event, isCheckorRadio) {
+        handleClick: function (event, isCheckOrRadio) {
             if (!event.stopPropagation)
                 safeCall(onItemClick, event);
             var keepOpen = event.keepOpen;
@@ -2063,7 +2067,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
                 // if event.keepOpen is undefined, the following default behaviour is used
                 // According to WAI-ARIA Authoring Practices 1.1
                 // Keep menu open when check or radio is invoked by SPACE key
-                keepOpen = isCheckorRadio && event.key === Keys.SPACE;
+                keepOpen = isCheckOrRadio && event.key === Keys.SPACE;
             }
             if (!keepOpen) {
                 safeCall(onClose, {
@@ -2091,7 +2095,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             // If a user clicks on the menu button when a menu is open, we need to close the menu.
             // However, a blur event will be fired prior to the click event on menu button,
             // which makes the menu first close and then open again.
-            // If this happen, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
+            // If this happens, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
             // and makes it difficult to determine whether onBlur is fired because of clicking on menu button.
             // This is a workaround approach which sets a flag to skip a following click event.
             if (skipOpen) {
@@ -2107,27 +2111,25 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             modifiers: modifiers,
             className: className
         }), style: __assign(__assign({}, containerProps === null || containerProps === void 0 ? void 0 : containerProps.style), { position: "relative" }), ref: containerRef }, { children: state && (jsx(SettingsContext.Provider, __assign({ value: settings }, { children: jsx(ItemSettingsContext.Provider, __assign({ value: itemSettings }, { children: jsx(EventHandlersContext.Provider, __assign({ value: eventHandlers }, { children: jsx(MenuList, __assign({}, restProps, { ariaLabel: ariaLabel || "Menu", externalRef: externalRef, containerRef: containerRef, onClose: onClose })) })) })) }))) })));
-    if (portal === true && anchorRef.current !== undefined) {
+    if (portal === true && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== undefined) {
         portal = { target: anchorRef.current.ownerDocument.body };
     }
-    if (portal === true && typeof document !== "undefined") {
-        return createPortal(menuList, document.body);
-    }
-    else if (portal) {
-        return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+    if (portal) {
+        if (typeof portal === "boolean") {
+            if (portal && typeof document !== "undefined") {
+                return createPortal(menuList, document.body);
+            }
+        }
+        else {
+            return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+        }
     }
     return menuList;
-});
-ControlledMenu.propTypes /* remove-proptypes */ = __assign(__assign({}, rootMenuPropTypes), { state: oneOf(values(MenuStateMap)), anchorPoint: exact({
-        x: number,
-        y: number
-    }), anchorRef: object, skipOpen: object, captureFocus: bool, menuItemFocus: exact({
-        position: oneOfType([string, number]),
-        alwaysUpdate: bool
-    }), onClose: func });
-
-var Menu = forwardRef(function Menu(_a, externalRef) {
-    var ariaLabel = _a["aria-label"]; _a.captureFocus; var menuButton = _a.menuButton, instanceRef = _a.instanceRef, onMenuChange = _a.onMenuChange, restProps = __rest(_a, ["aria-label", "captureFocus", "menuButton", "instanceRef", "onMenuChange"]);
+};
+var ControlledMenu = forwardRef(ControlledMenuFr);
+
+function MenuFr(_a, externalRef) {
+    var ariaLabel = _a["aria-label"], menuButton = _a.menuButton, instanceRef = _a.instanceRef, onMenuChange = _a.onMenuChange, restProps = __rest(_a, ["aria-label", "menuButton", "instanceRef", "onMenuChange"]);
     var _b = useMenuStateAndFocus(restProps), stateProps = _b[0], toggleMenu = _b[1], openMenu = _b[2];
     var isOpen = isMenuOpen(stateProps.state);
     var skipOpen = useRef(false);
@@ -2135,7 +2137,7 @@ var Menu = forwardRef(function Menu(_a, externalRef) {
     var handleClose = useCallback(function (e) {
         toggleMenu(false);
         if (e.key)
-            buttonRef.current.focus();
+            buttonRef.current && buttonRef.current.focus();
     }, [toggleMenu]);
     var onClick = function (e) {
         if (skipOpen.current)
@@ -2156,10 +2158,11 @@ var Menu = forwardRef(function Menu(_a, externalRef) {
         }
         e.preventDefault();
     };
+    // FIXME erk! button seems to be many types
     var button = safeCall(menuButton, { open: isOpen });
     if (!button || !button.type)
         throw new Error("Menu requires a menuButton prop.");
-    var buttonProps = __assign({ ref: useCombinedRef(button.ref, buttonRef) }, mergeProps({ onClick: onClick, onKeyDown: onKeyDown }, button.props));
+    var buttonProps = __assign(__assign({ ref: useCombinedRef(button.ref, buttonRef) }, mergeProps({ onClick: onClick, onKeyDown: onKeyDown }, button.props)), { isOpen: false });
     if (getName(button.type) === "MenuButton") {
         buttonProps.isOpen = isOpen;
     }
@@ -2170,27 +2173,28 @@ var Menu = forwardRef(function Menu(_a, externalRef) {
         closeMenu: function () { return toggleMenu(false); }
     }); });
     return (jsxs(Fragment$1, { children: [renderButton, jsx(ControlledMenu, __assign({}, restProps, stateProps, { "aria-label": ariaLabel || (typeof button.props.children === "string" ? button.props.children : "Menu"), anchorRef: buttonRef, ref: externalRef, onClose: handleClose, skipOpen: skipOpen }))] }));
-});
-Menu.propTypes = __assign(__assign(__assign({}, rootMenuPropTypes), uncontrolledMenuPropTypes), { menuButton: oneOfType([element, func]).isRequired });
+}
+var Menu = forwardRef(MenuFr);
 
-var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
-    var ariaLabel = _a["aria-label"], className = _a.className, disabled = _a.disabled, direction = _a.direction, label = _a.label, openTrigger = _a.openTrigger, onMenuChange = _a.onMenuChange, isHovering = _a.isHovering, instanceRef = _a.instanceRef, itemRef = _a.itemRef; _a.captureFocus; _a.repositionFlag; var _b = _a.itemProps, itemProps = _b === void 0 ? {} : _b, restProps = __rest(_a, ["aria-label", "className", "disabled", "direction", "label", "openTrigger", "onMenuChange", "isHovering", "instanceRef", "itemRef", "captureFocus", "repositionFlag", "itemProps"]);
+var SubMenuFr = function (_a) {
+    var ariaLabel = _a["aria-label"], className = _a.className, disabled = _a.disabled, direction = _a.direction, label = _a.label, openTrigger = _a.openTrigger, onMenuChange = _a.onMenuChange, isHovering = _a.isHovering, instanceRef = _a.instanceRef, menuItemRef = _a.menuItemRef, _b = _a.itemProps, itemProps = _b === void 0 ? {} : _b, restProps = __rest(_a, ["aria-label", "className", "disabled", "direction", "label", "openTrigger", "onMenuChange", "isHovering", "instanceRef", "menuItemRef", "itemProps"]);
     var settings = useContext(SettingsContext);
     var rootMenuRef = settings.rootMenuRef;
     var _c = useContext(ItemSettingsContext), submenuOpenDelay = _c.submenuOpenDelay, submenuCloseDelay = _c.submenuCloseDelay;
     var _d = useContext(MenuListContext), parentMenuRef = _d.parentMenuRef, parentDir = _d.parentDir, parentOverflow = _d.overflow;
     var _e = useContext(MenuListItemContext), isParentOpen = _e.isParentOpen, isSubmenuOpen = _e.isSubmenuOpen, setOpenSubmenuCount = _e.setOpenSubmenuCount, dispatch = _e.dispatch, updateItems = _e.updateItems;
     var isPortal = parentOverflow !== "visible";
+    // FIXME Matt no idea what's going on here
     var _f = useMenuStateAndFocus(settings), stateProps = _f[0], toggleMenu = _f[1], _openMenu = _f[2];
     var state = stateProps.state;
     var isDisabled = !!disabled;
     var isOpen = isMenuOpen(state);
     var containerRef = useRef(null);
-    var timeoutId = useRef(0);
+    var timeoutId = useRef();
     var stopTimer = function () {
         if (timeoutId.current) {
             clearTimeout(timeoutId.current);
-            timeoutId.current = 0;
+            timeoutId.current = undefined;
         }
     };
     var openMenu = function () {
@@ -2202,7 +2206,7 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
         setHover();
         !isDisabled && _openMenu.apply(void 0, args);
     };
-    var setHover = function () { return !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current); };
+    var setHover = function () { return !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current, 0); };
     var delayOpen = function (delay) {
         setHover();
         if (!openTrigger)
@@ -2221,7 +2225,7 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
     var handlePointerLeave = function () {
         stopTimer();
         if (!isOpen)
-            dispatch(HoverActionTypes.UNSET, itemRef.current);
+            dispatch(HoverActionTypes.UNSET, menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current, 0);
     };
     var handleKeyDown = function (e) {
         var handled = false;
@@ -2229,7 +2233,7 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
             // LEFT key is bubbled up from submenu items
             case Keys.LEFT:
                 if (isOpen) {
-                    itemRef.current.focus();
+                    (menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current) && menuItemRef.current.focus();
                     toggleMenu(false);
                     handled = true;
                 }
@@ -2256,19 +2260,19 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
                 break;
         }
     };
-    useItemEffect(isDisabled, itemRef, updateItems);
+    useItemEffect(isDisabled, menuItemRef, updateItems);
     useMenuChange(onMenuChange, isOpen);
     useEffect(function () { return function () { return clearTimeout(timeoutId.current); }; }, []);
     useEffect(function () {
         // 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) {
-            itemRef.current.focus();
+            (menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current) && menuItemRef.current.focus();
         }
         else {
             toggleMenu(false);
         }
-    }, [isHovering, isParentOpen, toggleMenu, itemRef]);
+    }, [isHovering, isParentOpen, toggleMenu, menuItemRef]);
     useEffect(function () {
         setOpenSubmenuCount(function (count) { return (isOpen ? count + 1 : Math.max(count - 1, 0)); });
     }, [setOpenSubmenuCount, isOpen]);
@@ -2282,7 +2286,7 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
         },
         closeMenu: function () {
             if (isOpen) {
-                itemRef.current.focus();
+                (menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current) && menuItemRef.current.focus();
                 toggleMenu(false);
             }
         }
@@ -2301,36 +2305,40 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
         onClick: function () { return openTrigger !== "none" && openMenu(); }
     }, restItemProps);
     var getMenuList = function () {
-        var menuList = (jsx(MenuList, __assign({}, restProps, stateProps, { ariaLabel: ariaLabel || (typeof label === "string" ? label : "Submenu"), anchorRef: itemRef, containerRef: isPortal ? rootMenuRef : containerRef, direction: direction || (parentDir === "right" || parentDir === "left" ? parentDir : "right"), parentScrollingRef: isPortal && parentMenuRef, isDisabled: isDisabled })));
-        var container = rootMenuRef.current;
+        var menuList = (jsx(MenuList, __assign({}, 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 })));
+        var container = rootMenuRef === null || rootMenuRef === void 0 ? void 0 : rootMenuRef.current;
         return isPortal && container ? createPortal(menuList, container) : menuList;
     };
-    return (jsxs("li", __assign({ className: useBEM({ block: menuClass, element: subMenuClass, className: className }), style: { position: "relative" }, role: "presentation", ref: containerRef, onKeyDown: handleKeyDown }, { children: [jsx("div", __assign({ role: "menuitem", "aria-haspopup": true, "aria-expanded": isOpen }, mergedItemProps, commonProps(isDisabled, isHovering), { ref: useCombinedRef(externalItemRef, itemRef), className: useBEM({
+    return (jsxs("li", __assign({ className: useBEM({ block: menuClass, element: subMenuClass, className: className }), style: { position: "relative" }, role: "presentation", ref: containerRef, onKeyDown: handleKeyDown }, { children: [jsx("div", __assign({ role: "menuitem", "aria-haspopup": true, "aria-expanded": isOpen }, mergedItemProps, commonProps(isDisabled, isHovering), { ref: useCombinedRef(externalItemRef, menuItemRef), className: useBEM({
                     block: menuClass,
                     element: menuItemClass,
                     modifiers: modifiers,
                     className: itemClassName
                 }) }, { children: useMemo(function () { return safeCall(label, modifiers); }, [label, modifiers]) })), state && getMenuList()] })));
-});
-SubMenu.propTypes = __assign(__assign(__assign({}, menuPropTypes), uncontrolledMenuPropTypes), { disabled: bool, openTrigger: oneOf(["none", "clickOnly"]), label: oneOfType([node, func]), itemProps: shape(__assign({}, stylePropTypes())) });
+};
+var SubMenu = withHovering("SubMenu", SubMenuFr);
 
-var MenuItem = withHovering("MenuItem", function MenuItem(_a) {
-    var className = _a.className, value = _a.value, href = _a.href, type = _a.type, checked = _a.checked, disabled = _a.disabled, children = _a.children, onClick = _a.onClick, isHovering = _a.isHovering, itemRef = _a.itemRef, externalRef = _a.externalRef, restProps = __rest(_a, ["className", "value", "href", "type", "checked", "disabled", "children", "onClick", "isHovering", "itemRef", "externalRef"]);
+var MenuItemFr = function (_a) {
+    var className = _a.className, value = _a.value, href = _a.href, type = _a.type, checked = _a.checked, disabled = _a.disabled, children = _a.children, onClick = _a.onClick, isHovering = _a.isHovering, menuItemRef = _a.menuItemRef, externalRef = _a.externalRef, restProps = __rest(_a, ["className", "value", "href", "type", "checked", "disabled", "children", "onClick", "isHovering", "menuItemRef", "externalRef"]);
     var isDisabled = !!disabled;
-    var _b = useItemState(itemRef, itemRef, isHovering, isDisabled), setHover = _b.setHover, restStateProps = __rest(_b, ["setHover"]);
+    var _b = useItemState(menuItemRef, menuItemRef, isHovering, isDisabled), setHover = _b.setHover, restStateProps = __rest(_b, ["setHover"]);
     var eventHandlers = useContext(EventHandlersContext);
     var radioGroup = useContext(RadioGroupContext);
     var isRadio = type === "radio";
     var isCheckBox = type === "checkbox";
     var isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
     var isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
+    // FIXME handle click seems to be a combination of multiple event types
     var handleClick = function (e) {
         if (isDisabled) {
             e.stopPropagation();
             e.preventDefault();
             return;
         }
-        var event = { value: value, syntheticEvent: e };
+        var event = {
+            value: value,
+            syntheticEvent: e
+        };
         if (e.key !== undefined)
             event.key = e.key;
         if (isCheckBox)
@@ -2349,7 +2357,7 @@ var MenuItem = withHovering("MenuItem", function MenuItem(_a) {
             case Keys.ENTER:
             case Keys.SPACE:
                 if (isAnchor) {
-                    itemRef.current.click();
+                    (menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current) && menuItemRef.current.click();
                 }
                 else {
                     handleClick(e);
@@ -2369,21 +2377,21 @@ var MenuItem = withHovering("MenuItem", function MenuItem(_a) {
     // 1. Preset props adhering to WAI-ARIA Authoring Practices.
     // 2. Merged outer and local props
     // 3. ref, className
-    var menuItemProps = __assign(__assign(__assign({ role: isRadio ? "menuitemradio" : isCheckBox ? "menuitemcheckbox" : "menuitem", "aria-checked": isRadio || isCheckBox ? isChecked : undefined }, mergedProps), commonProps(isDisabled, isHovering)), { ref: useCombinedRef(externalRef, itemRef), className: useBEM({ block: menuClass, element: menuItemClass, modifiers: modifiers, className: className }), children: useMemo(function () { return safeCall(children, modifiers); }, [children, modifiers]) });
+    var menuItemProps = __assign(__assign(__assign({ 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: modifiers, className: className }), children: useMemo(function () { return safeCall(children, modifiers); }, [children, modifiers]) });
     if (isAnchor) {
         return (jsx("li", __assign({ role: "presentation" }, { children: jsx("a", __assign({ href: href }, menuItemProps)) })));
     }
     else {
         return jsx("li", __assign({}, menuItemProps));
     }
-});
-MenuItem.propTypes = __assign(__assign({}, stylePropTypes()), { value: any, href: string, type: oneOf(["checkbox", "radio"]), checked: bool, disabled: bool, children: oneOfType([node, func]), onClick: func });
+};
+var MenuItem = withHovering("MenuItem", MenuItemFr);
 
-var FocusableItem = withHovering("FocusableItem", function FocusableItem(_a) {
-    var className = _a.className, disabled = _a.disabled, children = _a.children, isHovering = _a.isHovering, itemRef = _a.itemRef, externalRef = _a.externalRef, restProps = __rest(_a, ["className", "disabled", "children", "isHovering", "itemRef", "externalRef"]);
+var FocusableItemFr = function (_a) {
+    var className = _a.className, disabled = _a.disabled, children = _a.children, isHovering = _a.isHovering, menuItemRef = _a.menuItemRef, externalRef = _a.externalRef, restProps = __rest(_a, ["className", "disabled", "children", "isHovering", "menuItemRef", "externalRef"]);
     var isDisabled = !!disabled;
     var ref = useRef(null);
-    var _b = useItemState(itemRef, ref, isHovering, isDisabled), setHover = _b.setHover, onPointerLeave = _b.onPointerLeave, restStateProps = __rest(_b, ["setHover", "onPointerLeave"]);
+    var _b = useItemState(menuItemRef, ref, isHovering, isDisabled), setHover = _b.setHover, onPointerLeave = _b.onPointerLeave, restStateProps = __rest(_b, ["setHover", "onPointerLeave"]);
     var handleClose = useContext(EventHandlersContext).handleClose;
     var modifiers = useMemo(function () { return ({
         disabled: isDisabled,
@@ -2394,50 +2402,51 @@ var FocusableItem = withHovering("FocusableItem", function FocusableItem(_a) {
         return safeCall(children, __assign(__assign({}, modifiers), { ref: ref, closeMenu: handleClose }));
     }, [children, modifiers, handleClose]);
     var mergedProps = mergeProps(__assign(__assign({}, restStateProps), { onPointerLeave: function (e) { return onPointerLeave(e, true); }, onFocus: setHover }), restProps);
-    return (jsx("li", __assign({ role: "menuitem" }, mergedProps, commonProps(isDisabled), { ref: useCombinedRef(externalRef, itemRef), className: useBEM({ block: menuClass, element: menuItemClass, modifiers: modifiers, className: className }) }, { children: renderChildren })));
-});
-FocusableItem.propTypes = __assign(__assign({}, stylePropTypes()), { disabled: bool, children: func });
+    return (jsx("li", __assign({ role: "menuitem" }, mergedProps, commonProps(isDisabled), { ref: useCombinedRef(externalRef, menuItemRef), className: useBEM({ block: menuClass, element: menuItemClass, modifiers: modifiers, className: className }) }, { children: renderChildren })));
+};
+var FocusableItem = withHovering("FocusableItem", FocusableItemFr);
 
-var MenuDivider = memo(forwardRef(function MenuDivider(_a, externalRef) {
+var MenuDividerFr = function (_a, externalRef) {
     var className = _a.className, restProps = __rest(_a, ["className"]);
     return (jsx("li", __assign({ role: "separator" }, restProps, { ref: externalRef, className: useBEM({ block: menuClass, element: menuDividerClass, className: className }) })));
-}));
-MenuDivider.propTypes = __assign({}, stylePropTypes());
+};
+var MenuDivider = memo(forwardRef(MenuDividerFr));
 
-var MenuHeader = memo(forwardRef(function MenuHeader(_a, externalRef) {
+var MenuHeaderFr = function (_a, externalRef) {
     var className = _a.className, restProps = __rest(_a, ["className"]);
     return (jsx("li", __assign({ role: "presentation" }, restProps, { ref: externalRef, className: useBEM({ block: menuClass, element: menuHeaderClass, className: className }) })));
-}));
-MenuHeader.propTypes = __assign({}, stylePropTypes());
+};
+var MenuHeader = memo(forwardRef(MenuHeaderFr));
 
-var MenuGroup = forwardRef(function MenuGroup(_a, externalRef) {
+var MenuGroupFr = function (_a, externalRef) {
     var className = _a.className, style = _a.style, takeOverflow = _a.takeOverflow, restProps = __rest(_a, ["className", "style", "takeOverflow"]);
     var ref = useRef(null);
     var _b = useState(), overflowStyle = _b[0], setOverflowStyle = _b[1];
     var _c = useContext(MenuListContext), overflow = _c.overflow, overflowAmt = _c.overflowAmt;
     useIsomorphicLayoutEffect(function () {
         var maxHeight;
-        if (takeOverflow && overflowAmt >= 0) {
+        if (takeOverflow && overflowAmt != null && overflowAmt >= 0 && ref.current) {
+            // FIXME Matt added && ref.current
             maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
             if (maxHeight < 0)
                 maxHeight = 0;
         }
-        setOverflowStyle(maxHeight >= 0 ? { maxHeight: maxHeight, overflow: overflow } : undefined);
+        setOverflowStyle(maxHeight != null && maxHeight >= 0 ? { maxHeight: maxHeight, overflow: overflow } : undefined);
     }, [takeOverflow, overflow, overflowAmt]);
     useIsomorphicLayoutEffect(function () {
-        if (overflowStyle)
+        if (overflowStyle && ref.current)
             ref.current.scrollTop = 0;
     }, [overflowStyle]);
     return (jsx("div", __assign({}, restProps, { ref: useCombinedRef(externalRef, ref), className: useBEM({ block: menuClass, element: menuGroupClass, className: className }), style: __assign(__assign({}, style), overflowStyle) })));
-});
-MenuGroup.propTypes = __assign(__assign({}, stylePropTypes()), { takeOverflow: bool });
+};
+var MenuGroup = forwardRef(MenuGroupFr);
 
-var MenuRadioGroup = forwardRef(function MenuRadioGroup(_a, externalRef) {
+var MenuRadioGroupFr = function (_a, externalRef) {
     var ariaLabel = _a["aria-label"], className = _a.className, name = _a.name, value = _a.value, onRadioChange = _a.onRadioChange, restProps = __rest(_a, ["aria-label", "className", "name", "value", "onRadioChange"]);
     var contextValue = useMemo(function () { return ({ name: name, value: value, onRadioChange: onRadioChange }); }, [name, value, onRadioChange]);
     return (jsx(RadioGroupContext.Provider, __assign({ value: contextValue }, { children: jsx("li", __assign({ role: "presentation" }, { children: jsx("ul", __assign({ role: "group", "aria-label": ariaLabel || name || "Radio group" }, restProps, { ref: externalRef, className: useBEM({ block: menuClass, element: radioGroupClass, className: className }) })) })) })));
-});
-MenuRadioGroup.propTypes = __assign(__assign({}, stylePropTypes()), { name: string, value: any, onRadioChange: func });
+};
+var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
 var useGridPopoverHook = function (props, save) {
     var cellEditorParams = props.cellEditorParams, saving = props.saving, updateValue = props.updateValue;
@@ -2491,7 +2500,18 @@ var GridRenderPopoutMenuCell = function (props) {
     var _a, _b, _c;
     var checkUpdating = useContext(UpdatingContext).checkUpdating;
     var isLoading = checkUpdating((_b = (_a = props.colDef) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : "", props.data.id);
-    var disabled = !((_c = props.colDef) === null || _c === void 0 ? void 0 : _c.editable);
+    var editable = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.editable;
+    var disabled = !(typeof editable === "function"
+        ? editable({
+            node: props.node,
+            data: props.data,
+            column: props.column,
+            colDef: props.colDef,
+            api: props.api,
+            columnApi: props.columnApi,
+            context: props.context
+        })
+        : editable);
     return (jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsx(LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md" }) })));
 };
 
@@ -2525,7 +2545,7 @@ var GridFormMultiSelect = function (props) {
             }
         });
     }); }, [formProps, selectedValues]);
-    var popoverWrapper = useGridPopoverHook(props, save).popoverWrapper;
+    var _e = useGridPopoverHook(props, save), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
     // Load up options list if it's async function
     useEffect(function () {
         var _a;
@@ -2574,7 +2594,7 @@ var GridFormMultiSelect = function (props) {
                 return undefined;
             }
             var str = option.label || "";
-            return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+            return str.toLowerCase().indexOf(filter.trim()) === -1 ? option.value : undefined;
         })
             .filter(function (r) { return r !== undefined; }));
     }, [formProps.filtered, filter, options]);
@@ -2582,27 +2602,48 @@ var GridFormMultiSelect = function (props) {
                                 var _b;
                                 var ref = _a.ref;
                                 return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = formProps.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: "", onChange: function (e) { return setFilter(e.target.value.toLowerCase()); } }) })));
-                            } })), jsx(MenuDivider, {}, "$$divider_filter")] })), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                            } }), "filter"), jsx(MenuDivider, {}, "$$divider_filter")] })), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                     var _a;
-                    return item.value === MenuSeparatorString$1 ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs(Fragment, { children: [jsx(MenuItem, __assign({ onClick: function (e) {
+                    return item.value === MenuSeparatorString$1 ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs(Fragment$1, { children: [jsx(MenuItem, __assign({ onClick: function (e) {
                                     e.keepOpen = true;
-                                    // onSelectMenuOption(itemIndex, e.value);
-                                    return false;
-                                } }, { children: jsx(LuiCheckboxInput, { isChecked: selectedValues.includes(item.value), value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), onChange: function (e) {
-                                        if (e.target.checked) {
-                                            setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
+                                    if (selectedValues.includes(item.value)) {
+                                        setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
+                                    }
+                                    else {
+                                        setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
+                                    }
+                                }, onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        if (e.key === "Enter")
+                                            triggerSave().then();
+                                        else if (e.key === " ") {
+                                            if (selectedValues.includes(item.value)) {
+                                                setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
+                                            }
+                                            else {
+                                                setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
+                                            }
+                                            e.preventDefault();
+                                            e.stopPropagation();
                                         }
-                                        else {
-                                            setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
+                                        return [2 /*return*/];
+                                    });
+                                }); } }, { children: jsx(LuiCheckboxInput, { isChecked: selectedValues.includes(item.value), value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
+                                        onClick: function (e) {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            return false;
                                         }
-                                    } }) }), "".concat(item.value)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                    }, onChange: function () {
+                                        /*Do nothing, change handled by menuItem*/
+                                    } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
                                     return item.subComponent &&
                                         item.subComponent({
                                             setValue: function (value) {
                                                 subSelectedValues.current[item.value] = value;
                                             }
                                         }, ref);
-                                } }), "".concat(item.value, "_subcomponent")))] }));
+                                } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
                 })] })) })));
 };
 
@@ -2989,7 +3030,7 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [filteredValues, options, selectItemHandler, stopEditing]);
-    return popoverWrapper(jsxs(Fragment, { children: [formProps.filtered && (jsxs(Fragment, { children: [jsx(FocusableItem, __assign({ className: "filter-item", index: -1 }, { children: function (_a) {
+    return popoverWrapper(jsxs(Fragment, { children: [formProps.filtered && (jsxs(Fragment, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
                             return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = formProps.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
@@ -3151,5 +3192,5 @@ var GridPopoverTextInput = function (colDef) {
     })));
 };
 
-export { ComponentLoadingWrapper, GenericMultiEditCellClass, Grid, GridCell, GridContext, GridContextProvider, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoutMenu, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, TextAreaInput, TextInputFormatted, UpdatingContext, UpdatingContextProvider, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, usePostSortRowsHook, wait };
+export { ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericMultiEditCellClass, Grid, GridCell, GridContext, GridContextProvider, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoutMenu, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuItem, MenuRadioGroup, SubMenu, TextAreaInput, TextInputFormatted, UpdatingContext, UpdatingContextProvider, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map