rsuite 5.2.1 → 5.3.0

package/esm/MaskedInput/TextMask.js

@@ -0,0 +1,67 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useEffect, useRef } from 'react';
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+import createTextMaskInputElement from './createTextMaskInputElement';
+import { mergeRefs } from '../utils';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+
+var defaultRender = function defaultRender(ref, props) {
+  return /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref
+  }, props));
+};
+
+var TextMask = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
+
+  var inputRef = useRef(null);
+  var textMaskInputElement = useRef();
+  var initTextMask = useCallback(function () {
+    var _textMaskInputElement;
+
+    textMaskInputElement.current = createTextMaskInputElement(_extends({
+      inputElement: inputRef.current
+    }, props));
+    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
+  }, [props, value]);
+  var handleChange = 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]);
+  useEffect(function () {
+    initTextMask();
+  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
+  return render(mergeRefs(inputRef, ref), _extends({
+    onChange: handleChange,
+    defaultValue: value
+  }, omit(rest, ['keepCharPositions'])));
+});
+TextMask.displayName = 'TextMask';
+TextMask.propTypes = {
+  render: PropTypes.func,
+  onChange: PropTypes.func,
+  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.bool]).isRequired,
+  guide: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  pipe: PropTypes.func,
+  placeholderChar: PropTypes.string,
+  keepCharPositions: PropTypes.bool,
+  showMask: PropTypes.bool
+};
+export default TextMask;

package/esm/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/esm/MaskedInput/conformToMask.js

