@atlaskit/media-viewer 54.9.9 → 54.10.1

package/dist/es2019/list.js

@@ -2,9 +2,10 @@ import React, { useState, useRef } from 'react';
 import { getRandomTelemetryId } from '@atlaskit/media-common';
 import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
 import Header from './headerWithIntl';
+import { useIsInsetViewer } from './insetViewerContext';
 import { ItemViewer } from './item-viewer';
 import { Navigation } from './navigation';
-import { HeaderWrapper, ListWrapper } from './styleWrappers';
+import { HeaderWrapper, ItemStage, ListWrapper } from './styleWrappers';
 export const List = ({
   defaultSelectedItem,
   onClose,
@@ -26,7 +27,9 @@ export const List = ({
   const traceContext = useRef({
     traceId: getRandomTelemetryId()
   });
-  return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(HeaderWrapper
+  const isInsetViewer = useIsInsetViewer();
+  const ViewerWrapper = isInsetViewer ? ItemStage : React.Fragment;
+  return /*#__PURE__*/React.createElement(ListWrapper, null, !isInsetViewer && /*#__PURE__*/React.createElement(HeaderWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: hideControlsClassName,
@@ -42,7 +45,7 @@ export const List = ({
     onSetArchiveSideBarVisible: setIsArchiveSideBarVisible,
     traceContext: traceContext.current,
     fallbackMediaNameFetcher: fallbackMediaNameFetcher
-  })), /*#__PURE__*/React.createElement(ItemViewer, {
+  })), /*#__PURE__*/React.createElement(ViewerWrapper, null, /*#__PURE__*/React.createElement(ItemViewer, {
     identifier: selectedItem,
     showControls: showControls,
     onClose: onClose,
@@ -51,7 +54,7 @@ export const List = ({
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
     traceContext: traceContext.current
-  }), /*#__PURE__*/React.createElement(Navigation, {
+  })), /*#__PURE__*/React.createElement(Navigation, {
     items: items,
     selectedItem: selectedItem,
     onChange: nextSelectedItem => {

package/dist/es2019/media-viewer.js

@@ -8,13 +8,15 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { Shortcut } from '@atlaskit/media-ui/shortcut';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createModalEvent } from './analytics/events/screen/modal';
 import { createClosedEvent } from './analytics/events/ui/closed';
 import { fireAnalytics } from './analytics/fireAnalytics';
 import { mediaViewerPopupClass } from './classnames';
 import { Content } from './content';
+import { InsetViewerProvider } from './insetViewerContext';
 import { List } from './list';
-import { Blanket, SidebarWrapper } from './styleWrappers';
+import { Blanket, BlanketCloseButton, InsetViewerLayout, InsetViewerShell, MediaColumn, MediaStage, SidebarWrapper } from './styleWrappers';
 const getIdentifierId = identifier => isFileIdentifier(identifier) ? identifier.id : undefined;
 const MediaViewerComponent = ({
   featureFlags,
@@ -41,6 +43,10 @@ const MediaViewerComponent = ({
     onSidebarVisibilityChange
   } = isExperimentEnabled('cc_comments_media_viewer_sidebar') ? extensions !== null && extensions !== void 0 ? extensions : {} : {};
   const [isSidebarVisible, setIsSidebarVisibleState] = useState(defaultSidebarVisible !== null && defaultSidebarVisible !== void 0 ? defaultSidebarVisible : false);
+  // The inset presentation has its own feature gate, separate from the functionality above. The
+  // value flows out through InsetViewerProvider, so with the gate off every downstream
+  // useIsInsetViewer() is false and the full-bleed overlay renders unchanged.
+  const isInsetViewer = fg('cc_comments_inset_media_viewer') && !!(extensions !== null && extensions !== void 0 && extensions.useInsetViewer);
   const setIsSidebarVisible = useCallback(isVisible => {
     setIsSidebarVisibleState(isVisible);
     onSidebarVisibilityChange === null || onSidebarVisibilityChange === void 0 ? void 0 : onSidebarVisibilityChange(isVisible);
@@ -134,19 +140,27 @@ const MediaViewerComponent = ({
       }));
     }
   };
+  const ConditionalInsetViewerShell = isInsetViewer ? InsetViewerShell : React.Fragment;
+  const ConditionalInsetViewerLayout = isInsetViewer ? InsetViewerLayout : React.Fragment;
+  const ConditionalInsetMediaColumn = isInsetViewer ? MediaColumn : React.Fragment;
+  const ConditionalInsetMediaStage = isInsetViewer ? MediaStage : React.Fragment;
   const content = /*#__PURE__*/React.createElement("div", {
     ref: innerRef
+  }, /*#__PURE__*/React.createElement(InsetViewerProvider, {
+    isInsetViewer: isInsetViewer
   }, /*#__PURE__*/React.createElement(Blanket, {
     "data-testid": "media-viewer-popup"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: mediaViewerPopupClass
-  }, /*#__PURE__*/React.createElement(Shortcut, {
+  }, isInsetViewer ? /*#__PURE__*/React.createElement(BlanketCloseButton, {
+    onClick: () => handlePreviewClose('blanket')
+  }) : null, /*#__PURE__*/React.createElement(Shortcut, {
     code: 'Escape',
     handler: () => {
       handlePreviewClose('escKey');
     }
-  }), /*#__PURE__*/React.createElement(Content, {
+  }), /*#__PURE__*/React.createElement(ConditionalInsetViewerShell, null, /*#__PURE__*/React.createElement(ConditionalInsetViewerLayout, null, /*#__PURE__*/React.createElement(ConditionalInsetMediaColumn, null, /*#__PURE__*/React.createElement(ConditionalInsetMediaStage, null, /*#__PURE__*/React.createElement(Content, {
     isSidebarVisible: isSidebarVisible,
     onClose: (_e, analyticsEvent) => {
       var _analyticsEvent$paylo;
@@ -183,7 +197,7 @@ const MediaViewerComponent = ({
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
     fallbackMediaNameFetcher: fallbackMediaNameFetcher
-  })), renderSidebar()));
+  })))), renderSidebar())))));
   return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
   }, content);

package/dist/es2019/navigation.js

@@ -3,6 +3,9 @@
 import React from 'react';
 import { Component } from 'react';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import IconButton from '@atlaskit/button/icon/button';
+import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
+import ArrowRightIcon from '@atlaskit/icon/core/arrow-right';
 import ArrowLeftCircleIcon from '@atlaskit/icon/core/chevron-left';
 import ArrowRightCircleIcon from '@atlaskit/icon/core/chevron-right';
 import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
@@ -12,6 +15,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { createNavigatedEvent } from './analytics/events/ui/createNavigatedEvent';
 import { fireAnalytics } from './analytics/fireAnalytics';
+import { withInsetViewer } from './insetViewerContext';
 import { ArrowsWrapper, RightWrapper, LeftWrapper, Arrow } from './styleWrappers';
 import { getSelectedIndex } from './utils/getSelectedIndex';
 export const nextNavButtonId = 'media-viewer-navigation-next';
@@ -82,6 +86,27 @@ export class NavigationBase extends Component {
     } = this.props;
     return getSelectedIndex(items, selectedItem);
   }
+  renderArrowButton(direction, label, clickHandler, testId) {
+    if (this.props.isInsetViewer) {
+      const Icon = direction === 'next' ? ArrowRightIcon : ArrowLeftIcon;
+      return /*#__PURE__*/React.createElement(IconButton, {
+        appearance: "default",
+        shape: "circle",
+        spacing: "default",
+        label: label,
+        icon: Icon,
+        onClick: clickHandler('mouse'),
+        testId: testId,
+        isTooltipDisabled: false
+      });
+    }
+    const Icon = direction === 'next' ? NextIcon : PreviousIcon;
+    return /*#__PURE__*/React.createElement(Icon, {
+      label: label,
+      clickHandler: clickHandler,
+      testId: testId
+    });
+  }
   render() {
     const {
       items,
@@ -108,11 +133,7 @@ export class NavigationBase extends Component {
       code: 'ArrowLeft',
       handler: prev('keyboard'),
       eventType: 'keyup'
-    }), /*#__PURE__*/React.createElement(PreviousIcon, {
-      label: fg('platform_media_a11y_nav_button_labels') ? 'Previous attachment' : 'Previous',
-      clickHandler: prev,
-      testId: prevNavButtonId
-    })) : null), /*#__PURE__*/React.createElement(RightWrapper, null, isRightVisible ?
+    }), this.renderArrowButton('prev', fg('platform_media_a11y_nav_button_labels') ? 'Previous attachment' : 'Previous', prev, prevNavButtonId)) : null), /*#__PURE__*/React.createElement(RightWrapper, null, isRightVisible ?
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     React.createElement(Arrow, {
@@ -121,11 +142,7 @@ export class NavigationBase extends Component {
       code: 'ArrowRight',
       handler: next('keyboard'),
       eventType: 'keyup'
-    }), /*#__PURE__*/React.createElement(NextIcon, {
-      label: fg('platform_media_a11y_nav_button_labels') ? 'Next attachment' : 'Next',
-      clickHandler: next,
-      testId: nextNavButtonId
-    })) : null));
+    }), this.renderArrowButton('next', fg('platform_media_a11y_nav_button_labels') ? 'Next attachment' : 'Next', next, nextNavButtonId)) : null));
   }
 }
