@atlaskit/media-card 82.0.0 → 82.1.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/media-card
 
+## 82.1.0
+
+### Minor Changes
+
+- [`a432278c5cb5c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a432278c5cb5c) -
+  [ux] Add opt-in consumer extension points so a product can host its own sidebar content — such as
+  Confluence comments — inside Media Viewer, and restore that viewer state across remounts. All of
+  the new behaviour is gated behind the `cc_comments_media_viewer_sidebar` experiment; with the
+  experiment off both packages behave exactly as before.
+
+  `@atlaskit/media-viewer` adds nine optional fields to `MediaViewerExtensions` and exports the new
+  `MediaViewerNavigationDirection` type. Consumers can intercept the close and navigate paths with
+  `onPreviewClose`, `onSidebarClose` and `onNavigation` — each receives a `proceed()` callback, so a
+  consumer can defer or swallow the action while, for example, prompting about an unsaved comment.
+  Viewer state can be persisted and restored through `getMediaViewerSelectedItem`,
+  `onSelectedItemChange`, `defaultSidebarVisible` and `onSidebarVisibilityChange`, and the existing
+  `sidebar` extension accepts `label` and `title`. The previously shipped `sidebar` and
+  `headerActions` fields are unchanged and are not gated.
+
+  `@atlaskit/media-card` adds no new prop of its own, but `Card`/`FileCard` consumers can now pass
+  `getMediaViewerSelectedItem` and `onSelectedItemChange` through the existing
+  `mediaViewerExtensions` prop to seed the Media Viewer selected item on mount and be notified when
+  it opens or closes — new remount-restore behaviour that also requires this release of
+  `@atlaskit/media-viewer` to typecheck.
+
+  Both packages add `@atlaskit/platform-feature-experiments` as a runtime dependency.
+
+### Patch Changes
+
+- [`ae39a248bd118`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae39a248bd118) -
+  FFCLEANUP-147994 clean up fg relating to fallback media name fetcher
+  platform_editor_media_name_fallback, platform_editor_media_file_rename_on_fallback,
+  platform_editor_media_file_rename_on_fallback, platform_editor_media_name_fallback_viewer_card
+- Updated dependencies
+
 ## 82.0.0
 
 ### Major 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.12.15";
+var packageVersion = "82.0.0";
 var Card = exports.Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/fileCard.js

@@ -23,10 +23,10 @@ var _mediaCommon = require("@atlaskit/media-common");
 var _useFilePreview2 = require("@atlaskit/media-file-preview/use-file-preview");
 var _abuseModal = require("@atlaskit/media-ui/abuseModal");
 var _mediaViewer = require("@atlaskit/media-viewer");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _getActiveTrace = require("@atlaskit/react-ufo/get-active-trace");
 var _usePressTracing = _interopRequireDefault(require("@atlaskit/react-ufo/use-press-tracing"));
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _dateOverrideContext = require("../dateOverrideContext");
 var _isSSRPreview = require("../isSSRPreview");
 var _MediaCardError = require("../MediaCardError");
@@ -184,12 +184,10 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   (0, _react.useEffect)(function () {
     // Reset fetch state when the file identity changes
     var currentId = fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.id;
-    if (currentId && currentId !== lastFetchedFileId.current && (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
-      fallbackMediaNameFetchAttempted.current = false;
-      setFallbackMediaName(undefined);
-      lastFetchedFileId.current = currentId;
-    }
-    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+    fallbackMediaNameFetchAttempted.current = false;
+    setFallbackMediaName(undefined);
+    lastFetchedFileId.current = currentId;
+    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current) {
       fallbackMediaNameFetchAttempted.current = true;
       fallbackMediaNameFetcher(fileStateValue.id).then(function (name) {
         setFallbackMediaName(name);
@@ -291,10 +289,30 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   // CXP-2723 TODO: TEMPORARY VARIABLES
   var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) !== 'image/svg+xml' ? previewError : undefined);
   var finalStatus = finalError ? 'error' : status === 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) === 'image/svg+xml' ? 'loading-preview' : status;
-  var _useState17 = (0, _react.useState)(null),
+
+  // Experiment gate for the Confluence comments-in-media-viewer work. Only the
+  // viewer-state persistence callbacks introduced by that series are gated —
+  // `mediaViewerExtensions` itself is still forwarded to MediaViewer so the
+  // previously shipped `sidebar` and `headerActions` keep working with the
+  // experiment off.
+  var _ref2 = (0, _isExperimentEnabled.isExperimentEnabled)('cc_comments_media_viewer_sidebar') ? mediaViewerExtensions !== null && mediaViewerExtensions !== void 0 ? mediaViewerExtensions : {} : {},
+    getMediaViewerSelectedItem = _ref2.getMediaViewerSelectedItem,
+    onSelectedItemChange = _ref2.onSelectedItemChange;
+  var _useState17 = (0, _react.useState)(function () {
+      var _getMediaViewerSelect;
+      return (_getMediaViewerSelect = getMediaViewerSelectedItem === null || getMediaViewerSelectedItem === void 0 ? void 0 : getMediaViewerSelectedItem(identifier)) !== null && _getMediaViewerSelect !== void 0 ? _getMediaViewerSelect : null;
+    }),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
     mediaViewerSelectedItem = _useState18[0],
     setMediaViewerSelectedItem = _useState18[1];
+  var openMediaViewer = (0, _react.useCallback)(function () {
+    setMediaViewerSelectedItem(identifier);
+    onSelectedItemChange === null || onSelectedItemChange === void 0 || onSelectedItemChange(identifier);
+  }, [identifier, onSelectedItemChange]);
+  var closeMediaViewer = (0, _react.useCallback)(function () {
+    setMediaViewerSelectedItem(null);
+    onSelectedItemChange === null || onSelectedItemChange === void 0 || onSelectedItemChange(null);
+  }, [onSelectedItemChange]);
   var uploadProgressRef = (0, _react.useRef)();
 
   // Store latest auth provider event (emit with fireOperationalEventRef)
@@ -310,12 +328,11 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
           return 'failed';
       }
     };
-    var resolvedFallbackName = (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaName : undefined;
     if ((0, _fg.fg)('dfo_attachments_late_render_fix')) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || resolvedFallbackName || ssrItemDetails && ssrItemDetails.filename,
+          name: fileStateValue.name || fallbackMediaName || ssrItemDetails && ssrItemDetails.filename,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType || ssrItemDetails && ssrItemDetails.mimetype,
           createdAt: fileStateValue.createdAt || ssrItemDetails && ssrItemDetails.createdDate,
@@ -335,7 +352,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || resolvedFallbackName,
+          name: fileStateValue.name || fallbackMediaName,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType,
           createdAt: fileStateValue.createdAt,
@@ -385,7 +402,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   var computedActions = (0, _react.useMemo)(function () {
     if (finalStatus === 'failed-processing' || shouldEnableDownloadButton) {
       var handler = /*#__PURE__*/function () {
-        var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
           return _regenerator.default.wrap(function (_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
@@ -406,7 +423,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
           }, _callee2);
         }));
         return function handler() {
-          return _ref3.apply(this, arguments);
+          return _ref4.apply(this, arguments);
         };
       }();
       var downloadAction = (0, _createDownloadAction.createDownloadAction)({
@@ -593,12 +610,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
-      setMediaViewerSelectedItem({
-        id: identifier.id,
-        mediaItemType: 'file',
-        collectionName: identifier.collectionName,
-        occurrenceKey: identifier.occurrenceKey
-      });
+      openMediaViewer();
     }
 
     // Abort VC when click file card
@@ -851,9 +863,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     items: mediaViewerItems || [],
     mediaClientConfig: mediaClient.config,
     selectedItem: mediaViewerSelectedItem,
-    onClose: function onClose() {
-      setMediaViewerSelectedItem(null);
-    },
+    onClose: closeMediaViewer,
     contextId: contextId,
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,

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.12.15";
+var packageVersion = "82.0.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.12.15",
+        packageName: "82.0.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineCard.js

@@ -23,7 +23,6 @@ var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _mediaViewer = require("@atlaskit/media-viewer");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _usePressTracing = _interopRequireDefault(require("@atlaskit/react-ufo/use-press-tracing"));
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _MediaCardError = require("../MediaCardError");
 var _fireMediaCardEvent = require("../utils/analytics/fireMediaCardEvent");
@@ -131,7 +130,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
         selectedItem: identifier,
         onClose: onMediaViewerClose,
         viewerOptions: viewerOptions,
-        fallbackMediaNameFetcher: (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaNameFetcher : undefined
+        fallbackMediaNameFetcher: fallbackMediaNameFetcher
       }), document.body);
     }
     return null;
@@ -164,7 +163,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
   (0, _react.useEffect)(function () {
-    if (fileState && fileState.status !== 'error' && !fileState.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback', 'isEnabled', true)) {
+    if (fileState && fileState.status !== 'error' && !fileState.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current) {
       fallbackMediaNameFetchAttempted.current = true;
       fallbackMediaNameFetcher(fileState.id).then(function (name) {
         return setFallbackMediaName(name);
@@ -197,7 +196,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
 
   // Empty file handling — try the fallback name fetcher first if available
   if (fileState && !fileState.name) {
-    if (fallbackMediaNameFetcher && !fallbackMediaNameFetchFailed && !fallbackMediaName && (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback', 'isEnabled', true)) {
+    if (fallbackMediaNameFetcher && !fallbackMediaNameFetchFailed && !fallbackMediaName) {
       // Fetch not yet attempted or in flight — show loading
       return /*#__PURE__*/_react.default.createElement(_LoadingView.MediaInlineCardLoadingView, {
         innerRef: copyNodeRef,
@@ -205,7 +204,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
         isSelected: isSelected
       });
     }
-    if (!(0, _expValEquals.expValEquals)('platform_editor_media_name_fallback', 'isEnabled', true) || !fallbackMediaName) {
+    if (!fallbackMediaName) {
       // No fetcher provided or fetch failed — show error
       var _error = new _MediaCardError.MediaCardError('metadata-fetch', new _mediaClient.FileFetcherError('emptyFileName', {
         id: fileState.id
@@ -241,7 +240,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
   var mediaType = fileState.mediaType,
     fileStateName = fileState.name,
     mimeType = fileState.mimeType;
-  var name = (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback', 'isEnabled', true) ? fileStateName || fallbackMediaName : fileStateName;
+  var name = fileStateName || fallbackMediaName;
   var linkIcon = /*#__PURE__*/_react.default.createElement(_mimeTypeIcon.MimeTypeIcon, {
     testId: 'media-inline-card-file-type-icon',
     size: "small",

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.12.15";
+var packageVersion = "82.0.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.12.15";
+const packageVersion = "82.0.0";
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/fileCard.js

@@ -11,10 +11,10 @@ import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser, getRan
 import { useFilePreview } from '@atlaskit/media-file-preview/use-file-preview';
 import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getActiveTrace } from '@atlaskit/react-ufo/get-active-trace';
 import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { DateOverrideContext } from '../dateOverrideContext';
 import { isSSRPreview } from '../isSSRPreview';
 import { MediaCardError } from '../MediaCardError';
@@ -152,12 +152,10 @@ export const FileCard = ({
   useEffect(() => {
     // Reset fetch state when the file identity changes
     const currentId = fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.id;
-    if (currentId && currentId !== lastFetchedFileId.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
-      fallbackMediaNameFetchAttempted.current = false;
-      setFallbackMediaName(undefined);
-      lastFetchedFileId.current = currentId;
-    }
-    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+    fallbackMediaNameFetchAttempted.current = false;
+    setFallbackMediaName(undefined);
+    lastFetchedFileId.current = currentId;
+    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current) {
       fallbackMediaNameFetchAttempted.current = true;
       fallbackMediaNameFetcher(fileStateValue.id).then(name => {
         setFallbackMediaName(name);
@@ -242,7 +240,28 @@ export const FileCard = ({
   // CXP-2723 TODO: TEMPORARY VARIABLES
   const finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) !== 'image/svg+xml' ? previewError : undefined);
   const finalStatus = finalError ? 'error' : status === 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) === 'image/svg+xml' ? 'loading-preview' : status;
-  const [mediaViewerSelectedItem, setMediaViewerSelectedItem] = useState(null);
+
+  // Experiment gate for the Confluence comments-in-media-viewer work. Only the
+  // viewer-state persistence callbacks introduced by that series are gated —
+  // `mediaViewerExtensions` itself is still forwarded to MediaViewer so the
+  // previously shipped `sidebar` and `headerActions` keep working with the
+  // experiment off.
+  const {
+    getMediaViewerSelectedItem,
+    onSelectedItemChange
+  } = isExperimentEnabled('cc_comments_media_viewer_sidebar') ? mediaViewerExtensions !== null && mediaViewerExtensions !== void 0 ? mediaViewerExtensions : {} : {};
+  const [mediaViewerSelectedItem, setMediaViewerSelectedItem] = useState(() => {
+    var _getMediaViewerSelect;
+    return (_getMediaViewerSelect = getMediaViewerSelectedItem === null || getMediaViewerSelectedItem === void 0 ? void 0 : getMediaViewerSelectedItem(identifier)) !== null && _getMediaViewerSelect !== void 0 ? _getMediaViewerSelect : null;
+  });
+  const openMediaViewer = useCallback(() => {
+    setMediaViewerSelectedItem(identifier);
+    onSelectedItemChange === null || onSelectedItemChange === void 0 ? void 0 : onSelectedItemChange(identifier);
+  }, [identifier, onSelectedItemChange]);
+  const closeMediaViewer = useCallback(() => {
+    setMediaViewerSelectedItem(null);
+    onSelectedItemChange === null || onSelectedItemChange === void 0 ? void 0 : onSelectedItemChange(null);
+  }, [onSelectedItemChange]);
   const uploadProgressRef = useRef();
 
   // Store latest auth provider event (emit with fireOperationalEventRef)
@@ -258,12 +277,11 @@ export const FileCard = ({
           return 'failed';
       }
     };
-    const resolvedFallbackName = expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaName : undefined;
     if (fg('dfo_attachments_late_render_fix')) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || resolvedFallbackName || ssrItemDetails && ssrItemDetails.filename,
+          name: fileStateValue.name || fallbackMediaName || ssrItemDetails && ssrItemDetails.filename,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType || ssrItemDetails && ssrItemDetails.mimetype,
           createdAt: fileStateValue.createdAt || ssrItemDetails && ssrItemDetails.createdDate,
@@ -283,7 +301,7 @@ export const FileCard = ({
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || resolvedFallbackName,
+          name: fileStateValue.name || fallbackMediaName,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType,
           createdAt: fileStateValue.createdAt,
@@ -507,12 +525,7 @@ export const FileCard = ({
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
-      setMediaViewerSelectedItem({
-        id: identifier.id,
-        mediaItemType: 'file',
-        collectionName: identifier.collectionName,
-        occurrenceKey: identifier.occurrenceKey
-      });
+      openMediaViewer();
     }
 
     // Abort VC when click file card
@@ -764,9 +777,7 @@ export const FileCard = ({
     items: mediaViewerItems || [],
     mediaClientConfig: mediaClient.config,
     selectedItem: mediaViewerSelectedItem,
-    onClose: () => {
-      setMediaViewerSelectedItem(null);
-    },
+    onClose: closeMediaViewer,
     contextId: contextId,
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,

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.12.15";
+const packageVersion = "82.0.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.12.15",
+      packageName: "82.0.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineCard.js

@@ -14,7 +14,6 @@ import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { MediaCardError } from '../MediaCardError';
 import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
@@ -97,7 +96,7 @@ export const MediaInlineCardInternal = ({
         selectedItem: identifier,
         onClose: onMediaViewerClose,
         viewerOptions: viewerOptions,
-        fallbackMediaNameFetcher: expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaNameFetcher : undefined
+        fallbackMediaNameFetcher: fallbackMediaNameFetcher
       }), document.body);
     }
     return null;
@@ -130,7 +129,7 @@ export const MediaInlineCardInternal = ({
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
   useEffect(() => {
-    if (fileState && fileState.status !== 'error' && !fileState.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && expValEquals('platform_editor_media_name_fallback', 'isEnabled', true)) {
+    if (fileState && fileState.status !== 'error' && !fileState.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current) {
       fallbackMediaNameFetchAttempted.current = true;
       fallbackMediaNameFetcher(fileState.id).then(name => setFallbackMediaName(name), () => setFallbackMediaNameFetchFailed(true));
     }
@@ -159,7 +158,7 @@ export const MediaInlineCardInternal = ({
 
   // Empty file handling — try the fallback name fetcher first if available
   if (fileState && !fileState.name) {
-    if (fallbackMediaNameFetcher && !fallbackMediaNameFetchFailed && !fallbackMediaName && expValEquals('platform_editor_media_name_fallback', 'isEnabled', true)) {
+    if (fallbackMediaNameFetcher && !fallbackMediaNameFetchFailed && !fallbackMediaName) {
       // Fetch not yet attempted or in flight — show loading
       return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
         innerRef: copyNodeRef,
@@ -167,7 +166,7 @@ export const MediaInlineCardInternal = ({
         isSelected: isSelected
       });
     }
-    if (!expValEquals('platform_editor_media_name_fallback', 'isEnabled', true) || !fallbackMediaName) {
+    if (!fallbackMediaName) {
       // No fetcher provided or fetch failed — show error
       const error = new MediaCardError('metadata-fetch', new FileFetcherError('emptyFileName', {
         id: fileState.id
@@ -205,7 +204,7 @@ export const MediaInlineCardInternal = ({
     name: fileStateName,
     mimeType
   } = fileState;
-  const name = expValEquals('platform_editor_media_name_fallback', 'isEnabled', true) ? fileStateName || fallbackMediaName : fileStateName;
+  const name = fileStateName || fallbackMediaName;
   const linkIcon = /*#__PURE__*/React.createElement(MimeTypeIcon, {
     testId: 'media-inline-card-file-type-icon',
     size: "small",

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.12.15";
+const packageVersion = "82.0.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.12.15";
+var packageVersion = "82.0.0";
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/fileCard.js

@@ -18,10 +18,10 @@ import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser, getRan
 import { useFilePreview } from '@atlaskit/media-file-preview/use-file-preview';
 import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getActiveTrace } from '@atlaskit/react-ufo/get-active-trace';
 import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { DateOverrideContext } from '../dateOverrideContext';
 import { isSSRPreview } from '../isSSRPreview';
 import { MediaCardError } from '../MediaCardError';
@@ -176,12 +176,10 @@ export var FileCard = function FileCard(_ref) {
   useEffect(function () {
     // Reset fetch state when the file identity changes
     var currentId = fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.id;
-    if (currentId && currentId !== lastFetchedFileId.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
-      fallbackMediaNameFetchAttempted.current = false;
-      setFallbackMediaName(undefined);
-      lastFetchedFileId.current = currentId;
-    }
-    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true)) {
+    fallbackMediaNameFetchAttempted.current = false;
+    setFallbackMediaName(undefined);
+    lastFetchedFileId.current = currentId;
+    if (fileStateValue && !fileStateValue.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current) {
       fallbackMediaNameFetchAttempted.current = true;
       fallbackMediaNameFetcher(fileStateValue.id).then(function (name) {
         setFallbackMediaName(name);
@@ -283,10 +281,30 @@ export var FileCard = function FileCard(_ref) {
   // CXP-2723 TODO: TEMPORARY VARIABLES
   var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) !== 'image/svg+xml' ? previewError : undefined);
   var finalStatus = finalError ? 'error' : status === 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) === 'image/svg+xml' ? 'loading-preview' : status;
-  var _useState17 = useState(null),
+
+  // Experiment gate for the Confluence comments-in-media-viewer work. Only the
+  // viewer-state persistence callbacks introduced by that series are gated —
+  // `mediaViewerExtensions` itself is still forwarded to MediaViewer so the
+  // previously shipped `sidebar` and `headerActions` keep working with the
+  // experiment off.
+  var _ref2 = isExperimentEnabled('cc_comments_media_viewer_sidebar') ? mediaViewerExtensions !== null && mediaViewerExtensions !== void 0 ? mediaViewerExtensions : {} : {},
+    getMediaViewerSelectedItem = _ref2.getMediaViewerSelectedItem,
+    onSelectedItemChange = _ref2.onSelectedItemChange;
+  var _useState17 = useState(function () {
+      var _getMediaViewerSelect;
+      return (_getMediaViewerSelect = getMediaViewerSelectedItem === null || getMediaViewerSelectedItem === void 0 ? void 0 : getMediaViewerSelectedItem(identifier)) !== null && _getMediaViewerSelect !== void 0 ? _getMediaViewerSelect : null;
+    }),
     _useState18 = _slicedToArray(_useState17, 2),
     mediaViewerSelectedItem = _useState18[0],
     setMediaViewerSelectedItem = _useState18[1];
+  var openMediaViewer = useCallback(function () {
+    setMediaViewerSelectedItem(identifier);
+    onSelectedItemChange === null || onSelectedItemChange === void 0 || onSelectedItemChange(identifier);
+  }, [identifier, onSelectedItemChange]);
+  var closeMediaViewer = useCallback(function () {
+    setMediaViewerSelectedItem(null);
+    onSelectedItemChange === null || onSelectedItemChange === void 0 || onSelectedItemChange(null);
+  }, [onSelectedItemChange]);
   var uploadProgressRef = useRef();
 
   // Store latest auth provider event (emit with fireOperationalEventRef)
@@ -302,12 +320,11 @@ export var FileCard = function FileCard(_ref) {
           return 'failed';
       }
     };
-    var resolvedFallbackName = expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaName : undefined;
     if (fg('dfo_attachments_late_render_fix')) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || resolvedFallbackName || ssrItemDetails && ssrItemDetails.filename,
+          name: fileStateValue.name || fallbackMediaName || ssrItemDetails && ssrItemDetails.filename,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType || ssrItemDetails && ssrItemDetails.mimetype,
           createdAt: fileStateValue.createdAt || ssrItemDetails && ssrItemDetails.createdDate,
@@ -327,7 +344,7 @@ export var FileCard = function FileCard(_ref) {
       if (fileStateValue) {
         return {
           id: fileStateValue.id,
-          name: fileStateValue.name || resolvedFallbackName,
+          name: fileStateValue.name || fallbackMediaName,
           size: fileStateValue.size,
           mimeType: fileStateValue.mimeType,
           createdAt: fileStateValue.createdAt,
@@ -377,7 +394,7 @@ export var FileCard = function FileCard(_ref) {
   var computedActions = useMemo(function () {
     if (finalStatus === 'failed-processing' || shouldEnableDownloadButton) {
       var handler = /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
           return _regeneratorRuntime.wrap(function (_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
@@ -398,7 +415,7 @@ export var FileCard = function FileCard(_ref) {
           }, _callee2);
         }));
         return function handler() {
-          return _ref3.apply(this, arguments);
+          return _ref4.apply(this, arguments);
         };
       }();
       var downloadAction = createDownloadAction({
@@ -585,12 +602,7 @@ export var FileCard = function FileCard(_ref) {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
-      setMediaViewerSelectedItem({
-        id: identifier.id,
-        mediaItemType: 'file',
-        collectionName: identifier.collectionName,
-        occurrenceKey: identifier.occurrenceKey
-      });
+      openMediaViewer();
     }
 
     // Abort VC when click file card
@@ -843,9 +855,7 @@ export var FileCard = function FileCard(_ref) {
     items: mediaViewerItems || [],
     mediaClientConfig: mediaClient.config,
     selectedItem: mediaViewerSelectedItem,
-    onClose: function onClose() {
-      setMediaViewerSelectedItem(null);
-    },
+    onClose: closeMediaViewer,
     contextId: contextId,
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,

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.12.15";
+var packageVersion = "82.0.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.12.15",
+        packageName: "82.0.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineCard.js

@@ -15,7 +15,6 @@ import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { MediaCardError } from '../MediaCardError';
 import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
@@ -122,7 +121,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
         selectedItem: identifier,
         onClose: onMediaViewerClose,
         viewerOptions: viewerOptions,
-        fallbackMediaNameFetcher: expValEquals('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) ? fallbackMediaNameFetcher : undefined
+        fallbackMediaNameFetcher: fallbackMediaNameFetcher
       }), document.body);
     }
     return null;
@@ -155,7 +154,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
   useEffect(function () {
-    if (fileState && fileState.status !== 'error' && !fileState.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current && expValEquals('platform_editor_media_name_fallback', 'isEnabled', true)) {
+    if (fileState && fileState.status !== 'error' && !fileState.name && fallbackMediaNameFetcher && !fallbackMediaNameFetchAttempted.current) {
       fallbackMediaNameFetchAttempted.current = true;
       fallbackMediaNameFetcher(fileState.id).then(function (name) {
         return setFallbackMediaName(name);
@@ -188,7 +187,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
 
   // Empty file handling — try the fallback name fetcher first if available
   if (fileState && !fileState.name) {
-    if (fallbackMediaNameFetcher && !fallbackMediaNameFetchFailed && !fallbackMediaName && expValEquals('platform_editor_media_name_fallback', 'isEnabled', true)) {
+    if (fallbackMediaNameFetcher && !fallbackMediaNameFetchFailed && !fallbackMediaName) {
       // Fetch not yet attempted or in flight — show loading
       return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
         innerRef: copyNodeRef,
@@ -196,7 +195,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
         isSelected: isSelected
       });
     }
-    if (!expValEquals('platform_editor_media_name_fallback', 'isEnabled', true) || !fallbackMediaName) {
+    if (!fallbackMediaName) {
       // No fetcher provided or fetch failed — show error
       var _error = new MediaCardError('metadata-fetch', new FileFetcherError('emptyFileName', {
         id: fileState.id
@@ -232,7 +231,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
   var mediaType = fileState.mediaType,
     fileStateName = fileState.name,
     mimeType = fileState.mimeType;
-  var name = expValEquals('platform_editor_media_name_fallback', 'isEnabled', true) ? fileStateName || fallbackMediaName : fileStateName;
+  var name = fileStateName || fallbackMediaName;
   var linkIcon = /*#__PURE__*/React.createElement(MimeTypeIcon, {
     testId: 'media-inline-card-file-type-icon',
     size: "small",

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.12.15";
+var packageVersion = "82.0.0";
 var SAMPLE_RATE = 0.05;
 
 /**

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

@@ -89,12 +89,13 @@ export interface FileCardProps extends CardEventProps {
     readonly ssrMediaItem?: SsrMediaItem;
     /** General Error handling include status errors and display errors*/
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
-    /** Extensions for the media viewer (e.g. comment button in header). */
+    /** Extensions for the media viewer (e.g. comment button in header, sidebar with comment indicator). */
     readonly mediaViewerExtensions?: MediaViewerExtensions;
     /**
      * Optional fallback fetcher to retrieve the media filename from another service.
      * Workaround for #hot-301450 where media service is missing filenames for DC -> Cloud migrated media.
      * Receives the file ID and should resolve to the filename string.
+     * TODO: Remove this prop when fallback-fetcher usage is sufficiently low.
      */
     readonly fallbackMediaNameFetcher?: (id: string) => Promise<string>;
 }

package/dist/types/inline/mediaInlineCard.d.ts

@@ -17,6 +17,7 @@ export interface MediaInlineCardProps {
      * Optional fallback fetcher to retrieve the media filename from another service
      * Workaround for #hot-301450 where media service is missing filenames for DC -> Cloud migrated media
      * Receives the file ID and should resolve to the filename string.
+     * TODO: Remove this prop when fallback-fetcher usage is sufficiently low.
      */
     fallbackMediaNameFetcher?: (id: string) => Promise<string>;
     /**

package/dist/types/types.d.ts

@@ -132,7 +132,7 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly ssrMediaItem?: SsrMediaItem;
     /** General Error handling include status errors and display errors*/
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
-    /** Extensions for the media viewer (e.g. comment button in header). */
+    /** Extensions for the media viewer (e.g. comment button in header, sidebar with comment indicator). */
     readonly mediaViewerExtensions?: MediaViewerExtensions;
     /**
      * Optional fallback fetcher to retrieve the media filename from another service.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "82.0.0",
+	"version": "82.1.0",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,7 +46,8 @@
 		"@atlaskit/media-state": "^4.0.0",
 		"@atlaskit/media-svg": "^4.0.0",
 		"@atlaskit/media-ui": "^31.0.0",
-		"@atlaskit/media-viewer": "^54.8.0",
+		"@atlaskit/media-viewer": "^54.9.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/progress-bar": "^5.3.0",
@@ -54,7 +55,7 @@
 		"@atlaskit/react-ufo": "^8.0.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^205.0.0",
+		"@atlaskit/tmp-editor-statsig": "^206.0.0",
 		"@atlaskit/tokens": "^20.0.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/ufo": "^2.0.0",
@@ -92,6 +93,7 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^17.3.0",
 		"@atlassian/a11y-jest-testing": "^0.17.0",
+		"@atlassian/experiment-test-utils": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/testing-library": "^0.11.0",
 		"@atlassian/ufo": "^1.0.0",