@atlaskit/media-viewer 48.3.2 → 48.3.4

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

@@ -203,7 +203,9 @@ export class ArchiveViewerBase extends BaseViewer {
           }, /*#__PURE__*/React.createElement(DefaultCoverWrapper, null, /*#__PURE__*/React.createElement(AudioIcon, {
             label: "cover",
             size: "xlarge",
-            primaryColor: blanketColor,
+            primaryColor: blanketColor
+            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+            ,
             secondaryColor: "#9FADBC"
           })), /*#__PURE__*/React.createElement(CustomAudioPlayerWrapper, null, /*#__PURE__*/React.createElement(CustomMediaPlayer, {
             type: "audio",

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

@@ -1,8 +1,107 @@
 /** @jsx jsx */
 
-import { jsx } from '@emotion/react';
-import { archiveDownloadButtonWrapperStyles, archiveItemViewerWrapperStyles, archiveLayoutStyles, archiveSidebarFileEntryWrapperStyles, archiveSidebarFolderWrapperStyles, archiveSideBarStyles, archiveViewerWrapperStyles, separatorStyles, sidebarHeaderEntryStyles, sidebarHeaderIconStyles, sidebarHeaderWrapperStyles, sidebarItemWrapperStyles } from './styles';
+import { jsx, css, keyframes } from '@emotion/react';
+import { ArchiveSideBarWidth } from './styles';
+import { DN500 } from '@atlaskit/theme/colors';
 import { TouchScrollable } from 'react-scrolllock';
+const archiveItemViewerWrapperStyles = css({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const archiveSideBarStyles = css({
+  padding: `22px ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-250, 20px)"}`,
+  backgroundColor: "var(--ds-surface, #101214)",
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  width: `${ArchiveSideBarWidth}px`,
+  bottom: 0,
+  boxSizing: 'border-box',
+  overflowY: 'scroll'
+});
+const slideDown = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(-100%)'
+  },
+  '100%': {
+    transform: 'translateY(0)',
+    opacity: 1
+  }
+});
+const archiveDownloadButtonWrapperStyles = css({
+  padding: `${"var(--ds-space-100, 8px)"} 7px 5px ${"var(--ds-space-100, 8px)"}`,
+  border: 'none',
+  borderRadius: '3px',
+  backgroundColor: 'transparent',
+  color: "var(--ds-icon, #9FADBC)",
+  '&:hover': {
+    cursor: 'pointer',
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #A1BDD914)"
+  },
+  '&:active': {
+    cursor: 'pointer',
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #A6C5E229)"
+  }
+});
+const archiveSidebarFolderWrapperStyles = css({
+  transform: 'translateY(-100%)',
+  transition: 'all 1s',
+  opacity: 0,
+  animation: `${slideDown} 0.3s forwards`
+});
+const sidebarItemWrapperStyles = css({
+  width: '85%'
+});
+const archiveSidebarFileEntryWrapperStyles = css({
+  paddingBottom: "var(--ds-space-075, 5px)",
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  transition: 'background-color 0.3s'
+});
+const archiveLayoutStyles = css({
+  display: 'flex',
+  width: '100%',
+  height: '100%'
+});
+const archiveViewerWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  left: `${ArchiveSideBarWidth}px`,
+  right: 0,
+  bottom: 0,
+  alignItems: 'center',
+  display: 'flex'
+});
+const separatorStyles = css({
+  borderRadius: '1px',
+  height: '2px',
+  margin: `${"var(--ds-space-200, 19px)"} 0`,
+  backgroundColor: "var(--ds-border, #A6C5E229)",
+  flexShrink: 0
+});
+const sidebarHeaderWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flexShrink: 0
+});
+const sidebarHeaderIconStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: "var(--ds-space-100, 10px)",
+  flexShrink: 0
+});
+const sidebarHeaderEntryStyles = css({
+  flex: '1 1 auto',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  lineHeight: 1.14286,
+  color: `var(--ds-text, ${DN500})`
+});
 export const ArchiveItemViewerWrapper = ({
   children
 }) => {

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

@@ -1,113 +1,5 @@
-import { css, keyframes } from '@emotion/react';
 import { DN500 } from '@atlaskit/theme/colors';
 export const ArchiveSideBarWidth = 300;
-export const archiveItemViewerWrapperStyles = css`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`;
-export const archiveSideBarStyles = css`
-  padding: 22px ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-250, 20px)"}
-    ${"var(--ds-space-250, 20px)"};
-  background-color: ${"var(--ds-surface, #101214)"};
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: ${ArchiveSideBarWidth}px;
-  bottom: 0;
-  box-sizing: border-box;
-  overflow-y: scroll;
-`;
-const slideDown = keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`;
-export const archiveSidebarFolderWrapperStyles = css`
-  transform: translateY(-100%);
-  transition: all 1s;
-  opacity: 0;
-  animation: ${slideDown} 0.3s forwards;
-`;
-export const archiveDownloadButtonWrapperStyles = css`
-  padding: ${"var(--ds-space-100, 8px)"} 7px 5px ${"var(--ds-space-100, 8px)"};
-  border: none;
-  border-radius: 3px;
-  background-color: transparent;
-  color: ${"var(--ds-icon, #9FADBC)"};
-
-  &:hover {
-    cursor: pointer;
-    background-color: ${"var(--ds-background-neutral-subtle-hovered, #A1BDD914)"};
-  }
-
-  &:active {
-    cursor: pointer;
-    background-color: ${"var(--ds-background-neutral-subtle-pressed, #A6C5E229)"};
-  }
-`;
-export const sidebarItemWrapperStyles = css`
-  width: 85%;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const archiveSidebarFileEntryWrapperStyles = css`
-  padding-bottom: 5px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  transition: background-color 0.3s;
-`;
-export const archiveLayoutStyles = css`
-  display: flex;
-  width: 100%;
-  height: 100%;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const archiveViewerWrapperStyles = css`
-  position: absolute;
-  top: 0;
-  left: ${ArchiveSideBarWidth}px;
-  right: 0;
-  bottom: 0;
-  align-items: center;
-  display: flex;
-`;
-export const separatorStyles = css`
-  border-radius: 1px;
-  height: 2px;
-  margin: ${(8 * 5 - 2) / 2}px 0;
-  background-color: ${"var(--ds-border, #A6C5E229)"};
-  flex-shrink: 0;
-`;
-export const sidebarHeaderWrapperStyles = css`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const sidebarHeaderIconStyles = css`
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-  flex-shrink: 0;
-`;
-export const sidebarHeaderEntryStyles = css`
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.14286;
-  color: ${`var(--ds-text, ${DN500})`};
-`;
 export const itemStyle = {
   backgroundColor: `${"var(--ds-background-neutral-subtle, #101214)"}`,
   fill: `${"var(--ds-icon-success, #101214)"}`,

package/dist/es2019/viewers/doc/pdfPasswordInput.js

@@ -1,17 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useRef, useState } from 'react';
+/**@jsx jsx */
+import { useEffect, useRef, useState } from 'react';
 import LoadingButton from '@atlaskit/button/loading-button';
 import TextField from '@atlaskit/textfield';
 import LockIcon from '@atlaskit/icon/glyph/lock';
-import Form, { ErrorMessage, Field } from '@atlaskit/form';
+import Form, { Field } from '@atlaskit/form';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
-import Heading from '@atlaskit/heading';
 import { xcss, Box, Flex } from '@atlaskit/primitives';
+import { jsx, css } from '@emotion/react';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+const COLOR_SHADE = '#b6c2cf';
+const headingStyle = css({
+  fontSize: '14px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: COLOR_SHADE
+});
+const errorMessageWrapperStyle = css({
+  marginTop: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#FD9891',
+  fontSize: '12px',
+  display: 'flex'
+});
+const errorMessageStyle = css({
+  marginTop: '0px',
+  marginLeft: "var(--ds-space-050, 4px)"
+});
 const headerStyles = xcss({
   textAlign: 'center',
-  marginTop: 'space.300',
-  marginBottom: 'space.100'
+  marginTop: 'space.200',
+  marginBottom: 'space.200'
 });
 const inputStyle = xcss({
   width: '330px'
@@ -41,45 +60,52 @@ export const PDFPasswordInput = ({
       (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 ? void 0 : _passwordInputRef$cur.focus();
     }
   }, [hasPasswordError]);
-  return /*#__PURE__*/React.createElement(Form, {
+  return jsx(Form, {
     onSubmit: onSubmit
   }, ({
     formProps,
     submitting
-  }) => /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "center",
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(LockIcon, {
-    label: "forbidden-lock-icon",
+  }) => jsx("form", formProps, jsx(Flex, {
+    justifyContent: "center"
+  }, jsx(LockIcon, {
+    label: "",
     size: "xlarge",
-    primaryColor: "var(--ds-text, #c7d1db)"
-  })), /*#__PURE__*/React.createElement(Box, {
+    primaryColor: COLOR_SHADE
+  })), jsx(Box, {
     xcss: headerStyles
-  }, /*#__PURE__*/React.createElement(Heading, {
-    as: "h1",
-    level: "h200"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.password_protected_pdf))), /*#__PURE__*/React.createElement(Field, {
+  }, jsx("h1", {
+    css: headingStyle
+  }, jsx(FormattedMessage, messages.password_protected_pdf))), jsx(Field, {
     "aria-required": true,
     name: "password",
-    label: "Password",
     isRequired: true
   }, ({
     fieldProps
-  }) => /*#__PURE__*/React.createElement(Box, {
+  }) => jsx(Box, {
     xcss: inputStyle
-  }, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+  }, jsx(TextField, _extends({}, fieldProps, {
     type: "password",
+    "aria-label": intl.formatMessage(messages.password),
     placeholder: intl.formatMessage(messages.enter_password),
     ref: passwordInputRef,
     onChange: value => {
       fieldProps.onChange(value);
       setFormError(false);
     }
-  })), formError && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.incorrect_password)))), /*#__PURE__*/React.createElement(Box, {
+  })), formError && jsx("div", {
+    css: errorMessageWrapperStyle,
+    id: `${fieldProps.id}-error`,
+    "aria-live": "polite"
+  }, jsx(ErrorIcon, {
+    size: "small",
+    label: ""
+  }), jsx("p", {
+    css: errorMessageStyle
+  }, jsx(FormattedMessage, messages.incorrect_password))))), jsx(Box, {
     xcss: footerStyles
-  }, /*#__PURE__*/React.createElement(LoadingButton, {
+  }, jsx(LoadingButton, {
     appearance: "primary",
     type: "submit",
     isLoading: submitting
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.submit)))));
+  }, jsx(FormattedMessage, messages.submit)))));
 };

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

