@atlaskit/avatar-group 9.1.4 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/avatar-group
 
+## 9.2.0
+
+### Minor Changes
+
+- [`3f8f08a1888`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3f8f08a1888) - Updating Avatar-group component to position the tooltip either to top or bottom based on configuration.
+
 ## 9.1.4
 
 ### Patch Changes

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

@@ -94,7 +94,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       testId = _ref.testId,
       _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'avatar group' : _ref$label;
+      label = _ref$label === void 0 ? 'avatar group' : _ref$label,
+      _ref$tooltipPosition = _ref.tooltipPosition,
+      tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -197,7 +199,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return !isTooltipDisabled && !avatarData.isDisabled ? (0, _react2.jsx)(_tooltip.default, {
       key: (0, _utils.composeUniqueKey)(avatarData, idx),
       content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx)
+      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+      position: tooltipPosition
     }, finalAvatar) : finalAvatar;
   }), renderMoreDropdown(+maxAvatar, total));
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.1.4",
+	"version": "9.2.0",
 	"sideEffects": false
 }

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

@@ -59,7 +59,8 @@ const AvatarGroup = ({
   showMoreButtonProps = {},
   size = 'medium',
   testId,
-  label = 'avatar group'
+  label = 'avatar group',
+  tooltipPosition = 'bottom'
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const onClose = useCallback(() => setIsOpen(false), []);
@@ -144,7 +145,8 @@ const AvatarGroup = ({
     return !isTooltipDisabled && !avatarData.isDisabled ? jsx(Tooltip, {
       key: composeUniqueKey(avatarData, idx),
       content: avatarData.name,
-      testId: testId && `${testId}--tooltip-${idx}`
+      testId: testId && `${testId}--tooltip-${idx}`,
+      position: tooltipPosition
     }, finalAvatar) : finalAvatar;
   }), renderMoreDropdown(+maxAvatar, total));
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.1.4",
+	"version": "9.2.0",
 	"sideEffects": false
 }

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

@@ -72,7 +72,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       testId = _ref.testId,
       _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'avatar group' : _ref$label;
+      label = _ref$label === void 0 ? 'avatar group' : _ref$label,
+      _ref$tooltipPosition = _ref.tooltipPosition,
+      tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -175,7 +177,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return !isTooltipDisabled && !avatarData.isDisabled ? jsx(Tooltip, {
       key: composeUniqueKey(avatarData, idx),
       content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx)
+      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+      position: tooltipPosition
     }, finalAvatar) : finalAvatar;
   }), renderMoreDropdown(+maxAvatar, total));
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.1.4",
+	"version": "9.2.0",
 	"sideEffects": false
 }

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

@@ -2,6 +2,7 @@
 import { ElementType, MouseEventHandler } from 'react';
 import { jsx } from '@emotion/react';
 import { SizeType } from '@atlaskit/avatar';
+import { PositionType } from '@atlaskit/tooltip';
 import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
 export interface AvatarGroupProps {
     /**
@@ -74,6 +75,12 @@ export interface AvatarGroupProps {
      * Custom overrides for the composed components.
      */
     overrides?: AvatarGroupOverrides;
+    /**
+     *
+     * Where the tooltip should appear relative to its target.
+     * Defaults to tooltip position "bottom".
+     */
+    tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
     /**
      * Disables tooltips
      */
@@ -99,5 +106,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, }: AvatarGroupProps) => jsx.JSX.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.1.4",
+  "version": "9.2.0",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/avatar-group"
 
@@ -19,6 +19,7 @@ import type { AvatarPropTypes } 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';
 
@@ -38,6 +39,7 @@ const AvatarGroup: ({
   size,
   testId,
   label,
+  tooltipPosition,
 }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;
 
@@ -93,6 +95,7 @@ export interface AvatarGroupProps {
   showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
   size?: SizeType;
   testId?: string;
+  tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
 }
 
 // @public (undocumented)