rsuite 5.58.1 → 5.59.0

package/esm/Avatar/Avatar.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
+import { type Size } from '../AvatarGroup/AvatarGroup';
 export interface AvatarProps extends WithAsProps {
-    /** A avatar can have different sizes */
-    size?: TypeAttributes.Size;
+    /**
+     * A avatar can have different sizes.
+     *
+     * @default 'md'
+     * @version xxl and xs added in v5.59.0
+     */
+    size?: Size;
     /**
      * The `src` attribute for the `img` element.
      */
@@ -21,10 +27,29 @@ export interface AvatarProps extends WithAsProps {
      * It can be used to listen for the loading error event.
      */
     imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
-    /** Set avatar shape to circle  */
+    /**
+     * Set avatar shape to circle
+     */
     circle?: boolean;
-    /** This attribute defines an alternative text description of the image */
+    /**
+     * This attribute defines an alternative text description of the image
+     */
     alt?: string;
+    /**
+     * Show a border around the avatar.
+     * @version 5.59.0
+     */
+    bordered?: boolean;
+    /**
+     * Sets the avatar background color.
+     * @version 5.59.0
+     */
+    color?: TypeAttributes.Color;
+    /**
+     * Callback fired when the image failed to load.
+     * @version 5.59.0
+     */
+    onError?: OnErrorEventHandler;
 }
 /**
  * The Avatar component is used to represent user or brand.

package/esm/Avatar/Avatar.js

@@ -1,51 +1,77 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject;
-import React, { useContext } from 'react';
+var _templateObject, _templateObject2;
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import { AvatarGroupContext } from '../AvatarGroup/AvatarGroup';
 import { oneOf } from '../internals/propTypes';
+import AvatarIcon from './AvatarIcon';
+import useImage from './useImage';
 /**
  * The Avatar component is used to represent user or brand.
  * @see https://rsuitejs.com/components/avatar
  */
 var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
-    _props$as = props.as,
+  var _useContext = useContext(AvatarGroupContext),
+    groupSize = _useContext.size;
+  var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
-    sizeProp = props.size,
+    bordered = props.bordered,
+    alt = props.alt,
     className = props.className,
     children = props.children,
+    circle = props.circle,
+    color = props.color,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
+    _props$size = props.size,
+    size = _props$size === void 0 ? groupSize : _props$size,
     src = props.src,
     srcSet = props.srcSet,
     sizes = props.sizes,
     imgProps = props.imgProps,
-    circle = props.circle,
-    alt = props.alt,
-    rest = _objectWithoutPropertiesLoose(props, ["classPrefix", "as", "size", "className", "children", "src", "srcSet", "sizes", "imgProps", "circle", "alt"]);
-  var _useContext = useContext(AvatarGroupContext),
-    size = _useContext.size;
+    onError = props.onError,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "imgProps", "onError"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix(sizeProp || size, {
-    circle: circle
+  var classes = merge(className, withClassPrefix(size, color, {
+    circle: circle,
+    bordered: bordered
   }));
+  var imageProps = _extends({}, imgProps, {
+    alt: alt,
+    src: src,
+    srcSet: srcSet,
+    sizes: sizes
+  });
+  var _useImage = useImage(_extends({}, imageProps, {
+      onError: onError
+    })),
+    loaded = _useImage.loaded;
+  var altComponent = useMemo(function () {
+    if (alt) {
+      return /*#__PURE__*/React.createElement("span", {
+        role: "img",
+        "aria-label": alt
+      }, alt);
+    }
+    return null;
+  }, [alt]);
+  var placeholder = children || altComponent || /*#__PURE__*/React.createElement(AvatarIcon, {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["icon"])))
+  });
+  var image = loaded ? /*#__PURE__*/React.createElement("img", _extends({}, imageProps, {
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["image"])))
+  })) : placeholder;
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
-  }), src || srcSet ? /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["image"]))),
-    src: src,
-    sizes: sizes,
-    srcSet: srcSet,
-    alt: alt
-  })) : children);
+  }), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';
 Avatar.propTypes = {
@@ -53,7 +79,7 @@ Avatar.propTypes = {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node,
-  size: oneOf(['lg', 'md', 'sm', 'xs']),
+  size: oneOf(['xxl', 'xl', 'lg', 'md', 'sm', 'xs']),
   src: PropTypes.string,
   sizes: PropTypes.string,
   srcSet: PropTypes.string,

package/esm/Avatar/AvatarIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AvatarIcon: (props: React.HTMLAttributes<SVGElement>) => JSX.Element;
+export default AvatarIcon;

package/esm/Avatar/AvatarIcon.js

@@ -0,0 +1,18 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var AvatarIcon = function AvatarIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    role: "img",
+    "aria-label": "Avatar",
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    height: "60%",
+    width: "60%"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
+  }));
+};
+export default AvatarIcon;

