rsuite 5.40.0 → 5.42.0

package/esm/Menu/MenuItem.js

@@ -1,41 +1,38 @@
+'use client';
 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';
-
 /**
  * Headless ARIA `menuitem`
  * @private
  */
 function MenuItem(props) {
   var _menuState$items$menu;
-
   var children = props.children,
-      _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;
+    _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(null);
   var menuitemId = useUniqueId('menuitem-');
   var menu = useContext(MenuContext);
-
   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)
-
+    dispatch = menu[1]; // Whether this menuitem has focus (indicated by `aria-activedescendant` from parent menu)
   var hasFocus = !isNil(menuitemRef.current) && !isNil(menuState.activeItemIndex) && ((_menuState$items$menu = menuState.items[menuState.activeItemIndex]) === null || _menuState$items$menu === void 0 ? void 0 : _menuState$items$menu.element) === menuitemRef.current;
   var handleClick = useCallback(function (event) {
     if (disabled) {
       return;
     }
-
     onActivate === null || onActivate === void 0 ? void 0 : onActivate(event);
-  }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`
+  }, [disabled, onActivate]);
+
+  // Gain/release focus on mousedown in `menubar`
 
   var handleMouseDown = useCallback(function () {
     if (!isNil(menuitemRef.current) && !hasFocus) {
@@ -45,8 +42,9 @@ function MenuItem(props) {
         id: menuitemRef.current.id
       });
     }
-  }, [dispatch, hasFocus]); // 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) {
       dispatch({
@@ -64,7 +62,6 @@ function MenuItem(props) {
   }, [dispatch]);
   useEffect(function () {
     var menuitemElement = menuitemRef.current;
-
     if (menuitemElement) {
       dispatch({
         type: MenuActionTypes.RegisterItem,
@@ -90,24 +87,23 @@ function MenuItem(props) {
     tabIndex: -1,
     onClick: handleClick,
     // render props
+
     selected: selected,
     active: hasFocus
-  }; // Only move focus on hover in a `menu`, not `menubar`
+  };
 
+  // Only move focus on hover in a `menu`, not `menubar`
   if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menu') {
     menuitemProps.onMouseMove = handleMouseMove;
     menuitemProps.onMouseLeave = handleMouseLeave;
   }
-
   if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menubar') {
     menuitemProps.onMouseDown = handleMouseDown;
     menuitemProps.onMouseOver = handleMouseMove;
     menuitemProps.onMouseLeave = handleMouseLeave;
   }
-
   return children(menuitemProps, menuitemRef);
 }
-
 MenuItem.displayName = 'MenuItem';
 MenuItem.propTypes = {
   selected: PropTypes.bool,

package/esm/Menu/Menubar.js

@@ -1,3 +1,4 @@
+'use client';
 // Headless ARIA `menubar`
 import React, { useCallback, useRef } from 'react';
 import isNil from 'lodash/isNil';
@@ -6,28 +7,27 @@ import { KEY_VALUES, useCustom } from '../utils';
 import { isFocusEntering, isFocusLeaving } from '../utils/events';
 import useMenu from './useMenu';
 import { isFocusableElement } from '../utils/dom';
-
 /**
  * @private
  */
 export default function Menubar(_ref) {
   var _items$activeItemInde3;
-
   var _ref$vertical = _ref.vertical,
-      vertical = _ref$vertical === void 0 ? false : _ref$vertical,
-      children = _ref.children,
-      onActivateItem = _ref.onActivateItem;
+    vertical = _ref$vertical === void 0 ? false : _ref$vertical,
+    children = _ref.children,
+    onActivateItem = _ref.onActivateItem;
   var menubar = useMenu({
     role: 'menubar'
   });
   var _menubar$ = menubar[0],
-      items = _menubar$.items,
-      activeItemIndex = _menubar$.activeItemIndex,
-      dispatch = menubar[1];
+    items = _menubar$.items,
+    activeItemIndex = _menubar$.activeItemIndex,
+    dispatch = menubar[1];
   var menubarElementRef = useRef(null);
   var onFocus = useCallback(function (event) {
     // Focus moves inside Menubar
-    if (isFocusEntering(event) && // Skip if focus is moving to a focusable element within this menu
+    if (isFocusEntering(event) &&
+    // Skip if focus is moving to a focusable element within this menu
     !(event.target !== event.currentTarget && isFocusableElement(event.target))) {
       if (activeItemIndex === null) {
         dispatch({
@@ -46,15 +46,11 @@ export default function Menubar(_ref) {
       });
     }
   }, [dispatch]);
-
   var _useCustom = useCustom('Menubar'),
-      rtl = _useCustom.rtl;
-
+    rtl = _useCustom.rtl;
   var onKeyDown = useCallback(function (event) {
     var _items$activeItemInde, _items$activeItemInde2;
-
     var activeItemElement = isNil(activeItemIndex) ? null : (_items$activeItemInde = (_items$activeItemInde2 = items[activeItemIndex]) === null || _items$activeItemInde2 === void 0 ? void 0 : _items$activeItemInde2.element) !== null && _items$activeItemInde !== void 0 ? _items$activeItemInde : null;
-
     switch (true) {
       case !vertical && !rtl && event.key === KEY_VALUES.RIGHT:
       case !vertical && rtl && event.key === KEY_VALUES.LEFT:
@@ -66,7 +62,6 @@ export default function Menubar(_ref) {
           to: MoveFocusTo.Next
         });
         break;
-
       case !vertical && !rtl && event.key === KEY_VALUES.LEFT:
       case !vertical && rtl && event.key === KEY_VALUES.RIGHT:
       case vertical && event.key === KEY_VALUES.UP:
@@ -77,7 +72,6 @@ export default function Menubar(_ref) {
           to: MoveFocusTo.Prev
         });
         break;
-
       case event.key === KEY_VALUES.HOME:
         event.preventDefault();
         event.stopPropagation();
@@ -86,7 +80,6 @@ export default function Menubar(_ref) {
           to: MoveFocusTo.First
         });
         break;
-
       case event.key === KEY_VALUES.END:
         event.preventDefault();
         event.stopPropagation();
@@ -95,7 +88,6 @@ export default function Menubar(_ref) {
           to: MoveFocusTo.Last
         });
         break;
-
       case !vertical && event.key === KEY_VALUES.DOWN:
       case vertical && !rtl && event.key === KEY_VALUES.RIGHT:
       case vertical && rtl && event.key === KEY_VALUES.LEFT:
@@ -104,9 +96,7 @@ export default function Menubar(_ref) {
           event.stopPropagation();
           activeItemElement.click();
         }
-
         break;
-
       case event.key === KEY_VALUES.ENTER:
       case event.key === KEY_VALUES.SPACE:
         event.preventDefault();
@@ -114,9 +104,10 @@ export default function Menubar(_ref) {
         activeItemElement === null || activeItemElement === void 0 ? void 0 : activeItemElement.click();
         break;
     }
-  }, [rtl, items, activeItemIndex, dispatch, vertical]); // Only used for handling click events bubbling from children
-  // Which indicates that a child menuitem is being activated
+  }, [rtl, items, activeItemIndex, dispatch, vertical]);
 
+  // Only used for handling click events bubbling from children
+  // Which indicates that a child menuitem is being activated
   var onClick = useCallback(function (event) {
     if (items.some(function (item) {
       return item.element === event.target;
@@ -135,6 +126,5 @@ export default function Menubar(_ref) {
     onClick: onClick,
     'aria-activedescendant': isNil(activeItemIndex) ? undefined : (_items$activeItemInde3 = items[activeItemIndex]) === null || _items$activeItemInde3 === void 0 ? void 0 : _items$activeItemInde3.element.id,
     'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'
-
   }, menubarElementRef));
 }

package/esm/Menu/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Menu from './Menu';
 export default Menu;

package/esm/Menu/useMenu.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 // Inspired by tailwindlabs/headlessui
 import { useReducer } from 'react';
@@ -10,8 +11,7 @@ export var initialMenuState = {
 };
 export function menuReducer(state, action) {
   var items = state.items,
-      activeItemIndex = state.activeItemIndex;
-
+    activeItemIndex = state.activeItemIndex;
   switch (action.type) {
     case MenuActionTypes.RegisterItem:
       return _extends({}, state, {
@@ -20,97 +20,75 @@ export function menuReducer(state, action) {
           props: action.props
         }])
       });
-
     case MenuActionTypes.UnregisterItem:
       return _extends({}, state, {
         items: items.filter(function (item) {
           return item.element.id !== action.id;
         })
       });
-
     case MenuActionTypes.OpenMenu:
       return _extends({}, state, {
         open: true
       });
-
     case MenuActionTypes.CloseMenu:
       return _extends({}, state, {
         open: false
       });
-
     case MenuActionTypes.MoveFocus:
       var nextActiveItemIndex = activeItemIndex;
-
       switch (action.to) {
         case MoveFocusTo.Next:
           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;
             }
           }
-
           break;
-
         case MoveFocusTo.Prev:
           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;
             }
           }
-
           break;
-
         case MoveFocusTo.First:
           for (var _i2 = 0; _i2 < items.length; _i2++) {
             var _items$_i2$props;
-
             if (!((_items$_i2$props = items[_i2].props) !== null && _items$_i2$props !== void 0 && _items$_i2$props.disabled)) {
               nextActiveItemIndex = _i2;
               break;
             }
           }
-
           break;
-
         case MoveFocusTo.Last:
           for (var _i3 = items.length - 1; _i3 >= 0; _i3--) {
             var _items$_i3$props;
-
             if (!((_items$_i3$props = items[_i3].props) !== null && _items$_i3$props !== void 0 && _items$_i3$props.disabled)) {
               nextActiveItemIndex = _i3;
               break;
             }
           }
-
           break;
-
         case MoveFocusTo.Specific:
           for (var _i4 = 0; _i4 < items.length; _i4++) {
             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;
             }
           }
-
           break;
-
         case MoveFocusTo.None:
           nextActiveItemIndex = null;
           break;
       }
-
       return _extends({}, state, {
         activeItemIndex: nextActiveItemIndex
       });
-
     default:
       return state;
   }
@@ -118,8 +96,7 @@ export function menuReducer(state, action) {
 export default function useMenu(initialState) {
   // `menuitem`s
   var _useReducer = useReducer(menuReducer, _extends({}, initialMenuState, initialState)),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
-
+    state = _useReducer[0],
+    dispatch = _useReducer[1];
   return [state, dispatch];
 }

package/esm/Message/Message.js

@@ -1,9 +1,8 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 import React, { useState, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, STATUS, useIsMounted } from '../utils';
@@ -11,42 +10,34 @@ import CloseButton from '../CloseButton';
 import ToastContext from '../toaster/ToastContext';
 var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _withClassPrefix;
-
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      className = props.className,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'message' : _props$classPrefix,
-      children = props.children,
-      closable = props.closable,
-      _props$duration = props.duration,
-      duration = _props$duration === void 0 ? 2000 : _props$duration,
-      full = props.full,
-      header = props.header,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'info' : _props$type,
-      showIcon = props.showIcon,
-      onClose = props.onClose,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'message' : _props$classPrefix,
+    children = props.children,
+    closable = props.closable,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 2000 : _props$duration,
+    full = props.full,
+    header = props.header,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'info' : _props$type,
+    showIcon = props.showIcon,
+    onClose = props.onClose,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"]);
   var _useState = useState('show'),
-      display = _useState[0],
-      setDisplay = _useState[1];
-
+    display = _useState[0],
+    setDisplay = _useState[1];
   var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix;
-
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
   var isMounted = useIsMounted();
-
   var _useContext = useContext(ToastContext),
-      usedToaster = _useContext.usedToaster; // Timed close message
-
-
+    usedToaster = _useContext.usedToaster; // Timed close message
   var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
-      clear = _useTimeout.clear;
-
+    clear = _useTimeout.clear;
   var handleClose = useCallback(function (event) {
     setDisplay('hiding');
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
@@ -57,11 +48,9 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }, 1000);
   }, [clear, isMounted, onClose]);
-
   if (display === 'hide') {
     return null;
   }
-
   var classes = merge(className, withClassPrefix(type, display, (_withClassPrefix = {
     full: full
   }, _withClassPrefix['has-title'] = header, _withClassPrefix['has-icon'] = showIcon, _withClassPrefix)));

package/esm/Message/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Message from './Message';
 export default Message;

package/esm/Modal/Modal.js

@@ -1,9 +1,8 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
 var _templateObject, _templateObject2;
-
 import React, { useRef, useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
@@ -24,67 +23,63 @@ import deprecatePropType from '../utils/deprecatePropType';
 var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
-      children = props.children,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'modal' : _props$classPrefix,
-      dialogClassName = props.dialogClassName,
-      backdropClassName = props.backdropClassName,
-      _props$backdrop = props.backdrop,
-      backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
-      dialogStyle = props.dialogStyle,
-      _props$animation = props.animation,
-      animation = _props$animation === void 0 ? Bounce : _props$animation,
-      open = props.open,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'sm' : _props$size,
-      full = props.full,
-      _props$dialogAs = props.dialogAs,
-      Dialog = _props$dialogAs === void 0 ? ModalDialog : _props$dialogAs,
-      animationProps = props.animationProps,
-      _props$animationTimeo = props.animationTimeout,
-      animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
-      _props$overflow = props.overflow,
-      overflow = _props$overflow === void 0 ? true : _props$overflow,
-      _props$drawer = props.drawer,
-      drawer = _props$drawer === void 0 ? false : _props$drawer,
-      onClose = props.onClose,
-      onEntered = props.onEntered,
-      onEntering = props.onEntering,
-      onExited = props.onExited,
-      _props$role = props.role,
-      role = _props$role === void 0 ? 'dialog' : _props$role,
-      idProp = props.id,
-      ariaLabelledby = props['aria-labelledby'],
-      ariaDescribedby = props['aria-describedby'],
-      rest = _objectWithoutPropertiesLoose(props, ["className", "children", "classPrefix", "dialogClassName", "backdropClassName", "backdrop", "dialogStyle", "animation", "open", "size", "full", "dialogAs", "animationProps", "animationTimeout", "overflow", "drawer", "onClose", "onEntered", "onEntering", "onExited", "role", "id", "aria-labelledby", "aria-describedby"]);
-
+    children = props.children,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'modal' : _props$classPrefix,
+    dialogClassName = props.dialogClassName,
+    backdropClassName = props.backdropClassName,
+    _props$backdrop = props.backdrop,
+    backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
+    dialogStyle = props.dialogStyle,
+    _props$animation = props.animation,
+    animation = _props$animation === void 0 ? Bounce : _props$animation,
+    open = props.open,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
+    full = props.full,
+    _props$dialogAs = props.dialogAs,
+    Dialog = _props$dialogAs === void 0 ? ModalDialog : _props$dialogAs,
+    animationProps = props.animationProps,
+    _props$animationTimeo = props.animationTimeout,
+    animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
+    _props$overflow = props.overflow,
+    overflow = _props$overflow === void 0 ? true : _props$overflow,
+    _props$drawer = props.drawer,
+    drawer = _props$drawer === void 0 ? false : _props$drawer,
+    onClose = props.onClose,
+    onEntered = props.onEntered,
+    onEntering = props.onEntering,
+    onExited = props.onExited,
+    _props$role = props.role,
+    role = _props$role === void 0 ? 'dialog' : _props$role,
+    idProp = props.id,
+    ariaLabelledby = props['aria-labelledby'],
+    ariaDescribedby = props['aria-describedby'],
+    rest = _objectWithoutPropertiesLoose(props, ["className", "children", "classPrefix", "dialogClassName", "backdropClassName", "backdrop", "dialogStyle", "animation", "open", "size", "full", "dialogAs", "animationProps", "animationTimeout", "overflow", "drawer", "onClose", "onEntered", "onEntering", "onExited", "role", "id", "aria-labelledby", "aria-describedby"]);
   var inClass = {
     in: open && !animation
   };
-
   var _useClassNames = useClassNames(classPrefix),
-      merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix;
-
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
   var _useState = useState(false),
-      shake = _useState[0],
-      setShake = _useState[1];
-
+    shake = _useState[0],
+    setShake = _useState[1];
   var classes = merge(className, prefix(size, {
     full: full
   }));
   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 transitionEndListener = useRef();
 
+  // The style of the Modal body will be updated with the size of the window or container.
   var _useBodyStyles = useBodyStyles(dialogRef, {
-    overflow: overflow,
-    drawer: drawer,
-    prefix: prefix
-  }),
-      bodyStyles = _useBodyStyles[0],
-      onChangeBodyStyles = _useBodyStyles[1],
-      onDestroyEvents = _useBodyStyles[2];
-
+      overflow: overflow,
+      drawer: drawer,
+      prefix: prefix
+    }),
+    bodyStyles = _useBodyStyles[0],
+    onChangeBodyStyles = _useBodyStyles[1],
+    onDestroyEvents = _useBodyStyles[2];
   var dialogId = useUniqueId('dialog-', idProp);
   var modalContextValue = useMemo(function () {
     return {
@@ -98,7 +93,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [dialogId, onClose, bodyStyles, drawer]);
   var handleExited = useCallback(function (node) {
     var _transitionEndListene;
-
     onExited === null || onExited === void 0 ? void 0 : onExited(node);
     onDestroyEvents();
     (_transitionEndListene = transitionEndListener.current) === null || _transitionEndListene === void 0 ? void 0 : _transitionEndListene.off();
@@ -112,35 +106,42 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);
     onChangeBodyStyles(true);
   }, [onChangeBodyStyles, onEntering]);
-  var handleBackdropClick = useCallback(function (e) {
-    if (e.target !== e.currentTarget) {
+  var backdropClick = React.useRef();
+  var handleMouseDown = useCallback(function (event) {
+    backdropClick.current = event.target === event.currentTarget;
+  }, []);
+  var handleBackdropClick = useCallback(function (event) {
+    // Ignore click events from non-backdrop.
+    // fix: https://github.com/rsuite/rsuite/issues/3394
+    if (!backdropClick.current) {
       return;
-    } // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.
+    }
 
+    // Ignore click events from dialog.
+    if (event.target === dialogRef.current) {
+      return;
+    }
 
+    // Ignore click events from dialog children.
+    if (event.target !== event.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);
+    onClose === null || onClose === void 0 ? void 0 : onClose(event);
   }, [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, {
@@ -163,11 +164,11 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     animationProps: animationProps,
     dialogTransitionTimeout: animationTimeout,
     backdropTransitionTimeout: 150,
-    onClick: backdrop ? handleClick : undefined
+    onClick: backdrop ? handleBackdropClick : undefined,
+    onMouseDown: handleMouseDown
   }), function (transitionProps, transitionRef) {
     var transitionClassName = transitionProps.className,
-        transitionRest = _objectWithoutPropertiesLoose(transitionProps, ["className"]);
-
+      transitionRest = _objectWithoutPropertiesLoose(transitionProps, ["className"]);
     return /*#__PURE__*/React.createElement(Dialog, _extends({
       role: role,
       id: dialogId,