rsuite 5.4.0 → 5.4.4

package/esm/DateRangePicker/DateRangePicker.js

@@ -185,7 +185,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return isPlaintext ? '' : placeholder || rangeFormatStr;
-  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue, value]);
+  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
   /**
    * preset hover range
    */
@@ -237,7 +237,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
-  }, [formatStr, handleCloseDropdown, onChange, selectedDates, setValue, value]);
+  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
@@ -267,7 +267,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (!isNil(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue, hoverRange]);
+  }, [getHoverRangeValue]);
   /**
    * Callback for selecting a date cell in the calendar grid
    */

package/esm/Disclosure/Disclosure.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
-export interface DisclosureRenderProps {
+export declare type DisclosureTrigger = 'click' | 'mouseover';
+export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
     open: boolean;
 }
 export interface DisclosureProps {
@@ -13,10 +14,12 @@ export interface DisclosureProps {
     hideOnClickOutside?: boolean;
     /** Callback when disclosure button is being activated to update the open state */
     onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
+    /** What mouse events should disclosure reacts to */
+    trigger?: DisclosureTrigger[];
 }
-declare function Disclosure(props: DisclosureProps): JSX.Element;
-declare namespace Disclosure {
-    var Button: typeof DisclosureButton;
-    var Content: typeof DisclosureContent;
+export interface DisclosureComponent extends React.FC<DisclosureProps> {
+    Button: typeof DisclosureButton;
+    Content: typeof DisclosureContent;
 }
+declare const Disclosure: DisclosureComponent;
 export default Disclosure;

package/esm/Disclosure/Disclosure.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 // Headless Disclosure
 // Ref: https://w3c.github.io/aria-practices/#disclosure
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useMemo, useReducer, useRef, useCallback, useContext } from 'react';
 import DisclosureContext, { DisclosureActionTypes } from './DisclosureContext';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
@@ -26,14 +26,17 @@ function disclosureReducer(state, action) {
   return state;
 }
 
-function Disclosure(props) {
+var Disclosure = /*#__PURE__*/React.memo(function (props) {
   var children = props.children,
       openProp = props.open,
       _props$defaultOpen = props.defaultOpen,
       defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$hideOnClickOut = props.hideOnClickOutside,
       hideOnClickOutside = _props$hideOnClickOut === void 0 ? false : _props$hideOnClickOut,
-      onToggle = props.onToggle;
+      onToggle = props.onToggle,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? ['click'] : _props$trigger;
+  var parentDisclosure = useContext(DisclosureContext);
 
   var _useReducer = useReducer(disclosureReducer, _extends({}, initialDisclosureState, {
     open: defaultOpen
@@ -56,20 +59,56 @@ function Disclosure(props) {
       });
     }
   });
-  var context = useMemo(function () {
+  var onMouseOver = useCallback(function (event) {
+    if (!open) {
+      dispatch({
+        type: DisclosureActionTypes.Show
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var onMouseOut = useCallback(function (event) {
+    if (open) {
+      dispatch({
+        type: DisclosureActionTypes.Hide
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(false, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var contextValue = useMemo(function () {
+    var cascadeDispatch = function cascadeDispatch(action) {
+      var result = dispatch(action);
+
+      if ('cascade' in action) {
+        parentDisclosure === null || parentDisclosure === void 0 ? void 0 : parentDisclosure[1](action);
+      }
+
+      return result;
+    };
+
     return [{
       open: open
-    }, dispatch, {
-      onToggle: onToggle
+    }, cascadeDispatch, {
+      onToggle: onToggle,
+      trigger: trigger
     }];
-  }, [open, dispatch, onToggle]);
-  return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
-    value: context
-  }, children({
-    open: open
-  }, containerElementRef));
-}
+  }, [parentDisclosure, open, dispatch, onToggle, trigger]);
+  var renderProps = useMemo(function () {
+    var renderProps = {
+      open: open
+    };
+
+    if (trigger.includes('mouseover')) {
+      renderProps.onMouseOver = onMouseOver;
+      renderProps.onMouseOut = onMouseOut;
+    }
 
+    return renderProps;
+  }, [open, trigger, onMouseOver, onMouseOut]);
+  return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
+    value: contextValue
+  }, children(renderProps, containerElementRef));
+});
 Disclosure.Button = DisclosureButton;
 Disclosure.Content = DisclosureContent;
 export default Disclosure;

package/esm/Disclosure/DisclosureButton.d.ts

@@ -3,9 +3,9 @@ export interface DisclosureButtonRenderProps {
     open: boolean;
 }
 export interface DisclosureButtonProps {
-    children: (props: React.ButtonHTMLAttributes<HTMLButtonElement> & DisclosureButtonRenderProps, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<React.HTMLAttributes<HTMLButtonElement>>;
+    children: (props: React.HTMLAttributes<HTMLElement> & DisclosureButtonRenderProps, ref: React.Ref<HTMLElement>) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
 }
-declare function DisclosureButton(props: DisclosureButtonProps): React.ReactElement<React.HTMLAttributes<HTMLButtonElement>, string | React.JSXElementConstructor<any>>;
+declare function DisclosureButton(props: DisclosureButtonProps): React.ReactElement<React.HTMLAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;
 declare namespace DisclosureButton {
     var displayName: string;
 }

package/esm/Disclosure/DisclosureContext.d.ts

@@ -1,4 +1,5 @@
 import React, { Dispatch } from 'react';
+import type { DisclosureTrigger } from './Disclosure';
 export interface DisclosureState {
     open: boolean;
 }
@@ -7,12 +8,16 @@ export declare enum DisclosureActionTypes {
     Hide = 1
 }
 export declare type DisclosureAction = {
-    type: DisclosureActionTypes;
+    type: DisclosureActionTypes.Show;
+} | {
+    type: DisclosureActionTypes.Hide;
+    cascade?: boolean;
 };
 export declare type DisclosureContextProps = [
     DisclosureState,
     Dispatch<DisclosureAction>,
     {
+        trigger: DisclosureTrigger[];
         onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
     }
 ];

package/esm/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ import DropdownToggle from './DropdownToggle';
 import MenuContext from '../Menu/MenuContext';
 import MenuItem from '../Menu/MenuItem';
 import kebabCase from 'lodash/kebabCase';
-import { NavbarContext } from '../Navbar/Navbar';
+import { NavbarContext } from '../Navbar';
 import Disclosure from '../Disclosure/Disclosure';
 import SidenavDropdown from '../Sidenav/SidenavDropdown';
 import NavContext from '../Nav/NavContext';

package/esm/Dropdown/DropdownItem.js

@@ -11,7 +11,6 @@ import { createChainedFunction, mergeRefs, shallowEqual, useClassNames } from '.
 import { NavbarContext } from '../Navbar/Navbar';
 import SidenavDropdownItem from '../Sidenav/SidenavDropdownItem';
 import DisclosureContext, { DisclosureActionTypes } from '../Disclosure/DisclosureContext';
-import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import useInternalId from '../utils/useInternalId';
 import { DropdownActionType } from './DropdownState';
@@ -62,7 +61,8 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var handleClickNavbarDropdownItem = useCallback(function (event) {
     dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({
-      type: DisclosureActionTypes.Hide
+      type: DisclosureActionTypes.Hide,
+      cascade: true
     });
     handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
@@ -129,16 +129,16 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(SafeAnchor, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
       className: classes,
-      "aria-current": selected || undefined
+      'aria-current': selected || undefined
     }, dataAttributes, restProps, {
-      as: Component,
-      onClick: createChainedFunction(handleClickNavbarDropdownItem, restProps.onClick)
-    }), icon && /*#__PURE__*/React.cloneElement(icon, {
-      className: prefix('menu-icon')
-    }), children));
+      onClick: createChainedFunction(handleClickNavbarDropdownItem, restProps.onClick),
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), children)
+    }));
   }
 
   return /*#__PURE__*/React.createElement(MenuItem, {

package/esm/Dropdown/DropdownMenu.js

@@ -2,9 +2,9 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import omit from 'lodash/omit';
 import Menu from '../Menu/Menu';
 import MenuItem from '../Menu/MenuItem';
@@ -15,8 +15,10 @@ import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
 import useCustom from '../utils/useCustom';
 import DropdownContext from './DropdownContext';
+import { NavbarContext } from '../Navbar';
 import Menubar from '../Menu/Menubar';
 import SidenavDropdownMenu from '../Sidenav/SidenavDropdownMenu';
+import Disclosure from '../Disclosure';
 
 /**
  * The <Dropdown.Menu> API
@@ -49,6 +51,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var dropdown = useContext(DropdownContext);
   var sidenav = useContext(SidenavContext);
+  var withinNavbar = Boolean(useContext(NavbarContext));
 
   var _useCustom = useCustom('DropdownMenu'),
       rtl = _useCustom.rtl;
@@ -69,17 +72,20 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames3 = useClassNames('dropdown-item'),
       mergeItemClassNames = _useClassNames3.merge,
       withItemClassPrefix = _useClassNames3.withClassPrefix,
-      prefixItemClassName = _useClassNames3.prefix; // <Dropdown.Menu> is used outside of <Dropdown>
+      prefixItemClassName = _useClassNames3.prefix;
+
+  var contextValue = useMemo(function () {
+    return {
+      activeKey: activeKey,
+      onSelect: onSelect
+    };
+  }, [activeKey, onSelect]); // <Dropdown.Menu> is used outside of <Dropdown>
   // renders a vertical `menubar`
 
-
   if (!dropdown) {
     var classes = merge(props.className, withClassPrefix());
     return /*#__PURE__*/React.createElement(DropdownContext.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelect
-      }
+      value: contextValue
     }, /*#__PURE__*/React.createElement(Menubar, {
       vertical: true,
       onActivateItem: function onActivateItem(event) {
@@ -110,22 +116,69 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled = _omit.disabled,
       menuProps = _objectWithoutPropertiesLoose(_omit, ["icon", "className", "disabled"]);
 
-  var Icon = rtl ? AngleLeft : AngleRight;
+  var Icon = rtl ? AngleLeft : AngleRight; // Renders a disclosure when used within <Navbar>
+
+  if (withinNavbar) {
+    return /*#__PURE__*/React.createElement(Disclosure, {
+      hideOnClickOutside: true,
+      trigger: ['click', 'mouseover']
+    }, function (_ref, containerRef) {
+      var open = _ref.open,
+          props = _objectWithoutPropertiesLoose(_ref, ["open"]);
+
+      var classes = mergeItemClassNames(className, withItemClassPrefix({
+        disabled: disabled,
+        open: open,
+        submenu: true
+      }));
+      return /*#__PURE__*/React.createElement("li", _extends({
+        ref: mergeRefs(ref, containerRef),
+        className: classes
+      }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, function (_ref2, buttonRef) {
+        var open = _ref2.open,
+            buttonProps = _objectWithoutPropertiesLoose(_ref2, ["open"]);
+
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
+          'with-icon': icon,
+          open: open,
+          disabled: disabled
+        }));
+        return /*#__PURE__*/React.createElement("div", _extends({
+          ref: mergeRefs(buttonRef, buttonRef),
+          className: classes,
+          "data-event-key": eventKey,
+          "data-event-key-type": typeof eventKey
+        }, buttonProps), icon && /*#__PURE__*/React.cloneElement(icon, {
+          className: prefix('menu-icon')
+        }), title, /*#__PURE__*/React.createElement(Icon, {
+          className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+        }));
+      }), /*#__PURE__*/React.createElement(Disclosure.Content, null, function (_ref3, elementRef) {
+        var open = _ref3.open;
+        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+        return /*#__PURE__*/React.createElement("ul", _extends({
+          ref: elementRef,
+          className: menuClassName,
+          hidden: !open
+        }, menuProps), children);
+      }));
+    });
+  }
+
   return /*#__PURE__*/React.createElement(Menu, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: function renderMenuButton(_ref, buttonRef) {
-      var open = _ref.open,
-          menuButtonProps = _objectWithoutPropertiesLoose(_ref, ["open"]);
+    renderMenuButton: function renderMenuButton(_ref4, buttonRef) {
+      var open = _ref4.open,
+          menuButtonProps = _objectWithoutPropertiesLoose(_ref4, ["open"]);
 
       return /*#__PURE__*/React.createElement(MenuItem, {
         disabled: disabled
-      }, function (_ref2, menuitemRef) {
-        var selected = _ref2.selected,
-            active = _ref2.active,
-            menuitem = _objectWithoutPropertiesLoose(_ref2, ["selected", "active"]);
+      }, function (_ref5, menuitemRef) {
+        var selected = _ref5.selected,
+            active = _ref5.active,
+            menuitem = _objectWithoutPropertiesLoose(_ref5, ["selected", "active"]);
 
-        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
-        withItemClassPrefix({
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
           'with-icon': icon,
           open: open,
           active: selected,
@@ -140,13 +193,13 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
           className: prefix('menu-icon')
         }), title, /*#__PURE__*/React.createElement(Icon, {
-          className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+          className: prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["toggle-icon"])))
         }));
       });
     },