-export const Navigation = withAnalyticsEvents({})(NavigationBase);
+export const Navigation = withAnalyticsEvents({})(withInsetViewer(NavigationBase));

package/dist/es2019/styleWrappers.compiled.css

@@ -1,11 +1,18 @@
 ._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)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
+._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._189eidpf{border-width:0}
+._1ii7cs5v{grid-row:2}
+._yyhykb7n{grid-column:1}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
+._152tidpf{inset-block-start:0}
 ._154i1ejb{top:var(--ds-space-300,24px)}
 ._154i1ssb{top:50%}
 ._154iidpf{top:0}
+._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18ew1wq8._18ew1wq8 h1{font-weight:var(--ds-font-weight-medium,500)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
@@ -13,9 +20,11 @@
 ._19bv1mjv{padding-left:300px}
 ._19bvidpf{padding-left:0}
 ._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19kzstnw >*{position:absolute}
 ._19pk1ejb{margin-top:var(--ds-space-300,24px)}
 ._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
 ._1bahusic{justify-content:right}
 ._1bsb1ber{width:26pc}
 ._1bsb1kdj{width:25pc}
@@ -24,6 +33,8 @@
 ._1bsbauwl{width:100vw}
 ._1bsbyazj{width:calc(100% - 26pc)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e02idpf{inset-inline-start:0}
+._1e0c11p5{display:grid}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
 ._1ghp1kxc video{max-height:100vh}
@@ -31,17 +42,22 @@
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}
 ._1kemd8h4{image-rendering:pixelated}
 ._1l1f1n9t .mvng-hide-controls{position:fixed}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
 ._1ltv1mjv{left:300px}
 ._1ltvidpf{left:0}
+._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1p351l2s._1p351l2s h1{text-overflow:ellipsis}
 ._1p6zkb7n video{flex-grow:1}
 ._1p8j15vq._1p8j15vq h1{overflow-y:hidden}
 ._1pby1qpw{z-index:520}
 ._1pby3tda{z-index:521}
+._1pbykb7n{z-index:1}
 ._1pbyuou7{z-index:522}
 ._1reo15vq{overflow-x:hidden}
 ._1reo1wug{overflow-x:auto}
+._1tkeidpf{min-height:0}
+._1ul9idpf{min-width:0}
 ._1ul9uuw1{min-width:200px}
 ._1vgl1rj4 >*{pointer-events:all}
 ._1vnlkb7n video{flex-shrink:1}
@@ -52,6 +68,8 @@
 ._20ka1poe._20ka1poe button:active svg{color:#c7d1db}
 ._2hwx1jfw{margin-right:var(--ds-space-500,40px)}
 ._2lx21bp4{flex-direction:column}
+._2z051h8r{grid-template-rows:var(--ds-space-800,4pc) minmax(0,1fr)}
+._4cvr1fhb{align-items:stretch}
 ._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1kdj{height:25pc}
@@ -60,17 +78,26 @@
 ._4t3i1uc6{height:98px}
 ._4t3izwfg{height:2pc}
 ._5ralzm06{object-fit:scale-down}
+._7dir1j9a button{background-color:var(--ds-background-input,#fff)}
+._80om73ad{cursor:default}
 ._80omtlke{cursor:pointer}
 ._8at415vq._8at415vq h1{overflow-x:hidden}
 ._8g8b1q9c._8g8b1q9c h1{white-space:nowrap}
 ._94n5idpf{bottom:0}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1tzm{background-color:#22272b}
 ._bfhkr3uz{background-color:#000}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._c71l1osq{max-height:100%}
 ._ca0q1azu{padding-top:var(--ds-space-100,8px) var(--ds-space-300,24px)}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qidpf{padding-top:0}
 ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._di7o9txx._di7o9txx button:hover svg{color:#b6c2cf}
+._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqsw1n9t{position:fixed}
@@ -79,8 +106,10 @@
 ._lcxv1rj4{pointer-events:all}
 ._lcxvglyw{pointer-events:none}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._n3tdidpf{padding-bottom:0}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._o5721q9c{white-space:nowrap}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
 ._ouxl1klg{background-position:300px 0}
@@ -88,13 +117,17 @@
 ._p12f1osq{max-width:100%}
 ._qbrxf1ug video{flex-basis:0%}
 ._qvww1osq._qvww1osq h1{max-width:100%}
+._rjxpidpf{inset-inline-end:0}
 ._s7n4nkob{vertical-align:middle}
 ._syaz1poe{color:#c7d1db}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._t9ec1i34{transform:translateY(-50%)}
 ._tzy41w01{opacity:.85}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._u5f3idpf{padding-right:0}
 ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._u7coidpf{inset-block-end:0}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._umc418ws >*{transform:scale(2)}
 ._vchhusvi{box-sizing:border-box}
@@ -102,7 +135,9 @@
 ._y3gn1e5h{text-align:left}
 ._y3gn1h6o{text-align:center}
 ._y3gnusic{text-align:right}
+._yv0ehpfy{grid-template-columns:minmax(0,1fr) auto}
 ._z18o1kxc video{height:100vh}
 ._zcqx1osq p{line-height:100%}
 ._4pkp1fjg button:hover{color:#161a1d!important}
+._6pupl4ek button:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}
 ._1sfy1fjg button:active{color:#161a1d!important}

package/dist/es2019/styleWrappers.js

@@ -11,13 +11,25 @@ import { useMergeRefs } from 'use-callback-ref';
 import Heading from '@atlaskit/heading/heading';
 // 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 { useIsInsetViewer } from './insetViewerContext';
+const INSET_HEADER_HEIGHT = "var(--ds-space-800, 64px)";
 const blanketStyles = null;
+const insetViewerBlanketStyles = null;
+const blanketCloseButtonStyles = null;
+const insetViewerShellStyles = null;
+const insetViewerLayoutStyles = null;
 const headerWrapperStyles = null;
 const archiveHeaderWrapperStyles = null;
+const insetViewerMediaColumnStyles = null;
+const insetViewerMediaStageStyles = null;
 const listWrapperStyles = null;
+const insetViewerListWrapperStyles = null;
+const itemStageStyles = null;
+const insetViewerItemStageStyles = null;
 const closeButtonWrapperStyles = null;
 const contentWrapperStyles = null;
 const contentWrapperStyleWithSideBar = null;
+const insetViewerContentWrapperStyles = null;
 const zoomWrapperStyles = null;
 const zoomCenterControlsStyles = null;
 const zoomRightControlsStyles = null;
@@ -29,6 +41,10 @@ const videoStyles = null;
 const pdfWrapperStyles = null;
 const arrowStyles = null;
 const arrowWrapperStyles = null;
+const insetViewerArrowStyles = null;
+const insetViewerArrowWrapperStyles = null;
+const insetViewerLeftWrapperStyles = null;
+const insetViewerRightWrapperStyles = null;
 const arrowsWrapperStyles = null;
 const leftWrapperStyles = null;
 const leftWrapperStylesWithSideBar = null;
@@ -67,14 +83,38 @@ export const Blanket = ({
   'data-testid': datatestId,
   className,
   children
+}) => {
+  const isInsetViewer = 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: 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);
+};
+
+// Mouse-only: keyboard and screen reader users close with Escape or the visible close button.
+export const BlanketCloseButton = ({
+  onClick
+}) => /*#__PURE__*/React.createElement("button", {
+  type: "button",
+  "aria-hidden": true,
+  tabIndex: -1,
+  onClick: onClick,
+  className: ax(["_189eidpf _kqswstnw _152tidpf _rjxpidpf _u7coidpf _1e02idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80om73ad"])
+});
+export const InsetViewerShell = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1reo15vq _18m915vq _2rkopb1k _1e0c1txw _2lx21bp4 _kqswh2mm _1pbykb7n _1bsb1osq _4t3i1osq _1tkeidpf _c71l1osq _bfhk1bhr _16qs130s"])
+}, children);
+export const InsetViewerLayout = ({
+  children
 }) => /*#__PURE__*/React.createElement("div", {
-  "data-testid": datatestId
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  ,
-  className: ax(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", className]),
-  role: "dialog",
-  "aria-modal": "true",
-  "aria-labelledby": "media.media-viewer.file.name"
+  className: ax(["_1e0c11p5 _yv0ehpfy _2z051h8r _1bsb1osq _4t3i1osq _1tkeidpf"])
 }, children);
 export const HeaderWrapper = ({
   className,
@@ -87,12 +127,30 @@ export const HeaderWrapper = ({
   }, children);
 };
 HeaderWrapper.displayName = 'HeaderWrapper';
-export const ListWrapper = ({
+export const MediaColumn = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  className: ax(["_1reo15vq _18m915vq _yyhykb7n _1ii7cs5v _1e0c1txw _2lx21bp4 _4t3i1osq _1ul9idpf _1tkeidpf"])
 }, children);
+export const MediaStage = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1ul9idpf _1tkeidpf _kqswh2mm"])
+}, children);
+export const ListWrapper = ({
+  children
+}) => {
+  const isInsetViewer = useIsInsetViewer();
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o", isInsetViewer && "_1reo15vq _18m915vq _2lx21bp4 _4cvr1fhb _1bah1y6m"])
+  }, children);
+};
 ListWrapper.displayName = 'ListWrapper';
+export const ItemStage = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _kqswh2mm _1bsb1osq _1ul9idpf _1tkeidpf", "_1e0c1txw _4cvr1h6o _1bah1h6o"])
+}, children);
 export const ArrowsWrapper = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
@@ -108,9 +166,12 @@ export const CloseButtonWrapper = ({
 export const ContentWrapper = ({
   isSidebarVisible,
   children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_1bsb1osq", isSidebarVisible && "_1bsbyazj"])
-}, children);
+}) => {
+  const isInsetViewer = useIsInsetViewer();
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([!isInsetViewer && "_1bsb1osq", isInsetViewer && "_16jlidpf _1o9zidpf _i0dl1wug _1reo15vq _18m915vq _1bsb1osq _1ul9idpf _1tkeidpf _4t3i1osq _kqswh2mm", isSidebarVisible && !isInsetViewer && "_1bsbyazj"])
+  }, children);
+};
 export const ZoomWrapper = ({
   className,
   children
@@ -184,20 +245,30 @@ export const PDFWrapper = /*#__PURE__*/forwardRef((props, ref) => {
 export const Arrow = ({
   className,
   children
-}) => /*#__PURE__*/React.createElement("span", {
-  className: ax(["_80omtlke _11pt15ty _di7o9txx _20ka1poe", className])
-}, children);
+}) => {
+  const isInsetViewer = useIsInsetViewer();
+  return /*#__PURE__*/React.createElement("span", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax([!isInsetViewer && "_80omtlke _11pt15ty _di7o9txx _20ka1poe", isInsetViewer && "_80omtlke _7dir1j9a _6pupl4ek", className])
+  }, children);
+};
 export const LeftWrapper = ({
   children,
   isArchiveSideBarVisible
-}) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv"])
-}, children);
+}) => {
+  const isInsetViewer = useIsInsetViewer();
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv", isInsetViewer && "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t", isInsetViewer && "_1ltv1ejb"])
+  }, children);
+};
 export const RightWrapper = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf"])
