rsuite 5.59.0 → 5.59.1

package/esm/Avatar/Avatar.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject, _templateObject2;
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames } from '../utils';
+import { useClassNames, useCustom, isIE } from '../utils';
 import { AvatarGroupContext } from '../AvatarGroup/AvatarGroup';
 import { oneOf } from '../internals/propTypes';
 import AvatarIcon from './AvatarIcon';
@@ -15,8 +15,10 @@ import useImage from './useImage';
  * @see https://rsuitejs.com/components/avatar
  */
 var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _extends2;
   var _useContext = useContext(AvatarGroupContext),
-    groupSize = _useContext.size;
+    groupSize = _useContext.size,
+    spacing = _useContext.spacing;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     bordered = props.bordered,
@@ -32,9 +34,10 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     src = props.src,
     srcSet = props.srcSet,
     sizes = props.sizes,
+    style = props.style,
     imgProps = props.imgProps,
     onError = props.onError,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "imgProps", "onError"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "style", "imgProps", "onError"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
@@ -53,6 +56,8 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onError: onError
     })),
     loaded = _useImage.loaded;
+  var _useCustom = useCustom('Avatar'),
+    rtl = _useCustom.rtl;
   var altComponent = useMemo(function () {
     if (alt) {
       return /*#__PURE__*/React.createElement("span", {
@@ -68,9 +73,12 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var image = loaded ? /*#__PURE__*/React.createElement("img", _extends({}, imageProps, {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["image"])))
   })) : placeholder;
+  var margin = rtl ? 'marginLeft' : 'marginRight';
+  var insertStyles = isIE() && spacing ? _extends((_extends2 = {}, _extends2[margin] = spacing, _extends2), style) : style;
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: insertStyles
   }), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';

package/esm/Avatar/useImage.js

@@ -61,7 +61,6 @@ var useImage = function useImage(props) {
   useEffect(function () {
     return flush;
   }, []);
-  console.log('status', status);
   return {
     loaded: status === 'loaded',
     status: status

package/esm/AvatarGroup/AvatarGroup.d.ts

@@ -18,6 +18,7 @@ export interface AvatarGroupProps extends WithAsProps {
 }
 export declare const AvatarGroupContext: React.Context<{
     size?: Size | undefined;
+    spacing?: number | undefined;
 }>;
 /**
  * The AvatarGroup component is used to represent a collection of avatars.

package/esm/AvatarGroup/AvatarGroup.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useCustom } from '../utils';
+import { useClassNames, isIE } from '../utils';
 import { oneOf } from '../internals/propTypes';
 export var AvatarGroupContext = /*#__PURE__*/React.createContext({});
 
@@ -21,9 +21,8 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children = props.children,
     stack = props.stack,
     size = props.size,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size"]);
-  var _useCustom = useCustom('AvatarGroup'),
-    rtl = _useCustom.rtl;
+    style = props.style,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
@@ -35,17 +34,18 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size: size
     };
   }, [size]);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  var styles = isIE() ? style : _extends({}, style, {
+    gap: spacing
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "group"
+  }, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: styles
   }), /*#__PURE__*/React.createElement(AvatarGroupContext.Provider, {
     value: contextValue
-  }, spacing ? React.Children.map(children, function (child) {
-    var _extends2;
-    return /*#__PURE__*/React.cloneElement(child, {
-      style: _extends((_extends2 = {}, _extends2[rtl ? 'marginLeft' : 'marginRight'] = spacing, _extends2), child.props.style)
-    });
-  }) : children));
+  }, children));
 });
 AvatarGroup.displayName = 'AvatarGroup';
 AvatarGroup.propTypes = {

package/esm/Checkbox/Checkbox.js

@@ -131,7 +131,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })), /*#__PURE__*/React.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["inner"]))),
     "aria-hidden": true,
-    role: "presentation"
+    "data-testid": "checkbox-control-inner"
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     ref: ref,

package/esm/Form/Form.js

@@ -12,10 +12,12 @@ import FormControlLabel from '../FormControlLabel';
 import FormErrorMessage from '../FormErrorMessage';
 import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
-import { useFormClassNames } from './useFormClassNames';
-import useSchemaModel from './useSchemaModel';
-import { useControlled, useEventCallback } from '../utils';
+import { useEventCallback } from '../utils';
 import { oneOf } from '../internals/propTypes';
