rsuite 5.2.4 → 5.3.0

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]); // 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));

package/cjs/Menu/useMenu.js

@@ -57,8 +57,10 @@ function menuReducer(state, action) {
 
       switch (action.to) {
         case _MenuContext.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;
             }
@@ -67,8 +69,10 @@ function menuReducer(state, action) {
           break;
 
         case _MenuContext.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;
             }
@@ -78,7 +82,9 @@ function menuReducer(state, action) {
 
         case _MenuContext.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;
             }
@@ -88,7 +94,9 @@ function menuReducer(state, action) {
 
         case _MenuContext.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;
             }
@@ -98,7 +106,9 @@ function menuReducer(state, action) {
 
         case _MenuContext.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/cjs/Modal/Modal.js

@@ -21,7 +21,7 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 
 var _on = _interopRequireDefault(require("dom-lib/on"));
 
-var _getTransitionEnd = _interopRequireDefault(require("dom-lib/getTransitionEnd"));
+var _getAnimationEnd = _interopRequireDefault(require("dom-lib/getAnimationEnd"));
 
 var _Modal = _interopRequireWildcard(require("../Overlay/Modal"));
 
@@ -70,7 +70,8 @@ var Modal = /*#__PURE__*/_react.default.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,
@@ -92,7 +93,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, prefix(size, {
     full: full
   }));
-  var dialogRef = (0, _react.useRef)();
+  var dialogRef = (0, _react.useRef)(null);
   var transitionEndListener = (0, _react.useRef)(); // The style of the Modal body will be updated with the size of the window or container.
 
   var _useBodyStyles = (0, _utils2.useBodyStyles)(dialogRef, {
@@ -124,9 +125,13 @@ var Modal = /*#__PURE__*/_react.default.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 = (0, _on.default)(dialogRef.current, (0, _getTransitionEnd.default)(), function () {
-        setShake(false);
-      });
+
+      if (!transitionEndListener.current && dialogRef.current) {
+        //fix: https://github.com/rsuite/rsuite/blob/a93d13c14fb20cc58204babe3331d3c3da3fe1fd/src/Modal/styles/index.less#L59
+        transitionEndListener.current = (0, _on.default)(dialogRef.current, (0, _getAnimationEnd.default)(), function () {
+          setShake(false);
+        });
+      }
     }
   }, [backdrop]);
   var handleExited = (0, _react.useCallback)(function (node) {
@@ -135,6 +140,7 @@ var Modal = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (node) {
     onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);

package/cjs/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/cjs/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/cjs/Modal/utils.js

@@ -22,7 +22,7 @@ var useBodyStyles = function useBodyStyles(ref, options) {
       drawer = options.drawer,
       prefix = options.prefix;
   var windowResizeListener = (0, _react.useRef)();
-  var contentElement = (0, _react.useRef)();
+  var contentElement = (0, _react.useRef)(null);
   var contentElementResizeObserver = (0, _react.useRef)();
   var updateBodyStyles = (0, _react.useCallback)(function (_event, entering) {
     var dialog = ref.current;
@@ -59,10 +59,8 @@ var useBodyStyles = function useBodyStyles(ref, options) {
   }, []);
   var onChangeBodyStyles = (0, _react.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 = (0, _on.default)(window, 'resize', updateBodyStyles);
       contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
         return updateBodyStyles();

package/cjs/MultiCascader/DropdownMenu.d.ts

@@ -3,15 +3,15 @@ import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/c
 import { ValueType } from './MultiCascader';
 export interface DropdownMenuProps extends WithAsProps {
     disabledItemValues: ValueType;
-    value?: ValueType;
+    value: ValueType;
     childrenKey: string;
     valueKey: string;
     labelKey: string;
-    menuWidth: number;
-    menuHeight: number | string;
+    menuWidth?: number;
+    menuHeight?: number | string;
     cascade?: boolean;
     cascadeData: ItemDataType[][];
-    cascadePaths: ItemDataType[];
+    cascadePaths?: ItemDataType[];
     uncheckableItemValues: ValueType;
     renderMenuItem?: (itemLabel: React.MouseEventHandler, item: ItemDataType) => React.ReactNode;
     renderMenu?: (children: ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;

package/cjs/MultiCascader/MultiCascader.js

@@ -137,10 +137,10 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       selectedPaths = _useState2[0],
       setSelectedPaths = _useState2[1];
 
-  var triggerRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var searchInputRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var searchInputRef = (0, _react.useRef)(null);
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
@@ -188,7 +188,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
    */
 
 
-  var hasValue = selectedItems.length > 0 || (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);
+  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);
 
   var _useClassNames = (0, _utils3.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
@@ -469,7 +469,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
 
   if (hasValue && (0, _isFunction.default)(renderValue)) {
-    selectedElement = renderValue(value.length ? value : valueProp, selectedItems, selectedElement); // If renderValue returns null or undefined, hasValue is false.
+    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement); // If renderValue returns null or undefined, hasValue is false.
 
     if ((0, _isNil.default)(selectedElement)) {
       hasValue = false;

package/cjs/MultiCascader/utils.d.ts

@@ -5,34 +5,34 @@ export interface ItemType extends ItemDataType {
     parent?: ItemType;
 }
 interface ItemKeys {
-    valueKey?: string;
-    labelKey?: string;
-    childrenKey?: string;
+    valueKey: string;
+    labelKey: string;
+    childrenKey: string;
 }
 /**
  * Get all parents of a node
  * @param node
  */
-export declare const getParents: (node: ItemType) => any[];
+export declare const getParents: (node: ItemType) => ItemType[];
 /**
  * Check if any child nodes are selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeChildChecked: (node: ItemDataType, value: ValueType, itemKeys: ItemKeys) => any;
+export declare const isSomeChildChecked: (node: ItemDataType, value: ValueType, itemKeys: Omit<ItemKeys, 'labelKey'>) => any;
 /**
  * Check if the parent is selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeParentChecked: (node: ItemDataType, value: ValueType, itemKeys: ItemKeys) => any;
-export declare const getOtherItemValuesByUnselectChild: (itemNode: ItemType, value: any, itemKeys: ItemKeys) => any[];
+export declare const isSomeParentChecked: (node: ItemDataType, value: ValueType, itemKeys: Pick<ItemKeys, 'valueKey'>) => any;
+export declare const getOtherItemValuesByUnselectChild: <T>(itemNode: ItemType, value: any, itemKeys: Omit<ItemKeys, 'labelKey'>) => T[];
 /**
  * Remove the values of all children.
  */
-export declare const removeAllChildrenValue: (value: ValueType, item: ItemType, itemKeys: ItemKeys) => any[];
+export declare const removeAllChildrenValue: <T>(value: T[], item: ItemType, itemKeys: Omit<ItemKeys, 'labelKey'>) => T[] | undefined;
 /**
  * A hook to flatten tree structure data
  * @param data
@@ -56,12 +56,12 @@ export declare function useColumnData(flattenData: ItemType[]): {
  * @param props
  * @param flattenData
  */
-export declare function useCascadeValue(props: Partial<MultiCascaderProps>, flattenData: ItemType[]): {
-    value: ValueType;
-    setValue: import("react").Dispatch<import("react").SetStateAction<ValueType>>;
-    splitValue: (item: ItemType, checked: boolean, value: ValueType) => {
-        value: ValueType;
-        removedValue: ValueType;
+export declare function useCascadeValue<T>(props: Partial<MultiCascaderProps<T[]>> & ItemKeys, flattenData: ItemType[]): {
+    value: T[];
+    setValue: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    splitValue: (item: ItemType, checked: boolean, value: T[]) => {
+        value: T[];
+        removedValue: T[];
     };
 };
 export {};

package/cjs/Nav/Nav.d.ts

@@ -16,7 +16,7 @@ export interface NavProps<T = any> extends WithAsProps, Omit<React.HTMLAttribute
     /** Active key, corresponding to eventkey in <Nav.item>. */
     activeKey?: T;
     /** Callback function triggered after selection */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 interface NavComponent extends RsRefForwardingComponent<'div', NavProps> {
     Dropdown: typeof Dropdown;

package/cjs/Nav/NavContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface NavContextProps {
     activeKey: string | null;
-    onSelect: (eventKey: string, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
 }
 declare const NavContext: React.Context<NavContextProps>;
 export default NavContext;

package/cjs/Nav/NavItem.d.ts

@@ -17,7 +17,7 @@ export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAt
     /** Providing a `href` will render an `<a>` element */
     href?: string;
     /** Select the callback function that the event triggers. */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 /**
  * The <Nav.Item> API

package/cjs/Navbar/Navbar.js

@@ -19,7 +19,7 @@ var _NavbarBrand = _interopRequireDefault(require("./NavbarBrand"));
 
 var _utils = require("../utils");
 
-var NavbarContext = /*#__PURE__*/_react.default.createContext(null);
+var NavbarContext = /*#__PURE__*/_react.default.createContext(false);
 
 exports.NavbarContext = NavbarContext;
 

package/cjs/Navbar/NavbarItem.d.ts

@@ -13,7 +13,7 @@ export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAt
     /** Providing a `href` will render an `<a>` element */
     href?: string;
     /** Select the callback function that the event triggers. */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 declare const NavbarItem: RsRefForwardingComponent<'a', NavItemProps>;
 export default NavbarItem;

package/cjs/Overlay/Modal.d.ts

@@ -44,8 +44,8 @@ interface ModalProps extends BaseModalProps {
     containerClassName?: string;
     backdropTransitionTimeout?: number;
     dialogTransitionTimeout?: number;
-    transition: React.ElementType;
-    onEscapeKeyUp?: React.KeyboardEventHandler;
+    transition?: React.ElementType;
+    onEsc?: React.KeyboardEventHandler;
     onBackdropClick?: React.MouseEventHandler;
 }
 declare const Modal: RsRefForwardingComponent<'div', ModalProps>;

package/cjs/Overlay/Modal.js

@@ -47,6 +47,12 @@ var useModalManager = function useModalManager() {
     backdrop: null
   });
   return {
+    get dialog() {
+      var _modal$current;
+
+      return (_modal$current = modal.current) === null || _modal$current === void 0 ? void 0 : _modal$current.dialog;
+    },
+
     add: function add(containerElement, containerClassName) {
       return modalManager.add(modal.current, containerElement, containerClassName);
     },
@@ -89,7 +95,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$autoFocus = props.autoFocus,
       autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
       onBackdropClick = props.onBackdropClick,
-      onEscapeKeyUp = props.onEscapeKeyUp,
+      onEsc = props.onEsc,
       onExit = props.onExit,
       onExiting = props.onExiting,
       onExited = props.onExited,
@@ -98,7 +104,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onEntered = props.onEntered,
       onClose = props.onClose,
       onOpen = props.onOpen,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onBackdropClick", "onEscapeKeyUp", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onBackdropClick", "onEsc", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
 
   var _useState = (0, _react.useState)(!open),
       exited = _useState[0],
@@ -118,19 +124,13 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   var mountModal = open || Transition && !exited;
-  var rootRef = (0, _react.useRef)();
-  var lastFocus = (0, _react.useRef)();
-  var handleDocumentKeyUp = (0, _react.useCallback)(function (event) {
-    if (keyboard && event.keyCode === 27 && modal.isTopModal()) {
-      onEscapeKeyUp === null || onEscapeKeyUp === void 0 ? void 0 : onEscapeKeyUp(event);
+  var lastFocus = (0, _react.useRef)(null);
+  var handleDocumentKeyDown = (0, _react.useCallback)(function (event) {
+    if (keyboard && event.key === _utils2.KEY_VALUES.ESC && modal.isTopModal()) {
+      onEsc === null || onEsc === void 0 ? void 0 : onEsc(event);
       onClose === null || onClose === void 0 ? void 0 : onClose(event);
     }
-  }, [keyboard, modal, onEscapeKeyUp, onClose]);
-  var checkForFocus = (0, _react.useCallback)(function () {
-    if (_canUseDOM.default) {
-      lastFocus.current = document.activeElement;
-    }
-  }, []);
+  }, [keyboard, modal, onEsc, onClose]);
   var restoreLastFocus = (0, _react.useCallback)(function () {
     if (lastFocus.current) {
       var _lastFocus$current$fo, _lastFocus$current;
@@ -139,21 +139,18 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       lastFocus.current = null;
     }
   }, []);
-  var getDialogElement = (0, _react.useCallback)(function () {
-    return (0, _utils2.getDOMNode)(rootRef.current);
-  }, []);
   var handleEnforceFocus = (0, _react.useCallback)(function () {
     if (!enforceFocus || !modal.isTopModal()) {
       return;
     }
 
     var currentActiveElement = document.activeElement;
-    var dialog = getDialogElement();
+    var dialog = modal.dialog;
 
     if (dialog && dialog !== currentActiveElement && !(0, _contains.default)(dialog, currentActiveElement)) {
       dialog.focus();
     }
-  }, [enforceFocus, getDialogElement, modal]);
+  }, [enforceFocus, modal]);
   var handleBackdropClick = (0, _react.useCallback)(function (event) {
     if (event.target !== event.currentTarget) {
       return;
@@ -165,27 +162,40 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onClose === null || onClose === void 0 ? void 0 : onClose(event);
     }
   }, [backdrop, onBackdropClick, onClose]);
-  var documentKeyupListener = (0, _react.useRef)();
-  var docusinListener = (0, _react.useRef)();
+  var documentKeyDownListener = (0, _react.useRef)();
+  var documentFocusListener = (0, _react.useRef)();
   var handleOpen = (0, _react.useCallback)(function () {
-    var dialog = getDialogElement();
     var containerElement = (0, _getContainer.default)(container, document.body);
     modal.add(containerElement, containerClassName);
-    documentKeyupListener.current = (0, _on.default)(document, 'keydown', handleDocumentKeyUp);
-    docusinListener.current = (0, _on.default)(document, 'focus', handleEnforceFocus, true);
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    checkForFocus();
+
+    if (!documentKeyDownListener.current) {
+      documentKeyDownListener.current = (0, _on.default)(document, 'keydown', handleDocumentKeyDown);
+    }
+
+    if (!documentFocusListener.current) {
+      documentFocusListener.current = (0, _on.default)(document, 'focus', handleEnforceFocus, true);
+    }
+
+    if (_canUseDOM.default) {
+      lastFocus.current = document.activeElement;
+    }
 
     if (autoFocus) {
-      dialog === null || dialog === void 0 ? void 0 : dialog.focus();
+      var _modal$dialog;
+
+      (_modal$dialog = modal.dialog) === null || _modal$dialog === void 0 ? void 0 : _modal$dialog.focus();
     }
-  }, [autoFocus, checkForFocus, container, containerClassName, getDialogElement, handleDocumentKeyUp, handleEnforceFocus, modal, onOpen]);
+
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  }, [autoFocus, container, containerClassName, handleDocumentKeyDown, handleEnforceFocus, modal, onOpen]);
   var handleClose = (0, _react.useCallback)(function () {
-    var _documentKeyupListene, _docusinListener$curr;
+    var _documentKeyDownListe, _documentFocusListene;
 
     modal.remove();
-    (_documentKeyupListene = documentKeyupListener.current) === null || _documentKeyupListene === void 0 ? void 0 : _documentKeyupListene.off();
-    (_docusinListener$curr = docusinListener.current) === null || _docusinListener$curr === void 0 ? void 0 : _docusinListener$curr.off();
+    (_documentKeyDownListe = documentKeyDownListener.current) === null || _documentKeyDownListe === void 0 ? void 0 : _documentKeyDownListe.off();
+    documentKeyDownListener.current = null;
+    (_documentFocusListene = documentFocusListener.current) === null || _documentFocusListene === void 0 ? void 0 : _documentFocusListene.off();
+    documentFocusListener.current = null;
     restoreLastFocus();
   }, [modal, restoreLastFocus]);
   (0, _react.useEffect)(function () {
@@ -287,7 +297,7 @@ Modal.propTypes = (0, _extends2.default)({}, _utils.animationPropTypes, modalPro
   dialogTransitionTimeout: _propTypes.default.number,
   backdropTransitionTimeout: _propTypes.default.number,
   transition: _propTypes.default.any,
-  onEscapeKeyUp: _propTypes.default.func,
+  onEsc: _propTypes.default.func,
   onBackdropClick: _propTypes.default.func
 });
 var _default = Modal;