rsuite 5.2.1 → 5.3.0

package/cjs/MaskedInput/MaskedInput.d.ts

@@ -1,43 +1,6 @@
-import React from 'react';
-import { MaskType, MaskFunctionType, ConfigType } from './types';
-/**
- * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
- */
-interface TextMaskProps {
-    /**
-     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
-     */
-    guide?: boolean;
-    /**
-     * `mask` is an array or a function that defines how the user input is going to be masked.
-     */
-    mask?: MaskType | MaskFunctionType | boolean;
-    /**
-     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
-     * in place of the regular placeholder when the input element value is empty.
-     */
-    showMask?: boolean;
-    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
-    placeholderChar?: string;
-    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
-    keepCharPositions?: boolean;
-    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
-    pipe?: (conformedValue: string, config: ConfigType) => string;
-}
-export declare type MaskedInputProps = TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-};
-declare const MaskedInput: React.ForwardRefExoticComponent<TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
+import { InputProps } from '../Input';
+import type { TextMaskProps } from './TextMask';
+import { RsRefForwardingComponent } from '../@types/common';
+export declare type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+declare const MaskedInput: RsRefForwardingComponent<'input', MaskedInputProps>;
 export default MaskedInput;

package/cjs/MaskedInput/MaskedInput.js

@@ -1,80 +1,26 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports.default = void 0;
 
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _omit = _interopRequireDefault(require("lodash/omit"));
+var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TextMask = _interopRequireDefault(require("./TextMask"));
 
-var _createTextMaskInputElement = _interopRequireDefault(require("./createTextMaskInputElement"));
-
-var _utils = require("../utils");
-
-var defaultRender = function defaultRender(ref, props) {
-  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-    ref: ref
-  }, props));
-};
+var _Input = _interopRequireDefault(require("../Input"));
 
 var MaskedInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var mask = props.mask,
-      _props$guide = props.guide,
-      guide = _props$guide === void 0 ? true : _props$guide,
-      placeholderChar = props.placeholderChar,
-      value = props.value,
-      showMask = props.showMask,
-      pipe = props.pipe,
-      _props$render = props.render,
-      render = _props$render === void 0 ? defaultRender : _props$render,
-      onChange = props.onChange,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
-  var inputRef = (0, _react.useRef)(null);
-  var textMaskInputElement = (0, _react.useRef)();
-  var initTextMask = (0, _react.useCallback)(function () {
-    var _textMaskInputElement;
-
-    textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
-      inputElement: inputRef.current
-    }, props));
-    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
-  }, [props, value]);
-  var handleChange = (0, _react.useCallback)(function (event) {
-    var _textMaskInputElement2;
-
-    (_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
-    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-  }, [onChange]);
-  (0, _react.useEffect)(function () {
-    initTextMask();
-  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
-  return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
-    onChange: handleChange,
-    defaultValue: value
-  }, (0, _omit.default)(rest, ['keepCharPositions'])));
+  var _props$as = props.as,
+      inputAs = _props$as === void 0 ? _TextMask.default : _props$as;
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, props, {
+    as: inputAs,
+    ref: ref
+  }));
 });
 
-MaskedInput.displayName = 'MaskedInput';
-MaskedInput.propTypes = {
-  render: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
-  guide: _propTypes.default.bool,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  pipe: _propTypes.default.func,
-  placeholderChar: _propTypes.default.string,
-  keepCharPositions: _propTypes.default.bool,
-  showMask: _propTypes.default.bool
-};
 var _default = MaskedInput;
 exports.default = _default;

