rsuite 5.0.3 → 5.2.2

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;
@@ -180,6 +180,9 @@ each(@spectrum, .(@color) {
     --rs-btn-link-text: @C700;
     --rs-btn-link-hover-text: @C800;
     --rs-btn-link-active-text: @C900;
+    --rs-iconbtn-primary-addon: @C600;
+    --rs-iconbtn-primary-activated-addon: @C700;
+    --rs-iconbtn-primary-pressed-addon: @C800;
 
     .dark-mode({
       --rs-btn-primary-bg: @C700;
@@ -198,6 +201,9 @@ each(@spectrum, .(@color) {
       --rs-btn-link-text: @C500;
       --rs-btn-link-hover-text: @C400;
       --rs-btn-link-active-text: @C200;
+      --rs-iconbtn-primary-addon: @C600;
+      --rs-iconbtn-primary-activated-addon: @C500;
+      --rs-iconbtn-primary-pressed-addon: @C400;
     });
 
     .high-contrast-mode({

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+## [5.2.2](https://github.com/rsuite/rsuite/compare/v5.2.1...v5.2.2) (2021-11-19)
+
+### Bug Fixes
+
+- **Dropdown:** dropdown item panel not rendering content ([#2128](https://github.com/rsuite/rsuite/issues/2128)) ([6631500](https://github.com/rsuite/rsuite/commit/6631500c74b0305026931a6379980fda9b587c6e))
+- **IconButton:** primary icon button with text wrong bg ([#2141](https://github.com/rsuite/rsuite/issues/2141)) ([fde0cd4](https://github.com/rsuite/rsuite/commit/fde0cd4bce84c8f5d054d1722e9dfa61de49a7fa))
+- **PanelGroup:** missing border for nested panels ([#2142](https://github.com/rsuite/rsuite/issues/2142)) ([225821f](https://github.com/rsuite/rsuite/commit/225821f2cdeba8637d70f4626f02ae1acd93eb24))
+
+### Performance Improvements
+
+- **resize:** improve the rerender performance of components after resize ([#2135](https://github.com/rsuite/rsuite/issues/2135)) ([71648ab](https://github.com/rsuite/rsuite/commit/71648ab061f7b4057675de2d0a6e08f2f8a70a61))
+
+## [5.2.1](https://github.com/rsuite/rsuite/compare/v5.2.0...v5.2.1) (2021-11-12)
+
+### Bug Fixes
+
+- **CheckTree:** root node indeterminate state error ([#2124](https://github.com/rsuite/rsuite/issues/2124)) ([9dac0bc](https://github.com/rsuite/rsuite/commit/9dac0bc0e51b58b46aa85dac8a0348a9d73b2503))
+- **Sidenav:** remove underline on hovered SidenavItem ([#2118](https://github.com/rsuite/rsuite/issues/2118)) ([56f7c3a](https://github.com/rsuite/rsuite/commit/56f7c3ad0f7ab31c7d5aef2fe2cde1661024f034))
+- **Sidenav:** sidenav dropdown item accept as prop ([#2120](https://github.com/rsuite/rsuite/issues/2120)) ([5386999](https://github.com/rsuite/rsuite/commit/538699962dfd46faf41bb377833b0dcd06112039))
+
+# [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

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/PanelGroup/styles/index.less

@@ -14,21 +14,21 @@
   }
 
   // Panel in Panel group haven't border.
-  .rs-panel {
+  > .rs-panel {
     border: none;
-  }
 
-  // Draw a split line for panel
-  .rs-panel + .rs-panel {
-    position: relative;
+    // Draw a split line for panel
+    & + .rs-panel {
+      position: relative;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      border-top: 1px solid var(--rs-border-primary);
-      left: 20px;
-      right: 20px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        border-top: 1px solid var(--rs-border-primary);
+        left: 20px;
+        right: 20px;
+      }
     }
   }
 }

package/README.md

@@ -78,7 +78,8 @@ You can go through [full documentation][rsuite-doc-guide] or start with followin
 - [Right-to-left][rsuite-doc-guide-rtl]
 - [Components][rsuite-components-overview]
 
-### Examples
+<details>
+<summary>More examples</summary>
 
 - [Management system][demo-admin]
 - [Use modularized][demo-modular-import]
@@ -96,6 +97,7 @@ You can go through [full documentation][rsuite-doc-guide] or start with followin
 - [Use in UmiJS][demo-umi-app]
 - [Use in Snowpack][demo-snowpack]
 - [Use in Vite][demo-vite]
+</details>
 
 ## Previous major versions
 
@@ -113,53 +115,10 @@ and security fixes are supported until 6.x is in progress.
 
 Detailed changes for each release are documented in the [release notes][release-notes].
 
-## Development
-
-### Test-Driven Development（TDD）
-
-1. Fork `https://github.com/rsuite/rsuite` this repo.
-
-```bash
-$ git clone git@github.com:<YOUR NAME>/rsuite.git
-$ cd rsuite
-```
-
-2. Install it and run
-
-```bash
-$ npm i
-$ npm run tdd
-```
-
-3. Run a single component test case.
-
-```bash
-$ M=Button npm run tdd
-```
-
-### UI-Driven Development
-
-1. Fork `https://github.com/rsuite/rsuite` this repo.
-
-```bash
-$ git clone git@github.com:<YOUR NAME>/rsuite.git
-```
-
-2. Install it and run
-
-```bash
-$ npm i
-$ npm run dev
-```
-
-3. Your show time. Open url http://127.0.0.1:3000/ in browser.
-
 ## Contribution
 
 Make sure you've read the [guidelines][contributing] before you start contributing.
 
-Editor preferences are available in the [.prettierrc][prettierrc] for easy use in common code editors. Read more and download plugins at https://prettier.io/.
-
 ## Supporting React Suite
 
 If you like React Suite, you can show your support by either
@@ -183,11 +142,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

@@ -139,6 +139,10 @@
   outline: 0;
   overflow: hidden;
 
+  &:hover {
+    text-decoration: none;
+  }
+
   &:focus-visible,
   &&-focus {
     .focus-ring(slim-inset);

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/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. */