rsuite 5.2.4 → 5.4.2

package/cjs/Input/Input.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent, TypeAttributes, FormControlBaseProps } from '../@types/common';
+import { PrependParameters } from '../@types/utils';
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps {
+export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, Omit<FormControlBaseProps, 'onChange'> {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */
@@ -12,7 +13,7 @@ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<
     size?: TypeAttributes.Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
-    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: PrependParameters<React.ChangeEventHandler<HTMLInputElement>, [value: string]>;
     /** Called on press enter */
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }

package/cjs/InputGroup/InputGroup.d.ts

@@ -5,7 +5,7 @@ import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types
 export declare const InputGroupContext: React.Context<{
     onFocus: () => void;
     onBlur: () => void;
-}>;
+} | null>;
 export interface InputGroupProps extends WithAsProps {
     /** Sets the composition content internally */
     inside?: boolean;

package/cjs/InputNumber/InputNumber.js

@@ -128,11 +128,15 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       value = _useControlled[0],
       setValue = _useControlled[1];
 
-  var _useState = (0, _react.useState)(disableMaxValue(value, max)),
+  var _useState = (0, _react.useState)(function () {
+    return disableMaxValue(value, max);
+  }),
       disabledUpButton = _useState[0],
       setDisabledUpButton = _useState[1];
 
-  var _useState2 = (0, _react.useState)(disableMinValue(value, min)),
+  var _useState2 = (0, _react.useState)(function () {
+    return disableMinValue(value, min);
+  }),
       disabledDownButton = _useState2[0],
       setDisabledDownButton = _useState2[1];
 

package/cjs/InputPicker/InputAutosize.js

@@ -91,10 +91,10 @@ var InputAutosize = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       _props$inputId = props.inputId,
       inputId = _props$inputId === void 0 ? uniqueId : _props$inputId,
       tabIndex = props.tabIndex;
-  var rootRef = (0, _react.useRef)();
-  var inputRef = (0, _react.useRef)();
-  var sizerRef = (0, _react.useRef)();
-  var placeholderRef = (0, _react.useRef)();
+  var rootRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var sizerRef = (0, _react.useRef)(null);
+  var placeholderRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       root: rootRef.current,

package/cjs/InputPicker/InputPicker.d.ts

@@ -9,11 +9,11 @@ export interface InputPickerContextProps {
     /** Multiple selections are allowed */
     multi?: boolean;
     /** Tag related props. */
-    tagProps?: TagProps;
+    tagProps: TagProps;
     /**
      * Set the trigger for creating tags. only valid when creatable
      */
-    trigger?: TriggerType | TriggerType[];
+    trigger: TriggerType | TriggerType[];
     /**
      * No overlay provides options
      */

package/cjs/InputPicker/InputPicker.js

@@ -53,7 +53,10 @@ var _InputSearch = _interopRequireDefault(require("./InputSearch"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var InputPickerContext = /*#__PURE__*/_react.default.createContext({});
+var InputPickerContext = /*#__PURE__*/_react.default.createContext({
+  tagProps: {},
+  trigger: 'Enter'
+});
 
 exports.InputPickerContext = InputPickerContext;
 
@@ -76,7 +79,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       readOnly = props.readOnly,
       plaintext = props.plaintext,
       defaultValue = props.defaultValue,
-      defaultOpen = props.defaultOpen,
+      _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$disabledItemVa = props.disabledItemValues,
       disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
       overrideLocale = props.locale,
@@ -137,9 +141,9 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
 
-  var overlayRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var triggerRef = (0, _react.useRef)();
+  var overlayRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var triggerRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)();
 
   var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),
@@ -466,8 +470,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var events = {
     onMenuPressBackspace: multi ? removeLastItem : handleClean,
     onMenuKeyDown: onKeyDown,
-    onMenuPressEnter: null,
-    onKeyDown: null
+    onMenuPressEnter: undefined,
+    onKeyDown: undefined
   };
   var handleKeyPress = (0, _react.useCallback)(function (event) {
     // When typing a space, create a tag.
@@ -527,7 +531,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {
     // 'Create option "{0}"' =>  Create option "xxxxx"
-    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.tplTransform)(locale === null || locale === void 0 ? void 0 : locale.createOption, label)) : label;
+    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.tplTransform)(locale.createOption, label)) : label;
     return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
   };
 
@@ -638,7 +642,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       maxHeight: menuMaxHeight,
       data: items,
       group: !(0, _isUndefined.default)(groupBy),
-      onSelect: multi ? handleCheckTag : handleSelectItem,
+      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any
+      ,
       renderMenuGroup: renderMenuGroup,
       renderMenuItem: renderDropdownMenuItem,
       virtualized: virtualized
@@ -731,7 +736,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     plaintext: plaintext,
     ref: targetRef,
     as: toggleAs,
-    tabIndex: null,
+    tabIndex: undefined,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,

package/cjs/List/ListContext.d.ts

