rsuite 5.65.0 → 5.66.0

package/TreePicker/styles/index.css

@@ -3,11 +3,11 @@
   --rs-gray-0: #fff;
   --rs-gray-50: #f7f7fa;
   --rs-gray-200: #e5e5ea;
-  --rs-gray-400: #c5c6c7;
-  --rs-gray-500: #a6a6a6;
-  --rs-gray-600: #8e8e93;
-  --rs-gray-700: #7a7a7a;
-  --rs-gray-800: #575757;
+  --rs-gray-400: #b6b7b8;
+  --rs-gray-500: #939393;
+  --rs-gray-600: #717273;
+  --rs-gray-700: #575757;
+  --rs-gray-800: #343434;
   --rs-primary-50: #f2faff;
   --rs-primary-100: #cce9ff;
   --rs-primary-200: #a6d7ff;
@@ -183,7 +183,7 @@
 .rs-tree-drag-preview {
   position: absolute;
   top: 0;
-  color: #575757;
+  color: #343434;
   color: var(--rs-text-primary);
   background-color: #fff;
   background-color: var(--rs-bg-overlay);
@@ -200,7 +200,7 @@
 }
 .rs-tree .rs-tree-empty {
   padding: 6px 12px;
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-text-secondary);
 }
 .rs-tree-view {
@@ -318,13 +318,13 @@
 }
 .rs-tree-node-disabled .rs-tree-node-label {
   background: none;
-  color: #c5c6c7;
+  color: #b6b7b8;
   color: var(--rs-listbox-option-disabled-text);
   cursor: not-allowed;
 }
 .rs-tree-node-disabled > .rs-tree-node-label {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #b6b7b8;
   color: var(--rs-listbox-option-disabled-text);
 }
 .rs-tree-node-disabled > .rs-tree-node-label,

package/Uploader/styles/index.css

@@ -5,12 +5,12 @@
   --rs-gray-100: #f2f2f5;
   --rs-gray-200: #e5e5ea;
   --rs-gray-300: #d9d9d9;
-  --rs-gray-400: #c5c6c7;
-  --rs-gray-500: #a6a6a6;
-  --rs-gray-600: #8e8e93;
-  --rs-gray-700: #7a7a7a;
-  --rs-gray-800: #575757;
-  --rs-gray-900: #272c36;
+  --rs-gray-400: #b6b7b8;
+  --rs-gray-500: #939393;
+  --rs-gray-600: #717273;
+  --rs-gray-700: #575757;
+  --rs-gray-800: #343434;
+  --rs-gray-900: #121212;
   --rs-primary-200: #a6d7ff;
   --rs-primary-400: #59afff;
   --rs-primary-500: #3498ff;
@@ -395,7 +395,7 @@
       -ms-user-select: none;
           user-select: none;
   text-decoration: none;
-  color: #575757;
+  color: #343434;
   color: var(--rs-btn-default-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-bg);
@@ -460,7 +460,7 @@
 }
 .rs-btn:active,
 .rs-btn.rs-btn-active {
-  color: #272c36;
+  color: #121212;
   color: var(--rs-btn-default-active-text);
   background-color: #d9d9d9;
   background-color: var(--rs-btn-default-active-bg);
@@ -468,7 +468,7 @@
 .rs-btn:disabled,
 .rs-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
@@ -526,28 +526,28 @@
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-subtle {
-  color: #575757;
+  color: #343434;
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
   border: none;
 }
 .rs-btn-subtle:hover,
 .rs-btn-subtle:focus {
-  color: #575757;
+  color: #343434;
   color: var(--rs-btn-subtle-hover-text);
   background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-hover-bg);
 }
 .rs-btn-subtle:active,
 .rs-btn-subtle.rs-btn-active {
-  color: #272c36;
+  color: #121212;
   color: var(--rs-btn-subtle-active-text);
   background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-active-bg);
 }
 .rs-btn-subtle:disabled,
 .rs-btn-subtle.rs-btn-disabled {
-  color: #c5c6c7;
+  color: #b6b7b8;
   color: var(--rs-btn-subtle-disabled-text);
   background: none;
 }
