rsuite 5.2.0 → 5.2.4

package/Button/styles/index.less

@@ -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,45 @@
+## [5.2.4](https://github.com/rsuite/rsuite/compare/v5.2.3...v5.2.4) (2021-12-03)
+
+### Bug Fixes
+
+- **Carousel:** make onSelect prop optional ([#2170](https://github.com/rsuite/rsuite/issues/2170)) ([c4d7a63](https://github.com/rsuite/rsuite/commit/c4d7a63f4ec71ebb05d92b04bd26ebe547609dd0))
+- **DateRangePicker:** fix DateRangePicker cannot switch am/pm ([#2171](https://github.com/rsuite/rsuite/issues/2171)) ([4c55db9](https://github.com/rsuite/rsuite/commit/4c55db9a3a96927589d4366ece1f329c011ccb0f))
+- **pickers:** fix custom input in Picker cannot be focused ([#2176](https://github.com/rsuite/rsuite/issues/2176)) ([8a94bd6](https://github.com/rsuite/rsuite/commit/8a94bd6f9640995e017716fe69b68912c55e4c86))
+- **Table:** fix the column of grouping cannot be centered ([#2168](https://github.com/rsuite/rsuite/issues/2168)) ([4fbe460](https://github.com/rsuite/rsuite/commit/4fbe460da4e9744eee8589233b305b7e15295e41))
+- **tree:** expose methods for tree that can scroll the list ([#2178](https://github.com/rsuite/rsuite/issues/2178)) ([0a6f9ee](https://github.com/rsuite/rsuite/commit/0a6f9ee57ed33477472f2ad41c06d5242d3d62d5))
+
+## [5.2.3](https://github.com/rsuite/rsuite/compare/v5.2.2...v5.2.3) (2021-11-26)
+
+### Bug Fixes
+
+- **useElementResize:** fix ResizeObserver being created repeatedly ([#2161](https://github.com/rsuite/rsuite/issues/2161)) ([32e2fa7](https://github.com/rsuite/rsuite/commit/32e2fa76a396945498f198d176b630ac09a4e20d))
+- focus handler ([#2154](https://github.com/rsuite/rsuite/issues/2154)) ([3b17fbc](https://github.com/rsuite/rsuite/commit/3b17fbcae6da59ca58788c6b3aa60d79692dffa1))
+- **TagPicker:** fix tag misplacement in plaintext mode ([#2152](https://github.com/rsuite/rsuite/issues/2152)) ([6d32c71](https://github.com/rsuite/rsuite/commit/6d32c714e1b9be743d57b3ae4f1622d006e0f52c))
+
+### Performance Improvements
+
+- **Menu:** prevent uneccesary re-render when mouseove on menuitems ([#2148](https://github.com/rsuite/rsuite/issues/2148)) ([dc06498](https://github.com/rsuite/rsuite/commit/dc0649822fd68964281f44c4ec2daf84953edc63))
+
+## [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

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

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

@@ -342,10 +342,6 @@
     &-cell {
       position: absolute;
       border-right: 1px solid var(--rs-border-secondary);
-
-      &-content {
-        display: table-cell;
-      }
     }
   }
 }

package/cjs/Carousel/Carousel.d.ts

@@ -10,7 +10,7 @@ export interface CarouselProps extends WithAsProps {
     /** Button shape */
     shape?: 'dot' | 'bar';
     /** Callback fired when the active item changes */
-    onSelect: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition starts */
     onSlideStart?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition ends */

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -434,10 +434,13 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
   }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
   (0, _Picker.usePublicMethods)(ref, {
+    rootRef: inline ? treeViewRef : null,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleClean = (0, _react.useCallback)(function (event) {
     var target = event.target; // exclude searchBar
 
@@ -655,7 +658,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, style) : {};
     return /*#__PURE__*/_react.default.createElement("div", {
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? (0, _utils.mergeRefs)(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       role: "tree",
       "aria-multiselectable": true,
       className: classes,

package/cjs/CheckTreePicker/utils.d.ts

@@ -19,7 +19,7 @@ export interface TreeNodesType {
     [key: string]: TreeNodeType;
 }
 export declare function isEveryChildChecked(nodes: TreeNodesType, parent: TreeNodeType): boolean;
-export declare function isSomeChildChecked(nodes: TreeNodesType, parent: TreeNodeType): boolean;
+export declare function isSomeChildChecked(nodes: TreeNodesType, parent: TreeNodeType, childrenKey: string): boolean;
 export declare function isSomeNodeHasChildren(data: any[], childrenKey: string): boolean;
 /**
  * is all siblings nodes is uncheckable

package/cjs/CheckTreePicker/utils.js

@@ -41,18 +41,19 @@ function isEveryChildChecked(nodes, parent) {
   });
 }
 
-function isSomeChildChecked(nodes, parent) {
+function isSomeChildChecked(nodes, parent, childrenKey) {
   if ((0, _isNil2.default)(nodes[parent.refKey])) {
     return false;
   }
 
   var children = (0, _treeUtils.getChildrenByFlattenNodes)(nodes, parent);
+  return children.some(function (child) {
+    var _child$childrenKey;
 
-  if (!children.length) {
-    return nodes[parent.refKey].check;
-  }
+    if ((child === null || child === void 0 ? void 0 : (_child$childrenKey = child[childrenKey]) === null || _child$childrenKey === void 0 ? void 0 : _child$childrenKey.length) > 0) {
+      return isSomeChildChecked(nodes, child, childrenKey);
+    }
 
-  return children.some(function (child) {
     return nodes[child.refKey].check;
   });
 }
@@ -215,7 +216,7 @@ function getNodeCheckState(_ref) {
     return _utils.CHECK_STATE.CHECK;
   }
 
-  if (isSomeChildChecked(nodes, node)) {
+  if (isSomeChildChecked(nodes, node, childrenKey)) {
     nodes[node.refKey].checkAll = false;
     return _utils.CHECK_STATE.INDETERMINATE;
   }

package/cjs/CheckboxGroup/CheckboxGroup.js

@@ -83,10 +83,10 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, [disabled, handleChange, inline, isControlled, name, plaintext, readOnly, value]);
   return /*#__PURE__*/_react.default.createElement(_CheckboxGroupContext.CheckboxGroupContext.Provider, {
     value: contextValue
-  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
+  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
     ref: ref,
     localeKey: "notSelected"
-  }, value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     role: "group",
     className: classes

package/cjs/DateRangePicker/Calendar.d.ts

@@ -3,7 +3,7 @@ import { CalendarProps as CalendarCoreProps } from '../Calendar/Calendar';
 import { ValueType } from './types';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 import { DatePickerLocale } from '../locales';
-declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate';
+declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'onToggleMeridian';
 export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, OmitCalendarCoreTypes> {
     calendarDate?: ValueType;
     disabledDate?: (date: Date, selectValue: ValueType, type: string) => boolean;
@@ -15,6 +15,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     locale?: DatePickerLocale;
     onChangeCalendarDate?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
+    onToggleMeridian: (index: number, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     showOneCalendar?: boolean;

package/cjs/DateRangePicker/Calendar.js

@@ -21,6 +21,14 @@ var _Calendar = _interopRequireWildcard(require("../Calendar/Calendar"));
 
 var _utils = require("../utils");
 
+/**
+ * Omit the time in the date, which is used to compare and judge the date.
+ * eg: isAfter/isBefore
+ */
+function omitTime(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Calendar.default : _props$as,
@@ -34,10 +42,11 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
       onChangeCalendarTime = props.onChangeCalendarTime,
+      onToggleMeridian = props.onToggleMeridian,
       showOneCalendar = props.showOneCalendar,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -56,6 +65,9 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
     onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
+  var handleToggleMeridian = (0, _react.useCallback)(function (event) {
+    onToggleMeridian(index, event);
+  }, [index, onToggleMeridian]);
   var toggleMonthDropdown = (0, _react.useCallback)(function () {
     setCalendarState(calendarState === _Calendar.CalendarState.DROP_MONTH ? undefined : _Calendar.CalendarState.DROP_MONTH);
   }, [calendarState]);
@@ -75,22 +87,30 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
   var disabledBackward = (0, _react.useCallback)(function () {
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1));
-
+    // Do not disable the Backward button on the first calendar.
     if (index === 0) {
       return false;
     }
 
+    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index]);
   var disabledForward = (0, _react.useCallback)(function () {
-    if (showOneCalendar) return false;
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1));
+    // If only one calendar is displayed, do not disable
+    if (showOneCalendar) {
+      return false;
+    } // Do not disable the Forward button on the second calendar.
+
 
     if (index === 1) {
       return false;
     }
 
+    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(omitTime(calendarDate[0]), 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
@@ -126,6 +146,7 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onToggleMonthDropdown: toggleMonthDropdown,
     onToggleTimeDropdown: toggleTimeDropdown,
+    onToggleMeridian: handleToggleMeridian,
     calendarDate: getCalendarDate(),
     ref: ref
   }));

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -19,6 +19,8 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     showWeekNumbers?: boolean;
     /** Show only one calendar select */
     showOneCalendar?: boolean;
+    /** Meridian format */
+    showMeridian?: boolean;
     /** Set default date for calendar */
     defaultCalendarValue?: ValueType;
     /** The character that separates two dates */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -78,6 +78,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       _props$showOneCalenda = props.showOneCalendar,
       showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
       showWeekNumbers = props.showWeekNumbers,
+      showMeridian = props.showMeridian,
       style = props.style,
       toggleAs = props.toggleAs,
       valueProp = props.value,
@@ -90,7 +91,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", "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", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -370,6 +371,24 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     handleChangeCalendarDate(index, date);
   }, [handleChangeCalendarDate]);
+  /**
+   * The callback triggered when PM/AM is switched.
+   */
+
+  var handleToggleMeridian = (0, _react.useCallback)(function (index) {
+    var next = Array.from(calendarDate);
+    var clonedDate = new Date(next[index].valueOf());
+
+    var hours = _utils.DateUtils.getHours(clonedDate);
+
+    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
+    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);
+    setCalendarDate(next); // If the value already exists, update the value again.
+
+    if (selectValue.length === 2) {
+      setSelectValue(next);
+    }
+  }, [calendarDate, selectValue]);
   /**
    * Toolbar operation callback function
    */
@@ -535,10 +554,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showOneCalendar: showOneCalendar,
       showWeekNumbers: showWeekNumbers,
       value: selectValue,
+      showMeridian: showMeridian,
       onChangeCalendarDate: handleChangeCalendarDate,
       onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
-      onSelect: handleSelectValueChange
+      onSelect: handleSelectValueChange,
+      onToggleMeridian: handleToggleMeridian
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       className: classes,
@@ -634,11 +655,12 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   isoWeek: _propTypes.default.bool,
   oneTap: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
-  showWeekNumbers: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   onOk: _propTypes.default.func,
   disabledDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
+  showWeekNumbers: _propTypes.default.bool,
+  showMeridian: _propTypes.default.bool,
   showOneCalendar: _propTypes.default.bool
 });
 var _default = DateRangePicker;

package/cjs/Dropdown/DropdownItem.js

@@ -41,6 +41,8 @@ var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
 
 var _DropdownState = require("./DropdownState");
 
+var _useRenderDropdownItem = require("./useRenderDropdownItem");
+
 /**
  * The <Dropdown.Item> API
  * When used inside <Sidenav>, renders a <TreeviewItem>
@@ -112,15 +114,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       };
     }
   }, [internalId, selected, dispatch]);
-  var renderDropdownItem = (0, _react.useCallback)(function (ui) {
-    if (Component === 'li') {
-      return ui;
-    }
-
-    return /*#__PURE__*/_react.default.createElement("li", {
-      role: "none presentation"
-    }, ui);
-  }, [Component]);
+  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({
@@ -129,18 +123,19 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
 
   if (divider) {
-    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem((0, _extends2.default)({
       ref: ref,
-      role: "separator",
+      role: 'separator',
       className: merge(prefix('divider'), className)
-    }, restProps)));
+    }, restProps));
   }
 
   if (panel) {
-    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem((0, _extends2.default)({
       ref: ref,
-      className: merge(prefix('panel'), className)
-    }, restProps), children));
+      className: merge(prefix('panel'), className),
+      children: children
+    }, restProps));
   }
 
   if (navbar) {
@@ -195,12 +190,14 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem((0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuitemRef),
       className: classes
-    }, menuitem, dataAttributes, restProps), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-      className: prefix('menu-icon')
-    }), children));
+    }, menuitem, dataAttributes, restProps, {
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), children)
+    }));
   });
 });
 

