@atlaskit/avatar-group 9.4.5 → 9.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 9.5.0
+
+### Minor Changes
+
+- [#61786](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61786) [`937861329875`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/937861329875) - Added the `shouldPopupRenderToParent` prop which determines if `shouldRenderToParent` is applied to the avatar group's popup.
+
+## 9.4.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.4.5
 
 ### Patch Changes

package/dist/cjs/components/avatar-group.js

@@ -81,7 +81,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'avatar group' : _ref$label,
     _ref$tooltipPosition = _ref.tooltipPosition,
-    tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
+    tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
+    _ref$shouldPopupRende = _ref.shouldPopupRenderToParent,
+    shouldPopupRenderToParent = _ref$shouldPopupRende === void 0 ? false : _ref$shouldPopupRende;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -189,6 +191,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       rootBoundary: rootBoundary,
       shouldFlip: true,
       zIndex: _constants.layers.modal(),
+      shouldRenderToParent: shouldPopupRenderToParent,
       content: function content(_ref2) {
         var setInitialFocusRef = _ref2.setInitialFocusRef;
         return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_popupAvatarGroup.default, {

package/dist/es2019/components/avatar-group.js

@@ -63,7 +63,8 @@ const AvatarGroup = ({
   size = 'medium',
   testId,
   label = 'avatar group',
-  tooltipPosition = 'bottom'
+  tooltipPosition = 'bottom',
+  shouldPopupRenderToParent = false
 }) => {
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -163,6 +164,7 @@ const AvatarGroup = ({
       rootBoundary: rootBoundary,
       shouldFlip: true,
       zIndex: layers.modal(),
+      shouldRenderToParent: shouldPopupRenderToParent,
       content: ({
         setInitialFocusRef
       }) => jsx(FocusManager, null, jsx(PopupAvatarGroup, {

package/dist/esm/components/avatar-group.js

@@ -75,7 +75,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'avatar group' : _ref$label,
     _ref$tooltipPosition = _ref.tooltipPosition,
-    tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
+    tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
+    _ref$shouldPopupRende = _ref.shouldPopupRenderToParent,
+    shouldPopupRenderToParent = _ref$shouldPopupRende === void 0 ? false : _ref$shouldPopupRende;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -183,6 +185,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       rootBoundary: rootBoundary,
       shouldFlip: true,
       zIndex: layers.modal(),
+      shouldRenderToParent: shouldPopupRenderToParent,
       content: function content(_ref2) {
         var setInitialFocusRef = _ref2.setInitialFocusRef;
         return jsx(FocusManager, null, jsx(PopupAvatarGroup, {

package/dist/types/components/avatar-group.d.ts

@@ -96,6 +96,10 @@ export interface AvatarGroupProps {
      * When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
      */
     label?: string;
+    /**
+     * Determines whether the 'show more' popup has `shouldRenderToParent` applied.
+     */
+    shouldPopupRenderToParent?: boolean;
 }
 /**
  * __Avatar group__
@@ -106,5 +110,5 @@ export interface AvatarGroupProps {
  * - [Code](https://atlassian.design/components/avatar-group/code)
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
  */
-declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;

package/dist/types-ts4.5/components/avatar-group.d.ts

@@ -96,6 +96,10 @@ export interface AvatarGroupProps {
      * When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
      */
     label?: string;
+    /**
+     * Determines whether the 'show more' popup has `shouldRenderToParent` applied.
+     */
+    shouldPopupRenderToParent?: boolean;
 }
 /**
  * __Avatar group__
@@ -106,5 +110,5 @@ export interface AvatarGroupProps {
  * - [Code](https://atlassian.design/components/avatar-group/code)
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
  */
-declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.4.5",
+  "version": "9.5.0",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,8 +31,8 @@
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/popup": "^1.11.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
-    "@atlaskit/tooltip": "^17.8.0",
+    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"
@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ssr": "*",

package/tmp/api-report-tmp.d.ts

@@ -1,80 +0,0 @@
-## API Report File for "@atlaskit/avatar-group"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import type { AnalyticsEvent } from '@atlaskit/analytics-next';
-import Avatar from '@atlaskit/avatar';
-import { AvatarPropTypes } from '@atlaskit/avatar';
-import { default as default_2 } from '@atlaskit/avatar';
-import { ElementType } from 'react';
-import { jsx } from '@emotion/react';
-import { MouseEventHandler } from 'react';
-import { PositionType } from '@atlaskit/tooltip';
-import type { ReactNode } from 'react';
-import { SizeType } from '@atlaskit/avatar';
-
-// @public
-const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
-export default AvatarGroup;
-
-// @public (undocumented)
-interface AvatarGroupItemProps {
-    // (undocumented)
-    avatar: AvatarProps;
-    // (undocumented)
-    index: number;
-    // (undocumented)
-    isActive?: boolean;
-    // (undocumented)
-    isHover?: boolean;
-    // (undocumented)
-    onAvatarClick?: onAvatarClickHandler;
-    // (undocumented)
-    testId?: string;
-}
-
-// @public (undocumented)
-interface AvatarGroupOverrides {
-    // (undocumented)
-    Avatar?: {
-        render?: (Component: ElementType<AvatarProps> | typeof default_2, props: AvatarProps, index: number) => ReactNode;
-    };
-    // (undocumented)
-    AvatarGroupItem?: {
-        render?: (Component: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
-    };
-}
-
-// @public (undocumented)
-export interface AvatarGroupProps {
-    appearance?: 'grid' | 'stack';
-    avatar?: ElementType<AvatarProps> | typeof Avatar;
-    borderColor?: string;
-    boundariesElement?: 'scrollParent' | 'viewport' | 'window';
-    data: Array<AvatarProps>;
-    isTooltipDisabled?: boolean;
-    label?: string;
-    maxCount?: number;
-    onAvatarClick?: onAvatarClickHandler;
-    onMoreClick?: MouseEventHandler;
-    overrides?: AvatarGroupOverrides;
-    showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
-    size?: SizeType;
-    testId?: string;
-    tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
-}
-
-// @public (undocumented)
-export type AvatarProps = AvatarPropTypes & {
-    name: string;
-    key?: number | string;
-};
-
-// @public (undocumented)
-type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
-
-// (No @packageDocumentation comment for this package)
-
-```