@@ -4,7 +4,7 @@ import useManager from './helper/useManager';
 export declare type ListContextType = {
     bordered?: boolean;
     size?: ListProps['size'];
-    register?: ReturnType<typeof useManager>['listItemRegister'];
+    register: ReturnType<typeof useManager>['listItemRegister'];
 };
 declare const ListContext: React.Context<ListContextType>;
 export default ListContext;

package/cjs/List/ListContext.js

@@ -7,9 +7,16 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
 var ListContext = /*#__PURE__*/_react.default.createContext({
   bordered: false,
-  size: 'md'
+  size: 'md',
+  register: function register() {
+    return {
+      unregister: _noop.default
+    };
+  }
 });
 
 var _default = ListContext;

package/cjs/List/helper/AutoScroller.js

@@ -21,8 +21,10 @@ var AutoScroller = /*#__PURE__*/function () {
   var _proto = AutoScroller.prototype;
 
   _proto.clear = function clear() {
-    clearInterval(this.interval);
-    this.interval = null;
+    if (this.interval !== null) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
   };
 
   _proto.update = function update(_ref) {

package/cjs/List/helper/useManager.d.ts

@@ -2,10 +2,10 @@ import { Offset } from '../../@types/common';
 export declare type Collection = string | number;
 export interface ManagedItem {
     node: HTMLElement;
-    edgeOffset: Offset;
+    edgeOffset: Offset | null;
     info: {
         collection: Collection;
-        index: number;
+        index?: number;
         disabled?: boolean;
     };
 }
@@ -13,7 +13,7 @@ declare const useManager: () => {
     listItemRegister: (item: ManagedItem) => {
         unregister: () => void;
     };
-    getManagedItem: (node: HTMLElement) => ManagedItem;
+    getManagedItem: (node: HTMLElement) => ManagedItem | undefined;
     getOrderedItems: (collection: any) => ManagedItem[];
 };
 export default useManager;

package/cjs/List/helper/useManager.js

@@ -38,7 +38,7 @@ var useManager = function useManager() {
   }, []);
   var getOrderedItems = (0, _react.useCallback)(function (collection) {
     return collection != null ? [].concat(collectionMapRef.current[collection]).sort(function (nodeInfo1, nodeInfo2) {
-      return nodeInfo1.info.index - nodeInfo2.info.index;
+      return Number(nodeInfo1.info.index) - Number(nodeInfo2.info.index);
     }) : [];
   }, []);
   return {

package/cjs/List/helper/useSortHelper.d.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import { Collection } from './useManager';
+import { Collection, ManagedItem } from './useManager';
 interface MovedItemInfo {
     collection: Collection;
     node: HTMLElement;
@@ -18,9 +18,9 @@ export declare type SortConfig = {
 declare const useSortHelper: (config: SortConfig) => {
     handleStart: MouseEventHandler<Element>;
     handleEnd: MouseEventHandler<Element>;
-    containerRef: import("react").MutableRefObject<HTMLDivElement>;
+    containerRef: import("react").RefObject<HTMLDivElement>;
     sorting: boolean;
-    register: (item: import("./useManager").ManagedItem) => {
+    register: (item: ManagedItem) => {
         unregister: () => void;
     };
 };

package/cjs/List/helper/useSortHelper.js

@@ -50,7 +50,7 @@ var useSortHelper = function useSortHelper(config) {
    * */
 
   var handlePress = (0, _react.useCallback)(function (mouseDownEvent, targetNode, curManagedItem) {
-    var _activeNodeHelper;
+    var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;
 
     if (!isMounted()) return;
     var listItemBaseClassName = targetNode.classList[0]; // get list item base className
@@ -60,8 +60,8 @@ var useSortHelper = function useSortHelper(config) {
 
     var containerElement = containerRef.current;
     var activeNode = curManagedItem.node;
-    var activeNodeOldIndex = curManagedItem.info.index;
-    var activeNodeNextIndex = curManagedItem.info.index;
+    var activeNodeOldIndex = (_curManagedItem$info$ = curManagedItem.info.index) !== null && _curManagedItem$info$ !== void 0 ? _curManagedItem$info$ : 0;
+    var activeNodeNextIndex = (_curManagedItem$info$2 = curManagedItem.info.index) !== null && _curManagedItem$info$2 !== void 0 ? _curManagedItem$info$2 : 0;
     var activeNodeHolderTranslate = {
       x: 0,
       y: 0
@@ -132,8 +132,10 @@ var useSortHelper = function useSortHelper(config) {
       var activeNodeHeight = parseFloat(activeNodeStyle.height) || 0;
 
       for (var i = 0, len = listItemManagerRefs.length; i < len; i++) {
+        var _listItemManagerRefs$;
+
         var currentNode = listItemManagerRefs[i].node;
-        var currentNodeIndex = listItemManagerRefs[i].info.index;
+        var currentNodeIndex = (_listItemManagerRefs$ = listItemManagerRefs[i].info.index) !== null && _listItemManagerRefs$ !== void 0 ? _listItemManagerRefs$ : 0;
         var offsetY = activeNodeBoundingClientRect.height > currentNode.offsetHeight ? currentNode.offsetHeight / 2 : activeNodeBoundingClientRect.height / 2;
         var translate = {
           x: 0,

package/cjs/List/helper/utils.d.ts

@@ -11,6 +11,6 @@ export declare function setTransitionDuration(node: HTMLElement, duration?: numb
 /**
  * find closest target node from source node
  * */
-export declare function closestNode(sourceNode: HTMLElement, judge: (target: HTMLElement) => boolean): HTMLElement;
+export declare function closestNode(sourceNode: HTMLElement, judge: (target: HTMLElement) => boolean): HTMLElement | null;
 export declare function getEdgeOffset(node: HTMLElement, parent: HTMLElement, offset?: Offset): Offset;
-export declare function getScrollingParent(el: HTMLElement): HTMLElement;
+export declare function getScrollingParent(el: HTMLElement): HTMLElement | null;

package/cjs/MaskedInput/TextMask.d.ts

@@ -34,10 +34,10 @@ export declare type TextMaskProps = TextMaskBaseProps & React.HTMLAttributes<HTM
 };
 declare const TextMask: React.ForwardRefExoticComponent<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;
+    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/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");
@@ -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,7 +61,7 @@ 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 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;
@@ -94,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
       });
     }
@@ -109,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) {
@@ -348,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, {
@@ -364,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,17 +48,17 @@ function MenuItem(props) {
   }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`
 
   var handleMouseDown = (0, _react.useCallback)(function () {
-    if (!hasFocus) {
+    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {
       dispatch({
         type: _MenuContext.MenuActionTypes.MoveFocus,
         to: _MenuContext.MoveFocusTo.Specific,
         id: menuitemRef.current.id
       });
     }
-  }, [hasFocus, dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
+  }, [dispatch, hasFocus]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = (0, _react.useCallback)(function () {
-    if (!hasFocus) {
+    if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {
       dispatch({
         type: _MenuContext.MenuActionTypes.MoveFocus,
         to: _MenuContext.MoveFocusTo.Specific,
@@ -70,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: {
@@ -78,7 +82,7 @@ function MenuItem(props) {
       }
     });
     return function () {
-      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+      dispatch({
         type: _MenuContext.MenuActionTypes.UnregisterItem,
         id: menuitemElement.id
       });

package/cjs/Menu/Menubar.js

@@ -9,6 +9,8 @@ exports.default = Menubar;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _MenuContext = _interopRequireWildcard(require("./MenuContext"));
 
 var _utils = require("../utils");
@@ -19,8 +21,6 @@ var _useMenu = _interopRequireDefault(require("./useMenu"));
 
 // Headless ARIA `menubar`
 function Menubar(_ref) {
-  var _items$activeItemInde;
-
   var _ref$vertical = _ref.vertical,
       vertical = _ref$vertical === void 0 ? false : _ref$vertical,
       children = _ref.children,
@@ -32,7 +32,7 @@ function Menubar(_ref) {
       items = _menubar$.items,
       activeItemIndex = _menubar$.activeItemIndex,
       dispatch = menubar[1];
-  var menubarElementRef = (0, _react.useRef)();
+  var menubarElementRef = (0, _react.useRef)(null);
   var onFocus = (0, _react.useCallback)(function (event) {
     // Focus moves inside Menubar
     if ((0, _events.isFocusEntering)(event)) {
@@ -58,7 +58,7 @@ function Menubar(_ref) {
       rtl = _useCustom.rtl;
 
   var onKeyDown = (0, _react.useCallback)(function (event) {
-    var activeItem = items[activeItemIndex];
+    var activeItemElement = (0, _isNil.default)(activeItemIndex) ? null : items[activeItemIndex].element;
 
     switch (true) {
       case !vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:
@@ -104,10 +104,10 @@ function Menubar(_ref) {
       case !vertical && event.key === _utils.KEY_VALUES.DOWN:
       case vertical && !rtl && event.key === _utils.KEY_VALUES.RIGHT:
       case vertical && rtl && event.key === _utils.KEY_VALUES.LEFT:
-        if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.element.getAttribute('aria-haspopup')) === 'menu') {
+        if ((activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.getAttribute('aria-haspopup')) === 'menu') {
           event.preventDefault();
           event.stopPropagation();
-          activeItem.element.click();
+          activeItemElement.click();
         }
 
         break;
@@ -116,7 +116,7 @@ function Menubar(_ref) {
       case event.key === _utils.KEY_VALUES.SPACE:
         event.preventDefault();
         event.stopPropagation();
-        activeItem === null || activeItem === void 0 ? void 0 : activeItem.element.click();
+        activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.click();
         break;
     }
   }, [rtl, items, activeItemIndex, dispatch, vertical]); // Only used for handling click events bubbling from children
@@ -138,7 +138,7 @@ function Menubar(_ref) {
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     onClick: onClick,
-    'aria-activedescendant': (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element.id,
+    'aria-activedescendant': (0, _isNil.default)(activeItemIndex) ? undefined : items[activeItemIndex].element.id,
     'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'
 
   }, menubarElementRef));