package/cjs/MaskedInput/TextMask.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MaskType, MaskFunctionType, ConfigType } from './types';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+interface TextMaskBaseProps {
+    /**
+     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
+     */
+    guide?: boolean;
+    /**
+     * `mask` is an array or a function that defines how the user input is going to be masked.
+     */
+    mask?: MaskType | MaskFunctionType | boolean;
+    /**
+     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
+     * in place of the regular placeholder when the input element value is empty.
+     */
+    showMask?: boolean;
+    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
+    placeholderChar?: string;
+    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
+    keepCharPositions?: boolean;
+    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
+    pipe?: (conformedValue: string, config: ConfigType) => string;
+}
+export declare type TextMaskProps = TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+};
+declare const TextMask: React.ForwardRefExoticComponent<TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: ((ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any) | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | number | undefined;
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TextMask;

package/cjs/MaskedInput/TextMask.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _createTextMaskInputElement = _interopRequireDefault(require("./createTextMaskInputElement"));
+
+var _utils = require("../utils");
+
+var defaultRender = function defaultRender(ref, props) {
+  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    ref: ref
+  }, props));
+};
+
+var TextMask = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var mask = props.mask,
+      _props$guide = props.guide,
+      guide = _props$guide === void 0 ? true : _props$guide,
+      placeholderChar = props.placeholderChar,
+      value = props.value,
+      showMask = props.showMask,
+      pipe = props.pipe,
+      _props$render = props.render,
+      render = _props$render === void 0 ? defaultRender : _props$render,
+      onChange = props.onChange,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
+  var inputRef = (0, _react.useRef)(null);
+  var textMaskInputElement = (0, _react.useRef)();
+  var initTextMask = (0, _react.useCallback)(function () {
+    var _textMaskInputElement;
+
+    textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
+      inputElement: inputRef.current
+    }, props));
+    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
+  }, [props, value]);
+  var handleChange = (0, _react.useCallback)(function (event) {
+    var _textMaskInputElement2;
+
+    (_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [onChange]);
+  (0, _react.useEffect)(function () {
+    initTextMask();
+  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
+  return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
+    onChange: handleChange,
+    defaultValue: value
+  }, (0, _omit.default)(rest, ['keepCharPositions'])));
+});
+
+TextMask.displayName = 'TextMask';
+TextMask.propTypes = {
+  render: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
+  guide: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  pipe: _propTypes.default.func,
+  placeholderChar: _propTypes.default.string,
+  keepCharPositions: _propTypes.default.bool,
+  showMask: _propTypes.default.bool
+};
+var _default = TextMask;
+exports.default = _default;

package/cjs/MaskedInput/adjustCaretPosition.d.ts

@@ -1,11 +1,11 @@
 export default function adjustCaretPosition({ previousConformedValue, previousPlaceholder, currentCaretPosition, conformedValue, rawValue, placeholderChar, placeholder, indexesOfPipedChars, caretTrapIndexes }: {
-    previousConformedValue?: string;
-    previousPlaceholder?: string;
-    currentCaretPosition?: number;
+    previousConformedValue?: string | undefined;
+    previousPlaceholder?: string | undefined;
+    currentCaretPosition?: number | undefined;
     conformedValue: any;
     rawValue: any;
     placeholderChar: any;
     placeholder: any;
-    indexesOfPipedChars?: any[];
-    caretTrapIndexes?: any[];
-}): number;
+    indexesOfPipedChars?: string[] | undefined;
+    caretTrapIndexes?: number[] | undefined;
+}): number | undefined;

package/cjs/MaskedInput/conformToMask.js

