rsuite 5.54.0 → 5.55.1

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;

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;

package/cjs/Pagination/PaginationGroup.js

@@ -1,79 +1,56 @@
 '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 _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
-var _SelectPicker = _interopRequireDefault(require("../SelectPicker"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _Input = _interopRequireDefault(require("../Input"));
 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;
-  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')
-  }, /*#__PURE__*/_react.default.createElement(_SelectPicker.default, {
-    size: size,
-    cleanable: false,
-    searchable: false,
-    placement: "topStart",
-    data: formatlimitOptions,
-    value: limit,
-    onChange: onChangeLimit // fixme don't use any
-    ,
-    menuStyle: {
-      minWidth: 'auto'
-    },
-    disabled: disabledPicker
-  }));
-};
+var _LimitPicker = _interopRequireDefault(require("./LimitPicker"));
+/**
+ * The layout of the paging component.
+ */
+
 var defaultLayout = ['pager'];
 var defaultLimitOptions = [30, 50, 100];
+
+/**
+ * Pagination component for displaying page numbers.
+ *
+ * @see https://rsuitejs.com/components/pagination
+ */
 var PaginationGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
+    activePageProp = props.activePage,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'pagination-group' : _props$classPrefix,
+    className = props.className,
+    disabled = props.disabled,
     size = props.size,
+    style = props.style,
     total = props.total,
     prev = props.prev,
     next = props.next,
     first = props.first,
     last = props.last,
-    maxButtons = props.maxButtons,
-    className = props.className,
     _props$limitOptions = props.limitOptions,
     limitOptions = _props$limitOptions === void 0 ? defaultLimitOptions : _props$limitOptions,
     limitProp = props.limit,
-    activePageProp = props.activePage,
-    disabled = props.disabled,
-    style = props.style,
     localeProp = props.locale,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? defaultLayout : _props$layout,
+    maxButtons = props.maxButtons,
     onChangePage = props.onChangePage,
     onChangeLimit = props.onChangeLimit,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "size", "total", "prev", "next", "first", "last", "maxButtons", "className", "limitOptions", "limit", "activePage", "disabled", "style", "locale", "layout", "onChangePage", "onChangeLimit"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activePage", "classPrefix", "className", "disabled", "size", "style", "total", "prev", "next", "first", "last", "limitOptions", "limit", "locale", "layout", "maxButtons", "onChangePage", "onChangeLimit"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -88,80 +65,82 @@ var PaginationGroup = /*#__PURE__*/_react.default.forwardRef(function (props, re
     locale = _useCustom.locale;
   var pages = Math.floor(total / limit) + (total % limit ? 1 : 0);
   var classes = merge(className, withClassPrefix(size));
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  var handleInputBlur = (0, _utils.useEventCallback)(function (event) {
     var value = parseInt(event.target.value);
     if (value > 0 && value <= pages) {
       onChangePage === null || onChangePage === void 0 ? void 0 : onChangePage(value);
       setActivePage(value);
     }
     event.target.value = '';
-  }, [onChangePage, pages, setActivePage]);
-  var handleInputPressEnter = (0, _react.useCallback)(function (event) {
+  });
+  var handleInputPressEnter = (0, _utils.useEventCallback)(function (event) {
     var _event$target;
     (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.blur();
-  }, []);
-  var handleChangeLimit = (0, _react.useCallback)(function (value) {
+  });
+  var handleChangeLimit = (0, _utils.useEventCallback)(function (value) {
     setLimit(value);
     onChangeLimit === null || onChangeLimit === void 0 ? void 0 : onChangeLimit(value);
-  }, [onChangeLimit, setLimit]);
+  });
   return /*#__PURE__*/_react.default.createElement(Component, {
     ref: ref,
     className: classes,
     style: style
   }, layout.map(function (key, index) {
     var onlyKey = "" + key + index;
-    if (key === '-') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefix('grow'),
-        key: onlyKey
-      });
-    } else if (key === '|') {
-      return /*#__PURE__*/_react.default.createElement(_Divider.default, {
-        vertical: true,
-        key: onlyKey
-      });
-    } else if (key === 'pager') {
-      return /*#__PURE__*/_react.default.createElement(_Pagination.default, (0, _extends2.default)({
-        key: onlyKey,
-        size: size,
-        prev: prev,
-        next: next,
-        first: first,
-        last: last,
-        maxButtons: maxButtons,
-        pages: pages,
-        disabled: disabled,
-        onSelect: onChangePage // fixme don't use any
-        ,
-        activePage: activePage
-      }, rest));
-    } else if (key === 'total') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: onlyKey,
-        className: prefix('total')
-      }, locale.total && (0, _utils.tplTransform)(locale.total, total));
-    } else if (key === 'skip') {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: onlyKey,
-        className: (0, _classnames.default)(prefix('skip'))
-      }, locale.skip && (0, _utils.tplTransform)(locale.skip, /*#__PURE__*/_react.default.createElement(_Input.default, {
-        size: size,
-        onBlur: handleInputBlur,
-        onPressEnter: handleInputPressEnter
-      })));
-    } else if (key === 'limit') {
-      return /*#__PURE__*/_react.default.createElement(LimitPicker, {
-        key: onlyKey,
-        size: size,
-        locale: locale,
-        limit: limit,
-        onChangeLimit: handleChangeLimit,
-        limitOptions: limitOptions,
-        disabled: disabled,
-        prefix: prefix
-      });
+    switch (key) {
+      case '-':
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: prefix('grow'),
+          key: onlyKey
+        });
+      case '|':
+        return /*#__PURE__*/_react.default.createElement(_Divider.default, {
+          vertical: true,
+          key: onlyKey
+        });
+      case 'pager':
+        return /*#__PURE__*/_react.default.createElement(_Pagination.default, (0, _extends2.default)({
+          key: onlyKey,
+          size: size,
+          prev: prev,
+          next: next,
+          first: first,
+          last: last,
+          maxButtons: maxButtons,
+          pages: pages,
+          disabled: disabled,
+          onSelect: onChangePage // fixme don't use any
+          ,
+          activePage: activePage
+        }, rest));
+      case 'total':
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: onlyKey,
+          className: prefix('total')
+        }, locale.total && (0, _utils.tplTransform)(locale.total, total));
+      case 'skip':
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: onlyKey,
+          className: (0, _classnames.default)(prefix('skip'))
+        }, locale.skip && (0, _utils.tplTransform)(locale.skip, /*#__PURE__*/_react.default.createElement(_Input.default, {
+          size: size,
+          onBlur: handleInputBlur,
+          onPressEnter: handleInputPressEnter
+        })));
+      case 'limit':
+        return /*#__PURE__*/_react.default.createElement(_LimitPicker.default, {
+          key: onlyKey,
+          size: size,
+          locale: locale,
+          limit: limit,
+          onChangeLimit: handleChangeLimit,
+          limitOptions: limitOptions,
+          disabled: disabled,
+          prefix: prefix
+        });
+      default:
+        return key;
     }
-    return key;
   }));
 });
 PaginationGroup.displayName = 'PaginationGroup';