rsuite 5.58.0 → 5.59.0

package/Avatar/styles/index.css

@@ -3,22 +3,31 @@
   --rs-gray-0: #fff;
   --rs-gray-300: #d9d9d9;
   --rs-gray-400: #c5c6c7;
+  --rs-gray-900: #272c36;
   --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);
 }
 .rs-theme-dark {
   --rs-gray-0: #fff;
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
+  --rs-gray-900: #0f131a;
   --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);
 }
 .rs-theme-high-contrast {
   --rs-gray-0: #fff;
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
+  --rs-gray-900: #0f131a;
   --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);
 }
 /* stylelint-disable */
 *[class*='rs-'] {
@@ -74,13 +83,47 @@
   background: var(--rs-avatar-bg);
   text-align: center;
   padding: 0 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+}
+.rs-avatar-icon {
+  position: absolute;
+}
+.rs-avatar-bordered {
+  --rs-ring-offset-shadow: var(--rs-avatar-offset-color) 0 0 0 2px;
+  --rs-ring-shadow: var(--rs-avatar-ring-color) 0 0 0 4px;
+  -webkit-box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
+          box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
 }
 .rs-avatar-circle {
   border-radius: 50%;
 }
+.rs-avatar-xxl {
+  width: 120px;
+  height: 120px;
+  font-size: 48px;
+}
+.rs-avatar-xxl > .rs-icon {
+  font-size: 84px;
+  height: 84px;
+}
+.rs-avatar-xxl > .rs-avatar-image {
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+}
+.rs-avatar-xl {
+  width: 90px;
+  height: 90px;
+  font-size: 36px;
+}
+.rs-avatar-xl > .rs-icon {
+  font-size: 63px;
+  height: 63px;
+}
+.rs-avatar-xl > .rs-avatar-image {
+  width: 90px;
+  height: 90px;
+  line-height: 90px;
+}
 .rs-avatar-lg {
   width: 60px;
   height: 60px;
@@ -123,5 +166,33 @@
   height: 20px;
   line-height: 20px;
 }
+.rs-avatar-red {
+  --rs-avatar-bg: var(--rs-red-500);
+  --rs-avatar-ring-color: var(--rs-red-500);
+}
+.rs-avatar-orange {
+  --rs-avatar-bg: var(--rs-orange-500);
+  --rs-avatar-ring-color: var(--rs-orange-500);
+}
+.rs-avatar-yellow {
+  --rs-avatar-bg: var(--rs-yellow-500);
+  --rs-avatar-ring-color: var(--rs-yellow-500);
+}
+.rs-avatar-green {
+  --rs-avatar-bg: var(--rs-green-500);
+  --rs-avatar-ring-color: var(--rs-green-500);
+}
+.rs-avatar-cyan {
+  --rs-avatar-bg: var(--rs-cyan-500);
+  --rs-avatar-ring-color: var(--rs-cyan-500);
+}
+.rs-avatar-blue {
+  --rs-avatar-bg: var(--rs-blue-500);
+  --rs-avatar-ring-color: var(--rs-blue-500);
+}
+.rs-avatar-violet {
+  --rs-avatar-bg: var(--rs-violet-500);
+  --rs-avatar-ring-color: var(--rs-violet-500);
+}
 
 /*# sourceMappingURL=index.css.map */

package/Avatar/styles/index.less

@@ -28,14 +28,31 @@
       background: var(--rs-avatar-bg);
       text-align: center;
       padding: 0 2px;
-      .ellipsis-basic();
     }
   }
 
+  &-icon {
+    position: absolute;
+  }
+
+  &-bordered {
+    --rs-ring-offset-shadow: var(--rs-avatar-offset-color) 0 0 0 2px;
+    --rs-ring-shadow: var(--rs-avatar-ring-color) 0 0 0 4px;
+    box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
+  }
+
   &-circle {
     border-radius: 50%;
   }
 
+  &-xxl {
+    .avatar-xxl();
+  }
+
+  &-xl {
+    .avatar-xl();
+  }
+
   &-lg {
     .avatar-lg();
   }