@@ -49,7 +49,8 @@ function conformToMask(rawValue, mask, config) {
       placeholderChar = _config$placeholderCh === void 0 ? _utilities.defaultPlaceholderChar : _config$placeholderCh,
       _config$placeholder = _config.placeholder,
       placeholder = _config$placeholder === void 0 ? (0, _utilities.convertMaskToPlaceholder)(mask, placeholderChar) : _config$placeholder,
-      currentCaretPosition = _config.currentCaretPosition,
+      _config$currentCaretP = _config.currentCaretPosition,
+      currentCaretPosition = _config$currentCaretP === void 0 ? 0 : _config$currentCaretP,
       keepCharPositions = _config.keepCharPositions; // The configs below indicate that the user wants the algorithm to work in *no guide* mode
 
   var suppressGuide = guide === false && previousConformedValue !== undefined; // Calculate lengths once for performance
@@ -130,9 +131,9 @@ function conformToMask(rawValue, mask, config) {
         // or we find at least one character that we can map.
         while (rawValueArr.length > 0) {
           // Let's retrieve the first user character in the queue of characters we have left
-          var _rawValueArr$shift = rawValueArr.shift(),
-              rawValueChar = _rawValueArr$shift.char,
-              isNew = _rawValueArr$shift.isNew; // If the character we got from the user input is a placeholder character (which happens
+          var _ref = rawValueArr.shift(),
+              rawValueChar = _ref.char,
+              isNew = _ref.isNew; // If the character we got from the user input is a placeholder character (which happens
           // regularly because user input could be something like (540) 90_-____, which includes
           // a bunch of `_` which are placeholder characters) and we are not in *no guide* mode,
           // then we map this placeholder character to the current spot in the placeholder

package/cjs/MaskedInput/createTextMaskInputElement.d.ts

@@ -1,7 +1,7 @@
 export default function createTextMaskInputElement(config: any): {
     state: {
-        previousConformedValue: any;
-        previousPlaceholder: any;
+        previousConformedValue: undefined;
+        previousPlaceholder: undefined;
     };
     update(rawValue: any, { inputElement, mask: providedMask, guide, pipe, placeholderChar, keepCharPositions, showMask }?: any): void;
 };

package/cjs/MaskedInput/utilities.d.ts

@@ -3,5 +3,5 @@ export declare const defaultPlaceholderChar = "_";
 export declare function convertMaskToPlaceholder(mask?: MaskType | MaskFunctionType, placeholderChar?: string): string;
 export declare function processCaretTraps(mask: any): {
     maskWithoutCaretTraps: any;
-    indexes: any[];
+    indexes: number[];
 };

package/cjs/Menu/Menu.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _MenuContext = _interopRequireWildcard(require("./MenuContext"));
 
 var _utils = require("../utils");
@@ -21,7 +23,7 @@ var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
 
 var _useMenu = _interopRequireDefault(require("./useMenu"));
 
-var _useFocus = _interopRequireDefault(require("../utils/useFocus"));
+var _useFocus2 = _interopRequireDefault(require("../utils/useFocus"));
 
 var _useClickOutside = _interopRequireDefault(require("../utils/useClickOutside"));
 
@@ -45,8 +47,8 @@ function Menu(props) {
       renderMenuButton = props.renderMenuButton,
       renderMenuPopup = props.renderMenuPopup,
       onToggleMenu = props.onToggleMenu;
-  var buttonElementRef = (0, _react.useRef)();
-  var menuElementRef = (0, _react.useRef)();
+  var buttonElementRef = (0, _react.useRef)(null);
+  var menuElementRef = (0, _react.useRef)(null);
   var parentMenu = (0, _react.useContext)(_MenuContext.default);
   var isSubmenu = !!parentMenu;
   var menu = (0, _useMenu.default)();
@@ -59,8 +61,11 @@ function Menu(props) {
   var _useCustom = (0, _utils.useCustom)('Menu'),
       rtl = _useCustom.rtl;
 
-  var activeItem = (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
-  var menuFocus = (0, _useFocus.default)(menuElementRef);
+  var activeItem = (0, _isNil.default)(activeItemIndex) ? null : (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
+
+  var _useFocus = (0, _useFocus2.default)(menuElementRef),
+      grabFocus = _useFocus.grab;
+
   var openMenu = (0, _react.useCallback)(function (event) {
     dispatch({
       type: _MenuContext.MenuActionTypes.OpenMenu
@@ -74,8 +79,8 @@ function Menu(props) {
     }
 
     onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(true, event);
-    menuFocus.grab();
-  }, [dispatch, onToggleMenu, menuFocus]);
+    grabFocus();
+  }, [dispatch, onToggleMenu, grabFocus]);
   var closeMenu = (0, _react.useCallback)(function (event, returnFocusToButton) {
     if (returnFocusToButton === void 0) {
       returnFocusToButton = true;
@@ -91,7 +96,9 @@ function Menu(props) {
     onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(false, event);
 
     if (returnFocusToButton) {
-      buttonElementRef.current.focus({
+      var _buttonElementRef$cur;
+
+      (_buttonElementRef$cur = buttonElementRef.current) === null || _buttonElementRef$cur === void 0 ? void 0 : _buttonElementRef$cur.focus({
         preventScroll: true
       });
     }
@@ -106,7 +113,9 @@ function Menu(props) {
   (0, _useClickOutside.default)({
     enabled: open,
     isOutside: function isOutside(event) {
-      return !buttonElementRef.current.contains(event.target) && !menuElementRef.current.contains(event.target);
+      var _buttonElementRef$cur2, _menuElementRef$curre;
+
+      return !((_buttonElementRef$cur2 = buttonElementRef.current) !== null && _buttonElementRef$cur2 !== void 0 && _buttonElementRef$cur2.contains(event.target)) && !((_menuElementRef$curre = menuElementRef.current) !== null && _menuElementRef$curre !== void 0 && _menuElementRef$curre.contains(event.target));
     },
     // fixme if clicking on a focusable element, don't move focus to menu button
     handle: function handle(event) {
@@ -170,39 +179,48 @@ function Menu(props) {
     if (disabled) return;
     openMenu(event);
   }, [open, disabled, openMenu]);
-  var buttonEventHandlers = {
-    onKeyDown: handleButtonKeydown
-  };
-  /**
-   * Bind event of trigger,
-   * not used in  in the expanded state of '<Sidenav>'
-   */
-
-  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {
-    buttonEventHandlers.onClick = handleButtonClick;
-  }
+  var buttonEventHandlers = (0, _react.useMemo)(function () {
+    var buttonEventHandlers = {
+      onKeyDown: handleButtonKeydown
+    };
+    /**
+     * Bind event of trigger,
+     * not used in  in the expanded state of '<Sidenav>'
+     */
+
+    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {
+      buttonEventHandlers.onClick = handleButtonClick;
+    }
 
-  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {
-    buttonEventHandlers.onContextMenu = handleButtonContextMenu;
-  }
+    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {
+      buttonEventHandlers.onContextMenu = handleButtonContextMenu;
+    }
 
+    return buttonEventHandlers;
+  }, [openMenuOn, handleButtonKeydown, handleButtonClick, handleButtonContextMenu]);
   var buttonId = (0, _useUniqueId.default)('menubutton-');
-  var menuId = (0, _useUniqueId.default)('menu-'); // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
-
-  var buttonAriaAttributes = {
-    role: 'button',
-    'aria-haspopup': 'menu',
-    'aria-expanded': open || undefined,
-    // it's recommend to remove aria-expanded when menu is hidden
-    'aria-controls': menuId
-  };
-  var buttonProps = (0, _extends2.default)({
-    id: buttonId
-  }, buttonAriaAttributes, buttonEventHandlers, {
-    // render props
-    open: open
-  });
-  var customMenuButton = renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
+  var menuId = (0, _useUniqueId.default)('menu-');
+  var buttonAriaAttributes = (0, _react.useMemo)(function () {
+    // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
+    return {
+      role: 'button',
+      'aria-haspopup': 'menu',
+      'aria-expanded': open || undefined,
+      // it's recommend to remove aria-expanded when menu is hidden
+      'aria-controls': menuId
+    };
+  }, [open, menuId]);
+  var buttonProps = (0, _react.useMemo)(function () {
+    return (0, _extends2.default)({
+      id: buttonId
+    }, buttonAriaAttributes, buttonEventHandlers, {
+      // render props
+      open: open
+    });
+  }, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);
+  var customMenuButton = (0, _react.useMemo)(function () {
+    return renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
+  }, [renderMenuButton, buttonProps, buttonElementRef]);
   var buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
     ref: buttonElementRef
   }, buttonProps), menuButtonText);
@@ -336,7 +354,8 @@ function Menu(props) {
   });
   var customMenuPopup = renderMenuPopup === null || renderMenuPopup === void 0 ? void 0 : renderMenuPopup((0, _extends2.default)({}, menuProps, {
     open: open
-  }), menuElementRef);
+  }), menuElementRef); // fixme Wrong children here
+
   var menuElement = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
     ref: menuElementRef
   }, menuProps, {
@@ -352,7 +371,7 @@ function Menu(props) {
       closeMenu(e);
     }
   }, [disabled, closeMenu]);
-  var rootElementRef = (0, _react.useRef)();
+  var rootElementRef = (0, _react.useRef)(null);
   var handleContainerBlur = (0, _react.useCallback)(function (event) {
     if ((0, _events.isFocusLeaving)(event)) {
       closeMenu(event, false);

package/cjs/Menu/MenuContext.d.ts

@@ -47,5 +47,5 @@ export declare type MenuAction = {
     to: MoveFocusTo.Specific;
     id: string;
 };
-declare const MenuContext: React.Context<MenuContextProps>;
+declare const MenuContext: React.Context<MenuContextProps | null>;
 export default MenuContext;

package/cjs/Menu/MenuItem.d.ts

@@ -8,7 +8,7 @@ export interface MenuItemProps {
     /** Render prop */
     children: (menuitem: React.LiHTMLAttributes<HTMLLIElement> & MenuitemRenderProps, ref: React.Ref<HTMLLIElement>) => React.ReactElement;
     /** Callback when menuitem is being activated */
-    onActivate?: (event: React.SyntheticEvent) => void;
+    onActivate?: React.MouseEventHandler;
 }
 export interface MenuitemRenderProps {
     selected: boolean;

package/cjs/Menu/MenuItem.js

@@ -11,6 +11,8 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
 
 var _MenuContext = _interopRequireWildcard(require("./MenuContext"));
@@ -19,22 +21,24 @@ var _MenuContext = _interopRequireWildcard(require("./MenuContext"));
  * Headless ARIA `menuitem`
  */
 function MenuItem(props) {
-  var _menuState$items$menu;
-
   var children = props.children,
-      selected = props.selected,
-      disabled = props.disabled,
+      _props$selected = props.selected,
+      selected = _props$selected === void 0 ? false : _props$selected,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
       onActivate = props.onActivate;
-  var menuitemRef = (0, _react.useRef)();
+  var menuitemRef = (0, _react.useRef)(null);
   var menuitemId = (0, _useUniqueId.default)('menuitem-');
-  var menu = (0, _react.useContext)(_MenuContext.default); // fixme make sure <MenuItem> is used inside a <Menu>
+  var menu = (0, _react.useContext)(_MenuContext.default);
 
-  var _ref = menu !== null && menu !== void 0 ? menu : [],
-      menuState = _ref[0],
-      dispatch = _ref[1]; // Whether this menuitem has focus (indicated by `aria-activedescendant` from parent menu)
+  if (!menu) {
+    throw new Error('<MenuItem> must be rendered within a <Menu>');
+  }
 
+  var menuState = menu[0],
+      dispatch = menu[1]; // Whether this menuitem has focus (indicated by `aria-activedescendant` from parent menu)
 
-  var hasFocus = (menuState === null || menuState === void 0 ? void 0 : (_menuState$items$menu = menuState.items[menuState === null || menuState === void 0 ? void 0 : menuState.activeItemIndex]) === null || _menuState$items$menu === void 0 ? void 0 : _menuState$items$menu.element) === menuitemRef.current && !!menuitemRef.current;
+  var hasFocus = !(0, _isNil.default)(menuitemRef.current) && !(0, _isNil.default)(menuState.activeItemIndex) && menuState.items[menuState.activeItemIndex].element === menuitemRef.current;
   var handleClick = (0, _react.useCallback)(function (event) {
     if (disabled) {
       return;
@@ -44,20 +48,24 @@ function MenuItem(props) {
   }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`
 
   var handleMouseDown = (0, _react.useCallback)(function () {
-    dispatch({
-      type: _MenuContext.MenuActionTypes.MoveFocus,
-      to: _MenuContext.MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
+    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {
+      dispatch({
+        type: _MenuContext.MenuActionTypes.MoveFocus,
+        to: _MenuContext.MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
   }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = (0, _react.useCallback)(function () {
-    dispatch({
-      type: _MenuContext.MenuActionTypes.MoveFocus,
-      to: _MenuContext.MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
-  }, [dispatch]);
+    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {
+      dispatch({
+        type: _MenuContext.MenuActionTypes.MoveFocus,
+        to: _MenuContext.MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, dispatch]);
   var handleMouseLeave = (0, _react.useCallback)(function () {
     dispatch({
       type: _MenuContext.MenuActionTypes.MoveFocus,
@@ -66,7 +74,7 @@ function MenuItem(props) {
   }, [dispatch]);
   (0, _react.useEffect)(function () {
     var menuitemElement = menuitemRef.current;
-    dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+    dispatch({
       type: _MenuContext.MenuActionTypes.RegisterItem,
       element: menuitemElement,
       props: {
@@ -74,7 +82,7 @@ function MenuItem(props) {
       }
     });
     return function () {
-      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+      dispatch({
         type: _MenuContext.MenuActionTypes.UnregisterItem,
         id: menuitemElement.id
       });