rsuite 5.2.1 → 5.3.0

package/Avatar/styles/index.less

@@ -9,6 +9,8 @@
   align-items: center;
   border-radius: 4px;
   overflow: hidden;
+  position: relative;
+
   .avatar-md();
 
   & > .rs-icon {
@@ -16,8 +18,6 @@
   }
 
   &-image {
-    position: relative;
-
     &::before {
       content: attr(alt);
       position: absolute;

package/AvatarGroup/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/AvatarGroup",
+  "private": true,
+  "main": "../cjs/AvatarGroup/index.js",
+  "module": "../esm/AvatarGroup/index.js",
+  "types": "../esm/AvatarGroup/index.d.ts"
+}

package/AvatarGroup/styles/index.less

@@ -0,0 +1,19 @@
+@import '../../styles/common';
+
+.rs-avatar-group {
+  display: flex;
+  align-items: flex-end;
+  &-stack {
+    .rs-avatar {
+      box-sizing: content-box;
+      margin-right: -10px;
+      transition: margin 0.15s;
+      &:last-child {
+        margin-right: 0;
+      }
+      &:hover {
+        margin-right: 0;
+      }
+    }
+  }
+}

package/Button/styles/index.less

@@ -180,6 +180,9 @@ each(@spectrum, .(@color) {
     --rs-btn-link-text: @C700;
     --rs-btn-link-hover-text: @C800;
     --rs-btn-link-active-text: @C900;
+    --rs-iconbtn-primary-addon: @C600;
+    --rs-iconbtn-primary-activated-addon: @C700;
+    --rs-iconbtn-primary-pressed-addon: @C800;
 
     .dark-mode({
       --rs-btn-primary-bg: @C700;
@@ -198,6 +201,9 @@ each(@spectrum, .(@color) {
       --rs-btn-link-text: @C500;
       --rs-btn-link-hover-text: @C400;
       --rs-btn-link-active-text: @C200;
+      --rs-iconbtn-primary-addon: @C600;
+      --rs-iconbtn-primary-activated-addon: @C500;
+      --rs-iconbtn-primary-pressed-addon: @C400;
     });
 
     .high-contrast-mode({

package/ButtonGroup/styles/index.less

@@ -1,5 +1,4 @@
 @import '../../styles/common';
-@import '../../Button/styles/mixin';
 
 //
 // Button groups
@@ -78,20 +77,3 @@
     .ellipsis-basic();
   }
 }
-
-// Sizes
-.rs-btn-group-lg .rs-btn {
-  .button-size-lg();
-}
-
-.rs-btn-group-md .rs-btn {
-  .button-size-md();
-}
-
-.rs-btn-group-sm .rs-btn {
-  .button-size-sm();
-}
-
-.rs-btn-group-xs .rs-btn {
-  .button-size-xs();
-}

package/CHANGELOG.md

@@ -1,3 +1,52 @@
+# [5.3.0](https://github.com/rsuite/rsuite/compare/5.2.4...5.3.0) (2021-12-10)
+
+### Bug Fixes
+
+- **Breadcrumb:** avoid separator key conflict with item key ([#2186](https://github.com/rsuite/rsuite/issues/2186)) ([428529a](https://github.com/rsuite/rsuite/commit/428529afb4f1c746ccebe06db3dd10438be8aa31))
+- **Button:** apply size from parent ButtonGroup ([#2194](https://github.com/rsuite/rsuite/issues/2194)) ([85e9a21](https://github.com/rsuite/rsuite/commit/85e9a21d5cbc5c4fd4e92d591a8fe0cce5f43a15))
+- **dts:** fix declaration errors in typescript strict mode ([#2130](https://github.com/rsuite/rsuite/issues/2130)) ([c31f080](https://github.com/rsuite/rsuite/commit/c31f080ea290d8420df77b406c29b89be44bef01))
+- **Modal:** fix Modal not focused when opened ([#2180](https://github.com/rsuite/rsuite/issues/2180)) ([383ea12](https://github.com/rsuite/rsuite/commit/383ea129b315590700301ef823e7a24309e8237b))
+
+### Features
+
+- **AvatarGroup:** add support for AvatarGroup ([#2195](https://github.com/rsuite/rsuite/issues/2195)) ([2647bea](https://github.com/rsuite/rsuite/commit/2647bea5fcbe7148049ed5b6fa3118e86971572e))
+- **FormControl:** allow explicit default value ([#2182](https://github.com/rsuite/rsuite/issues/2182)) ([691ee38](https://github.com/rsuite/rsuite/commit/691ee3807d567a379b3e82195d2b2d303449a466))
+- **Tree,CheckTree:** support showIndentLine on <Tree> and <CheckTree> ([#2181](https://github.com/rsuite/rsuite/issues/2181)) ([720768e](https://github.com/rsuite/rsuite/commit/720768e7ac89752f11b5387f76b1e5e36c54221d))
+
+## [5.2.4](https://github.com/rsuite/rsuite/compare/v5.2.3...v5.2.4) (2021-12-03)
+
+### Bug Fixes
+
+- **Carousel:** make onSelect prop optional ([#2170](https://github.com/rsuite/rsuite/issues/2170)) ([c4d7a63](https://github.com/rsuite/rsuite/commit/c4d7a63f4ec71ebb05d92b04bd26ebe547609dd0))
+- **DateRangePicker:** fix DateRangePicker cannot switch am/pm ([#2171](https://github.com/rsuite/rsuite/issues/2171)) ([4c55db9](https://github.com/rsuite/rsuite/commit/4c55db9a3a96927589d4366ece1f329c011ccb0f))
+- **pickers:** fix custom input in Picker cannot be focused ([#2176](https://github.com/rsuite/rsuite/issues/2176)) ([8a94bd6](https://github.com/rsuite/rsuite/commit/8a94bd6f9640995e017716fe69b68912c55e4c86))
+- **Table:** fix the column of grouping cannot be centered ([#2168](https://github.com/rsuite/rsuite/issues/2168)) ([4fbe460](https://github.com/rsuite/rsuite/commit/4fbe460da4e9744eee8589233b305b7e15295e41))
+- **tree:** expose methods for tree that can scroll the list ([#2178](https://github.com/rsuite/rsuite/issues/2178)) ([0a6f9ee](https://github.com/rsuite/rsuite/commit/0a6f9ee57ed33477472f2ad41c06d5242d3d62d5))
+
+## [5.2.3](https://github.com/rsuite/rsuite/compare/v5.2.2...v5.2.3) (2021-11-26)
+
+### Bug Fixes
+
+- **useElementResize:** fix ResizeObserver being created repeatedly ([#2161](https://github.com/rsuite/rsuite/issues/2161)) ([32e2fa7](https://github.com/rsuite/rsuite/commit/32e2fa76a396945498f198d176b630ac09a4e20d))
+- focus handler ([#2154](https://github.com/rsuite/rsuite/issues/2154)) ([3b17fbc](https://github.com/rsuite/rsuite/commit/3b17fbcae6da59ca58788c6b3aa60d79692dffa1))
+- **TagPicker:** fix tag misplacement in plaintext mode ([#2152](https://github.com/rsuite/rsuite/issues/2152)) ([6d32c71](https://github.com/rsuite/rsuite/commit/6d32c714e1b9be743d57b3ae4f1622d006e0f52c))
+
+### Performance Improvements
+
+- **Menu:** prevent uneccesary re-render when mouseove on menuitems ([#2148](https://github.com/rsuite/rsuite/issues/2148)) ([dc06498](https://github.com/rsuite/rsuite/commit/dc0649822fd68964281f44c4ec2daf84953edc63))
+
+## [5.2.2](https://github.com/rsuite/rsuite/compare/v5.2.1...v5.2.2) (2021-11-19)
+
+### Bug Fixes
+
+- **Dropdown:** dropdown item panel not rendering content ([#2128](https://github.com/rsuite/rsuite/issues/2128)) ([6631500](https://github.com/rsuite/rsuite/commit/6631500c74b0305026931a6379980fda9b587c6e))
+- **IconButton:** primary icon button with text wrong bg ([#2141](https://github.com/rsuite/rsuite/issues/2141)) ([fde0cd4](https://github.com/rsuite/rsuite/commit/fde0cd4bce84c8f5d054d1722e9dfa61de49a7fa))
+- **PanelGroup:** missing border for nested panels ([#2142](https://github.com/rsuite/rsuite/issues/2142)) ([225821f](https://github.com/rsuite/rsuite/commit/225821f2cdeba8637d70f4626f02ae1acd93eb24))
+
+### Performance Improvements
+
+- **resize:** improve the rerender performance of components after resize ([#2135](https://github.com/rsuite/rsuite/issues/2135)) ([71648ab](https://github.com/rsuite/rsuite/commit/71648ab061f7b4057675de2d0a6e08f2f8a70a61))
+
 ## [5.2.1](https://github.com/rsuite/rsuite/compare/v5.2.0...v5.2.1) (2021-11-12)
 
 ### Bug Fixes

package/CheckTreePicker/styles/index.less

@@ -59,7 +59,10 @@
       &::before {
         content: '';
         position: absolute;
-        width: (@picker-tree-arrow-down-width+ @picker-tree-arrow-down-gap + 30px); // checkbox-spacing = 30
+        width: (
+          @picker-tree-arrow-down-width + @picker-tree-arrow-down-gap + 30px
+        ); // checkbox-spacing = 30
+
         height: 100%;
         top: 0;
         margin-left: -58px; // 10px + 36px + 12px
@@ -141,6 +144,7 @@
 // node children
 .rs-check-tree-node-children {
   > .rs-check-tree-children {
+    position: relative;
     display: none;
 
     .rs-check-tree-open& {
@@ -149,6 +153,15 @@
   }
 }
 
+.rs-check-tree-indent-line {
+  height: 100%;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  margin-left: -13px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 .rs-picker-menu {
   display: flex;
   flex-direction: column;

package/PanelGroup/styles/index.less

@@ -14,21 +14,21 @@
   }
 
   // Panel in Panel group haven't border.
-  .rs-panel {
+  > .rs-panel {
     border: none;
-  }
 
-  // Draw a split line for panel
-  .rs-panel + .rs-panel {
-    position: relative;
+    // Draw a split line for panel
+    & + .rs-panel {
+      position: relative;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      border-top: 1px solid var(--rs-border-primary);
-      left: 20px;
-      right: 20px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        border-top: 1px solid var(--rs-border-primary);
+        left: 20px;
+        right: 20px;
+      }
     }
   }
 }

package/Table/styles/index.less

@@ -342,10 +342,6 @@
     &-cell {
       position: absolute;
       border-right: 1px solid var(--rs-border-secondary);
-
-      &-content {
-        display: table-cell;
-      }
     }
   }
 }

package/TreePicker/styles/index.less

@@ -202,6 +202,7 @@
 // node children
 .rs-tree-node-children {
   > .rs-tree-children {
+    position: relative;
     display: none;
 
     .rs-tree-open& {
@@ -210,6 +211,15 @@
   }
 }
 
+.rs-tree-indent-line {
+  height: 100%;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  margin-left: -13px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 .rs-picker-menu {
   display: flex;
   flex-direction: column;

package/cjs/@types/common.d.ts

@@ -22,23 +22,23 @@ export interface RsRefForwardingComponent<T extends React.ElementType, P = unkno
 }
 export interface AnimationEventProps {
     /** Callback fired before the Modal transitions in */
-    onEnter?: (node?: null | Element | Text) => void;
+    onEnter?: (node: HTMLElement) => void;
     /** Callback fired as the Modal begins to transition in */
-    onEntering?: (node?: null | Element | Text) => void;
+    onEntering?: (node: HTMLElement) => void;
     /** Callback fired after the Modal finishes transitioning in */
-    onEntered?: (node?: null | Element | Text) => void;
+    onEntered?: (node: HTMLElement) => void;
     /** Callback fired right before the Modal transitions out */
-    onExit?: (node?: null | Element | Text) => void;
+    onExit?: (node: HTMLElement) => void;
     /** Callback fired as the Modal begins to transition out */
-    onExiting?: (node?: null | Element | Text) => void;
+    onExiting?: (node: HTMLElement) => void;
     /** Callback fired after the Modal finishes transitioning out */
-    onExited?: (node?: null | Element | Text) => void;
+    onExited?: (node: HTMLElement) => void;
 }
 export declare type PickerAppearance = 'default' | 'subtle';
 export interface PickerBaseProps<LocaleType = any> extends WithAsProps, AnimationEventProps {
     id?: string;
     /** Custom locale */
-    locale?: LocaleType;
+    locale?: Partial<LocaleType>;
     /** A picker can have different appearances. */
     appearance?: PickerAppearance;
     /** Format picker to appear inside a content block */
@@ -111,7 +111,7 @@ export interface FormControlPickerProps<ValueType = any, LocaleType = any, DataT
     /** Set children key in data */
     childrenKey?: string;
     /** Disabled items */
-    disabledItemValues?: ToArray<ValueType>;
+    disabledItemValues?: ToArray<NonNullable<ValueType>>;
     /** Initial value */
     defaultValue?: ValueType;
     /** Current value of the component. Creates a controlled component */
@@ -148,4 +148,5 @@ export interface Offset {
     width?: number;
     height?: number;
 }
+export declare type OnChangeCallback<T, E = React.SyntheticEvent> = (value: T, event: E) => void;
 export {};

package/cjs/@types/utils.d.ts

@@ -9,3 +9,15 @@ export declare type Pick<T, K extends keyof T> = {
 export declare type Exclude<T, U> = T extends U ? never : T;
 export declare type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
 export declare type ReplaceProps<Inner extends React.ElementType, P> = Omit<React.ComponentPropsWithRef<Inner>, P> & P;
+/**
+ * Prepend arguments to function
+ * Useful for prepend `newValue` arg to native `onChange` callbacks
+ *
+ * @see https://stackoverflow.com/a/69668215
+ * @example
+ *
+ * type SomeFunc = (a: string, b: number, c: someCustomType) => number;
+ * type SomeFuncAltered = PrependParameters<SomeFunc, [d: number]>;
+ * // SomeFuncAltered = (d: number, a:string, b:number, c:someCustomType) => number;
+ */
+export declare type PrependParameters<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...TParameters, ...Parameters<TFunction>]) => ReturnType<TFunction>;

package/cjs/Affix/Affix.js

@@ -78,11 +78,11 @@ function useFixed(offset, containerOffset, props) {
 
     var scrollY = window.scrollY || window.pageYOffset; // When the scroll distance exceeds the element's top value, it is fixed.
 
-    var nextFixed = scrollY - (offset.top - top) >= 0; // If the current element is specified in the container,
+    var nextFixed = scrollY - (Number(offset.top) - Number(top)) >= 0; // If the current element is specified in the container,
     // add to determine whether the current container is in the window range.
 
     if (containerOffset) {
-      nextFixed = nextFixed && scrollY < containerOffset.top + containerOffset.height;
+      nextFixed = nextFixed && scrollY < Number(containerOffset.top) + Number(containerOffset.height);
     }
 
     if (nextFixed !== fixed) {
@@ -123,8 +123,8 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var classes = merge(className, (_merge = {}, _merge[withClassPrefix()] = fixed, _merge));
   var placeholderStyles = fixed ? {
-    width: offset.width,
-    height: offset.height
+    width: offset === null || offset === void 0 ? void 0 : offset.width,
+    height: offset === null || offset === void 0 ? void 0 : offset.height
   } : undefined;
   var fixedStyles = {
     position: 'fixed',
@@ -133,7 +133,7 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     width: offset === null || offset === void 0 ? void 0 : offset.width,
     zIndex: 10
   };
-  var affixStyles = fixed ? fixedStyles : null;
+  var affixStyles = fixed ? fixedStyles : undefined;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: (0, _utils.mergeRefs)(mountRef, ref)
   }), /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Animation/Transition.d.ts

@@ -36,7 +36,7 @@ interface TransitionState {
 }
 export declare const transitionPropTypes: {
     animation: PropTypes.Requireable<boolean>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     className: PropTypes.Requireable<string>;
     in: PropTypes.Requireable<boolean>;
     unmountOnExit: PropTypes.Requireable<boolean>;
@@ -53,10 +53,13 @@ export declare const transitionPropTypes: {
     onExiting: PropTypes.Requireable<(...args: any[]) => any>;
     onExited: PropTypes.Requireable<(...args: any[]) => any>;
 };
+declare type EventToken = {
+    off: () => void;
+};
 declare class Transition extends React.Component<TransitionProps, TransitionState> {
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
         in: PropTypes.Requireable<boolean>;
         unmountOnExit: PropTypes.Requireable<boolean>;
@@ -77,26 +80,32 @@ declare class Transition extends React.Component<TransitionProps, TransitionStat
     static defaultProps: {
         timeout: number;
     };
-    animationEventListener: any;
-    instanceElement: any;
-    nextCallback: any;
-    needsUpdate: any;
+    animationEventListener: EventToken | null;
+    instanceElement: HTMLElement | null;
+    nextCallback: {
+        (event?: React.AnimationEvent): void;
+        cancel: () => any;
+    } | null;
+    needsUpdate: boolean | null;
     childRef: React.RefObject<any>;
     constructor(props: TransitionProps);
     static getDerivedStateFromProps(nextProps: TransitionProps, prevState: TransitionState): {
         status: STATUS;
-    };
-    getSnapshotBeforeUpdate(): any;
+    } | null;
+    getSnapshotBeforeUpdate(): null;
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    onTransitionEnd(node: HTMLElement, handler: React.AnimationEventHandler): void;
-    setNextCallback(callback: React.AnimationEventHandler): any;
-    getChildElement(): any;
+    onTransitionEnd(node: HTMLElement, handler: (event?: React.AnimationEvent) => void): void;
+    setNextCallback(callback: (event?: React.AnimationEvent) => void): {
+        (event?: React.AnimationEvent<Element> | undefined): void;
+        cancel: () => any;
+    };
+    getChildElement(): HTMLElement;
     performEnter(props: TransitionProps): void;
     performExit(props: TransitionProps): void;
     cancelNextCallback(): void;
-    safeSetState(nextState: TransitionState, callback: React.AnimationEventHandler): void;
+    safeSetState(nextState: TransitionState, callback: (event?: React.AnimationEvent) => void): void;
     render(): React.ReactNode;
 }
 export default Transition;

package/cjs/Animation/Transition.js

@@ -271,7 +271,10 @@ var Transition = /*#__PURE__*/function (_React$Component) {
 
   _proto.safeSetState = function safeSetState(nextState, callback) {
     if (this.instanceElement) {
-      this.setState(nextState, this.setNextCallback(callback));
+      var nextCallback = this.setNextCallback(callback);
+      this.setState(nextState, function () {
+        return nextCallback();
+      });
     }
   };
 

package/cjs/AutoComplete/AutoComplete.js

@@ -171,7 +171,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var classes = merge(className, withClassPrefix({
     disabled: disabled
   }));
-  var triggerRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef

package/cjs/AutoComplete/utils.d.ts

@@ -1,3 +1,3 @@
 import { ItemDataType } from '../@types/common';
 export declare function transformData(data: any[]): any[];
-export declare const shouldDisplay: (filterBy: (value: string, item: ItemDataType) => boolean, value: any) => (item: any) => boolean;
+export declare const shouldDisplay: (filterBy: ((value: string, item: ItemDataType) => boolean) | undefined, value: any) => (item: any) => boolean;

package/cjs/Avatar/Avatar.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 exports.__esModule = true;
 exports.default = void 0;
 
@@ -11,12 +13,14 @@ var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtim
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
+var _AvatarGroup = require("../AvatarGroup/AvatarGroup");
+
 var _templateObject;
 
 var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -24,7 +28,7 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
       _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
-      size = props.size,
+      sizeProp = props.size,
       className = props.className,
       children = props.children,
       src = props.src,
@@ -35,12 +39,15 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       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;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
       prefix = _useClassNames.prefix,
       merge = _useClassNames.merge;
 
-  var classes = merge(className, withClassPrefix(size, {
+  var classes = merge(className, withClassPrefix(sizeProp || size, {
     circle: circle
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {

package/cjs/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+export interface AvatarGroupProps extends WithAsProps {
+    /** Render all avatars as stacks */
+    stack?: boolean;
+    /** Set the spacing of the avatar */
+    spacing?: number;
+    /** Set the size of all avatars. */
+    size?: TypeAttributes.Size;
+}
+export declare const AvatarGroupContext: React.Context<{
+    size?: TypeAttributes.Size | undefined;
+}>;
+declare const AvatarGroup: RsRefForwardingComponent<'div', AvatarGroupProps>;
+export default AvatarGroup;

package/cjs/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.AvatarGroupContext = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+var AvatarGroupContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.AvatarGroupContext = AvatarGroupContext;
+
+var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'avatar-group' : _props$classPrefix,
+      spacing = props.spacing,
+      className = props.className,
+      children = props.children,
+      stack = props.stack,
+      size = props.size,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size"]);
+
+  var _useCustom = (0, _utils.useCustom)('AvatarGroup'),
+      rtl = _useCustom.rtl;
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix({
+    stack: stack
+  }));
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
+    ref: ref,
+    className: classes
+  }), /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
+    value: {
+      size: size
+    }
+  }, spacing ? _react.default.Children.map(children, function (child) {
+    var _extends2;
+
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      style: (0, _extends3.default)((_extends2 = {}, _extends2[rtl ? 'marginLeft' : 'marginRight'] = spacing, _extends2), child.props.style)
+    });
+  }) : children));
+});
+
+AvatarGroup.displayName = 'AvatarGroup';
+AvatarGroup.propTypes = {
+  as: _propTypes.default.elementType,
+  classPrefix: _propTypes.default.string,
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  stack: _propTypes.default.bool,
+  spacing: _propTypes.default.number,
+  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs'])
+};
+var _default = AvatarGroup;
+exports.default = _default;

package/cjs/AvatarGroup/index.d.ts

@@ -0,0 +1,3 @@
+import AvatarGroup from './AvatarGroup';
+export type { AvatarGroupProps } from './AvatarGroup';
+export default AvatarGroup;

package/cjs/AvatarGroup/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup"));
+
+var _default = _AvatarGroup.default;
+exports.default = _default;

package/cjs/Breadcrumb/Breadcrumb.js

@@ -52,7 +52,7 @@ var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var renderSeparator = function renderSeparator(key) {
     return /*#__PURE__*/_react.default.createElement("span", {
-      key: key,
+      key: "breadcrumb-separator-" + key,
       "aria-hidden": true,
       className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["separator"])))
     }, separator);

package/cjs/Button/Button.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 exports.__esModule = true;
 exports.default = void 0;
 
@@ -11,10 +13,12 @@ var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtim
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _ButtonGroup = require("../ButtonGroup");
+
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 
 var _Ripple = _interopRequireDefault(require("../Ripple"));
@@ -38,9 +42,11 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       loading = props.loading,
       _props$ripple = props.ripple,
       ripple = _props$ripple === void 0 ? true : _props$ripple,
-      size = props.size,
+      sizeProp = props.size,
       typeProp = props.type,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "appearance", "block", "className", "children", "classPrefix", "color", "disabled", "loading", "ripple", "size", "type"]);
+  var buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,