-    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
-      var open = _ref3.open,
-          popupProps = _objectWithoutPropertiesLoose(_ref3, ["open"]);
+    renderMenuPopup: function renderMenuPopup(_ref6, popupRef) {
+      var open = _ref6.open,
+          popupProps = _objectWithoutPropertiesLoose(_ref6, ["open"]);
 
       var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
@@ -156,15 +209,14 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, function (_ref4, menuContainerRef) {
-    var open = _ref4.open,
-        menuContainer = _objectWithoutPropertiesLoose(_ref4, ["open"]);
+  }, function (_ref7, menuContainerRef) {
+    var open = _ref7.open,
+        menuContainer = _objectWithoutPropertiesLoose(_ref7, ["open"]);
 
     var classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled: disabled,
       open: open,
-      submenu: true // focus: hasFocus
-
+      submenu: true
     }));
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: mergeRefs(ref, menuContainerRef),

package/esm/FormGroup/FormGroup.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 export var FormGroupContext = /*#__PURE__*/React.createContext({});
@@ -18,10 +18,13 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement(FormGroupContext.Provider, {
-    value: {
+  var contextValue = useMemo(function () {
+    return {
       controlId: controlId
-    }
+    };
+  }, [controlId]);
+  return /*#__PURE__*/React.createElement(FormGroupContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes,

package/esm/Menu/MenuItem.js

@@ -42,7 +42,7 @@ function MenuItem(props) {
         id: menuitemRef.current.id
       });
     }
-  }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
+  }, [dispatch, hasFocus]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = useCallback(function () {
     if (!isNil(menuitemRef.current) && !hasFocus) {

package/esm/Modal/Modal.js

@@ -4,14 +4,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 
 var _templateObject, _templateObject2;
 
-import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import on from 'dom-lib/on';
 import getAnimationEnd from 'dom-lib/getAnimationEnd';
 import BaseModal, { modalPropTypes } from '../Overlay/Modal';
 import Bounce from '../Animation/Bounce';
-import { useClassNames, mergeRefs, SIZE } from '../utils';
+import { useClassNames, mergeRefs, SIZE, useWillUnmount } from '../utils';
 import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
 import { ModalContext } from './ModalContext';
 import ModalBody from './ModalBody';
@@ -64,6 +64,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix;
 
+  var _useState = useState(false),
+      shake = _useState[0],
+      setShake = _useState[1];
+
   var classes = merge(className, prefix(size, {
     full: full
   }));
@@ -90,24 +94,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isDrawer: drawer
     };
   }, [dialogId, onClose, bodyStyles, drawer]);
