@linzjs/step-ag-grid 1.4.6 → 1.4.8

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

@@ -1,10 +1,9 @@
-import { createContext, useRef, useContext, useCallback, useState, useEffect, useMemo, useLayoutEffect, memo, forwardRef, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+import { createContext, useRef, useContext, useCallback, useState, useEffect, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { castArray, remove, flatten, isEmpty, delay, sortBy, last, difference, xorBy, 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 { 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';
@@ -468,9 +467,11 @@ var GridContextProvider = function (props) {
                                             }
                                             // This is needed to trigger postSortRowsHook
                                             gridApi.refreshClientSideRowModel();
-                                            stopEditing();
                                         }
-                                        setSaving && setSaving(false);
+                                        else {
+                                            // Don't set saving if ok as the form has already closed
+                                            setSaving && setSaving(false);
+                                        }
                                         return [2 /*return*/, ok];
                                 }
                             });
@@ -867,41 +868,55 @@ var GridLoadableCell = function (props) {
 var GridIcon = function (props) { return (jsx(LuiIcon, { name: props.icon, title: props.title, alt: props.title, size: "md", className: "AgGridGenericCellRenderer-".concat(props.icon, "Icon") })); };
 
 var GridRendererGenericCell = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c;
     var checkUpdating = useContext(UpdatingContext).checkUpdating;
-    var cellRendererParams = (_a = props.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams;
+    var colDef = props.colDef;
+    var cellRendererParams = colDef.cellRendererParams;
     var warningFn = cellRendererParams === null || cellRendererParams === void 0 ? void 0 : cellRendererParams.warning;
     var warningText = warningFn ? warningFn(props) : undefined;
     var infoFn = cellRendererParams === null || cellRendererParams === void 0 ? void 0 : cellRendererParams.info;
     var infoText = infoFn ? infoFn(props) : undefined;
     var defaultFormatter = function (props) { return props.value; };
-    var formatter = (_c = (_b = props.colDef) === null || _b === void 0 ? void 0 : _b.valueFormatter) !== null && _c !== void 0 ? _c : defaultFormatter;
+    var formatter = (_a = colDef.valueFormatter) !== null && _a !== void 0 ? _a : defaultFormatter;
     if (typeof formatter === "string") {
         console.error("valueFormatter must be a function");
         return jsx("span", { children: "valueFormatter must be a function" });
     }
     var formatted = formatter(props);
-    return (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_g = (_e = (_d = props.colDef) === null || _d === void 0 ? void 0 : _d.field) !== null && _e !== void 0 ? _e : (_f = props.colDef) === null || _f === void 0 ? void 0 : _f.colId) !== null && _g !== void 0 ? _g : "", props.data.id) }, { children: jsxs(Fragment, { children: [typeof warningText === "string" && jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsx(GridIcon, { icon: "ic_info", title: infoText }), jsx("span", __assign({ title: formatted }, { children: formatted }))] }) })));
+    return (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_c = (_b = colDef.field) !== null && _b !== void 0 ? _b : colDef.colId) !== null && _c !== void 0 ? _c : "", props.data.id) }, { children: jsxs(Fragment, { children: [typeof warningText === "string" && jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsx(GridIcon, { icon: "ic_info", title: infoText }), jsx("span", __assign({ title: formatted }, { children: formatted }))] }) })));
 };
 
