rsuite 5.58.1 → 5.59.1

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

@@ -2,7 +2,7 @@
 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, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import React, { useRef, useMemo, useState, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
@@ -27,39 +27,40 @@ var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
  * @see https://rsuitejs.com/components/modal
  */
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _prefix;
-  var className = props.className,
+  var _prefix, _merge;
+  var _props$animation = props.animation,
+    animation = _props$animation === void 0 ? Bounce : _props$animation,
+    animationProps = props.animationProps,
+    _props$animationTimeo = props.animationTimeout,
+    animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
+    ariaLabelledby = props['aria-labelledby'],
+    ariaDescribedby = props['aria-describedby'],
+    backdropClassName = props.backdropClassName,
+    _props$backdrop = props.backdrop,
+    backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
+    className = props.className,
     children = props.children,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'modal' : _props$classPrefix,
     dialogClassName = props.dialogClassName,
-    backdropClassName = props.backdropClassName,
-    _props$backdrop = props.backdrop,
-    backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
     dialogStyle = props.dialogStyle,
-    _props$animation = props.animation,
-    animation = _props$animation === void 0 ? Bounce : _props$animation,
-    open = props.open,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'sm' : _props$size,
-    full = props.full,
     _props$dialogAs = props.dialogAs,
     Dialog = _props$dialogAs === void 0 ? ModalDialog : _props$dialogAs,
-    animationProps = props.animationProps,
-    _props$animationTimeo = props.animationTimeout,
-    animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
+    enforceFocusProp = props.enforceFocus,
+    full = props.full,
     _props$overflow = props.overflow,
     overflow = _props$overflow === void 0 ? true : _props$overflow,
+    open = props.open,
     onClose = props.onClose,
     onEntered = props.onEntered,
     onEntering = props.onEntering,
     onExited = props.onExited,
     _props$role = props.role,
     role = _props$role === void 0 ? 'dialog' : _props$role,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
     idProp = props.id,
-    ariaLabelledby = props['aria-labelledby'],
-    ariaDescribedby = props['aria-describedby'],
-    rest = _objectWithoutPropertiesLoose(props, ["className", "children", "classPrefix", "dialogClassName", "backdropClassName", "backdrop", "dialogStyle", "animation", "open", "size", "full", "dialogAs", "animationProps", "animationTimeout", "overflow", "onClose", "onEntered", "onEntering", "onExited", "role", "id", "aria-labelledby", "aria-describedby"]);
+    rest = _objectWithoutPropertiesLoose(props, ["animation", "animationProps", "animationTimeout", "aria-labelledby", "aria-describedby", "backdropClassName", "backdrop", "className", "children", "classPrefix", "dialogClassName", "dialogStyle", "dialogAs", "enforceFocus", "full", "overflow", "open", "onClose", "onEntered", "onEntering", "onExited", "role", "size", "id"]);
   var inClass = {
     in: open && !animation
   };
@@ -157,18 +158,32 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       placement = _ref2.placement; // The width or height of the drawer depends on the placement.
     sizeKey = placement === 'top' || placement === 'bottom' ? 'height' : 'width';
   }
+  var enforceFocus = useMemo(function () {
+    if (typeof enforceFocusProp === 'boolean') {
+      return enforceFocusProp;
+    }
+
+    // When the Drawer is displayed and the backdrop is not displayed, the focus is not restricted.
+    if (isDrawer && backdrop === false) {
+      return false;
+    }
+  }, [backdrop, enforceFocusProp, isDrawer]);
+  var wrapperClassName = merge(prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["wrapper"]))), (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["no-backdrop"])))] = backdrop === false, _merge));
   return /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalContextValue
-  }, /*#__PURE__*/React.createElement(BaseModal, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(BaseModal, _extends({
+    "data-testid": isDrawer ? 'drawer-wrapper' : 'modal-wrapper'
+  }, rest, {
     ref: ref,
     backdrop: backdrop,
+    enforceFocus: enforceFocus,
     open: open,
     onClose: onClose,
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["wrapper"]))),
+    className: wrapperClassName,
     onEntered: handleEntered,
     onEntering: handleEntering,
     onExited: handleExited,
-    backdropClassName: merge(prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["backdrop"]))), backdropClassName, inClass),
+    backdropClassName: merge(prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["backdrop"]))), backdropClassName, inClass),
     containerClassName: prefix({
       open: open,
       'has-backdrop': backdrop

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;
 }
 /**

package/esm/Placeholder/PlaceholderParagraph.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, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
@@ -19,11 +21,13 @@ var PlaceholderParagraph = /*#__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,
     graph = props.graph,
     active = props.active,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'placeholder' : _props$classPrefix,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "rows", "rowHeight", "rowMargin", "graph", "active", "classPrefix"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "rows", "rowHeight", "rowMargin", "rowSpacing", "graph", "active", "classPrefix"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -33,17 +37,17 @@ var PlaceholderParagraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var rowArr = [];
     for (var i = 0; i < rows; i++) {
       var styles = {
-        width: Math.random() * 75 + 25 + "%",
         height: rowHeight,
-        marginTop: i > 0 ? rowMargin : Number(rowMargin) / 2
+        marginTop: i > 0 ? rowSpacing : Number(rowSpacing) / 2
       };
-      rowArr.push( /*#__PURE__*/React.createElement("p", {
+      rowArr.push( /*#__PURE__*/React.createElement("div", {
         key: i,
-        style: styles
+        style: styles,
+        className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["row"])))
       }));
     }
     return rowArr;
