@atlaskit/media-viewer 54.9.9 → 54.10.0

package/dist/cjs/styleWrappers.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZoomWrapper = exports.ZoomRightControls = exports.ZoomLevelIndicator = exports.ZoomCenterControls = exports.Video = exports.SpinnerWrapper = exports.SidebarWrapper = exports.RightWrapper = exports.RightHeader = exports.PDFWrapper = exports.MetadataWrapper = exports.MetadataSubText = exports.MetadataIconWrapper = exports.MetadataFileName = exports.MedatadataTextWrapper = exports.ListWrapper = exports.LeftWrapper = exports.LeftHeader = exports.Img = exports.ImageWrapper = exports.HeaderWrapper = exports.Header = exports.HDIconGroupWrapper = exports.FormattedMessageWrapper = exports.ErrorMessageWrapper = exports.ErrorImage = exports.DownloadButtonWrapper = exports.DefaultCoverWrapper = exports.CustomVideoPlayerWrapper = exports.CustomAudioPlayerWrapper = exports.ContentWrapper = exports.CloseButtonWrapper = exports.Blanket = exports.BaselineExtend = exports.AudioPlayer = exports.AudioCover = exports.Audio = exports.ArrowsWrapper = exports.Arrow = void 0;
+exports.ZoomWrapper = exports.ZoomRightControls = exports.ZoomLevelIndicator = exports.ZoomCenterControls = exports.Video = exports.SpinnerWrapper = exports.SidebarWrapper = exports.RightWrapper = exports.RightHeader = exports.PDFWrapper = exports.MetadataWrapper = exports.MetadataSubText = exports.MetadataIconWrapper = exports.MetadataFileName = exports.MediaStage = exports.MediaColumn = exports.MedatadataTextWrapper = exports.ListWrapper = exports.LeftWrapper = exports.LeftHeader = exports.ItemStage = exports.InsetViewerShell = exports.InsetViewerLayout = exports.Img = exports.ImageWrapper = exports.HeaderWrapper = exports.Header = exports.HDIconGroupWrapper = exports.FormattedMessageWrapper = exports.ErrorMessageWrapper = exports.ErrorImage = exports.DownloadButtonWrapper = exports.DefaultCoverWrapper = exports.CustomVideoPlayerWrapper = exports.CustomAudioPlayerWrapper = exports.ContentWrapper = exports.CloseButtonWrapper = exports.BlanketCloseButton = exports.Blanket = exports.BaselineExtend = exports.AudioPlayer = exports.AudioCover = exports.Audio = exports.ArrowsWrapper = exports.Arrow = void 0;
 require("./styleWrappers.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -18,19 +18,31 @@ var _reactScrolllock = require("react-scrolllock");
 var _useCallbackRef = require("use-callback-ref");
 var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
 var _primitives = require("@atlaskit/primitives");
+var _insetViewerContext = require("./insetViewerContext");
 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
 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); }
 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 INSET_HEADER_HEIGHT = "var(--ds-space-800, 64px)";
 var blanketStyles = null;
+var insetViewerBlanketStyles = null;
+var blanketCloseButtonStyles = null;
+var insetViewerShellStyles = null;
+var insetViewerLayoutStyles = null;
 var headerWrapperStyles = null;
 var archiveHeaderWrapperStyles = null;
+var insetViewerMediaColumnStyles = null;
+var insetViewerMediaStageStyles = null;
 var listWrapperStyles = null;
+var insetViewerListWrapperStyles = null;
+var itemStageStyles = null;
+var insetViewerItemStageStyles = null;
 var closeButtonWrapperStyles = null;
 var contentWrapperStyles = null;
 var contentWrapperStyleWithSideBar = null;
+var insetViewerContentWrapperStyles = null;
 var zoomWrapperStyles = null;
 var zoomCenterControlsStyles = null;
 var zoomRightControlsStyles = null;
@@ -42,6 +54,10 @@ var videoStyles = null;
 var pdfWrapperStyles = null;
 var arrowStyles = null;
 var arrowWrapperStyles = null;
+var insetViewerArrowStyles = null;
+var insetViewerArrowWrapperStyles = null;
+var insetViewerLeftWrapperStyles = null;
+var insetViewerRightWrapperStyles = null;
 var arrowsWrapperStyles = null;
 var leftWrapperStyles = null;
 var leftWrapperStylesWithSideBar = null;