+import useSchemaModel from './hooks/useSchemaModel';
+import useFormError from './hooks/useFormError';
+import useFormValue from './hooks/useFormValue';
+import useFormClassNames from './hooks/useFormClassNames';
 /**
  * The `Form` component is a form interface for collecting and validating user input.
  * @see https://rsuitejs.com/components/form
@@ -29,8 +31,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,
     _props$formDefaultVal = props.formDefaultValue,
     formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,
-    formValue = props.formValue,
-    formError = props.formError,
+    formValueProp = props.formValue,
+    formErrorProp = props.formError,
     fluid = props.fluid,
     _props$nestedField = props.nestedField,
     nestedField = _props$nestedField === void 0 ? false : _props$nestedField,
@@ -61,29 +63,25 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext,
     disabled: disabled
   });
-  var _useControlled = useControlled(formValue, formDefaultValue),
-    realFormValue = _useControlled[0],
-    setFormValue = _useControlled[1];
-  var _useControlled2 = useControlled(formError, {}),
-    realFormError = _useControlled2[0],
-    setFormError = _useControlled2[1];
-  var realFormValueRef = useRef(realFormValue);
-  realFormValueRef.current = realFormValue;
-  var realFormErrorRef = useRef(realFormError);
-  realFormErrorRef.current = realFormError;
-
+  var _useFormValue = useFormValue(formValueProp, formDefaultValue),
+    formValue = _useFormValue.formValue,
+    setFormValue = _useFormValue.setFormValue,
+    onRemoveValue = _useFormValue.onRemoveValue;
+  var _useFormError = useFormError(formErrorProp),
+    formError = _useFormError.formError,
+    setFormError = _useFormError.setFormError,
+    onRemoveError = _useFormError.onRemoveError;
   /**
    * Validate the form data and return a boolean.
    * The error message after verification is returned in the callback.
    * @param callback
    */
   var check = useEventCallback(function (callback) {
-    var formValue = realFormValue || {};
     var formError = {};
     var errorCount = 0;
     var model = getCombinedModel();
-    Object.keys(model.spec).forEach(function (key) {
-      var checkResult = model.checkForField(key, formValue);
+    Object.keys(model.getSchemaSpec()).forEach(function (key) {
+      var checkResult = model.checkForField(key, formValue || {});
       if (checkResult.hasError === true) {
         errorCount += 1;
         formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
@@ -106,15 +104,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var checkForField = useEventCallback(function (fieldName, callback) {
     var _extends2;
-    var formValue = realFormValue || {};
     var model = getCombinedModel();
-    var checkResult = model.checkForField(fieldName, formValue);
-    var formError = _extends({}, realFormError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
-    setFormError(formError);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    var checkResult = model.checkForField(fieldName, formValue || {});
+    var nextFormError = _extends({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
+    setFormError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
     callback === null || callback === void 0 ? void 0 : callback(checkResult);
     if (checkResult.hasError) {
-      onError === null || onError === void 0 ? void 0 : onError(formError);
+      onError === null || onError === void 0 ? void 0 : onError(nextFormError);
     }
     return !checkResult.hasError;
   });
@@ -123,13 +120,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * Check form data asynchronously and return a Promise
    */
   var checkAsync = useEventCallback(function () {
-    var formValue = realFormValue || {};
     var promises = [];
     var keys = [];
     var model = getCombinedModel();
-    Object.keys(model.spec).forEach(function (key) {
+    Object.keys(model.getSchemaSpec()).forEach(function (key) {
       keys.push(key);
-      promises.push(model.checkForFieldAsync(key, formValue));
+      promises.push(model.checkForFieldAsync(key, formValue || {}));
     });
     return Promise.all(promises).then(function (values) {
       var formError = {};
@@ -157,15 +153,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param fieldName
    */
   var checkForFieldAsync = useEventCallback(function (fieldName) {
-    var formValue = realFormValue || {};
     var model = getCombinedModel();
-    return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {
+    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
       var _extends3;
-      var formError = _extends({}, realFormError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-      setFormError(formError);
+      var nextFormError = _extends({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+      setFormError(nextFormError);
       if (checkResult.hasError) {
-        onError === null || onError === void 0 ? void 0 : onError(formError);
+        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
       }
       return checkResult;
     });
@@ -174,7 +169,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFormError({});
   });
   var cleanErrorForField = useEventCallback(function (fieldName) {
-    setFormError(omit(realFormError, [fieldName]));
+    setFormError(omit(formError, [fieldName]));
   });
   var resetErrors = useEventCallback(function (formError) {
     if (formError === void 0) {
@@ -195,23 +190,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   });
   var removeFieldError = useEventCallback(function (name) {
-    /**
-     * when this function is called when the children component is unmount, it's an old render frame
-     * so use Ref to get future error
-     */
-    var formError = omit(realFormErrorRef.current, [name]);
-    realFormErrorRef.current = formError;
+    var formError = onRemoveError(name);
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
   });
   var removeFieldValue = useEventCallback(function (name) {
-    /**
-     * when this function is called when the children component is unmount, it's an old render frame
-     * so use Ref to get future value
-     */
-    var formValue = omit(realFormValueRef.current, [name]);
-    realFormValueRef.current = formValue;
-    setFormValue(formValue);
+    var formValue = onRemoveValue(name);
     onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
   });
   var handleSubmit = useEventCallback(function (event) {
@@ -225,10 +209,10 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var handleFieldError = useEventCallback(function (name, errorMessage) {
     var _extends4;
-    var formError = _extends({}, realFormError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
-    setFormError(formError);
-    onError === null || onError === void 0 ? void 0 : onError(formError);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    var nextFormError = _extends({}, formError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
+    setFormError(nextFormError);
+    onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
   });
   var handleFieldSuccess = useEventCallback(function (name) {
     removeFieldError(name);
@@ -241,7 +225,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return _extends({}, formValue, (_extends5 = {}, _extends5[fieldName] = fieldValue, _extends5));
   };
   var handleFieldChange = useEventCallback(function (name, value, event) {
-    var nextFormValue = setFieldValue(realFormValue, name, value);
+    var nextFormValue = setFieldValue(formValue, name, value);
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
   });
@@ -254,7 +238,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       readOnly: readOnly,
       plaintext: plaintext,
       disabled: disabled,
-      formError: realFormError,
+      formError: formError,
       nestedField: nestedField,
       removeFieldValue: removeFieldValue,
       removeFieldError: removeFieldError,
@@ -264,7 +248,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onFieldError: handleFieldError,
       onFieldSuccess: handleFieldSuccess
     };
-  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
+  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, formError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
   return /*#__PURE__*/React.createElement("form", _extends({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,
@@ -272,7 +256,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: formContextValue
   }, /*#__PURE__*/React.createElement(FormValueContext.Provider, {
-    value: realFormValue
+    value: formValue
   }, children)));
 });
 Form.Control = FormControl;

package/esm/Form/FormContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TypeAttributes } from '../@types/common';
 import type { Schema } from 'schema-typed';
-import type { FieldRuleType } from './useSchemaModel';
+import type { FieldRuleType } from './hooks/useSchemaModel';
 interface TrulyFormContextValue<T = Record<string, any>, errorMsgType = any, E = {
     [P in keyof T]?: errorMsgType;
 }> {

package/esm/Form/{useFormClassNames.d.ts → hooks/useFormClassNames.d.ts}

@@ -1,5 +1,5 @@
-import type { FormProps } from './Form';
+import type { FormProps } from '../Form';
 /**
  * Take <Form> props and return className for <Form> styles
  */
-export declare function useFormClassNames({ classPrefix, className, fluid, layout, readOnly, plaintext, disabled }: Pick<FormProps, 'classPrefix' | 'className' | 'fluid' | 'layout' | 'readOnly' | 'plaintext' | 'disabled'>): string;
+export default function useFormClassNames({ classPrefix, className, fluid, layout, readOnly, plaintext, disabled }: Pick<FormProps, 'classPrefix' | 'className' | 'fluid' | 'layout' | 'readOnly' | 'plaintext' | 'disabled'>): string;

package/esm/Form/{useFormClassNames.js → hooks/useFormClassNames.js}

@@ -1,9 +1,9 @@
 'use client';
-import { useClassNames } from '../utils';
+import { useClassNames } from '../../utils';
 /**
  * Take <Form> props and return className for <Form> styles
  */
-export function useFormClassNames(_ref) {
+export default function useFormClassNames(_ref) {
   var _ref$classPrefix = _ref.classPrefix,
     classPrefix = _ref$classPrefix === void 0 ? 'form' : _ref$classPrefix,
     className = _ref.className,

package/esm/Form/hooks/useFormError.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="lodash" />
+export default function useFormError(formError: any): {
+    formError: any;
+    setFormError: (value: any) => void;
+    onRemoveError: (name: string) => import("lodash").Omit<any, string>;
+};

package/esm/Form/hooks/useFormError.js

@@ -0,0 +1,26 @@
+'use client';
+import { useRef, useCallback } from 'react';
+import omit from 'lodash/omit';
+import { useControlled } from '../../utils';
+export default function useFormError(formError) {
+  var _useControlled = useControlled(formError, {}),
+    realFormError = _useControlled[0],
+    setFormError = _useControlled[1];
+  var realFormErrorRef = useRef(realFormError);
+  realFormErrorRef.current = realFormError;
+  var onRemoveError = useCallback(function (name) {
+    /**
+     * when this function is called when the children component is unmount,
+     * it's an old render frame so use Ref to get future error
+     */
+    var formError = omit(realFormErrorRef.current, [name]);
+    realFormErrorRef.current = formError;
+    setFormError(formError);
+    return formError;
+  }, [setFormError]);
+  return {
+    formError: realFormError,
+    setFormError: setFormError,
+    onRemoveError: onRemoveError
+  };
+}

package/esm/Form/hooks/useFormValue.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="lodash" />
+export default function useFormValue(controlledValue: any, formDefaultValue: any): {
+    formValue: any;
+    setFormValue: (value: any) => void;
+    onRemoveValue: (name: string) => import("lodash").Omit<any, string>;
+};

package/esm/Form/hooks/useFormValue.js

@@ -0,0 +1,26 @@
+'use client';
+import { useRef, useCallback } from 'react';
+import omit from 'lodash/omit';
+import { useControlled } from '../../utils';
+export default function useFormValue(controlledValue, formDefaultValue) {
+  var _useControlled = useControlled(controlledValue, formDefaultValue),
+    formValue = _useControlled[0],
+    setFormValue = _useControlled[1];
+  var realFormValueRef = useRef(formValue);
+  realFormValueRef.current = formValue;
+  var onRemoveValue = useCallback(function (name) {
+    /**
+     * when this function is called when the children component is unmount,
+     * it's an old render frame so use Ref to get future value
+     */
+    var formValue = omit(realFormValueRef.current, [name]);
+    realFormValueRef.current = formValue;
+    setFormValue(formValue);
+    return formValue;
+  }, [setFormValue]);
+  return {
+    formValue: formValue,
+    setFormValue: setFormValue,
+    onRemoveValue: onRemoveValue
+  };
+}

package/esm/Form/index.d.ts

@@ -5,5 +5,5 @@ export type { FormErrorMessageProps } from '../FormErrorMessage';
 export type { FormControlLabelProps } from '../FormControlLabel';
 export type { FormHelpTextProps } from '../FormHelpText';
 export type { FormControlProps } from '../FormControl';
-export * from './useFormClassNames';
+export { default as useFormClassNames } from './hooks/useFormClassNames';
 export default Form;

package/esm/Form/index.js

@@ -1,4 +1,4 @@
 'use client';
 import Form from './Form';
-export * from './useFormClassNames';
+export { default as useFormClassNames } from './hooks/useFormClassNames';
 export default Form;

package/esm/FormControl/FormControl.js

@@ -180,7 +180,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id: controlId ? controlId + "-error-message" : undefined,
     role: "alert",
     "aria-relevant": "all",
-    show: !!messageNode,
+    show: fieldHasError,
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["message-wrapper"]))),
     placement: errorPlacement
   }, messageNode));

package/esm/FormControl/useRegisterModel.d.ts

@@ -1,4 +1,4 @@
-import type { FieldRuleType } from '../Form/useSchemaModel';
+import type { FieldRuleType } from '../Form/hooks/useSchemaModel';
 import type { CheckType } from 'schema-typed';
 declare function useRegisterModel(name: string, pushFieldRule: (n: string, r: FieldRuleType) => void, removeFieldRule: (n: string) => void, rule?: CheckType<unknown, any>): void;
 export default useRegisterModel;

package/esm/Placeholder/PlaceholderGraph.d.ts

@@ -1,8 +1,20 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface PlaceholderGraphProps extends WithAsProps {
+    /**
+     * The height of the graph.
+     *
+     * @default 200
+     */
     height?: number;
+    /**
+     * The width of the graph.
+     *
+     * @default 100%
+     */
     width?: number;
-    /** Placeholder status */
+    /**
+     * Placeholder status, display the loading state.
+     */
     active?: boolean;
 }
 /**

package/esm/Placeholder/PlaceholderGrid.d.ts

@@ -1,10 +1,36 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface PlaceholderGridProps extends WithAsProps {
+    /**
+     * The number of rows.
+     *
+     * @default 5
+     */
     rows?: number;
+    /**
+     * The height of the row.
+     *
+     * @default 10
+     */
     rowHeight?: number;
+    /**
+     * @deprecated Use `rowSpacing` instead.
+     */
     rowMargin?: number;
+    /**
+     * The spacing between rows.
+     *
+     * @default 20
+     * @version 5.59.1
+     */
+    rowSpacing?: number;
+    /**
+     * The number of columns.
+     * @default 5
+     */
     columns?: number;
-    /** Placeholder status */
+    /**
+     * Placeholder status, display the loading state.
+     */
     active?: boolean;
 }
 /**

package/esm/Placeholder/PlaceholderGrid.js

@@ -1,6 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -23,8 +25,10 @@ var PlaceholderGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rowHeight = _props$rowHeight === void 0 ? 10 : _props$rowHeight,
     _props$rowMargin = props.rowMargin,
     rowMargin = _props$rowMargin === void 0 ? 20 : _props$rowMargin,
+    _props$rowSpacing = props.rowSpacing,
+    rowSpacing = _props$rowSpacing === void 0 ? rowMargin : _props$rowSpacing,
     active = props.active,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "active"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "rowSpacing", "active"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -33,23 +37,16 @@ var PlaceholderGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
     active: active
   }));
   var colItems = [];
-  var firstRowItemWidth = Math.random() * 30 + 30;
-  var itemWidth = firstRowItemWidth / 2;
   for (var i = 0; i < columns; i++) {
     var rowItems = [];
     for (var j = 0; j < rows; j++) {
-      var widthPercent = Math.random() * 50 + 10; // when first column
-      if (i > 0) {
-        // when other columns
-        widthPercent = j > 0 ? itemWidth : firstRowItemWidth;
-      }
-      rowItems.push( /*#__PURE__*/React.createElement("p", {
+      rowItems.push( /*#__PURE__*/React.createElement("div", {
         key: j,
         style: {
-          width: widthPercent + "%",
           height: rowHeight,
-          marginTop: j > 0 ? rowMargin : undefined
-        }
+          marginTop: j > 0 ? rowSpacing : undefined
+        },
+        className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["row"])))
       }));
     }
     colItems.push( /*#__PURE__*/React.createElement("div", {
@@ -69,7 +66,7 @@ PlaceholderGrid.propTypes = {
   rows: PropTypes.number,
   columns: PropTypes.number,
   rowHeight: PropTypes.number,
-  rowMargin: PropTypes.number,
+  rowSpacing: PropTypes.number,
   active: PropTypes.bool
 };
 export default PlaceholderGrid;

package/esm/Placeholder/PlaceholderParagraph.d.ts

@@ -1,10 +1,33 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface PlaceholderParagraphProps extends WithAsProps {
+    /**
+     * The number of rows.
+     * @default 2
+     */
     rows?: number;
+    /**
+     * The height of the row.
+     * @default 10
+     */
     rowHeight?: number;
+    /**
+     * @deprecated Use `rowSpacing` instead.
+     */
     rowMargin?: number;
+    /**
+     * The spacing between rows.
+     * @default 20
+     * @version 5.59.1
+     */
+    rowSpacing?: number;
+    /**
+     * The shape of the graph.
+     * @default false
+     */
     graph?: boolean | 'circle' | 'square' | 'image';
-    /** Placeholder status */
+    /**
+     * Placeholder status, display the loading state.
+     */
     active?: boolean;
 }
 /**