rsuite 5.0.3 → 5.2.2

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;

package/esm/Overlay/Modal.js

@@ -3,7 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import helper from '../DOMHelper';
+import canUseDOM from 'dom-lib/canUseDOM';
+import contains from 'dom-lib/contains';
+import getContainer from 'dom-lib/getContainer';
+import on from 'dom-lib/on';
 import ModalManager from './ModalManager';
 import Fade from '../Animation/Fade';
 import { animationPropTypes } from '../Animation/utils';
@@ -102,8 +105,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [keyboard, modal, onEscapeKeyUp, onClose]);
   var checkForFocus = useCallback(function () {
-    if (helper.canUseDOM) {
-      lastFocus.current = helper.activeElement();
+    if (canUseDOM) {
+      lastFocus.current = document.activeElement;
     }
   }, []);
   var restoreLastFocus = useCallback(function () {
@@ -122,10 +125,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
 
-    var currentActiveElement = helper.activeElement();
+    var currentActiveElement = document.activeElement;
     var dialog = getDialogElement();
 
-    if (dialog && dialog !== currentActiveElement && !helper.contains(dialog, currentActiveElement)) {
+    if (dialog && dialog !== currentActiveElement && !contains(dialog, currentActiveElement)) {
       dialog.focus();
     }
   }, [enforceFocus, getDialogElement, modal]);
@@ -144,10 +147,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var docusinListener = useRef();
   var handleOpen = useCallback(function () {
     var dialog = getDialogElement();
-    var containerElement = helper.getContainer(container, document.body);
+    var containerElement = getContainer(container, document.body);
     modal.add(containerElement, containerClassName);
-    documentKeyupListener.current = helper.on(document, 'keydown', handleDocumentKeyUp);
-    docusinListener.current = helper.on(document, 'focus', handleEnforceFocus, true);
+    documentKeyupListener.current = on(document, 'keydown', handleDocumentKeyUp);
+    docusinListener.current = on(document, 'focus', handleEnforceFocus, true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     checkForFocus();
 

package/esm/Overlay/ModalManager.js

@@ -1,4 +1,9 @@
-import { addClass, removeClass, addStyle, getStyle, getScrollbarSize, isOverflowing } from 'dom-lib';
+import addClass from 'dom-lib/addClass';
+import removeClass from 'dom-lib/removeClass';
+import addStyle from 'dom-lib/addStyle';
+import getStyle from 'dom-lib/getStyle';
+import getScrollbarSize from 'dom-lib/getScrollbarSize';
+import isOverflowing from 'dom-lib/isOverflowing';
 
 function findIndexOf(arr, cb) {
   var index = -1;

package/esm/Overlay/OverlayTrigger.js

@@ -4,7 +4,7 @@ import _isUndefined from "lodash/isUndefined";
 import React, { useRef, useEffect, useImperativeHandle, useCallback } from 'react';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
-import { contains } from 'dom-lib';
+import contains from 'dom-lib/contains';
 import Overlay from './Overlay';
 import { createChainedFunction, usePortal, useControlled } from '../utils';
 import isOneOf from '../utils/isOneOf';

package/esm/Overlay/Position.js

@@ -1,8 +1,14 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
-import bindElementResize from 'element-resize-event';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import helper from '../DOMHelper';
+import getContainer from 'dom-lib/getContainer';
+import ownerDocument from 'dom-lib/ownerDocument';
+import removeClass from 'dom-lib/removeClass';
+import on from 'dom-lib/on';
+import addClass from 'dom-lib/addClass';
+import addStyle from 'dom-lib/addStyle';
+import { ResizeObserver } from '@juggle/resize-observer';
+import isElement from '../DOMHelper/isElement';
 import positionUtils from './positionUtils';
 import { getDOMNode } from '../utils';
 import { useUpdateEffect } from '../utils';
@@ -17,6 +23,7 @@ var usePosition = function usePosition(props, ref) {
       triggerTarget = props.triggerTarget;
   var containerRef = useRef();
   var lastTargetRef = useRef();
+  var overlayResizeObserver = useRef();
   var defaultPosition = {
     positionLeft: 0,
     positionTop: 0,
@@ -52,7 +59,7 @@ var usePosition = function usePosition(props, ref) {
 
     var targetElement = getDOMNode(triggerTarget);
 
-    if (!helper.isElement(targetElement)) {
+    if (!isElement(targetElement)) {
       throw new Error('`target` should return an HTMLElement');
     } //  If the target and placement do not change, the position is not updated.
 
@@ -62,16 +69,16 @@ var usePosition = function usePosition(props, ref) {
     }
 
     var overlay = getDOMNode(ref.current);
-    var containerElement = helper.getContainer(typeof container === 'function' ? container() : container, helper.ownerDocument(ref.current).body);
+    var containerElement = getContainer(typeof container === 'function' ? container() : container, ownerDocument(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];
-      helper.removeClass(overlay, preClassName);
-      helper.addClass(overlay, posi.positionClassName);
-      helper.addStyle(overlay, {
+      removeClass(overlay, preClassName);
+      addClass(overlay, posi.positionClassName);
+      addStyle(overlay, {
         left: posi.positionLeft + "px",
         top: posi.positionTop + "px"
       });
@@ -91,29 +98,31 @@ var usePosition = function usePosition(props, ref) {
       var _containerRef$current;
 
       // Update the overlay position when the container scroll bar is scrolling
-      containerScrollListener = helper.on(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.tagName) === 'BODY' ? window : containerRef.current, 'scroll', function () {
+      containerScrollListener = on(((_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 = helper.on(window, 'resize', function () {
+    var resizeListener = on(window, 'resize', function () {
       return updatePosition(true, true);
     });
 
     if (overlay) {
       // Update the position when the size of the overlay changes
-      bindElementResize(overlay, function () {
+      overlayResizeObserver.current = new ResizeObserver(function () {
         return updatePosition(true, true);
       });
+      overlayResizeObserver.current.observe(overlay);
     }
 
     return function () {
-      var _containerScrollListe;
+      var _containerScrollListe, _overlayResizeObserve;
 
       lastTargetRef.current = null;
       (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();
       resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();
+      (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();
     };
   }, [preventOverflow, ref, updatePosition]);
   useUpdateEffect(function () {

package/esm/Overlay/positionUtils.js

@@ -1,7 +1,11 @@
 import maxBy from 'lodash/maxBy';
 import minBy from 'lodash/minBy';
 import kebabCase from 'lodash/kebabCase';
-import { ownerDocument, getOffset, getPosition as _getPosition, scrollTop, scrollLeft } from 'dom-lib';
+import ownerDocument from 'dom-lib/ownerDocument';
+import getOffset from 'dom-lib/getOffset';
+import scrollTop from 'dom-lib/scrollTop';
+import scrollLeft from 'dom-lib/scrollLeft';
+import _getPosition from 'dom-lib/getPosition';
 export var AutoPlacement = {
   left: 'Start',
   right: 'End',
@@ -123,7 +127,7 @@ export default (function (props) {
 
   return {
     getPosition: function getPosition(target, container) {
-      var offset = container.tagName === 'BODY' ? getOffset(target) : _getPosition(target, container);
+      var offset = container.tagName === 'BODY' ? getOffset(target) : _getPosition(target, container, false);
       return offset;
     },
     calcAutoPlacement: function calcAutoPlacement(targetOffset, container, overlay) {

package/esm/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/esm/Picker/DropdownMenu.js

@@ -9,7 +9,9 @@ import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import findIndex from 'lodash/findIndex';
-import { getPosition, scrollTop, getHeight } from 'dom-lib';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
+import getHeight from 'dom-lib/getHeight';
 import classNames from 'classnames';
 import { List, AutoSizer } from './VirtualizedList';
 import shallowEqual from '../utils/shallowEqual';

package/esm/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/esm/Picker/PickerOverlay.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useRef, useCallback, useEffect } from 'react';
 import omit from 'lodash/omit';
-import { addStyle, getWidth } from 'dom-lib';
+import addStyle from 'dom-lib/addStyle';
+import getWidth from 'dom-lib/getWidth';
 import { getDOMNode, mergeRefs, useElementResize, useClassNames } from '../utils';
 var omitProps = ['placement', 'arrowOffsetLeft', 'arrowOffsetTop', 'positionLeft', 'positionTop', 'getPositionInstance', 'getToggleInstance', 'autoWidth'];
 var resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];

package/esm/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/esm/Picker/PickerToggle.js

@@ -7,12 +7,13 @@ var _templateObject, _templateObject2;
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
-import MaskedInput from 'react-text-mask';
 import ToggleButton from './ToggleButton';
 import CloseButton from '../CloseButton';
 import { useClassNames, KEY_VALUES, mergeRefs } from '../utils';
 import Plaintext from '../Plaintext';
 import useToggleCaret from '../utils/useToggleCaret';
+import TextMask from '../MaskedInput/TextMask';
+import deprecatePropType from '../utils/deprecatePropType';
 var defaultInputMask = [];
 var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var activeProp = props.active,
@@ -47,7 +48,9 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onBlur = props.onBlur,
       placement = props.placement,
       caretComponent = props.caretComponent,
-      rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useRef();
 
@@ -117,7 +120,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [onInputPressEnter, input]);
   var ToggleCaret = useToggleCaret(placement);
-  var Caret = caretComponent !== null && caretComponent !== void 0 ? caretComponent : ToggleCaret;
+  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;
 
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, {
@@ -143,7 +146,7 @@ var PickerToggle = /*#__PURE__*/React.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 ? debounce(handleBlur, 200) : null
-  }), /*#__PURE__*/React.createElement(MaskedInput, {
+  }), /*#__PURE__*/React.createElement(TextMask, {
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,
@@ -192,6 +195,8 @@ PickerToggle.propTypes = {
   active: PropTypes.bool,
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
-  plaintext: PropTypes.bool
+  plaintext: PropTypes.bool,
+  caretComponent: deprecatePropType(PropTypes.elementType, 'Use `caretAs` instead.'),
+  caretAs: PropTypes.elementType
 };
 export default PickerToggle;

package/esm/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/esm/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/esm/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/esm/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/esm/RangeSlider/RangeSlider.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { getWidth, getHeight, getOffset } from 'dom-lib';
+import getWidth from 'dom-lib/getWidth';
+import getHeight from 'dom-lib/getHeight';
+import getOffset from 'dom-lib/getOffset';
 import { useClassNames, useCustom, useControlled, useEventCallback } from '../utils';
 import { sliderPropTypes } from '../Slider/Slider';
 import ProgressBar from '../Slider/ProgressBar';
@@ -114,7 +116,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [count, getBarHeight, getBarWidth, step, vertical]);
   var getValueByPosition = useCallback(function (event) {
     var barOffset = getOffset(barRef.current);
-    var offset = vertical ? event.pageY - barOffset.top : event.pageX - barOffset.left;
+    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/esm/Rate/Character.js

@@ -5,12 +5,12 @@ var _characterStatus;
 
 import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
-import helper from '../DOMHelper';
+import contains from 'dom-lib/contains';
 import { useClassNames } from '../utils';
 var characterStatus = (_characterStatus = {}, _characterStatus[0] = 'empty', _characterStatus[0.5] = 'half', _characterStatus[1] = 'full', _characterStatus);
 
 var getKey = function getKey(a, b) {
-  return helper.contains(a, b) ? 'before' : 'after';
+  return contains(a, b) ? 'before' : 'after';
 };
 
 var Character = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/esm/Ripple/Ripple.js

@@ -2,12 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import getOffset from 'dom-lib/getOffset';
+import on from 'dom-lib/on';
 import Transition from '../Animation/Transition';
-import helper from '../DOMHelper';
 import { mergeRefs, useClassNames } from '../utils';
 
 var getPosition = function getPosition(target, event) {
-  var offset = helper.getOffset(target);
+  var offset = getOffset(target);
   var offsetX = (event.pageX || 0) - offset.left;
   var offsetY = (event.pageY || 0) - offset.top;
   var radiusX = Math.max(offset.width - offsetX, offsetX);
@@ -58,7 +59,7 @@ var Ripple = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [onMouseDown]);
   useEffect(function () {
     var parentNode = triggerRef.current.parentNode;
-    var mousedownListener = helper.on(parentNode, 'mousedown', handleMouseDown);
+    var mousedownListener = on(parentNode, 'mousedown', handleMouseDown);
     return function () {
       mousedownListener === null || mousedownListener === void 0 ? void 0 : mousedownListener.off();
     };

package/esm/Sidenav/SidenavDropdownItem.d.ts

@@ -23,7 +23,7 @@ export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<Rea
     /** Whether the submenu is expanded, used in Sidenav. */
     expanded?: boolean;
     /** Select the callback function for the current option  */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 /**
  * Tree View Node

package/esm/Sidenav/SidenavDropdownItem.js

@@ -9,6 +9,7 @@ import Ripple from '../Ripple';
 import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import DropdownContext from '../Dropdown/DropdownContext';
+import { useRenderDropdownItem } from '../Dropdown/useRenderDropdownItem';
 
 /**
  * Tree View Node
@@ -59,34 +60,39 @@ var SidenavDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var menuitemEventHandlers = {
     onClick: createChainedFunction(handleClick, onClick)
   };
+  var renderDropdownItem = useRenderDropdownItem(Component);
 
   if (divider) {
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
-      role: "separator",
+      role: 'separator',
       style: style,
       className: merge(prefix('divider'), className)
     }, rest));
   }
 
   if (panel) {
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
-      role: "none presentation",
+      role: 'none presentation',
       style: style,
       className: merge(prefix('panel'), className)
-    }, rest), children);
+    }, rest, {
+      children: children
+    }));
   }
 
-  return /*#__PURE__*/React.createElement(SafeAnchor, _extends({
+  return renderDropdownItem(_extends({
     ref: ref
   }, rest, {
     style: style,
     className: classes,
-    "aria-current": selected || undefined
-  }, menuitemEventHandlers), icon && /*#__PURE__*/React.cloneElement(icon, {
-    className: prefix('menu-icon')
-  }), children, /*#__PURE__*/React.createElement(Ripple, null));
+    'aria-current': selected || undefined
+  }, menuitemEventHandlers, {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
+      className: prefix('menu-icon')
+    }), children, /*#__PURE__*/React.createElement(Ripple, null))
+  }), SafeAnchor);
 });
 SidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';
 SidenavDropdownItem.propTypes = {

package/esm/Sidenav/SidenavDropdownMenu.d.ts

@@ -15,7 +15,7 @@ export interface SidenavDropdownMenuProps<T = any> extends WithAsProps, Omit<Rea
     /** Whether the submenu is expanded, used in Sidenav. */
     expanded?: boolean;
     /** Select the callback function for the current option  */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
     title?: React.ReactNode;
 }
 /**

package/esm/Slider/Graduated.js

@@ -65,7 +65,7 @@ var Graduated = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, {
     ref: ref,
     className: classes
-  }, /*#__PURE__*/React.createElement("ul", null, graduatedItems));
+  }, /*#__PURE__*/React.createElement("ol", null, graduatedItems));
 });
 Graduated.displayName = 'Graduated';
 Graduated.propTypes = {

package/esm/Slider/Handle.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { DOMMouseMoveTracker, addStyle, getWidth } from 'dom-lib';
+import DOMMouseMoveTracker from 'dom-lib/DOMMouseMoveTracker';
+import addStyle from 'dom-lib/addStyle';
+import getWidth from 'dom-lib/getWidth';
 import Tooltip from '../Tooltip';
 import { useClassNames, mergeRefs } from '../utils';
 import Input from './Input';
@@ -39,7 +41,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var rootRef = useRef();
   var horizontalKey = rtl ? 'right' : 'left';
-  var direction = vertical ? 'top' : horizontalKey;
+  var direction = vertical ? 'bottom' : horizontalKey;
 
   var styles = _extends({}, style, (_extends2 = {}, _extends2[direction] = position + "%", _extends2));
 
@@ -119,6 +121,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: tooltipRef,
     className: merge(prefix('tooltip'), 'placement-top')
   }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/React.createElement(Input, _extends({
+    tabIndex: -1,
     value: value
   }, rest)), children);
 });