@@ -80,108 +96,156 @@ var Blanket = exports.Blanket = function Blanket(_ref) {
   var datatestId = _ref['data-testid'],
     className = _ref.className,
     children = _ref.children;
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", className]),
+    className: (0, _runtime.ax)(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", isInsetViewer && "_4cvr1h6o _1bah1h6o _bfhk1i5c _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _vchhusvi", className]),
     role: "dialog",
     "aria-modal": "true",
     "aria-labelledby": "media.media-viewer.file.name"
   }, children);
 };
-var HeaderWrapper = exports.HeaderWrapper = function HeaderWrapper(_ref2) {
-  var className = _ref2.className,
-    children = _ref2.children,
-    isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
+
+// Mouse-only: keyboard and screen reader users close with Escape or the visible close button.
+var BlanketCloseButton = exports.BlanketCloseButton = function BlanketCloseButton(_ref2) {
+  var onClick = _ref2.onClick;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-hidden": true,
+    tabIndex: -1,
+    onClick: onClick,
+    className: (0, _runtime.ax)(["_189eidpf _kqswstnw _152tidpf _rjxpidpf _u7coidpf _1e02idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80om73ad"])
+  });
+};
+var InsetViewerShell = exports.InsetViewerShell = function InsetViewerShell(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rkopb1k _1e0c1txw _2lx21bp4 _kqswh2mm _1pbykb7n _1bsb1osq _4t3i1osq _1tkeidpf _c71l1osq _bfhk1bhr _16qs130s"])
+  }, children);
+};
+var InsetViewerLayout = exports.InsetViewerLayout = function InsetViewerLayout(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c11p5 _yv0ehpfy _2z055wi5 _1bsb1osq _4t3i1osq _1tkeidpf"]),
+    style: {
+      "--_1dd8ooc": (0, _runtime.ix)("".concat(INSET_HEADER_HEIGHT, " minmax(0, 1fr)"))
+    }
+  }, children);
+};
+var HeaderWrapper = exports.HeaderWrapper = function HeaderWrapper(_ref5) {
+  var className = _ref5.className,
+    children = _ref5.children,
+    isArchiveSideBarVisible = _ref5.isArchiveSideBarVisible;
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _runtime.ax)(["_11q75a80 _kqswstnw _154iidpf _1ltvidpf _1bsb1osq _4t3i1uc6 _tzy41w01 _ouxlidpf _syaz1poe _k48p1wq8 _ca0q1ejb _n3td1ejb _19bv1ejb _u5f31ejb _vchhusvi _lcxvglyw _1pby3tda", isArchiveSideBarVisible && "_ouxl1klg", className])
   }, children);
 };
 HeaderWrapper.displayName = 'HeaderWrapper';
-var ListWrapper = exports.ListWrapper = function ListWrapper(_ref3) {
-  var children = _ref3.children;
+var MediaColumn = exports.MediaColumn = function MediaColumn(_ref6) {
+  var children = _ref6.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _yyhykb7n _1ii7cs5v _1e0c1txw _2lx21bp4 _4t3i1osq _1ul9idpf _1tkeidpf"])
+  }, children);
+};
+var MediaStage = exports.MediaStage = function MediaStage(_ref7) {
+  var children = _ref7.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o"])
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1ul9idpf _1tkeidpf _kqswh2mm"])
+  }, children);
+};
+var ListWrapper = exports.ListWrapper = function ListWrapper(_ref8) {
+  var children = _ref8.children;
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o", isInsetViewer && "_1reo15vq _18m915vq _2lx21bp4 _4cvr1fhb _1bah1y6m"])
   }, children);
 };
 ListWrapper.displayName = 'ListWrapper';
-var ArrowsWrapper = exports.ArrowsWrapper = function ArrowsWrapper(_ref4) {
-  var children = _ref4.children;
+var ItemStage = exports.ItemStage = function ItemStage(_ref9) {
+  var children = _ref9.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _kqswh2mm _1bsb1osq _1ul9idpf _1tkeidpf", "_1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, children);
+};
+var ArrowsWrapper = exports.ArrowsWrapper = function ArrowsWrapper(_ref0) {
+  var children = _ref0.children;
   return /*#__PURE__*/React.createElement("div", {
     id: "media-viewer-navigation",
     className: (0, _runtime.ax)(["_1e0c1txw _kqswstnw _154i1ssb _t9ec1i34 _1ltvidpf _1bsb1osq"])
   }, children);
 };
