rsuite 5.0.1 → 5.2.0

package/Button/styles/index.less

@@ -23,7 +23,7 @@
   text-decoration: none;
   color: var(--rs-btn-default-text);
   background-color: var(--rs-btn-default-bg);
-  border-radius: 6px;
+  border-radius: @border-radius;
 
   .high-contrast-mode({
     transition: none;

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+# [5.2.0](https://github.com/rsuite/rsuite/compare/v5.1.0...v5.2.0) (2021-11-05)
+
+### Bug Fixes
+
+- **Button:** Add button radius variable ([#2106](https://github.com/rsuite/rsuite/issues/2106)) ([63a61c4](https://github.com/rsuite/rsuite/commit/63a61c4eede3b22c91eef126b72fc1afb280a18e))
+- **less:** palette function accepts rgb color ([#2107](https://github.com/rsuite/rsuite/issues/2107)) ([92c2dc5](https://github.com/rsuite/rsuite/commit/92c2dc5cf9273a26de189cee6e79b57740e17b49))
+- can't perform a React state update on an unmounted component ([#2105](https://github.com/rsuite/rsuite/issues/2105)) ([44439af](https://github.com/rsuite/rsuite/commit/44439afdfdf481887a78fbd86f527e29eafb1a78))
+- **dts:** remove redundant generics on SyntheticEvent ([#2099](https://github.com/rsuite/rsuite/issues/2099)) ([30ccd68](https://github.com/rsuite/rsuite/commit/30ccd685fb09092fb1fa693929cdba5d26967f96))
+- **fa_IR:** trim long text of days to shorter ones ([#2076](https://github.com/rsuite/rsuite/issues/2076)) ([a893b82](https://github.com/rsuite/rsuite/commit/a893b82b835f9268a0053ede64565c96e6110095))
+- **FormControl:** infer additional props from accepter ([#2084](https://github.com/rsuite/rsuite/issues/2084)) ([5d39fed](https://github.com/rsuite/rsuite/commit/5d39fed6e56418e85367df9dd5aeb7b49774380b))
+- **Input:** correct value argument type for onChange callback ([#2087](https://github.com/rsuite/rsuite/issues/2087)) ([7a4ff02](https://github.com/rsuite/rsuite/commit/7a4ff02e1e01b40f2e2bffea105181500848d2c9))
+- **Slider,RangeSlider:** reverse marks order in vertical orientation ([#2080](https://github.com/rsuite/rsuite/issues/2080)) ([07fdd09](https://github.com/rsuite/rsuite/commit/07fdd09bb504ea7e876e6e6b4da439a725f716a9))
+
+# [5.1.0](https://github.com/rsuite/rsuite/compare/v5.0.3...v5.1.0) (2021-10-29)
+
+### Bug Fixes
+
+- **DatePicker:** fix DatePicker does not change value after pressing enter ([#2055](https://github.com/rsuite/rsuite/issues/2055)) ([c775444](https://github.com/rsuite/rsuite/commit/c7754445763f2553a3cc50e195b1dc347f774415))
+- **DateRangePicker:** fix DateRangePicker does not change value after pressing enter ([#2056](https://github.com/rsuite/rsuite/issues/2056)) ([8e5db2e](https://github.com/rsuite/rsuite/commit/8e5db2e54d8e6ad79f7219dc69cd1f52f32a8295))
+- **Dropdown.Item:** item inside Nav not pass "as" ([#2026](https://github.com/rsuite/rsuite/issues/2026)) ([34bfffd](https://github.com/rsuite/rsuite/commit/34bfffdbcd353753912b30b38523e3b62f430e98)), closes [#2025](https://github.com/rsuite/rsuite/issues/2025)
+- **Dropdown.Item:** render custom element inside li ([#2044](https://github.com/rsuite/rsuite/issues/2044)) ([a2e8a00](https://github.com/rsuite/rsuite/commit/a2e8a00c94f77028ed489a65f970264eeb9551ea))
+- **Overlay:** fix position offset inside container ([#2049](https://github.com/rsuite/rsuite/issues/2049)) ([c27b19e](https://github.com/rsuite/rsuite/commit/c27b19e9c9ec0191ccf5d36d9efe6b176b0b6d84))
+- **Toggle:** improve a11y (keyboard focusable + keyboard events) ([#2032](https://github.com/rsuite/rsuite/issues/2032)) ([9fdfd52](https://github.com/rsuite/rsuite/commit/9fdfd52e1eab3ad3e93569112e33ad3490335fbd))
+
+### Features
+
+- **locales:** Created fa_IR locale to add support of Persian language in Rsuite locals ([#2061](https://github.com/rsuite/rsuite/issues/2061)) ([14e5946](https://github.com/rsuite/rsuite/commit/14e59466cfd285ec1098d67280338a7df1ef8f5f))
+- **MaskedInput:** added support for MaskedInput to replace `react-text-mask` ([#2054](https://github.com/rsuite/rsuite/issues/2054)) ([496416a](https://github.com/rsuite/rsuite/commit/496416a2e4b32362252ef70f5c4e40f785ecf5be))
+- **Toggle:** add loading prop ([#2031](https://github.com/rsuite/rsuite/issues/2031)) ([28778de](https://github.com/rsuite/rsuite/commit/28778de0af0495a1bb68479bf3c679413255ce7b))
+
+## [5.0.3](https://github.com/rsuite/rsuite/compare/v5.0.2...v5.0.3) (2021-10-22)
+
+### Bug Fixes
+
+- **Navbar:** fix item hover style ([#2010](https://github.com/rsuite/rsuite/issues/2010)) ([8e6e13f](https://github.com/rsuite/rsuite/commit/8e6e13f3eafc1b0cd89900943e351fac817b8598))
+- **pickers:** add missing default appearance ([#2004](https://github.com/rsuite/rsuite/issues/2004)) ([e0bbc45](https://github.com/rsuite/rsuite/commit/e0bbc45cfe5a1cc9978dd8e1d988294764ec321a))
+- **Uploader:** fix disabled button opacity ([#2009](https://github.com/rsuite/rsuite/issues/2009)) ([a02aae7](https://github.com/rsuite/rsuite/commit/a02aae7395521a1246082e410811fe0e71b02a03))
+
+<a name="5.0.2"></a>
+
+## [5.0.2](https://github.com/rsuite/rsuite/compare/v5.0.1...v5.0.2) (2021-10-15)
+
+### Bug Fixes
+
+- **date-range-picker:** fix date formatting error when typing ([#1991](https://github.com/rsuite/rsuite/issues/1991)) ([f65f7f8](https://github.com/rsuite/rsuite/commit/f65f7f8))
+- **pickers:** clean button overlapping with value ([#1984](https://github.com/rsuite/rsuite/issues/1984)) ([ec127dc](https://github.com/rsuite/rsuite/commit/ec127dc))
+- **table:** fix the typescript type definition of Table ([#1998](https://github.com/rsuite/rsuite/issues/1998)) ([8d00b8d](https://github.com/rsuite/rsuite/commit/8d00b8d)), closes [#1958](https://github.com/rsuite/rsuite/issues/1958)
+- **tag-picker:** update TagPicker trigger props declare. ([#1996](https://github.com/rsuite/rsuite/issues/1996)) ([27da381](https://github.com/rsuite/rsuite/commit/27da381))
+- **uploader:** improve thumbnail rendering on file list ([#1997](https://github.com/rsuite/rsuite/issues/1997)) ([68344d7](https://github.com/rsuite/rsuite/commit/68344d7))
+
 <a name="5.0.1"></a>
 
 ## [5.0.1](https://github.com/rsuite/rsuite/compare/v5.0.0-beta.8...v5.0.1) (2021-10-09)

package/MaskedInput/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/MaskedInput",
+  "private": true,
+  "main": "../cjs/MaskedInput/index.js",
+  "module": "../esm/MaskedInput/index.js",
+  "types": "../esm/MaskedInput/index.d.ts"
+}

package/Navbar/styles/index.less

@@ -67,6 +67,13 @@
 .rs-navbar-nav > .rs-dropdown-item {
   outline: 0;
 
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+
   &:focus-visible {
     .focus-ring();
 
@@ -137,6 +144,7 @@
     &:hover,
     &:focus {
       background-color: var(--rs-navbar-inverse-hover-bg);
+      color: var(--rs-navbar-inverse-hover-text);
     }
   }
 

package/Picker/styles/index.less

@@ -218,7 +218,7 @@
     .ellipsis();
   }
 
-  .rs-picker-cleanable & {
+  .rs-picker-cleanable.rs-picker-has-value & {
     padding-right: (@dropdown-toggle-padding-right + @picker-toggle-clean-width);
 
     .rs-@{date-picker-prefix}&,

package/Picker/styles/mixin.less

@@ -122,7 +122,7 @@
     padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
   }
 
-  .rs-picker-cleanable & {
+  .rs-picker-has-value.rs-picker-cleanable & {
     padding-right: (
       @padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding + @clean-btn-width +
         @clean-btn-margin

package/README.md

@@ -183,11 +183,10 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [npm-home]: https://www.npmjs.com/package/rsuite
 [actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=master
 [actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amaster+workflow%3A%22Node.js+CI%22
-[coverage-home]: https://coveralls.io/github/rsuite/rsuite?branch=master
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
 [rsuite-design]: https://rsuitejs.com/design/default
-[live-preview-on-codesandbox]: https://codesandbox.io/s/mo7jxvr9x9?from-embed
+[live-preview-on-codesandbox]: https://codesandbox.io/s/rsuite-template-5vq6zo2z5l
 [rsuite-doc-guide]: https://rsuitejs.com/en/guide/introduction
 [rsuite-doc-guide-themes]: https://rsuitejs.com/en/guide/themes
 [rsuite-doc-guide-intl]: https://rsuitejs.com/en/guide/intl

package/Sidenav/styles/index.less

@@ -481,6 +481,19 @@
     }
   }
 
+  .rs-dropdown-item,
+  .rs-dropdown-item > .rs-dropdown-menu-toggle,
+  .rs-dropdown-item > .rs-dropdown-item-toggle {
+    color: var(--rs-sidenav-inverse-text);
+
+    &:hover,
+    &:focus,
+    &.rs-dropdown-item-focus {
+      background-color: var(--rs-sidenav-inverse-hover-bg);
+      color: var(--rs-sidenav-inverse-text);
+    }
+  }
+
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
   .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
@@ -508,22 +521,6 @@
   }
 }
 
-.rs-sidenav-inverse.rs-sidenav-collapse-in,
-.rs-sidenav-inverse.rs-sidenav-collapsing {
-  .rs-dropdown-item:not(.rs-dropdown-item-submenu),
-  .rs-dropdown-item > .rs-dropdown-menu-toggle,
-  .rs-dropdown-item > .rs-dropdown-item-toggle {
-    color: var(--rs-sidenav-inverse-text);
-
-    &:hover,
-    &:focus,
-    &.rs-dropdown-item-focus {
-      background-color: var(--rs-sidenav-inverse-hover-bg);
-      color: var(--rs-sidenav-inverse-text);
-    }
-  }
-}
-
 // Subtle Sidenav
 .rs-sidenav-subtle {
   background-color: transparent;

package/Slider/styles/index.less

@@ -83,9 +83,13 @@
     }
   }
 
-  .rs-slider-vertical &::before {
-    left: ((@slider-handle-diameter - @slider-bar-side-length)/2);
-    margin-top: (-@slider-handle-diameter / 2);
+  .rs-slider-vertical & {
+    top: unset;
+
+    &::before {
+      left: ((@slider-handle-diameter - @slider-bar-side-length)/2);
+      margin-top: (-@slider-handle-diameter / 2);
+    }
   }
 }
 
@@ -127,12 +131,12 @@
 .rs-slider-graduator {
   width: 100%;
 
-  ul,
+  ol,
   li {
     list-style: none;
   }
 
-  > ul {
+  > ol {
     display: flex;
     padding-left: 0;
     width: 100%;
@@ -157,7 +161,8 @@
 
         // Vertical styles
         .rs-slider-vertical & {
-          top: -4px;
+          top: unset;
+          bottom: -4px;
           margin-left: -1px;
         }
       }
@@ -168,8 +173,8 @@
         // Vertical styles
         .rs-slider-vertical & {
           left: 0;
-          top: auto;
-          bottom: -4px;
+          bottom: unset;
+          top: -4px;
         }
       }
 
@@ -188,10 +193,10 @@
     display: block;
     height: 100%;
 
-    > ul {
+    > ol {
       width: @slider-bar-side-length;
       display: flex;
-      flex-direction: column;
+      flex-direction: column-reverse;
       height: 100%;
       padding: 0;
 
@@ -212,7 +217,7 @@
 
   .rs-slider-vertical & {
     width: @slider-bar-side-length;
-    border-radius: (@slider-bar-side-length / 2) (@slider-bar-side-length / 2) 0 0;
+    border-radius: 0 0 (@slider-bar-side-length / 2) (@slider-bar-side-length / 2);
   }
 }
 
@@ -222,7 +227,8 @@
 
   // Reset all setting
   .rs-slider-mark {
-    top: -8px;
+    top: unset;
+    bottom: -8px;
     left: (@slider-bar-side-length + @slider-mark-margin-top);
 
     &-content {
@@ -231,7 +237,7 @@
   }
 
   .rs-slider-mark-last {
-    top: auto;
-    bottom: -8px;
+    bottom: unset;
+    top: -8px;
   }
 }

package/Toggle/styles/index.less

@@ -8,10 +8,23 @@
 
 // The switch trail
 // todo: Consider renaming as .rs-toggle
-.rs-btn-toggle {
+.rs-toggle {
+  position: relative;
+
   // Default size is middle.
-  .btn-toggle(md);
+  .toggle(md);
+}
+
+.rs-toggle-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
 
+.rs-toggle-presentation {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -27,6 +40,14 @@
     box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
   });
 
+  .rs-toggle-input:focus-visible + & {
+    .focus-ring();
+
+    .high-contrast-mode({
+      box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);;
+    });
+  }
+
   &:hover {
     background-color: var(--rs-toggle-hover-bg);
   }
@@ -45,7 +66,7 @@
   }
 
   // disabled state
-  &&-disabled {
+  .rs-toggle-disabled & {
     background-color: var(--rs-toggle-disabled-bg);
     color: var(--rs-toggle-disabled-thumb);
     box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
@@ -53,7 +74,7 @@
   }
 
   // checked state
-  &&-checked {
+  .rs-toggle-checked & {
     background-color: var(--rs-toggle-checked-bg);
     color: var(--rs-toggle-checked-thumb);
     box-shadow: none;
@@ -63,14 +84,20 @@
     }
   }
 
-  &&-disabled&-checked {
+  .rs-toggle-disabled.rs-toggle-checked & {
     background-color: var(--rs-toggle-checked-disabled-bg);
     color: var(--rs-toggle-checked-disabled-thumb);
   }
+
+  .rs-toggle-loading & {
+    &::after {
+      display: none;
+    }
+  }
 }
 
 // Label text inside the switch
-.rs-btn-toggle-inner {
+.rs-toggle-inner {
   display: block;
   transition: margin @toggle-transition;
 
@@ -79,17 +106,31 @@
   });
 }
 
+.rs-toggle-loader {
+  position: absolute;
+  transition: left @toggle-transition, margin-left @toggle-transition, width @toggle-transition;
+
+  .rs-loader-spin {
+    &::before {
+      border-color: var(--rs-toggle-loader-ring);
+    }
+    &::after {
+      border-top-color: var(--rs-toggle-loader-rotor);
+    }
+  }
+}
+
 // small
-.rs-btn-toggle-sm {
-  .btn-toggle(sm);
+.rs-toggle-sm {
+  .toggle(sm);
 }
 
 // middle
-.rs-btn-toggle-md {
-  .btn-toggle(md);
+.rs-toggle-md {
+  .toggle(md);
 }
 
 // large
-.rs-btn-toggle-lg {
-  .btn-toggle(lg);
+.rs-toggle-lg {
+  .toggle(lg);
 }

package/Toggle/styles/mixin.less

@@ -1,11 +1,20 @@
 .toggle-size-variant(@toogle-height,@min-width,@toggle-handle-gap,@toggle-inner-margin,@toggle-inner-font-size) {
   @handle-diameter: (@toogle-height - @toggle-handle-gap*2);
 
-  height: @toogle-height;
-  min-width: @min-width;
-  border-radius: (@toogle-height / 2);
+  .rs-toggle-loader {
+    width: @handle-diameter;
+    height: @handle-diameter;
+    left: @toggle-handle-gap;
+    top: @toggle-handle-gap;
+  }
 
-  &::after {
+  .rs-toggle-presentation {
+    height: @toogle-height;
+    min-width: @min-width;
+    border-radius: (@toogle-height / 2);
+  }
+
+  .rs-toggle-presentation::after {
     width: @handle-diameter;
     height: @handle-diameter;
     left: @toggle-handle-gap;
@@ -13,11 +22,11 @@
     border-radius: (@handle-diameter / 2);
   }
 
-  &:active::after {
+  .rs-toggle-presentation:active::after {
     width: (@handle-diameter * @toggle-active-scale);
   }
 
-  .rs-btn-toggle-inner {
+  .rs-toggle-inner {
     margin-left: @toogle-height;
     margin-right: @toggle-inner-margin;
     height: @toogle-height;
@@ -29,7 +38,7 @@
     }
   }
 
-  &.rs-btn-toggle-checked {
+  &.rs-toggle-checked .rs-toggle-presentation {
     &::after {
       left: 100%;
       margin-left: -(@handle-diameter + @toggle-handle-gap);
@@ -39,15 +48,20 @@
       margin-left: -(@handle-diameter * @toggle-active-scale + @toggle-handle-gap);
     }
 
-    .rs-btn-toggle-inner {
+    .rs-toggle-inner {
       margin-right: @toogle-height;
       margin-left: @toggle-inner-margin;
     }
   }
+
+  &.rs-toggle-checked .rs-toggle-loader {
+    left: 100%;
+    margin-left: -(@handle-diameter + @toggle-handle-gap);
+  }
 }
 
 // Small
-.btn-toggle(sm) {
+.toggle(sm) {
   .toggle-size-variant(
     @toggle-sm-height,
     @toggle-sm-min-width,
@@ -58,7 +72,7 @@
 }
 
 // Middle
-.btn-toggle(md) {
+.toggle(md) {
   .toggle-size-variant(
     @toggle-md-height,
     @toggle-md-min-width,
@@ -69,7 +83,7 @@
 }
 
 // Large
-.btn-toggle(lg) {
+.toggle(lg) {
   .toggle-size-variant(
     @toggle-lg-height,
     @toggle-lg-min-width,

package/Uploader/styles/index.less

@@ -14,7 +14,6 @@
     }
 
     &-disabled {
-      opacity: 0.3;
       //cursor: not-allowed;
 
       .rs-uploader-trigger-btn {
@@ -213,6 +212,11 @@
       > img {
         .img-cover();
       }
+
+      .rs-uploader-file-item-icon {
+        font-size: @uploader-file-item-icon-font-size;
+        margin: @uploader-file-item-icon-margin-plus;
+      }
     }
 
     &-status {
@@ -351,6 +355,11 @@
       > img {
         .img-cover();
       }
+
+      .rs-uploader-file-item-icon {
+        font-size: @uploader-file-item-icon-font-size;
+        margin: @uploader-file-item-icon-margin;
+      }
     }
 
     &-content {

package/cjs/@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/cjs/Affix/Affix.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 
 var _utils = require("../utils");
 
@@ -28,7 +28,7 @@ function useOffset(mountRef) {
       setOffset = _useState[1];
 
   var updateOffset = (0, _react.useCallback)(function () {
-    setOffset((0, _domLib.getOffset)(mountRef.current));
+    setOffset((0, _getOffset.default)(mountRef.current));
   }, [mountRef]); // Update after the element size changes
 
   (0, _utils.useElementResize)(function () {
@@ -51,7 +51,7 @@ function useContainerOffset(container) {
 
   (0, _react.useEffect)(function () {
     var node = typeof container === 'function' ? container() : container;
-    setOffset(node ? (0, _domLib.getOffset)(node) : null);
+    setOffset(node ? (0, _getOffset.default)(node) : null);
   }, [container]);
   return offset;
 }

package/cjs/Animation/Collapse.js

@@ -15,7 +15,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getStyle = _interopRequireDefault(require("dom-lib/getStyle"));
+
+var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -45,7 +47,7 @@ var MARGINS = {
 function defaultGetDimensionValue(dimension, elem) {
   var value = (0, _get.default)(elem, "offset" + (0, _capitalize.default)(dimension));
   var margins = MARGINS[dimension];
-  return value + parseInt((0, _domLib.getStyle)(elem, margins[0]), 10) + parseInt((0, _domLib.getStyle)(elem, margins[1]), 10);
+  return value + parseInt((0, _getStyle.default)(elem, margins[0]), 10) + parseInt((0, _getStyle.default)(elem, margins[1]), 10);
 }
 
 function getScrollDimensionValue(elem, dimension) {
@@ -78,21 +80,21 @@ var Collapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var dimension = typeof dimensionProp === 'function' ? dimensionProp() : dimensionProp;
   var handleEnter = (0, _react.useCallback)(function (elem) {
-    (0, _domLib.addStyle)(elem, dimension, 0);
+    (0, _addStyle.default)(elem, dimension, 0);
   }, [dimension]);
   var handleEntering = (0, _react.useCallback)(function (elem) {
-    (0, _domLib.addStyle)(elem, dimension, getScrollDimensionValue(elem, dimension));
+    (0, _addStyle.default)(elem, dimension, getScrollDimensionValue(elem, dimension));
   }, [dimension]);
   var handleEntered = (0, _react.useCallback)(function (elem) {
-    (0, _domLib.addStyle)(elem, dimension, 'auto');
+    (0, _addStyle.default)(elem, dimension, 'auto');
   }, [dimension]);
   var handleExit = (0, _react.useCallback)(function (elem) {
     var value = getDimensionValue ? getDimensionValue(dimension, elem) : 0;
-    (0, _domLib.addStyle)(elem, dimension, value + "px");
+    (0, _addStyle.default)(elem, dimension, value + "px");
   }, [dimension, getDimensionValue]);
   var handleExiting = (0, _react.useCallback)(function (elem) {
     triggerBrowserReflow(elem);
-    (0, _domLib.addStyle)(elem, dimension, 0);
+    (0, _addStyle.default)(elem, dimension, 0);
   }, [dimension]);
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, rest, {
     ref: ref,

package/cjs/Animation/Transition.js

@@ -15,7 +15,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getTransitionEnd = _interopRequireDefault(require("dom-lib/getTransitionEnd"));
+
+var _on = _interopRequireDefault(require("dom-lib/on"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -156,7 +158,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           timeout = _this$props.timeout,
           animation = _this$props.animation;
-      this.animationEventListener = (0, _domLib.on)(node, animation ? (0, _utils2.getAnimationEnd)() : (0, _domLib.transition)().end, this.nextCallback);
+      this.animationEventListener = (0, _on.default)(node, animation ? (0, _utils2.getAnimationEnd)() : (0, _getTransitionEnd.default)(), this.nextCallback);
 
       if (timeout !== null) {
         setTimeout(this.nextCallback, timeout);

package/cjs/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/cjs/AutoComplete/AutoComplete.js

@@ -74,7 +74,8 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils3.shouldDisplay)(filterBy, value))) || [];
   var hasItems = items.length > 0;
-  var overlayRef = (0, _react.useRef)(null); // Used to hover the focuse item  when trigger `onKeydown`
+  var overlayRef = (0, _react.useRef)(null);
+  var isMounted = (0, _utils.useIsMounted)(); // Used to hover the focuse item  when trigger `onKeydown`
 
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
     data: datalist,
@@ -134,9 +135,11 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   };
 
   var handleClose = (0, _react.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 = (0, _react.useCallback)(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();