rsuite 5.58.1 → 5.59.1

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/AvatarGroup/styles/index.css

@@ -20,6 +20,8 @@
   -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;

package/AvatarGroup/styles/index.less

@@ -4,6 +4,8 @@
 .rs-avatar-group {
   display: flex;
   align-items: flex-end;
+  flex-wrap: wrap;
+
   &-stack {
     .rs-avatar {
       box-sizing: content-box;

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [5.59.1](https://github.com/rsuite/rsuite/compare/v5.59.0...v5.59.1) (2024-04-12)
+
+
+### Bug Fixes
+
+* **AvatarGroup:** fix avatar deformation in group ([#3727](https://github.com/rsuite/rsuite/issues/3727)) ([466e428](https://github.com/rsuite/rsuite/commit/466e4285d794f081f90e79fc28e8f57783c438c1))
+* **Checkbox:** fix Checkbox not clickable in Firefox ([#3728](https://github.com/rsuite/rsuite/issues/3728)) ([2fc23aa](https://github.com/rsuite/rsuite/commit/2fc23aa841532f4340f5bef9a7a70009b912a4b9))
+* **docs:** typo on Form name ([#3723](https://github.com/rsuite/rsuite/issues/3723)) ([8f328e1](https://github.com/rsuite/rsuite/commit/8f328e10e16cbe978aa6737baefa67ca2b4f6867))
+* **Placeholder:** fix Placeholder SSR and CSR mismatch ([#3735](https://github.com/rsuite/rsuite/issues/3735)) ([8a9c8bd](https://github.com/rsuite/rsuite/commit/8a9c8bd81003b54f930e3dfd4f99356db44f125f))
+* **Sidenav:** fix secondary menu cannot expand ([#3732](https://github.com/rsuite/rsuite/issues/3732)) ([d680fa3](https://github.com/rsuite/rsuite/commit/d680fa3b7b498c72148ccff95b5ea1ad10ad7382))
+* remove debug code ([#3720](https://github.com/rsuite/rsuite/issues/3720)) ([637b8dc](https://github.com/rsuite/rsuite/commit/637b8dc6bb19a6775eda692534282a0dce1ebfbc))
+
+
+
+# [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)
 
 

package/CheckPicker/styles/index.css

@@ -456,6 +456,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/CheckTree/styles/index.css

@@ -3173,6 +3173,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/CheckTreePicker/styles/index.css

@@ -3173,6 +3173,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/Checkbox/styles/index.css

@@ -207,6 +207,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/Checkbox/styles/index.less

@@ -86,6 +86,8 @@
     right: -@checkbox-sense-width;
     bottom: -@checkbox-sense-width;
     left: -@checkbox-sense-width;
+    min-width: 36px;
+    min-height: 36px;
   }
 
   &::before,

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/MultiCascadeTree/styles/index.css

@@ -3367,6 +3367,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/MultiCascader/styles/index.css

@@ -3385,6 +3385,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/Placeholder/styles/index.css

@@ -119,12 +119,40 @@
   background: var(--rs-bg-card);
   position: absolute;
 }
-.rs-placeholder-paragraph-rows {
+.rs-placeholder-paragraph-group {
   width: 100%;
 }
-.rs-placeholder-paragraph-rows > p {
+.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-row {
   background-color: #f2f2f5;
   background-color: var(--rs-placeholder);
+  width: 100%;
 }
 .rs-placeholder-grid-col {
   -webkit-box-flex: 1;
@@ -141,15 +169,23 @@
       -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%;

package/Placeholder/styles/index.less

@@ -1,4 +1,5 @@
-@import '../../styles/common';
+@import '../../styles/common.less';
+@import './mixin.less';
 
 //
 // Placeholder
@@ -67,15 +68,21 @@
       }
     }
 
-    &-rows {
+    &-group {
       width: 100%;
+    }
 
-      & > p {
-        background-color: var(--rs-placeholder);
-      }
+    .rs-placeholder-row {
+      @widths: 100% 50% 80% 65% 90% 70% 85% 60% 75%;
+      .generate-row-width(@widths, length(@widths));
     }
   }
 
+  &-row {
+    background-color: var(--rs-placeholder);
+    width: 100%;
+  }
+
   &-grid {
     &-col {
       flex: 1;
@@ -83,13 +90,15 @@
       flex-direction: column;
       align-items: flex-end;
 
-      & > p {
-        background-color: var(--rs-placeholder);
-      }
-
       &:first-child {
         align-items: flex-start; //first col align left
       }
+
+      .rs-placeholder-row {
+        width: 30%;
+        @widths: 50% 25% 35%;
+        .generate-row-width(@widths, length(@widths));
+      }
     }
   }
 

package/Placeholder/styles/mixin.less

@@ -0,0 +1,7 @@
+.generate-row-width(@widths, @n) when (@n > 0) {
+  &:nth-child(@{n}) {
+    width: extract(@widths, @n);
+  }
+
+  .generate-row-width(@widths, @n - 1);
+}

package/Sidenav/styles/index.css

@@ -154,6 +154,9 @@
   -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;

package/Sidenav/styles/index.less

@@ -34,6 +34,10 @@
     });
   }
 
+  .rs-dropdown-item {
+    display: block;
+  }
+
   > .rs-sidenav-item,
   > .rs-dropdown {
     margin: 0 !important;

package/TagInput/styles/index.css

@@ -469,6 +469,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/TagPicker/styles/index.css

@@ -469,6 +469,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

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,87 @@ 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 _extends3 = _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 _extends2;
+  var _useContext = (0, _react.useContext)(_AvatarGroup.AvatarGroupContext),
+    groupSize = _useContext.size,
+    spacing = _useContext.spacing;
+  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,
+    style = props.style,
     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", "style", "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
   }));
-  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"]))),
+  var imageProps = (0, _extends3.default)({}, imgProps, {
+    alt: alt,
     src: src,
-    sizes: sizes,
     srcSet: srcSet,
-    alt: alt
-  })) : children);
+    sizes: sizes
+  });
+  var _useImage = (0, _useImage2.default)((0, _extends3.default)({}, imageProps, {
+      onError: onError
+    })),
+    loaded = _useImage.loaded;
+  var _useCustom = (0, _utils.useCustom)('Avatar'),
+    rtl = _useCustom.rtl;
+  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, _extends3.default)({}, imageProps, {
+    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["image"])))
+  })) : placeholder;
+  var margin = rtl ? 'marginLeft' : 'marginRight';
+  var insertStyles = (0, _utils.isIE)() && spacing ? (0, _extends3.default)((_extends2 = {}, _extends2[margin] = spacing, _extends2), style) : style;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
+    ref: ref,
+    className: classes,
+    style: insertStyles
+  }), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';
 Avatar.propTypes = {
@@ -59,7 +93,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,