-var CloseButtonWrapper = exports.CloseButtonWrapper = function CloseButtonWrapper(_ref5) {
-  var className = _ref5.className,
-    children = _ref5.children;
+var CloseButtonWrapper = exports.CloseButtonWrapper = function CloseButtonWrapper(_ref1) {
+  var className = _ref1.className,
+    children = _ref1.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_kqswstnw _154i1ejb _1xi2v47k _1pbyuou7", className])
   }, children);
 };
-var ContentWrapper = exports.ContentWrapper = function ContentWrapper(_ref6) {
-  var isSidebarVisible = _ref6.isSidebarVisible,
-    children = _ref6.children;
+var ContentWrapper = exports.ContentWrapper = function ContentWrapper(_ref10) {
+  var isSidebarVisible = _ref10.isSidebarVisible,
+    children = _ref10.children;
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_1bsb1osq", isSidebarVisible && "_1bsbyazj"])
+    className: (0, _runtime.ax)([!isInsetViewer && "_1bsb1osq", isInsetViewer && "_16jlidpf _1o9zidpf _i0dl1wug _1reo15vq _18m915vq _1bsb1osq _1ul9idpf _1tkeidpf _4t3i1osq _kqswh2mm", isSidebarVisible && !isInsetViewer && "_1bsbyazj"])
   }, children);
 };
-var ZoomWrapper = exports.ZoomWrapper = function ZoomWrapper(_ref7) {
-  var className = _ref7.className,
-    children = _ref7.children;
+var ZoomWrapper = exports.ZoomWrapper = function ZoomWrapper(_ref11) {
+  var className = _ref11.className,
+    children = _ref11.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1bsb1osq _kqswstnw _94n5idpf _4t3i1uc6 _1itkdlpg _tzy41w01 _lcxvglyw _vchhusvi _1e0c1txw _4cvresu3 _ca0q1azu _n3tdu2gc _u5f31ejb _19bv1ejb", className])
   }, children);
 };
-var ZoomCenterControls = exports.ZoomCenterControls = function ZoomCenterControls(_ref8) {
-  var children = _ref8.children;
+var ZoomCenterControls = exports.ZoomCenterControls = function ZoomCenterControls(_ref12) {
+  var children = _ref12.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_zulpu2gc _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
   }, children);
 };
-var ZoomRightControls = exports.ZoomRightControls = function ZoomRightControls(_ref9) {
-  var children = _ref9.children;
+var ZoomRightControls = exports.ZoomRightControls = function ZoomRightControls(_ref13) {
+  var children = _ref13.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_zulpu2gc _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
   }, children);
 };
-var ZoomLevelIndicator = exports.ZoomLevelIndicator = function ZoomLevelIndicator(_ref0) {
-  var children = _ref0.children;
+var ZoomLevelIndicator = exports.ZoomLevelIndicator = function ZoomLevelIndicator(_ref14) {
+  var children = _ref14.children;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "zoom-level-indicator",
     className: (0, _runtime.ax)(["_vwz4zwfg _4t3izwfg _s7n4nkob"])
   }, children);
 };
-var HDIconGroupWrapper = exports.HDIconGroupWrapper = function HDIconGroupWrapper(_ref1) {
-  var className = _ref1.className,
-    children = _ref1.children;
+var HDIconGroupWrapper = exports.HDIconGroupWrapper = function HDIconGroupWrapper(_ref15) {
+  var className = _ref15.className,
+    children = _ref15.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
   }, children);
 };
-var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(_ref10) {
-  var datatestId = _ref10['data-testid'],
-    children = _ref10.children;
+var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(_ref16) {
+  var datatestId = _ref16['data-testid'],
+    children = _ref16.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: (0, _runtime.ax)(["_y3gn1h6o _syaz1poe _zcqx1osq"])
   }, children);
 };