package/esm/Avatar/useImage.d.ts

@@ -0,0 +1,39 @@
+import { ImgHTMLAttributes } from 'react';
+interface UseImageProps {
+    /**
+     * The image `src` attribute
+     */
+    src?: string;
+    /**
+     * The image `srcSet` attribute
+     */
+    srcSet?: string;
+    /**
+     * The image `sizes` attribute
+     */
+    sizes?: string;
+    /**
+     * The image `crossOrigin` attribute
+     */
+    crossOrigin?: ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
+    /**
+     * Callback fired when the image failed to load.
+     */
+    onError?: OnErrorEventHandler;
+}
+declare type Status = 'pending' | 'loading' | 'error' | 'loaded';
+/**
+ * A hook that loads an image and returns the status of the image.
+ *
+ * @example
+ * ```jsx
+ * const { loaded } = useImage({ src:'https://example.com/image.jpg' });
+ *
+ * return loaded ? <img src="https://example.com/image.jpg" /> : <Placeholder />;
+ * ```
+ */
+declare const useImage: (props: UseImageProps) => {
+    loaded: boolean;
+    status: Status;
+};
+export default useImage;

package/esm/Avatar/useImage.js

@@ -0,0 +1,70 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../utils';
+/**
+ * A hook that loads an image and returns the status of the image.
+ *
+ * @example
+ * ```jsx
+ * const { loaded } = useImage({ src:'https://example.com/image.jpg' });
+ *
+ * return loaded ? <img src="https://example.com/image.jpg" /> : <Placeholder />;
+ * ```
+ */
+var useImage = function useImage(props) {
+  var src = props.src,
+    srcSet = props.srcSet,
+    sizes = props.sizes,
+    crossOrigin = props.crossOrigin,
+    onError = props.onError;
+  var _useState = useState('pending'),
+    status = _useState[0],
+    setStatus = _useState[1];
+  var imgRef = useRef(null);
+  var flush = function flush() {
+    if (imgRef.current) {
+      imgRef.current.onload = null;
+      imgRef.current.onerror = null;
+      imgRef.current = null;
+    }
+  };
+  var handleLoad = useCallback(function () {
+    setStatus('loaded');
+    flush();
+  }, []);
+  var handleError = useCallback(function (event) {
+    setStatus('error');
+    flush();
+    onError === null || onError === void 0 ? void 0 : onError(event);
+  }, [onError]);
+  useEffect(function () {
+    setStatus(src ? 'loading' : 'pending');
+  }, [src]);
+  var loadImge = useCallback(function () {
+    if (!src) {
+      return;
+    }
+    var img = new Image();
+    img.onload = handleLoad;
+    img.onerror = handleError;
+    if (src) img.src = src;
+    if (srcSet) img.srcset = srcSet;
+    if (sizes) img.sizes = sizes;
+    if (crossOrigin) img.crossOrigin = crossOrigin;
+    imgRef.current = img;
+  }, [crossOrigin, handleError, handleLoad, sizes, src, srcSet]);
+  useIsomorphicLayoutEffect(function () {
+    if (status === 'loading') {
+      loadImge();
+    }
+  }, [loadImge, status]);
+  useEffect(function () {
+    return flush;
+  }, []);
+  console.log('status', status);
+  return {
+    loaded: status === 'loaded',
+    status: status
+  };
+};
+export default useImage;

package/esm/AvatarGroup/AvatarGroup.d.ts

@@ -1,15 +1,23 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+export declare type Size = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export interface AvatarGroupProps extends WithAsProps {
-    /** Render all avatars as stacks */
+    /**
+     * Render all avatars as stacks
+     */
     stack?: boolean;
-    /** Set the spacing of the avatar */
+    /**
+     * Set the spacing of the avatar
+     */
     spacing?: number;
-    /** Set the size of all avatars. */
-    size?: TypeAttributes.Size;
+    /**
+     * Set the size of all avatars.
+     * @version xxl and xs added in v5.59.0
+     */
+    size?: Size;
 }
 export declare const AvatarGroupContext: React.Context<{
-    size?: TypeAttributes.Size | undefined;
+    size?: Size | undefined;
 }>;
 /**
  * The AvatarGroup component is used to represent a collection of avatars.

package/esm/DateInput/DateField.js

@@ -174,6 +174,11 @@ export var useDateField = function useDateField(format, localize, date) {
       if (isEmptyValue(type, value)) {
         return null;
       }
+
+      // Invalid Date
+      return new Date('');
+    } else if (type === 'day' && value === 0) {
+      // Invalid Date. If the type is day and the value is 0, it is considered an invalid date.
       return new Date('');
     }
     if (type === 'meridian' && typeof hour === 'number') {

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/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.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

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