rsuite 5.2.4 → 5.4.2

package/Avatar/styles/index.less

@@ -9,6 +9,8 @@
   align-items: center;
   border-radius: 4px;
   overflow: hidden;
+  position: relative;
+
   .avatar-md();
 
   & > .rs-icon {
@@ -16,8 +18,6 @@
   }
 
   &-image {
-    position: relative;
-
     &::before {
       content: attr(alt);
       position: absolute;

package/AvatarGroup/package.json

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

package/AvatarGroup/styles/index.less

@@ -0,0 +1,19 @@
+@import '../../styles/common';
+
+.rs-avatar-group {
+  display: flex;
+  align-items: flex-end;
+  &-stack {
+    .rs-avatar {
+      box-sizing: content-box;
+      margin-right: -10px;
+      transition: margin 0.15s;
+      &:last-child {
+        margin-right: 0;
+      }
+      &:hover {
+        margin-right: 0;
+      }
+    }
+  }
+}

package/ButtonGroup/styles/index.less

@@ -1,5 +1,4 @@
 @import '../../styles/common';
-@import '../../Button/styles/mixin';
 
 //
 // Button groups
@@ -78,20 +77,3 @@
     .ellipsis-basic();
   }
 }
-
-// Sizes
-.rs-btn-group-lg .rs-btn {
-  .button-size-lg();
-}
-
-.rs-btn-group-md .rs-btn {
-  .button-size-md();
-}
-
-.rs-btn-group-sm .rs-btn {
-  .button-size-sm();
-}
-
-.rs-btn-group-xs .rs-btn {
-  .button-size-xs();
-}

package/CHANGELOG.md