-var ErrorImage = exports.ErrorImage = function ErrorImage(_ref11) {
-  var src = _ref11.src,
-    alt = _ref11.alt;
+var ErrorImage = exports.ErrorImage = function ErrorImage(_ref17) {
+  var src = _ref17.src,
+    alt = _ref17.alt;
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     src: src,
     className: (0, _runtime.ax)(["_otyru2gc _uiztglyw"])
   });
 };
-var Video = exports.Video = function Video(_ref12) {
-  var autoPlay = _ref12.autoPlay,
-    controls = _ref12.controls,
-    src = _ref12.src;
+var Video = exports.Video = function Video(_ref18) {
+  var autoPlay = _ref18.autoPlay,
+    controls = _ref18.controls,
+    src = _ref18.src;
   return /*#__PURE__*/React.createElement("video", {
     autoPlay: autoPlay,
     controls: controls,
@@ -189,10 +253,10 @@ var Video = exports.Video = function Video(_ref12) {
     className: (0, _runtime.ax)(["_1bsbauwl _4t3i1kxc"])
   });
 };
-var PDFWrapperBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref13, ref) {
-  var innerRef = _ref13.innerRef,
-    datatestId = _ref13['data-testid'],
-    children = _ref13.children;
+var PDFWrapperBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref19, ref) {
+  var innerRef = _ref19.innerRef,
+    datatestId = _ref19['data-testid'],
+    children = _ref19.children;
   var bodyRef = (0, _useCallbackRef.useMergeRefs)([ref, innerRef]);
   return /*#__PURE__*/React.createElement("div", {
     ref: bodyRef,
@@ -205,50 +269,54 @@ var PDFWrapper = exports.PDFWrapper = /*#__PURE__*/(0, _react.forwardRef)(functi
     innerRef: ref
   }, props)));
 });
-var Arrow = exports.Arrow = function Arrow(_ref14) {
-  var className = _ref14.className,
-    children = _ref14.children;
+var Arrow = exports.Arrow = function Arrow(_ref20) {
+  var className = _ref20.className,
+    children = _ref20.children;
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
   return /*#__PURE__*/React.createElement("span", {
-    className: (0, _runtime.ax)(["_80omtlke _11pt15ty _di7o9txx _20ka1poe", className])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)([!isInsetViewer && "_80omtlke _11pt15ty _di7o9txx _20ka1poe", isInsetViewer && "_80omtlke _7dir1j9a _6pupl4ek", className])
   }, children);
 };
-var LeftWrapper = exports.LeftWrapper = function LeftWrapper(_ref15) {
-  var children = _ref15.children,
-    isArchiveSideBarVisible = _ref15.isArchiveSideBarVisible;
+var LeftWrapper = exports.LeftWrapper = function LeftWrapper(_ref21) {
+  var children = _ref21.children,
+    isArchiveSideBarVisible = _ref21.isArchiveSideBarVisible;
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv"])
+    className: (0, _runtime.ax)(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv", isInsetViewer && "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t", isInsetViewer && "_1ltv1ejb"])
   }, children);
 };
-var RightWrapper = exports.RightWrapper = function RightWrapper(_ref16) {
-  var children = _ref16.children;
+var RightWrapper = exports.RightWrapper = function RightWrapper(_ref22) {
+  var children = _ref22.children;
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf"])
+    className: (0, _runtime.ax)(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf", isInsetViewer && "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t", isInsetViewer && "_1xi21ejb"])
   }, children);
 };
 
 // header.tsx
 
-var Header = exports.Header = function Header(_ref17) {
-  var children = _ref17.children,
-    isArchiveSideBarVisible = _ref17.isArchiveSideBarVisible,
-    className = _ref17.className;
+var Header = exports.Header = function Header(_ref23) {
+  var children = _ref23.children,
+    isArchiveSideBarVisible = _ref23.isArchiveSideBarVisible,
+    className = _ref23.className;
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: (0, _runtime.ax)(["_1e0c1txw _19bvidpf", isArchiveSideBarVisible && "_19bv1mjv", className])
   }, children);
 };
-var LeftHeader = exports.LeftHeader = function LeftHeader(_ref18) {
-  var children = _ref18.children;
+var LeftHeader = exports.LeftHeader = function LeftHeader(_ref24) {
+  var children = _ref24.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1vgl1rj4"])
   }, children);
 };
