@atlaskit/media-card 77.10.12 → 77.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-card
 
+## 77.11.1
+
+### Patch Changes
+
+- [#90872](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90872) [`ac8e7b44549a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac8e7b44549a) - The internal composition of this package has changed. There is no expected change in behavior.
+
+## 77.11.0
+
+### Minor Changes
+
+- [#88895](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88895) [`a48b908e2bf6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a48b908e2bf6) - Add integration of React UFO to not hold react-ufo measurement when media is not in viewport
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 77.10.12
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -50,7 +50,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/cardView.js

@@ -251,7 +251,8 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
       }, (0, _react.jsx)(_spinner.default, {
-        testId: 'media-card-loading'
+        testId: 'media-card-loading',
+        interactionName: 'media-card-loading'
       }));
     }
   }, {

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/ui/iconMessage/iconMessageWrapper.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IconMessageWrapper = void 0;
 var _react = require("@emotion/react");
-var _primitives = require("@atlaskit/primitives");
 /**@jsx jsx */
 
 var breatheAnimation = (0, _react.keyframes)({
@@ -19,32 +18,32 @@ var breatheAnimation = (0, _react.keyframes)({
     opacity: 1
   }
 });
-var animatedStyles = (0, _primitives.xcss)({
+var animatedStyles = (0, _react.css)({
   animationName: breatheAnimation,
   animationDuration: '3.5s',
   animationTimingFunction: 'ease-in-out',
   animationIterationCount: 'infinite'
 });
-var reducedFontStyle = (0, _primitives.xcss)({
+var reducedFontStyle = (0, _react.css)({
   fontSize: '0.7em'
 });
-var baseStyles = (0, _primitives.xcss)({
+var baseStyles = (0, _react.css)({
   overflow: 'hidden',
   opacity: 1,
   fontWeight: 450,
-  color: 'color.text.subtlest',
+  color: "var(--ds-text-subtlest, #7A869A)",
   textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBottom: '-1em',
   // Needs pixel precision to align the icon at the center of the box
-  paddingBlock: 'space.050',
-  paddingInline: 'space.100'
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-100, 8px)"
 });
 var IconMessageWrapper = exports.IconMessageWrapper = function IconMessageWrapper(props) {
   var animated = props.animated,
     reducedFont = props.reducedFont;
-  return (0, _react.jsx)(_primitives.Box, {
+  return (0, _react.jsx)("div", {
     id: "iconMessageWrapper",
-    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
+    css: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

package/dist/cjs/card/v2/cardV2.js

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/v2/cardViewV2.js

@@ -230,7 +230,8 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox
   }, (0, _react.jsx)(_spinner.default, {
-    testId: "media-card-loading"
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
   })), renderImageRenderer && !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',

package/dist/cjs/card/v2/cardviews/loadingCardView.js

@@ -37,7 +37,8 @@ var LoadingCardViewBase = function LoadingCardViewBase(props) {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox
   }, (0, _react.jsx)(_spinner.default, {
-    testId: "media-card-loading"
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
   })));
 };
 

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.10.12",
+        packageName: "77.11.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/lightCards/cardLoading.js

@@ -37,7 +37,9 @@ var CardLoading = exports.CardLoading = /*#__PURE__*/function (_Component) {
         "data-testid": testId || 'media-card-loading',
         "data-test-loading": true,
         dimensions: dimensions
-      }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
+      }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+        interactionName: "media-card-loading"
+      }));
     }
   }]);
   return CardLoading;

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/cjs/utils/viewportDetector.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ViewportDetector = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _ufoInteractionIgnore = _interopRequireDefault(require("@atlaskit/ufo-interaction-ignore"));
 var _document = _interopRequireDefault(require("./document"));
 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 && Object.prototype.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; }
@@ -39,15 +41,23 @@ var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
     cardEl = _ref.cardEl,
     children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var onVisibleCallback = (0, _react.useCallback)(function () {
+    setIsVisible(true);
+    onVisible();
+  }, [onVisible]);
   (0, _react.useEffect)(function () {
     var intersectionObserver;
     try {
-      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisibleCallback), {
         root: (0, _document.default)(),
         rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
       });
     } catch (error) {
-      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisibleCallback), {
         root: null,
         rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
       });