-
-  var _useState = useState(false),
-      shake = _useState[0],
-      setShake = _useState[1];
-
-  var handleBackdropClick = useCallback(function () {
-    // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.
-    if (backdrop === 'static') {
-      setShake(true);
-
-      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) {
     var _transitionEndListene;
 
@@ -124,11 +110,37 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);
     onChangeBodyStyles(true);
   }, [onChangeBodyStyles, onEntering]);
-  useEffect(function () {
+  var handleBackdropClick = useCallback(function (e) {
+    if (e.target !== e.currentTarget) {
+      return;
+    } // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.
+
+
+    if (backdrop === 'static') {
+      setShake(true);
+
+      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);
+        });
+      }
+
+      return;
+    }
+
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+  }, [backdrop, onClose]);
+  var handleClick = useCallback(function (e) {
+    if (dialogRef.current && e.target !== dialogRef.current) {
+      handleBackdropClick(e);
+    }
+  }, [handleBackdropClick]);
+  useWillUnmount(function () {
     var _transitionEndListene2;
 
     (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 ? void 0 : _transitionEndListene2.off();
-  }, []);
+  });
   return /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalContextValue
   }, /*#__PURE__*/React.createElement(BaseModal, _extends({}, rest, {
@@ -136,7 +148,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     backdrop: backdrop,
     open: open,
     onClose: onClose,
-    onBackdropClick: handleBackdropClick,
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["wrapper"]))),
     onEntered: handleEntered,
     onEntering: handleEntering,