package/cjs/Dropdown/useRenderDropdownItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function useRenderDropdownItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType) => JSX.Element;

package/cjs/Dropdown/useRenderDropdownItem.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports.useRenderDropdownItem = useRenderDropdownItem;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function useRenderDropdownItem(Component) {
+  return (0, _react.useCallback)(function (props, OverrideComponent) {
+    if (Component === 'li') {
+      if (OverrideComponent) {
+        return /*#__PURE__*/_react.default.createElement("li", {
+          role: "none presentation"
+        }, /*#__PURE__*/_react.default.createElement(OverrideComponent, props));
+      }
+
+      return /*#__PURE__*/_react.default.createElement(Component, props);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("li", {
+      role: "none presentation"
+    }, /*#__PURE__*/_react.default.createElement(Component, props));
+  }, [Component]);
+}

package/cjs/InputPicker/InputPicker.js

@@ -696,7 +696,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper
     // for fixing margin-left on tags from 2nd line on
 
-    if (multi) {
+    if (multi && hasValue) {
       plaintextProps.style = {
         marginLeft: -6
       };

package/cjs/MaskedInput/MaskedInput.d.ts

@@ -1,43 +1,6 @@
-import React from 'react';
-import { MaskType, MaskFunctionType, ConfigType } from './types';
-/**
- * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
- */
-interface TextMaskProps {
-    /**
-     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
-     */
-    guide?: boolean;
-    /**
-     * `mask` is an array or a function that defines how the user input is going to be masked.
-     */
-    mask?: MaskType | MaskFunctionType | boolean;
-    /**
-     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
-     * in place of the regular placeholder when the input element value is empty.
-     */
-    showMask?: boolean;
-    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
-    placeholderChar?: string;
-    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
-    keepCharPositions?: boolean;
-    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
-    pipe?: (conformedValue: string, config: ConfigType) => string;
-}
-export declare type MaskedInputProps = TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-};
-declare const MaskedInput: React.ForwardRefExoticComponent<TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
+import { InputProps } from '../Input';
+import type { TextMaskProps } from './TextMask';
+import { RsRefForwardingComponent } from '../@types/common';
+export declare type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+declare const MaskedInput: RsRefForwardingComponent<'input', MaskedInputProps>;
 export default MaskedInput;