@@ -56,8 +66,10 @@ var ViewportObserver = function ViewportObserver(_ref) {
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, onVisible]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }, [cardEl, onVisibleCallback]);
+  return /*#__PURE__*/_react.default.createElement(_ufoInteractionIgnore.default, {
+    ignore: !isVisible
+  }, children);
 };
 var ViewportDetector = exports.ViewportDetector = function ViewportDetector(_ref2) {
   var cardEl = _ref2.cardEl,

package/dist/es2019/card/card.js

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.10.12";
+const packageVersion = "77.11.1";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

package/dist/es2019/card/cardView.js

@@ -245,7 +245,8 @@ export class CardViewBase extends React.Component {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
     }, jsx(SpinnerIcon, {
-      testId: 'media-card-loading'
+      testId: 'media-card-loading',
+      interactionName: 'media-card-loading'
     }));
   }
   shouldRenderPlayButton() {

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.10.12";
+const packageVersion = "77.11.1";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/iconMessage/iconMessageWrapper.js

@@ -1,7 +1,6 @@
 /**@jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { keyframes } from '@emotion/react';
-import { Box, xcss } from '@atlaskit/primitives';
 const breatheAnimation = keyframes({
   '0%': {
     opacity: 1
@@ -13,34 +12,34 @@ const breatheAnimation = keyframes({
     opacity: 1
   }
 });
-const animatedStyles = xcss({
+const animatedStyles = css({
   animationName: breatheAnimation,
   animationDuration: '3.5s',
   animationTimingFunction: 'ease-in-out',
   animationIterationCount: 'infinite'
 });
-const reducedFontStyle = xcss({
+const reducedFontStyle = css({
   fontSize: '0.7em'
 });
-const baseStyles = xcss({
+const baseStyles = css({
   overflow: 'hidden',
   opacity: 1,
   fontWeight: 450,
-  color: 'color.text.subtlest',
+  color: "var(--ds-text-subtlest, #7A869A)",
   textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBottom: '-1em',
   // Needs pixel precision to align the icon at the center of the box
-  paddingBlock: 'space.050',
-  paddingInline: 'space.100'
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-100, 8px)"
 });
 export const IconMessageWrapper = props => {
   const {
     animated,
     reducedFont
   } = props;
-  return jsx(Box, {
+  return jsx("div", {
     id: "iconMessageWrapper",
-    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
+    css: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.10.12";
+const packageVersion = "77.11.1";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/card/v2/cardViewV2.js

@@ -225,7 +225,8 @@ export const CardViewV2Base = ({
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox
   }, jsx(SpinnerIcon, {
-    testId: "media-card-loading"
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
   })), renderImageRenderer && !!cardPreview && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',

package/dist/es2019/card/v2/cardviews/loadingCardView.js

@@ -32,7 +32,8 @@ const LoadingCardViewBase = props => {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox
   }, jsx(SpinnerIcon, {
-    testId: "media-card-loading"
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
   })));
 };
 

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.10.12",
+      packageName: "77.11.1",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/lightCards/cardLoading.js

@@ -14,6 +14,8 @@ export class CardLoading extends Component {
       "data-testid": testId || 'media-card-loading',
       "data-test-loading": true,
       dimensions: dimensions
-    }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
+    }, /*#__PURE__*/React.createElement(SpinnerIcon, {
+      interactionName: "media-card-loading"
+    }));
   }
 }

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.10.12";
+const packageVersion = "77.11.1";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/es2019/utils/viewportDetector.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
+import UFOInteractionIgnore from '@atlaskit/ufo-interaction-ignore';
 import getDocument from './document';
 const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
@@ -16,15 +17,20 @@ const ViewportObserver = ({
   cardEl,
   children
 }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const onVisibleCallback = useCallback(() => {
+    setIsVisible(true);
+    onVisible();
+  }, [onVisible]);
   useEffect(() => {
     let intersectionObserver;
     try {
-      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisibleCallback), {
         root: getDocument(),
         rootMargin: `${ABS_VIEWPORT_ANCHOR_OFFSET_TOP}px`
       });
     } catch (error) {
-      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisibleCallback), {
         root: null,
         rootMargin: `${ABS_VIEWPORT_ANCHOR_OFFSET_TOP}px`
       });
@@ -33,8 +39,10 @@ const ViewportObserver = ({
     return () => {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, onVisible]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }, [cardEl, onVisibleCallback]);
