@atlaskit/media-viewer 53.0.0 → 53.0.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-viewer
 
+## 53.0.2
+
+### Patch Changes
+
+- [`87c390129e175`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87c390129e175) -
+  [ux] Fix accessibility suppression for media components behind feature gate
+  `platform_media_a11y_suppression_fixes`. Replaces `role="presentation"` with `role="none"` and
+  removes `tabIndex={-1}`, `onKeyDown`, and `onFocus` handlers from non-interactive media wrappers
+  to prevent focus being stolen from the editor when media cards are clicked.
+
+## 53.0.1
+
+### Patch Changes
+
+- [`e3d1ec1074c7e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3d1ec1074c7e) -
+  Removing UNSAFE_componentWillReceiveProps from media-picker, media-avatar-picker and media-viewer
+  package to support React19 migration
+
 ## 53.0.0
 
 ### Major Changes

package/dist/cjs/styleWrappers.compiled.css

@@ -1,5 +1,4 @@
 
-._kkk2n7od{all:unset}
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
@@ -28,7 +27,6 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
-._1e0c1ule{display:block}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}

package/dist/cjs/styleWrappers.js

@@ -19,8 +19,6 @@ var _useCallbackRef = require("use-callback-ref");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
 var _excluded = ["canDrag", "isDragging", "shouldPixelate", "data-testid", "src", "style", "onLoad", "onError", "alt", "className"];
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
@@ -74,7 +72,6 @@ var downloadButtonWrapperStyles = null;
 var customVideoPlayerWrapperStyles = null;
 var sidebarWrapperStyles = null;
 var spinnerWrapperStyles = null;
-var resetButtonStyle = null;
 var formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 var Blanket = exports.Blanket = function Blanket(_ref) {
@@ -247,33 +244,22 @@ var LeftHeader = exports.LeftHeader = function LeftHeader(_ref18) {
 var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref19, ref) {
   var children = _ref19.children,
     datatestId = _ref19['data-testid'],
-    _onClick = _ref19.onClick,
+    onClick = _ref19.onClick,
     style = _ref19.style,
     className = _ref19.className;
-  var intl = (0, _reactIntl.useIntl)();
-  return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+  var a11yProps = (0, _platformFeatureFlags.fg)("platform_media_a11y_suppression_fixes") ? {
+    role: "none"
+  } : {};
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, a11yProps, {
     "data-testid": datatestId,
-    onClick: function onClick(event) {
-      return _onClick && _onClick(event);
-    },
-    ref: ref,
-    "aria-label": intl.formatMessage(_mediaUi.messages.svg_image_preview_label_assistive_text)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: (0, _runtime.ax)(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
-  }, children) : /*#__PURE__*/React.createElement("div", {
-    "data-testid": datatestId,
-    onClick: _onClick,
+    onClick: onClick,
     ref: ref,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
-  }, children);
+  }), children);
 });
 var BaselineExtend = exports.BaselineExtend = function BaselineExtend() {
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/viewers/archiveSidebar/styleWrappers.compiled.css

@@ -1,9 +1,11 @@
 
+._kkk2n7od{all:unset}
 ._19itglyw{border:none}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._v564rca0{transition:background-color .3s}
-._v564t24z{transition:all 1s}._154iidpf{top:0}
+._v564t24z{transition:all 1s}
+._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._18m915zi{overflow-y:scroll}
@@ -17,6 +19,7 @@
 ._1bsb1osq{width:100%}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._1ltv15ov{left:var(--_53yrec)}
 ._1ltvidpf{left:0}
 ._1o51q7pw{animation-fill-mode:forwards}
@@ -53,7 +56,10 @@
 ._u5f31v6z{padding-right:7px}
 ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
 ._vchhusvi{box-sizing:border-box}
-._vwz41xde{line-height:1.14286}
+._vwz41xde{line-height:1.14286}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
+._ra3xnqa1:focus-visible{outline-style:solid}
 ._d0altlke:hover{cursor:pointer}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}

package/dist/cjs/viewers/archiveSidebar/styleWrappers.js

@@ -20,6 +20,7 @@ var archiveItemViewerWrapperStyles = null;
 var archiveSideBarStyles = null;
 var slideDown = null;
 var archiveDownloadButtonWrapperStyles = null;
+var archiveDownloadButtonWrapperStyleFix = null;
 var disabledArchiveDownloadButtonWrapperStyles = null;
 var archiveSidebarFolderWrapperStyles = null;
 var sidebarItemWrapperStyles = null;
@@ -65,7 +66,7 @@ var ArchiveDownloadButtonWrapper = exports.ArchiveDownloadButtonWrapper = functi
       return _onClick && _onClick(event);
     },
     "data-testid": "media-archiveDownloadButton",
-    className: (0, _runtime.ax)(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
+    className: (0, _runtime.ax)(["_kkk2n7od _1e0c1ule _1ah3v77o _128mdkaa _mizu1v1w _ra3xnqa1", "_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
   }, children) : /*#__PURE__*/React.createElement("div", {
     onClick: _onClick,
     "data-testid": "media-archiveDownloadButton",

package/dist/cjs/viewers/base-viewer.js

@@ -17,6 +17,7 @@ var _reactIntl = require("react-intl");
 var _mediaUi = require("@atlaskit/media-ui");
 var _deepEqual = _interopRequireDefault(require("deep-equal"));
 var _mediaClient = require("@atlaskit/media-client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _errorMessage = _interopRequireDefault(require("../errorMessage"));
 var _loading = require("../loading");
 var _download = require("../download");
@@ -73,6 +74,9 @@ var BaseViewer = exports.BaseViewer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if ((0, _platformFeatureFlags.fg)('platform_media_package_react19_lifecycle_fix')) {
+        return;
+      }
       if (this.needsReset(nextProps, this.props)) {
         this.release();
         this.setState(this.initialState);
@@ -81,8 +85,16 @@ var BaseViewer = exports.BaseViewer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      if (this.needsReset(prevProps, this.props)) {
-        this.init();
+      if ((0, _platformFeatureFlags.fg)('platform_media_package_react19_lifecycle_fix')) {
+        if (this.needsReset(prevProps, this.props)) {
+          this.release();
+          this.setState(this.initialState);
+          this.init();
+        }
+      } else {
+        if (this.needsReset(prevProps, this.props)) {
+          this.init();
+        }
       }
     }
   }, {

package/dist/cjs/viewers/svg/ImageWrapper-compiled.js

@@ -1,6 +1,7 @@
 /* ImageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,9 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.ImageWrapper = void 0;
 require("./ImageWrapper-compiled.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _mediaUi = require("@atlaskit/media-ui");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntl = require("react-intl");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var imageWrapperStyles = null;
@@ -19,17 +19,13 @@ var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(fu
   var children = _ref.children,
     onClick = _ref.onClick,
     isHidden = _ref.isHidden;
-  var intl = (0, _reactIntl.useIntl)();
-  return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/_react.default.createElement("button", {
+  var a11yProps = (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? {
+    role: 'none'
+  } : {};
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, a11yProps, {
     "data-testid": "media-viewer-svg-wrapper",
     onClick: onClick,
     ref: ref,
-    "aria-label": intl.formatMessage(_mediaUi.messages.svg_image_preview_label_assistive_text),
     className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
-  }, children) : /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "media-viewer-svg-wrapper",
-    onClick: onClick,
-    ref: ref,
-    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
-  }, children);
+  }), children);
 });

package/dist/es2019/styleWrappers.compiled.css

@@ -1,5 +1,4 @@
 
-._kkk2n7od{all:unset}
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
@@ -28,7 +27,6 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
-._1e0c1ule{display:block}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}

package/dist/es2019/styleWrappers.js

@@ -12,8 +12,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import Heading from '@atlaskit/heading';
-import { useIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui';
 const blanketStyles = null;
 const headerWrapperStyles = null;
 const archiveHeaderWrapperStyles = null;
@@ -61,7 +59,6 @@ const downloadButtonWrapperStyles = null;
 const customVideoPlayerWrapperStyles = null;
 const sidebarWrapperStyles = null;
 const spinnerWrapperStyles = null;
-const resetButtonStyle = null;
 const formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 export const Blanket = ({
@@ -222,19 +219,10 @@ export const ImageWrapper = /*#__PURE__*/forwardRef(({
   style,
   className
 }, ref) => {
-  const intl = useIntl();
-  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
-    "data-testid": datatestId,
-    onClick: event => onClick && onClick(event),
-    ref: ref,
-    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: ax(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
-  }, children) : /*#__PURE__*/React.createElement("div", {
+  const a11yProps = fg("platform_media_a11y_suppression_fixes") ? {
+    role: "none"
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({}, a11yProps, {
     "data-testid": datatestId,
     onClick: onClick,
     ref: ref,
@@ -243,7 +231,7 @@ export const ImageWrapper = /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
-  }, children);
+  }), children);
 });
 export const BaselineExtend = () => /*#__PURE__*/React.createElement("div", {
   className: ax(["_4t3i1osq _1e0c1o8l _s7n4nkob"])

package/dist/es2019/viewers/archiveSidebar/styleWrappers.compiled.css

@@ -1,9 +1,11 @@
 
+._kkk2n7od{all:unset}
 ._19itglyw{border:none}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._v564rca0{transition:background-color .3s}
-._v564t24z{transition:all 1s}._154iidpf{top:0}
+._v564t24z{transition:all 1s}
+._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._18m915zi{overflow-y:scroll}
@@ -17,6 +19,7 @@
 ._1bsb1osq{width:100%}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._1ltv1mjv{left:300px}
 ._1ltvidpf{left:0}
 ._1o51q7pw{animation-fill-mode:forwards}
@@ -53,7 +56,10 @@
 ._u5f31v6z{padding-right:7px}
 ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
 ._vchhusvi{box-sizing:border-box}
-._vwz41xde{line-height:1.14286}
+._vwz41xde{line-height:1.14286}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
+._ra3xnqa1:focus-visible{outline-style:solid}
 ._d0altlke:hover{cursor:pointer}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}

package/dist/es2019/viewers/archiveSidebar/styleWrappers.js

@@ -13,6 +13,7 @@ const archiveItemViewerWrapperStyles = null;
 const archiveSideBarStyles = null;
 const slideDown = null;
 const archiveDownloadButtonWrapperStyles = null;
+const archiveDownloadButtonWrapperStyleFix = null;
 const disabledArchiveDownloadButtonWrapperStyles = null;
 const archiveSidebarFolderWrapperStyles = null;
 const sidebarItemWrapperStyles = null;
@@ -57,7 +58,7 @@ export const ArchiveDownloadButtonWrapper = ({
     "aria-label": intl.formatMessage(messages.archive_download_label_assistive_text),
     onClick: event => onClick && onClick(event),
     "data-testid": "media-archiveDownloadButton",
-    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
+    className: ax(["_kkk2n7od _1e0c1ule _1ah3v77o _128mdkaa _mizu1v1w _ra3xnqa1", "_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
   }, children) : /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
     "data-testid": "media-archiveDownloadButton",

package/dist/es2019/viewers/base-viewer.js

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import deepEqual from 'deep-equal';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorMessage from '../errorMessage';
 import { Spinner } from '../loading';
 import { ErrorViewDownloadButton } from '../download';
@@ -45,14 +46,25 @@ export class BaseViewer extends React.Component {
   // However, this lifecycle method might eventually be deprecated, so be careful
   // when working with it.
   UNSAFE_componentWillReceiveProps(nextProps) {
+    if (fg('platform_media_package_react19_lifecycle_fix')) {
+      return;
+    }
     if (this.needsReset(nextProps, this.props)) {
       this.release();
       this.setState(this.initialState);
     }
   }
   componentDidUpdate(prevProps) {
-    if (this.needsReset(prevProps, this.props)) {
-      this.init();
+    if (fg('platform_media_package_react19_lifecycle_fix')) {
+      if (this.needsReset(prevProps, this.props)) {
+        this.release();
+        this.setState(this.initialState);
+        this.init();
+      }
+    } else {
+      if (this.needsReset(prevProps, this.props)) {
+        this.init();
+      }
     }
   }
   render() {

package/dist/es2019/viewers/svg/ImageWrapper-compiled.js

@@ -1,9 +1,8 @@
 /* ImageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./ImageWrapper-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import { messages } from '@atlaskit/media-ui';
 import React, { forwardRef } from 'react';
-import { useIntl } from 'react-intl';
 import { fg } from '@atlaskit/platform-feature-flags';
 const imageWrapperStyles = null;
 const dynamicImageWrapperStyles = null;
@@ -12,17 +11,13 @@ export const ImageWrapper = /*#__PURE__*/forwardRef(({
   onClick,
   isHidden
 }, ref) => {
-  const intl = useIntl();
-  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+  const a11yProps = fg('platform_media_a11y_suppression_fixes') ? {
+    role: 'none'
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({}, a11yProps, {
     "data-testid": "media-viewer-svg-wrapper",
     onClick: onClick,
     ref: ref,
-    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text),
     className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
-  }, children) : /*#__PURE__*/React.createElement("div", {
-    "data-testid": "media-viewer-svg-wrapper",
-    onClick: onClick,
-    ref: ref,
-    className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
-  }, children);
+  }), children);
 });

package/dist/esm/styleWrappers.compiled.css

@@ -1,5 +1,4 @@
 
-._kkk2n7od{all:unset}
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
@@ -28,7 +27,6 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
-._1e0c1ule{display:block}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}

package/dist/esm/styleWrappers.js

@@ -17,8 +17,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import Heading from '@atlaskit/heading';
-import { useIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui';
 var blanketStyles = null;
 var headerWrapperStyles = null;
 var archiveHeaderWrapperStyles = null;
@@ -66,7 +64,6 @@ var downloadButtonWrapperStyles = null;
 var customVideoPlayerWrapperStyles = null;
 var sidebarWrapperStyles = null;
 var spinnerWrapperStyles = null;
-var resetButtonStyle = null;
 var formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 export var Blanket = function Blanket(_ref) {
@@ -239,33 +236,22 @@ export var LeftHeader = function LeftHeader(_ref18) {
 export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref19, ref) {
   var children = _ref19.children,
     datatestId = _ref19['data-testid'],
-    _onClick = _ref19.onClick,
+    onClick = _ref19.onClick,
     style = _ref19.style,
     className = _ref19.className;
-  var intl = useIntl();
-  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+  var a11yProps = fg("platform_media_a11y_suppression_fixes") ? {
+    role: "none"
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({}, a11yProps, {
     "data-testid": datatestId,
-    onClick: function onClick(event) {
-      return _onClick && _onClick(event);
-    },
-    ref: ref,
-    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: ax(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
-  }, children) : /*#__PURE__*/React.createElement("div", {
-    "data-testid": datatestId,
-    onClick: _onClick,
+    onClick: onClick,
     ref: ref,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
-  }, children);
+  }), children);
 });
 export var BaselineExtend = function BaselineExtend() {
   return /*#__PURE__*/React.createElement("div", {

package/dist/esm/viewers/archiveSidebar/styleWrappers.compiled.css

@@ -1,9 +1,11 @@
 
+._kkk2n7od{all:unset}
 ._19itglyw{border:none}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._v564rca0{transition:background-color .3s}
-._v564t24z{transition:all 1s}._154iidpf{top:0}
+._v564t24z{transition:all 1s}
+._154iidpf{top:0}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._18m915zi{overflow-y:scroll}
@@ -17,6 +19,7 @@
 ._1bsb1osq{width:100%}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._1ltv15ov{left:var(--_53yrec)}
 ._1ltvidpf{left:0}
 ._1o51q7pw{animation-fill-mode:forwards}
@@ -53,7 +56,10 @@
 ._u5f31v6z{padding-right:7px}
 ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
 ._vchhusvi{box-sizing:border-box}
-._vwz41xde{line-height:1.14286}
+._vwz41xde{line-height:1.14286}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
+._ra3xnqa1:focus-visible{outline-style:solid}
 ._d0altlke:hover{cursor:pointer}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}

package/dist/esm/viewers/archiveSidebar/styleWrappers.js

@@ -13,6 +13,7 @@ var archiveItemViewerWrapperStyles = null;
 var archiveSideBarStyles = null;
 var slideDown = null;
 var archiveDownloadButtonWrapperStyles = null;
+var archiveDownloadButtonWrapperStyleFix = null;
 var disabledArchiveDownloadButtonWrapperStyles = null;
 var archiveSidebarFolderWrapperStyles = null;
 var sidebarItemWrapperStyles = null;
@@ -58,7 +59,7 @@ export var ArchiveDownloadButtonWrapper = function ArchiveDownloadButtonWrapper(
       return _onClick && _onClick(event);
     },
     "data-testid": "media-archiveDownloadButton",
-    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
+    className: ax(["_kkk2n7od _1e0c1ule _1ah3v77o _128mdkaa _mizu1v1w _ra3xnqa1", "_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
   }, children) : /*#__PURE__*/React.createElement("div", {
     onClick: _onClick,
     "data-testid": "media-archiveDownloadButton",

package/dist/esm/viewers/base-viewer.js

@@ -13,6 +13,7 @@ import { FormattedMessage } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import deepEqual from 'deep-equal';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorMessage from '../errorMessage';
 import { Spinner } from '../loading';
 import { ErrorViewDownloadButton } from '../download';
@@ -64,6 +65,9 @@ export var BaseViewer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (fg('platform_media_package_react19_lifecycle_fix')) {
+        return;
+      }
       if (this.needsReset(nextProps, this.props)) {
         this.release();
         this.setState(this.initialState);
@@ -72,8 +76,16 @@ export var BaseViewer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      if (this.needsReset(prevProps, this.props)) {
-        this.init();
+      if (fg('platform_media_package_react19_lifecycle_fix')) {
+        if (this.needsReset(prevProps, this.props)) {
+          this.release();
+          this.setState(this.initialState);
+          this.init();
+        }
+      } else {
+        if (this.needsReset(prevProps, this.props)) {
+          this.init();
+        }
       }
     }
   }, {

package/dist/esm/viewers/svg/ImageWrapper-compiled.js

@@ -1,9 +1,8 @@
 /* ImageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./ImageWrapper-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import { messages } from '@atlaskit/media-ui';
 import React, { forwardRef } from 'react';
-import { useIntl } from 'react-intl';
 import { fg } from '@atlaskit/platform-feature-flags';
 var imageWrapperStyles = null;
 var dynamicImageWrapperStyles = null;
@@ -11,17 +10,13 @@ export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     onClick = _ref.onClick,
     isHidden = _ref.isHidden;
-  var intl = useIntl();
-  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+  var a11yProps = fg('platform_media_a11y_suppression_fixes') ? {
+    role: 'none'
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({}, a11yProps, {
     "data-testid": "media-viewer-svg-wrapper",
     onClick: onClick,
     ref: ref,
-    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text),
     className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
-  }, children) : /*#__PURE__*/React.createElement("div", {
-    "data-testid": "media-viewer-svg-wrapper",
-    onClick: onClick,
-    ref: ref,
-    className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
-  }, children);
+  }), children);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "53.0.0",
+	"version": "53.0.2",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.2.0",
+		"@atlaskit/icon": "^34.3.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^6.5.0",
+		"@atlaskit/icon-lab": "^6.6.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
 		"@atlaskit/media-common": "^13.0.0",
@@ -52,9 +52,9 @@
 		"@atlaskit/side-navigation": "^11.2.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/theme": "^23.1.0",
+		"@atlaskit/theme": "^23.2.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^21.1.0",
+		"@atlaskit/tooltip": "^21.2.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/language": "6.10.8",
@@ -131,6 +131,9 @@
 		"platform_media_react19_support": {
 			"type": "boolean"
 		},
+		"platform_media_package_react19_lifecycle_fix": {
+			"type": "boolean"
+		},
 		"platform_media_a11y_suppression_fixes": {
 			"type": "boolean"
 		}