@linzjs/step-ag-grid 1.4.5 → 1.4.6

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

@@ -1,10 +1,10 @@
 import { createContext, useRef, useContext, useCallback, useState, useEffect, useMemo, useLayoutEffect, memo, forwardRef, 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 { oneOf, object, bool, number, string, oneOfType, exact, func } from 'prop-types';
 import { useTransition } from 'react-transition-state';
 import debounce from 'debounce-promise';
 import { v4 } from 'uuid';
@@ -983,10 +983,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 +1000,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 +1010,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,7 +1065,6 @@ 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]; }); });
@@ -1071,10 +1075,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 +1102,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 +1116,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,13 +1136,7 @@ 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 indexOfNode = function (nodeList, node) { return findIndex(nodeList, node); };
 
 var stylePropTypes = function (name) {
     var _a;
@@ -1141,8 +1144,9 @@ var stylePropTypes = function (name) {
         _a[name ? "".concat(name, "ClassName") : "className"] = oneOfType([string, func]),
         _a);
 };
+var Direction = oneOf(["left", "right", "top", "bottom"]);
 // 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"]) });
+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: Direction, 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,
@@ -1159,22 +1163,21 @@ var rootMenuPropTypes = __assign(__assign({}, menuPropTypes), { containerProps:
         }),
     ]), theming: string, onItemClick: func });
 // Menu and SubMenu
-var uncontrolledMenuPropTypes = {
+({
     instanceRef: oneOfType([object, func]),
     onMenuChange: func
-};
+});
 
 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 +1187,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 +1200,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 +1238,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 +1276,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 +1314,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 +1325,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 +1346,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 +1382,17 @@ var useMenuStateAndFocus = function (options) {
     return [__assign({ menuItemFocus: menuItemFocus }, menuProps), toggleMenu, openMenu];
 };
 
-var MenuButton = defineName("MenuButton", forwardRef(function MenuButton(_a, ref) {
+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;
     var menuRect = menuRef.current.getBoundingClientRect();
     var containerRect = containerRef.current.getBoundingClientRect();
-    var thisWindow = containerRef.current.ownerDocument.defaultView;
+    var thisWindow = (_a = containerRef.current.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
     var boundingRect = menuScroll === window || menuScroll === thisWindow
         ? {
             left: 0,
@@ -1399,7 +1407,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 +1423,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 +1462,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 +1498,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 +1564,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 +1631,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 +1644,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 +1681,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 +1700,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,9 +1738,9 @@ 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) {
@@ -1745,11 +1753,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 +1778,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 +1803,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 +1878,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 +1919,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 +1942,16 @@ 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;
                 // 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();
+                    (_a = focusRef.current) === null || _a === void 0 ? void 0 : _a.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 +1961,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 +1973,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
@@ -2126,8 +2142,8 @@ ControlledMenu.propTypes /* remove-proptypes */ = __assign(__assign({}, rootMenu
         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"]);
+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 +2151,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 +2172,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 +2187,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 });
+}
+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 +2220,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 +2239,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 +2247,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 +2274,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 +2300,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 +2319,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())) });
+};
+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 +2371,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 +2391,22 @@ 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 });
+};
+// FIXME matt as any
+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 +2417,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());
+};
+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 });
+};
+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 });
+};
+forwardRef(MenuRadioGroupFr);
 
 var useGridPopoverHook = function (props, save) {
     var cellEditorParams = props.cellEditorParams, saving = props.saving, updateValue = props.updateValue;
@@ -2525,7 +2549,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;
@@ -2585,10 +2609,18 @@ var GridFormMultiSelect = function (props) {
                             } })), 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) {
+                                    // FIXME Matt Event type guessed here
                                     e.keepOpen = true;
-                                    // onSelectMenuOption(itemIndex, e.value);
+                                    if (selectedValues.includes(e.value)) {
+                                        setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
+                                    }
+                                    else {
+                                        setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
+                                    }
                                     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) {
+                                }, onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                                    return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
+                                }); }); } }, { 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));
                                         }
@@ -2989,7 +3021,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); } }) })));