+  return /*#__PURE__*/React.createElement(UFOInteractionIgnore, {
+    ignore: !isVisible
+  }, children);
 };
 export const ViewportDetector = ({
   cardEl,

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/cardView.js

@@ -245,7 +245,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
       }, jsx(SpinnerIcon, {
-        testId: 'media-card-loading'
+        testId: 'media-card-loading',
+        interactionName: 'media-card-loading'
       }));
     }
   }, {

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/ui/iconMessage/iconMessageWrapper.js

@@ -1,7 +1,6 @@
 /**@jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { keyframes } from '@emotion/react';
-import { Box, xcss } from '@atlaskit/primitives';
 var breatheAnimation = keyframes({
   '0%': {
     opacity: 1
@@ -13,32 +12,32 @@ var breatheAnimation = keyframes({
     opacity: 1
   }
 });
-var animatedStyles = xcss({
+var animatedStyles = css({
   animationName: breatheAnimation,
   animationDuration: '3.5s',
   animationTimingFunction: 'ease-in-out',
   animationIterationCount: 'infinite'
 });
-var reducedFontStyle = xcss({
+var reducedFontStyle = css({
   fontSize: '0.7em'
 });
-var baseStyles = xcss({
+var baseStyles = css({
   overflow: 'hidden',
   opacity: 1,
   fontWeight: 450,
-  color: 'color.text.subtlest',
+  color: "var(--ds-text-subtlest, #7A869A)",
   textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBottom: '-1em',
   // Needs pixel precision to align the icon at the center of the box
-  paddingBlock: 'space.050',
-  paddingInline: 'space.100'
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-100, 8px)"
 });
 export var IconMessageWrapper = function IconMessageWrapper(props) {
   var animated = props.animated,
     reducedFont = props.reducedFont;
-  return jsx(Box, {
+  return jsx("div", {
     id: "iconMessageWrapper",
-    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
+    css: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

package/dist/esm/card/v2/cardV2.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/v2/cardViewV2.js

@@ -221,7 +221,8 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox
   }, jsx(SpinnerIcon, {
-    testId: "media-card-loading"
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
   })), renderImageRenderer && !!cardPreview && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',

package/dist/esm/card/v2/cardviews/loadingCardView.js

@@ -29,7 +29,8 @@ var LoadingCardViewBase = function LoadingCardViewBase(props) {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox
   }, jsx(SpinnerIcon, {
-    testId: "media-card-loading"
+    testId: "media-card-loading",
+    interactionName: "media-card-loading"
   })));
 };
 

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.10.12",
+        packageName: "77.11.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/lightCards/cardLoading.js

@@ -28,7 +28,9 @@ export var CardLoading = /*#__PURE__*/function (_Component) {
         "data-testid": testId || 'media-card-loading',
         "data-test-loading": true,
         dimensions: dimensions
-      }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
+      }, /*#__PURE__*/React.createElement(SpinnerIcon, {
+        interactionName: "media-card-loading"
+      }));
     }
   }]);
   return CardLoading;

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.12";
+var packageVersion = "77.11.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/esm/utils/viewportDetector.js

@@ -1,7 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
+import UFOInteractionIgnore from '@atlaskit/ufo-interaction-ignore';
 import getDocument from './document';
 var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
@@ -29,15 +31,23 @@ var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
     cardEl = _ref.cardEl,
     children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var onVisibleCallback = useCallback(function () {
+    setIsVisible(true);
+    onVisible();
+  }, [onVisible]);
   useEffect(function () {
     var intersectionObserver;
     try {
-      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisibleCallback), {
         root: getDocument(),
         rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
       });
     } catch (error) {
-      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisibleCallback), {
         root: null,
         rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
       });
@@ -46,8 +56,10 @@ var ViewportObserver = function ViewportObserver(_ref) {
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, onVisible]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }, [cardEl, onVisibleCallback]);
+  return /*#__PURE__*/React.createElement(UFOInteractionIgnore, {
+    ignore: !isVisible
+  }, children);
 };
 export var ViewportDetector = function ViewportDetector(_ref2) {
   var cardEl = _ref2.cardEl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.10.12",
+  "version": "77.11.1",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,19 +40,19 @@
     "@atlaskit/dropdown-menu": "^12.8.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/media-client": "^26.2.0",
+    "@atlaskit/media-client": "^26.3.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-file-preview": "^0.5.0",
-    "@atlaskit/media-ui": "^25.6.0",
+    "@atlaskit/media-ui": "^25.7.0",
     "@atlaskit/media-viewer": "^48.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/primitives": "^5.5.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.43.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@atlaskit/ufo": "^0.2.0",
+    "@atlaskit/ufo-interaction-ignore": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "eventemitter2": "^4.1.0",
@@ -73,8 +73,9 @@
     "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-picker": "^66.4.0",
     "@atlaskit/media-state": "^1.0.0",
-    "@atlaskit/media-test-data": "^1.3.0",
+    "@atlaskit/media-test-data": "^2.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
+    "@atlaskit/primitives": "^5.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",