@atlaskit/profilecard 23.1.0 → 23.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/profilecard
 
+## 23.1.1
+
+### Patch Changes
+
+- [#118134](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118134)
+  [`a1a66a777882a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1a66a777882a) -
+  Fix for team profilecard header image in compiled
+
 ## 23.1.0
 
 ### Minor Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.1.0");
+  headers.append('atl-client-version', "23.1.1");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.1.0");
+  headers.append('atl-client-version', "23.1.1");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/styled/CoverImage.compiled.css

@@ -0,0 +1,12 @@
+._13liglpi{border-top-left-radius:var(--ds-border-radius,4px)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsbnklw{width:20pc}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1qr7{height:8pc}
+._4t3i1wug{height:auto}
+._kqswh2mm{position:relative}
+._qrwqglpi{border-top-right-radius:var(--ds-border-radius,4px)}

package/dist/cjs/styled/CoverImage.js

@@ -0,0 +1,40 @@
+/* CoverImage.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CoverImage = void 0;
+require("./CoverImage.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13liglpi _qrwqglpi _1e0c1txw _1bah1h6o _4cvr1h6o",
+  image: "_1bsbnklw _4t3i1wug"
+};
+
+/**
+ * This is instead of using background-image in CSS as design-system doesn't support that
+ */
+var CoverImage = exports.CoverImage = function CoverImage(_ref) {
+  var src = _ref.src,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt;
+  var containerRef = (0, _react.useRef)(null);
+  var imgRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    ref: containerRef,
+    xcss: styles.container,
+    backgroundColor: "color.background.neutral"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "img",
+    ref: imgRef,
+    src: src,
+    alt: alt,
+    xcss: styles.image
+  }));
+};

package/dist/cjs/styled/TeamCard.compiled.css

@@ -1,6 +1,5 @@
 ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
-._12vemgnk{background-repeat:no-repeat}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
@@ -17,7 +16,6 @@
 ._1e0c1kw7{display:inherit}
 ._1e0c1txw{display:flex}
 ._1e0ccj1k{display:-webkit-box}
-._1lrw1dfr{background-size:cover}
 ._1p1dglyw{text-transform:none}
 ._1reo15vq{overflow-x:hidden}
 ._1tke1l8a{min-height:78pt}
@@ -34,7 +32,6 @@
 ._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
 ._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}
 ._otyridpf{margin-bottom:0}
-._ouxl1ssb{background-position:50%}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
 ._y3gn1h6o{text-align:center}

package/dist/cjs/styled/TeamCard.js

@@ -18,12 +18,13 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("./constants");
+var _CoverImage = require("./CoverImage");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var styles = {
   cardtriggerwrapper: "_1e0c1kw7",
   cardwrapper: "_2rkoglpi _1bsbnklw _kqswh2mm",
   teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
-  cardheader: "_12vemgnk _ouxl1ssb _1lrw1dfr _4t3i1qr7",
+  cardheader: "_4t3i1qr7 _1bsb1osq",
   cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
   teamname: "_11c8o0gd _1reo15vq _18m915vq _1p1dglyw _c71lckbl _1e0ccj1k",
   membercount: "_syaz1wmz _19pk1b66",
@@ -88,12 +89,9 @@ var CardHeader = exports.CardHeader = function CardHeader(_ref2) {
   return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.cardheader),
     backgroundColor: "color.background.neutral"
-  }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    as: "img",
+  }) : /*#__PURE__*/_react.default.createElement(_CoverImage.CoverImage, {
     alt: label || '',
-    src: image,
-    xcss: (0, _css.cx)(styles.cardheader),
-    backgroundColor: "color.background.neutral"
+    src: image
   }) : /*#__PURE__*/_react.default.createElement(CardHeaderLegacy, {
     image: image,
     isLoading: isLoading

package/dist/cjs/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.1.0"
+      packageVersion: "23.1.1"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.1.0");
+  headers.append('atl-client-version', "23.1.1");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.1.0");
+  headers.append('atl-client-version', "23.1.1");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/styled/CoverImage.compiled.css

@@ -0,0 +1,12 @@
+._13liglpi{border-top-left-radius:var(--ds-border-radius,4px)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsbnklw{width:20pc}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1qr7{height:8pc}
+._4t3i1wug{height:auto}
+._kqswh2mm{position:relative}
+._qrwqglpi{border-top-right-radius:var(--ds-border-radius,4px)}

package/dist/es2019/styled/CoverImage.js

@@ -0,0 +1,31 @@
+/* CoverImage.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./CoverImage.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useRef } from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13liglpi _qrwqglpi _1e0c1txw _1bah1h6o _4cvr1h6o",
+  image: "_1bsbnklw _4t3i1wug"
+};
+
+/**
+ * This is instead of using background-image in CSS as design-system doesn't support that
+ */
+export const CoverImage = ({
+  src,
+  alt = ''
+}) => {
+  const containerRef = useRef(null);
+  const imgRef = useRef(null);
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: containerRef,
+    xcss: styles.container,
+    backgroundColor: "color.background.neutral"
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "img",
+    ref: imgRef,
+    src: src,
+    alt: alt,
+    xcss: styles.image
+  }));
+};

package/dist/es2019/styled/TeamCard.compiled.css

@@ -1,6 +1,5 @@
 ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
-._12vemgnk{background-repeat:no-repeat}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
@@ -17,7 +16,6 @@
 ._1e0c1kw7{display:inherit}
 ._1e0c1txw{display:flex}
 ._1e0ccj1k{display:-webkit-box}
-._1lrw1dfr{background-size:cover}
 ._1p1dglyw{text-transform:none}
 ._1reo15vq{overflow-x:hidden}
 ._1tke1l8a{min-height:78pt}
@@ -34,7 +32,6 @@
 ._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
 ._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}
 ._otyridpf{margin-bottom:0}
-._ouxl1ssb{background-position:50%}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
 ._y3gn1h6o{text-align:center}

package/dist/es2019/styled/TeamCard.js

@@ -12,11 +12,12 @@ import { Box, Text } from '@atlaskit/primitives/compiled';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { bgColor, teamHeaderBgColor } from './constants';
+import { CoverImage } from './CoverImage';
 const styles = {
   cardtriggerwrapper: "_1e0c1kw7",
   cardwrapper: "_2rkoglpi _1bsbnklw _kqswh2mm",
   teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
-  cardheader: "_12vemgnk _ouxl1ssb _1lrw1dfr _4t3i1qr7",
+  cardheader: "_4t3i1qr7 _1bsb1osq",
   cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
   teamname: "_11c8o0gd _1reo15vq _18m915vq _1p1dglyw _c71lckbl _1e0ccj1k",
   membercount: "_syaz1wmz _19pk1b66",
@@ -76,12 +77,9 @@ export const CardHeader = ({
 }) => fg('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/React.createElement(Box, {
   xcss: cx(styles.cardheader),
   backgroundColor: "color.background.neutral"
-}) : /*#__PURE__*/React.createElement(Box, {
-  as: "img",
+}) : /*#__PURE__*/React.createElement(CoverImage, {
   alt: label || '',
-  src: image,
-  xcss: cx(styles.cardheader),
-  backgroundColor: "color.background.neutral"
+  src: image
 }) : /*#__PURE__*/React.createElement(CardHeaderLegacy, {
   image: image,
   isLoading: isLoading

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "23.1.0",
+    packageVersion: "23.1.1",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.1.0");
+  headers.append('atl-client-version', "23.1.1");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.1.0");
+  headers.append('atl-client-version', "23.1.1");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/styled/CoverImage.compiled.css

@@ -0,0 +1,12 @@
+._13liglpi{border-top-left-radius:var(--ds-border-radius,4px)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsbnklw{width:20pc}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1qr7{height:8pc}
+._4t3i1wug{height:auto}
+._kqswh2mm{position:relative}
+._qrwqglpi{border-top-right-radius:var(--ds-border-radius,4px)}

package/dist/esm/styled/CoverImage.js

@@ -0,0 +1,31 @@
+/* CoverImage.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./CoverImage.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useRef } from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13liglpi _qrwqglpi _1e0c1txw _1bah1h6o _4cvr1h6o",
+  image: "_1bsbnklw _4t3i1wug"
+};
+
+/**
+ * This is instead of using background-image in CSS as design-system doesn't support that
+ */
+export var CoverImage = function CoverImage(_ref) {
+  var src = _ref.src,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt;
+  var containerRef = useRef(null);
+  var imgRef = useRef(null);
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: containerRef,
+    xcss: styles.container,
+    backgroundColor: "color.background.neutral"
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "img",
+    ref: imgRef,
+    src: src,
+    alt: alt,
+    xcss: styles.image
+  }));
+};

package/dist/esm/styled/TeamCard.compiled.css

@@ -1,6 +1,5 @@
 ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
-._12vemgnk{background-repeat:no-repeat}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
@@ -17,7 +16,6 @@
 ._1e0c1kw7{display:inherit}
 ._1e0c1txw{display:flex}
 ._1e0ccj1k{display:-webkit-box}
-._1lrw1dfr{background-size:cover}
 ._1p1dglyw{text-transform:none}
 ._1reo15vq{overflow-x:hidden}
 ._1tke1l8a{min-height:78pt}
@@ -34,7 +32,6 @@
 ._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
 ._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}
 ._otyridpf{margin-bottom:0}
-._ouxl1ssb{background-position:50%}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
 ._y3gn1h6o{text-align:center}

package/dist/esm/styled/TeamCard.js

@@ -14,11 +14,12 @@ import { Box, Text } from '@atlaskit/primitives/compiled';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { bgColor, teamHeaderBgColor } from './constants';
+import { CoverImage } from './CoverImage';
 var styles = {
   cardtriggerwrapper: "_1e0c1kw7",
   cardwrapper: "_2rkoglpi _1bsbnklw _kqswh2mm",
   teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
-  cardheader: "_12vemgnk _ouxl1ssb _1lrw1dfr _4t3i1qr7",
+  cardheader: "_4t3i1qr7 _1bsb1osq",
   cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
   teamname: "_11c8o0gd _1reo15vq _18m915vq _1p1dglyw _c71lckbl _1e0ccj1k",
   membercount: "_syaz1wmz _19pk1b66",
@@ -83,12 +84,9 @@ export var CardHeader = function CardHeader(_ref2) {
   return fg('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.cardheader),
     backgroundColor: "color.background.neutral"
-  }) : /*#__PURE__*/React.createElement(Box, {
-    as: "img",
+  }) : /*#__PURE__*/React.createElement(CoverImage, {
     alt: label || '',
-    src: image,
-    xcss: cx(styles.cardheader),
-    backgroundColor: "color.background.neutral"
+    src: image
   }) : /*#__PURE__*/React.createElement(CardHeaderLegacy, {
     image: image,
     isLoading: isLoading

package/dist/esm/util/analytics.js

@@ -39,7 +39,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.1.0"
+      packageVersion: "23.1.1"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/styled/CoverImage.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CoverImageProps {
+    src: string;
+    alt?: string;
+}
+/**
+ * This is instead of using background-image in CSS as design-system doesn't support that
+ */
+export declare const CoverImage: ({ src, alt }: CoverImageProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/styled/CoverImage.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CoverImageProps {
+    src: string;
+    alt?: string;
+}
+/**
+ * This is instead of using background-image in CSS as design-system doesn't support that
+ */
+export declare const CoverImage: ({ src, alt }: CoverImageProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.1.0",
+	"version": "23.1.1",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"