@@ -41,7 +41,8 @@ export default function conformToMask(rawValue, mask, config) {
       placeholderChar = _config$placeholderCh === void 0 ? defaultPlaceholderChar : _config$placeholderCh,
       _config$placeholder = _config.placeholder,
       placeholder = _config$placeholder === void 0 ? 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
@@ -122,9 +123,9 @@ export default 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/esm/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/esm/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/esm/Menu/Menu.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import isNil from 'lodash/isNil';
 import MenuContext, { MenuActionTypes, MoveFocusTo } from './MenuContext';
 import { KEY_VALUES, useCustom } from '../utils';
 import useUniqueId from '../utils/useUniqueId';
@@ -25,8 +26,8 @@ function Menu(props) {
       renderMenuButton = props.renderMenuButton,
       renderMenuPopup = props.renderMenuPopup,
       onToggleMenu = props.onToggleMenu;
-  var buttonElementRef = useRef();
-  var menuElementRef = useRef();
+  var buttonElementRef = useRef(null);
+  var menuElementRef = useRef(null);
   var parentMenu = useContext(MenuContext);
   var isSubmenu = !!parentMenu;
   var menu = useMenu();
@@ -39,8 +40,11 @@ function Menu(props) {
   var _useCustom = useCustom('Menu'),
       rtl = _useCustom.rtl;
 
-  var activeItem = (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
-  var menuFocus = useFocus(menuElementRef);
+  var activeItem = isNil(activeItemIndex) ? null : (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
+
+  var _useFocus = useFocus(menuElementRef),
+      grabFocus = _useFocus.grab;
+
   var openMenu = useCallback(function (event) {
     dispatch({
       type: MenuActionTypes.OpenMenu
@@ -54,8 +58,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 = useCallback(function (event, returnFocusToButton) {
     if (returnFocusToButton === void 0) {
       returnFocusToButton = true;
@@ -71,7 +75,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
       });
     }
@@ -86,7 +92,9 @@ function Menu(props) {
   useClickOutside({
     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) {
@@ -150,41 +158,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 = 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 = useUniqueId('menubutton-');
-  var menuId = useUniqueId('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 = _extends({
-    id: buttonId
-  }, buttonAriaAttributes, buttonEventHandlers, {
-    // render props
-    open: open
-  });
-
-  var customMenuButton = renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
+  var menuId = useUniqueId('menu-');
+  var buttonAriaAttributes = 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 = useMemo(function () {
+    return _extends({
+      id: buttonId
+    }, buttonAriaAttributes, buttonEventHandlers, {
+      // render props
+      open: open
+    });
+  }, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);
+  var customMenuButton = 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.createElement("button", _extends({
     ref: buttonElementRef
   }, buttonProps), menuButtonText);
@@ -320,7 +335,8 @@ function Menu(props) {
 
   var customMenuPopup = renderMenuPopup === null || renderMenuPopup === void 0 ? void 0 : renderMenuPopup(_extends({}, menuProps, {
     open: open
-  }), menuElementRef);
+  }), menuElementRef); // fixme Wrong children here
+
   var menuElement = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : /*#__PURE__*/React.createElement("ul", _extends({
     ref: menuElementRef
   }, menuProps, {
@@ -336,7 +352,7 @@ function Menu(props) {
       closeMenu(e);
     }
   }, [disabled, closeMenu]);
-  var rootElementRef = useRef();
+  var rootElementRef = useRef(null);
   var handleContainerBlur = useCallback(function (event) {
     if (isFocusLeaving(event)) {
       closeMenu(event, false);

package/esm/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/esm/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/esm/Menu/MenuItem.js

@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import isNil from 'lodash/isNil';
 import useUniqueId from '../utils/useUniqueId';
 import MenuContext, { MenuActionTypes, MoveFocusTo } from './MenuContext';
 
@@ -7,22 +8,24 @@ import MenuContext, { MenuActionTypes, MoveFocusTo } from './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 = useRef();
+  var menuitemRef = useRef(null);
   var menuitemId = useUniqueId('menuitem-');
-  var menu = useContext(MenuContext); // fixme make sure <MenuItem> is used inside a <Menu>
+  var menu = useContext(MenuContext);
 
-  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 = !isNil(menuitemRef.current) && !isNil(menuState.activeItemIndex) && menuState.items[menuState.activeItemIndex].element === menuitemRef.current;
   var handleClick = useCallback(function (event) {
     if (disabled) {
       return;
@@ -32,20 +35,24 @@ function MenuItem(props) {
   }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`
 
   var handleMouseDown = useCallback(function () {
-    dispatch({
-      type: MenuActionTypes.MoveFocus,
-      to: MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
+    if (!isNil(menuitemRef.current) && !hasFocus) {
+      dispatch({
+        type: MenuActionTypes.MoveFocus,
+        to: MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
   }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = useCallback(function () {
-    dispatch({
-      type: MenuActionTypes.MoveFocus,
-      to: MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
-  }, [dispatch]);
+    if (!isNil(menuitemRef.current) && !hasFocus) {
+      dispatch({
+        type: MenuActionTypes.MoveFocus,
+        to: MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, dispatch]);
   var handleMouseLeave = useCallback(function () {
     dispatch({
       type: MenuActionTypes.MoveFocus,
@@ -54,7 +61,7 @@ function MenuItem(props) {
   }, [dispatch]);
   useEffect(function () {
     var menuitemElement = menuitemRef.current;
-    dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+    dispatch({
       type: MenuActionTypes.RegisterItem,
       element: menuitemElement,
       props: {
@@ -62,7 +69,7 @@ function MenuItem(props) {
       }
     });
     return function () {
-      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+      dispatch({
         type: MenuActionTypes.UnregisterItem,
         id: menuitemElement.id
       });

package/esm/Menu/Menubar.js

@@ -1,12 +1,11 @@
 // Headless ARIA `menubar`
 import React, { useCallback, useRef } from 'react';
+import isNil from 'lodash/isNil';
 import MenuContext, { MenuActionTypes, MoveFocusTo } from './MenuContext';
 import { KEY_VALUES, useCustom } from '../utils';
 import { isFocusEntering, isFocusLeaving } from '../utils/events';
 import useMenu from './useMenu';
 export default function Menubar(_ref) {
-  var _items$activeItemInde;
-
   var _ref$vertical = _ref.vertical,
       vertical = _ref$vertical === void 0 ? false : _ref$vertical,
       children = _ref.children,
@@ -18,7 +17,7 @@ export default function Menubar(_ref) {
       items = _menubar$.items,
       activeItemIndex = _menubar$.activeItemIndex,
       dispatch = menubar[1];
-  var menubarElementRef = useRef();
+  var menubarElementRef = useRef(null);
   var onFocus = useCallback(function (event) {
     // Focus moves inside Menubar
     if (isFocusEntering(event)) {
@@ -44,7 +43,7 @@ export default function Menubar(_ref) {
       rtl = _useCustom.rtl;
 
   var onKeyDown = useCallback(function (event) {
-    var activeItem = items[activeItemIndex];
+    var activeItemElement = isNil(activeItemIndex) ? null : items[activeItemIndex].element;
 
     switch (true) {
       case !vertical && !rtl && event.key === KEY_VALUES.RIGHT:
@@ -90,10 +89,10 @@ export default function Menubar(_ref) {
       case !vertical && event.key === KEY_VALUES.DOWN:
       case vertical && !rtl && event.key === KEY_VALUES.RIGHT:
       case vertical && rtl && event.key === 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;
@@ -102,7 +101,7 @@ export default function Menubar(_ref) {
       case event.key === 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
@@ -124,7 +123,7 @@ export default 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': isNil(activeItemIndex) ? undefined : items[activeItemIndex].element.id,
     'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'
 
   }, menubarElementRef));

package/esm/Menu/useMenu.js

@@ -43,8 +43,10 @@ export function menuReducer(state, action) {
 
       switch (action.to) {
         case MoveFocusTo.Next:
-          for (var i = nextActiveItemIndex === null ? 0 : activeItemIndex + 1; i < items.length; i++) {
-            if (!items[i].props.disabled) {
+          for (var i = activeItemIndex === null ? 0 : activeItemIndex + 1; i < items.length; i++) {
+            var _items$i$props;
+
+            if (!((_items$i$props = items[i].props) !== null && _items$i$props !== void 0 && _items$i$props.disabled)) {
               nextActiveItemIndex = i;
               break;
             }
@@ -53,8 +55,10 @@ export function menuReducer(state, action) {
           break;
 
         case MoveFocusTo.Prev:
-          for (var _i = nextActiveItemIndex === null ? items.length - 1 : activeItemIndex - 1; _i >= 0; _i--) {
-            if (!items[_i].props.disabled) {
+          for (var _i = activeItemIndex === null ? items.length - 1 : activeItemIndex - 1; _i >= 0; _i--) {
+            var _items$_i$props;
+
+            if (!((_items$_i$props = items[_i].props) !== null && _items$_i$props !== void 0 && _items$_i$props.disabled)) {
               nextActiveItemIndex = _i;
               break;
             }
@@ -64,7 +68,9 @@ export function menuReducer(state, action) {
 
         case MoveFocusTo.First:
           for (var _i2 = 0; _i2 < items.length; _i2++) {
-            if (!items[_i2].props.disabled) {
+            var _items$_i2$props;
+
+            if (!((_items$_i2$props = items[_i2].props) !== null && _items$_i2$props !== void 0 && _items$_i2$props.disabled)) {
               nextActiveItemIndex = _i2;
               break;
             }
@@ -74,7 +80,9 @@ export function menuReducer(state, action) {
 
         case MoveFocusTo.Last:
           for (var _i3 = items.length - 1; _i3 >= 0; _i3--) {
-            if (!items[_i3].props.disabled) {
+            var _items$_i3$props;
+
+            if (!((_items$_i3$props = items[_i3].props) !== null && _items$_i3$props !== void 0 && _items$_i3$props.disabled)) {
               nextActiveItemIndex = _i3;
               break;
             }
@@ -84,7 +92,9 @@ export function menuReducer(state, action) {
 
         case MoveFocusTo.Specific:
           for (var _i4 = 0; _i4 < items.length; _i4++) {
-            if (items[_i4].element.id === action.id && !items[_i4].props.disabled) {
+            var _items$_i4$props;
+
+            if (items[_i4].element.id === action.id && !((_items$_i4$props = items[_i4].props) !== null && _items$_i4$props !== void 0 && _items$_i4$props.disabled)) {
               nextActiveItemIndex = _i4;
               break;
             }

package/esm/Modal/Modal.js

@@ -8,7 +8,7 @@ import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import on from 'dom-lib/on';
-import getTransitionEnd from 'dom-lib/getTransitionEnd';
+import getAnimationEnd from 'dom-lib/getAnimationEnd';
 import BaseModal, { modalPropTypes } from '../Overlay/Modal';
 import Bounce from '../Animation/Bounce';
 import { useClassNames, mergeRefs, SIZE } from '../utils';
@@ -43,7 +43,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
       _props$overflow = props.overflow,
       overflow = _props$overflow === void 0 ? true : _props$overflow,
-      drawer = props.drawer,
+      _props$drawer = props.drawer,
+      drawer = _props$drawer === void 0 ? false : _props$drawer,
       onClose = props.onClose,
       onEntered = props.onEntered,
       onEntering = props.onEntering,
@@ -66,7 +67,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, prefix(size, {
     full: full
   }));
-  var dialogRef = useRef();
+  var dialogRef = useRef(null);
   var transitionEndListener = useRef(); // The style of the Modal body will be updated with the size of the window or container.
 
   var _useBodyStyles = useBodyStyles(dialogRef, {
@@ -98,9 +99,13 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.
     if (backdrop === 'static') {
       setShake(true);
-      transitionEndListener.current = on(dialogRef.current, getTransitionEnd(), function () {
-        setShake(false);
-      });
+
+      if (!transitionEndListener.current && dialogRef.current) {
+        //fix: https://github.com/rsuite/rsuite/blob/a93d13c14fb20cc58204babe3331d3c3da3fe1fd/src/Modal/styles/index.less#L59
+        transitionEndListener.current = on(dialogRef.current, getAnimationEnd(), function () {
+          setShake(false);
+        });
+      }
     }
   }, [backdrop]);
   var handleExited = useCallback(function (node) {
@@ -109,6 +114,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onExited === null || onExited === void 0 ? void 0 : onExited(node);
     onDestroyEvents();
     (_transitionEndListene = transitionEndListener.current) === null || _transitionEndListene === void 0 ? void 0 : _transitionEndListene.off();
+    transitionEndListener.current = null;
   }, [onDestroyEvents, onExited]);
   var handleEntered = useCallback(function (node) {
     onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);

package/esm/Modal/ModalContext.d.ts

@@ -3,10 +3,10 @@ export interface ModalContextProps {
     /** ID of the dialog element */
     dialogId: string;
     /** Pass the close event callback to the header close button. */
-    onModalClose: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    onModalClose?: (event: React.MouseEvent<Element, MouseEvent>) => void;
     /** Pass the latest style to body. */
     getBodyStyles?: () => React.CSSProperties;
     /** Whether this Modal is a Drawer */
     isDrawer: boolean;
 }
-export declare const ModalContext: React.Context<ModalContextProps>;
+export declare const ModalContext: React.Context<ModalContextProps | null>;

package/esm/Modal/utils.d.ts

@@ -3,4 +3,4 @@ export declare const useBodyStyles: (ref: React.RefObject<HTMLElement>, options:
     overflow: boolean;
     drawer: boolean;
     prefix: (...classes: any) => string;
-}) => [import("react").CSSProperties, (entering?: boolean) => void, () => void];
+}) => [import("react").CSSProperties, (entering?: boolean | undefined) => void, () => void];

package/esm/Modal/utils.js

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
 import getHeight from 'dom-lib/getHeight';
 import on from 'dom-lib/on';
+import { ResizeObserver } from '@juggle/resize-observer';
 export var useBodyStyles = function useBodyStyles(ref, options) {
   var _useState = useState({}),
       bodyStyles = _useState[0],
@@ -11,7 +11,8 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
       drawer = options.drawer,
       prefix = options.prefix;
   var windowResizeListener = useRef();
-  var contentElement = useRef();
+  var contentElement = useRef(null);
+  var contentElementResizeObserver = useRef();
   var updateBodyStyles = useCallback(function (_event, entering) {
     var dialog = ref.current;
     var scrollHeight = dialog ? dialog.scrollHeight : 0;
@@ -40,22 +41,20 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
     setBodyStyles(styles);
   }, [prefix, ref]);
   var onDestroyEvents = useCallback(function () {
-    var _windowResizeListener, _windowResizeListener2;
+    var _windowResizeListener, _windowResizeListener2, _contentElementResize;
 
     (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
-
-    if (contentElement.current) {
-      unbindElementResize(contentElement.current);
-    }
+    (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
   }, []);
   var onChangeBodyStyles = useCallback(function (entering) {
     if (overflow && !drawer) {
-      var _ref$current;
-
-      updateBodyStyles(null, entering);
-      contentElement.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("." + prefix('content'));
+      updateBodyStyles(undefined, entering);
+      contentElement.current = ref.current.querySelector("." + prefix('content'));
       windowResizeListener.current = on(window, 'resize', updateBodyStyles);
-      bindElementResize(contentElement.current, updateBodyStyles);
+      contentElementResizeObserver.current = new ResizeObserver(function () {
+        return updateBodyStyles();
+      });
+      contentElementResizeObserver.current.observe(contentElement.current);
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   useEffect(function () {