@@ -635,7 +635,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-red-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-red-600);
-  --rs-btn-subtle-active-text: #575757;
+  --rs-btn-subtle-active-text: #343434;
   --rs-btn-ghost-border: var(--rs-red-700);
   --rs-btn-ghost-text: var(--rs-red-700);
   --rs-btn-ghost-hover-border: var(--rs-red-900);
@@ -689,7 +689,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-orange-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-orange-600);
-  --rs-btn-subtle-active-text: #575757;
+  --rs-btn-subtle-active-text: #343434;
   --rs-btn-ghost-border: var(--rs-orange-700);
   --rs-btn-ghost-text: var(--rs-orange-700);
   --rs-btn-ghost-hover-border: var(--rs-orange-900);
@@ -743,7 +743,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-yellow-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-yellow-600);
-  --rs-btn-subtle-active-text: #575757;
+  --rs-btn-subtle-active-text: #343434;
   --rs-btn-ghost-border: var(--rs-yellow-700);
   --rs-btn-ghost-text: var(--rs-yellow-700);
   --rs-btn-ghost-hover-border: var(--rs-yellow-900);
@@ -797,7 +797,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-green-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-green-600);
-  --rs-btn-subtle-active-text: #575757;
+  --rs-btn-subtle-active-text: #343434;
   --rs-btn-ghost-border: var(--rs-green-700);
   --rs-btn-ghost-text: var(--rs-green-700);
   --rs-btn-ghost-hover-border: var(--rs-green-900);
@@ -851,7 +851,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-cyan-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-cyan-600);
-  --rs-btn-subtle-active-text: #575757;
+  --rs-btn-subtle-active-text: #343434;
   --rs-btn-ghost-border: var(--rs-cyan-700);
   --rs-btn-ghost-text: var(--rs-cyan-700);
   --rs-btn-ghost-hover-border: var(--rs-cyan-900);
@@ -905,7 +905,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-blue-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-blue-600);
-  --rs-btn-subtle-active-text: #575757;
+  --rs-btn-subtle-active-text: #343434;
   --rs-btn-ghost-border: var(--rs-blue-700);
   --rs-btn-ghost-text: var(--rs-blue-700);
   --rs-btn-ghost-hover-border: var(--rs-blue-900);
@@ -959,7 +959,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-violet-500);
   --rs-btn-subtle-hover-text: #e5e5ea;
   --rs-btn-subtle-active-bg: var(--rs-violet-600);
-  --rs-btn-subtle-active-text: #575757;
+  --rs-btn-subtle-active-text: #343434;
   --rs-btn-ghost-border: var(--rs-violet-700);
   --rs-btn-ghost-text: var(--rs-violet-700);
   --rs-btn-ghost-hover-border: var(--rs-violet-900);
@@ -1207,7 +1207,7 @@
 }
 .rs-btn-loading > .rs-btn-spin::after {
   border-width: 3px;
-  border-color: #a6a6a6 transparent transparent;
+  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
   border-style: solid;
   -webkit-animation: buttonSpin 0.6s infinite linear;
@@ -1260,7 +1260,7 @@
 .rs-uploader-file-item-icon-reupload {
   cursor: pointer;
   margin-left: 10px;
-  color: #575757;
+  color: #343434;
   color: var(--rs-text-primary);
   font-size: 12px;
 }
@@ -1322,7 +1322,7 @@
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   border-width: 3px;
   border-style: solid;
-  border-color: #a6a6a6 transparent transparent;
+  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
   -webkit-animation: loaderSpin 0.6s infinite linear;
           animation: loaderSpin 0.6s infinite linear;
@@ -1337,7 +1337,7 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  color: #575757;
+  color: #343434;
   color: var(--rs-text-primary);
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
@@ -1355,7 +1355,7 @@
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-text-secondary);
   padding: 0 8px;
 }
@@ -1377,7 +1377,7 @@
   font-size: 14px;
   top: 12px;
   right: 12px;
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-text-secondary);
   cursor: pointer;
   padding: 0;
@@ -1443,7 +1443,7 @@
       -ms-user-select: none;
           user-select: none;
   text-decoration: none;
-  color: #575757;
+  color: #343434;
   color: var(--rs-btn-default-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-bg);
