rsuite 5.54.0 → 5.55.0

package/esm/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/esm/Calendar/CalendarContainer.js

@@ -44,12 +44,13 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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 = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -134,6 +135,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect: onSelect,
     cellClassName: cellClassName,
     renderCell: renderCell,
+    renderCellOnPicker: renderCellOnPicker,
     showWeekNumbers: showWeekNumbers,
     inline: inline
   };

package/esm/Calendar/TableCell.js

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import partial from 'lodash/partial';
-import { DateUtils, useClassNames, useCustom } from '../utils';
-import { isSameDay } from '../utils/dateUtils';
+import { useClassNames, useCustom } from '../utils';
+import { isSameDay, getDate } from '../utils/dateUtils';
 import { useCalendarContext } from './CalendarContext';
 import { getAriaLabel } from './utils';
 var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -25,6 +25,7 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMouseMove = _useCalendarContext.onMouseMove,
     cellClassName = _useCalendarContext.cellClassName,
     renderCell = _useCalendarContext.renderCell,
+    renderCellOnPicker = _useCalendarContext.renderCellOnPicker,
     overrideLocale = _useCalendarContext.locale;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
@@ -58,9 +59,9 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: onSelect ? partial(onSelect, date, disabled) : undefined
   }, rest), /*#__PURE__*/React.createElement("div", {
     className: prefix('cell-content')
-  }, /*#__PURE__*/React.createElement("span", {
+  }, renderCellOnPicker ? renderCellOnPicker(date) : /*#__PURE__*/React.createElement("span", {
     className: prefix('cell-day')
-  }, DateUtils.getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
+  }, getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
 });
 TableCell.displayName = 'CalendarTableCell';
 export default TableCell;

package/esm/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/esm/Cascader/DropdownMenu.js

@@ -65,7 +65,9 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (activeItem) {
         var position = getPosition(activeItem, column);
         // Let the active option scroll into view.
-        scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        if (position !== null && position !== void 0 && position.top) {
+          scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        }
       }
     });
   }, [prefix]);

package/esm/Cascader/TreeView.js

@@ -65,7 +65,9 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (activeItem) {
         var position = getPosition(activeItem, column);
         // Let the active option scroll into view.
-        scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        if (position !== null && position !== void 0 && position.top) {
+          scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        }
       }
     });
   }, [prefix]);

package/esm/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/esm/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/esm/DatePicker/DatePicker.js

@@ -95,7 +95,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
-    restProps = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -451,6 +452,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       format: formatStr,
       isoWeek: isoWeek,
       calendarDate: calendarDate,
+      renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
       onSelect: handleSelect,