@@ -48,3 +65,10 @@
     .avatar-xs();
   }
 }
+
+each(@spectrum, .(@color) {
+  .rs-avatar-@{color} {
+    --rs-avatar-bg: var(~'--rs-@{color}-500');
+    --rs-avatar-ring-color: var(~'--rs-@{color}-500');
+  }
+});

package/Avatar/styles/mixin.less

@@ -17,6 +17,14 @@
   }
 }
 
+.avatar-xxl() {
+  .avatar-size(@avatar-size-xxl, @avatar-font-size-xxl);
+}
+
+.avatar-xl() {
+  .avatar-size(@avatar-size-xl, @avatar-font-size-xl);
+}
+
 .avatar-lg() {
   .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
 }

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [5.59.0](https://github.com/rsuite/rsuite/compare/v5.58.1...v5.59.0) (2024-04-03)
+
+
+### Bug Fixes
+
+* **DatePicker,DateRangePicker:** fix the date change when the input date is incomplete ([#3719](https://github.com/rsuite/rsuite/issues/3719)) ([24f162f](https://github.com/rsuite/rsuite/commit/24f162f6ee403dbca0829159f3a099167b278bcf))
+* **Drawer:** fix the focus cannot be moved to elements outside the Drawer when `backdrop=false` ([#3716](https://github.com/rsuite/rsuite/issues/3716)) ([f044445](https://github.com/rsuite/rsuite/commit/f044445e97d653debcb1772a70c51b4a30d44f6b))
+
+
+### Features
+
+* **Avatar:** add support for `bordered` and `color` props ([#3711](https://github.com/rsuite/rsuite/issues/3711)) ([3ca7dc1](https://github.com/rsuite/rsuite/commit/3ca7dc1eeaf46461fff107012dac972d4ef20c1b))
+
+
+
+## [5.58.1](https://github.com/rsuite/rsuite/compare/v5.58.0...v5.58.1) (2024-03-28)
+
+
+### Bug Fixes
+
+* fix build errors caused by export type ([#3712](https://github.com/rsuite/rsuite/issues/3712)) ([94e9ef4](https://github.com/rsuite/rsuite/commit/94e9ef423c7722ecfa4ed3d72a320b38f13a0c6d))
+
+
+
 # [5.58.0](https://github.com/rsuite/rsuite/compare/v5.57.0...v5.58.0) (2024-03-28)
 
 

package/Drawer/styles/index.css

@@ -108,6 +108,9 @@
   width: 100%;
   height: 100%;
 }
+.rs-drawer-wrapper.rs-drawer-no-backdrop {
+  pointer-events: none;
+}
 .rs-drawer {
   display: none;
   overflow: hidden;
@@ -117,6 +120,7 @@
   -webkit-box-shadow: var(--rs-drawer-shadow);
           box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
           box-shadow: var(--rs-drawer-shadow);
+  pointer-events: auto;
   outline: 0;
 }
 .rs-drawer-open.rs-drawer-has-backdrop {

package/Drawer/styles/index.less

@@ -9,6 +9,10 @@
   left: 0;
   width: 100%;
   height: 100%;
+
+  &.rs-drawer-no-backdrop {
+    pointer-events: none;
+  }
 }
 
 // Container that the drawer scrolls within
@@ -18,6 +22,7 @@
   position: fixed;
   z-index: @zindex-drawer;
   box-shadow: var(--rs-drawer-shadow);
+  pointer-events: auto;
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
   outline: 0;

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

@@ -5,53 +5,79 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _AvatarGroup = require("../AvatarGroup/AvatarGroup");
 var _propTypes2 = require("../internals/propTypes");
-var _templateObject;
+var _AvatarIcon = _interopRequireDefault(require("./AvatarIcon"));
+var _useImage2 = _interopRequireDefault(require("./useImage"));
+var _templateObject, _templateObject2;
 /**
  * The Avatar component is used to represent user or brand.
  * @see https://rsuitejs.com/components/avatar
  */
 var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
-    _props$as = props.as,
+  var _useContext = (0, _react.useContext)(_AvatarGroup.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "as", "size", "className", "children", "src", "srcSet", "sizes", "imgProps", "circle", "alt"]);
-  var _useContext = (0, _react.useContext)(_AvatarGroup.AvatarGroupContext),
-    size = _useContext.size;
+    onError = props.onError,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "imgProps", "onError"]);
   var _useClassNames = (0, _utils.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 = (0, _extends2.default)({}, imgProps, {
+    alt: alt,
+    src: src,
+    srcSet: srcSet,
+    sizes: sizes
+  });
+  var _useImage = (0, _useImage2.default)((0, _extends2.default)({}, imageProps, {
+      onError: onError
+    })),
+    loaded = _useImage.loaded;
+  var altComponent = (0, _react.useMemo)(function () {
+    if (alt) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        role: "img",
+        "aria-label": alt
+      }, alt);
+    }
+    return null;
+  }, [alt]);
+  var placeholder = children || altComponent || /*#__PURE__*/_react.default.createElement(_AvatarIcon.default, {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["icon"])))
+  });
+  var image = loaded ? /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, imageProps, {
+    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["image"])))
+  })) : placeholder;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
-  }), src || srcSet ? /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, imgProps, {
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["image"]))),
-    src: src,
-    sizes: sizes,
-    srcSet: srcSet,
-    alt: alt
-  })) : children);
+  }), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';
 Avatar.propTypes = {
@@ -59,7 +85,7 @@ Avatar.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.node,
-  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
+  size: (0, _propTypes2.oneOf)(['xxl', 'xl', 'lg', 'md', 'sm', 'xs']),
   src: _propTypes.default.string,
   sizes: _propTypes.default.string,
   srcSet: _propTypes.default.string,

package/cjs/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/cjs/Avatar/AvatarIcon.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var AvatarIcon = function AvatarIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    role: "img",
+    "aria-label": "Avatar",
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    height: "60%",
+    width: "60%"
+  }, props), /*#__PURE__*/_react.default.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"
+  }));
+};
+var _default = AvatarIcon;
+exports.default = _default;