-var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref19, ref) {
-  var children = _ref19.children,
-    datatestId = _ref19['data-testid'],
-    onClick = _ref19.onClick,
-    style = _ref19.style,
-    className = _ref19.className;
+var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref25, ref) {
+  var children = _ref25.children,
+    datatestId = _ref25['data-testid'],
+    onClick = _ref25.onClick,
+    style = _ref25.style,
+    className = _ref25.className;
   return /*#__PURE__*/React.createElement("div", {
     role: "none",
     "data-testid": datatestId,
@@ -266,18 +334,18 @@ var BaselineExtend = exports.BaselineExtend = function BaselineExtend() {
     className: (0, _runtime.ax)(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
   });
 };
-var Img = exports.Img = function Img(_ref20) {
-  var canDrag = _ref20.canDrag,
-    isDragging = _ref20.isDragging,
-    shouldPixelate = _ref20.shouldPixelate,
-    datatestId = _ref20['data-testid'],
-    src = _ref20.src,
-    style = _ref20.style,
-    onLoad = _ref20.onLoad,
-    onError = _ref20.onError,
-    alt = _ref20.alt,
-    className = _ref20.className,
-    rest = (0, _objectWithoutProperties2.default)(_ref20, _excluded);
+var Img = exports.Img = function Img(_ref26) {
+  var canDrag = _ref26.canDrag,
+    isDragging = _ref26.isDragging,
+    shouldPixelate = _ref26.shouldPixelate,
+    datatestId = _ref26['data-testid'],
+    src = _ref26.src,
+    style = _ref26.style,
+    onLoad = _ref26.onLoad,
+    onError = _ref26.onError,
+    alt = _ref26.alt,
+    className = _ref26.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref26, _excluded);
   var cursor = (0, _react.useMemo)(function () {
     if (canDrag && isDragging) {
       return 'grabbing';
@@ -302,21 +370,21 @@ var Img = exports.Img = function Img(_ref20) {
     onError: onError
   }));
 };
-var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {
-  var children = _ref21.children;
+var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(_ref27) {
+  var children = _ref27.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
   }, children);
 };
-var MetadataWrapper = exports.MetadataWrapper = function MetadataWrapper(_ref22) {
-  var children = _ref22.children;
+var MetadataWrapper = exports.MetadataWrapper = function MetadataWrapper(_ref28) {
+  var children = _ref28.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw"])
   }, children);
 };
-var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref23) {
-  var datatestId = _ref23['data-testid'],
-    children = _ref23.children;
+var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref29) {
+  var datatestId = _ref29['data-testid'],
+    children = _ref29.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_8at415vq _1p8j15vq _151kfhey _qvww1osq _1p351l2s _8g8b1q9c _18ew1wq8 _1jyy1poe"])
   }, /*#__PURE__*/React.createElement(_heading.default, {
@@ -326,46 +394,46 @@ var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref
     testId: datatestId
   }, children));
 };
-var MetadataSubText = exports.MetadataSubText = function MetadataSubText(_ref24) {
-  var datatestId = _ref24['data-testid'],
-    children = _ref24.children;
+var MetadataSubText = exports.MetadataSubText = function MetadataSubText(_ref30) {
+  var datatestId = _ref30['data-testid'],
+    children = _ref30.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: (0, _runtime.ax)(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _syaz1poe"])
   }, children);
 };
-var MetadataIconWrapper = exports.MetadataIconWrapper = function MetadataIconWrapper(_ref25) {
-  var children = _ref25.children;
+var MetadataIconWrapper = exports.MetadataIconWrapper = function MetadataIconWrapper(_ref31) {
+  var children = _ref31.children;
   return /*#__PURE__*/React.createElement(_primitives.Box, {
     xcss: metadataIconWrapperStyles
   }, children);
 };
-var RightHeader = exports.RightHeader = function RightHeader(_ref26) {
-  var children = _ref26.children;
+var RightHeader = exports.RightHeader = function RightHeader(_ref32) {
+  var children = _ref32.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_y3gnusic _2hwx1jfw _1ul9uuw1 _1vgl1rj4"])
   }, children);
 };