@@ -1,3 +1,64 @@
+## [5.4.2](https://github.com/rsuite/rsuite/compare/v5.4.1...v5.4.2) (2021-12-24)
+
+### Bug Fixes
+
+- **Affix:** fix unupdated position after window size change ([#2256](https://github.com/rsuite/rsuite/issues/2256)) ([61c7b27](https://github.com/rsuite/rsuite/commit/61c7b279f136ae44b9470046344cd6e163d02589))
+- **Modal:** improve the mouse scrolling experience on Modal ([#2254](https://github.com/rsuite/rsuite/issues/2254)) ([137d57e](https://github.com/rsuite/rsuite/commit/137d57ef1e79ca0055b3af8d6cd5cff2a9c4ef55))
+- **Navbar:** fix dropdown submenu throwing error ([#2250](https://github.com/rsuite/rsuite/issues/2250)) ([875130d](https://github.com/rsuite/rsuite/commit/875130d342f58e4078babe428913640e0b2faa04))
+
+## [5.4.1](https://github.com/rsuite/rsuite/compare/v5.4.0...v5.4.1) (2021-12-23)
+
+### Bug Fixes
+
+- **Dropdown:** reduce padding in noCaret variant ([#2236](https://github.com/rsuite/rsuite/issues/2236)) ([682f883](https://github.com/rsuite/rsuite/commit/682f8830601d784452c10729a369ebe91057eddb))
+- **Sidenav:** fix missing highlight on selected dropdown items ([#2216](https://github.com/rsuite/rsuite/issues/2216)) ([8f79d4a](https://github.com/rsuite/rsuite/commit/8f79d4a8aafb123f75f420a3adf3f680386aae68))
+- **Sidenav:** prevent text wrapping when collapsing ([#2245](https://github.com/rsuite/rsuite/issues/2245)) ([4094233](https://github.com/rsuite/rsuite/commit/409423360a5226c8a0e11bbeecea0a4316c5c8e0))
+- **Toggle:** dismiss uncontrolled input warning ([#2243](https://github.com/rsuite/rsuite/issues/2243)) ([c4737d5](https://github.com/rsuite/rsuite/commit/c4737d5af2fabf88312c7ee2b84d4e9139e743f1))
+
+### Performance Improvements
+
+- **Context:** use `useMemo` to memozie the values returned to the Context Provider ([#2244](https://github.com/rsuite/rsuite/issues/2244)) ([d25a719](https://github.com/rsuite/rsuite/commit/d25a71920d38bceefcf100248173121d54be8313))
+- **DatePicker:** improve date grid a11y ([#2220](https://github.com/rsuite/rsuite/issues/2220)) ([655178e](https://github.com/rsuite/rsuite/commit/655178e05afe5e4b4619bda3a222dc753766e13b))
+
+# [5.4.0](https://github.com/rsuite/rsuite/compare/v5.3.0...v5.4.0) (2021-12-17)
+
+### Bug Fixes
+
+- **DatePicker,DateRangePicker:** suppress depreated caretComponent warning ([#2233](https://github.com/rsuite/rsuite/issues/2233)) ([3a79d48](https://github.com/rsuite/rsuite/commit/3a79d486268ff31ad6a620dfc17165c3be259219))
+- **DateRangePicker:** fix selecting ending date not working ([#2217](https://github.com/rsuite/rsuite/issues/2217)) ([2136aa3](https://github.com/rsuite/rsuite/commit/2136aa3327f914a910fb5805b2d11a036e0f6601))
+- **Modal:** fix Modal focus being reset on re-rendering ([#2208](https://github.com/rsuite/rsuite/issues/2208)) ([a931b06](https://github.com/rsuite/rsuite/commit/a931b06942e7fc011ab77e70b105f5790a33e55b))
+- **Nav:** fix incorrect Dropdown button background ([#2227](https://github.com/rsuite/rsuite/issues/2227)) ([421de83](https://github.com/rsuite/rsuite/commit/421de838ed13694254cc6a178d0369e12b666202))
+- **Navbar:** fix icon style in Navbar items ([#2229](https://github.com/rsuite/rsuite/issues/2229)) ([560df61](https://github.com/rsuite/rsuite/commit/560df61a44c0338b153b2c09a50e946c207c684a))
+- **Overlay:** overlay is rendered inside Modal by default ([#2230](https://github.com/rsuite/rsuite/issues/2230)) ([4fac628](https://github.com/rsuite/rsuite/commit/4fac628e23e41db097ec63c2ac348a7345f3ee31))
+- **Radio:** fix unclickable without children ([#2190](https://github.com/rsuite/rsuite/issues/2190)) ([cef5946](https://github.com/rsuite/rsuite/commit/cef59463e281d6aa6b4b9576204d16eed58087c8))
+- **SelectPicker:** fix onChange argument type ([#2193](https://github.com/rsuite/rsuite/issues/2193)) ([db0efa9](https://github.com/rsuite/rsuite/commit/db0efa94ad33de5d02bfd81e926cf622c40ecce7))
+- **Steps:** step item not rendering number ([#2202](https://github.com/rsuite/rsuite/issues/2202)) ([413880b](https://github.com/rsuite/rsuite/commit/413880be99972d8a58d5f0a0c9b6b08017ad33a2))
+- **Toggle:** fix Toggle is still clickable in loading state ([#2219](https://github.com/rsuite/rsuite/issues/2219)) ([e5661fd](https://github.com/rsuite/rsuite/commit/e5661fdb4ef659527ca97c2ea2231b4025e904d3))
+- **Tree:** remove dragNode Element when drag node ([#2185](https://github.com/rsuite/rsuite/issues/2185)) ([#2237](https://github.com/rsuite/rsuite/issues/2237)) ([f6e959f](https://github.com/rsuite/rsuite/commit/f6e959f4aa24f0fa87b5fa1bbc6e1aa775fecd2b))
+
+### Features
+
+- **Stack:** add Stack support to the layout ([#2199](https://github.com/rsuite/rsuite/issues/2199)) ([1ac132e](https://github.com/rsuite/rsuite/commit/1ac132e0fc98a6739dee07d9e6281202530d80fa))
+
+### Performance Improvements
+
+- **CheckPicker:** infer value and onChange types from data prop ([#2228](https://github.com/rsuite/rsuite/issues/2228)) ([eb4f9a8](https://github.com/rsuite/rsuite/commit/eb4f9a8f4c84cf30b3521532d95f4dc2490d0699))
+
+# [5.3.0](https://github.com/rsuite/rsuite/compare/5.2.4...5.3.0) (2021-12-10)
+
+### Bug Fixes
+
+- **Breadcrumb:** avoid separator key conflict with item key ([#2186](https://github.com/rsuite/rsuite/issues/2186)) ([428529a](https://github.com/rsuite/rsuite/commit/428529afb4f1c746ccebe06db3dd10438be8aa31))
+- **Button:** apply size from parent ButtonGroup ([#2194](https://github.com/rsuite/rsuite/issues/2194)) ([85e9a21](https://github.com/rsuite/rsuite/commit/85e9a21d5cbc5c4fd4e92d591a8fe0cce5f43a15))
+- **dts:** fix declaration errors in typescript strict mode ([#2130](https://github.com/rsuite/rsuite/issues/2130)) ([c31f080](https://github.com/rsuite/rsuite/commit/c31f080ea290d8420df77b406c29b89be44bef01))
+- **Modal:** fix Modal not focused when opened ([#2180](https://github.com/rsuite/rsuite/issues/2180)) ([383ea12](https://github.com/rsuite/rsuite/commit/383ea129b315590700301ef823e7a24309e8237b))
+
+### Features
+
+- **AvatarGroup:** add support for AvatarGroup ([#2195](https://github.com/rsuite/rsuite/issues/2195)) ([2647bea](https://github.com/rsuite/rsuite/commit/2647bea5fcbe7148049ed5b6fa3118e86971572e))
+- **FormControl:** allow explicit default value ([#2182](https://github.com/rsuite/rsuite/issues/2182)) ([691ee38](https://github.com/rsuite/rsuite/commit/691ee3807d567a379b3e82195d2b2d303449a466))
+- **Tree,CheckTree:** support showIndentLine on <Tree> and <CheckTree> ([#2181](https://github.com/rsuite/rsuite/issues/2181)) ([720768e](https://github.com/rsuite/rsuite/commit/720768e7ac89752f11b5387f76b1e5e36c54221d))
+
 ## [5.2.4](https://github.com/rsuite/rsuite/compare/v5.2.3...v5.2.4) (2021-12-03)
 
 ### Bug Fixes

package/CheckTreePicker/styles/index.less

@@ -59,7 +59,10 @@
       &::before {
         content: '';
         position: absolute;
-        width: (@picker-tree-arrow-down-width+ @picker-tree-arrow-down-gap + 30px); // checkbox-spacing = 30
+        width: (
+          @picker-tree-arrow-down-width + @picker-tree-arrow-down-gap + 30px
+        ); // checkbox-spacing = 30
+
         height: 100%;
         top: 0;
         margin-left: -58px; // 10px + 36px + 12px
@@ -141,6 +144,7 @@
 // node children
 .rs-check-tree-node-children {
   > .rs-check-tree-children {
+    position: relative;
     display: none;
 
     .rs-check-tree-open& {
@@ -149,6 +153,15 @@
   }
 }
 
+.rs-check-tree-indent-line {
+  height: 100%;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  margin-left: -13px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 .rs-picker-menu {
   display: flex;
   flex-direction: column;

package/Dropdown/styles/index.less

@@ -1,6 +1,7 @@
 @import '../../styles/common';
 @import '../../styles/mixins/menu';
 @import 'mixin';
+@import '../../Button/styles/index.less';
 
 //
 // Dropdown menus
@@ -80,10 +81,10 @@
     // Force set style even if has `.btn`.
     .dropdown-toggle();
   }
-}
 
-.rs-dropdown-toggle.rs-dropdown-no-caret {
-  padding-right: @padding-x;
+  &.rs-dropdown-toggle-no-caret {
+    padding-right: @padding-x;
+  }
 }
 
 // The dropdown menu (ul)

package/Modal/styles/index.less

@@ -5,6 +5,27 @@
 // Modals
 // --------------------------------------------------
 
+// Modal background
+.rs-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: @zindex-modal - 1;
+  background-color: var(--rs-bg-backdrop);
+
+  // Fade for backdrop
+  &.rs-anim-fade {
+    opacity: 0;
+    transition: opacity 0.3s ease-in;
+  }
+
+  &.rs-anim-in {
+    opacity: 1;
+  }
+}
+
 // Kill the scroll on the body
 .rs-modal-open {
   overflow: hidden;
@@ -15,9 +36,9 @@
   overflow: auto;
   z-index: @zindex-modal;
   top: 0;
-  bottom: 0;
-  right: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 // Container that the modal scrolls within
@@ -71,26 +92,6 @@
   padding: @modal-content-padding;
 }
 
-// Modal background
-.rs-modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--rs-bg-backdrop);
-
-  // Fade for backdrop
-  &.rs-anim-fade {
-    opacity: 0;
-    transition: opacity 0.3s ease-in;
-  }
-
-  &.rs-anim-in {
-    opacity: 1;
-  }
-}
-
 // Modal header
 // Top section of the modal w/ title and dismiss
 .rs-modal-header {

package/Nav/styles/index.less

@@ -1,5 +1,6 @@
 @import '../../styles/common';
 @import '../../Ripple/styles/mixins';
+@import '../../Dropdown/styles/index';
 
 //
 // Navs

package/Navbar/styles/index.less

@@ -1,4 +1,5 @@
 @import '../../styles/common';
+@import '../../Dropdown/styles/index';
 
 // NavBar
 // --------------------------------------------------
@@ -59,6 +60,13 @@
   background-color: transparent;
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  > .rs-icon {
+    font-size: 16px;
+    margin-right: 5px;
+  }
 }
 
 // Focus style
@@ -90,7 +98,13 @@
   margin: 0 !important;
 }
 
-// DropDown
+.rs-navbar-item.rs-navbar-item-active {
+  .high-contrast-mode({
+    text-decoration: underline;
+  });
+}
+
+// Dropdown
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
   &:extend(.rs-navbar-item);
 
@@ -110,10 +124,10 @@
   }
 }
 
-.rs-navbar-item.rs-navbar-item-active {
-  .high-contrast-mode({
-    text-decoration: underline;
-  });
+.rs-navbar .rs-dropdown-item {
+  &:hover {
+    .menuitem-active();
+  }
 }
 
 // Default Navbar

package/Radio/styles/index.less

@@ -30,6 +30,12 @@
 
   [type='radio'] {
     opacity: 0;
+    // bring to foreground
+    position: absolute;
+    z-index: 1;
+    width: @radio-width-height;
+    height: @radio-width-height;
+    cursor: pointer;
   }
 
   &::before,

package/Sidenav/styles/index.less

@@ -378,6 +378,7 @@
     .rs-dropdown .rs-dropdown-toggle,
     .rs-dropdown-item,
     .rs-dropdown-item-submenu > .rs-dropdown-menu-toggle {
+      white-space: nowrap;
       text-overflow: clip;
     }
   }
@@ -436,7 +437,6 @@
 
 .rs-sidenav-default.rs-sidenav-collapse-in,
 .rs-sidenav-default.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-default-text);
@@ -543,6 +543,7 @@
 
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown-item.rs-dropdown-item-active,
   .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
     color: var(--rs-sidenav-subtle-selected-text);
   }
@@ -559,7 +560,6 @@
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,
 .rs-sidenav-subtle.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-subtle-text);

package/Stack/package.json

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

package/Stack/styles/index.less

@@ -0,0 +1,5 @@
+@import '../../styles/common';
+
+.rs-stack {
+  display: flex;
+}

package/TreePicker/styles/index.less

@@ -13,20 +13,6 @@
   overflow-y: auto;
   flex: 1 1 auto;
 
-  &-drag-node-mover {
-    position: absolute;
-    top: -1000px;
-    color: var(--rs-text-primary);
-    background-color: var(--rs-bg-overlay);
-    display: inline-block;
-    margin: 0;
-    padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-    border-radius: 6px;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
-    z-index: 1060;
-    cursor: move;
-  }
-
   &.rs-tree-virtualized {
     overflow: hidden;
 
@@ -202,6 +188,7 @@
 // node children
 .rs-tree-node-children {
   > .rs-tree-children {
+    position: relative;
     display: none;
 
     .rs-tree-open& {
@@ -210,6 +197,15 @@
   }
 }
 
+.rs-tree-indent-line {
+  height: 100%;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  margin-left: -13px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 .rs-picker-menu {
   display: flex;
   flex-direction: column;

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

@@ -22,23 +22,23 @@ export interface RsRefForwardingComponent<T extends React.ElementType, P = unkno
 }
 export interface AnimationEventProps {
     /** Callback fired before the Modal transitions in */
-    onEnter?: (node?: null | Element | Text) => void;
+    onEnter?: (node: HTMLElement) => void;
     /** Callback fired as the Modal begins to transition in */
-    onEntering?: (node?: null | Element | Text) => void;
+    onEntering?: (node: HTMLElement) => void;
     /** Callback fired after the Modal finishes transitioning in */
-    onEntered?: (node?: null | Element | Text) => void;
+    onEntered?: (node: HTMLElement) => void;
     /** Callback fired right before the Modal transitions out */
-    onExit?: (node?: null | Element | Text) => void;
+    onExit?: (node: HTMLElement) => void;
     /** Callback fired as the Modal begins to transition out */
-    onExiting?: (node?: null | Element | Text) => void;
+    onExiting?: (node: HTMLElement) => void;
     /** Callback fired after the Modal finishes transitioning out */
-    onExited?: (node?: null | Element | Text) => void;
+    onExited?: (node: HTMLElement) => void;
 }
 export declare type PickerAppearance = 'default' | 'subtle';
 export interface PickerBaseProps<LocaleType = any> extends WithAsProps, AnimationEventProps {
     id?: string;
     /** Custom locale */
-    locale?: LocaleType;
+    locale?: Partial<LocaleType>;
     /** A picker can have different appearances. */
     appearance?: PickerAppearance;
     /** Format picker to appear inside a content block */
@@ -111,7 +111,7 @@ export interface FormControlPickerProps<ValueType = any, LocaleType = any, DataT
     /** Set children key in data */
     childrenKey?: string;
     /** Disabled items */
-    disabledItemValues?: ToArray<ValueType>;
+    disabledItemValues?: ToArray<NonNullable<ValueType>>;
     /** Initial value */
     defaultValue?: ValueType;
     /** Current value of the component. Creates a controlled component */
@@ -134,12 +134,12 @@ export interface SVGIcon {
     viewBox: string;
     id: string;
 }
-export interface ItemDataType extends Record<string, any> {
+export interface ItemDataType<T = number | string> extends Record<string, any> {
     label?: string | React.ReactNode;
-    value?: string | number;
+    value?: T;
     groupBy?: string;
-    parent?: ItemDataType;
-    children?: ItemDataType[];
+    parent?: ItemDataType<T>;
+    children?: ItemDataType<T>[];
     loading?: boolean;
 }
 export interface Offset {
@@ -148,4 +148,5 @@ export interface Offset {
     width?: number;
     height?: number;
 }
+export declare type OnChangeCallback<T, E = React.SyntheticEvent> = (value: T, event: E) => void;
 export {};

package/cjs/@types/utils.d.ts

@@ -9,3 +9,15 @@ export declare type Pick<T, K extends keyof T> = {
 export declare type Exclude<T, U> = T extends U ? never : T;
 export declare type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
 export declare type ReplaceProps<Inner extends React.ElementType, P> = Omit<React.ComponentPropsWithRef<Inner>, P> & P;
+/**
+ * Prepend arguments to function
+ * Useful for prepend `newValue` arg to native `onChange` callbacks
+ *
+ * @see https://stackoverflow.com/a/69668215
+ * @example
+ *
+ * type SomeFunc = (a: string, b: number, c: someCustomType) => number;
+ * type SomeFuncAltered = PrependParameters<SomeFunc, [d: number]>;
+ * // SomeFuncAltered = (d: number, a:string, b:number, c:someCustomType) => number;
+ */
+export declare type PrependParameters<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...TParameters, ...Parameters<TFunction>]) => ReturnType<TFunction>;

package/cjs/Affix/Affix.js

@@ -35,7 +35,9 @@ function useOffset(mountRef) {
     return mountRef.current;
   }, updateOffset); // Initialize after the first render
 
-  (0, _react.useEffect)(updateOffset, [updateOffset]);
+  (0, _utils.useMount)(updateOffset); // Update after window size changes
+
+  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);
   return offset;
 }
 /**
@@ -78,11 +80,11 @@ function useFixed(offset, containerOffset, props) {
 
     var scrollY = window.scrollY || window.pageYOffset; // When the scroll distance exceeds the element's top value, it is fixed.
 
-    var nextFixed = scrollY - (offset.top - top) >= 0; // If the current element is specified in the container,
+    var nextFixed = scrollY - (Number(offset.top) - Number(top)) >= 0; // If the current element is specified in the container,
     // add to determine whether the current container is in the window range.
 
     if (containerOffset) {
-      nextFixed = nextFixed && scrollY < containerOffset.top + containerOffset.height;
+      nextFixed = nextFixed && scrollY < Number(containerOffset.top) + Number(containerOffset.height);
     }
 
     if (nextFixed !== fixed) {
@@ -123,8 +125,8 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var classes = merge(className, (_merge = {}, _merge[withClassPrefix()] = fixed, _merge));
   var placeholderStyles = fixed ? {
-    width: offset.width,
-    height: offset.height
+    width: offset === null || offset === void 0 ? void 0 : offset.width,
+    height: offset === null || offset === void 0 ? void 0 : offset.height
   } : undefined;
   var fixedStyles = {
     position: 'fixed',
@@ -133,7 +135,7 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     width: offset === null || offset === void 0 ? void 0 : offset.width,
     zIndex: 10
   };
-  var affixStyles = fixed ? fixedStyles : null;
+  var affixStyles = fixed ? fixedStyles : undefined;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: (0, _utils.mergeRefs)(mountRef, ref)
   }), /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Animation/Transition.d.ts

@@ -36,7 +36,7 @@ interface TransitionState {
 }
 export declare const transitionPropTypes: {
     animation: PropTypes.Requireable<boolean>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     className: PropTypes.Requireable<string>;
     in: PropTypes.Requireable<boolean>;
     unmountOnExit: PropTypes.Requireable<boolean>;
@@ -53,10 +53,13 @@ export declare const transitionPropTypes: {
     onExiting: PropTypes.Requireable<(...args: any[]) => any>;
     onExited: PropTypes.Requireable<(...args: any[]) => any>;
 };
+declare type EventToken = {
+    off: () => void;
+};
 declare class Transition extends React.Component<TransitionProps, TransitionState> {
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
         in: PropTypes.Requireable<boolean>;
         unmountOnExit: PropTypes.Requireable<boolean>;
@@ -77,26 +80,32 @@ declare class Transition extends React.Component<TransitionProps, TransitionStat
     static defaultProps: {
         timeout: number;
     };
-    animationEventListener: any;
-    instanceElement: any;
-    nextCallback: any;
-    needsUpdate: any;
+    animationEventListener: EventToken | null;
+    instanceElement: HTMLElement | null;
+    nextCallback: {
+        (event?: React.AnimationEvent): void;
+        cancel: () => any;
+    } | null;
+    needsUpdate: boolean | null;
     childRef: React.RefObject<any>;
     constructor(props: TransitionProps);
     static getDerivedStateFromProps(nextProps: TransitionProps, prevState: TransitionState): {
         status: STATUS;
-    };
-    getSnapshotBeforeUpdate(): any;
+    } | null;
+    getSnapshotBeforeUpdate(): null;
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    onTransitionEnd(node: HTMLElement, handler: React.AnimationEventHandler): void;
-    setNextCallback(callback: React.AnimationEventHandler): any;
-    getChildElement(): any;
+    onTransitionEnd(node: HTMLElement, handler: (event?: React.AnimationEvent) => void): void;
+    setNextCallback(callback: (event?: React.AnimationEvent) => void): {
+        (event?: React.AnimationEvent<Element> | undefined): void;
+        cancel: () => any;
+    };
+    getChildElement(): HTMLElement;
     performEnter(props: TransitionProps): void;
     performExit(props: TransitionProps): void;
     cancelNextCallback(): void;
-    safeSetState(nextState: TransitionState, callback: React.AnimationEventHandler): void;
+    safeSetState(nextState: TransitionState, callback: (event?: React.AnimationEvent) => void): void;
     render(): React.ReactNode;
 }
 export default Transition;

package/cjs/Animation/Transition.js

@@ -271,7 +271,10 @@ var Transition = /*#__PURE__*/function (_React$Component) {
 
   _proto.safeSetState = function safeSetState(nextState, callback) {
     if (this.instanceElement) {
-      this.setState(nextState, this.setNextCallback(callback));
+      var nextCallback = this.setNextCallback(callback);
+      this.setState(nextState, function () {
+        return nextCallback();
+      });
     }
   };
 

package/cjs/AutoComplete/AutoComplete.js

@@ -171,7 +171,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var classes = merge(className, withClassPrefix({
     disabled: disabled
   }));
-  var triggerRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef

package/cjs/AutoComplete/utils.d.ts

@@ -1,3 +1,3 @@
 import { ItemDataType } from '../@types/common';
 export declare function transformData(data: any[]): any[];
-export declare const shouldDisplay: (filterBy: (value: string, item: ItemDataType) => boolean, value: any) => (item: any) => boolean;
+export declare const shouldDisplay: (filterBy: ((value: string, item: ItemDataType) => boolean) | undefined, value: any) => (item: any) => boolean;