@@ -1452,7 +1452,7 @@
   padding: 8px 12px;
   overflow: hidden;
   position: relative;
-  color: #575757;
+  color: #343434;
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
   border: none;
@@ -1519,7 +1519,7 @@
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:active,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-active {
-  color: #272c36;
+  color: #121212;
   color: var(--rs-btn-default-active-text);
   background-color: #d9d9d9;
   background-color: var(--rs-btn-default-active-bg);
@@ -1527,7 +1527,7 @@
 .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
@@ -1545,21 +1545,21 @@
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:hover,
 .rs-uploader-picture .rs-uploader-trigger-btn:focus {
-  color: #575757;
+  color: #343434;
   color: var(--rs-btn-subtle-hover-text);
   background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-hover-bg);
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:active,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-active {
-  color: #272c36;
+  color: #121212;
   color: var(--rs-btn-subtle-active-text);
   background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-active-bg);
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
-  color: #c5c6c7;
+  color: #b6b7b8;
   color: var(--rs-btn-subtle-disabled-text);
   background: none;
 }
@@ -1568,7 +1568,7 @@
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-uploader-picture .rs-uploader-trigger.rs-uploader-trigger-disabled .rs-uploader-trigger-btn {
-  color: #575757 !important;
+  color: #343434 !important;
   color: var(--rs-btn-subtle-text) !important;
   background-color: transparent !important;
 }
@@ -1652,7 +1652,7 @@
   display: none;
 }
 .rs-uploader-picture .rs-uploader-file-item-btn-remove {
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-text-secondary);
   cursor: pointer;
   position: absolute;
@@ -1729,7 +1729,7 @@
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   border-width: 3px;
   border-style: solid;
-  border-color: #a6a6a6 transparent transparent;
+  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
   -webkit-animation: loaderSpin 0.6s infinite linear;
           animation: loaderSpin 0.6s infinite linear;