-var GridCellRenderer = function (cellRendererParams) {
-    var _a, _b, _c, _d, _e;
+var GridCellRenderer = function (props) {
+    var _a, _b, _c;
     var checkUpdating = useContext(UpdatingContext).checkUpdating;
-    var colDef = cellRendererParams.colDef;
-    return ((_a = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.oldCellRenderer) ? (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_e = (_c = (_b = cellRendererParams.colDef) === null || _b === void 0 ? void 0 : _b.field) !== null && _c !== void 0 ? _c : (_d = cellRendererParams.colDef) === null || _d === void 0 ? void 0 : _d.colId) !== null && _e !== void 0 ? _e : "", cellRendererParams.data.id) }, { children: jsx(colDef.cellRendererParams.oldCellRenderer, __assign({}, cellRendererParams)) }))) : (jsx(GridRendererGenericCell, __assign({}, cellRendererParams)));
+    var colDef = props.colDef;
+    var rendererParams = colDef.cellRendererParams;
+    var warningFn = rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.warning;
+    var warningText = warningFn ? warningFn(props) : undefined;
+    var infoFn = rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.info;
+    var infoText = infoFn ? infoFn(props) : undefined;
+    return ((_a = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.originalCellRenderer) ? (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_c = (_b = colDef.field) !== null && _b !== void 0 ? _b : colDef.colId) !== null && _c !== void 0 ? _c : "", props.data.id) }, { children: jsxs(Fragment, { children: [typeof warningText === "string" && jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsx(GridIcon, { icon: "ic_info", title: infoText }), jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))] }) }))) : (jsx(GridRendererGenericCell, __assign({}, props)));
 };
 /**
  * For editing a text area.
  */
 var GridCell = function (props) {
     var _a;
-    return __assign(__assign(__assign({ cellRenderer: GridCellRenderer, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true }, (props.cellEditorParams && {
+    return __assign(__assign(__assign(__assign({ sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true }, (props.cellEditorParams && {
         cellClass: ((_a = props === null || props === void 0 ? void 0 : props.cellEditorParams) === null || _a === void 0 ? void 0 : _a.multiEdit) ? GenericMultiEditCellClass : undefined,
         editable: true,
         cellEditor: GenericCellEditorComponent
-    })), props), { cellRendererParams: __assign({ originalCellRender: props.cellRenderer }, props.cellRendererParams) });
+    })), { 
+        // Default value formatter, otherwise react freaks out on objects
+        valueFormatter: function (params) {
+            var types = ["number", "undefined", "boolean", "string"];
+            if (types.includes(typeof params.value))
+                return params.value;
+            else
+                return JSON.stringify(params.value);
+        } }), props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
 };
-var GenericCellEditorComponent = function (props) {
+var GenericCellEditorComponentFr = function (props, _) {
     var _a, _b, _c;
     var _d = useContext(GridContext), updatingCells = _d.updatingCells, getSelectedRows = _d.getSelectedRows;
     var colDef = props.colDef, data = props.data;
@@ -930,7 +945,8 @@ var GenericCellEditorComponent = function (props) {
     if (cellEditorParams == null)
         return jsx(Fragment, {});
     return (jsxs(Fragment, { children: [jsx("div", { children: colDef.cellRenderer ? jsx(colDef.cellRenderer, __assign({}, props, { saving: saving })) : props.value }), (cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.form) && (jsx(cellEditorParams.form, { cellEditorParams: props, updateValue: updateValue, saving: saving, formProps: formProps, value: value, field: field, selectedRows: selectedRows }))] }));
-};
+};
+var GenericCellEditorComponent = forwardRef(GenericCellEditorComponentFr);
 
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
@@ -1067,7 +1083,6 @@ var MenuStateMap = Object.freeze({
 
 var isMenuOpen = function (state) { return !!state && state[0] === "o"; };
 var batchedUpdates = unstable_batchedUpdates || (function (callback) { return callback(); });
-var values = Object.values || (function (obj) { return Object.keys(obj).map(function (key) { return obj[key]; }); });
 var floatEqual = function (a, b, diff) {
     if (diff === void 0) { diff = 0.0001; }
     return Math.abs(a - b) < diff;
@@ -1138,36 +1153,6 @@ function commonProps(isDisabled, isHovering) {
 }
 var indexOfNode = function (nodeList, node) { return findIndex(nodeList, node); };
 
-var stylePropTypes = function (name) {
-    var _a;
-    return (_a = {},
-        _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: 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,
-        exact({
-            open: bool,
-            close: bool,
-            item: bool
-        }),
-    ]), transitionTimeout: number, boundingBoxRef: object, boundingBoxPadding: string, reposition: oneOf(["auto", "initial"]), repositionFlag: oneOfType([string, number]), viewScroll: oneOf(["auto", "close", "initial"]), submenuOpenDelay: number, submenuCloseDelay: number, portal: oneOfType([
-        bool,
-        exact({
-            target: object,
-            stablePosition: bool
-        }),
-    ]), theming: string, onItemClick: func });
-// Menu and SubMenu
-({
-    instanceRef: oneOfType([object, func]),
-    onMenuChange: func
-});
-
 var withHovering = function (name, WrappedComponent) {
     var Component = memo(WrappedComponent);
     var WithHovering = forwardRef(function (props, ref) {
@@ -1382,17 +1367,17 @@ var useMenuStateAndFocus = function (options) {
     return [__assign({ menuItemFocus: menuItemFocus }, menuProps), toggleMenu, openMenu];
 };
 
-forwardRef(function MenuButton(_a, ref) {
+var MenuButton = forwardRef(function MenuButton(_a, ref) {
     var className = _a.className, isOpen = _a.isOpen, disabled = _a.disabled, children = _a.children, restProps = __rest(_a, ["className", "isOpen", "disabled", "children"]);
     var modifiers = useMemo(function () { return ({ open: isOpen }); }, [isOpen]);
     return (jsx("button", __assign({ "aria-haspopup": true, "aria-expanded": isOpen, "aria-disabled": disabled || undefined, type: "button", disabled: disabled }, restProps, { ref: ref, className: useBEM({ block: menuButtonClass, modifiers: modifiers, className: className }) }, { children: children })));
 });
 
 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,
@@ -1743,7 +1728,7 @@ var MenuList = function (_a) {
         endTransition && safeCall(endTransition);
     };
     var handlePosition = useCallback(function (noOverflowCheck) {
-        if (!containerRef.current) {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
             if (process.env.NODE_ENV !== "production") {
                 console.error('[React-Menu] Menu cannot be positioned properly as container ref is null. If you need to initialise `state` prop to "open" for ControlledMenu, please see this solution: https://codesandbox.io/s/initial-open-sp10wn');
             }
@@ -1942,10 +1927,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);
@@ -1988,9 +1990,9 @@ var MenuList = function (_a) {
     return (jsxs("ul", __assign({ role: "menu", "aria-label": ariaLabel }, mergeProps({ onKeyDown: onKeyDown, onAnimationEnd: onAnimationEnd }, restProps), commonProps(isDisabled), { ref: useCombinedRef(externalRef, menuRef), className: useBEM({ block: menuClass, modifiers: modifiers, className: menuClassName }), style: __assign(__assign(__assign({}, menuStyle), overflowStyle), { margin: 0, display: state === "closed" ? "none" : undefined, position: "absolute", left: menuPosition.x, top: menuPosition.y }) }, { children: [jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 } }), arrow && (jsx("div", { className: _arrowClass, style: __assign(__assign({}, arrowStyle), { position: "absolute", left: arrowPosition.x, top: arrowPosition.y }), ref: arrowRef })), jsx(MenuListContext.Provider, __assign({ value: listContext }, { children: jsx(MenuListItemContext.Provider, __assign({ value: itemContext }, { children: jsx(HoverItemContext.Provider, __assign({ value: hoverItem }, { children: children })) })) }))] })));
 };
 
-var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
+var ControlledMenuFr = function (_a, externalRef) {
     var ariaLabel = _a["aria-label"], className = _a.className, containerProps = _a.containerProps, initialMounted = _a.initialMounted, unmountOnClose = _a.unmountOnClose, transition = _a.transition, transitionTimeout = _a.transitionTimeout, boundingBoxRef = _a.boundingBoxRef, boundingBoxPadding = _a.boundingBoxPadding, _b = _a.reposition, reposition = _b === void 0 ? "auto" : _b, _c = _a.submenuOpenDelay, submenuOpenDelay = _c === void 0 ? 300 : _c, _d = _a.submenuCloseDelay, submenuCloseDelay = _d === void 0 ? 150 : _d, skipOpen = _a.skipOpen, _e = _a.viewScroll, viewScroll = _e === void 0 ? "initial" : _e, portal = _a.portal, theming = _a.theming, onItemClick = _a.onItemClick, onClose = _a.onClose, saveButtonRef = _a.saveButtonRef, restProps = __rest(_a, ["aria-label", "className", "containerProps", "initialMounted", "unmountOnClose", "transition", "transitionTimeout", "boundingBoxRef", "boundingBoxPadding", "reposition", "submenuOpenDelay", "submenuCloseDelay", "skipOpen", "viewScroll", "portal", "theming", "onItemClick", "onClose", "saveButtonRef"]);
-    var containerRef = useRef(null);
+    var containerRef = useRef();
     var scrollNodesRef = useRef({});
     var anchorRef = restProps.anchorRef, state = restProps.state;
     var settings = useMemo(function () { return ({
@@ -2028,7 +2030,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             // the cell doesn't refresh during update if save is invoked from a native event
             // This doesn't happen in React18
             // To work around it, I invoke the save by clicking on a passed in invisible button ref
-            if (saveButtonRef.current)
+            if (saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current)
                 saveButtonRef.current.click();
             else
                 safeCall(onClose, { reason: CloseReason.BLUR });
@@ -2043,7 +2045,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
                 setTimeout(function () { return (skipOpen.current = false); }, 300);
             }
         }
-    }, [clickIsWithinMenu, onClose]);
+    }, [clickIsWithinMenu, onClose, saveButtonRef, skipOpen]);
     var handleScreenEventForCancel = useCallback(function (ev) {
         if (!clickIsWithinMenu(ev)) {
             ev.preventDefault();
@@ -2052,7 +2054,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
     }, [clickIsWithinMenu]);
     useEffect(function () {
         if (isMenuOpen(state)) {
-            var thisDocument_1 = anchorRef.current ? anchorRef.current.ownerDocument : document;
+            var thisDocument_1 = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
             thisDocument_1.addEventListener("mousedown", handleScreenEventForCancel, true);
             thisDocument_1.addEventListener("mouseup", handleScreenEventForSave, true);
             thisDocument_1.addEventListener("click", handleScreenEventForCancel, true);
@@ -2065,13 +2067,13 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             };
         }
         return function () { };
-    }, [handleScreenEventForSave, handleScreenEventForCancel, state]);
+    }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
     var itemSettings = useMemo(function () { return ({
         submenuOpenDelay: submenuOpenDelay,
         submenuCloseDelay: submenuCloseDelay
     }); }, [submenuOpenDelay, submenuCloseDelay]);
     var eventHandlers = useMemo(function () { return ({
-        handleClick: function (event, isCheckorRadio) {
+        handleClick: function (event, isCheckOrRadio) {
             if (!event.stopPropagation)
                 safeCall(onItemClick, event);
             var keepOpen = event.keepOpen;
@@ -2079,7 +2081,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
                 // if event.keepOpen is undefined, the following default behaviour is used
                 // According to WAI-ARIA Authoring Practices 1.1
                 // Keep menu open when check or radio is invoked by SPACE key
-                keepOpen = isCheckorRadio && event.key === Keys.SPACE;
+                keepOpen = isCheckOrRadio && event.key === Keys.SPACE;
             }
             if (!keepOpen) {
                 safeCall(onClose, {
@@ -2107,7 +2109,7 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             // If a user clicks on the menu button when a menu is open, we need to close the menu.
             // However, a blur event will be fired prior to the click event on menu button,
             // which makes the menu first close and then open again.
-            // If this happen, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
+            // If this happens, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
             // and makes it difficult to determine whether onBlur is fired because of clicking on menu button.
             // This is a workaround approach which sets a flag to skip a following click event.
             if (skipOpen) {
@@ -2123,24 +2125,22 @@ var ControlledMenu = forwardRef(function ControlledMenu(_a, externalRef) {
             modifiers: modifiers,
             className: className
         }), style: __assign(__assign({}, containerProps === null || containerProps === void 0 ? void 0 : containerProps.style), { position: "relative" }), ref: containerRef }, { children: state && (jsx(SettingsContext.Provider, __assign({ value: settings }, { children: jsx(ItemSettingsContext.Provider, __assign({ value: itemSettings }, { children: jsx(EventHandlersContext.Provider, __assign({ value: eventHandlers }, { children: jsx(MenuList, __assign({}, restProps, { ariaLabel: ariaLabel || "Menu", externalRef: externalRef, containerRef: containerRef, onClose: onClose })) })) })) }))) })));
-    if (portal === true && anchorRef.current !== undefined) {
+    if (portal === true && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== undefined) {
         portal = { target: anchorRef.current.ownerDocument.body };
     }
-    if (portal === true && typeof document !== "undefined") {
-        return createPortal(menuList, document.body);
-    }
-    else if (portal) {
-        return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+    if (portal) {
+        if (typeof portal === "boolean") {
+            if (portal && typeof document !== "undefined") {
+                return createPortal(menuList, document.body);
+            }
+        }
+        else {
+            return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+        }
     }
     return menuList;
-});
-ControlledMenu.propTypes /* remove-proptypes */ = __assign(__assign({}, rootMenuPropTypes), { state: oneOf(values(MenuStateMap)), anchorPoint: exact({
-        x: number,
-        y: number
-    }), anchorRef: object, skipOpen: object, captureFocus: bool, menuItemFocus: exact({
-        position: oneOfType([string, number]),
-        alwaysUpdate: bool
-    }), onClose: func });
+};
+var ControlledMenu = forwardRef(ControlledMenuFr);
 
 function MenuFr(_a, externalRef) {
     var ariaLabel = _a["aria-label"], menuButton = _a.menuButton, instanceRef = _a.instanceRef, onMenuChange = _a.onMenuChange, restProps = __rest(_a, ["aria-label", "menuButton", "instanceRef", "onMenuChange"]);
@@ -2188,7 +2188,7 @@ function MenuFr(_a, externalRef) {
     }); });
     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 }))] }));
 }
