rsuite 5.59.0 → 5.59.1

package/cjs/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/cjs/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/cjs/Form/{useFormClassNames.js → hooks/useFormClassNames.js}

@@ -2,8 +2,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useFormClassNames = useFormClassNames;
-var _utils = require("../utils");
+exports.default = useFormClassNames;
+var _utils = require("../../utils");
 /**
  * Take <Form> props and return className for <Form> styles
  */

package/cjs/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/cjs/Form/hooks/useFormError.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useFormError;
+var _react = require("react");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _utils = require("../../utils");
+function useFormError(formError) {
+  var _useControlled = (0, _utils.useControlled)(formError, {}),
+    realFormError = _useControlled[0],
+    setFormError = _useControlled[1];
+  var realFormErrorRef = (0, _react.useRef)(realFormError);
+  realFormErrorRef.current = realFormError;
+  var onRemoveError = (0, _react.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 = (0, _omit.default)(realFormErrorRef.current, [name]);
+    realFormErrorRef.current = formError;
+    setFormError(formError);
+    return formError;
+  }, [setFormError]);
+  return {
+    formError: realFormError,
+    setFormError: setFormError,
+    onRemoveError: onRemoveError
+  };
+}

package/cjs/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/cjs/Form/hooks/useFormValue.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useFormValue;
+var _react = require("react");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _utils = require("../../utils");
+function useFormValue(controlledValue, formDefaultValue) {
+  var _useControlled = (0, _utils.useControlled)(controlledValue, formDefaultValue),
+    formValue = _useControlled[0],
+    setFormValue = _useControlled[1];
+  var realFormValueRef = (0, _react.useRef)(formValue);
+  realFormValueRef.current = formValue;
+  var onRemoveValue = (0, _react.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 = (0, _omit.default)(realFormValueRef.current, [name]);
+    realFormValueRef.current = formValue;
+    setFormValue(formValue);
+    return formValue;
+  }, [setFormValue]);
+  return {
+    formValue: formValue,
+    setFormValue: setFormValue,
+    onRemoveValue: onRemoveValue
+  };
+}

package/cjs/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/cjs/Form/index.js

@@ -3,15 +3,9 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-var _exportNames = {};
-exports.default = void 0;
+exports.default = exports.useFormClassNames = void 0;
 var _Form = _interopRequireDefault(require("./Form"));
-var _useFormClassNames = require("./useFormClassNames");
-Object.keys(_useFormClassNames).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useFormClassNames[key]) return;
-  exports[key] = _useFormClassNames[key];
-});
+var _useFormClassNames = _interopRequireDefault(require("./hooks/useFormClassNames"));
+exports.useFormClassNames = _useFormClassNames.default;
 var _default = _Form.default;
 exports.default = _default;

package/cjs/FormControl/FormControl.js

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

package/cjs/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/cjs/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/cjs/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/cjs/Placeholder/PlaceholderGrid.js

