rsuite 5.54.0 → 5.55.1

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [5.55.1](https://github.com/rsuite/rsuite/compare/v5.55.0...v5.55.1) (2024-03-08)
+
+
+### Bug Fixes
+
+* **Calendar:** fix misalignment of month selection menu layout ([#3655](https://github.com/rsuite/rsuite/issues/3655)) ([eff9702](https://github.com/rsuite/rsuite/commit/eff9702977d893caa0c701dba03b19a44d56799a))
+* **DatePicker,DateRangePicker:** fix the problem of padding ([#3659](https://github.com/rsuite/rsuite/issues/3659)) ([47f84f4](https://github.com/rsuite/rsuite/commit/47f84f4a3d2e3d4bd716a40ae78cb792ac779380))
+* **Message:** fix the z-index issue of Message in full screen state ([#3658](https://github.com/rsuite/rsuite/issues/3658)) ([f899b92](https://github.com/rsuite/rsuite/commit/f899b9254b694e61306ab096d324d19870bc9709))
+* **nav:** default appearance doesn't show an active background when focused ([#3654](https://github.com/rsuite/rsuite/issues/3654)) ([3dcf943](https://github.com/rsuite/rsuite/commit/3dcf943a8e6811f4369ed858fba671e7783ef6f7))
+
+
+
+# [5.55.0](https://github.com/rsuite/rsuite/compare/v5.54.0...v5.55.0) (2024-03-01)
+
+
+### Bug Fixes
+
+* **DateRangePicker:** fix time picker does not update when clicking the shortcut item ([#3647](https://github.com/rsuite/rsuite/issues/3647)) ([00c9eaa](https://github.com/rsuite/rsuite/commit/00c9eaa9b246da027c729fb3cf3639001473d4fe))
+* **Pagination:** fix SelectPicker rendering misalignment ([#3643](https://github.com/rsuite/rsuite/issues/3643)) ([044c48f](https://github.com/rsuite/rsuite/commit/044c48f3e358f93bc7568bc83242e7ea6348825e))
+* **Slider,RangeSlider:** fix touch event not working ([#3653](https://github.com/rsuite/rsuite/issues/3653)) ([3d57ebc](https://github.com/rsuite/rsuite/commit/3d57ebcaebafa3207b84987ba7e80cd4c38a2741))
+
+
+### Features
+
+* added czech locale ([#3649](https://github.com/rsuite/rsuite/issues/3649)) ([f589257](https://github.com/rsuite/rsuite/commit/f58925757314da09dd2a2ee0706321860a32ab13))
+* **DatePicker:** add support `renderCell` on `<DatePicker>` ([#3641](https://github.com/rsuite/rsuite/issues/3641)) ([b63d1a3](https://github.com/rsuite/rsuite/commit/b63d1a37b0289383dbe0099481609097e1c4a436))
+* **InputNumber:** add support for `formatter` on `<InputNumber>` ([#3642](https://github.com/rsuite/rsuite/issues/3642)) ([d457d3a](https://github.com/rsuite/rsuite/commit/d457d3a67d929fa02780e4d012844756361c7c68))
+
+
+
 # [5.54.0](https://github.com/rsuite/rsuite/compare/v5.53.2...v5.54.0) (2024-02-22)
 
 

package/Calendar/styles/index.css

@@ -1763,6 +1763,7 @@
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -1784,6 +1785,8 @@
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
+  width: 30px;
+  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;

package/Calendar/styles/index.less

@@ -503,7 +503,7 @@
   &-cell {
     display: inline-block;
     float: left;
-    // width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
+    width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
     margin: 1px;
     text-align: center;
     vertical-align: middle;
@@ -516,6 +516,8 @@
 
   &-cell-content {
     .picker-calendar-cell-content();
+    width: @calendar-in-menu-content-side-length;
+    height: @calendar-in-menu-content-side-length;
   }
 
   &-cell:not(&-cell-active).disabled &-cell-content {

package/DatePicker/styles/index.css

@@ -2484,6 +2484,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2505,6 +2506,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
+  width: 30px;
+  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -3995,6 +3998,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date-predefined .rs-btn {
   display: block;
 }
+.rs-picker-popup.rs-picker-popup-date {
+  padding: 0;
+}
 .rs-picker-popup .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -4034,7 +4040,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content,
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content {
   width: 30px;
   height: 30px;
@@ -4108,7 +4113,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   height: 227px;
 }
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
-  height: 214px;
+  height: 198px;
   padding-bottom: 184px;
 }
 

package/DatePicker/styles/index.less

@@ -65,6 +65,10 @@
   // The padding used when show week numbers.
   @calendar-padding-x-condensed: 12px;
 
+  &&-date {
+    padding: 0;
+  }
+
   .rs-picker-toolbar {
     max-width: 100%;
 
@@ -118,7 +122,6 @@
       }
     }
 
-    .rs-calendar-month-dropdown-cell-content,
     .rs-calendar-table-cell-content {
       width: @calendar-in-menu-content-side-length;
       height: @calendar-in-menu-content-side-length;
@@ -159,7 +162,7 @@
     }
 
     .rs-calendar-time-dropdown-column > ul {
-      height: 214px;
+      height: 198px;
       padding-bottom: 184px;
     }
   }

package/DateRangePicker/styles/index.css

@@ -2484,6 +2484,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2505,6 +2506,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
+  width: 30px;
+  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -3990,6 +3993,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date-predefined .rs-btn {
   display: block;
 }
+.rs-picker-popup.rs-picker-popup-date {
+  padding: 0;
+}
 .rs-picker-popup .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -4029,7 +4035,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content,
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content {
   width: 30px;
   height: 30px;
@@ -4103,7 +4108,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   height: 227px;
 }
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
-  height: 214px;
+  height: 198px;
   padding-bottom: 184px;
 }
 .rs-stack {
@@ -4124,35 +4129,38 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-daterange > .rs-input-group.rs-input-group-inside .rs-input {
   padding-right: 0;
 }
-.rs-picker-daterange-menu .rs-calendar {
+.rs-picker-popup.rs-picker-popup-daterange {
+  padding: 0;
+}
+.rs-picker-popup .rs-calendar {
   display: inline-block;
   height: 274px;
   padding-bottom: 12px;
 }
-.rs-picker-daterange-menu .rs-calendar:first-child {
+.rs-picker-popup .rs-calendar:first-child {
   border-right: 1px solid #e5e5ea;
   border-right: 1px solid var(--rs-border-primary);
 }
-.rs-picker-daterange-menu .rs-calendar-header {
+.rs-picker-popup .rs-calendar-header {
   width: 100%;
   text-align: center;
 }
-.rs-picker-daterange-menu .rs-calendar-header-month-toolbar {
+.rs-picker-popup .rs-calendar-header-month-toolbar {
   float: none;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown {
+.rs-picker-popup .rs-calendar-month-dropdown {
   z-index: 1;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown-list {
+.rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
   max-width: 255px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-calendar-single .rs-calendar {
+.rs-picker-popup .rs-picker-daterange-calendar-single .rs-calendar {
   border: 0;
   display: block;
   margin: auto;

package/DateRangePicker/styles/index.less

@@ -30,7 +30,11 @@
 // Date range Picker
 // ----------------------
 
-.rs-picker-daterange-menu {
+.rs-picker-popup {
+  &&-daterange {
+    padding: 0;
+  }
+
   .rs-calendar {
     display: inline-block;
     height: 274px;

package/Message/styles/index.css

@@ -436,7 +436,7 @@
   left: 0;
   width: 100%;
   border-radius: 0;
-  z-index: 1090;
+  z-index: 3;
 }
 .rs-message-success {
   background-color: #fff;

package/Nav/styles/index.css

@@ -1657,8 +1657,7 @@
 .rs-nav-default .rs-nav-item {
   border-radius: 6px;
 }
-.rs-nav-default .rs-nav-item:hover,
-.rs-nav-default .rs-nav-item:focus {
+.rs-nav-default .rs-nav-item:hover {
   background: #e5e5ea;
   background: var(--rs-navs-bg-hover);
 }

package/Nav/styles/index.less

@@ -156,8 +156,7 @@
   .rs-nav-item {
     border-radius: 6px;
 
-    &:hover,
-    &:focus {
+    &:hover {
       background: var(--rs-navs-bg-hover);
     }
   }

package/Pagination/styles/index.css

@@ -3444,6 +3444,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-pagination-group .rs-pagination {
   vertical-align: middle;
 }
+.rs-pagination-group-limit {
+  position: relative;
+}
 .rs-pagination-group-limit + .rs-pagination-group-total {
   margin-left: 18px;
 }

package/Pagination/styles/pagination-group.less

@@ -25,6 +25,10 @@
     vertical-align: middle;
   }
 
+  &-limit {
+    position: relative;
+  }
+
   // There is a gap between Length Menu and Page info.
   &-limit + &-total {
     margin-left: 18px;

package/Tabs/styles/index.css

@@ -1657,8 +1657,7 @@
 .rs-nav-default .rs-nav-item {
   border-radius: 6px;
 }
-.rs-nav-default .rs-nav-item:hover,
-.rs-nav-default .rs-nav-item:focus {
+.rs-nav-default .rs-nav-item:hover {
   background: #e5e5ea;
   background: var(--rs-navs-bg-hover);
 }

package/cjs/Calendar/CalendarContainer.d.ts

@@ -58,6 +58,10 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     /** Custom rendering cell*/
     renderCell?: (date: Date) => React.ReactNode;
+    /**
+     * Custom rendering cell on the picker
+     */
+    renderCellOnPicker?: (date: Date) => React.ReactNode;
     /** Custom cell classes base on it's date */
     cellClassName?: (date: Date) => string | undefined;
     /** Called when opening the month view */

package/cjs/Calendar/CalendarContainer.js

@@ -50,12 +50,13 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     calendarDateProp = props.calendarDate,
     cellClassName = props.cellClassName,
     renderCell = props.renderCell,
+    renderCellOnPicker = props.renderCellOnPicker,
     renderTitle = props.renderTitle,
     renderToolbar = props.renderToolbar,
     showMeridian = props.showMeridian,
     showWeekNumbers = props.showWeekNumbers,
     inline = props.inline,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "targetId", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "targetId", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderCellOnPicker", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -140,6 +141,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     onSelect: onSelect,
     cellClassName: cellClassName,
     renderCell: renderCell,
+    renderCellOnPicker: renderCellOnPicker,
     showWeekNumbers: showWeekNumbers,
     inline: inline
   };

package/cjs/Calendar/TableCell.js

@@ -30,6 +30,7 @@ var TableCell = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMouseMove = _useCalendarContext.onMouseMove,
     cellClassName = _useCalendarContext.cellClassName,
     renderCell = _useCalendarContext.renderCell,
+    renderCellOnPicker = _useCalendarContext.renderCellOnPicker,
     overrideLocale = _useCalendarContext.locale;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
@@ -63,9 +64,9 @@ var TableCell = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick: onSelect ? (0, _partial.default)(onSelect, date, disabled) : undefined
   }, rest), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('cell-content')
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, renderCellOnPicker ? renderCellOnPicker(date) : /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('cell-day')
-  }, _utils.DateUtils.getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
+  }, (0, _dateUtils.getDate)(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
 });
 TableCell.displayName = 'CalendarTableCell';
 var _default = TableCell;

package/cjs/Calendar/types.d.ts

@@ -13,6 +13,7 @@ export interface CalendarInnerContextValue {
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     renderCell?: (date: Date) => React.ReactNode;
+    renderCellOnPicker?: (date: Date) => React.ReactNode;
     cellClassName?: (date: Date) => string | undefined;
     showWeekNumbers?: boolean;
     inline?: boolean;

package/cjs/Cascader/DropdownMenu.js

@@ -71,7 +71,9 @@ var TreeView = /*#__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 === null || position === void 0 ? void 0 : position.top);
+        if (position !== null && position !== void 0 && position.top) {
+          (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);
+        }
       }
     });
   }, [prefix]);

package/cjs/Cascader/TreeView.js

@@ -71,7 +71,9 @@ var TreeView = /*#__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 === null || position === void 0 ? void 0 : position.top);
+        if (position !== null && position !== void 0 && position.top) {
+          (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);
+        }
       }
     });
   }, [prefix]);

package/cjs/DOMHelper/index.d.ts

@@ -11,43 +11,34 @@ declare const DOMHelper: {
     off: typeof helpers.off;
     WheelHandler: typeof helpers.WheelHandler;
     DOMMouseMoveTracker: typeof helpers.DOMMouseMoveTracker;
-    addClass: (target: Element, className: string) => Element;
-    removeClass: (target: Element, className: string) => Element;
-    hasClass: (target: Element, className: string) => boolean;
-    toggleClass: (target: Element, className: string) => Element;
-    cancelAnimationFramePolyfill: typeof cancelAnimationFrame | typeof clearTimeout;
+    PointerMoveTracker: typeof helpers.PointerMoveTracker;
+    addClass: typeof helpers.addClass;
+    removeClass: typeof helpers.removeClass;
+    hasClass: typeof helpers.hasClass;
+    toggleClass: typeof helpers.toggleClass;
+    cancelAnimationFramePolyfill: typeof cancelAnimationFrame;
     requestAnimationFramePolyfill: typeof requestAnimationFrame | ((callback: (t: number) => void) => NodeJS.Timeout);
     getAnimationEnd: typeof helpers.getAnimationEnd;
-    ownerDocument: (node: Element | null) => Document;
-    ownerWindow: (componentOrElement: Element) => Window;
-    getWindow: (node: any) => Window;
-    getContainer: (container: Element | (() => Element | null) | null, defaultContainer?: Element | undefined) => Element;
+    ownerDocument: typeof helpers.ownerDocument;
+    ownerWindow: typeof helpers.ownerWindow;
+    getWindow: typeof helpers.getWindow;
+    getContainer: typeof helpers.getContainer;
     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 | null) => {
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    } | DOMRect | null;
-    nodeName: (node: Element) => string;
-    getOffsetParent: (node: Element) => Element;
-    getPosition: (node: Element, offsetParent?: Element | undefined, calcMargin?: boolean | undefined) => DOMRect | {
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    } | null;
-    isOverflowing: (container: Element) => boolean;
-    getScrollbarSize: (recalc?: boolean | undefined) => number | void;
-    getHeight: (node: Element | Window, client?: Element | undefined) => number;
-    getWidth: (node: Element | Window, client?: Element | undefined) => number;
+    scrollTop: typeof helpers.scrollTop;
+    scrollLeft: typeof helpers.scrollLeft;
+    getOffset: typeof helpers.getOffset;
+    nodeName: typeof helpers.nodeName;
+    getOffsetParent: typeof helpers.getOffsetParent;
+    getPosition: typeof helpers.getPosition;
+    isOverflowing: typeof helpers.isOverflowing;
+    getScrollbarSize: typeof helpers.getScrollbarSize;
+    getHeight: typeof helpers.getHeight;
+    getWidth: typeof helpers.getWidth;
     isFocusable: typeof helpers.isFocusable;
-    getStyle: (node: Element, property?: string | undefined) => string | CSSStyleDeclaration;
-    removeStyle: (node: Element, keys: string | string[]) => void;
-    addStyle: (node: Element, property: string | Partial<import("dom-lib/esm/addStyle").CSSProperty>, value?: string | number | undefined) => void;
+    getStyle: typeof helpers.getStyle;
+    removeStyle: typeof helpers.removeStyle;
+    addStyle: typeof helpers.addStyle;
     translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number | undefined, y?: number | undefined) => CSSStyleDeclaration;
 };
 export default DOMHelper;

package/cjs/DatePicker/DatePicker.d.ts

@@ -117,6 +117,12 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      * @deprecated
      */
     renderValue?: (value: Date, format: string) => string;
+    /**
+     * Custom rendering calendar cell content.
+     *
+     * @version 5.54.0
+     */
+    renderCell?: (date: Date) => React.ReactNode;
 }
 /**
  * A date picker allows users to select a date from a calendar.

package/cjs/DatePicker/DatePicker.js

@@ -101,7 +101,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
+    renderCell = props.renderCell,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -418,7 +419,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(menuClassName, className);
+    var classes = merge(menuClassName, className, prefix('popup-date'));
     var styles = (0, _extends2.default)({}, menuStyle, {
       left: left,
       top: top
@@ -457,6 +458,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       format: formatStr,
       isoWeek: isoWeek,
       calendarDate: calendarDate,
+      renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
       onSelect: handleSelect,
@@ -582,7 +584,6 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
   onToggleMonthDropdown: _propTypes.default.func,
   onToggleTimeDropdown: _propTypes.default.func,
   oneTap: _propTypes.default.bool,
-  panelContainerRef: _propTypes.default.any,
   ranges: _propTypes.default.array,
   showMeridian: _propTypes.default.bool,
   showWeekNumbers: _propTypes.default.bool,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -172,7 +172,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
+    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
       var _startDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
@@ -447,7 +447,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     var value = range.value;
     setCalendarDateRange({
-      dateRange: value
+      dateRange: value,
+      eventName: 'shortcutSelection'
     });
     if (closeOverlay) {
       setDateRange(event, value, closeOverlay);
@@ -558,7 +559,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(className, menuClassName, prefix('daterange-menu'));
+    var classes = merge(className, menuClassName, prefix('popup-daterange'));
     var panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar
     });

package/cjs/InputNumber/InputNumber.d.ts

@@ -1,29 +1,54 @@
 import React from 'react';
 import { WithAsProps, TypeAttributes, FormControlBaseProps } from '../@types/common';
-export interface InputNumberProps<T = number | string> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
-    /** Button can have different appearances */
+export interface InputNumberProps<T = number | string | null> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
+    /**
+     * Button can have different appearances
+     */
     buttonAppearance?: TypeAttributes.Appearance;
-    /** An input can show that it is disabled */
+    /**
+     * An input can show that it is disabled
+     */
     disabled?: boolean;
-    /** Minimum value */
+    /**
+     * Format the value of the input
+     */
+    formatter?: (value: number | string) => string;
+    /**
+     * Minimum value
+     */
     min?: number;
-    /** Maximum value */
+    /**
+     * Maximum value
+     */
     max?: number;
-    /** The value of each step. can be decimal */
+    /**
+     * The value of each step. can be decimal
+     */
     step?: number;
-    /** Sets the element displayed to the left of the component */
+    /**
+     * Sets the element displayed to the left of the component
+     */
     prefix?: React.ReactNode;
-    /** Sets the element displayed on the right side of the component */
+    /**
+     * Sets the element displayed on the right side of the component
+     */
     postfix?: React.ReactNode;
-    /** An Input can have different sizes */
+    /**
+     * An Input can have different sizes
+     */
     size?: TypeAttributes.Size;
-    /** Whether the value can be changed through the wheel event */
+    /**
+     * Whether the value can be changed through the wheel event
+     */
     scrollable?: boolean;
+    /**
+     * Callback function when wheel event is triggered
+     */
     onWheel?: (event: React.WheelEvent) => void;
 }
 /**
  * The `InputNumber` component is used to enter a numerical value.
  * @see https://rsuitejs.com/components/input-number
  */
-declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps<string | number> & React.RefAttributes<unknown>>;
+declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps<string | number | null> & React.RefAttributes<unknown>>;
 export default InputNumber;