@@ -576,7 +578,6 @@ DatePicker.propTypes = _extends({}, pickerPropTypes, {
   onToggleMonthDropdown: PropTypes.func,
   onToggleTimeDropdown: PropTypes.func,
   oneTap: PropTypes.bool,
-  panelContainerRef: PropTypes.any,
   ranges: PropTypes.array,
   showMeridian: PropTypes.bool,
   showWeekNumbers: PropTypes.bool,

package/esm/DateRangePicker/DateRangePicker.js

@@ -166,7 +166,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
+    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
       var _startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
@@ -441,7 +441,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     var value = range.value;
     setCalendarDateRange({
-      dateRange: value
+      dateRange: value,
+      eventName: 'shortcutSelection'
     });
     if (closeOverlay) {
       setDateRange(event, value, closeOverlay);

package/esm/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/esm/InputNumber/InputNumber.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
@@ -11,7 +11,7 @@ import InputGroup from '../InputGroup/InputGroup';
 import InputGroupAddon from '../InputGroup/InputGroupAddon';
 import Input from '../Input';
 import Button from '../Button';
-import { partitionHTMLProps, createChainedFunction, useClassNames, useControlled, KEY_VALUES } from '../utils';
+import { partitionHTMLProps, createChainedFunction, useClassNames, useControlled, useEventCallback, KEY_VALUES } from '../utils';
 import { oneOf } from '../internals/propTypes';
 /**
  * Check if the value is a number.
@@ -79,6 +79,7 @@ var InputNumber = /*#__PURE__*/React.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,
@@ -96,12 +97,17 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
     onChange = props.onChange,
     onWheel = props.onWheel,
-    restProps = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useControlled(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1];
+  var _useState = useState(false),
+    isFocused = _useState[0],
+    setIsFocused = _useState[1];
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -111,13 +117,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     htmlInputProps = _partitionHTMLProps[0],
     rest = _partitionHTMLProps[1];
   var inputRef = useRef();
-  var handleChangeValue = useCallback(function (currentValue, event) {
-    if (currentValue !== value) {
-      setValue(currentValue);
-      onChange === null || onChange === void 0 ? void 0 : onChange(currentValue, event);
-    }
-  }, [onChange, setValue, value]);
-  var getSafeValue = useCallback(function (value) {
+  var getSafeValue = function getSafeValue(value) {
     if (!Number.isNaN(value)) {
       if (+value > max) {
         value = max;
@@ -129,28 +129,34 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value = '';
     }
     return value.toString();
-  }, [max, min]);
+  };
+  var handleChangeValue = 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 = useCallback(function (event) {
+  var handleStepUp = 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 = useCallback(function (event) {
+  var handleStepDown = 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 = useCallback(function (event) {
+  var handleKeyDown = useEventCallback(function (event) {
     switch (event.key) {
       case KEY_VALUES.UP:
         event.preventDefault();
@@ -173,8 +179,8 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
         break;
     }
-  }, [handleStepUp, handleStepDown, minProp, maxProp, handleChangeValue, getSafeValue]);
-  var handleWheel = useCallback(function (event) {
+  });
+  var handleWheel = useEventCallback(function (event) {
     if (!scrollable) {
       event.preventDefault();
       return;
@@ -190,18 +196,19 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
     onWheel === null || onWheel === void 0 ? void 0 : onWheel(event);
-  }, [disabled, handleStepDown, handleStepUp, onWheel, readOnly, scrollable]);
-  var handleChange = useCallback(function (value, event) {
+  });
+  var handleChange = useEventCallback(function (value, event) {
     if (!/^-?(?:\d+)?(\.)?\d*$/.test(value) && value !== '') {
       return;
     }
     handleChangeValue(value, event);
-  }, [handleChangeValue]);
-  var handleBlur = useCallback(function (event) {
+  });
+  var handleBlur = 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);
+  });
   useEffect(function () {
     var wheelListener;
     if (inputRef.current) {
@@ -214,19 +221,31 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
       (_wheelListener = wheelListener) === null || _wheelListener === void 0 ? void 0 : _wheelListener.off();
     };
   }, [handleWheel, scrollable]);
+  var renderValue = function renderValue() {
+    if (isNil(value)) {
+      return '';
+    }
+    if (isFocused) {
+      return value;
+    }
+    return formatter ? formatter(value) : value;
+  };
   var input = /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
-    type: "number",
+    ref: plaintext ? ref : undefined,
+    inputRef: inputRef,
     autoComplete: "off",
+    inputMode: "numeric",
     step: step,
-    inputRef: inputRef,
-    onChange: handleChange,
-    onBlur: createChainedFunction(handleBlur, htmlInputProps === null || htmlInputProps === void 0 ? void 0 : htmlInputProps.onBlur),
-    value: isNil(value) ? '' : "" + value,
+    value: renderValue(),
     disabled: disabled,
     readOnly: readOnly,
     plaintext: plaintext,
-    ref: plaintext ? ref : undefined,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    onBlur: createChainedFunction(handleBlur, onBlur),
+    onFocus: createChainedFunction(function () {
+      return setIsFocused(true);
+    }, onFocus)
   }));
   if (plaintext) {
     return input;

package/esm/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/esm/Pagination/LimitPicker.js

@@ -0,0 +1,44 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useRef } from 'react';
+import SelectPicker from '../SelectPicker';
+import { tplTransform } from '../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 = _objectWithoutPropertiesLoose(props, ["disabled", "limitOptions", "locale", "limit", "onChangeLimit", "size", "prefix"]);
+  var containerRef = useRef(null);
+  var disabledPicker = typeof disabled === 'function' ? disabled('picker') : Boolean(disabled);
+  var formatlimitOptions = limitOptions.map(function (item) {
+    return {
+      value: item,
+      label: locale.limit && tplTransform(locale.limit, item)
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('limit'),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(SelectPicker, _extends({}, 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;
+    }
+  })));
+};
+export default LimitPicker;

package/esm/Pagination/Pagination.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import More from '@rsuite/icons/legacy/More';
 import PagePrevious from '@rsuite/icons/legacy/PagePrevious';
@@ -55,13 +55,13 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix;
   var _useCustom = useCustom('Pagination', overrideLocale),
     locale = _useCustom.locale;
-  var renderItem = useCallback(function (key, itemProps) {
+  var renderItem = function renderItem(key, itemProps) {
     var eventKey = itemProps.eventKey,
       disabled = itemProps.disabled,
       itemRest = _objectWithoutPropertiesLoose(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.createElement(PaginationButton, _extends({
@@ -71,10 +71,10 @@ var Pagination = /*#__PURE__*/React.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;

package/esm/Pagination/PaginationButton.js

@@ -1,10 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import Ripple from '../internals/Ripple';
-import { useClassNames, createChainedFunction } from '../utils';
+import { useClassNames, useEventCallback, createChainedFunction } from '../utils';
 var PaginationButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'button' : _props$as,
@@ -26,12 +25,12 @@ var PaginationButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     active: active,
     disabled: disabled
   }));
-  var handleClick = useCallback(function (event) {
+  var handleClick = useEventCallback(function (event) {
     if (disabled) {
       return;
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
-  }, [disabled, eventKey, onSelect]);
+  });
   var asProps = {};
   if (typeof Component !== 'string') {
     asProps.eventKey = eventKey;
@@ -46,17 +45,4 @@ var PaginationButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children, !disabled ? /*#__PURE__*/React.createElement(Ripple, null) : null);
 });
 PaginationButton.displayName = 'PaginationButton';
-PaginationButton.propTypes = {
-  classPrefix: PropTypes.string,
-  eventKey: PropTypes.any,
-  onSelect: PropTypes.func,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  active: PropTypes.bool,
-  className: PropTypes.string,
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  style: PropTypes.object,
-  renderItem: PropTypes.func
-};
 export default PaginationButton;