@atlaskit/avatar-group 9.0.4 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/avatar-group
 
+## 9.1.0
+
+### Minor Changes
+
+- [`110fb3a5f19`](https://bitbucket.org/atlassian/atlassian-frontend/commits/110fb3a5f19) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behaviour change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.4
 
 ### Patch Changes

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

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 
@@ -50,14 +50,14 @@ function getOverrides(overrides) {
   return {
     AvatarGroupItem: _objectSpread({
       render: function render(Component, props, index) {
-        return (0, _core.jsx)(Component, (0, _extends2.default)({}, props, {
+        return (0, _react2.jsx)(Component, (0, _extends2.default)({}, props, {
           key: (0, _utils.composeUniqueKey)(props.avatar, index)
         }));
       }
     }, overrides && overrides.AvatarGroupItem),
     Avatar: _objectSpread({
       render: function render(Component, props, index) {
-        return (0, _core.jsx)(Component, (0, _extends2.default)({}, props, {
+        return (0, _react2.jsx)(Component, (0, _extends2.default)({}, props, {
           key: (0, _utils.composeUniqueKey)(props, index)
         }));
       }
@@ -111,7 +111,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     }
 
     var renderMoreButton = function renderMoreButton(props) {
-      return (0, _core.jsx)(_moreIndicator.default, (0, _extends2.default)({
+      return (0, _react2.jsx)(_moreIndicator.default, (0, _extends2.default)({
         buttonProps: showMoreButtonProps,
         borderColor: borderColor,
         count: total - max,
@@ -139,7 +139,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       return boundariesElement === 'window' ? 'document' : 'viewport';
     }();
 
-    return (0, _core.jsx)(_popup.default, {
+    return (0, _react2.jsx)(_popup.default, {
       isOpen: isOpen,
       onClose: onClose,
       placement: "bottom-end",
@@ -148,13 +148,13 @@ var AvatarGroup = function AvatarGroup(_ref) {
       shouldFlip: true,
       zIndex: _constants.layers.modal(),
       content: function content() {
-        return (0, _core.jsx)(_menu.PopupMenuGroup, {
+        return (0, _react2.jsx)(_menu.PopupMenuGroup, {
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
           minWidth: 250,
           maxHeight: 300
-        }, (0, _core.jsx)(_menu.Section, null, data.slice(max).map(function (avatar, index) {
+        }, (0, _react2.jsx)(_menu.Section, null, data.slice(max).map(function (avatar, index) {
           return getOverrides(overrides).AvatarGroupItem.render(_avatarGroupItem.default, {
             avatar: avatar,
             onAvatarClick: onAvatarClick,
@@ -180,7 +180,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var total = data.length;
   var maxAvatar = total > max ? max - 1 : max;
   var Group = appearance === 'stack' ? _stack.default : _grid.default;
-  return (0, _core.jsx)(Group, {
+  return (0, _react2.jsx)(Group, {
     testId: testId && "".concat(testId, "--avatar-group"),
     "aria-label": label
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
@@ -194,7 +194,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       } : undefined,
       stackIndex: max - idx
     }), idx);
-    return !isTooltipDisabled && !avatarData.isDisabled ? (0, _core.jsx)(_tooltip.default, {
+    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)

package/dist/cjs/components/grid.js

@@ -7,14 +7,14 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var gutter = gridSize / 2;
-var listStyles = (0, _core.css)({
+var listStyles = (0, _react2.css)({
   // removes default ul styles. Needs !important to override contextual styles in product.
   display: 'flex',
   margin: 0,
@@ -26,7 +26,7 @@ var listStyles = (0, _core.css)({
   lineHeight: 1,
   listStyleType: 'none !important'
 });
-var listItemStyles = (0, _core.css)({
+var listItemStyles = (0, _react2.css)({
   margin: 0,
   marginBottom: gridSize,
   paddingRight: gutter,
@@ -37,12 +37,12 @@ var Grid = function Grid(_ref) {
   var children = _ref.children,
       testId = _ref.testId,
       label = _ref['aria-label'];
-  return (0, _core.jsx)("ul", {
+  return (0, _react2.jsx)("ul", {
     "data-testid": testId,
     "aria-label": label,
     css: listStyles
   }, _react.Children.map(children, function (child) {
-    return child && (0, _core.jsx)("li", {
+    return child && (0, _react2.jsx)("li", {
       css: listItemStyles
     }, child);
   }));

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

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
 
@@ -35,7 +35,7 @@ var FONT_SIZE = {
   xlarge: '16px',
   xxlarge: '16px'
 };
-var buttonActiveStyles = (0, _core.css)({
+var buttonActiveStyles = (0, _react2.css)({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
@@ -52,7 +52,7 @@ var buttonActiveStyles = (0, _core.css)({
     }
   }
 });
-var buttonStyles = (0, _core.css)({
+var buttonStyles = (0, _react2.css)({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
@@ -98,7 +98,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onClick(event, analyticsEvent);
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [buttonProps.onClick, onClick]);
-  return (0, _core.jsx)(_avatar.default, {
+  return (0, _react2.jsx)(_avatar.default, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,
@@ -109,7 +109,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         className = _ref2.className,
         ref = _ref2.ref,
         props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    return (0, _core.jsx)("button", (0, _extends2.default)({
+    return (0, _react2.jsx)("button", (0, _extends2.default)({
       type: "submit"
     }, buttonProps, props, {
       ref: ref,

package/dist/cjs/components/stack.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _avatar = require("@atlaskit/avatar");
 
@@ -15,7 +15,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var gutter = _avatar.BORDER_WIDTH * 2 + (0, _constants.gridSize)() / 2;
-var listStyles = (0, _core.css)({
+var listStyles = (0, _react2.css)({
   display: 'flex',
   margin: 0,
   marginRight: gutter,
@@ -23,7 +23,7 @@ var listStyles = (0, _core.css)({
   lineHeight: 1,
   listStyleType: 'none !important'
 });
-var listItemStyles = (0, _core.css)({
+var listItemStyles = (0, _react2.css)({
   margin: 0,
   marginRight: -gutter
 });
@@ -32,12 +32,12 @@ var Stack = function Stack(_ref) {
   var children = _ref.children,
       testId = _ref.testId,
       label = _ref['aria-label'];
-  return (0, _core.jsx)("ul", {
+  return (0, _react2.jsx)("ul", {
     "data-testid": testId,
     "aria-label": label,
     css: listStyles
   }, _react.Children.map(children, function (child) {
-    return child && (0, _core.jsx)("li", {
+    return child && (0, _react2.jsx)("li", {
       css: listItemStyles
     }, child);
   }));

package/dist/cjs/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Avatar from '@atlaskit/avatar';
 import { PopupMenuGroup, Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';

package/dist/es2019/components/grid.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Children } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 const gutter = gridSize / 2;

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
 const FONT_SIZE = {

package/dist/es2019/components/stack.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Children } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BORDER_WIDTH } from '@atlaskit/avatar';
 import { gridSize } from '@atlaskit/theme/constants';
 const gutter = BORDER_WIDTH * 2 + gridSize() / 2;

package/dist/es2019/version.json

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

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Avatar from '@atlaskit/avatar';
 import { PopupMenuGroup, Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';

package/dist/esm/components/grid.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Children } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 var gutter = gridSize / 2;

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

@@ -4,7 +4,7 @@ var _excluded = ["testId", "className", "ref"];
 
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
 import { B300, B400, B50, N0, N20, N30, N500 } from '@atlaskit/theme/colors';
 var FONT_SIZE = {

package/dist/esm/components/stack.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Children } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BORDER_WIDTH } from '@atlaskit/avatar';
 import { gridSize } from '@atlaskit/theme/constants';
 var gutter = BORDER_WIDTH * 2 + gridSize() / 2;

package/dist/esm/version.json

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

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ElementType, MouseEventHandler } from 'react';
+import { jsx } from '@emotion/react';
 import { SizeType } from '@atlaskit/avatar';
 import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
 export interface AvatarGroupProps {
@@ -98,5 +99,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.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;

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

@@ -1,5 +1,4 @@
 import type { ElementType, ReactNode } from 'react';
-import type { Interpolation } from '@emotion/core';
 import type { AnalyticsEvent } from '@atlaskit/analytics-next';
 import type { AvatarPropTypes } from '@atlaskit/avatar';
 import type { AvatarGroupItemProps } from './avatar-group-item';
@@ -20,4 +19,3 @@ export interface AvatarGroupOverrides {
     };
 }
 export declare type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
-export declare type CssCallback = (template: TemplateStringsArray, ...args: Array<Interpolation>) => string;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ElementType, MouseEventHandler } from 'react';
+import { jsx } from '@emotion/react';
 import { SizeType } from '@atlaskit/avatar';
 import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
 export interface AvatarGroupProps {
@@ -98,5 +99,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.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;

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

@@ -1,5 +1,4 @@
 import type { ElementType, ReactNode } from 'react';
-import type { Interpolation } from '@emotion/core';
 import type { AnalyticsEvent } from '@atlaskit/analytics-next';
 import type { AvatarPropTypes } from '@atlaskit/avatar';
 import type { AvatarGroupItemProps } from './avatar-group-item';
@@ -20,4 +19,3 @@ export interface AvatarGroupOverrides {
     };
 }
 export declare type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
-export declare type CssCallback = (template: TemplateStringsArray, ...args: Array<Interpolation>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.0.4",
+  "version": "9.1.0",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,14 +33,14 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/popup": "^1.4.0",
+    "@atlaskit/popup": "^1.5.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -48,13 +48,13 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/code": "^14.3.0",
+    "@atlaskit/code": "^14.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.1",
-    "@atlaskit/form": "^8.4.5",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/modal-dialog": "^12.3.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,11 +1,14 @@
-## API Report File for "@atlaskit/avatar-group"
+## API Report File for "@atlaskit/avatar-group".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```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 type { ReactNode } from 'react';
 import { SizeType } from '@atlaskit/avatar';
@@ -34,7 +37,7 @@ declare const AvatarGroup: ({
   size,
   testId,
   label,
-}: AvatarGroupProps) => JSX.Element;
+}: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;
 
 declare interface AvatarGroupItemProps {