rsuite 5.53.2 → 5.55.0

package/esm/InlineEdit/useFocusEvent.js

@@ -0,0 +1,56 @@
+'use client';
+import { useRef } from 'react';
+import { contains, ownerDocument } from 'dom-lib';
+import { useIsomorphicLayoutEffect, useUpdateEffect, useEventCallback } from '../utils';
+import { RSUITE_PICKER_TYPE } from '../internals/symbols';
+var useFocusEvent = function useFocusEvent(_ref) {
+  var _ref$current;
+  var isEditing = _ref.isEditing,
+    stateOnBlur = _ref.stateOnBlur,
+    onSave = _ref.onSave,
+    onCancel = _ref.onCancel;
+  var ref = useRef(null);
+  var rootRef = useRef(null);
+  var isPicker = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.type) === RSUITE_PICKER_TYPE;
+  var focus = function focus() {
+    if (isPicker) {
+      setTimeout(function () {
+        var _ref$current2, _ref$current2$target, _ref$current2$target$;
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$target = _ref$current2.target) === null || _ref$current2$target === void 0 ? void 0 : (_ref$current2$target$ = _ref$current2$target.focus) === null || _ref$current2$target$ === void 0 ? void 0 : _ref$current2$target$.call(_ref$current2$target);
+      }, 100);
+    } else {
+      var _ref$current3, _ref$current3$focus;
+      (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : (_ref$current3$focus = _ref$current3.focus) === null || _ref$current3$focus === void 0 ? void 0 : _ref$current3$focus.call(_ref$current3);
+    }
+  };
+  var handleBlur = useEventCallback(function (event) {
+    if (event) {
+      var _event$relatedTarget;
+      var relatedTarget = (_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 ? _event$relatedTarget : ownerDocument(event.currentTarget).activeElement;
+      if (rootRef.current && contains(rootRef.current, relatedTarget)) {
+        return;
+      }
+    }
+    if (stateOnBlur === 'save') {
+      onSave === null || onSave === void 0 ? void 0 : onSave(event);
+    } else if (stateOnBlur === 'cancel') {
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel(event);
+    }
+  });
+  useIsomorphicLayoutEffect(function () {
+    if (isEditing) {
+      focus();
+    }
+  }, []);
+  useUpdateEffect(function () {
+    if (isEditing) {
+      focus();
+    }
+  }, [isEditing]);
+  return {
+    target: ref,
+    root: rootRef,
+    onBlur: handleBlur
+  };
+};
+export default useFocusEvent;

package/esm/Input/Input.js

@@ -29,13 +29,14 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     size = props.size,
     htmlSize = props.htmlSize,
     plaintext = props.plaintext,
+    placeholder = props.placeholder,
     readOnly = props.readOnly,
     onPressEnter = props.onPressEnter,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onKeyDown = props.onKeyDown,
     onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "htmlSize", "plaintext", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
+    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "htmlSize", "plaintext", "placeholder", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
   var handleKeyDown = function handleKeyDown(event) {
     if (event.key === KEY_VALUES.ENTER) {
       onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
@@ -60,7 +61,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, {
       ref: ref,
-      localeKey: "unfilled"
+      localeKey: "unfilled",
+      placeholder: placeholder
     }, typeof value === 'undefined' ? defaultValue : value);
   }
   var inputable = !disabled && !readOnly;
@@ -80,7 +82,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     defaultValue: defaultValue,
     disabled: disabled,
     readOnly: readOnly,
-    size: htmlSize
+    size: htmlSize,
+    placeholder: placeholder
   }));
 });
 Input.displayName = 'Input';

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

@@ -25,6 +25,7 @@ import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
 import TextBox from './TextBox';
 import InputPickerContext from './InputPickerContext';
+import Stack from '../Stack';
 var convertSize = function convertSize(size) {
   switch (size) {
     case 'lg':
@@ -636,12 +637,12 @@ var InputPicker = /*#__PURE__*/React.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;
+      plaintextProps.spacing = 6;
+      plaintextProps.wrap = true;
+      plaintextProps.childrenRenderMode = 'clone';
     }
     return /*#__PURE__*/React.createElement(Plaintext, _extends({
       localeKey: "notSelected",

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;

package/esm/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;