-var CustomAudioPlayerWrapper = exports.CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref27) {
-  var children = _ref27.children;
+var CustomAudioPlayerWrapper = exports.CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref33) {
+  var children = _ref33.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_kqswstnw _94n5idpf _1ltvidpf _1bsb1osq"])
   }, children);
 };
-var AudioPlayer = exports.AudioPlayer = function AudioPlayer(_ref28) {
-  var datatestId = _ref28['data-testid'],
-    children = _ref28.children;
+var AudioPlayer = exports.AudioPlayer = function AudioPlayer(_ref34) {
+  var datatestId = _ref34['data-testid'],
+    children = _ref34.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: (0, _runtime.ax)(["_2rkofajl _1reo15vq _18m915vq _bfhk1tzm _4cvr1h6o _1bah1h6o _1bsb1kdj _4t3i1kdj _1e0c1txw _2lx21bp4 _kqswh2mm"])
   }, children);
 };
 AudioPlayer.displayName = 'AudioPlayer';
-var Audio = exports.Audio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref29, ref) {
-  var autoPlay = _ref29.autoPlay,
-    controls = _ref29.controls,
-    src = _ref29.src,
-    preload = _ref29.preload;
+var Audio = exports.Audio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref35, ref) {
+  var autoPlay = _ref35.autoPlay,
+    controls = _ref35.controls,
+    src = _ref35.src,
+    preload = _ref35.preload;
   return /*#__PURE__*/React.createElement("audio", {
     ref: ref,
     autoPlay: autoPlay,
@@ -375,50 +443,50 @@ var Audio = exports.Audio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref29
     className: (0, _runtime.ax)(["_1bsb1osq _kqswstnw _94n5idpf _1ltvidpf"])
   });
 });
-var AudioCover = exports.AudioCover = function AudioCover(_ref30) {
-  var src = _ref30.src,
-    alt = _ref30.alt;
+var AudioCover = exports.AudioCover = function AudioCover(_ref36) {
+  var src = _ref36.src,
+    alt = _ref36.alt;
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     src: src,
     className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _5ralzm06 _bfhkr3uz"])
   });
 };
-var DefaultCoverWrapper = exports.DefaultCoverWrapper = function DefaultCoverWrapper(_ref31) {
-  var children = _ref31.children;
+var DefaultCoverWrapper = exports.DefaultCoverWrapper = function DefaultCoverWrapper(_ref37) {
+  var children = _ref37.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syazi7uo _umc418ws"])
   }, children);
 };
-var DownloadButtonWrapper = exports.DownloadButtonWrapper = function DownloadButtonWrapper(_ref32) {
-  var children = _ref32.children;
+var DownloadButtonWrapper = exports.DownloadButtonWrapper = function DownloadButtonWrapper(_ref38) {
+  var children = _ref38.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_19pk1ejb _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
   }, children);
 };
-var CustomVideoPlayerWrapper = exports.CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref33) {
-  var datatestId = _ref33['data-testid'],
-    children = _ref33.children;
+var CustomVideoPlayerWrapper = exports.CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref39) {
+  var datatestId = _ref39['data-testid'],
+    children = _ref39.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: (0, _runtime.ax)(["_1p6zkb7n _1vnlkb7n _qbrxf1ug _1y2kauwl _z18o1kxc _1ghp1kxc"])
   }, children);
 };
-var SidebarWrapper = exports.SidebarWrapper = function SidebarWrapper(_ref34) {
-  var datatestId = _ref34['data-testid'],
-    children = _ref34.children;
+var SidebarWrapper = exports.SidebarWrapper = function SidebarWrapper(_ref40) {
+  var datatestId = _ref40['data-testid'],
+    children = _ref40.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: (0, _runtime.ax)(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhkvuon _syazi7uo"])
   }, children);
 };
-var SpinnerWrapper = exports.SpinnerWrapper = function SpinnerWrapper(_ref35) {
-  var children = _ref35.children;
+var SpinnerWrapper = exports.SpinnerWrapper = function SpinnerWrapper(_ref41) {
+  var children = _ref41.children;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq"])
   }, children);
 };