@@ -1797,7 +1797,7 @@
   display: block;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-content .rs-uploader-file-item-title {
-  color: #575757;
+  color: #343434;
   color: var(--rs-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1805,14 +1805,14 @@
   width: 100%;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-content .rs-uploader-file-item-size {
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-text-secondary);
 }
 .rs-uploader-picture-text .rs-uploader-file-item-btn-remove {
   position: absolute;
   top: 0;
   right: 12px;
-  color: #8e8e93;
+  color: #717273;
   color: var(--rs-text-secondary);
   cursor: pointer;
   height: 50px;
@@ -1885,7 +1885,7 @@
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   border-width: 3px;
   border-style: solid;
-  border-color: #a6a6a6 transparent transparent;
+  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
   -webkit-animation: loaderSpin 0.6s infinite linear;
           animation: loaderSpin 0.6s infinite linear;

package/cjs/CheckTree/CheckTreeView.d.ts

@@ -52,6 +52,10 @@ interface CheckTreeViewInnerProps<V = (string | number)[]> extends Omit<CheckTre
      * Flattened nodes.
      */
     flattenedNodes?: TreeNodeMap;
+    /**
+     * A collection of localized strings.
+     */
+    locale?: Record<string, string>;
     /**
      * Callback function triggered when an item is focused.
      */

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -222,6 +222,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     showIndentLine: showIndentLine,
     listProps: listProps,
     listRef: list,
+    locale: overrideLocale,
     searchBy: searchBy,
     searchable: searchable,
     searchKeyword: searchKeyword,

package/cjs/Drawer/Drawer.js

@@ -54,6 +54,7 @@ var Drawer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
     ref: ref,
+    overflow: false,
     classPrefix: classPrefix,
     className: classes,
     animation: animation,

package/cjs/FormControl/hooks/useField.d.ts

@@ -10,7 +10,7 @@ interface FieldProps {
 }
 declare function useField(props: FieldProps): {
     fieldValue: any;
-    fieldError: any;
+    fieldError: import("react").ReactNode;
     setFieldValue: (fieldName: string, fieldValue: any) => {
         [x: string]: any;
     };

package/cjs/FormControl/hooks/useField.js

@@ -6,9 +6,20 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
-var _get2 = _interopRequireDefault(require("lodash/get"));
+var _get = _interopRequireDefault(require("lodash/get"));
 var _set = _interopRequireDefault(require("lodash/set"));
 var _utils = require("../utils");
+function getErrorMessage(error) {
+  var _error$array;
+  /**
+   * When using some components as the field, such as TagInput, and using `ArrayType().of` as the validation rule,
+   * the error object won't contain the errorMessage directly. @see https://github.com/rsuite/rsuite/issues/3866
+   */
+  if (error !== null && error !== void 0 && error.array && ((_error$array = error.array) === null || _error$array === void 0 ? void 0 : _error$array.length) > 0) {
+    return error.array[0].errorMessage;
+  }
+  return error === null || error === void 0 ? void 0 : error.errorMessage;
+}
 function useField(props) {
   var name = props.name,
     formValue = props.formValue,
@@ -21,21 +32,20 @@ function useField(props) {
     if (typeof value !== 'undefined') {
       return value;
     }
-    return nestedField ? (0, _get2.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
+    return nestedField ? (0, _get.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
   }, [formValue, name, nestedField, value]);
   var fieldError = (0, _react.useMemo)(function () {
     if (typeof errorMessage !== 'undefined' || !errorFromContext) {
       return errorMessage;
     }
     if (nestedField) {
-      var _get;
-      return (_get = (0, _get2.default)(formError, (0, _utils.nameToPath)(name))) === null || _get === void 0 ? void 0 : _get.errorMessage;
+      return getErrorMessage((0, _get.default)(formError, (0, _utils.nameToPath)(name)));
     }
     var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
     if (typeof fieldError === 'string') {
       return fieldError;
     }
-    return fieldError === null || fieldError === void 0 ? void 0 : fieldError.errorMessage;
+    return getErrorMessage(fieldError);
   }, [errorFromContext, errorMessage, formError, name, nestedField]);
   var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {
     var _extends2;

package/cjs/Loader/Loader.d.ts

@@ -12,7 +12,7 @@ export interface LoaderProps extends WithAsProps {
     /** Custom descriptive text */
     content?: React.ReactNode;
     /** The speed at which the loader rotates */
-    speed?: 'normal' | 'fast' | 'slow';
+    speed?: 'normal' | 'fast' | 'slow' | 'paused';
     /** A loader can have different sizes */
     size?: TypeAttributes.Size;
 }

package/cjs/Loader/Loader.js

@@ -69,6 +69,6 @@ Loader.propTypes = {
   vertical: _propTypes.default.bool,
   content: _propTypes.default.node,
   size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
-  speed: (0, _propTypes2.oneOf)(['normal', 'fast', 'slow'])
+  speed: (0, _propTypes2.oneOf)(['normal', 'fast', 'slow', 'paused'])
 };
 var _default = exports.default = Loader;

package/cjs/Tree/TreeView.d.ts

@@ -44,6 +44,10 @@ interface TreeViewInnerProps<V = string | number | null> extends Omit<TreeViewPr
      * An array of values representing the loading nodes.
      */
     loadingNodeValues?: V[];
+    /**
+     * A collection of localized strings.
+     */
+    locale?: Record<string, string>;
     /**
      * A map of flattened nodes.
      */

package/cjs/TreePicker/TreePicker.js

@@ -227,6 +227,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     flattenedNodes: flattenedNodes,
     listProps: listProps,
     listRef: list,
+    locale: overrideLocale,
     height: treeHeight,
     onExpand: handleExpandTreeNode,
     onSearch: onSearch,

package/cjs/internals/hooks/useCustom.js

@@ -17,7 +17,7 @@ var mergeObject = function mergeObject(list) {
   }, {});
 };
 var getDefaultRTL = function getDefaultRTL() {
-  return typeof window !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
+  return typeof document !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
 };
 
 /**

package/cjs/internals/hooks/useIsomorphicLayoutEffect.js

@@ -4,5 +4,5 @@
 exports.__esModule = true;
 exports.useIsomorphicLayoutEffect = exports.default = void 0;
 var _react = require("react");
-var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = typeof document !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
 var _default = exports.default = useIsomorphicLayoutEffect;