@linzjs/step-ag-grid 1.4.5 → 1.4.7

package/dist/index.js

@@ -8,7 +8,6 @@ var lodashEs = require('lodash-es');
 var agGridReact = require('ag-grid-react');
 var lui = require('@linzjs/lui');
 var reactDom = require('react-dom');
-var propTypes = require('prop-types');
 var reactTransitionState = require('react-transition-state');
 var debounce = require('debounce-promise');
 var uuid = require('uuid');
@@ -476,9 +475,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];
                                 }
                             });
@@ -909,7 +910,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 = react.useContext(GridContext), updatingCells = _d.updatingCells, getSelectedRows = _d.getSelectedRows;
     var colDef = props.colDef, data = props.data;
@@ -938,7 +939,8 @@ var GenericCellEditorComponent = function (props) {
     if (cellEditorParams == null)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: colDef.cellRenderer ? jsxRuntime.jsx(colDef.cellRenderer, __assign({}, props, { saving: saving })) : props.value }), (cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.form) && (jsxRuntime.jsx(cellEditorParams.form, { cellEditorParams: props, updateValue: updateValue, saving: saving, formProps: formProps, value: value, field: field, selectedRows: selectedRows }))] }));
-};
+};
+var GenericCellEditorComponent = react.forwardRef(GenericCellEditorComponentFr);
 
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
@@ -991,10 +993,6 @@ var setRef = function (ref, instance) {
 };
 var useCombinedRef = function (refA, refB) {
     return react.useMemo(function () {
-        if (!refA)
-            return refB;
-        if (!refB)
-            return refA;
         return function (instance) {
             setRef(refA, instance);
             setRef(refB, instance);
@@ -1012,7 +1010,6 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" &&
     ? react.useLayoutEffect
     : react.useEffect;
 
-// @ts-nocheck
 var menuContainerClass = "szh-menu-container";
 var menuClass = "szh-menu";
 var menuButtonClass = "szh-menu-button";
@@ -1023,13 +1020,23 @@ var menuHeaderClass = "header";
 var menuGroupClass = "group";
 var subMenuClass = "submenu";
 var radioGroupClass = "radio-group";
-var HoverItemContext = react.createContext();
-var MenuListItemContext = react.createContext({});
+var HoverItemContext = react.createContext(undefined);
+var MenuListItemContext = react.createContext({
+    dispatch: function () { },
+    updateItems: function () { },
+    setOpenSubmenuCount: function () { return 0; }
+});
 var MenuListContext = react.createContext({});
-var EventHandlersContext = react.createContext({});
+var EventHandlersContext = react.createContext({
+    handleClick: function () { }
+});
 var RadioGroupContext = react.createContext({});
+// FIXME hacking a default context in here is probably bad
 var SettingsContext = react.createContext({});
-var ItemSettingsContext = react.createContext({});
+var ItemSettingsContext = react.createContext({
+    submenuOpenDelay: 0,
+    submenuCloseDelay: 0
+});
 var Keys = Object.freeze({
     ENTER: "Enter",
     ESC: "Escape",
@@ -1068,10 +1075,8 @@ var MenuStateMap = Object.freeze({
     exited: "closed"
 });
 
-// @ts-nocheck
 var isMenuOpen = function (state) { return !!state && state[0] === "o"; };
 var batchedUpdates = reactDom.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;
@@ -1079,10 +1084,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) {
@@ -1105,7 +1111,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;
@@ -1119,15 +1125,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 {
@@ -1135,54 +1145,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"] = propTypes.oneOfType([propTypes.string, propTypes.func]),
-        _a);
-};
-// Menu, SubMenu and ControlledMenu
-var menuPropTypes = __assign(__assign(__assign({ className: propTypes.string }, stylePropTypes("menu")), stylePropTypes("arrow")), { menuStyle: propTypes.object, arrowStyle: propTypes.object, arrow: propTypes.bool, setDownOverflow: propTypes.bool, offsetX: propTypes.number, offsetY: propTypes.number, align: propTypes.oneOf(["start", "center", "end"]), direction: propTypes.oneOf(["left", "right", "top", "bottom"]), position: propTypes.oneOf(["auto", "anchor", "initial"]), overflow: propTypes.oneOf(["auto", "visible", "hidden"]) });
-// Menu and ControlledMenu
-var rootMenuPropTypes = __assign(__assign({}, menuPropTypes), { containerProps: propTypes.object, initialMounted: propTypes.bool, unmountOnClose: propTypes.bool, transition: propTypes.oneOfType([
-        propTypes.bool,
-        propTypes.exact({
-            open: propTypes.bool,
-            close: propTypes.bool,
-            item: propTypes.bool
-        }),
-    ]), transitionTimeout: propTypes.number, boundingBoxRef: propTypes.object, boundingBoxPadding: propTypes.string, reposition: propTypes.oneOf(["auto", "initial"]), repositionFlag: propTypes.oneOfType([propTypes.string, propTypes.number]), viewScroll: propTypes.oneOf(["auto", "close", "initial"]), submenuOpenDelay: propTypes.number, submenuCloseDelay: propTypes.number, portal: propTypes.oneOfType([
-        propTypes.bool,
-        propTypes.exact({
-            target: propTypes.object,
-            stablePosition: propTypes.bool
-        }),
-    ]), theming: propTypes.string, onItemClick: propTypes.func });
-// Menu and SubMenu
-var uncontrolledMenuPropTypes = {
-    instanceRef: propTypes.oneOfType([propTypes.object, propTypes.func]),
-    onMenuChange: propTypes.func
-};
+var indexOfNode = function (nodeList, node) { return lodashEs.findIndex(nodeList, node); };
 
 var withHovering = function (name, WrappedComponent) {
     var Component = react.memo(WrappedComponent);
     var WithHovering = react.forwardRef(function (props, ref) {
-        var itemRef = react.useRef(null);
-        return (jsxRuntime.jsx(Component, __assign({}, props, { itemRef: itemRef, externalRef: ref, isHovering: react.useContext(HoverItemContext) === itemRef.current })));
+        var menuItemRef = react.useRef(null);
+        return (jsxRuntime.jsx(Component, __assign({}, props, { menuItemRef: menuItemRef, externalRef: ref, isHovering: react.useContext(HoverItemContext) === menuItemRef.current })));
     });
     WithHovering.displayName = "WithHovering(".concat(name, ")");
     return WithHovering;
 };
 
-// @ts-nocheck
 var useItems = function (menuRef, focusRef) {
     var _a = react.useState(), hoverItem = _a[0], setHoverItem = _a[1];
     var stateRef = react.useRef({
@@ -1192,6 +1166,7 @@ var useItems = function (menuRef, focusRef) {
     });
     var mutableState = stateRef.current;
     var updateItems = react.useCallback(function (item, isMounted) {
+        var _a;
         var items = mutableState.items;
         if (!item) {
             mutableState.items = [];
@@ -1204,8 +1179,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);
                 }
             }
         }
@@ -1242,6 +1217,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];
@@ -1278,32 +1255,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 = react.useContext(ItemSettingsContext).submenuCloseDelay;
     var _a = react.useContext(MenuListItemContext), isParentOpen = _a.isParentOpen, isSubmenuOpen = _a.isSubmenuOpen, dispatch = _a.dispatch, updateItems = _a.updateItems;
-    var timeoutId = react.useRef(0);
+    var timeoutId = react.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
@@ -1315,7 +1293,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);
         }
@@ -1326,17 +1304,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);
     react.useEffect(function () { return function () { return clearTimeout(timeoutId.current); }; }, []);
     react.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 {
@@ -1347,16 +1325,18 @@ var useItemState = function (itemRef, focusRef, isHovering, isDisabled) {
     };
 };
 
-// @ts-nocheck
 var useMenuChange = function (onMenuChange, isOpen) {
     var prevOpen = react.useRef(isOpen);
     react.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
@@ -1381,18 +1361,17 @@ var useMenuStateAndFocus = function (options) {
     return [__assign({ menuItemFocus: menuItemFocus }, menuProps), toggleMenu, openMenu];
 };
 
-var MenuButton = defineName("MenuButton", react.forwardRef(function MenuButton(_a, ref) {
+var MenuButton = react.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 = react.useMemo(function () { return ({ open: isOpen }); }, [isOpen]);
     return (jsxRuntime.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: propTypes.bool, disabled: propTypes.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,
@@ -1407,7 +1386,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;
@@ -1421,7 +1402,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;
@@ -1460,7 +1441,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;
@@ -1497,19 +1477,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") {
@@ -1566,19 +1543,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;
@@ -1636,12 +1610,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;
         }
@@ -1649,7 +1623,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;
@@ -1684,16 +1660,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 = react.useState({ x: 0, y: 0 }), menuPosition = _j[0], setMenuPosition = _j[1];
-    var _k = react.useState({}), arrowPosition = _k[0], setArrowPosition = _k[1];
+    var _k = react.useState({ x: 0, y: 0 }), arrowPosition = _k[0], setArrowPosition = _k[1];
     var _l = react.useState(), overflowData = _l[0], setOverflowData = _l[1];
     var _m = react.useState(direction), expandedDirection = _m[0], setExpandedDirection = _m[1];
     var _o = react.useState(0), openSubmenuCount = _o[0], setOpenSubmenuCount = _o[1];
     var _p = react.useReducer(function (c) { return c + 1; }, 1), reposSubmenu = _p[0], forceReposSubmenu = _p[1];
     var _q = react.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 = react.useContext(MenuListContext).reposSubmenu || repositionFlag;
-    var menuRef = react.useRef(null);
-    var focusRef = react.useRef();
-    var arrowRef = react.useRef();
+    var menuRef = react.useRef({});
+    var focusRef = react.useRef(null);
+    var arrowRef = react.useRef(null);
     var prevOpen = react.useRef(false);
     var latestMenuSize = react.useRef({ width: 0, height: 0 });
     var latestHandlePosition = react.useRef(function () { });
@@ -1703,30 +1679,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;
@@ -1738,12 +1717,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 = react.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');
             }
@@ -1753,11 +1732,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 });
         }
@@ -1774,7 +1757,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;
@@ -1798,17 +1782,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 };
@@ -1873,7 +1857,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;
     react.useEffect(function () {
         if (hasOverflow || !isOpen || !parentScrollingRef)
             return;
@@ -1914,20 +1898,20 @@ var MenuList = function (_a) {
     }, [reposition]);
     react.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);
             }
         };
