@atlaskit/media-card 79.13.0 → 79.13.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-card
 
+## 79.13.1
+
+### Patch Changes
+
+- [`71b895a2fd401`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71b895a2fd401) -
+  Fixed the timing of ssr succeded to use resourceTimingEntry instead of mount time
+- Updated dependencies
+
 ## 79.13.0
 
 ### Minor Changes

package/dist/cjs/card/ui/titleBox/titleBox.js

@@ -41,7 +41,6 @@ var TitleBox = exports.TitleBox = (0, _reactIntlNext.injectIntl)(function (_ref)
   }, createdAt !== undefined && isValidTimestamp(createdAt) ? (0, _formatDate.formatDate)(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
     color: "currentColor",
     label: "",
-    LEGACY_size: "small",
     size: "small"
   })));
 }, {

package/dist/cjs/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -78,7 +78,6 @@ var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Co
       }, /*#__PURE__*/React.createElement(_statusWarning.default, {
         label: "Error",
         color: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
-        LEGACY_size: "medium",
         spacing: "spacious"
       }), /*#__PURE__*/React.createElement(_contentLoadingErrorMessage.ContentLoadingErrorMessage, {
         isHidden: hideText

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

@@ -11,7 +11,6 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _errorIcon = require("./errorIcon");
 var _lightCardWrappers = require("./lightCardWrappers");
@@ -36,13 +35,7 @@ var CardError = exports.CardError = /*#__PURE__*/function (_Component) {
   }, {
     key: "icon",
     get: function get() {
-      var size = this.props.size;
-      return /*#__PURE__*/_react.default.createElement(_errorIcon.ErrorIcon, {
-        size: size
-      });
+      return /*#__PURE__*/_react.default.createElement(_errorIcon.ErrorIcon, null);
     }
   }]);
-}(_react.Component);
-(0, _defineProperty2.default)(CardError, "defaultProps", {
-  size: 'medium'
-});
+}(_react.Component);

package/dist/cjs/utils/lightCards/errorIcon/index.js

@@ -11,7 +11,6 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
@@ -31,20 +30,15 @@ var ErrorIcon = exports.ErrorIcon = /*#__PURE__*/function (_Component) {
   return (0, _createClass2.default)(ErrorIcon, [{
     key: "render",
     value: function render() {
-      var size = this.props.size;
       return (
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         (0, _react2.jsx)("div", {
           css: _styles.errorIconWrapperStyles
         }, (0, _react2.jsx)(_statusWarning.default, {
           color: "currentColor",
-          label: "Error",
-          LEGACY_size: size
+          label: "Error"
         }))
       );
     }
   }]);
-}(_react.Component);
-(0, _defineProperty2.default)(ErrorIcon, "defaultProps", {
-  size: 'small'
-});
+}(_react.Component);

package/dist/cjs/utils/ufoExperiences.js

@@ -284,10 +284,12 @@ var useMediaCardUfoExperience = exports.useMediaCardUfoExperience = function use
     var experience = createExperience(instanceId, timingsConfig);
     experienceRef.current = experience;
     experience.start(startTimeRef.current);