-forwardRef(MenuFr);
+var Menu = 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"]);
@@ -2330,7 +2330,7 @@ var SubMenuFr = function (_a) {
                     className: itemClassName
                 }) }, { children: 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"]);
@@ -2399,7 +2399,6 @@ var MenuItemFr = function (_a) {
         return jsx("li", __assign({}, menuItemProps));
     }
 };
-// FIXME matt as any
 var MenuItem = withHovering("MenuItem", MenuItemFr);
 
 var FocusableItemFr = function (_a) {
@@ -2431,7 +2430,7 @@ 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 }) })));
 };
-memo(forwardRef(MenuHeaderFr));
+var MenuHeader = memo(forwardRef(MenuHeaderFr));
 
 var MenuGroupFr = function (_a, externalRef) {
     var className = _a.className, style = _a.style, takeOverflow = _a.takeOverflow, restProps = __rest(_a, ["className", "style", "takeOverflow"]);
@@ -2454,14 +2453,14 @@ var MenuGroupFr = function (_a, externalRef) {
     }, [overflowStyle]);
     return (jsx("div", __assign({}, restProps, { ref: useCombinedRef(externalRef, ref), className: useBEM({ block: menuClass, element: menuGroupClass, className: className }), style: __assign(__assign({}, style), overflowStyle) })));
 };
