rsuite 5.1.0 → 5.2.3

package/esm/List/helper/useSortHelper.js

@@ -4,10 +4,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { on } from 'dom-lib';
+import on from 'dom-lib/on';
 import { useCallback, useRef, useState } from 'react';
 import AutoScroller from './AutoScroller';
 import { closestNode, getEdgeOffset, getScrollingParent, isContainInteractiveElement, setInlineStyles, setTransitionDuration, setTranslate3d } from './utils';
+import { useIsMounted } from '../../utils';
 import useManager from './useManager';
 
 var useSortHelper = function useSortHelper(config) {
@@ -30,14 +31,16 @@ var useSortHelper = function useSortHelper(config) {
       listItemRegister = _useManager.listItemRegister,
       getManagedItem = _useManager.getManagedItem,
       getOrderedItems = _useManager.getOrderedItems;
+
+  var isMounted = useIsMounted();
   /**
    * start dragging
    * */
 
-
   var handlePress = useCallback(function (mouseDownEvent, targetNode, curManagedItem) {
     var _activeNodeHelper;
 
+    if (!isMounted()) return;
     var listItemBaseClassName = targetNode.classList[0]; // get list item base className
 
     var helperElementClass = listItemBaseClassName + "-helper";
@@ -217,7 +220,8 @@ var useSortHelper = function useSortHelper(config) {
       setTimeout(function () {
         var _activeNodeHelper2, _activeNodeHelper2$pa;
 
-        // Remove the helper from the DOM
+        if (!isMounted()) return; // Remove the helper from the DOM
+
         (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 ? void 0 : (_activeNodeHelper2$pa = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2$pa === void 0 ? void 0 : _activeNodeHelper2$pa.removeChild(activeNodeHelper);
         activeNodeHelper = null; // Remove redundant styles
 
@@ -260,7 +264,7 @@ var useSortHelper = function useSortHelper(config) {
       oldIndex: activeNodeOldIndex,
       newIndex: activeNodeNextIndex
     }, mouseDownEvent.nativeEvent);
-  }, [autoScroll, getOrderedItems, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
+  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
   /**
    * Determine whether to start dragging
    * */

package/esm/MaskedInput/MaskedInput.d.ts

@@ -1,43 +1,6 @@
-import React from 'react';
-import { MaskType, MaskFunctionType, ConfigType } from './types';
-/**
- * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
- */
-interface TextMaskProps {
-    /**
-     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
-     */
-    guide?: boolean;
-    /**
-     * `mask` is an array or a function that defines how the user input is going to be masked.
-     */
-    mask?: MaskType | MaskFunctionType | boolean;
-    /**
-     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
-     * in place of the regular placeholder when the input element value is empty.
-     */
-    showMask?: boolean;
-    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
-    placeholderChar?: string;
-    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
-    keepCharPositions?: boolean;
-    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
-    pipe?: (conformedValue: string, config: ConfigType) => string;
-}
-export declare type MaskedInputProps = TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-};
-declare const MaskedInput: React.ForwardRefExoticComponent<TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
+import { InputProps } from '../Input';
+import type { TextMaskProps } from './TextMask';
+import { RsRefForwardingComponent } from '../@types/common';
+export declare type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+declare const MaskedInput: RsRefForwardingComponent<'input', MaskedInputProps>;
 export default MaskedInput;

package/esm/MaskedInput/MaskedInput.js

@@ -1,67 +1,13 @@
-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));
-};
-
+import React from 'react';
+import TextMask from './TextMask';
+import Input from '../Input';
 var MaskedInput = /*#__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'])));
+  var _props$as = props.as,
+      inputAs = _props$as === void 0 ? TextMask : _props$as;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+    as: inputAs,
+    ref: ref
+  }));
 });
-MaskedInput.displayName = 'MaskedInput';
-MaskedInput.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 MaskedInput;

package/esm/MaskedInput/TextMask.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MaskType, MaskFunctionType, ConfigType } from './types';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+interface TextMaskBaseProps {
+    /**
+     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
+     */
+    guide?: boolean;
+    /**
+     * `mask` is an array or a function that defines how the user input is going to be masked.
+     */
+    mask?: MaskType | MaskFunctionType | boolean;
+    /**
+     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
+     * in place of the regular placeholder when the input element value is empty.
+     */
+    showMask?: boolean;
+    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
+    placeholderChar?: string;
+    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
+    keepCharPositions?: boolean;
+    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
+    pipe?: (conformedValue: string, config: ConfigType) => string;
+}
+export declare type TextMaskProps = TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+};
+declare const TextMask: React.ForwardRefExoticComponent<TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TextMask;

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

@@ -1,5 +1,5 @@
 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 MenuContext, { MenuActionTypes, MoveFocusTo } from './MenuContext';
 import { KEY_VALUES, useCustom } from '../utils';
@@ -40,7 +40,10 @@ function Menu(props) {
       rtl = _useCustom.rtl;
 
   var activeItem = (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
-  var menuFocus = useFocus(menuElementRef);
+
+  var _useFocus = useFocus(menuElementRef),
+      grabFocus = _useFocus.grab;
+
   var openMenu = useCallback(function (event) {
     dispatch({
       type: MenuActionTypes.OpenMenu
@@ -54,8 +57,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;
@@ -150,41 +153,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);

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<HTMLElement>) => void;
+    onActivate?: (event: React.SyntheticEvent) => void;
 }
 export interface MenuitemRenderProps {
     selected: boolean;

package/esm/Menu/MenuItem.js

@@ -32,20 +32,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
-    });
-  }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
+    if (!hasFocus) {
+      dispatch({
+        type: MenuActionTypes.MoveFocus,
+        to: MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, 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 (!hasFocus) {
+      dispatch({
+        type: MenuActionTypes.MoveFocus,
+        to: MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, dispatch]);
   var handleMouseLeave = useCallback(function () {
     dispatch({
       type: MenuActionTypes.MoveFocus,

package/esm/Menu/Menubar.d.ts

@@ -5,6 +5,6 @@ export interface MenubarProps {
     /** Render prop */
     children: (menubar: React.HTMLAttributes<HTMLUListElement>, ref: React.Ref<HTMLUListElement>) => React.ReactElement;
     /** Callback triggered when an item is being activated */
-    onActivateItem?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onActivateItem?: (event: React.SyntheticEvent) => void;
 }
 export default function Menubar({ vertical, children, onActivateItem }: MenubarProps): JSX.Element;

package/esm/Message/Message.js

@@ -4,9 +4,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, STATUS } from '../utils';
+import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, STATUS, useIsMounted } from '../utils';
 import CloseButton from '../CloseButton';
 var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _withClassPrefix;
@@ -35,12 +35,24 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix; // Timed close message
+      prefix = _useClassNames.prefix;
 
+  var isMounted = useIsMounted(); // Timed close message
 
   var _useTimeout = useTimeout(onClose, duration, duration > 0),
       clear = _useTimeout.clear;
 
+  var handleClose = useCallback(function (event) {
+    setDisplay('hiding');
+    onClose === null || onClose === void 0 ? void 0 : onClose(event);
+    clear();
+    setTimeout(function () {
+      if (isMounted()) {
+        setDisplay('hide');
+      }
+    }, 1000);
+  }, [clear, isMounted, onClose]);
+
   if (display === 'hide') {
     return null;
   }
@@ -48,16 +60,6 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix(type, display, (_withClassPrefix = {
     full: full
   }, _withClassPrefix['has-title'] = header, _withClassPrefix['has-icon'] = showIcon, _withClassPrefix)));
-
-  var handleClose = function handleClose(event) {
-    setDisplay('hiding');
-    onClose === null || onClose === void 0 ? void 0 : onClose(event);
-    clear();
-    setTimeout(function () {
-      setDisplay('hide');
-    }, 1000);
-  };
-
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "alert"
   }, rest, {

package/esm/Modal/Modal.js

@@ -7,6 +7,8 @@ var _templateObject, _templateObject2;
 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 BaseModal, { modalPropTypes } from '../Overlay/Modal';
 import Bounce from '../Animation/Bounce';
 import { useClassNames, mergeRefs, SIZE } from '../utils';
@@ -16,7 +18,6 @@ import ModalBody from './ModalBody';
 import ModalHeader from './ModalHeader';
 import ModalTitle from './ModalTitle';
 import ModalFooter from './ModalFooter';
-import helper from '../DOMHelper';
 import { useBodyStyles } from './utils';
 import useUniqueId from '../utils/useUniqueId';
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -97,7 +98,7 @@ 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 = helper.on(dialogRef.current, helper.animation.events().end, function () {
+      transitionEndListener.current = on(dialogRef.current, getTransitionEnd(), function () {
         setShake(false);
       });
     }

package/esm/Modal/utils.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
-import helper from '../DOMHelper';
+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,6 +12,7 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
       prefix = options.prefix;
   var windowResizeListener = useRef();
   var contentElement = useRef();
+  var contentElementResizeObserver = useRef();
   var updateBodyStyles = useCallback(function (_event, entering) {
     var dialog = ref.current;
     var scrollHeight = dialog ? dialog.scrollHeight : 0;
@@ -24,14 +26,14 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
       var footerHeight = 46;
       var headerDOM = dialog.querySelector("." + prefix('header'));
       var footerDOM = dialog.querySelector("." + prefix('footer'));
-      headerHeight = headerDOM ? helper.getHeight(headerDOM) + headerHeight : headerHeight;
-      footerHeight = footerDOM ? helper.getHeight(footerDOM) + footerHeight : footerHeight;
+      headerHeight = headerDOM ? getHeight(headerDOM) + headerHeight : headerHeight;
+      footerHeight = footerDOM ? getHeight(footerDOM) + footerHeight : footerHeight;
       /**
        * Header height + Footer height + Dialog margin
        */
 
       var excludeHeight = headerHeight + footerHeight + (entering ? 70 : 60);
-      var bodyHeight = helper.getHeight(window) - excludeHeight;
+      var bodyHeight = getHeight(window) - excludeHeight;
       var maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
       styles.maxHeight = maxHeight;
     }
@@ -39,13 +41,10 @@ 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) {
@@ -53,8 +52,11 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
 
       updateBodyStyles(null, entering);
       contentElement.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("." + prefix('content'));
-      windowResizeListener.current = helper.on(window, 'resize', updateBodyStyles);
-      bindElementResize(contentElement.current, updateBodyStyles);
+      windowResizeListener.current = on(window, 'resize', updateBodyStyles);
+      contentElementResizeObserver.current = new ResizeObserver(function () {
+        return updateBodyStyles();
+      });
+      contentElementResizeObserver.current.observe(contentElement.current);
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   useEffect(function () {

package/esm/Notification/Notification.js

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2;
 
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS } from '../utils';
+import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, useIsMounted } from '../utils';
 import CloseButton from '../CloseButton';
 var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
@@ -30,8 +30,9 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix; // Timed close message
+      prefix = _useClassNames.prefix;
 
+  var isMounted = useIsMounted(); // Timed close message
 
   var _useTimeout = useTimeout(onClose, duration, duration > 0),
       clear = _useTimeout.clear; // Click to trigger to close the message
@@ -42,9 +43,11 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
     clear();
     setTimeout(function () {
-      setDisplay('hide');
+      if (isMounted()) {
+        setDisplay('hide');
+      }
     }, 1000);
-  }, [onClose, clear]);
+  }, [onClose, clear, isMounted]);
   var renderHeader = useCallback(function () {
     if (!header) {
       return null;