@@ -149,7 +160,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     transition: animation ? animation : undefined,
     animationProps: animationProps,
     dialogTransitionTimeout: animationTimeout,
-    backdropTransitionTimeout: 150
+    backdropTransitionTimeout: 150,
+    onClick: backdrop ? handleClick : undefined
   }), function (transitionProps, transitionRef) {
     var transitionClassName = transitionProps.className,
         transitionRest = _objectWithoutPropertiesLoose(transitionProps, ["className"]);

package/esm/Modal/utils.js

@@ -45,20 +45,28 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
 
     (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
     (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
+    windowResizeListener.current = null;
+    contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = useCallback(function (entering) {
-    if (overflow && !drawer) {
+    if (overflow && !drawer && ref.current) {
       updateBodyStyles(undefined, entering);
       contentElement.current = ref.current.querySelector("." + prefix('content'));
-      windowResizeListener.current = on(window, 'resize', updateBodyStyles);
-      contentElementResizeObserver.current = new ResizeObserver(function () {
-        return updateBodyStyles();
-      });
-      contentElementResizeObserver.current.observe(contentElement.current);
+
+      if (!windowResizeListener.current) {
+        windowResizeListener.current = on(window, 'resize', updateBodyStyles);
+      }
+
+      if (contentElement.current && !contentElementResizeObserver.current) {
+        contentElementResizeObserver.current = new ResizeObserver(function () {
+          return updateBodyStyles();
+        });
+        contentElementResizeObserver.current.observe(contentElement.current);
+      }
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   useEffect(function () {
-    onDestroyEvents();
-  }, [onDestroyEvents]);
+    return onDestroyEvents; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
 };

package/esm/MultiCascader/MultiCascader.js

@@ -196,8 +196,11 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
         children.then(function (data) {
           node.loading = false;
           node[childrenKey] = data;
-          addFlattenData(data, node);
-          addColumn(data, cascadePaths.length);
+
+          if (targetRef.current) {
+            addFlattenData(data, node);
+            addColumn(data, cascadePaths.length);
+          }
         });
       } else {
         node.loading = false;
@@ -234,7 +237,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
   }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);
   var handleClean = useCallback(function (event) {
-    if (disabled) {
+    if (disabled || !targetRef.current) {
       return;
     }