-forwardRef(MenuGroupFr);
+var MenuGroup = 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 = 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 }) })) })) })));
 };
-forwardRef(MenuRadioGroupFr);
+var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
 var useGridPopoverHook = function (props, save) {
     var cellEditorParams = props.cellEditorParams, saving = props.saving, updateValue = props.updateValue;
@@ -2515,7 +2514,18 @@ var GridRenderPopoutMenuCell = function (props) {
     var _a, _b, _c;
     var checkUpdating = useContext(UpdatingContext).checkUpdating;
     var isLoading = checkUpdating((_b = (_a = props.colDef) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : "", props.data.id);
-    var disabled = !((_c = props.colDef) === null || _c === void 0 ? void 0 : _c.editable);
+    var editable = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.editable;
+    var disabled = !(typeof editable === "function"
+        ? editable({
+            node: props.node,
+            data: props.data,
+            column: props.column,
+            colDef: props.colDef,
+            api: props.api,
+            columnApi: props.columnApi,
+            context: props.context
+        })
+        : editable);
     return (jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsx(LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md" }) })));
 };
 
@@ -2598,7 +2608,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]);
@@ -2606,35 +2616,48 @@ var GridFormMultiSelect = function (props) {
                                 var _b;
                                 var ref = _a.ref;
                                 return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = formProps.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: "", onChange: function (e) { return setFilter(e.target.value.toLowerCase()); } }) })));
