@linzjs/step-ag-grid 1.4.6 → 1.4.7

package/dist/index.d.ts

@@ -33,3 +33,4 @@ export { TextAreaInput } from "./src/lui/TextAreaInput";
 export { TextInputFormatted } from "./src/lui/TextInputFormatted";
 export * from "./src/utils/bearing";
 export * from "./src/utils/util";
+export * from "./src/react-menu3/index";

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.
@@ -1075,7 +1077,6 @@ var MenuStateMap = Object.freeze({
 
 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;
@@ -1146,36 +1147,6 @@ function commonProps(isDisabled, isHovering) {
 }
 var indexOfNode = function (nodeList, node) { return lodashEs.findIndex(nodeList, node); };
 
-var stylePropTypes = function (name) {
-    var _a;
-    return (_a = {},
-        _a[name ? "".concat(name, "ClassName") : "className"] = propTypes.oneOfType([propTypes.string, propTypes.func]),
-        _a);
-};
-var Direction = propTypes.oneOf(["left", "right", "top", "bottom"]);
-// 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: Direction, 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
-({
-    instanceRef: propTypes.oneOfType([propTypes.object, propTypes.func]),
-    onMenuChange: propTypes.func
-});
-
 var withHovering = function (name, WrappedComponent) {
     var Component = react.memo(WrappedComponent);
     var WithHovering = react.forwardRef(function (props, ref) {
@@ -1390,17 +1361,17 @@ var useMenuStateAndFocus = function (options) {
     return [__assign({ menuItemFocus: menuItemFocus }, menuProps), toggleMenu, openMenu];
 };
 
-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 })));
 });
 
 var getPositionHelpers = function (containerRef, menuRef, menuScroll, boundingBoxPadding) {
-    var _a;
+    var _a, _b, _c;
     var menuRect = menuRef.current.getBoundingClientRect();
-    var containerRect = containerRef.current.getBoundingClientRect();
-    var thisWindow = (_a = containerRef.current.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+    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,
@@ -1751,7 +1722,7 @@ var MenuList = function (_a) {
         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');
             }
@@ -1950,10 +1921,27 @@ 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;
+                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)) {
-                    (_a = focusRef.current) === null || _a === void 0 ? void 0 : _a.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);
@@ -1996,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 ({
@@ -2036,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 });
@@ -2051,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();
@@ -2060,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);
@@ -2073,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;
@@ -2087,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, {
@@ -2115,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) {
@@ -2131,24 +2119,22 @@ 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 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"]);
@@ -2196,7 +2182,7 @@ function MenuFr(_a, externalRef) {
     }); });
     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 }))] }));
 }
-react.forwardRef(MenuFr);
+var Menu = react.forwardRef(MenuFr);
 
 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"]);
@@ -2338,7 +2324,7 @@ var SubMenuFr = function (_a) {
                     className: itemClassName
                 }) }, { children: react.useMemo(function () { return safeCall(label, modifiers); }, [label, modifiers]) })), state && getMenuList()] })));
 };
-withHovering("SubMenu", SubMenuFr);
+var SubMenu = withHovering("SubMenu", SubMenuFr);
 
 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"]);
@@ -2407,7 +2393,6 @@ var MenuItemFr = function (_a) {
         return jsxRuntime.jsx("li", __assign({}, menuItemProps));
     }
 };
-// FIXME matt as any
 var MenuItem = withHovering("MenuItem", MenuItemFr);
 
 var FocusableItemFr = function (_a) {
@@ -2439,7 +2424,7 @@ 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 }) })));
 };
-react.memo(react.forwardRef(MenuHeaderFr));
+var MenuHeader = react.memo(react.forwardRef(MenuHeaderFr));
 
 var MenuGroupFr = function (_a, externalRef) {
     var className = _a.className, style = _a.style, takeOverflow = _a.takeOverflow, restProps = __rest(_a, ["className", "style", "takeOverflow"]);
@@ -2462,14 +2447,14 @@ var MenuGroupFr = function (_a, externalRef) {
     }, [overflowStyle]);
     return (jsxRuntime.jsx("div", __assign({}, restProps, { ref: useCombinedRef(externalRef, ref), className: useBEM({ block: menuClass, element: menuGroupClass, className: className }), style: __assign(__assign({}, style), overflowStyle) })));
 };
-react.forwardRef(MenuGroupFr);
+var MenuGroup = react.forwardRef(MenuGroupFr);
 
 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 }) })) })) })));
 };
-react.forwardRef(MenuRadioGroupFr);
+var MenuRadioGroup = react.forwardRef(MenuRadioGroupFr);
 
 var useGridPopoverHook = function (props, save) {
     var cellEditorParams = props.cellEditorParams, saving = props.saving, updateValue = props.updateValue;
@@ -2523,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" }) })));
 };
 
@@ -2606,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]);
@@ -2614,35 +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) {
-                                    // FIXME Matt Event type guessed here
+                    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;
-                                    if (selectedValues.includes(e.value)) {
+                                    if (selectedValues.includes(item.value)) {
                                         setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
                                     }
                                     else {
                                         setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
                                     }
-                                    return false;
-                                }, 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: 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));
+                                }, 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)));
                 })] })) })));
 };
 
@@ -3192,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;
@@ -3217,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;
@@ -3230,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