+    var endTime = performance.now();
 
     // Add timing marks and metadata based on strategy
     if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
       if (resourceTimingEntry) {
+        endTime = resourceTimingEntry.responseEnd;
         addResourceTimingMarks(experience, resourceTimingEntry, interactionStartTime, 'ssr');
         experience.addMetadata(_objectSpread(_objectSpread({}, createResourceTimingMetadata(resourceTimingEntry)), {}, {
           timingStrategy: 'ssr-resource-timing'
@@ -315,13 +317,12 @@ var useMediaCardUfoExperience = exports.useMediaCardUfoExperience = function use
     var sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
     switch (status) {
       case 'complete':
-        experience.success({
-          metadata: _objectSpread({
-            fileAttributes: sanitisedFileAttributes,
-            ssrReliability: ssrReliability,
-            fileStateFlags: fileStateFlags
-          }, getBasePayloadAttributes())
-        });
+        experience.addMetadata(_objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags
+        }, getBasePayloadAttributes()));
+        experience.transition(_ufo.UFOExperienceState.SUCCEEDED, endTime);
         break;
       case 'failed-processing':
         experience.failure({

package/dist/es2019/card/ui/titleBox/titleBox.js

@@ -33,7 +33,6 @@ export const TitleBox = injectIntl(({
   }, createdAt !== undefined && isValidTimestamp(createdAt) ? formatDate(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/React.createElement(TitleBoxIcon, null, /*#__PURE__*/React.createElement(LockFilledIcon, {
     color: "currentColor",
     label: "",
-    LEGACY_size: "small",
     size: "small"
   })));
 }, {

package/dist/es2019/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -49,7 +49,6 @@ export class UnhandledErrorCard extends Component {
     }, /*#__PURE__*/React.createElement(WarningIcon, {
       label: "Error",
       color: `var(--ds-icon-warning, ${Y500})`,
-      LEGACY_size: "medium",
       spacing: "spacious"
     }), /*#__PURE__*/React.createElement(ContentLoadingErrorMessage, {
       isHidden: hideText

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

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
 import { ErrorIcon } from './errorIcon';
@@ -12,14 +11,6 @@ export class CardError extends Component {
     }, this.icon);
   }
   get icon() {
-    const {
-      size
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ErrorIcon, {
-      size: size
-    });
+    return /*#__PURE__*/React.createElement(ErrorIcon, null);
   }
-}
-_defineProperty(CardError, "defaultProps", {
-  size: 'medium'
-});
+}

package/dist/es2019/utils/lightCards/errorIcon/index.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -11,21 +10,14 @@ import WarningIcon from '@atlaskit/icon/core/status-warning';
 import { errorIconWrapperStyles } from './styles';
 export class ErrorIcon extends Component {
   render() {
-    const {
-      size
-    } = this.props;
     return (
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       jsx("div", {
         css: errorIconWrapperStyles
       }, jsx(WarningIcon, {
         color: "currentColor",
-        label: "Error",
-        LEGACY_size: size
+        label: "Error"
       }))
     );
   }
-}
-_defineProperty(ErrorIcon, "defaultProps", {
-  size: 'small'
-});
+}

package/dist/es2019/utils/ufoExperiences.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import isValidId from 'uuid-validate';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
@@ -261,10 +262,12 @@ export const useMediaCardUfoExperience = ({
     const experience = createExperience(instanceId, timingsConfig);
     experienceRef.current = experience;
     experience.start(startTimeRef.current);
+    let endTime = performance.now();
 
     // Add timing marks and metadata based on strategy
     if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
       if (resourceTimingEntry) {
+        endTime = resourceTimingEntry.responseEnd;
         addResourceTimingMarks(experience, resourceTimingEntry, interactionStartTime, 'ssr');
         experience.addMetadata({
           ...createResourceTimingMetadata(resourceTimingEntry),
@@ -293,14 +296,13 @@ export const useMediaCardUfoExperience = ({
     const sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
     switch (status) {
       case 'complete':
-        experience.success({
-          metadata: {
-            fileAttributes: sanitisedFileAttributes,
-            ssrReliability,
-            fileStateFlags,
-            ...getBasePayloadAttributes()
-          }
+        experience.addMetadata({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability,
+          fileStateFlags,
+          ...getBasePayloadAttributes()
         });
+        experience.transition(UFOExperienceState.SUCCEEDED, endTime);
         break;
       case 'failed-processing':
         experience.failure({

package/dist/esm/card/ui/titleBox/titleBox.js

@@ -34,7 +34,6 @@ export var TitleBox = injectIntl(function (_ref) {
   }, createdAt !== undefined && isValidTimestamp(createdAt) ? formatDate(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/React.createElement(TitleBoxIcon, null, /*#__PURE__*/React.createElement(LockFilledIcon, {
     color: "currentColor",
     label: "",
-    LEGACY_size: "small",
     size: "small"
   })));
 }, {

package/dist/esm/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -69,7 +69,6 @@ export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(WarningIcon, {
         label: "Error",
         color: "var(--ds-icon-warning, ".concat(Y500, ")"),
-        LEGACY_size: "medium",
         spacing: "spacious"
       }), /*#__PURE__*/React.createElement(ContentLoadingErrorMessage, {
         isHidden: hideText

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

@@ -3,7 +3,6 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
@@ -28,13 +27,7 @@ export var CardError = /*#__PURE__*/function (_Component) {
   }, {
     key: "icon",
     get: function get() {
-      var size = this.props.size;
-      return /*#__PURE__*/React.createElement(ErrorIcon, {
-        size: size
-      });
+      return /*#__PURE__*/React.createElement(ErrorIcon, null);
     }
   }]);
-}(Component);
-_defineProperty(CardError, "defaultProps", {
-  size: 'medium'
-});
+}(Component);

package/dist/esm/utils/lightCards/errorIcon/index.js

@@ -3,7 +3,6 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
@@ -25,20 +24,15 @@ export var ErrorIcon = /*#__PURE__*/function (_Component) {
   return _createClass(ErrorIcon, [{
     key: "render",
     value: function render() {
-      var size = this.props.size;
       return (
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         jsx("div", {
           css: errorIconWrapperStyles
         }, jsx(WarningIcon, {
           color: "currentColor",
-          label: "Error",
-          LEGACY_size: size
+          label: "Error"
         }))
       );
     }
   }]);
-}(Component);
-_defineProperty(ErrorIcon, "defaultProps", {
-  size: 'small'
-});
+}(Component);

package/dist/esm/utils/ufoExperiences.js

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import isValidId from 'uuid-validate';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
@@ -277,10 +278,12 @@ export var useMediaCardUfoExperience = function useMediaCardUfoExperience(_ref4)
     var experience = createExperience(instanceId, timingsConfig);
     experienceRef.current = experience;
     experience.start(startTimeRef.current);
+    var endTime = performance.now();
 
     // Add timing marks and metadata based on strategy
     if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
       if (resourceTimingEntry) {
+        endTime = resourceTimingEntry.responseEnd;
         addResourceTimingMarks(experience, resourceTimingEntry, interactionStartTime, 'ssr');
         experience.addMetadata(_objectSpread(_objectSpread({}, createResourceTimingMetadata(resourceTimingEntry)), {}, {
           timingStrategy: 'ssr-resource-timing'
@@ -308,13 +311,12 @@ export var useMediaCardUfoExperience = function useMediaCardUfoExperience(_ref4)
     var sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
     switch (status) {
       case 'complete':
-        experience.success({
-          metadata: _objectSpread({
-            fileAttributes: sanitisedFileAttributes,
-            ssrReliability: ssrReliability,
-            fileStateFlags: fileStateFlags
-          }, getBasePayloadAttributes())
-        });
+        experience.addMetadata(_objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags
+        }, getBasePayloadAttributes()));
+        experience.transition(UFOExperienceState.SUCCEEDED, endTime);
         break;
       case 'failed-processing':
         experience.failure({

package/dist/types/utils/lightCards/cardError.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
 import { type StaticCardProps } from './types';
-export interface ErrorCardProps extends StaticCardProps {
-    readonly size: 'small' | 'medium' | 'large' | 'xlarge';
-}
-export declare class CardError extends Component<ErrorCardProps, {}> {
-    static defaultProps: {
-        size: string;
-    };
+export declare class CardError extends Component<StaticCardProps, {}> {
     render(): React.JSX.Element;
     get icon(): React.JSX.Element;
 }

package/dist/types/utils/lightCards/errorIcon/index.d.ts

@@ -4,12 +4,6 @@
  */
 import React from 'react';
 import { Component } from 'react';
-export interface ErrorIconProps {
-    readonly size: 'small' | 'medium' | 'large' | 'xlarge';
-}
-export declare class ErrorIcon extends Component<ErrorIconProps, {}> {
-    static defaultProps: {
-        size: string;
-    };
+export declare class ErrorIcon extends Component {
     render(): React.JSX.Element;
 }

package/dist/types-ts4.5/utils/lightCards/cardError.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
 import { type StaticCardProps } from './types';
-export interface ErrorCardProps extends StaticCardProps {
-    readonly size: 'small' | 'medium' | 'large' | 'xlarge';
-}
-export declare class CardError extends Component<ErrorCardProps, {}> {
-    static defaultProps: {
-        size: string;
-    };
+export declare class CardError extends Component<StaticCardProps, {}> {
     render(): React.JSX.Element;
     get icon(): React.JSX.Element;
 }

package/dist/types-ts4.5/utils/lightCards/errorIcon/index.d.ts

@@ -4,12 +4,6 @@
  */
 import React from 'react';
 import { Component } from 'react';
-export interface ErrorIconProps {
-    readonly size: 'small' | 'medium' | 'large' | 'xlarge';
-}
-export declare class ErrorIcon extends Component<ErrorIconProps, {}> {
-    static defaultProps: {
-        size: string;
-    };
+export declare class ErrorIcon extends Component {
     render(): React.JSX.Element;
 }

package/example-helpers/index.tsx

@@ -89,7 +89,7 @@ export const deleteAction: {
 	handler: () => {
 		console.log('delete');
 	},
-	icon: <CrossIcon color="currentColor" LEGACY_size="small" label="delete" />,
+	icon: <CrossIcon color="currentColor" label="delete" />,
 };
 
 export const annotateCardAction: CardAction = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "79.13.0",
+	"version": "79.13.1",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,11 +45,11 @@
 		"@atlaskit/media-viewer": "^52.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/react-ufo": "^4.16.0",
+		"@atlaskit/react-ufo": "^4.17.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.12.0",
+		"@atlaskit/tooltip": "^20.13.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",