-                            } })), jsx(MenuDivider, {}, "$$divider_filter")] })), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                            } }), "filter"), jsx(MenuDivider, {}, "$$divider_filter")] })), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                     var _a;
-                    return item.value === MenuSeparatorString$1 ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs(Fragment, { children: [jsx(MenuItem, __assign({ onClick: function (e) {
-                                    // FIXME Matt Event type guessed here
+                    return item.value === MenuSeparatorString$1 ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs(Fragment$1, { children: [jsx(MenuItem, __assign({ onClick: function (e) {
                                     e.keepOpen = true;
-                                    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: 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));
+                                }, onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        if (e.key === "Enter")
+                                            triggerSave().then();
+                                        else if (e.key === " ") {
+                                            if (selectedValues.includes(item.value)) {
+                                                setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
+                                            }
+                                            else {
+                                                setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
+                                            }
+                                            e.preventDefault();
+                                            e.stopPropagation();
                                         }
-                                        else {
-                                            setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
+                                        return [2 /*return*/];
+                                    });
+                                }); } }, { children: jsx(LuiCheckboxInput, { isChecked: selectedValues.includes(item.value), value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
+                                        onClick: function (e) {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            return false;
                                         }
-                                    } }) }), "".concat(item.value)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                    }, onChange: function () {
+                                        /*Do nothing, change handled by menuItem*/
+                                    } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
                                     return item.subComponent &&
                                         item.subComponent({
                                             setValue: function (value) {
                                                 subSelectedValues.current[item.value] = value;
                                             }
                                         }, ref);
-                                } }), "".concat(item.value, "_subcomponent")))] }));
+                                } }), "".concat(item.value, "_subcomponent")))] }, "".concat(index)));
                 })] })) })));
 };
 