-  }, [rowHeight, rowMargin, rows]);
+  }, [prefix, rowHeight, rowSpacing, rows]);
   var classes = merge(className, withClassPrefix('paragraph', {
     active: active
   }));
@@ -56,7 +60,7 @@ var PlaceholderParagraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: prefix('paragraph-graph-inner')
   })), /*#__PURE__*/React.createElement("div", {
-    className: prefix('paragraph-rows')
+    className: prefix('paragraph-group')
   }, rowElements));
 });
 PlaceholderParagraph.displayName = 'PlaceholderParagraph';
@@ -65,7 +69,7 @@ PlaceholderParagraph.propTypes = {
   classPrefix: PropTypes.string,
   rows: PropTypes.number,
   rowHeight: PropTypes.number,
-  rowMargin: PropTypes.number,
+  rowSpacing: PropTypes.number,
   graph: PropTypes.oneOfType([PropTypes.bool, oneOf(['circle', 'square', 'image'])]),
   active: PropTypes.bool
 };

package/esm/internals/Overlay/Modal.js

@@ -192,7 +192,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var className = fadeProps.className,
           rest = _objectWithoutPropertiesLoose(fadeProps, ["className"]);
         return /*#__PURE__*/React.createElement("div", _extends({
-          "aria-hidden": true
+          "aria-hidden": true,
+          "data-testid": "backdrop"
         }, rest, {
           style: backdropStyle,
           ref: mergeRefs(modal.setBackdropRef, ref),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.58.1",
+  "version": "5.59.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -39,7 +39,7 @@
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
     "rsuite-table": "^5.18.2",
-    "schema-typed": "^2.1.3"
+    "schema-typed": "^2.2.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/styles/color-modes/dark.less

@@ -307,6 +307,8 @@
   // Avatar
   --rs-avatar-bg: var(--rs-gray-400);
   --rs-avatar-text: var(--rs-gray-0);
+  --rs-avatar-offset-color: var(--rs-gray-900);
+  --rs-avatar-ring-color: var(--rs-avatar-bg);
 
   // Badge
   --rs-badge-bg: var(--rs-color-red);

package/styles/color-modes/high-contrast.less

@@ -313,6 +313,8 @@
   // Avatar
   --rs-avatar-bg: var(--rs-gray-400);
   --rs-avatar-text: var(--rs-gray-0);
+  --rs-avatar-offset-color: var(--rs-gray-900);
+  --rs-avatar-ring-color: var(--rs-avatar-bg);
 
   // Badge
   --rs-badge-bg: var(--rs-red-500);

package/styles/color-modes/light.less

@@ -328,6 +328,8 @@
   // Avatar
   --rs-avatar-bg: var(--rs-gray-300);
   --rs-avatar-text: var(--rs-gray-0);
+  --rs-avatar-offset-color: var(--rs-gray-0);
+  --rs-avatar-ring-color: var(--rs-avatar-bg);
 
   // Badge
   --rs-badge-bg: var(--rs-color-red);

package/styles/variables.less

@@ -268,26 +268,18 @@
 @badge-dot-size:        @badge-dot-side-length;
 
 // Avatar
-
-@avatar-md-side-length:   40px; // @deprecated use @avatar-size instead
-@avatar-md-font-size:     18px; // @deprecated use @avatar-font-size instead
-@avatar-size:             @avatar-md-side-length;
-@avatar-font-size:        @avatar-md-font-size;
-
-@avatar-lg-side-length:   60px; // @deprecated use @avatar-size-lg instead
-@avatar-lg-font-size:     26px; // @deprecated use @avatar-font-size-lg instead
-@avatar-size-lg:          @avatar-lg-side-length;
-@avatar-font-size-lg:     @avatar-lg-font-size;
-
-@avatar-sm-side-length:   30px; // @deprecated use @avatar-size-sm instead
-@avatar-sm-font-size:     14px; // @deprecated use @avatar-sm-font-size instead
-@avatar-size-sm:          @avatar-sm-side-length;
-@avatar-font-size-sm:     @avatar-sm-font-size;
-
-@avatar-xs-side-length:   20px; // @deprecated use @avatar-size-xs instead
-@avatar-xs-font-size:     12px; // @deprecated use @avatar-font-size-xs instead
-@avatar-size-xs:          @avatar-xs-side-length;
-@avatar-font-size-xs:     @avatar-xs-font-size;
+@avatar-size-xxl:         120px;
+@avatar-font-size-xxl:    48px;
+@avatar-size-xl:          90px;
+@avatar-font-size-xl:     36px;
+@avatar-size-lg:          60px;
+@avatar-font-size-lg:     26px;
+@avatar-size:             40px;
+@avatar-font-size:        18px;
+@avatar-size-sm:          30px;
+@avatar-font-size-sm:     14px;
+@avatar-size-xs:          20px;
+@avatar-font-size-xs:     12px;
 
 // Forms