@@ -1937,14 +1921,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 = react.useMemo(function () { return ({
@@ -1954,7 +1957,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);
     }
@@ -1965,7 +1969,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 = react.useMemo(function () { return ({
         state: state,
         dir: expandedDirection
@@ -1980,9 +1984,9 @@ var MenuList = function (_a) {
     return (jsxRuntime.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: [jsxRuntime.jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 } }), arrow && (jsxRuntime.jsx("div", { className: _arrowClass, style: __assign(__assign({}, arrowStyle), { position: "absolute", left: arrowPosition.x, top: arrowPosition.y }), ref: arrowRef })), jsxRuntime.jsx(MenuListContext.Provider, __assign({ value: listContext }, { children: jsxRuntime.jsx(MenuListItemContext.Provider, __assign({ value: itemContext }, { children: jsxRuntime.jsx(HoverItemContext.Provider, __assign({ value: hoverItem }, { children: children })) })) }))] })));
 };
 
-var ControlledMenu = react.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 = react.useRef(null);
+    var containerRef = react.useRef();
     var scrollNodesRef = react.useRef({});
     var anchorRef = restProps.anchorRef, state = restProps.state;
     var settings = react.useMemo(function () { return ({
@@ -2020,7 +2024,7 @@ var ControlledMenu = react.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 });
@@ -2035,7 +2039,7 @@ var ControlledMenu = react.forwardRef(function ControlledMenu(_a, externalRef) {
                 setTimeout(function () { return (skipOpen.current = false); }, 300);
             }
         }
-    }, [clickIsWithinMenu, onClose]);
+    }, [clickIsWithinMenu, onClose, saveButtonRef, skipOpen]);
     var handleScreenEventForCancel = react.useCallback(function (ev) {
         if (!clickIsWithinMenu(ev)) {
             ev.preventDefault();
@@ -2044,7 +2048,7 @@ var ControlledMenu = react.forwardRef(function ControlledMenu(_a, externalRef) {
     }, [clickIsWithinMenu]);
     react.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);
@@ -2057,13 +2061,13 @@ var ControlledMenu = react.forwardRef(function ControlledMenu(_a, externalRef) {
             };
         }
         return function () { };
-    }, [handleScreenEventForSave, handleScreenEventForCancel, state]);
+    }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
     var itemSettings = react.useMemo(function () { return ({
         submenuOpenDelay: submenuOpenDelay,
         submenuCloseDelay: submenuCloseDelay
     }); }, [submenuOpenDelay, submenuCloseDelay]);
     var eventHandlers = react.useMemo(function () { return ({
-        handleClick: function (event, isCheckorRadio) {
+        handleClick: function (event, isCheckOrRadio) {
             if (!event.stopPropagation)
                 safeCall(onItemClick, event);
             var keepOpen = event.keepOpen;
@@ -2071,7 +2075,7 @@ var ControlledMenu = react.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, {
@@ -2099,7 +2103,7 @@ var ControlledMenu = react.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) {
@@ -2115,27 +2119,25 @@ var ControlledMenu = react.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 && (jsxRuntime.jsx(SettingsContext.Provider, __assign({ value: settings }, { children: jsxRuntime.jsx(ItemSettingsContext.Provider, __assign({ value: itemSettings }, { children: jsxRuntime.jsx(EventHandlersContext.Provider, __assign({ value: eventHandlers }, { children: jsxRuntime.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 reactDom.createPortal(menuList, document.body);
-    }
-    else if (portal) {
-        return portal.target ? reactDom.createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+    if (portal) {
+        if (typeof portal === "boolean") {
+            if (portal && typeof document !== "undefined") {
+                return reactDom.createPortal(menuList, document.body);
+            }
+        }
+        else {
+            return portal.target ? reactDom.createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+        }
     }
     return menuList;
-});
-ControlledMenu.propTypes /* remove-proptypes */ = __assign(__assign({}, rootMenuPropTypes), { state: propTypes.oneOf(values(MenuStateMap)), anchorPoint: propTypes.exact({
-        x: propTypes.number,
-        y: propTypes.number
-    }), anchorRef: propTypes.object, skipOpen: propTypes.object, captureFocus: propTypes.bool, menuItemFocus: propTypes.exact({
-        position: propTypes.oneOfType([propTypes.string, propTypes.number]),
-        alwaysUpdate: propTypes.bool
-    }), onClose: propTypes.func });
-
-var Menu = react.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 = react.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 = react.useRef(false);
@@ -2143,7 +2145,7 @@ var Menu = react.forwardRef(function Menu(_a, externalRef) {
     var handleClose = react.useCallback(function (e) {
         toggleMenu(false);
         if (e.key)
-            buttonRef.current.focus();
+            buttonRef.current && buttonRef.current.focus();
     }, [toggleMenu]);
     var onClick = function (e) {
         if (skipOpen.current)
@@ -2164,10 +2166,11 @@ var Menu = react.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;
     }
@@ -2178,27 +2181,28 @@ var Menu = react.forwardRef(function Menu(_a, externalRef) {
         closeMenu: function () { return toggleMenu(false); }
     }); });
     return (jsxRuntime.jsxs(react.Fragment, { children: [renderButton, jsxRuntime.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: propTypes.oneOfType([propTypes.element, propTypes.func]).isRequired });
+}
+var Menu = react.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 = react.useContext(SettingsContext);
     var rootMenuRef = settings.rootMenuRef;
     var _c = react.useContext(ItemSettingsContext), submenuOpenDelay = _c.submenuOpenDelay, submenuCloseDelay = _c.submenuCloseDelay;
     var _d = react.useContext(MenuListContext), parentMenuRef = _d.parentMenuRef, parentDir = _d.parentDir, parentOverflow = _d.overflow;
     var _e = react.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 = react.useRef(null);
-    var timeoutId = react.useRef(0);
+    var timeoutId = react.useRef();
     var stopTimer = function () {
         if (timeoutId.current) {
             clearTimeout(timeoutId.current);
-            timeoutId.current = 0;
+            timeoutId.current = undefined;
         }
     };
     var openMenu = function () {
@@ -2210,7 +2214,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)
@@ -2229,7 +2233,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;
@@ -2237,7 +2241,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;
                 }
@@ -2264,19 +2268,19 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
                 break;
         }
     };
-    useItemEffect(isDisabled, itemRef, updateItems);
+    useItemEffect(isDisabled, menuItemRef, updateItems);
     useMenuChange(onMenuChange, isOpen);
     react.useEffect(function () { return function () { return clearTimeout(timeoutId.current); }; }, []);
     react.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]);
     react.useEffect(function () {
         setOpenSubmenuCount(function (count) { return (isOpen ? count + 1 : Math.max(count - 1, 0)); });
     }, [setOpenSubmenuCount, isOpen]);
@@ -2290,7 +2294,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);
             }
         }
@@ -2309,36 +2313,40 @@ var SubMenu = withHovering("SubMenu", function SubMenu(_a) {
         onClick: function () { return openTrigger !== "none" && openMenu(); }
     }, restItemProps);
     var getMenuList = function () {
-        var menuList = (jsxRuntime.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 = (jsxRuntime.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 ? reactDom.createPortal(menuList, container) : menuList;
     };
-    return (jsxRuntime.jsxs("li", __assign({ className: useBEM({ block: menuClass, element: subMenuClass, className: className }), style: { position: "relative" }, role: "presentation", ref: containerRef, onKeyDown: handleKeyDown }, { children: [jsxRuntime.jsx("div", __assign({ role: "menuitem", "aria-haspopup": true, "aria-expanded": isOpen }, mergedItemProps, commonProps(isDisabled, isHovering), { ref: useCombinedRef(externalItemRef, itemRef), className: useBEM({
+    return (jsxRuntime.jsxs("li", __assign({ className: useBEM({ block: menuClass, element: subMenuClass, className: className }), style: { position: "relative" }, role: "presentation", ref: containerRef, onKeyDown: handleKeyDown }, { children: [jsxRuntime.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: react.useMemo(function () { return safeCall(label, modifiers); }, [label, modifiers]) })), state && getMenuList()] })));
-});
-SubMenu.propTypes = __assign(__assign(__assign({}, menuPropTypes), uncontrolledMenuPropTypes), { disabled: propTypes.bool, openTrigger: propTypes.oneOf(["none", "clickOnly"]), label: propTypes.oneOfType([propTypes.node, propTypes.func]), itemProps: propTypes.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 = react.useContext(EventHandlersContext);
     var radioGroup = react.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)
@@ -2357,7 +2365,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);
@@ -2377,21 +2385,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: react.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: react.useMemo(function () { return safeCall(children, modifiers); }, [children, modifiers]) });
     if (isAnchor) {
         return (jsxRuntime.jsx("li", __assign({ role: "presentation" }, { children: jsxRuntime.jsx("a", __assign({ href: href }, menuItemProps)) })));
     }
     else {
         return jsxRuntime.jsx("li", __assign({}, menuItemProps));
     }
-});
-MenuItem.propTypes = __assign(__assign({}, stylePropTypes()), { value: propTypes.any, href: propTypes.string, type: propTypes.oneOf(["checkbox", "radio"]), checked: propTypes.bool, disabled: propTypes.bool, children: propTypes.oneOfType([propTypes.node, propTypes.func]), onClick: propTypes.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 = react.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 = react.useContext(EventHandlersContext).handleClose;
     var modifiers = react.useMemo(function () { return ({
         disabled: isDisabled,
@@ -2402,50 +2410,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 (jsxRuntime.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: propTypes.bool, children: propTypes.func });
+    return (jsxRuntime.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 = react.memo(react.forwardRef(function MenuDivider(_a, externalRef) {
+var MenuDividerFr = function (_a, externalRef) {
     var className = _a.className, restProps = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("li", __assign({ role: "separator" }, restProps, { ref: externalRef, className: useBEM({ block: menuClass, element: menuDividerClass, className: className }) })));
-}));
-MenuDivider.propTypes = __assign({}, stylePropTypes());
+};
+var MenuDivider = react.memo(react.forwardRef(MenuDividerFr));
 
-var MenuHeader = react.memo(react.forwardRef(function MenuHeader(_a, externalRef) {
+var MenuHeaderFr = function (_a, externalRef) {
     var className = _a.className, restProps = __rest(_a, ["className"]);
     return (jsxRuntime.jsx("li", __assign({ role: "presentation" }, restProps, { ref: externalRef, className: useBEM({ block: menuClass, element: menuHeaderClass, className: className }) })));
-}));
-MenuHeader.propTypes = __assign({}, stylePropTypes());
+};
+var MenuHeader = react.memo(react.forwardRef(MenuHeaderFr));
 
-var MenuGroup = react.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 = react.useRef(null);
     var _b = react.useState(), overflowStyle = _b[0], setOverflowStyle = _b[1];
     var _c = react.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 (jsxRuntime.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: propTypes.bool });
+};
+var MenuGroup = react.forwardRef(MenuGroupFr);
 
-var MenuRadioGroup = react.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 = react.useMemo(function () { return ({ name: name, value: value, onRadioChange: onRadioChange }); }, [name, value, onRadioChange]);
     return (jsxRuntime.jsx(RadioGroupContext.Provider, __assign({ value: contextValue }, { children: jsxRuntime.jsx("li", __assign({ role: "presentation" }, { children: jsxRuntime.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: propTypes.string, value: propTypes.any, onRadioChange: propTypes.func });
+};
+var MenuRadioGroup = react.forwardRef(MenuRadioGroupFr);
 
 var useGridPopoverHook = function (props, save) {
     var cellEditorParams = props.cellEditorParams, saving = props.saving, updateValue = props.updateValue;
@@ -2499,7 +2508,18 @@ var GridRenderPopoutMenuCell = function (props) {
     var _a, _b, _c;
     var checkUpdating = react.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 (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsxRuntime.jsx(lui.LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md" }) })));
 };
 
@@ -2533,7 +2553,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
     react.useEffect(function () {
         var _a;
@@ -2582,7 +2602,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]);
@@ -2590,27 +2610,48 @@ var GridFormMultiSelect = function (props) {
                                 var _b;
                                 var ref = _a.ref;
                                 return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.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()); } }) })));
-                            } })), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] })), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                            } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] })), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                     var _a;
-                    return item.value === MenuSeparatorString$1 ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
+                    return item.value === MenuSeparatorString$1 ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
                                     e.keepOpen = true;
-                                    // onSelectMenuOption(itemIndex, e.value);
-                                    return false;
-                                } }, { children: jsxRuntime.jsx(lui.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: jsxRuntime.jsx(lui.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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                    }, onChange: function () {
+                                        /*Do nothing, change handled by menuItem*/
+                                    } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsxRuntime.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)));
                 })] })) })));
 };
 
