@atlaskit/media-card 81.11.0 → 81.12.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/media-card
 
+## 81.12.0
+
+### Minor Changes
+
+- [`2a1e8245a006e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a1e8245a006e) -
+  Clean up experiment `cc-maui-ai-edit-loading-experiment`. The enabled behaviour is now permanent:
+  media cards and MAUI embeds always render the simple loading bar instead of the spinner/icon
+  carousel, and the AI-edit blanket overlay is always applied when a MAUI app is replaced from the
+  toolbar.
+
+  `@atlaskit/tmp-editor-statsig` removes the `cc-maui-ai-edit-loading-experiment` key from
+  `editorExperimentsConfig`, so reading it via `expValEquals`/`expValEqualsNoExposure` is now a type
+  error — remove those call sites.
+
+  `@atlaskit/media-card` drops its now-unused `@atlaskit/spinner` dependency, and
+  `@atlassian/native-embeds-maui-experience` drops its now-unused `@atlaskit/icon-lab` dependency.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 81.11.0
 
 ### Minor Changes

package/dist/cjs/card/card.js

@@ -8,7 +8,7 @@ var _reactIntl = require("react-intl");
 var _mediaCommon = require("@atlaskit/media-common");
 var _CardWithPerformanceObserver = require("./CardWithPerformanceObserver");
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.19";
+var packageVersion = "81.11.0";
 var Card = exports.Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/cardView.js

@@ -16,7 +16,6 @@ var _mediaClient = require("@atlaskit/media-client");
 var _messages = require("@atlaskit/media-ui/messages");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _isUploadError = require("../isUploadError");
@@ -180,7 +179,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     var loadingConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
       renderPlayButton: false,
       renderTypeIcon: false,
-      renderSpinner: !didImageRender && !didSvgRender
+      renderLoading: !didImageRender && !didSvgRender
     });
     switch (status) {
       case 'uploading':
@@ -252,7 +251,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     iconMessage = _getRenderConfigBySta.iconMessage,
     renderImageRenderer = _getRenderConfigBySta.renderImageRenderer,
     renderSvgView = _getRenderConfigBySta.renderSvgView,
-    renderSpinner = _getRenderConfigBySta.renderSpinner,
+    renderLoading = _getRenderConfigBySta.renderLoading,
     renderPlayButton = _getRenderConfigBySta.renderPlayButton,
     renderBlanket = _getRenderConfigBySta.renderBlanket,
     renderProgressBar = _getRenderConfigBySta.renderProgressBar,
@@ -316,20 +315,12 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   if (suppressLoadingUI) {
     mediaMotion = didImageRender || didSvgRender ? 'entering' : 'hidden';
   }
-
-  // Lazy so the experiment is only evaluated, and exposed, when this is actually rendered.
   var renderLoadingPlaceholder = function renderLoadingPlaceholder() {
-    return (0, _expValEquals.expValEquals)('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
+    return /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
       animationDisabled: disableAnimation,
       testId: "media-card-loading",
       interactionName: "media-card-loading"
-    }) : /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
-      breakpoint: breakpoint,
-      hasTitleBox: hasVisibleTitleBox
-    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-      testId: "media-card-loading",
-      interactionName: "media-card-loading"
-    }));
+    });
   };
   var contents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_imageContainer.ImageContainer, {
     centerElements: didSvgRender && !(0, _fg.fg)('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
@@ -350,7 +341,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && (suppressLoadingUI ?
+  }), iconMessage), renderLoading && (suppressLoadingUI ?
   /*#__PURE__*/
   // Nothing is drawn, but the interaction still has to be held for the
   // same window as the indicator it replaces.

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

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.19";
+var packageVersion = "81.11.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/inline/loader.js

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

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

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardLoading = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _loadingBar = require("../../card/ui/loadingBar/loadingBar");
 var _getDimensionsWithDefault = require("./getDimensionsWithDefault");
 var _lightCardWrappers = require("./lightCardWrappers");
@@ -21,9 +19,7 @@ var CardLoading = exports.CardLoading = function CardLoading(_ref) {
     "data-test-loading": true,
     dimensions: dimensions,
     "data-vc": "media-card-loading"
-  }, (0, _expValEquals.expValEquals)('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
-    interactionName: interactionName || 'media-card-loading'
-  }) : /*#__PURE__*/_react.default.createElement(_spinner.default, {
+  }, /*#__PURE__*/_react.default.createElement(_loadingBar.LoadingBar, {
     interactionName: interactionName || 'media-card-loading'
   }));
 };

package/dist/cjs/utils/ufoExperiences.js

@@ -23,7 +23,7 @@ var _getMediaGlobalScope = require("./globalScope/getMediaGlobalScope");
 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 = "81.10.19";
+var packageVersion = "81.11.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.19";
+const packageVersion = "81.11.0";
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/cardView.js

@@ -6,7 +6,6 @@ import { isFileIdentifier } from '@atlaskit/media-client';
 import { messages } from '@atlaskit/media-ui/messages';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { isUploadError } from '../isUploadError';
@@ -163,7 +162,7 @@ export const CardViewBase = ({
       ...defaultConfig,
       renderPlayButton: false,
       renderTypeIcon: false,
-      renderSpinner: !didImageRender && !didSvgRender
+      renderLoading: !didImageRender && !didSvgRender
     };
     switch (status) {
       case 'uploading':
@@ -240,7 +239,7 @@ export const CardViewBase = ({
     iconMessage,
     renderImageRenderer,
     renderSvgView,
-    renderSpinner,
+    renderLoading,
     renderPlayButton,
     renderBlanket,
     renderProgressBar,
@@ -305,19 +304,11 @@ export const CardViewBase = ({
   if (suppressLoadingUI) {
     mediaMotion = didImageRender || didSvgRender ? 'entering' : 'hidden';
   }
-
-  // Lazy so the experiment is only evaluated, and exposed, when this is actually rendered.
-  const renderLoadingPlaceholder = () => expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
+  const renderLoadingPlaceholder = () => /*#__PURE__*/React.createElement(LoadingBar, {
     animationDisabled: disableAnimation,
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  }) : /*#__PURE__*/React.createElement(IconWrapper, {
-    breakpoint: breakpoint,
-    hasTitleBox: hasVisibleTitleBox
-  }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-    testId: "media-card-loading",
-    interactionName: "media-card-loading"
-  }));
+  });
   const contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
     centerElements: didSvgRender && !fg('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
     ,
@@ -337,7 +328,7 @@ export const CardViewBase = ({
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && (suppressLoadingUI ?
+  }), iconMessage), renderLoading && (suppressLoadingUI ?
   /*#__PURE__*/
   // Nothing is drawn, but the interaction still has to be held for the
   // same window as the indicator it replaces.

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 = "81.10.19";
+const packageVersion = "81.11.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

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: "81.10.19",
+      packageName: "81.11.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { LoadingBar } from '../../card/ui/loadingBar/loadingBar';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 import { Wrapper } from './lightCardWrappers';
@@ -15,9 +13,7 @@ export const CardLoading = ({
     "data-test-loading": true,
     dimensions: dimensions,
     "data-vc": "media-card-loading"
-  }, expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
-    interactionName: interactionName || 'media-card-loading'
-  }) : /*#__PURE__*/React.createElement(SpinnerIcon, {
+  }, /*#__PURE__*/React.createElement(LoadingBar, {
     interactionName: interactionName || 'media-card-loading'
   }));
 };

package/dist/es2019/utils/ufoExperiences.js

@@ -12,7 +12,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
 import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
 import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.19";
+const packageVersion = "81.11.0";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.19";
+var packageVersion = "81.11.0";
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/cardView.js

@@ -10,7 +10,6 @@ import { isFileIdentifier } from '@atlaskit/media-client';
 import { messages } from '@atlaskit/media-ui/messages';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { isUploadError } from '../isUploadError';
@@ -171,7 +170,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     var loadingConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
       renderPlayButton: false,
       renderTypeIcon: false,
-      renderSpinner: !didImageRender && !didSvgRender
+      renderLoading: !didImageRender && !didSvgRender
     });
     switch (status) {
       case 'uploading':
@@ -243,7 +242,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     iconMessage = _getRenderConfigBySta.iconMessage,
     renderImageRenderer = _getRenderConfigBySta.renderImageRenderer,
     renderSvgView = _getRenderConfigBySta.renderSvgView,
-    renderSpinner = _getRenderConfigBySta.renderSpinner,
+    renderLoading = _getRenderConfigBySta.renderLoading,
     renderPlayButton = _getRenderConfigBySta.renderPlayButton,
     renderBlanket = _getRenderConfigBySta.renderBlanket,
     renderProgressBar = _getRenderConfigBySta.renderProgressBar,
@@ -307,20 +306,12 @@ export var CardViewBase = function CardViewBase(_ref) {
   if (suppressLoadingUI) {
     mediaMotion = didImageRender || didSvgRender ? 'entering' : 'hidden';
   }
-
-  // Lazy so the experiment is only evaluated, and exposed, when this is actually rendered.
   var renderLoadingPlaceholder = function renderLoadingPlaceholder() {
-    return expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
+    return /*#__PURE__*/React.createElement(LoadingBar, {
       animationDisabled: disableAnimation,
       testId: "media-card-loading",
       interactionName: "media-card-loading"
-    }) : /*#__PURE__*/React.createElement(IconWrapper, {
-      breakpoint: breakpoint,
-      hasTitleBox: hasVisibleTitleBox
-    }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-      testId: "media-card-loading",
-      interactionName: "media-card-loading"
-    }));
+    });
   };
   var contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
     centerElements: didSvgRender && !fg('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
@@ -341,7 +332,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && (suppressLoadingUI ?
+  }), iconMessage), renderLoading && (suppressLoadingUI ?
   /*#__PURE__*/
   // Nothing is drawn, but the interaction still has to be held for the
   // same window as the indicator it replaces.

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

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.19";
+var packageVersion = "81.11.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/inline/loader.js

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

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import SpinnerIcon from '@atlaskit/spinner/spinner';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { LoadingBar } from '../../card/ui/loadingBar/loadingBar';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 import { Wrapper } from './lightCardWrappers';
@@ -14,9 +12,7 @@ export var CardLoading = function CardLoading(_ref) {
     "data-test-loading": true,
     dimensions: dimensions,
     "data-vc": "media-card-loading"
-  }, expValEquals('cc-maui-ai-edit-loading-experiment', 'isEnabled', true) ? /*#__PURE__*/React.createElement(LoadingBar, {
-    interactionName: interactionName || 'media-card-loading'
-  }) : /*#__PURE__*/React.createElement(SpinnerIcon, {
+  }, /*#__PURE__*/React.createElement(LoadingBar, {
     interactionName: interactionName || 'media-card-loading'
   }));
 };

package/dist/esm/utils/ufoExperiences.js

@@ -16,7 +16,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
 import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
 import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.19";
+var packageVersion = "81.11.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/cardView.d.ts

@@ -61,7 +61,7 @@ export interface RenderConfigByStatus {
     isFixedBlanket?: boolean;
     renderProgressBar?: boolean;
     renderAIBorder?: boolean;
-    renderSpinner?: boolean;
+    renderLoading?: boolean;
     renderFailedTitleBox?: boolean;
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;

package/example-helpers/index.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-line no-console
 
 import React, { type PropsWithChildren } from 'react';
+import { IntlProvider } from 'react-intl';
 
 import { payloadPublisher } from '@atlassian/ufo/publisher';
 
@@ -149,14 +150,16 @@ export const MainWrapper = ({
 }: MainWrapperProps): React.JSX.Element => {
 	enableMediaUfoLogger(payloadPublisher);
 	return (
-		<>
+		// `react-intl` is a peer dependency of this package — the card's loading bar localises its
+		// aria-label via `useIntl`, so examples need a provider in the ancestry.
+		<IntlProvider locale="en">
 			{developmentOnly && <DevelopmentUseMessage />}
 			{!disableFeatureFlagWrapper ? (
 				<FeatureFlagsWrapper>{children}</FeatureFlagsWrapper>
 			) : (
 				<>{children}</>
 			)}
-		</>
+		</IntlProvider>
 	);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "81.11.0",
+	"version": "81.12.0",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,9 +50,8 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.10.0",
 		"@atlaskit/section-message": "^10.2.0",
-		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^192.0.0",
+		"@atlaskit/tmp-editor-statsig": "^193.0.0",
 		"@atlaskit/tokens": "^16.12.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/ufo": "^1.2.0",