package/cjs/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/cjs/Avatar/useImage.js

@@ -0,0 +1,75 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("../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 = (0, _react.useState)('pending'),
+    status = _useState[0],
+    setStatus = _useState[1];
+  var imgRef = (0, _react.useRef)(null);
+  var flush = function flush() {
+    if (imgRef.current) {
+      imgRef.current.onload = null;
+      imgRef.current.onerror = null;
+      imgRef.current = null;
+    }
+  };
+  var handleLoad = (0, _react.useCallback)(function () {
+    setStatus('loaded');
+    flush();
+  }, []);
+  var handleError = (0, _react.useCallback)(function (event) {
+    setStatus('error');
+    flush();
+    onError === null || onError === void 0 ? void 0 : onError(event);
+  }, [onError]);
+  (0, _react.useEffect)(function () {
+    setStatus(src ? 'loading' : 'pending');
+  }, [src]);
+  var loadImge = (0, _react.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]);
+  (0, _utils.useIsomorphicLayoutEffect)(function () {
+    if (status === 'loading') {
+      loadImge();
+    }
+  }, [loadImge, status]);
+  (0, _react.useEffect)(function () {
+    return flush;
+  }, []);
+  console.log('status', status);
+  return {
+    loaded: status === 'loaded',
+    status: status
+  };
+};
+var _default = useImage;
+exports.default = _default;

package/cjs/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/cjs/DateInput/DateField.js

@@ -180,6 +180,11 @@ 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/cjs/Heading/index.d.ts

@@ -1,3 +1,3 @@
 import Heading from './Heading';
-export { type HeadingProps } from './Heading';
+export type { HeadingProps } from './Heading';
 export default Heading;

package/cjs/Heading/index.js

@@ -1,10 +1,9 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = exports.HeadingProps = void 0;
-var _Heading = _interopRequireWildcard(require("./Heading"));
-exports.HeadingProps = _Heading.HeadingProps;
+exports.default = void 0;
+var _Heading = _interopRequireDefault(require("./Heading"));
 var _default = _Heading.default;
 exports.default = _default;