-}, children);
+}) => {
+  const isInsetViewer = useIsInsetViewer();
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf", isInsetViewer && "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t", isInsetViewer && "_1xi21ejb"])
+  }, children);
+};
 
 // header.tsx
 

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

@@ -45,8 +45,12 @@ export class InteractiveImgComponent extends React.Component {
     _defineProperty(this, "onImageClicked", e => {
       const {
         onClose,
-        onBlanketClicked
+        onBlanketClicked,
+        isInsetViewer
       } = this.props;
+      if (isInsetViewer) {
+        return;
+      }
       if (e.target === e.currentTarget && onBlanketClicked) {
         onBlanketClicked();
       }

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

@@ -1,10 +1,11 @@
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createClosedEvent } from '../../analytics/events/ui/closed';
+import { withInsetViewer } from '../../insetViewerContext';
 import { InteractiveImgComponent } from './interactive-img-component';
-export const InteractiveImg = withAnalyticsEvents({
+export const InteractiveImg = withInsetViewer(withAnalyticsEvents({
   onBlanketClicked: createAnalyticsEvent => {
     const event = createAnalyticsEvent(createClosedEvent('blanket'));
     event.fire(ANALYTICS_MEDIA_CHANNEL);
   }
-})(InteractiveImgComponent);
+})(InteractiveImgComponent));

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

@@ -8,6 +8,7 @@ import { messages } from '@atlaskit/media-ui/messages';
 import { Vector2 } from '@atlaskit/media-ui/vector2';
 import { createClosedEvent } from '../../analytics/events/ui/closed';
 import { ZoomLevel } from '../../domain/zoomLevel';
+import { useIsInsetViewer } from '../../insetViewerContext';
 import { MediaViewerError } from '../../MediaViewerError';
 import { BaselineExtend } from '../../styleWrappers';
 import { ZoomControls } from '../../zoomControls';
@@ -30,6 +31,7 @@ const SvgViewerBase = ({
   const wrapperRef = useRef(null);
   const [wrapperScroll, setWrapperScroll] = useState();
   const intl = useIntl();
+  const isInsetViewer = useIsInsetViewer();
   const onResize = useCallback(() => {
     if (!wrapperRef.current || !camera) {
       return;
@@ -80,6 +82,9 @@ const SvgViewerBase = ({
     onError(error);
   };
   const onSvgClicked = e => {
+    if (isInsetViewer) {
+      return;
+    }
     if (e.target === e.currentTarget) {
       onBlanketClicked === null || onBlanketClicked === void 0 ? void 0 : onBlanketClicked();
       onClose === null || onClose === void 0 ? void 0 : onClose();

package/dist/esm/analytics/ufoExperiences.js

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

package/dist/esm/insetViewerContext.js

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

package/dist/esm/list.js

@@ -3,9 +3,10 @@ import React, { useState, useRef } from 'react';
 import { getRandomTelemetryId } from '@atlaskit/media-common';
 import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
 import Header from './headerWithIntl';
+import { useIsInsetViewer } from './insetViewerContext';
 import { ItemViewer } from './item-viewer';
 import { Navigation } from './navigation';
-import { HeaderWrapper, ListWrapper } from './styleWrappers';
+import { HeaderWrapper, ItemStage, ListWrapper } from './styleWrappers';
 export var List = function List(_ref) {
   var defaultSelectedItem = _ref.defaultSelectedItem,
     onClose = _ref.onClose,
@@ -35,7 +36,9 @@ export var List = function List(_ref) {
   var traceContext = useRef({
     traceId: getRandomTelemetryId()
   });
-  return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(HeaderWrapper
+  var isInsetViewer = useIsInsetViewer();
+  var ViewerWrapper = isInsetViewer ? ItemStage : React.Fragment;
+  return /*#__PURE__*/React.createElement(ListWrapper, null, !isInsetViewer && /*#__PURE__*/React.createElement(HeaderWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: hideControlsClassName,
@@ -51,7 +54,7 @@ export var List = function List(_ref) {
     onSetArchiveSideBarVisible: setIsArchiveSideBarVisible,
     traceContext: traceContext.current,
     fallbackMediaNameFetcher: fallbackMediaNameFetcher
-  })), /*#__PURE__*/React.createElement(ItemViewer, {
+  })), /*#__PURE__*/React.createElement(ViewerWrapper, null, /*#__PURE__*/React.createElement(ItemViewer, {
     identifier: selectedItem,
     showControls: showControls,
     onClose: onClose,
@@ -60,7 +63,7 @@ export var List = function List(_ref) {
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
     traceContext: traceContext.current
-  }), /*#__PURE__*/React.createElement(Navigation, {
+  })), /*#__PURE__*/React.createElement(Navigation, {
     items: items,
     selectedItem: selectedItem,
     onChange: function onChange(nextSelectedItem) {