@atlaskit/avatar-group 10.0.4 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/avatar-group
 
+## 10.1.0
+
+### Minor Changes
+
+- [#174545](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174545)
+  [`102616f7c8d08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/102616f7c8d08) -
+  [ux] Add override for MoreIndicator
+
 ## 10.0.4
 
 ### Patch Changes

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

@@ -52,7 +52,12 @@ function getOverrides(overrides) {
           key: (0, _utils.composeUniqueKey)(props, index)
         }));
       }
-    }, overrides && overrides.Avatar)
+    }, overrides && overrides.Avatar),
+    MoreIndicator: _objectSpread({
+      render: function render(Component, props) {
+        return (0, _react2.jsx)(Component, props);
+      }
+    }, overrides && overrides.MoreIndicator)
   };
 }
 
@@ -169,20 +174,18 @@ var AvatarGroup = function AvatarGroup(_ref) {
         ariaHasPopup = _ref3['aria-haspopup'],
         onClick = _ref3.onClick,
         props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-      return (0, _react2.jsx)(_moreIndicator.default, (0, _extends2.default)({
+      return getOverrides(overrides).MoreIndicator.render(_moreIndicator.default, _objectSpread({
         buttonProps: showMoreButtonProps,
         borderColor: borderColor,
         count: total - max,
         size: size,
         testId: testId && "".concat(testId, "--overflow-menu--trigger"),
-        isActive: isOpen
-        // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-      }, props, {
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
+        isActive: isOpen,
+        'aria-controls': ariaControls,
+        'aria-expanded': ariaExpanded,
+        'aria-haspopup': ariaHasPopup,
         onClick: onClick
-      }));
+      }, props));
     };
 
     // bail if the consumer wants to handle onClick

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

@@ -38,6 +38,10 @@ function getOverrides(overrides) {
         key: composeUniqueKey(props, index)
       })),
       ...(overrides && overrides.Avatar)
+    },
+    MoreIndicator: {
+      render: (Component, props) => jsx(Component, props),
+      ...(overrides && overrides.MoreIndicator)
     }
   };
 }
@@ -141,20 +145,19 @@ const AvatarGroup = ({
       'aria-haspopup': ariaHasPopup,
       onClick,
       ...props
-    }) => jsx(MoreIndicator, _extends({
+    }) => getOverrides(overrides).MoreIndicator.render(MoreIndicator, {
       buttonProps: showMoreButtonProps,
       borderColor: borderColor,
       count: total - max,
       size: size,
       testId: testId && `${testId}--overflow-menu--trigger`,
-      isActive: isOpen
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    }, props, {
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHasPopup,
-      onClick: onClick
-    }));
+      isActive: isOpen,
+      'aria-controls': ariaControls,
+      'aria-expanded': ariaExpanded,
+      'aria-haspopup': ariaHasPopup,
+      onClick,
+      ...props
+    });
 
     // bail if the consumer wants to handle onClick
     if (typeof onMoreClick === 'function') {

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

@@ -46,7 +46,12 @@ function getOverrides(overrides) {
           key: composeUniqueKey(props, index)
         }));
       }
-    }, overrides && overrides.Avatar)
+    }, overrides && overrides.Avatar),
+    MoreIndicator: _objectSpread({
+      render: function render(Component, props) {
+        return jsx(Component, props);
+      }
+    }, overrides && overrides.MoreIndicator)
   };
 }
 
@@ -163,20 +168,18 @@ var AvatarGroup = function AvatarGroup(_ref) {
         ariaHasPopup = _ref3['aria-haspopup'],
         onClick = _ref3.onClick,
         props = _objectWithoutProperties(_ref3, _excluded);
-      return jsx(MoreIndicator, _extends({
+      return getOverrides(overrides).MoreIndicator.render(MoreIndicator, _objectSpread({
         buttonProps: showMoreButtonProps,
         borderColor: borderColor,
         count: total - max,
         size: size,
         testId: testId && "".concat(testId, "--overflow-menu--trigger"),
-        isActive: isOpen
-        // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-      }, props, {
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
+        isActive: isOpen,
+        'aria-controls': ariaControls,
+        'aria-expanded': ariaExpanded,
+        'aria-haspopup': ariaHasPopup,
         onClick: onClick
-      }));
+      }, props));
     };
 
     // bail if the consumer wants to handle onClick

package/dist/types/components/types.d.ts

@@ -4,6 +4,7 @@ import { type default as Avatar, type AvatarPropTypes, type SizeType } from '@at
 import { type MenuGroupProps } from '@atlaskit/menu';
 import { type ContentProps } from '@atlaskit/popup';
 import type { AvatarGroupItemProps } from './avatar-group-item';
+import { type MoreIndicatorProps } from './more-indicator';
 export type DeepRequired<T> = {
     [P in keyof T]-?: Required<T[P]>;
 };
@@ -18,6 +19,9 @@ export interface AvatarGroupOverrides {
     Avatar?: {
         render?: (Component: typeof Avatar | ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
     };
+    MoreIndicator?: {
+        render?: (Component: ForwardRefExoticComponent<MoreIndicatorProps & RefAttributes<HTMLButtonElement>>, props: MoreIndicatorProps) => ReactNode;
+    };
 }
 export type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;

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

@@ -4,6 +4,7 @@ import { type default as Avatar, type AvatarPropTypes, type SizeType } from '@at
 import { type MenuGroupProps } from '@atlaskit/menu';
 import { type ContentProps } from '@atlaskit/popup';
 import type { AvatarGroupItemProps } from './avatar-group-item';
+import { type MoreIndicatorProps } from './more-indicator';
 export type DeepRequired<T> = {
     [P in keyof T]-?: Required<T[P]>;
 };
@@ -18,6 +19,9 @@ export interface AvatarGroupOverrides {
     Avatar?: {
         render?: (Component: typeof Avatar | ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
     };
+    MoreIndicator?: {
+        render?: (Component: ForwardRefExoticComponent<MoreIndicatorProps & RefAttributes<HTMLButtonElement>>, props: MoreIndicatorProps) => ReactNode;
+    };
 }
 export type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "10.0.4",
+	"version": "10.1.0",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,18 +20,18 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Avatar group",
-			"category": "Components"
+			"category": "Images and icons"
 		},
 		"runReact18": true
 	},
 	"dependencies": {
 		"@atlaskit/avatar": "^21.17.0",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popup": "^1.29.0",
+		"@atlaskit/popup": "^1.30.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",