@@ -7,7 +7,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
 import Spinner from '@atlaskit/spinner';
 import { B75, B200, DN400, DN60, N0 } from '@atlaskit/theme/colors';
-import { BaselineExtend, HDIconGroupWrapper, HDIconWrapper, ImageWrapper, Img } from '../../styleWrappers';
+import { BaselineExtend, HDIconGroupWrapper, ImageWrapper, Img } from '../../styleWrappers';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
 import { ZoomControls } from '../../zoomControls';
@@ -217,12 +217,12 @@ export class InteractiveImgComponent extends React.Component {
       className: hideControlsClassName
     }, isHDActivating ? /*#__PURE__*/React.createElement(Spinner, {
       appearance: "invert"
-    }) : undefined, /*#__PURE__*/React.createElement(HDIconWrapper, null, /*#__PURE__*/React.createElement(HDIcon, {
+    }) : undefined, /*#__PURE__*/React.createElement(HDIcon, {
       primaryColor: hdPrimaryColor,
       secondaryColor: hdSecondaryColor,
       label: "hd",
       testId: testId
-    })));
+    }));
   }
   render() {
     const {
@@ -276,7 +276,7 @@ export class InteractiveImgComponent extends React.Component {
     }), /*#__PURE__*/React.createElement(BaselineExtend, null), /*#__PURE__*/React.createElement(ZoomControls, {
       zoomLevel: zoomLevel,
       onChange: this.onZoomChange
-    }), this.renderHDIndicator());
+    }, this.renderHDIndicator()));
   }
 }
 export const InteractiveImg = withAnalyticsEvents({

package/dist/es2019/zoomControls.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { hideControlsClassName, MediaButton } from '@atlaskit/media-ui';
 import ZoomOutIcon from '@atlaskit/icon/glyph/media-services/zoom-out';
 import ZoomInIcon from '@atlaskit/icon/glyph/media-services/zoom-in';
-import { ZoomWrapper, ZoomControlsWrapper, ZoomLevelIndicator } from './styleWrappers';
+import { ZoomWrapper, ZoomCenterControls, ZoomRightControls, ZoomLevelIndicator } from './styleWrappers';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireAnalytics } from './analytics/';
 import { createZoomInButtonClickEvent } from './analytics/events/ui/zoomInButtonClicked';
@@ -44,11 +44,12 @@ export class ZoomControlsBase extends Component {
       zoomLevel,
       intl: {
         formatMessage
-      }
+      },
+      children
     } = this.props;
     return /*#__PURE__*/React.createElement(ZoomWrapper, {
       className: hideControlsClassName
-    }, /*#__PURE__*/React.createElement(ZoomControlsWrapper, null, /*#__PURE__*/React.createElement(MediaButton, {
+    }, /*#__PURE__*/React.createElement(ZoomCenterControls, null, /*#__PURE__*/React.createElement(MediaButton, {
       isDisabled: !zoomLevel.canZoomOut,
       onClick: this.zoomOut,
       iconBefore: /*#__PURE__*/React.createElement(ZoomOutIcon, {
@@ -60,7 +61,7 @@ export class ZoomControlsBase extends Component {
       iconBefore: /*#__PURE__*/React.createElement(ZoomInIcon, {
         label: formatMessage(messages.zoom_in)
       })
-    })), /*#__PURE__*/React.createElement(ZoomLevelIndicator, null, zoomLevel.asPercentage));
+    })), /*#__PURE__*/React.createElement(ZoomRightControls, null, children, /*#__PURE__*/React.createElement(ZoomLevelIndicator, null, zoomLevel.asPercentage)));
   }
 }
 export const ZoomControls = withAnalyticsEvents({})(injectIntl(ZoomControlsBase));

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.3.2";
+var packageVersion = "48.3.4";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.3.2";
+var packageVersion = "48.3.4";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/navigation.js

@@ -83,10 +83,10 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         testId: prevNavButtonId,
         onClick: prev('mouse'),
         iconBefore: /*#__PURE__*/React.createElement(ArrowLeftCircleIcon
-        // DN800
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
         , {
           primaryColor: "#9FADBC"
-          // DN0
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           ,
           secondaryColor: "#161A1D",
           size: "xlarge",
@@ -102,10 +102,10 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         testId: nextNavButtonId,
         onClick: next('mouse'),
         iconBefore: /*#__PURE__*/React.createElement(ArrowRightCircleIcon
-        // DN800
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
         , {
           primaryColor: "#9FADBC"
-          // DN0
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           ,
           secondaryColor: "#161A1D",
           size: "xlarge",