@atlaskit/media-viewer 48.2.14 → 48.3.0

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

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { 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 { FormattedMessage, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+import Heading from '@atlaskit/heading';
+import { xcss, Box, Flex } from '@atlaskit/primitives';
+const headerStyles = xcss({
+  textAlign: 'center',
+  marginTop: 'space.300',
+  marginBottom: 'space.100'
+});
+const inputStyle = xcss({
+  width: '330px'
+});
+const footerStyles = xcss({
+  marginTop: 'space.200',
+  display: 'flex',
+  justifyContent: 'center'
+});
+export const PDFPasswordInput = ({
+  onSubmit,
+  hasPasswordError,
+  onRender
+}) => {
+  const passwordInputRef = useRef(null);
+  const onRenderRef = useRef(onRender);
+  const [formError, setFormError] = useState(hasPasswordError);
+  const intl = useIntl();
+  useEffect(() => {
+    var _onRenderRef$current;
+    (_onRenderRef$current = onRenderRef.current) === null || _onRenderRef$current === void 0 ? void 0 : _onRenderRef$current.call(onRenderRef);
+  }, []);
+  useEffect(() => {
+    if (hasPasswordError) {
+      var _passwordInputRef$cur;
+      setFormError(true);
+      (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 ? void 0 : _passwordInputRef$cur.focus();
+    }
+  }, [hasPasswordError]);
+  return /*#__PURE__*/React.createElement(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",
+    size: "xlarge",
+    primaryColor: "var(--ds-text, #c7d1db)"
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: headerStyles
+  }, /*#__PURE__*/React.createElement(Heading, {
+    as: "h1",
+    level: "h200"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.password_protected_pdf))), /*#__PURE__*/React.createElement(Field, {
+    "aria-required": true,
+    name: "password",
+    label: "Password",
+    isRequired: true
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(Box, {
+    xcss: inputStyle
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+    type: "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, {
+    xcss: footerStyles
+  }, /*#__PURE__*/React.createElement(LoadingButton, {
+    appearance: "primary",
+    type: "submit",
+    isLoading: submitting
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.submit)))));
+};

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { PDFViewer, EventBus, PDFLinkService, NullL10n } from 'pdfjs-dist/legacy/web/pdf_viewer';
-import { getDocument, GlobalWorkerOptions, CMapCompressionType } from 'pdfjs-dist/legacy/build/pdf';
+import { getDocument, GlobalWorkerOptions, CMapCompressionType, PasswordResponses } from 'pdfjs-dist/legacy/build/pdf';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { cmap } from './cmaps';
 import { css, Global } from '@emotion/react';
 import { ZoomControls } from '../../zoomControls';
@@ -13,79 +14,69 @@ import { ZoomLevel } from '../../domain/zoomLevel';
 import { processError } from './processError';
 import { pdfJs } from './pdfJs';
 import { extractCompressedBase64 } from './extractCompressedBase64';
+import { PDFPasswordInput } from './pdfPasswordInput';
+import { fireAnalytics } from '../../analytics';
+import { createPdfPasswordInputScreenEvent } from '../../analytics/events/screen/pdfPasswordInput';
+import { createPasswordPdfScreenEvent } from '../../analytics/events/screen/passwordPdf';
 export const pdfViewerClassName = 'pdfViewer';
 
 // Styles are partially copied from https://github.com/mozilla/pdfjs-dist/blob/v2.9.359/web/pdf_viewer.css
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
-const globalStyles = css`
-  .${pdfViewerClassName} {
-    margin-top: ${"var(--ds-space-800, 64px)"};
-    margin-bottom: ${"var(--ds-space-800, 64px)"};
-
-    .page {
-      margin: 1px auto ${"var(--ds-space-negative-100, -8px)"} auto;
-      border: 9px solid transparent;
-      position: relative;
-    }
-
-    .canvasWrapper {
-      overflow: hidden;
-    }
-
-    .textLayer {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      overflow: hidden;
-      opacity: 0.2;
-      line-height: 1;
-    }
-
-    .textLayer span,
-    .textLayer br {
-      color: transparent;
-      position: absolute;
-      white-space: pre;
-      cursor: text;
-      transform-origin: 0% 0%;
-    }
-
-    .textLayer ::-moz-selection {
-      background: rgba(0, 0, 255, 1);
-    }
-
-    .textLayer ::selection {
-      background: rgba(0, 0, 255, 1);
-    }
-
-    .annotationLayer section {
-      position: absolute;
-      text-align: initial;
-    }
-
-    .annotationLayer .linkAnnotation > a,
-    .annotationLayer .buttonWidgetAnnotation.pushButton > a {
-      position: absolute;
-      font-size: 1em;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .annotationLayer .linkAnnotation > a:hover,
-    .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
-      opacity: 0.2;
-      background: rgba(255, 255, 0, 1);
-      box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+const globalStyles = css({
+  [`.${pdfViewerClassName}`]: {
+    marginTop: "var(--ds-space-800, 64px)",
+    marginBottom: "var(--ds-space-800, 64px)",
+    '.page': {
+      margin: `1px auto ${"var(--ds-space-negative-100, -8px)"} auto`,
+      border: '9px solid transparent',
+      position: 'relative'
+    },
+    '.canvasWrapper': {
+      overflow: 'hidden'
+    },
+    '.textLayer': {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      overflow: 'hidden',
+      opacity: 0.2,
+      lineHeight: 1
+    },
+    '.textLayer span, .textLayer br': {
+      color: 'transparent',
+      position: 'absolute',
+      whiteSpace: 'pre',
+      cursor: 'text',
+      transformOrigin: '0% 0%'
+    },
+    '.textLayer ::-moz-selection': {
+      background: 'rgba(0, 0, 255, 1)'
+    },
+    '.textLayer ::selection': {
+      background: 'rgba(0, 0, 255, 1)'
+    },
+    '.annotationLayer section': {
+      position: 'absolute',
+      textAlign: 'initial'
+    },
+    '.annotationLayer .linkAnnotation > a, .annotationLayer .buttonWidgetAnnotation.pushButton > a': {
+      position: 'absolute',
+      fontSize: '1em',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%'
+    },
+    '.annotationLayer .linkAnnotation > a:hover, .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover': {
+      opacity: 0.2,
+      background: 'rgba(255, 255, 0, 1)',
+      boxShadow: '0 2px 10px rgba(255, 255, 0, 1)'
     }
   }
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage/preview */
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+});
 class CmapFacotry {
   constructor() {}
   async fetch({
@@ -102,21 +93,26 @@ class CmapFacotry {
   }
 }
 let defaultWorkerUrl = '';
-export const PDFRenderer = ({
+const PDFRendererBase = ({
   src,
   onClose,
   onSuccess,
   onError,
   workerUrl,
-  item
+  item,
+  createAnalyticsEvent
 }) => {
   const [zoomLevel, setZoomLevel] = useState(new ZoomLevel(1));
   const [docOutcome, setDocOutcome] = useState(Outcome.pending());
+  const isPasswordPdfRef = useRef(false);
+  const [passwordProtected, setPasswordProtected] = useState(false);
+  const [hasPasswordError, setHasPasswordError] = useState(false);
   const pdfWrapperRef = useRef();
   const docRef = useRef();
   const pdfViewerRef = useRef();
   const onSuccessRef = useRef(onSuccess);
   onSuccessRef.current = onSuccess;
+  const updatePasswordRef = useRef(undefined);
   const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
   useEffect(() => {
@@ -128,10 +124,20 @@ export const PDFRenderer = ({
           defaultWorkerUrl = URL.createObjectURL(blob);
         }
         GlobalWorkerOptions.workerSrc = workerUrl !== null && workerUrl !== void 0 ? workerUrl : defaultWorkerUrl;
-        docRef.current = await getDocument({
+        const getDocumentTask = getDocument({
           url: src,
           CMapReaderFactory: CmapFacotry
-        }).promise;
+        });
+        getDocumentTask.onPassword = (updatePassword, e) => {
+          updatePasswordRef.current = updatePassword;
+          if (e === PasswordResponses.NEED_PASSWORD) {
+            isPasswordPdfRef.current = true;
+            setPasswordProtected(true);
+          } else {
+            setHasPasswordError(true);
+          }
+        };
+        docRef.current = await getDocumentTask.promise;
         isSubscribed && setDocOutcome(Outcome.successful(docRef.current));
       } catch (error) {
         const pdfError = processError(error);
@@ -167,10 +173,13 @@ export const PDFRenderer = ({
     pdfViewerRef.current.setDocument(docRef.current);
     pdfLinkService.setDocument(docRef.current, null);
     pdfViewerRef.current.firstPagePromise.then(scaleToFit);
+    if (isPasswordPdfRef.current) {
+      fireAnalytics(createPasswordPdfScreenEvent(), createAnalyticsEvent);
+    }
     if (onSuccessRef.current) {
       onSuccessRef.current();
     }
-  }, [docOutcome]);
+  }, [createAnalyticsEvent, docOutcome]);
   const savePdfElement = el => {
     pdfWrapperRef.current = el;
   };
@@ -185,13 +194,25 @@ export const PDFRenderer = ({
     }
   };
   return docOutcome.match({
-    pending: () => /*#__PURE__*/React.createElement(Spinner, null),
+    pending: () => passwordProtected ? /*#__PURE__*/React.createElement(PDFPasswordInput, {
+      onRender: () => fireAnalytics(createPdfPasswordInputScreenEvent(), createAnalyticsEvent),
+      onSubmit: data => {
+        var _updatePasswordRef$cu;
+        // Reset hasPasswordError on each submission
+        hasPasswordError && setHasPasswordError(false);
+        (_updatePasswordRef$cu = updatePasswordRef.current) === null || _updatePasswordRef$cu === void 0 ? void 0 : _updatePasswordRef$cu.call(updatePasswordRef, data.password);
+      },
+      hasPasswordError: hasPasswordError
+    }) : /*#__PURE__*/React.createElement(Spinner, null),
     successful: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Global, {
       styles: globalStyles
     }), /*#__PURE__*/React.createElement(PDFWrapper, {
       "data-testid": "media-viewer-pdf-content",
       ref: savePdfElement
-    }, /*#__PURE__*/React.createElement("div", {
+    },
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    React.createElement("div", {
       className: pdfViewerClassName,
       onClick: closeOnDirectClick(onClose)
     }), /*#__PURE__*/React.createElement(ZoomControls, {
@@ -207,4 +228,6 @@ export const PDFRenderer = ({
       });
     }
   });
-};
+};
+
+export const PDFRenderer = withAnalyticsEvents()(PDFRendererBase);

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { isAbortedRequestError, isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
+import { isImageRepresentationReady, isErrorFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
 import { isImageMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
 import { Outcome } from '../../domain';
@@ -41,6 +41,7 @@ export class ImageViewer extends BaseViewer {
     if (fileState.status === 'error') {
       return;
     }
+    const controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
     try {
       let orientation = 1;
       let objectUrl;
@@ -63,12 +64,11 @@ export class ImageViewer extends BaseViewer {
         }
       } else if (isImageRepresentationReady(fileState)) {
         const item = processedFileStateToMediaItem(fileState);
-        const controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
         const response = mediaClient.getImage(item.details.id, {
           collection: collectionName,
           mode: 'fit'
         }, controller, true, traceContext);
-        this.cancelImageFetch = () => controller && controller.abort();
+        this.cancelImageFetch = () => controller === null || controller === void 0 ? void 0 : controller.abort();
         objectUrl = URL.createObjectURL(await response);
       } else {
         this.setState({
@@ -90,7 +90,7 @@ export class ImageViewer extends BaseViewer {
       });
     } catch (err) {
       // TODO : properly handle aborted requests (MS-2843)
-      if (!isAbortedRequestError(err)) {
+      if (!(controller !== null && controller !== void 0 && controller.signal.aborted)) {
         const imgError = new MediaViewerError('imageviewer-fetch-url', err instanceof Error ? err : undefined);
         this.setState({
           content: Outcome.failed(imgError)

package/dist/esm/analytics/events/screen/passwordPdf.js

@@ -0,0 +1,8 @@
+export var createPasswordPdfScreenEvent = function createPasswordPdfScreenEvent() {
+  return {
+    eventType: 'screen',
+    action: 'viewed',
+    actionSubject: 'mediaViewerPasswordPdfScreen',
+    name: 'mediaViewerPasswordPdfScreen'
+  };
+};

package/dist/esm/analytics/events/screen/pdfPasswordInput.js

@@ -0,0 +1,8 @@
+export var createPdfPasswordInputScreenEvent = function createPdfPasswordInputScreenEvent() {
+  return {
+    eventType: 'screen',
+    action: 'viewed',
+    actionSubject: 'mediaViewerPdfPasswordInputScreen',
+    name: 'mediaViewerPdfPasswordInputScreen'
+  };
+};

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.2.14";
+var packageVersion = "48.3.0";
 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.2.14";
+var packageVersion = "48.3.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/domain/outcome.js

@@ -13,7 +13,7 @@ export var Outcome = /*#__PURE__*/function () {
   }, {
     key: "data",
     get: function get() {
-      if (this.state.status === 'SUCCESSFUL') {
+      if (this.state.status === 'SUCCESSFUL' || this.state.status === 'FAILED') {
         return this.state.data;
       } else {
         return;
@@ -61,25 +61,7 @@ export var Outcome = /*#__PURE__*/function () {
         case 'PENDING':
           return pending();
         case 'FAILED':
-          return failed(this.state.err);
-      }
-    }
-  }, {
-    key: "mapSuccessful",
-    value: function mapSuccessful(map) {
-      if (this.state.status === 'SUCCESSFUL') {
-        return Outcome.successful(map(this.state.data));
-      } else {
-        return new Outcome(this.state);
-      }
-    }
-  }, {
-    key: "mapFailed",
-    value: function mapFailed(map) {
-      if (this.state.status === 'FAILED') {
-        return Outcome.failed(map(this.state.err));
-      } else {
-        return new Outcome(this.state);
+          return failed(this.state.err, this.state.data);
       }
     }
   }], [{
@@ -99,10 +81,11 @@ export var Outcome = /*#__PURE__*/function () {
     }
   }, {
     key: "failed",
-    value: function failed(err) {
+    value: function failed(err, data) {
       return new Outcome({
         status: 'FAILED',
-        err: err
+        err: err,
+        data: data
       });
     }
   }]);

package/dist/esm/item-viewer.js

@@ -11,6 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
@@ -125,9 +126,9 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "onLoadFail", function (mediaViewerError) {
+    _defineProperty(_assertThisInitialized(_this), "onLoadFail", function (mediaViewerError, data) {
       _this.safeSetState({
-        item: Outcome.failed(mediaViewerError)
+        item: Outcome.failed(mediaViewerError, data)
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onExternalImgSuccess", function () {
@@ -178,6 +179,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderItem",
     value: function renderItem(fileState) {
+      var _this2 = this;
       var _this$props = this.props,
         mediaClient = _this$props.mediaClient,
         identifier = _this$props.identifier,
@@ -227,7 +229,9 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         case 'doc':
           return /*#__PURE__*/React.createElement(DocViewer, _extends({
             onSuccess: this.onSuccess,
-            onError: this.onLoadFail
+            onError: function onError(err) {
+              _this2.onLoadFail(err, fileState);
+            }
           }, viewerProps));
         case 'archive':
           return /*#__PURE__*/React.createElement(ArchiveViewerLoader, _extends({
@@ -271,7 +275,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
       var item = this.state.item;
       var identifier = this.props.identifier;
       return item.match({
@@ -282,29 +286,31 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
               dataURI = _ref.dataURI;
             return /*#__PURE__*/React.createElement(InteractiveImg, {
               src: dataURI,
-              onLoad: _this2.onExternalImgSuccess,
-              onError: _this2.onExternalImgError
+              onLoad: _this3.onExternalImgSuccess,
+              onError: _this3.onExternalImgError
             });
           } else {
             // render a FileState fetched through media-client
-            var fileState = fileItem;
-            switch (fileState.status) {
+            switch (fileItem.status) {
               case 'processed':
               case 'uploading':
               case 'processing':
-                return _this2.renderItem(fileState);
+                return _this3.renderItem(fileItem);
               case 'failed-processing':
-                return _this2.renderError(new MediaViewerError('itemviewer-file-failed-processing-status'), fileState);
+                if (getBooleanFF('platform.corex.password-protected-pdf_ht8re') && fileItem.mediaType === 'doc' && fileItem.mimeType === 'application/pdf') {
+                  return _this3.renderItem(fileItem);
+                }
+                return _this3.renderError(new MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
               case 'error':
-                return _this2.renderError(new MediaViewerError('itemviewer-file-error-status'), fileState);
+                return _this3.renderError(new MediaViewerError('itemviewer-file-error-status'), fileItem);
             }
           }
         },
         pending: function pending() {
           return /*#__PURE__*/React.createElement(Spinner, null);
         },
-        failed: function failed(error) {
-          return _this2.renderError(error, item.data);
+        failed: function failed(error, data) {
+          return _this3.renderError(error, data);
         }
       });
     }
@@ -338,7 +344,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "init",
     value: function init(props) {
-      var _this3 = this;
+      var _this4 = this;
       var mediaClient = props.mediaClient,
         identifier = props.identifier,
         createAnalyticsEvent = props.createAnalyticsEvent;
@@ -358,13 +364,13 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         collectionName: identifier.collectionName
       }).subscribe({
         next: function next(file) {
-          _this3.updateFileStateFlag(file);
-          _this3.safeSetState({
+          _this4.updateFileStateFlag(file);
+          _this4.safeSetState({
             item: Outcome.successful(file)
           });
         },
         error: function error(_error) {
-          _this3.safeSetState({
+          _this4.safeSetState({
             item: Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', _error))
           });
         }

package/dist/esm/media-viewer.js

@@ -116,7 +116,8 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
         className: mediaViewerPopupClass
       }, /*#__PURE__*/React.createElement(Shortcut, {
         code: 'Escape',
-        handler: this.onShortcutClosed
+        handler: this.onShortcutClosed,
+        eventType: 'keyup'
       }), /*#__PURE__*/React.createElement(Content, {
         isSidebarVisible: isSidebarVisible,
         onClose: this.onContentClose

package/dist/esm/navigation.js

@@ -77,7 +77,8 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         className: hideControlsClassName
       }, /*#__PURE__*/React.createElement(Shortcut, {
         code: 'ArrowLeft',
-        handler: prev('keyboard')
+        handler: prev('keyboard'),
+        eventType: 'keyup'
       }), /*#__PURE__*/React.createElement(Button, {
         testId: prevNavButtonId,
         onClick: prev('mouse'),
@@ -95,7 +96,8 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         className: hideControlsClassName
       }, /*#__PURE__*/React.createElement(Shortcut, {
         code: 'ArrowRight',
-        handler: next('keyboard')
+        handler: next('keyboard'),
+        eventType: 'keyup'
       }), /*#__PURE__*/React.createElement(Button, {
         testId: nextNavButtonId,
         onClick: next('mouse'),