@@ -2716,7 +2739,7 @@ var GridFormPopoutMenu = function (props) {
     });
     var popoverWrapper = useGridPopoverHook(props).popoverWrapper;
     return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions }, { children: jsx("div", __assign({ className: "Grid-popoverContainerList" }, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
-                return item.label === MenuSeparator ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (jsx(MenuItem, __assign({ onClick: function () { return actionClick(item); }, disabled: !!item.disabled || !(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.includes(item)), title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)));
+                return item.label === MenuSeparator ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsx(MenuItem, __assign({ onClick: function () { return actionClick(item); }, disabled: !!item.disabled || !(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.includes(item)), title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label))));
             }) })) })));
 };
 
@@ -3183,5 +3206,5 @@ var GridPopoverTextInput = function (colDef) {
     })));
 };
 
-export { ComponentLoadingWrapper, GenericMultiEditCellClass, Grid, GridCell, GridContext, GridContextProvider, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoutMenu, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, TextAreaInput, TextInputFormatted, UpdatingContext, UpdatingContextProvider, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, usePostSortRowsHook, wait };
+export { ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericMultiEditCellClass, Grid, GridCell, GridContext, GridContextProvider, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoutMenu, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuItem, MenuRadioGroup, SubMenu, TextAreaInput, TextInputFormatted, UpdatingContext, UpdatingContextProvider, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map