@atlaskit/avatar-group 9.3.6 → 9.4.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/avatar-group
 
+## 9.4.1
+
+### Patch Changes
+
+- [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
+- Updated dependencies
+
+## 9.4.0
+
+### Minor Changes
+
+- [`da7b6be2540`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da7b6be2540) - Fixed keyboard support for the interactive element. Changed span to button for avatar-group
+
 ## 9.3.6
 
 ### Patch Changes

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

@@ -29,8 +29,13 @@ var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var CustomComponent = function CustomComponent(_ref) {
     var children = _ref.children,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    return /*#__PURE__*/_react.default.createElement("span", props, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      _react.default.createElement("button", (0, _extends2.default)({
+        type: "button"
+      }, props), children)
+    );
   };
   var AvatarIcon = /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({}, rest, {
     testId: testId && "".concat(testId, "--avatar"),

package/dist/cjs/components/more-indicator.js

@@ -25,7 +25,7 @@ var FONT_SIZE = {
   xxlarge: '16px'
 };
 var buttonActiveStyles = (0, _react2.css)({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
     boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(_colors.B300, ")")),
@@ -42,7 +42,7 @@ var buttonActiveStyles = (0, _react2.css)({
   }
 });
 var buttonStyles = (0, _react2.css)({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     color: "var(--ds-text, ".concat(_colors.N500, ")"),

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

@@ -21,8 +21,13 @@ const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     ...props
   }) => {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    return /*#__PURE__*/React.createElement("span", props, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      React.createElement("button", _extends({
+        type: "button"
+      }, props), children)
+    );
   };
   const AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
     testId: testId && `${testId}--avatar`,

package/dist/es2019/components/more-indicator.js

@@ -13,7 +13,7 @@ const FONT_SIZE = {
   xxlarge: '16px'
 };
 const buttonActiveStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: `var(--ds-background-selected, ${B50})`,
     boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-selected, ${B300})`}`,
@@ -30,7 +30,7 @@ const buttonActiveStyles = css({
   }
 });
 const buttonStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: `var(--ds-background-neutral, ${N20})`,
     color: `var(--ds-text, ${N500})`,

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

@@ -19,8 +19,13 @@ var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var CustomComponent = function CustomComponent(_ref) {
     var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded2);
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    return /*#__PURE__*/React.createElement("span", props, children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      React.createElement("button", _extends({
+        type: "button"
+      }, props), children)
+    );
   };
   var AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
     testId: testId && "".concat(testId, "--avatar"),

package/dist/esm/components/more-indicator.js

@@ -15,7 +15,7 @@ var FONT_SIZE = {
   xxlarge: '16px'
 };
 var buttonActiveStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
     boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-selected, ".concat(B300, ")")),
@@ -32,7 +32,7 @@ var buttonActiveStyles = css({
   }
 });
 var buttonStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
     color: "var(--ds-text, ".concat(N500, ")"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.3.6",
+  "version": "9.4.1",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,9 +26,9 @@
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/menu": "^1.9.0",
-    "@atlaskit/popup": "^1.8.0",
+    "@atlaskit/popup": "^1.9.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.12.0",
+    "@atlaskit/tokens": "^1.15.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -48,6 +48,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",

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

@@ -0,0 +1,78 @@
+## 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 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';
+
+// @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>, 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>;
+    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)
+
+```

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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