rsuite 5.1.0 → 5.2.0

package/esm/@types/common.d.ts

@@ -80,12 +80,18 @@ export interface PickerBaseProps<LocaleType = any> extends WithAsProps, Animatio
     /** Custom render extra footer */
     renderExtraFooter?: () => React.ReactNode;
 }
-export interface FormControlBaseProps<ValueType = any> {
+export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTMLInputElement>['value']> {
+    /** Name of the form field */
+    name?: string;
     /** Initial value */
     defaultValue?: ValueType;
     /** Current value of the component. Creates a controlled component */
     value?: ValueType;
-    /** Called after the value has been changed */
+    /**
+     * Called after the value has been changed
+     * todo Override event as React.ChangeEvent in components where onChange is delegated
+     *      to an underlying <input> element
+     */
     onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
     /** Set the component to be disabled and cannot be entered */
     disabled?: boolean;

package/esm/Affix/Affix.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { getOffset } from 'dom-lib';
+import getOffset from 'dom-lib/getOffset';
 import { mergeRefs, useClassNames, useElementResize, useEventListener } from '../utils';
 
 /**

package/esm/Animation/Collapse.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { getStyle, addStyle } from 'dom-lib';
+import getStyle from 'dom-lib/getStyle';
+import addStyle from 'dom-lib/addStyle';
 import get from 'lodash/get';
 import capitalize from 'lodash/capitalize';
 import Transition, { transitionPropTypes } from './Transition';

package/esm/Animation/Transition.js

@@ -3,7 +3,8 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { on, transition } from 'dom-lib';
+import getTransitionEnd from 'dom-lib/getTransitionEnd';
+import on from 'dom-lib/on';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
@@ -136,7 +137,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           timeout = _this$props.timeout,
           animation = _this$props.animation;
-      this.animationEventListener = on(node, animation ? getAnimationEnd() : transition().end, this.nextCallback);
+      this.animationEventListener = on(node, animation ? getAnimationEnd() : getTransitionEnd(), this.nextCallback);
 
       if (timeout !== null) {
         setTimeout(this.nextCallback, timeout);

package/esm/AutoComplete/AutoComplete.d.ts

@@ -18,9 +18,9 @@ export interface AutoCompleteProps<T = ValueType> extends WithAsProps, FormContr
     /** Called when a option is selected */
     onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent) => void;
     /** Called on focus */
-    onFocus?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onFocus?: React.FocusEventHandler;
     /** Called on blur */
-    onBlur?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onBlur?: React.FocusEventHandler;
     /** Called on menu focus */
     onMenuFocus?: (focusItemValue: any, event: React.KeyboardEvent) => void;
     /** The callback triggered by keyboard events. */

package/esm/AutoComplete/AutoComplete.js

@@ -4,7 +4,7 @@ import React, { useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import Input from '../Input';
-import { useClassNames, useControlled, PLACEMENT, mergeRefs } from '../utils';
+import { useClassNames, useControlled, PLACEMENT, mergeRefs, useIsMounted } from '../utils';
 import { animationPropTypes } from '../Animation/utils';
 import { PickerToggleTrigger, onMenuKeyDown, DropdownMenu, DropdownMenuItem, PickerOverlay, useFocusItemValue, usePublicMethods, pickTriggerPropKeys } from '../Picker';
 import { transformData, shouldDisplay } from './utils';
@@ -57,7 +57,8 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter(shouldDisplay(filterBy, value))) || [];
   var hasItems = items.length > 0;
-  var overlayRef = useRef(null); // Used to hover the focuse item  when trigger `onKeydown`
+  var overlayRef = useRef(null);
+  var isMounted = useIsMounted(); // Used to hover the focuse item  when trigger `onKeydown`
 
   var _useFocusItemValue = useFocusItemValue(value, {
     data: datalist,
@@ -117,9 +118,11 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var handleClose = useCallback(function () {
-    setFocus(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
+    if (isMounted()) {
+      setFocus(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+  }, [isMounted, onClose]);
   var handleOpen = useCallback(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();

package/esm/Calendar/TimeDropdown.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { getPosition, scrollTop } from 'dom-lib';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
 import partial from 'lodash/partial';
 import camelCase from 'lodash/camelCase';
 import isNumber from 'lodash/isNumber';

package/esm/Cascader/Cascader.d.ts

@@ -25,7 +25,7 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T,
     /** Called when clean */
     onClean?: (event: React.SyntheticEvent) => void;
     /** Called when searching */
-    onSearch?: (searchKeyword: string, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSearch?: (searchKeyword: string, event: React.SyntheticEvent) => void;
     /** Asynchronously load the children of the tree node. */
     getChildren?: (node: ItemDataType) => ItemDataType[] | Promise<ItemDataType[]>;
 }

package/esm/Cascader/DropdownMenu.js

@@ -3,13 +3,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
-import helper from '../DOMHelper';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import { shallowEqual, useClassNames, mergeRefs, useCustom } from '../utils';
 import { DropdownMenuItem } from '../Picker';
 import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
 import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
 var emptyArray = [];
 var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
@@ -61,9 +62,9 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
 
       if (activeItem) {
-        var position = helper.getPosition(activeItem, column); // Let the active option scroll into view.
+        var position = getPosition(activeItem, column); // Let the active option scroll into view.
 
-        helper.scrollTop(column, position.top);
+        scrollTop(column, position.top);
       }
     });
   }, [prefix]);

package/esm/CheckTreePicker/CheckTreeNode.d.ts

@@ -20,7 +20,7 @@ export interface CheckTreeNodeProps extends WithAsProps {
     uncheckable?: boolean;
     allUncheckable?: boolean;
     onExpand?: (nodeData: any) => void;
-    onSelect?: (nodeData: any, event: React.SyntheticEvent<any>) => void;
+    onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
     onRenderTreeIcon?: (nodeData: any, expandIcon?: React.ReactNode) => React.ReactNode;
     onRenderTreeNode?: (nodeData: any) => React.ReactNode;
 }

package/esm/CheckTreePicker/CheckTreePicker.d.ts

@@ -14,7 +14,7 @@ export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, It
     /** Custom render selected items */
     renderValue?: (value: any[], selectedItems: any[], selectedElement: React.ReactNode) => React.ReactNode;
     /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onScroll?: (event: React.SyntheticEvent) => void;
 }
 declare const CheckTreePicker: PickerComponent<CheckTreePickerProps>;
 export default CheckTreePicker;

package/esm/Checkbox/Checkbox.d.ts

@@ -31,11 +31,11 @@ export interface CheckboxProps<V = ValueType> extends WithAsProps {
     /** Used for the name of the form */
     name?: string;
     /** Called when the user attempts to change the checked state. */
-    onChange?: (value: V, checked: boolean, event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (value: V, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Called when the checkbox or label is clicked. */
-    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onClick?: (event: React.SyntheticEvent) => void;
     /** Called when the checkbox is clicked. */
-    onCheckboxClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onCheckboxClick?: (event: React.SyntheticEvent) => void;
 }
 declare const Checkbox: RsRefForwardingComponent<'div', CheckboxProps>;
 export default Checkbox;

package/esm/CheckboxGroup/CheckboxGroupContext.d.ts

@@ -8,6 +8,6 @@ export interface CheckboxGroupContextValue {
     disabled?: boolean;
     readOnly?: boolean;
     plaintext?: boolean;
-    onChange?: (value: any, checked: boolean, event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (value: any, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextValue>;

package/esm/DOMHelper/index.d.ts

@@ -2,34 +2,17 @@ import * as helpers from 'dom-lib';
 export * from 'dom-lib';
 declare const DOMHelper: {
     isElement: (node: HTMLElement) => boolean;
-    animation: typeof helpers.animation;
-    transition: () => {
-        end: any;
-        backfaceVisibility: string;
-        transform: string;
-        property: string;
-        timing: string;
-        delay: string;
-        duration: string;
-    };
-    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number, y?: number) => CSSStyleDeclaration;
-    getVendorPrefixedName: typeof helpers.getVendorPrefixedName;
-    BrowserSupportCore: {
-        hasCSSAnimations: () => boolean;
-        hasCSSTransforms: () => boolean;
-        hasCSS3DTransforms: () => boolean;
-        hasCSSTransitions: () => boolean;
-    };
-    DOMMouseMoveTracker: typeof helpers.DOMMouseMoveTracker;
+    on: typeof helpers.on;
+    off: typeof helpers.off;
     WheelHandler: typeof helpers.WheelHandler;
+    DOMMouseMoveTracker: typeof helpers.DOMMouseMoveTracker;
     addClass: (target: Element, className: string) => Element;
-    hasClass: (target: Element, className: string) => boolean;
     removeClass: (target: Element, className: string) => Element;
+    hasClass: (target: Element, className: string) => boolean;
     toggleClass: (target: Element, className: string) => Element;
-    getStyle: (node: Element, property?: string) => string | CSSStyleDeclaration;
-    removeStyle: (node: Element, keys: string | string[]) => void;
-    addStyle: (node: Element, property: string | import("dom-lib/lib/style/addStyle").CSSProperty, value?: string | number) => void;
-    getComputedStyle: (node: Element) => CSSStyleDeclaration;
+    cancelAnimationFramePolyfill: typeof clearTimeout;
+    requestAnimationFramePolyfill: typeof requestAnimationFrame;
+    getAnimationEnd: typeof helpers.getAnimationEnd;
     ownerDocument: (node: Element) => Document;
     ownerWindow: (componentOrElement: Element) => Window;
     getWindow: (node: any) => Window;
@@ -53,11 +36,13 @@ declare const DOMHelper: {
         width: number;
     };
     isOverflowing: (container: Element) => boolean;
-    activeElement: (doc?: Document) => Element;
     getScrollbarSize: (recalc?: boolean) => number | void;
     getHeight: (node: Element | Window, client?: Element) => number;
     getWidth: (node: Element | Window, client?: Element) => number;
-    on: typeof helpers.on;
-    off: typeof helpers.off;
+    isFocusable: typeof helpers.isFocusable;
+    getStyle: (node: Element, property?: string) => string | CSSStyleDeclaration;
+    removeStyle: (node: Element, keys: string | string[]) => void;
+    addStyle: (node: Element, property: string | import("dom-lib/esm/addStyle").CSSProperty, value?: string | number) => void;
+    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number, y?: number) => CSSStyleDeclaration;
 };
 export default DOMHelper;

package/esm/DOMHelper/index.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as helpers from 'dom-lib';
+import isElement from './isElement';
 export * from 'dom-lib';
 
 var DOMHelper = _extends({}, helpers, {
-  isElement: function isElement(node) {
-    return (node === null || node === void 0 ? void 0 : node.nodeType) && typeof (node === null || node === void 0 ? void 0 : node.nodeName) === 'string';
-  }
+  isElement: isElement
 });
 
 export default DOMHelper;

package/esm/DOMHelper/isElement.d.ts

@@ -0,0 +1,2 @@
+declare const isElement: (node: HTMLElement) => boolean;
+export default isElement;

package/esm/DOMHelper/isElement.js

@@ -0,0 +1,5 @@
+var isElement = function isElement(node) {
+  return (node === null || node === void 0 ? void 0 : node.nodeType) === 1 && typeof (node === null || node === void 0 ? void 0 : node.nodeName) === 'string';
+};
+
+export default isElement;

package/esm/DatePicker/DatePicker.d.ts

@@ -41,19 +41,19 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     /** Hidden seconds */
     hideSeconds?: (second: number, date: Date) => boolean;
     /** Called when the calendar panel date changes */
-    onChangeCalendarDate?: (date: Date, event?: React.SyntheticEvent<HTMLElement>) => void;
+    onChangeCalendarDate?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called when opening the month view */
     onToggleMonthDropdown?: (toggle: boolean) => void;
     /** Called when opening the time view */
     onToggleTimeDropdown?: (toggle: boolean) => void;
     /** Called when the option is selected */
-    onSelect?: (date: Date, event?: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after the prev month */
     onPrevMonth?: (date: Date) => void;
     /** Called after the next month */
     onNextMonth?: (date: Date) => void;
     /** Called after clicking the OK button */
-    onOk?: (date: Date, event: React.SyntheticEvent<HTMLElement>) => void;
+    onOk?: (date: Date, event: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */

package/esm/DateRangePicker/Calendar.d.ts

@@ -16,7 +16,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     onChangeCalendarDate?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
     onMouseMove?: (date: Date) => void;
-    onSelect?: (date: Date, event?: React.SyntheticEvent<any>) => void;
+    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     showOneCalendar?: boolean;
     showWeekNumbers?: boolean;
     value?: ValueType;

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -26,9 +26,9 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     /** Disabled date */
     disabledDate?: DisabledDateFunction;
     /** Called when the option is selected */
-    onSelect?: (date: Date, event?: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after clicking the OK button */
-    onOk?: (date: ValueType, event: React.SyntheticEvent<HTMLElement>) => void;
+    onOk?: (date: ValueType, event: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */

package/esm/Disclosure/Disclosure.d.ts

@@ -12,7 +12,7 @@ export interface DisclosureProps {
     defaultOpen?: boolean;
     hideOnClickOutside?: boolean;
     /** Callback when disclosure button is being activated to update the open state */
-    onToggle?: (open: boolean, event: React.SyntheticEvent<HTMLElement>) => void;
+    onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
 }
 declare function Disclosure(props: DisclosureProps): JSX.Element;
 declare namespace Disclosure {

package/esm/Disclosure/DisclosureContext.d.ts

@@ -13,7 +13,7 @@ export declare type DisclosureContextProps = [
     DisclosureState,
     Dispatch<DisclosureAction>,
     {
-        onToggle: (open: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
+        onToggle: (open: boolean, event?: React.SyntheticEvent) => void;
     }
 ];
 declare const DisclosureContext: React.Context<DisclosureContextProps>;

package/esm/Dropdown/DropdownItem.d.ts

@@ -32,7 +32,7 @@ export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.
      */
     open?: boolean;
     /** Select the callback function for the current option  */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 /**
  * The <Dropdown.Item> API

package/esm/Dropdown/DropdownMenu.d.ts

@@ -19,8 +19,8 @@ export interface DropdownMenuProps<T = string> extends StandardProps {
     disabled?: boolean;
     activeKey?: T;
     trigger?: 'hover' | 'click';
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<Element>) => void;
-    onToggle?: (eventKey: T, event: React.SyntheticEvent<Element>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onToggle?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 /**
  * The <Dropdown.Menu> API

package/esm/Form/Form.d.ts

@@ -33,7 +33,7 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     /** The error message comes from context */
     errorFromContext?: boolean;
     /** Callback fired when data changing */
-    onChange?: (formValue: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onChange?: (formValue: T, event: React.SyntheticEvent) => void;
     /** Callback fired when error checking */
     onError?: (formError: E) => void;
     /** Callback fired when data cheking */

package/esm/FormControl/FormControl.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TypeAttributes, FormControlBaseProps, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import Input from '../Input';
+import { TypeAttributes, FormControlBaseProps, WithAsProps } from '../@types/common';
 /**
  * Props that FormControl passes to its accepter
  */
@@ -12,7 +13,7 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
     /** Value */
     value?: ValueType;
     /** Callback fired when data changing */
-    onChange?(value: ValueType, event: React.SyntheticEvent<HTMLElement>): void;
+    onChange?(value: ValueType, event: React.SyntheticEvent): void;
     /** The data validation trigger type, and it wiill overrides the setting on <Form> */
     checkTrigger?: TypeAttributes.CheckTrigger;
     /** Show error messages */
@@ -28,5 +29,10 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
     /** Asynchronous check value */
     checkAsync?: boolean;
 }
-declare const FormControl: RsRefForwardingComponent<'div', FormControlProps>;
+interface FormControlComponent extends React.FC<FormControlProps> {
+    <Accepter extends React.ElementType = typeof Input>(props: FormControlProps & {
+        accepter?: Accepter;
+    } & React.ComponentPropsWithRef<Accepter>): React.ReactElement;
+}
+declare const FormControl: FormControlComponent;
 export default FormControl;

package/esm/Input/Input.d.ts

@@ -3,7 +3,7 @@ import { WithAsProps, RsRefForwardingComponent, TypeAttributes, FormControlBaseP
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps<string | number | ReadonlyArray<string>> {
+export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */
@@ -12,6 +12,7 @@ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<
     size?: TypeAttributes.Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Called on press enter */
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }

package/esm/InputNumber/InputNumber.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
 import AngleDownIcon from '@rsuite/icons/legacy/AngleDown';
-import helper from '../DOMHelper';
+import on from 'dom-lib/on';
 import InputGroup from '../InputGroup/InputGroup';
 import InputGroupAddon from '../InputGroup/InputGroupAddon';
 import Input from '../Input';
@@ -195,7 +195,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var wheelListener;
 
     if (inputRef.current && scrollable) {
-      wheelListener = helper.on(inputRef.current, 'wheel', handleWheel, {
+      wheelListener = on(inputRef.current, 'wheel', handleWheel, {
         passive: false
       });
     }

package/esm/InputPicker/InputPicker.js

@@ -14,7 +14,7 @@ import clone from 'lodash/clone';
 import isArray from 'lodash/isArray';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
-import { getWidth } from 'dom-lib';
+import getWidth from 'dom-lib/getWidth';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../Plaintext';

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