@@ -2997,7 +3038,7 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [filteredValues, options, selectItemHandler, stopEditing]);
-    return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [formProps.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item", index: -1 }, { children: function (_a) {
+    return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [formProps.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
                             return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.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); } }) })));
@@ -3160,6 +3201,8 @@ var GridPopoverTextInput = function (colDef) {
 };
 
 exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
+exports.ControlledMenu = ControlledMenu;
+exports.FocusableItem = FocusableItem;
 exports.GenericMultiEditCellClass = GenericMultiEditCellClass;
 exports.Grid = Grid;
 exports.GridCell = GridCell;
@@ -3185,6 +3228,14 @@ exports.GridPopoverTextArea = GridPopoverTextArea;
 exports.GridPopoverTextInput = GridPopoverTextInput;
 exports.GridRenderPopoutMenuCell = GridRenderPopoutMenuCell;
 exports.GridRendererGenericCell = GridRendererGenericCell;
+exports.Menu = Menu;
+exports.MenuButton = MenuButton;
+exports.MenuDivider = MenuDivider;
+exports.MenuGroup = MenuGroup;
+exports.MenuHeader = MenuHeader;
+exports.MenuItem = MenuItem;
+exports.MenuRadioGroup = MenuRadioGroup;
+exports.SubMenu = SubMenu;
 exports.TextAreaInput = TextAreaInput;
 exports.TextInputFormatted = TextInputFormatted;
 exports.UpdatingContext = UpdatingContext;
@@ -3198,6 +3249,7 @@ exports.hasParentClass = hasParentClass;
 exports.isFloat = isFloat;
 exports.isNotEmpty = isNotEmpty;
 exports.useGridPopoverHook = useGridPopoverHook;
+exports.useMenuState = useMenuState;
 exports.usePostSortRowsHook = usePostSortRowsHook;
 exports.wait = wait;
 //# sourceMappingURL=index.js.map