@@ -5,11 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
+var _templateObject;
 /**
  * The `Placeholder.Grid` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder
@@ -28,8 +30,10 @@ var PlaceholderGrid = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "active"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "rowSpacing", "active"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -38,23 +42,16 @@ var PlaceholderGrid = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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.default.createElement("p", {
+      rowItems.push( /*#__PURE__*/_react.default.createElement("div", {
         key: j,
         style: {
-          width: widthPercent + "%",
           height: rowHeight,
-          marginTop: j > 0 ? rowMargin : undefined
-        }
+          marginTop: j > 0 ? rowSpacing : undefined
+        },
+        className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["row"])))
       }));
     }
     colItems.push( /*#__PURE__*/_react.default.createElement("div", {
@@ -74,7 +71,7 @@ PlaceholderGrid.propTypes = {
   rows: _propTypes.default.number,
   columns: _propTypes.default.number,
   rowHeight: _propTypes.default.number,
-  rowMargin: _propTypes.default.number,
+  rowSpacing: _propTypes.default.number,
   active: _propTypes.default.bool
 };
 var _default = PlaceholderGrid;

package/cjs/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/cjs/Placeholder/PlaceholderParagraph.js

@@ -1,16 +1,18 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _propTypes2 = require("../internals/propTypes");
+var _templateObject;
 /**
  * The `Placeholder.Paragraph` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder
@@ -25,11 +27,13 @@ var PlaceholderParagraph = /*#__PURE__*/_react.default.forwardRef(function (prop
     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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "rows", "rowHeight", "rowMargin", "graph", "active", "classPrefix"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "rows", "rowHeight", "rowMargin", "rowSpacing", "graph", "active", "classPrefix"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -39,17 +43,17 @@ var PlaceholderParagraph = /*#__PURE__*/_react.default.forwardRef(function (prop
     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.default.createElement("p", {
+      rowArr.push( /*#__PURE__*/_react.default.createElement("div", {
         key: i,
-        style: styles
+        style: styles,
+        className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["row"])))
       }));
     }
     return rowArr;
-  }, [rowHeight, rowMargin, rows]);
+  }, [prefix, rowHeight, rowSpacing, rows]);
   var classes = merge(className, withClassPrefix('paragraph', {
     active: active
   }));
@@ -62,7 +66,7 @@ var PlaceholderParagraph = /*#__PURE__*/_react.default.forwardRef(function (prop
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('paragraph-graph-inner')
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('paragraph-rows')
+    className: prefix('paragraph-group')
   }, rowElements));
 });
 PlaceholderParagraph.displayName = 'PlaceholderParagraph';
@@ -71,7 +75,7 @@ PlaceholderParagraph.propTypes = {
   classPrefix: _propTypes.default.string,
   rows: _propTypes.default.number,
   rowHeight: _propTypes.default.number,
-  rowMargin: _propTypes.default.number,
+  rowSpacing: _propTypes.default.number,
   graph: _propTypes.default.oneOfType([_propTypes.default.bool, (0, _propTypes2.oneOf)(['circle', 'square', 'image'])]),
   active: _propTypes.default.bool
 };

package/dist/rsuite-no-reset-rtl.css

@@ -1678,6 +1678,8 @@ tbody.rs-anim-collapse.rs-anim-in {
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 .rs-avatar-group-stack .rs-avatar {
   -webkit-box-sizing: content-box;
@@ -4029,6 +4031,8 @@ tbody.rs-anim-collapse.rs-anim-in {
   left: -10px;
   bottom: -10px;
   right: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,
@@ -11274,12 +11278,40 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   background: var(--rs-bg-card);
   position: absolute;
 }
-.rs-placeholder-paragraph-rows {
+.rs-placeholder-paragraph-group {
+  width: 100%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(9) {
+  width: 75%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(8) {
+  width: 60%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(7) {
+  width: 85%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(6) {
+  width: 70%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(5) {
+  width: 90%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(4) {
+  width: 65%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(3) {
+  width: 80%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(2) {
+  width: 50%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(1) {
   width: 100%;
 }
-.rs-placeholder-paragraph-rows > p {
+.rs-placeholder-row {
   background-color: #f2f2f5;
   background-color: var(--rs-placeholder);
+  width: 100%;
 }
 .rs-placeholder-grid-col {
   -webkit-box-flex: 1;
@@ -11296,15 +11328,23 @@ textarea.rs-inline-edit-sm .rs-plaintext {
       -ms-flex-align: end;
           align-items: flex-end;
 }
-.rs-placeholder-grid-col > p {
-  background-color: #f2f2f5;
-  background-color: var(--rs-placeholder);
-}
 .rs-placeholder-grid-col:first-child {
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
 }
+.rs-placeholder-grid-col .rs-placeholder-row {
+  width: 30%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(3) {
+  width: 35%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(2) {
+  width: 25%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(1) {
+  width: 50%;
+}
 .rs-placeholder-graph {
   display: inline-block;
   width: 100%;
@@ -12439,6 +12479,9 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   -webkit-transition: none;
   transition: none;
 }
+.rs-sidenav-nav .rs-dropdown-item {
+  display: block;
+}
 .rs-sidenav-nav > .rs-sidenav-item,
 .rs-sidenav-nav > .rs-dropdown {
   margin: 0 !important;