@atlaskit/media-viewer 48.3.3 → 48.3.5

package/dist/es2019/styleWrappers.js

@@ -1,10 +1,325 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { forwardRef, useMemo } from 'react';
-import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, defaultCoverWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
+import { blanketColor, overlayZindex } from './styles';
+import { ellipsis, hideControlsClassName } from '@atlaskit/media-ui';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
+import { headerAndSidebarBackgroundColor } from './viewers/modalSpinner';
+import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { Box, xcss } from '@atlaskit/primitives';
+const SIDEBAR_WIDTH = 416;
+const blanketStyles = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  backgroundColor: blanketColor,
+  zIndex: overlayZindex,
+  display: 'flex'
+});
+const headerWrapperStyles = ({
+  isArchiveSideBarVisible
+}) => css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '98px',
+  opacity: 0.85,
+  background: `linear-gradient( to bottom, ${headerAndSidebarBackgroundColor}, rgba(14, 22, 36, 0) ) no-repeat`,
+  backgroundPosition: isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px 0` : '0',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db',
+  fontWeight: 500,
+  padding: "var(--ds-space-300, 24px)",
+  boxSizing: 'border-box',
+  pointerEvents: 'none',
+  zIndex: overlayZindex + 1
+});
+const listWrapperStyles = css({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const closeButtonWrapperStyles = css({
+  position: 'absolute',
+  top: "var(--ds-space-300, 24px)",
+  right: "var(--ds-space-250, 20px)",
+  zIndex: overlayZindex + 2
+});
+const contentWrapperStyles = ({
+  isSidebarVisible
+}) => css({
+  width: isSidebarVisible ? `calc(100% - ${SIDEBAR_WIDTH}px)` : '100%'
+});
+const zoomWrapperStyles = css({
+  width: '100%',
+  position: 'absolute',
+  bottom: '0px',
+  height: '98px',
+  backgroundImage: `linear-gradient( to top, ${headerAndSidebarBackgroundColor}, rgba(14, 22, 36, 0) )`,
+  opacity: 0.85,
+  pointerEvents: 'none',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'flex-end',
+  padding: `${"var(--ds-space-100, 10px)"} ${"var(--ds-space-300, 24px)"}`
+});
+const zoomCenterControlsStyles = css({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: "var(--ds-space-100, 10px)",
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+const zoomRightControlsStyles = css({
+  position: 'absolute',
+  right: "var(--ds-space-300, 24px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db',
+  pointerEvents: 'all',
+  display: 'flex',
+  justifyContent: 'right',
+  gap: "var(--ds-space-100, 10px)"
+});
+const zoomLevelIndicatorStyles = css({
+  height: '32px',
+  lineHeight: '32px',
+  verticalAlign: 'middle'
+});
+const hdIconGroupWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 10px)",
+  position: 'relative',
+  width: '24px',
+  '> *': {
+    position: 'absolute'
+  }
+});
+const errorMessageWrapperStyles = css({
+  textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db',
+  p: {
+    lineHeight: '100%'
+  }
+});
+const errorImageStyles = css({
+  marginBottom: "var(--ds-space-100, 10px)",
+  userSelect: 'none'
+});
+const videoStyles = css({
+  width: '100vw',
+  height: '100vh'
+});
+const pdfWrapperStyles = css({
+  overflow: 'auto',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  [`.${hideControlsClassName}`]: {
+    position: 'fixed'
+  }
+});
+const arrowStyles = css({
+  cursor: 'pointer',
+  svg: {
+    filter: 'drop-shadow(0px 1px 1px rgb(9 30 66 / 25%)) drop-shadow(0px 0px 1px rgb(9 30 66 / 31%))'
+  },
+  '&& button': {
+    height: 'inherit',
+    background: 'none',
+    '&:hover': {
+      svg: {
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+        color: '#b6c2cf'
+      }
+    },
+    '&:active': {
+      svg: {
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+        color: '#c7d1db'
+      }
+    }
+  }
+});
+const arrowWrapperStyles = css({
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  padding: "var(--ds-space-250, 20px)"
+});
+const arrowsWrapperStyles = css({
+  display: 'flex',
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  left: 0,
+  width: '100%'
+});
+const leftWrapperStyles = ({
+  isArchiveSideBarVisible
+}) => css(arrowWrapperStyles, {
+  textAlign: 'left',
+  left: isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px` : '0'
+});
+const rightWrapperStyles = css(arrowWrapperStyles, {
+  textAlign: 'right',
+  right: 0
+});
+const headerStyles = ({
+  isArchiveSideBarVisible
+}) => css({
+  display: 'flex',
+  paddingLeft: isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px` : '0'
+});
+const leftHeaderStyles = css({
+  flex: 1,
+  overflow: 'hidden',
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+const imageWrapperStyles = css({
+  width: '100vw',
+  height: '100vh',
+  overflow: 'auto',
+  textAlign: 'center',
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap'
+});
+const baselineExtendStyles = css({
+  height: '100%',
+  display: 'inline-block',
+  verticalAlign: 'middle'
+});
+const imgStyles = ({
+  cursor,
+  shouldPixelate
+}) => css({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  position: 'relative',
+  cursor: cursor
+}, shouldPixelate ? `/* Prevent images from being smoothed when scaled up */
+    image-rendering: optimizeSpeed; /* Legal fallback */
+    image-rendering: -moz-crisp-edges; /* Firefox        */
+    image-rendering: -o-crisp-edges; /* Opera          */
+    image-rendering: -webkit-optimize-contrast; /* Safari         */
+    image-rendering: optimize-contrast; /* CSS3 Proposed  */
+    image-rendering: crisp-edges; /* CSS4 Proposed  */
+    image-rendering: pixelated; /* CSS4 Proposed  */
+    -ms-interpolation-mode: nearest-neighbor; /* IE8+           */` : ``);
+const medatadataTextWrapperStyles = css({
+  overflow: 'hidden'
+});
+const metadataWrapperStyles = css({
+  display: 'flex'
+});
+const metadataFileNameStyles = css(ellipsis());
+const metadataSubTextStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db'
+}, ellipsis());
+const metadataIconWrapperStyles = xcss({
+  paddingTop: "var(--ds-space-050, 4px)",
+  paddingRight: "var(--ds-space-150, 12px)"
+});
+const rightHeaderStyles = css({
+  textAlign: 'right',
+  marginRight: "var(--ds-space-500, 40px)",
+  minWidth: '200px',
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+const customAudioPlayerWrapperStyles = css({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%'
+});
+const audioPlayerStyles = css({
+  backgroundColor: blanketColor,
+  borderRadius: borderRadius(),
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '400px',
+  height: '400px',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative'
+});
+const audioStyles = css({
+  width: '100%',
+  position: 'absolute',
+  bottom: 0,
+  left: 0
+});
+const audioCoverStyles = css({
+  width: '100%',
+  height: '100%',
+  objectFit: 'scale-down',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  backgroundColor: '#000'
+});
+const defaultCoverWrapperStyles = css({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '> *': {
+    transform: 'scale(2)'
+  }
+});
+const downloadButtonWrapperStyles = css({
+  marginTop: "var(--ds-space-300, 28px)",
+  textAlign: 'center',
+  button: {
+    '&:hover, &:active': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      color: '#161a1d !important'
+    }
+  }
+});
+const customVideoPlayerWrapperStyles = css({
+  video: {
+    flex: 1,
+    width: '100vw',
+    height: '100vh',
+    maxHeight: '100vh'
+  }
+});
+const sidebarWrapperStyles = css({
+  top: 0,
+  right: 0,
+  width: `${SIDEBAR_WIDTH}px`,
+  height: '100vh',
+  overflow: 'hidden auto',
+  backgroundColor: `var(--ds-surface, ${headerAndSidebarBackgroundColor})`,
+  color: "var(--ds-text, #c7d1db)"
+});
+const spinnerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%'
+});
+const formattedMessageWrapperStyles = css({});
 // 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 = ({
   'data-testid': datatestId,
@@ -37,6 +352,7 @@ ListWrapper.displayName = 'ListWrapper';
 export const ArrowsWrapper = ({
   children
 }) => jsx("div", {
+  id: "media-viewer-navigation",
   css: arrowsWrapperStyles
 }, children);
 export const CloseButtonWrapper = ({
@@ -61,10 +377,15 @@ export const ZoomWrapper = ({
   css: zoomWrapperStyles,
   className: className
 }, children);
-export const ZoomControlsWrapper = ({
+export const ZoomCenterControls = ({
+  children
+}) => jsx("div", {
+  css: zoomCenterControlsStyles
+}, children);
+export const ZoomRightControls = ({
   children
 }) => jsx("div", {
-  css: zoomControlsWrapperStyles
+  css: zoomRightControlsStyles
 }, children);
 export const ZoomLevelIndicator = ({
   children
@@ -78,11 +399,6 @@ export const HDIconGroupWrapper = ({
   css: hdIconGroupWrapperStyles,
   className: className
 }, children);
-export const HDIconWrapper = ({
-  children
-}) => jsx("div", {
-  css: hdIconWrapperStyles
-}, children);
 export const ErrorMessageWrapper = ({
   'data-testid': datatestId,
   children
@@ -243,8 +559,8 @@ export const MetadataSubText = ({
 }, children);
 export const MetadataIconWrapper = ({
   children
-}) => jsx("div", {
-  css: metadataIconWrapperStyles
+}) => jsx(Box, {
+  xcss: metadataIconWrapperStyles
 }, children);
 export const RightHeader = ({
   children

package/dist/es2019/styles.js

@@ -1,342 +1,3 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import { css } from '@emotion/react';
-import { layers, borderRadius } from '@atlaskit/theme/constants';
-import { ellipsis, hideControlsClassName } from '@atlaskit/media-ui';
-import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
-import { headerAndSidebarBackgroundColor } from './viewers/modalSpinner';
-const overlayZindex = layers.modal() + 10;
-const sidebarWidth = 416;
-export const blanketColor = '#22272B';
-export const blanketStyles = css`
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: ${blanketColor};
-  z-index: ${overlayZindex};
-  display: flex;
-`;
-export const headerWrapperStyles = ({
-  isArchiveSideBarVisible
-}) =>
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 98px;
-    opacity: 0.85;
-    background: linear-gradient(
-        to bottom,
-        ${headerAndSidebarBackgroundColor},
-        rgba(14, 22, 36, 0)
-      )
-      no-repeat;
-    background-position: ${isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px 0` : '0'};
-    color: #c7d1db;
-    font-weight: 500;
-    padding-top: 15px;
-    padding: ${"var(--ds-space-300, 24px)"};
-    box-sizing: border-box;
-    pointer-events: none;
-    z-index: ${overlayZindex + 1};
-  `;
-export const listWrapperStyles = css`
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const arrowsWrapperStyles = css`
-  display: flex;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 0;
-  width: 100%;
-`;
-export const closeButtonWrapperStyles = css`
-  position: absolute;
-  top: ${"var(--ds-space-300, 24px)"};
-  right: ${"var(--ds-space-250, 20px)"};
-  z-index: ${overlayZindex + 2};
-`;
-export const contentWrapperStyles = ({
-  isSidebarVisible
-}) => css`
-  width: ${isSidebarVisible ? `calc(100% - ${sidebarWidth}px)` : '100%'};
-`;
-export const zoomWrapperStyles = css`
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  height: 98px;
-  background-image: linear-gradient(
-    to top,
-    ${headerAndSidebarBackgroundColor},
-    rgba(14, 22, 36, 0)
-  );
-  opacity: 0.85;
-  pointer-events: none;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const zoomControlsWrapperStyles = css`
-  width: 100%;
-  position: absolute;
-  text-align: center;
-  bottom: 10px;
-  button {
-    margin-right: 10px;
-  }
-  > * {
-    pointer-events: all;
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const zoomLevelIndicatorStyles = css`
-  position: absolute;
-  right: ${"var(--ds-space-300, 24px)"};
-  bottom: 22px;
-  color: #c7d1db;
-  pointer-events: all;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const hdIconGroupWrapperStyles = css`
-  position: absolute;
-  right: 69px;
-  bottom: ${"var(--ds-space-200, 16px)"};
-`;
-export const hdIconWrapperStyles = css`
-  display: inline-block;
-  vertical-align: top;
-  margin-left: ${"var(--ds-space-negative-300, -24px)"};
-`;
-export const errorMessageWrapperStyles = css`
-  text-align: center;
-  color: #c7d1db;
-  p {
-    line-height: 100%;
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const errorImageStyles = css`
-  margin-bottom: 10px;
-  user-select: none;
-`;
-export const videoStyles = css`
-  width: 100vw;
-  height: 100vh;
-`;
-export const pdfWrapperStyles = css`
-  overflow: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-  .${hideControlsClassName} {
-    position: fixed;
-  }
-`;
-export const arrowStyles = css`
-  cursor: pointer;
-
-  svg {
-    filter: drop-shadow(0px 1px 1px rgb(9 30 66 / 25%))
-      drop-shadow(0px 0px 1px rgb(9 30 66 / 31%));
-  }
-
-  && button {
-    height: inherit;
-    background: none;
-
-    &:hover {
-      svg {
-        color: #b6c2cf;
-      }
-    }
-
-    &:active {
-      svg {
-        color: #c7d1db;
-      }
-    }
-  }
-`;
-const arrowWrapperStyles = css`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: ${"var(--ds-space-250, 20px)"};
-`;
-export const leftWrapperStyles = ({
-  isArchiveSideBarVisible
-}) => css`
-  ${arrowWrapperStyles}
-  text-align: left;
-  left: ${isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px` : '0'};
-`;
-export const rightWrapperStyles = css`
-  ${arrowWrapperStyles}
-  text-align: right;
-  right: 0;
-`;
-
-// header.tsx
-
-export const headerStyles = ({
-  isArchiveSideBarVisible
-}) => css`
-  display: flex;
-  padding-left: ${isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px` : '0'};
-`;
-export const leftHeaderStyles = css`
-  flex: 1;
-  overflow: hidden;
-  > * {
-    pointer-events: all;
-  }
-`;
-export const imageWrapperStyles = css`
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  text-align: center;
-  vertical-align: middle;
-  white-space: nowrap;
-`;
-export const baselineExtendStyles = css`
-  height: 100%;
-  display: inline-block;
-  vertical-align: middle;
-`;
-export const imgStyles = ({
-  cursor,
-  shouldPixelate
-}) => css`
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  cursor: ${cursor};
-  ${shouldPixelate ? `/* Prevent images from being smoothed when scaled up */
-    image-rendering: optimizeSpeed; /* Legal fallback */
-    image-rendering: -moz-crisp-edges; /* Firefox        */
-    image-rendering: -o-crisp-edges; /* Opera          */
-    image-rendering: -webkit-optimize-contrast; /* Safari         */
-    image-rendering: optimize-contrast; /* CSS3 Proposed  */
-    image-rendering: crisp-edges; /* CSS4 Proposed  */
-    image-rendering: pixelated; /* CSS4 Proposed  */
-    -ms-interpolation-mode: nearest-neighbor; /* IE8+           */` : ``}
-`;
-export const medatadataTextWrapperStyles = css`
-  overflow: hidden;
-`;
-export const metadataWrapperStyles = css`
-  display: flex;
-`;
-export const metadataFileNameStyles = css`
-  ${ellipsis()};
-`;
-export const metadataSubTextStyles = css`
-  color: #c7d1db;
-  ${ellipsis()};
-`;
-export const metadataIconWrapperStyles = css`
-  padding-top: ${"var(--ds-space-050, 4px)"};
-  padding-right: ${"var(--ds-space-150, 12px)"};
-`;
-export const rightHeaderStyles = css`
-  text-align: right;
-  margin-right: ${"var(--ds-space-500, 40px)"};
-  min-width: 200px;
-  > * {
-    pointer-events: all;
-  }
-`;
-export const customAudioPlayerWrapperStyles = css`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-`;
-export const audioPlayerStyles = css`
-  background-color: ${blanketColor};
-  border-radius: ${borderRadius()};
-  align-items: center;
-  justify-content: center;
-  width: 400px;
-  height: 400px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`;
-export const audioStyles = css`
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`;
-export const audioCoverStyles = css`
-  width: 100%;
-  height: 100%;
-  object-fit: scale-down;
-  background-color: #000;
-`;
-export const defaultCoverWrapperStyles = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > * {
-    transform: scale(2);
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const downloadButtonWrapperStyles = css`
-  margin-top: 28px;
-  text-align: center;
-
-  button {
-    &:hover,
-    &:active {
-      color: #161a1d !important;
-    }
-  }
-`;
-export const customVideoPlayerWrapperStyles = css`
-  video {
-    flex: 1;
-    width: 100vw;
-    height: 100vh;
-    max-height: 100vh;
-  }
-`;
-export const sidebarWrapperStyles = css`
-  top: 0;
-  right: 0;
-  width: ${sidebarWidth}px;
-  height: 100vh;
-  overflow: hidden auto;
-  background-color: ${`var(--ds-surface, ${headerAndSidebarBackgroundColor})`};
-  color: ${"var(--ds-text, #c7d1db)"};
-`;
-export const spinnerWrapperStyles = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-export const formattedMessageWrapperStyles = css``;
+import { layers } from '@atlaskit/theme/constants';
+export const overlayZindex = layers.modal() + 10;
+export const blanketColor = '#22272B';