rsuite 5.5.0 → 5.6.1

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## [5.6.1](https://github.com/rsuite/rsuite/compare/v5.6.0...v5.6.1) (2022-02-17)
+
+### Bug Fixes
+
+- **caretAs:** fix DatePicker and DateRangePicker cannot replace caret ([#2360](https://github.com/rsuite/rsuite/issues/2360)) ([1e619b2](https://github.com/rsuite/rsuite/commit/1e619b2ef7abc58a93f6d6d4fc78ffea07761c81))
+- **IconButton:** infer addtional props from as prop ([#2343](https://github.com/rsuite/rsuite/issues/2343)) ([3b6c25c](https://github.com/rsuite/rsuite/commit/3b6c25c103ed33a86baa47b8c757462da7ae8c4c))
+- **Toaster:** code breaks when toaster is in a useEffect ([#2353](https://github.com/rsuite/rsuite/issues/2353)) ([d083fe2](https://github.com/rsuite/rsuite/commit/d083fe27013659cbc45196b7ead9ff5863404fb8)), closes [#2336](https://github.com/rsuite/rsuite/issues/2336)
+- **useTimeout:** fix callback not being called after timeout ([#2349](https://github.com/rsuite/rsuite/issues/2349)) ([e82a12a](https://github.com/rsuite/rsuite/commit/e82a12aa2929cf66e7a3c6d70008c5bedb4ab128))
+
+# [5.6.0](https://github.com/rsuite/rsuite/compare/v5.5.2...v5.6.0) (2022-02-10)
+
+### Bug Fixes
+
+- **DatePicker:** fixed oneTap to work in month view ([#2342](https://github.com/rsuite/rsuite/issues/2342)) ([d5368cd](https://github.com/rsuite/rsuite/commit/d5368cdfb2a6386bfb509a6316520e450f35f2b4))
+- handle some null value branch ([#2323](https://github.com/rsuite/rsuite/issues/2323)) ([3ffd1d9](https://github.com/rsuite/rsuite/commit/3ffd1d966d5fd7f0a4f42bb8b08bf0cb65955fef))
+
+### Features
+
+- **Carousel:** Expose active index ([#2338](https://github.com/rsuite/rsuite/issues/2338)) ([beac483](https://github.com/rsuite/rsuite/commit/beac48395c9fc7c30efb3f49f81e8969cd3ee71d))
+
+## [5.5.2](https://github.com/rsuite/rsuite/compare/v5.5.1...v5.5.2) (2022-01-27)
+
+### Features
+
+- **Cascader:** add parent node in serach result while parentSelectable ([#2313](https://github.com/rsuite/rsuite/issues/2313)) ([e677bb6](https://github.com/rsuite/rsuite/commit/e677bb6b75d0cc26dafedc8e5326d413969c2867))
+
+## [5.5.1](https://github.com/rsuite/rsuite/compare/v5.5.0...v5.5.1) (2022-01-21)
+
+### Bug Fixes
+
+- **Carousel:** add a flex-wrap property on toolbar buttons ([#2302](https://github.com/rsuite/rsuite/issues/2302)) ([a9a9113](https://github.com/rsuite/rsuite/commit/a9a911378c4aaeba43233dd3acdc05913a9bf6ae))
+- **CheckTreePicker:** fix CheckTreePicker label style ([#2304](https://github.com/rsuite/rsuite/issues/2304)) ([07eb5ac](https://github.com/rsuite/rsuite/commit/07eb5acd4e8283529619ad2b4d6003b0c4f8614d))
+- **DateRangePicker:** fix month not selectable on calendar ([#2312](https://github.com/rsuite/rsuite/issues/2312)) ([5199845](https://github.com/rsuite/rsuite/commit/5199845ee435e923c807da5e0813f4ba06a86798))
+- **Sidenav:** hide focus ring when interacting with mouse ([#2311](https://github.com/rsuite/rsuite/issues/2311)) ([9413bc9](https://github.com/rsuite/rsuite/commit/9413bc9a48fb8a3f915cc811b3392ba4e65b0b70))
+
+### Performance Improvements
+
+- Responsive for small screen ([#2293](https://github.com/rsuite/rsuite/issues/2293)) ([cadc42e](https://github.com/rsuite/rsuite/commit/cadc42e39baee174ff7d5577ea933cb471ef5bd0))
+
 # [5.5.0](https://github.com/rsuite/rsuite/compare/v5.4.4...v5.5.0) (2022-01-13)
 
 ### Bug Fixes

package/Carousel/styles/index.less

@@ -53,6 +53,7 @@
 
     > ul {
       display: flex;
+      flex-wrap: wrap;
       list-style: none;
       margin: 0;
       padding: 0;

package/CheckTreePicker/styles/index.less

@@ -32,8 +32,8 @@
       margin: 0;
       //padding-left: 16px;
       padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-      //text gap + checkbox space
-      padding-left: 58px; // 10px + 36px + 12px
+      //text gap + checkbox space + label gap
+      padding-left: 50px; // 10px + 36px + 4px
 
       &::before {
         content: '';
@@ -44,7 +44,7 @@
 
         height: 100%;
         top: 0;
-        margin-left: -58px; // 10px + 36px + 12px
+        margin-left: -52px; // 10px + 36px + 6px
       }
     }
 
@@ -57,11 +57,11 @@
 // Only has the first level
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
   > label {
-    padding-left: 34px; //text gap + checkbox space
+    padding-left: 32px; //text gap + checkbox space
 
     &::before {
       width: 28px;
-      margin-left: -36px;
+      margin-left: -34px;
     }
   }
 

package/Modal/styles/mixin.less

@@ -1,3 +1,4 @@
 .content-width(@width) {
   width: @width;
+  max-width: calc(100% - 10px);
 }

package/README.md

@@ -130,9 +130,11 @@ If you like React Suite, you can show your support by either
 This project exists thanks to all the people who contribute.
 
 <a href="https://github.com/rsuite/rsuite/graphs/contributors" target="_blank">
-  <img src="https://opencollective.com/rsuite/contributors.svg?width=890" />
+  <img src="https://contrib.rocks/image?repo=rsuite/rsuite" />
 </a>
 
+[![opencollective-now][opencollective-svg]][opencollective-home]
+
 ## License
 
 React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
@@ -147,7 +149,7 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [rsuite-design]: https://rsuitejs.com/design/default
 [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-themes]: https://rsuitejs.com/en/guide/customization
 [rsuite-doc-guide-intl]: https://rsuitejs.com/en/guide/intl
 [rsuite-doc-guide-rtl]: https://rsuitejs.com/en/guide/rtl
 [rsuite-components-overview]: https://rsuitejs.com/en/components/overview

package/Sidenav/styles/index.less

@@ -137,7 +137,7 @@
 
     // Sidenav is usually placed by the left/right edge of the page
     // thus use an inset focus ring to prevent overflow clipping
-    &:focus {
+    &:focus-visible {
       .focus-ring(inset);
     }
 
@@ -337,7 +337,7 @@
     // supplement padding
     padding-left: @sidenav-default-width;
 
-    &:focus {
+    &:focus-visible {
       .focus-ring();
 
       .high-contrast-mode({

package/cjs/Affix/Affix.js

@@ -28,6 +28,7 @@ function useOffset(mountRef) {
       setOffset = _useState[1];
 
   var updateOffset = (0, _react.useCallback)(function () {
+    // FIXME upgrade dom-lib
     setOffset((0, _getOffset.default)(mountRef.current));
   }, [mountRef]); // Update after the element size changes
 

package/cjs/Calendar/TimeDropdown.js

@@ -101,10 +101,11 @@ var scrollTo = function scrollTo(time, row) {
     var node = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + type + "-" + value + "\"]");
 
     if (node && container) {
-      var _ref2 = (0, _getPosition.default)(node, container),
-          top = _ref2.top;
+      var position = (0, _getPosition.default)(node, container);
 
-      (0, _utils.scrollTopAnimation)(container, top, (0, _scrollTop.default)(container) !== 0);
+      if (position) {
+        (0, _utils.scrollTopAnimation)(container, position.top, (0, _scrollTop.default)(container) !== 0);
+      }
     }
   });
 };
@@ -134,7 +135,9 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       showMeridian: showMeridian
     }); // The currently selected time scrolls to the visible range.
 
-    show && scrollTo(time, rowRef.current);
+    if (show && rowRef.current) {
+      scrollTo(time, rowRef.current);
+    }
   }, [date, format, show, showMeridian]);
 
   var handleClick = function handleClick(type, d, event) {

package/cjs/Carousel/Carousel.d.ts

@@ -9,7 +9,11 @@ export interface CarouselProps extends WithAsProps {
     placement?: 'top' | 'bottom' | 'left' | 'right';
     /** Button shape */
     shape?: 'dot' | 'bar';
-    /** Callback fired when the active item changes */
+    /** Active element index */
+    activeIndex?: number;
+    /** Defaul initial index */
+    defaultActiveIndex?: number;
+    /** Callback fired when the active item manually changes */
     onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition starts */
     onSlideStart?: (index: number, event?: React.ChangeEvent<HTMLInputElement>) => void;

package/cjs/Carousel/Carousel.js

@@ -35,10 +35,13 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       autoplay = props.autoplay,
       _props$autoplayInterv = props.autoplayInterval,
       autoplayInterval = _props$autoplayInterv === void 0 ? 4000 : _props$autoplayInterv,
+      activeIndexProp = props.activeIndex,
+      _props$defaultActiveI = props.defaultActiveIndex,
+      defaultActiveIndex = _props$defaultActiveI === void 0 ? 0 : _props$defaultActiveI,
       onSelect = props.onSelect,
       onSlideStart = props.onSlideStart,
       onSlideEnd = props.onSlideEnd,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "className", "placement", "shape", "autoplay", "autoplayInterval", "onSelect", "onSlideStart", "onSlideEnd"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "className", "placement", "shape", "autoplay", "autoplayInterval", "activeIndex", "defaultActiveIndex", "onSelect", "onSlideStart", "onSlideEnd"]);
 
   var _useCustom = (0, _utils.useCustom)('Carousel'),
       rtl = _useCustom.rtl;
@@ -54,17 +57,24 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var vertical = placement === 'left' || placement === 'right';
   var lengthKey = vertical ? 'height' : 'width';
 
+  var _useControlled = (0, _utils.useControlled)(activeIndexProp, defaultActiveIndex),
+      activeIndex = _useControlled[0],
+      setActiveIndex = _useControlled[1];
+
   var _useState = (0, _react.useState)(0),
-      activeIndex = _useState[0],
-      setActiveIndex = _useState[1];
+      lastIndex = _useState[0],
+      setLastIndex = _useState[1];
 
-  var _useState2 = (0, _react.useState)(0),
-      lastIndex = _useState2[0],
-      setLastIndex = _useState2[1];
+  var rootRef = (0, _react.useRef)(null); // Set a timer for automatic playback.
+  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
 
-  var rootRef = (0, _react.useRef)(null);
+  var _useTimeout = (0, _utils.useTimeout)(function () {
+    return handleSlide();
+  }, autoplayInterval, !!autoplay && count > 1),
+      clear = _useTimeout.clear,
+      reset = _useTimeout.reset;
 
-  var handleSlide = function handleSlide(nextActiveIndex, event) {
+  var handleSlide = (0, _react.useCallback)(function (nextActiveIndex, event) {
     if (!rootRef.current) {
       return;
     }
@@ -77,7 +87,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSlideStart === null || onSlideStart === void 0 ? void 0 : onSlideStart(nextIndex, event);
     setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex);
     reset();
-  };
+  }, [activeIndex, count, setActiveIndex, clear, onSlideStart, reset]);
 
   var handleChange = function handleChange(event) {
     var activeIndex = +event.target.value;
@@ -87,13 +97,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var handleTransitionEnd = (0, _react.useCallback)(function (event) {
     onSlideEnd === null || onSlideEnd === void 0 ? void 0 : onSlideEnd(activeIndex, event);
-  }, [activeIndex, onSlideEnd]); // Set a timer for automatic playback.
-  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
-
-  var _useTimeout = (0, _utils.useTimeout)(handleSlide, autoplayInterval, !!autoplay && count > 1),
-      clear = _useTimeout.clear,
-      reset = _useTimeout.reset;
-
+  }, [activeIndex, onSlideEnd]);
   var uniqueId = (0, _react.useMemo)(function () {
     return (0, _utils.guid)();
   }, []);
@@ -165,6 +169,8 @@ Carousel.propTypes = {
   as: _propTypes.default.elementType,
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,
+  activeIndex: _propTypes.default.number,
+  defaultActiveIndex: _propTypes.default.number,
   autoplay: _propTypes.default.bool,
   autoplayInterval: _propTypes.default.number,
   placement: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),

package/cjs/Cascader/Cascader.js

@@ -163,7 +163,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var getSearchResult = (0, _react.useCallback)(function (keyword) {
     var items = [];
     var result = flattenData.filter(function (item) {
-      if (item[childrenKey]) {
+      if (!parentSelectable && item[childrenKey]) {
         return false;
       }
 
@@ -179,7 +179,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     return items;
-  }, [childrenKey, flattenData, someKeyword]); // Used to hover the focuse item  when trigger `onKeydown`
+  }, [childrenKey, flattenData, someKeyword, parentSelectable]); // Used to hover the focuse item  when trigger `onKeydown`
 
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
     rtl: rtl,

package/cjs/Cascader/DropdownMenu.js

@@ -87,7 +87,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       if (activeItem) {
         var position = (0, _getPosition.default)(activeItem, column); // Let the active option scroll into view.
 
-        (0, _scrollTop.default)(column, position.top);
+        (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);
       }
     });
   }, [prefix]);

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -79,17 +79,20 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       controlledValue = props.value,
       _props$defaultValue = props.defaultValue,
       defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,
-      defaultExpandAll = props.defaultExpandAll,
+      _props$defaultExpandA = props.defaultExpandAll,
+      defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
       _props$disabledItemVa = props.disabledItemValues,
       disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
       controlledExpandItemValues = props.expandItemValues,
-      defaultExpandItemValues = props.defaultExpandItemValues,
+      _props$defaultExpandI = props.defaultExpandItemValues,
+      defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
       _props$height = props.height,
       height = _props$height === void 0 ? 360 : _props$height,
       menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
-      virtualized = props.virtualized,
+      _props$virtualized = props.virtualized,
+      virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
@@ -271,15 +274,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   };
 
   var focusActiveNode = (0, _react.useCallback)(function () {
-    (0, _treeUtils.focusToActiveTreeNode)({
-      list: listRef.current,
-      valueKey: valueKey,
-      selector: "." + checkTreePrefix('node-active'),
-      activeNode: activeNode,
-      virtualized: virtualized,
-      container: treeViewRef.current,
-      formattedNodes: getFormattedNodes()
-    });
+    if (listRef.current) {
+      (0, _treeUtils.focusToActiveTreeNode)({
+        list: listRef.current,
+        valueKey: valueKey,
+        selector: "." + checkTreePrefix('node-active'),
+        activeNode: activeNode,
+        virtualized: virtualized,
+        container: treeViewRef.current,
+        formattedNodes: getFormattedNodes()
+      });
+    }
   }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
   (0, _react.useEffect)(function () {
     setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));

package/cjs/CheckTreePicker/utils.d.ts

@@ -36,9 +36,9 @@ export declare function isEveryFirstLevelNodeUncheckable(nodes: TreeNodesType, u
  * get node uncheckable state
  * @param {*} node
  */
-export declare function isNodeUncheckable(node: any, props: Partial<CheckTreePickerProps>): boolean;
-export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Partial<CheckTreePickerProps>): any[];
-export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Partial<CheckTreePickerProps>): boolean;
+export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckTreePickerProps, 'uncheckableItemValues' | 'valueKey'>>): boolean;
+export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>): any[];
+export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Required<Pick<CheckTreePickerProps, 'disabledItemValues' | 'valueKey'>>): boolean;
 export declare function getCheckTreePickerDefaultValue(value: any[], uncheckableItemValues: any[]): any[];
 export declare function getSelectedItems(nodes: TreeNodesType, value: (string | number)[], valueKey: string): TreeNodeType[];
 export declare function getNodeCheckState({ nodes, node, cascade, childrenKey }: any): CheckStateType;

package/cjs/CheckTreePicker/utils.js

@@ -136,7 +136,7 @@ function getFormattedTree(data, nodes, props) {
     var curNode = nodes[node.refKey];
 
     if (curNode) {
-      var _node;
+      var _node$childrenKey;
 
       var checkState = !(0, _isUndefined2.default)(cascade) ? getNodeCheckState({
         node: curNode,
@@ -150,7 +150,7 @@ function getFormattedTree(data, nodes, props) {
       formatted.parent = curNode.parent;
       formatted.checkState = checkState;
 
-      if (((_node = node[childrenKey]) === null || _node === void 0 ? void 0 : _node.length) > 0) {
+      if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {
         formatted[childrenKey] = getFormattedTree(formatted[childrenKey], nodes, props);
       }
     }

package/cjs/DOMHelper/index.d.ts

@@ -13,15 +13,15 @@ declare const DOMHelper: {
     cancelAnimationFramePolyfill: typeof clearTimeout;
     requestAnimationFramePolyfill: typeof requestAnimationFrame;
     getAnimationEnd: typeof helpers.getAnimationEnd;
-    ownerDocument: (node: Element) => Document;
+    ownerDocument: (node: Element | null) => Document;
     ownerWindow: (componentOrElement: Element) => Window;
     getWindow: (node: any) => Window;
-    getContainer: (container: Element | (() => Element), defaultContainer?: Element | undefined) => Element;
+    getContainer: (container: Element | (() => Element | null) | null, defaultContainer?: Element | undefined) => Element;
     canUseDOM: boolean;
     contains: (context: Element, node: Node & ParentNode) => boolean;
     scrollTop: (node: Element, val?: number | undefined) => number;
     scrollLeft: (node: Element, val?: number | undefined) => number;
-    getOffset: (node: Element) => {
+    getOffset: (node: Element | null) => {
         top: number;
         left: number;
         height: number;
@@ -42,7 +42,7 @@ declare const DOMHelper: {
     isFocusable: typeof helpers.isFocusable;
     getStyle: (node: Element, property?: string | undefined) => string | CSSStyleDeclaration;
     removeStyle: (node: Element, keys: string | string[]) => void;
-    addStyle: (node: Element, property: string | import("dom-lib/esm/addStyle").CSSProperty, value?: string | number | undefined) => void;
+    addStyle: (node: Element, property: string | Partial<import("dom-lib/esm/addStyle").CSSProperty>, value?: string | number | undefined) => void;
     translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number | undefined, y?: number | undefined) => CSSStyleDeclaration;
 };
 export default DOMHelper;

package/cjs/DatePicker/DatePicker.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { RangeType } from './Toolbar';
 import { DatePickerLocale } from '../locales';
+import { PickerToggleProps } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
 export type { RangeType } from './Toolbar';
-export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
+export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
     /** Configure shortcut options */
     ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */

package/cjs/DatePicker/DatePicker.js

@@ -68,6 +68,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       showWeekNumbers = props.showWeekNumbers,
       style = props.style,
       toggleAs = props.toggleAs,
+      caretAsProp = props.caretAs,
       disabledDateProp = props.disabledDate,
       renderValue = props.renderValue,
       onChange = props.onChange,
@@ -83,7 +84,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
 
   var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -152,15 +153,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);
   }, [onChangeCalendarDate, onSelect]);
-  /**
-   *  A callback triggered when the date on the calendar changes.
-   */
-
-  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate) {
-    setCalendarDate(nextPageDate);
-    reset();
-    handleDateChange(nextPageDate);
-  }, [handleDateChange, reset, setCalendarDate]);
   /**
    *  A callback triggered when the time on the calendar changes.
    */
@@ -288,6 +280,21 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       updateValue(event, nextValue);
     }
   }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);
+  /**
+   *  A callback triggered when the date on the calendar changes.
+   */
+
+  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate, event) {
+    setCalendarDate(nextPageDate);
+    reset();
+    handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'
+
+    var onlyShowMonth = _utils.DateUtils.shouldMonth(formatStr) && !_utils.DateUtils.shouldDate(formatStr);
+
+    if (oneTap && onlyShowMonth) {
+      updateValue(event, nextPageDate);
+    }
+  }, [formatStr, handleDateChange, oneTap, reset, setCalendarDate, updateValue]);
   var disabledDate = (0, _react.useCallback)(function (date) {
     var _disabledDateProp;
 
@@ -439,8 +446,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
   var caretAs = (0, _react.useMemo)(function () {
-    return _utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default;
-  }, [formatStr]);
+    return caretAsProp || (_utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default);
+  }, [caretAsProp, formatStr]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),

package/cjs/DateRangePicker/Calendar.js

@@ -114,22 +114,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
-    var after;
-
-    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
-      return true;
-    }
-
-    if (showOneCalendar) return false;
-
-    if (index === 1) {
-      after = (0, _dateUtils.isAfter)(date, calendarDate[0]);
-      return !after;
-    }
-
-    after = (0, _dateUtils.isAfter)(calendarDate[1], date);
-    return !after;
-  }, [calendarDate, disabledDate, index, showOneCalendar, value]);
+    return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);
+  }, [disabledDate, value]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     format: format,
     calendarState: calendarState,

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
-import { PickerComponent } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../Picker';
 import { DisabledDateFunction, RangeType, DateRange } from './types';
-export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null> {
+export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
     /** Configure shortcut options */
     ranges?: RangeType[];
     /** Format date */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -82,6 +82,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showMeridian = props.showMeridian,
       style = props.style,
       toggleAs = props.toggleAs,
+      caretAs = props.caretAs,
       valueProp = props.value,
       onChange = props.onChange,
       onClean = props.onClean,
@@ -92,7 +93,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onOk = props.onOk,
       onOpen = props.onOpen,
       onSelect = props.onSelect,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -276,7 +277,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     if (!hasDoneSelect.current) {
       // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
-      if (!(0, _isNil.default)(nextHoverDateRange)) {
+      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
 
         if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
@@ -632,8 +633,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretAs: _Calendar.default,
-    disabled: disabled
+    disabled: disabled,
+    caretAs: caretAs || _Calendar.default
   }), getDisplayString(value))));
 });
 

package/cjs/IconButton/IconButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ButtonProps } from '../Button';
 import { IconProps } from '@rsuite/icons/lib/Icon';
+import { RsRefForwardingComponent } from '../@types/common';
+import Button, { ButtonProps } from '../Button';
 export interface IconButtonProps extends ButtonProps {
     /** Set the icon */
     icon?: React.ReactElement<IconProps>;
@@ -9,5 +10,7 @@ export interface IconButtonProps extends ButtonProps {
     /** The placement of icon */
     placement?: 'left' | 'right';
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
+declare const IconButton: RsRefForwardingComponent<typeof Button, IconButtonProps & {
+    ref?: React.Ref<HTMLElement>;
+}>;
 export default IconButton;

package/cjs/IconButton/IconButton.js

@@ -13,10 +13,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Button = _interopRequireDefault(require("../Button"));
-
 var _utils = require("../utils");
 
+var _Button = _interopRequireDefault(require("../Button"));
+
 var IconButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var icon = props.icon,
       _props$placement = props.placement,

package/cjs/IconButton/test/IconButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/IconButton/test/IconButton.test.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var Link = function Link(_ref) {
+  var to = _ref.to;
+  return /*#__PURE__*/_react.default.createElement("a", {
+    href: to
+  });
+};
+
+var ref = /*#__PURE__*/_react.default.createRef(); // Infer `as` component props
+
+
+/*#__PURE__*/
+_react.default.createElement(_IconButton.default, {
+  ref: ref,
+  as: Link,
+  to: "/home"
+});

package/cjs/InputPicker/InputAutosize.js

@@ -128,7 +128,9 @@ var InputAutosize = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       return;
     }
 
-    copyStyles(inputStyles, sizerRef.current);
+    if (sizerRef.current) {
+      copyStyles(inputStyles, sizerRef.current);
+    }
 
     if (placeholderRef.current) {
       copyStyles(inputStyles, placeholderRef.current);