rsuite 5.0.2 → 5.2.1

package/cjs/Modal/utils.js

@@ -11,7 +11,9 @@ var _react = require("react");
 
 var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"));
 
-var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
+var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
+
+var _on = _interopRequireDefault(require("dom-lib/on"));
 
 var useBodyStyles = function useBodyStyles(ref, options) {
   var _useState = (0, _react.useState)({}),
@@ -36,14 +38,14 @@ var useBodyStyles = function useBodyStyles(ref, options) {
       var footerHeight = 46;
       var headerDOM = dialog.querySelector("." + prefix('header'));
       var footerDOM = dialog.querySelector("." + prefix('footer'));
-      headerHeight = headerDOM ? _DOMHelper.default.getHeight(headerDOM) + headerHeight : headerHeight;
-      footerHeight = footerDOM ? _DOMHelper.default.getHeight(footerDOM) + footerHeight : footerHeight;
+      headerHeight = headerDOM ? (0, _getHeight.default)(headerDOM) + headerHeight : headerHeight;
+      footerHeight = footerDOM ? (0, _getHeight.default)(footerDOM) + footerHeight : footerHeight;
       /**
        * Header height + Footer height + Dialog margin
        */
 
       var excludeHeight = headerHeight + footerHeight + (entering ? 70 : 60);
-      var bodyHeight = _DOMHelper.default.getHeight(window) - excludeHeight;
+      var bodyHeight = (0, _getHeight.default)(window) - excludeHeight;
       var maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
       styles.maxHeight = maxHeight;
     }
@@ -65,7 +67,7 @@ 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 = _DOMHelper.default.on(window, 'resize', updateBodyStyles);
+      windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);
       (0, _elementResizeEvent.default)(contentElement.current, updateBodyStyles);
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);

package/cjs/MultiCascader/MultiCascader.js

@@ -480,6 +480,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     classPrefix: classPrefix,
     hasValue: hasValue,
     name: 'cascader',
+    appearance: appearance,
     cleanable: cleanable
   })),
       classes = _usePickerClassName[0],

package/cjs/Notification/Notification.js

@@ -45,8 +45,9 @@ var Notification = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix; // Timed close message
+      prefix = _useClassNames.prefix;
 
+  var isMounted = (0, _utils.useIsMounted)(); // Timed close message
 
   var _useTimeout = (0, _utils.useTimeout)(onClose, duration, duration > 0),
       clear = _useTimeout.clear; // Click to trigger to close the message