-var FormattedMessageWrapper = exports.FormattedMessageWrapper = function FormattedMessageWrapper(_ref36) {
-  var children = _ref36.children;
+var FormattedMessageWrapper = exports.FormattedMessageWrapper = function FormattedMessageWrapper(_ref42) {
+  var children = _ref42.children;
   return /*#__PURE__*/React.createElement("span", null, children);
 };

package/dist/cjs/viewers/image/interactive-img-component.js

@@ -62,7 +62,11 @@ var InteractiveImgComponent = exports.InteractiveImgComponent = /*#__PURE__*/fun
     (0, _defineProperty2.default)(_this, "onImageClicked", function (e) {
       var _this$props = _this.props,
         onClose = _this$props.onClose,
-        onBlanketClicked = _this$props.onBlanketClicked;
+        onBlanketClicked = _this$props.onBlanketClicked,
+        isInsetViewer = _this$props.isInsetViewer;
+      if (isInsetViewer) {
+        return;
+      }
       if (e.target === e.currentTarget && onBlanketClicked) {
         onBlanketClicked();
       }

package/dist/cjs/viewers/image/interactive-img.js

@@ -8,10 +8,11 @@ exports.InteractiveImg = void 0;
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _closed = require("../../analytics/events/ui/closed");
+var _insetViewerContext = require("../../insetViewerContext");
 var _interactiveImgComponent = require("./interactive-img-component");
-var InteractiveImg = exports.InteractiveImg = (0, _withAnalyticsEvents.default)({
+var InteractiveImg = exports.InteractiveImg = (0, _insetViewerContext.withInsetViewer)((0, _withAnalyticsEvents.default)({
   onBlanketClicked: function onBlanketClicked(createAnalyticsEvent) {
     var event = createAnalyticsEvent((0, _closed.createClosedEvent)('blanket'));
     event.fire(_mediaCommon.ANALYTICS_MEDIA_CHANNEL);
   }
-})(_interactiveImgComponent.InteractiveImgComponent);
+})(_interactiveImgComponent.InteractiveImgComponent));

package/dist/cjs/viewers/svg/index.js

@@ -17,6 +17,7 @@ var _messages = require("@atlaskit/media-ui/messages");
 var _vector = require("@atlaskit/media-ui/vector2");
 var _closed = require("../../analytics/events/ui/closed");
 var _zoomLevel = require("../../domain/zoomLevel");
+var _insetViewerContext = require("../../insetViewerContext");
 var _MediaViewerError = require("../../MediaViewerError");
 var _styleWrappers = require("../../styleWrappers");
 var _zoomControls = require("../../zoomControls");
@@ -54,6 +55,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     wrapperScroll = _useState0[0],
     setWrapperScroll = _useState0[1];
   var intl = (0, _reactIntl.useIntl)();
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
   var onResize = (0, _react.useCallback)(function () {
     if (!wrapperRef.current || !camera) {
       return;
@@ -104,6 +106,9 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     onError(error);
   };
   var onSvgClicked = function onSvgClicked(e) {
+    if (isInsetViewer) {
+      return;
+    }
     if (e.target === e.currentTarget) {
       onBlanketClicked === null || onBlanketClicked === void 0 || onBlanketClicked();
       onClose === null || onClose === void 0 || onClose();

package/dist/es2019/analytics/ufoExperiences.js

@@ -4,7 +4,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { UFOExperience } from '@atlaskit/ufo/experience';
 import { ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo/experience-types';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "54.9.8";
+const packageVersion = "54.9.9";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/insetViewerContext.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { createContext, useContext } from 'react';
+const InsetViewerContext = /*#__PURE__*/createContext(false);
+export const InsetViewerProvider = ({
+  isInsetViewer = false,
+  children
+}) => /*#__PURE__*/React.createElement(InsetViewerContext.Provider, {
+  value: isInsetViewer
+}, children);
+export const useIsInsetViewer = () => useContext(InsetViewerContext);
+export const withInsetViewer = WrappedComponent => {
+  const WithInsetViewer = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const isInsetViewer = useIsInsetViewer();
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+      ref: ref,
+      isInsetViewer: isInsetViewer
+    }));
+  });
+  WithInsetViewer.displayName = `WithInsetViewer(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return WithInsetViewer;
+};