rsuite 5.53.2 → 5.55.0

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/InputPicker/InputPicker.js

@@ -30,6 +30,7 @@ var _Tag = _interopRequireDefault(require("../Tag"));
 var _InputAutosize = _interopRequireDefault(require("./InputAutosize"));
 var _TextBox = _interopRequireDefault(require("./TextBox"));
 var _InputPickerContext = _interopRequireDefault(require("./InputPickerContext"));
+var _Stack = _interopRequireDefault(require("../Stack"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var convertSize = function convertSize(size) {
   switch (size) {
@@ -642,12 +643,12 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (plaintext) {
     var plaintextProps = {};
 
-    // TagPicker has -6px margin-left on the plaintext wrapper
-    // for fixing margin-left on tags from 2nd line on
+    // When multiple selection, the tag is displayed in a stack layout.
     if (multi && hasValue) {
-      plaintextProps.style = {
-        marginLeft: -6
-      };
+      plaintextProps.as = _Stack.default;
+      plaintextProps.spacing = 6;
+      plaintextProps.wrap = true;
+      plaintextProps.childrenRenderMode = 'clone';
     }
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
       localeKey: "notSelected",

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;

package/cjs/Pagination/PaginationButton.js

@@ -1,14 +1,12 @@
 '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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _utils = require("../utils");
 var PaginationButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -32,12 +30,12 @@ var PaginationButton = /*#__PURE__*/_react.default.forwardRef(function (props, r
     active: active,
     disabled: disabled
   }));
-  var handleClick = (0, _react.useCallback)(function (event) {
+  var handleClick = (0, _utils.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;
@@ -52,18 +50,5 @@ var PaginationButton = /*#__PURE__*/_react.default.forwardRef(function (props, r
   }), children, !disabled ? /*#__PURE__*/_react.default.createElement(_Ripple.default, null) : null);
 });
 PaginationButton.displayName = 'PaginationButton';
-PaginationButton.propTypes = {
-  classPrefix: _propTypes.default.string,
-  eventKey: _propTypes.default.any,
-  onSelect: _propTypes.default.func,
-  onClick: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  active: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  as: _propTypes.default.elementType,
-  children: _propTypes.default.node,
-  style: _propTypes.default.object,
-  renderItem: _propTypes.default.func
-};
 var _default = PaginationButton;
 exports.default = _default;

package/cjs/Pagination/PaginationGroup.d.ts

@@ -1,19 +1,47 @@
 import { PaginationProps } from './Pagination';
 import { RsRefForwardingComponent } from '../@types/common';
-declare type LayoutType = 'total' | '-' | 'pager' | '|' | 'limit' | 'skip';
+/**
+ * The layout of the paging component.
+ */
+declare type LayoutType = 'total' | 'pager' | 'limit' | 'skip' | '-' | '|';
 export interface PaginationGroupProps extends PaginationProps {
-    /** Customize the layout of a paging component */
+    /**
+     * Customize the layout of a paging component.
+     * - `total` Component used to display the total.
+     * - `pager` Component used to display the page number.
+     * - `limit` Component used to display the number of rows per page.
+     * - `skip` Component used to jump to a page.
+     * - `-` Placeholder, take up the remaining space.
+     * - `|` Divider
+     *
+     * @default ['pager']
+     */
     layout?: LayoutType[];
-    /** Customizes the options of the rows per page select field. */
+    /**
+     * Customizes the options of the rows per page select field.
+     */
     limitOptions?: number[];
-    /** Customize the layout of a paging component */
+    /**
+     * Customize the layout of a paging component.
+     */
     limit?: number;
-    /** Total number of data entries */
+    /**
+     * Total number of data entries.
+     */
     total: number;
-    /** Callback fired when the page is changed */
+    /**
+     * Callback fired when the page is changed.
+     */
     onChangePage?: (page: number) => void;
-    /** Callback fired when the number of rows per page is changed */
+    /**
+     * Callback fired when the number of rows per page is changed.
+     */
     onChangeLimit?: (limit: number) => void;
 }
+/**
+ * Pagination component for displaying page numbers.
+ *
+ * @see https://rsuitejs.com/components/pagination
+ */
 declare const PaginationGroup: RsRefForwardingComponent<'div', PaginationGroupProps>;
 export default PaginationGroup;