@@ -57,9 +58,11 @@ var Notification = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function () {
     if (!header) {
       return null;

package/cjs/Overlay/Modal.js

@@ -17,7 +17,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
+var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
+
+var _contains = _interopRequireDefault(require("dom-lib/contains"));
+
+var _getContainer = _interopRequireDefault(require("dom-lib/getContainer"));
+
+var _on = _interopRequireDefault(require("dom-lib/on"));
 
 var _ModalManager = _interopRequireDefault(require("./ModalManager"));
 
@@ -121,8 +127,8 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }, [keyboard, modal, onEscapeKeyUp, onClose]);
   var checkForFocus = (0, _react.useCallback)(function () {
-    if (_DOMHelper.default.canUseDOM) {
-      lastFocus.current = _DOMHelper.default.activeElement();
+    if (_canUseDOM.default) {
+      lastFocus.current = document.activeElement;
     }
   }, []);
   var restoreLastFocus = (0, _react.useCallback)(function () {
@@ -141,11 +147,10 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return;
     }
 
-    var currentActiveElement = _DOMHelper.default.activeElement();
-
+    var currentActiveElement = document.activeElement;
     var dialog = getDialogElement();
 
-    if (dialog && dialog !== currentActiveElement && !_DOMHelper.default.contains(dialog, currentActiveElement)) {
+    if (dialog && dialog !== currentActiveElement && !(0, _contains.default)(dialog, currentActiveElement)) {
       dialog.focus();
     }
   }, [enforceFocus, getDialogElement, modal]);
@@ -164,12 +169,10 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var docusinListener = (0, _react.useRef)();
   var handleOpen = (0, _react.useCallback)(function () {
     var dialog = getDialogElement();
-
-    var containerElement = _DOMHelper.default.getContainer(container, document.body);
-
+    var containerElement = (0, _getContainer.default)(container, document.body);
     modal.add(containerElement, containerClassName);
-    documentKeyupListener.current = _DOMHelper.default.on(document, 'keydown', handleDocumentKeyUp);
-    docusinListener.current = _DOMHelper.default.on(document, 'focus', handleEnforceFocus, true);
+    documentKeyupListener.current = (0, _on.default)(document, 'keydown', handleDocumentKeyUp);
+    docusinListener.current = (0, _on.default)(document, 'focus', handleEnforceFocus, true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     checkForFocus();
 

package/cjs/Overlay/ModalManager.js

@@ -1,9 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.default = void 0;
 
-var _domLib = require("dom-lib");
+var _addClass = _interopRequireDefault(require("dom-lib/addClass"));
+
+var _removeClass = _interopRequireDefault(require("dom-lib/removeClass"));
+
+var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
+
+var _getStyle = _interopRequireDefault(require("dom-lib/getStyle"));
+
+var _getScrollbarSize = _interopRequireDefault(require("dom-lib/getScrollbarSize"));
+
+var _isOverflowing = _interopRequireDefault(require("dom-lib/isOverflowing"));
 
 function findIndexOf(arr, cb) {
   var index = -1;
@@ -65,18 +77,18 @@ var ModalManager = /*#__PURE__*/function () {
         overflow: container.style.overflow,
         paddingRight: container.style.paddingRight
       },
-      overflowing: (0, _domLib.isOverflowing)(container)
+      overflowing: (0, _isOverflowing.default)(container)
     };
 
     if (data.overflowing) {
-      var paddingRight = parseInt((0, _domLib.getStyle)(container, 'paddingRight') || 0, 10);
-      var barSize = (0, _domLib.getScrollbarSize)();
-      (0, _domLib.addStyle)(container, {
+      var paddingRight = parseInt((0, _getStyle.default)(container, 'paddingRight') || 0, 10);
+      var barSize = (0, _getScrollbarSize.default)();
+      (0, _addStyle.default)(container, {
         paddingRight: (barSize ? paddingRight + barSize : paddingRight) + 'px'
       });
     }
 
-    data.classes.forEach(_domLib.addClass.bind(null, container));
+    data.classes.forEach(_addClass.default.bind(null, container));
     this.containers.push(container);
     this.data.push(data);
     return modalIndex;
@@ -99,7 +111,7 @@ var ModalManager = /*#__PURE__*/function () {
       Object.keys(data.style).forEach(function (key) {
         return container.style[key] = data.style[key];
       });
-      data.classes.forEach(_domLib.removeClass.bind(null, container));
+      data.classes.forEach(_removeClass.default.bind(null, container));
       this.containers.splice(containerIndex, 1);
       this.data.splice(containerIndex, 1);
     }

package/cjs/Overlay/OverlayTrigger.js

@@ -19,7 +19,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
-var _domLib = require("dom-lib");
+var _contains = _interopRequireDefault(require("dom-lib/contains"));
 
 var _Overlay = _interopRequireDefault(require("./Overlay"));
 
@@ -58,7 +58,7 @@ function onMouseEventHandler(handler, event, delay) {
   var target = event.currentTarget;
   var related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', 'toElement']);
 
-  if ((!related || related !== target) && !(0, _domLib.contains)(target, related)) {
+  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {
     handler(event, delay);
   }
 }

package/cjs/Overlay/Position.js

@@ -15,7 +15,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
+var _getContainer = _interopRequireDefault(require("dom-lib/getContainer"));
+
+var _ownerDocument = _interopRequireDefault(require("dom-lib/ownerDocument"));
+
+var _removeClass = _interopRequireDefault(require("dom-lib/removeClass"));
+
+var _on = _interopRequireDefault(require("dom-lib/on"));
+
+var _addClass = _interopRequireDefault(require("dom-lib/addClass"));
+
+var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
+
+var _isElement = _interopRequireDefault(require("../DOMHelper/isElement"));
 
 var _positionUtils = _interopRequireDefault(require("./positionUtils"));
 
@@ -66,7 +78,7 @@ var usePosition = function usePosition(props, ref) {
 
     var targetElement = (0, _utils.getDOMNode)(triggerTarget);
 
-    if (!_DOMHelper.default.isElement(targetElement)) {
+    if (!(0, _isElement.default)(targetElement)) {
       throw new Error('`target` should return an HTMLElement');
     } //  If the target and placement do not change, the position is not updated.
 
@@ -76,21 +88,16 @@ var usePosition = function usePosition(props, ref) {
     }
 
     var overlay = (0, _utils.getDOMNode)(ref.current);
-
-    var containerElement = _DOMHelper.default.getContainer(typeof container === 'function' ? container() : container, _DOMHelper.default.ownerDocument(ref.current).body);
-
+    var containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container, (0, _ownerDocument.default)(ref.current).body);
     var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement);
 
     if (forceUpdateDOM && overlay) {
       var _overlay$className, _overlay$className$ma;
 
       var preClassName = overlay === null || overlay === void 0 ? void 0 : (_overlay$className = overlay.className) === null || _overlay$className === void 0 ? void 0 : (_overlay$className$ma = _overlay$className.match(/(placement-\S+)/)) === null || _overlay$className$ma === void 0 ? void 0 : _overlay$className$ma[0];
-
-      _DOMHelper.default.removeClass(overlay, preClassName);
-
-      _DOMHelper.default.addClass(overlay, posi.positionClassName);
-
-      _DOMHelper.default.addStyle(overlay, {
+      (0, _removeClass.default)(overlay, preClassName);
+      (0, _addClass.default)(overlay, posi.positionClassName);
+      (0, _addStyle.default)(overlay, {
         left: posi.positionLeft + "px",
         top: posi.positionTop + "px"
       });
@@ -110,13 +117,13 @@ var usePosition = function usePosition(props, ref) {
       var _containerRef$current;
 
       // Update the overlay position when the container scroll bar is scrolling
-      containerScrollListener = _DOMHelper.default.on(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.tagName) === 'BODY' ? window : containerRef.current, 'scroll', function () {
+      containerScrollListener = (0, _on.default)(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.tagName) === 'BODY' ? window : containerRef.current, 'scroll', function () {
         return updatePosition(true, true);
       });
     } // Update the position when the window size changes
 
 
-    var resizeListener = _DOMHelper.default.on(window, 'resize', function () {
+    var resizeListener = (0, _on.default)(window, 'resize', function () {
       return updatePosition(true, true);
     });
 

package/cjs/Overlay/positionUtils.js

@@ -11,7 +11,15 @@ var _minBy = _interopRequireDefault(require("lodash/minBy"));
 
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
-var _domLib = require("dom-lib");
+var _ownerDocument = _interopRequireDefault(require("dom-lib/ownerDocument"));
+
+var _getOffset3 = _interopRequireDefault(require("dom-lib/getOffset"));
+
+var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
+
+var _scrollLeft = _interopRequireDefault(require("dom-lib/scrollLeft"));
+
+var _getPosition2 = _interopRequireDefault(require("dom-lib/getPosition"));
 
 var AutoPlacement = {
   left: 'Start',
@@ -34,15 +42,15 @@ function getContainerDimensions(containerNode) {
   if (containerNode.tagName === 'BODY') {
     width = window.innerWidth;
     height = window.innerHeight;
-    scrollY = (0, _domLib.scrollTop)((0, _domLib.ownerDocument)(containerNode).documentElement) || (0, _domLib.scrollTop)(containerNode);
-    scrollX = (0, _domLib.scrollLeft)((0, _domLib.ownerDocument)(containerNode).documentElement) || (0, _domLib.scrollLeft)(containerNode);
+    scrollY = (0, _scrollTop.default)((0, _ownerDocument.default)(containerNode).documentElement) || (0, _scrollTop.default)(containerNode);
+    scrollX = (0, _scrollLeft.default)((0, _ownerDocument.default)(containerNode).documentElement) || (0, _scrollLeft.default)(containerNode);
   } else {
-    var _getOffset = (0, _domLib.getOffset)(containerNode);
+    var _getOffset = (0, _getOffset3.default)(containerNode);
 
     width = _getOffset.width;
     height = _getOffset.height;
-    scrollY = (0, _domLib.scrollTop)(containerNode);
-    scrollX = (0, _domLib.scrollLeft)(containerNode);
+    scrollY = (0, _scrollTop.default)(containerNode);
+    scrollX = (0, _scrollLeft.default)(containerNode);
   }
 
   return {
@@ -135,7 +143,7 @@ var _default = function _default(props) {
 
   return {
     getPosition: function getPosition(target, container) {
-      var offset = container.tagName === 'BODY' ? (0, _domLib.getOffset)(target) : (0, _domLib.getPosition)(target, container);
+      var offset = container.tagName === 'BODY' ? (0, _getOffset3.default)(target) : (0, _getPosition2.default)(target, container, false);
       return offset;
     },
     calcAutoPlacement: function calcAutoPlacement(targetOffset, container, overlay) {
@@ -205,7 +213,7 @@ var _default = function _default(props) {
     calcOverlayPosition: function calcOverlayPosition(overlayNode, target, container) {
       var childOffset = this.getPosition(target, container);
 
-      var _getOffset2 = (0, _domLib.getOffset)(overlayNode),
+      var _getOffset2 = (0, _getOffset3.default)(overlayNode),
           overlayHeight = _getOffset2.height,
           overlayWidth = _getOffset2.width;
 

package/cjs/Panel/Panel.d.ts

@@ -24,7 +24,7 @@ export interface PanelProps<T = string | number> extends WithAsProps, AnimationE
     /** Role of Panel */
     panelRole?: string;
     /** callback function for the panel clicked */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<any>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 declare const Panel: RsRefForwardingComponent<'div', PanelProps>;
 export default Panel;

package/cjs/Picker/DropdownMenu.js

@@ -23,7 +23,11 @@ var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
 
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 
-var _domLib = require("dom-lib");
+var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
+
+var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
+
+var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -128,14 +132,14 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       return;
     }
 
-    var position = (0, _domLib.getPosition)(activeItem, container);
-    var sTop = (0, _domLib.scrollTop)(container);
-    var sHeight = (0, _domLib.getHeight)(container);
+    var position = (0, _getPosition.default)(activeItem, container);
+    var sTop = (0, _scrollTop.default)(container);
+    var sHeight = (0, _getHeight.default)(container);
 
     if (sTop > position.top) {
-      (0, _domLib.scrollTop)(container, Math.max(0, position.top - 20));
+      (0, _scrollTop.default)(container, Math.max(0, position.top - 20));
     } else if (position.top > sTop + sHeight) {
-      (0, _domLib.scrollTop)(container, Math.max(0, position.top - sHeight + 32));
+      (0, _scrollTop.default)(container, Math.max(0, position.top - sHeight + 32));
     }
   }, [focusItemValue, menuBodyContainerRef, prefix]);
 

package/cjs/Picker/DropdownMenuCheckItem.d.ts

@@ -12,9 +12,9 @@ export interface DropdownMenuCheckItemProps extends WithAsProps {
     title?: string;
     className?: string;
     children?: React.ReactNode;
-    onSelect?: (value: any, event: React.SyntheticEvent<HTMLElement>, checked: boolean) => void;
-    onCheck?: (value: any, event: React.SyntheticEvent<HTMLElement>, checked: boolean) => void;
-    onSelectItem?: (value: any, event: React.SyntheticEvent<HTMLElement>, checked: boolean) => void;
+    onSelect?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
+    onCheck?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
+    onSelectItem?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 declare const DropdownMenuCheckItem: RsRefForwardingComponent<'div', DropdownMenuCheckItemProps>;

package/cjs/Picker/PickerOverlay.js

@@ -15,7 +15,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _domLib = require("dom-lib");
+var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
+
+var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
 
 var _utils = require("../utils");
 
@@ -49,8 +51,8 @@ var PickerOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     if (autoWidth && toggle.root) {
       // Get the width value of the button,
       // and then set it to the menu to make their width consistent.
-      var width = (0, _domLib.getWidth)((0, _utils.getDOMNode)(toggle.root));
-      (0, _domLib.addStyle)(overlayRef.current, 'min-width', width + "px");
+      var width = (0, _getWidth.default)((0, _utils.getDOMNode)(toggle.root));
+      (0, _addStyle.default)(overlayRef.current, 'min-width', width + "px");
     }
   }, [autoWidth, target, overlayRef]);
 

package/cjs/Picker/PickerToggle.d.ts

@@ -23,7 +23,13 @@ export interface PickerToggleProps extends ToggleButtonProps {
     onInputBlur?: (event: React.FocusEvent<HTMLElement>) => void;
     onInputFocus?: (event: React.FocusEvent<HTMLElement>) => void;
     placement?: TypeAttributes.Placement;
+    /**
+     * Custom caret component
+     * @deprecated Use `caretAs` instead
+     */
     caretComponent?: React.FC<IconProps>;
+    /** Custom caret component */
+    caretAs?: React.ElementType;
     onClean?: (event: React.MouseEvent) => void;
 }
 declare const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerToggleProps>;

package/cjs/Picker/PickerToggle.js

@@ -19,8 +19,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
-var _reactTextMask = _interopRequireDefault(require("react-text-mask"));
-
 var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
 
 var _CloseButton = _interopRequireDefault(require("../CloseButton"));
@@ -31,6 +29,10 @@ var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 
 var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"));
 
+var _MaskedInput = _interopRequireDefault(require("../MaskedInput"));
+
+var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+
 var _templateObject, _templateObject2;
 
 var defaultInputMask = [];
@@ -68,7 +70,9 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onBlur = props.onBlur,
       placement = props.placement,
       caretComponent = props.caretComponent,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "cleanable", "tabIndex", "id", "value", "input", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent"]);
+      _props$caretAs = props.caretAs,
+      caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "cleanable", "tabIndex", "id", "value", "input", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs"]);
   var inputRef = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(false),
@@ -137,7 +141,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }, [onInputPressEnter, input]);
   var ToggleCaret = (0, _useToggleCaret.default)(placement);
-  var Caret = caretComponent !== null && caretComponent !== void 0 ? caretComponent : ToggleCaret;
+  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;
 
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
@@ -146,7 +150,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, hasValue ? children : null);
   }
 
-  var cleanable = cleanableProp && hasValue && !readOnly; // When the component is read-only or disabled, the input is not interactive.
+  var showCleanButton = cleanableProp && hasValue && !readOnly; // When the component is read-only or disabled, the input is not interactive.
 
   var inputFocused = readOnly || disabled ? false : input && activeState;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
@@ -163,7 +167,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
     ,
     onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null
-  }), /*#__PURE__*/_react.default.createElement(_reactTextMask.default, {
+  }), /*#__PURE__*/_react.default.createElement(_MaskedInput.default, {
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,
@@ -188,9 +192,12 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }), children ? /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
     "aria-placeholder": typeof children === 'string' ? children : null
-  }, children) : null, cleanable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+  }, children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
     tabIndex: -1,
+    locale: {
+      closeLabel: 'Clear'
+    },
     onClick: handleClean
   }), caret && /*#__PURE__*/_react.default.createElement(Caret, {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["caret"])))
@@ -210,7 +217,9 @@ PickerToggle.propTypes = {
   active: _propTypes.default.bool,
   readOnly: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  plaintext: _propTypes.default.bool
+  plaintext: _propTypes.default.bool,
+  caretComponent: (0, _deprecatePropType.default)(_propTypes.default.elementType, 'Use `caretAs` instead.'),
+  caretAs: _propTypes.default.elementType
 };
 var _default = PickerToggle;
 exports.default = _default;

package/cjs/Picker/SearchBar.d.ts

@@ -5,7 +5,7 @@ export interface SearchBarProps extends WithAsProps {
     placeholder?: string;
     className?: string;
     inputRef?: React.Ref<HTMLInputElement>;
-    onChange?: (value: string, event: React.SyntheticEvent<HTMLElement>) => void;
+    onChange?: (value: string, event: React.SyntheticEvent) => void;
 }
 declare const SearchBar: RsRefForwardingComponent<'div', SearchBarProps>;
 export default SearchBar;

package/cjs/Picker/utils.d.ts

@@ -89,7 +89,7 @@ interface SearchProps {
     labelKey: string;
     data: ItemDataType[];
     searchBy: (keyword: any, label: any, item: any) => boolean;
-    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent<any>) => void;
+    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
 }
 /**
  * A hook that handles search filter options
@@ -101,7 +101,7 @@ export declare function useSearch(props: SearchProps): {
     updateFilteredData: (nextData: ItemDataType[]) => void;
     setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
     checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
-    handleSearch: (searchKeyword: string, event: React.SyntheticEvent<any>) => void;
+    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
 };
 interface Refs {
     triggerRef?: React.RefObject<OverlayTriggerInstance>;

package/cjs/Picker/utils.js

@@ -99,7 +99,7 @@ function usePickerClassName(props) {
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
-  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = hasValue && cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));
+  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));
   var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext'])));
   return [classes, usedClassNamePropKeys];
 }

package/cjs/Radio/Radio.d.ts

@@ -27,7 +27,7 @@ export interface RadioProps<T = ValueType> extends WithAsProps, Omit<React.HTMLA
     /** Primary content */
     children?: React.ReactNode;
     /** Callback function with value changed */
-    onChange?: (value: T, checked: boolean, event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (value: T, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 declare const Radio: React.ForwardRefExoticComponent<RadioProps<ValueType> & React.RefAttributes<unknown>>;
 export default Radio;

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -9,7 +9,7 @@ export interface RadioContextProps {
     disabled?: boolean;
     readOnly?: boolean;
     plaintext?: boolean;
-    onChange?: (value: ValueType, event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (value: ValueType, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface RadioGroupProps<T = ValueType> extends WithAsProps, FormControlBaseProps<T> {
     /** A radio group can have different appearances */

package/cjs/RangeSlider/RangeSlider.js

@@ -15,7 +15,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
+
+var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
+
+var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 
 var _utils = require("../utils");
 
@@ -109,11 +113,11 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [max, min, step]); // Get the height of the progress bar
 
   var getBarHeight = (0, _react.useCallback)(function () {
-    return barRef.current ? (0, _domLib.getHeight)(barRef.current) : 0;
+    return barRef.current ? (0, _getHeight.default)(barRef.current) : 0;
   }, []); // Get the width of the progress bar
 
   var getBarWidth = (0, _react.useCallback)(function () {
-    return barRef.current ? (0, _domLib.getWidth)(barRef.current) : 0;
+    return barRef.current ? (0, _getWidth.default)(barRef.current) : 0;
   }, []);
   var getValueByOffset = (0, _react.useCallback)(function (offset) {
     var val = 0;
@@ -133,8 +137,8 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (0, _utils2.precisionMath)(val);
   }, [count, getBarHeight, getBarWidth, step, vertical]);
   var getValueByPosition = (0, _react.useCallback)(function (event) {
-    var barOffset = (0, _domLib.getOffset)(barRef.current);
-    var offset = vertical ? event.pageY - barOffset.top : event.pageX - barOffset.left;
+    var barOffset = (0, _getOffset.default)(barRef.current);
+    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;
     var val = rtl && !vertical ? barOffset.width - offset : offset;
     return getValueByOffset(val) + min;
   }, [getValueByOffset, min, rtl, vertical]);

package/cjs/Rate/Character.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
+var _contains = _interopRequireDefault(require("dom-lib/contains"));
 
 var _utils = require("../utils");
 
@@ -24,7 +24,7 @@ var _characterStatus;
 var characterStatus = (_characterStatus = {}, _characterStatus[0] = 'empty', _characterStatus[0.5] = 'half', _characterStatus[1] = 'full', _characterStatus);
 
 var getKey = function getKey(a, b) {
-  return _DOMHelper.default.contains(a, b) ? 'before' : 'after';
+  return (0, _contains.default)(a, b) ? 'before' : 'after';
 };
 
 var Character = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {