rsuite 5.54.0 → 5.55.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [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/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/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,
@@ -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);

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;

package/cjs/InputNumber/InputNumber.js

@@ -85,6 +85,7 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'input-number' : _props$classPrefix,
     disabled = props.disabled,
+    formatter = props.formatter,
     readOnly = props.readOnly,
     plaintext = props.plaintext,
     valueProp = props.value,
@@ -102,12 +103,17 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
     onChange = props.onChange,
     onWheel = props.onWheel,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "disabled", "readOnly", "plaintext", "value", "defaultValue", "size", "prefix", "postfix", "step", "buttonAppearance", "min", "max", "scrollable", "onChange", "onWheel"]);
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "disabled", "formatter", "readOnly", "plaintext", "value", "defaultValue", "size", "prefix", "postfix", "step", "buttonAppearance", "min", "max", "scrollable", "onChange", "onWheel", "onBlur", "onFocus"]);
   var min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;
   var max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1];
+  var _useState = (0, _react.useState)(false),
+    isFocused = _useState[0],
+    setIsFocused = _useState[1];
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -117,13 +123,7 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     htmlInputProps = _partitionHTMLProps[0],
     rest = _partitionHTMLProps[1];
   var inputRef = (0, _react.useRef)();
-  var handleChangeValue = (0, _react.useCallback)(function (currentValue, event) {
-    if (currentValue !== value) {
-      setValue(currentValue);
-      onChange === null || onChange === void 0 ? void 0 : onChange(currentValue, event);
-    }
-  }, [onChange, setValue, value]);
-  var getSafeValue = (0, _react.useCallback)(function (value) {
+  var getSafeValue = function getSafeValue(value) {
     if (!Number.isNaN(value)) {
       if (+value > max) {
         value = max;
@@ -135,28 +135,34 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       value = '';
     }
     return value.toString();
-  }, [max, min]);
+  };
+  var handleChangeValue = (0, _utils.useEventCallback)(function (currentValue, event) {
+    if (currentValue !== value) {
+      setValue(currentValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(currentValue, event);
+    }
+  });
 
   // Increment value by step
-  var handleStepUp = (0, _react.useCallback)(function (event) {
+  var handleStepUp = (0, _utils.useEventCallback)(function (event) {
     var val = +(value || 0);
     var bit = decimals(val, step);
     handleChangeValue(getSafeValue((val + step).toFixed(bit)), event);
-  }, [getSafeValue, handleChangeValue, step, value]);
+  });
 
   // Decrement value by step
-  var handleStepDown = (0, _react.useCallback)(function (event) {
+  var handleStepDown = (0, _utils.useEventCallback)(function (event) {
     var val = +(value || 0);
     var bit = decimals(val, step);
     handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
-  }, [getSafeValue, handleChangeValue, step, value]);
+  });
 
   // Disables step up/down button when
   // - InputNumber is disabled/readonly
   // - value reaches max/min limits
   var stepUpDisabled = disabled || readOnly || valueReachesMax(value, max);
   var stepDownDisabled = disabled || readOnly || valueReachesMin(value, min);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
+  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {
     switch (event.key) {
       case _utils.KEY_VALUES.UP:
         event.preventDefault();
@@ -179,8 +185,8 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         }
         break;
     }
-  }, [handleStepUp, handleStepDown, minProp, maxProp, handleChangeValue, getSafeValue]);
-  var handleWheel = (0, _react.useCallback)(function (event) {
+  });
+  var handleWheel = (0, _utils.useEventCallback)(function (event) {
     if (!scrollable) {
       event.preventDefault();
       return;
@@ -196,18 +202,19 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
     }
     onWheel === null || onWheel === void 0 ? void 0 : onWheel(event);
-  }, [disabled, handleStepDown, handleStepUp, onWheel, readOnly, scrollable]);
-  var handleChange = (0, _react.useCallback)(function (value, event) {
+  });
+  var handleChange = (0, _utils.useEventCallback)(function (value, event) {
     if (!/^-?(?:\d+)?(\.)?\d*$/.test(value) && value !== '') {
       return;
     }
     handleChangeValue(value, event);
-  }, [handleChangeValue]);
-  var handleBlur = (0, _react.useCallback)(function (event) {
+  });
+  var handleBlur = (0, _utils.useEventCallback)(function (event) {
     var _event$target;
     var targetValue = Number.parseFloat((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
     handleChangeValue(getSafeValue(targetValue), event);
-  }, [getSafeValue, handleChangeValue]);
+    setIsFocused(false);
+  });
   (0, _react.useEffect)(function () {
     var wheelListener;
     if (inputRef.current) {
@@ -220,19 +227,31 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       (_wheelListener = wheelListener) === null || _wheelListener === void 0 ? void 0 : _wheelListener.off();
     };
   }, [handleWheel, scrollable]);
+  var renderValue = function renderValue() {
+    if ((0, _isNil.default)(value)) {
+      return '';
+    }
+    if (isFocused) {
+      return value;
+    }
+    return formatter ? formatter(value) : value;
+  };
   var input = /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
-    type: "number",
+    ref: plaintext ? ref : undefined,
+    inputRef: inputRef,
     autoComplete: "off",
+    inputMode: "numeric",
     step: step,
-    inputRef: inputRef,
-    onChange: handleChange,
-    onBlur: (0, _utils.createChainedFunction)(handleBlur, htmlInputProps === null || htmlInputProps === void 0 ? void 0 : htmlInputProps.onBlur),
-    value: (0, _isNil.default)(value) ? '' : "" + value,
+    value: renderValue(),
     disabled: disabled,
     readOnly: readOnly,
     plaintext: plaintext,
-    ref: plaintext ? ref : undefined,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),
+    onFocus: (0, _utils.createChainedFunction)(function () {
+      return setIsFocused(true);
+    }, onFocus)
   }));
   if (plaintext) {
     return input;

package/cjs/Pagination/LimitPicker.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { type SelectPickerProps } from '../SelectPicker';
+import { PaginationLocale } from '../locales';
+import { OnChangeCallback, TypeAttributes } from '../@types/common';
+interface LimitPickerProps extends Omit<SelectPickerProps<any>, 'locale' | 'disabled' | 'data'> {
+    disabled?: boolean | ((eventKey: number | string) => boolean);
+    limitOptions: number[];
+    locale: PaginationLocale;
+    limit: number;
+    size?: TypeAttributes.Size;
+    prefix: (input: string) => string;
+    onChangeLimit: OnChangeCallback<any>;
+}
+declare const LimitPicker: (props: LimitPickerProps) => JSX.Element;
+export default LimitPicker;

package/cjs/Pagination/LimitPicker.js

@@ -0,0 +1,51 @@
+'use client';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _SelectPicker = _interopRequireDefault(require("../SelectPicker"));
+var _utils = require("../utils");
+var LimitPicker = function LimitPicker(props) {
+  var disabled = props.disabled,
+    limitOptions = props.limitOptions,
+    locale = props.locale,
+    limit = props.limit,
+    onChangeLimit = props.onChangeLimit,
+    size = props.size,
+    prefix = props.prefix,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["disabled", "limitOptions", "locale", "limit", "onChangeLimit", "size", "prefix"]);
+  var containerRef = (0, _react.useRef)(null);
+  var disabledPicker = typeof disabled === 'function' ? disabled('picker') : Boolean(disabled);
+  var formatlimitOptions = limitOptions.map(function (item) {
+    return {
+      value: item,
+      label: locale.limit && (0, _utils.tplTransform)(locale.limit, item)
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('limit'),
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_SelectPicker.default, (0, _extends2.default)({}, rest, {
+    size: size,
+    cleanable: false,
+    searchable: false,
+    placement: "topStart",
+    data: formatlimitOptions,
+    value: limit,
+    onChange: onChangeLimit,
+    menuStyle: {
+      minWidth: 'auto'
+    },
+    disabled: disabledPicker,
+    container: function container() {
+      return containerRef.current;
+    }
+  })));
+};
+var _default = LimitPicker;
+exports.default = _default;

package/cjs/Pagination/Pagination.js

@@ -2,13 +2,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.default = void 0;
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _More = _interopRequireDefault(require("@rsuite/icons/legacy/More"));
 var _PagePrevious = _interopRequireDefault(require("@rsuite/icons/legacy/PagePrevious"));
@@ -61,13 +60,13 @@ var Pagination = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix;
   var _useCustom = (0, _utils.useCustom)('Pagination', overrideLocale),
     locale = _useCustom.locale;
-  var renderItem = (0, _react.useCallback)(function (key, itemProps) {
+  var renderItem = function renderItem(key, itemProps) {
     var eventKey = itemProps.eventKey,
       disabled = itemProps.disabled,
       itemRest = (0, _objectWithoutPropertiesLoose2.default)(itemProps, ["eventKey", "disabled"]);
-    var disabledItem = disabled;
+    var disabledButton = disabled;
     if (typeof disabledProp !== 'undefined') {
-      disabledItem = typeof disabledProp === 'function' ? disabledProp(eventKey) : disabledProp;
+      disabledButton = typeof disabledProp === 'function' ? disabledProp(eventKey) : disabledProp;
     }
     var title = (locale === null || locale === void 0 ? void 0 : locale[key]) || eventKey;
     return /*#__PURE__*/_react.default.createElement(_PaginationButton.default, (0, _extends2.default)({
@@ -77,10 +76,10 @@ var Pagination = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       key: key + "-" + eventKey,
       eventKey: eventKey,
       as: linkAs,
-      disabled: disabledItem,
-      onSelect: disabledItem ? undefined : onSelect
+      disabled: disabledButton,
+      onSelect: disabledButton ? undefined : onSelect
     }));
-  }, [disabledProp, linkAs, linkProps, locale, onSelect]);
+  };
   var renderFirst = function renderFirst() {
     if (!first) {
       return null;