@atlaskit/media-ui 16.5.0 → 17.2.0

package/dist/es2019/index.js

@@ -4,6 +4,7 @@ export { DownloadAction } from './BlockCard/actions/DownloadAction';
 export { ViewAction } from './BlockCard/actions/ViewAction';
 export { AuthorizeAction, BlockCardErroredView, BlockCardNotFoundView, BlockCardForbiddenView, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, ForbiddenAction, PreviewAction } from './BlockCard';
 export { InlineCardErroredView, InlineCardForbiddenView, InlineCardResolvedView, InlineCardResolvingView, InlineCardUnauthorizedView } from './InlineCard';
+export { MediaInlineCardErroredView, MediaInlineCardLoadedView, MediaInlineCardLoadingView } from './MediaInlineCard';
 export { CardLinkView } from './LinkView';
 export { Ellipsify } from './ellipsify';
 export { toHumanReadableMediaSize } from './humanReadableSize';
@@ -16,7 +17,7 @@ export { InfiniteScroll } from './infiniteScroll';
 export { ExifOrientation, getCssFromImageOrientation, getImageInfo, getMetaTagNumericValue, getOrientation, getScaleFactor, getScaleFactorFromFile, isRotated, readImageMetaData } from './imageMetaData';
 export { dataURItoFile, fileToArrayBuffer, fileToDataURI, getFileInfo, getFileInfoFromSrc, loadImage, findParentByClassname, getMimeIcon } from './util';
 export { MimeTypeIcon } from './mime-type-icon';
-export { default as CustomMediaPlayer } from './customMediaPlayer/index';
+export { CustomMediaPlayer } from './customMediaPlayer/index';
 export { TimeRange } from './customMediaPlayer/timeRange';
 export { hideControlsClassName } from './classNames';
 export { Shortcut, keyCodes } from './shortcut';

package/dist/es2019/locales.js

@@ -0,0 +1,3 @@
+import * as untypedLocales from './i18n/index';
+const locales = untypedLocales;
+export { locales };

package/dist/es2019/mediaImage/index.js

@@ -64,7 +64,9 @@ export class MediaImage extends Component {
       previewOrientation,
       crossOrigin,
       onImageError,
-      alt = ''
+      alt = '',
+      loading,
+      forceSyncDisplay
     } = this.props;
     const {
       parentWidth,
@@ -269,7 +271,7 @@ export class MediaImage extends Component {
       and we can do that only when image is loaded (and we have image size)
      */
 
-    const showImage = isImageLoaded || isFitStrategy && !isImageRotated;
+    const showImage = forceSyncDisplay || isImageLoaded || isFitStrategy && !isImageRotated;
     const style = {
       transform: 'translate(-50%, -50%)'
     };
@@ -360,13 +362,14 @@ export class MediaImage extends Component {
     }
 
     return /*#__PURE__*/React.createElement(ImageComponent, {
+      loading: loading,
       "data-testid": "media-image",
       draggable: false,
       alt: alt,
       style: style,
       onLoad: this.onImageLoad,
       onError: onImageError,
-      innerRef: this.imageRef,
+      imageRef: this.imageRef,
       src: dataURI,
       crossOrigin: crossOrigin
     });
@@ -376,5 +379,6 @@ export class MediaImage extends Component {
 
 _defineProperty(MediaImage, "defaultProps", {
   crop: true,
-  stretch: false
+  stretch: false,
+  forceSyncDisplay: false
 });

package/dist/es2019/mediaImage/styled.js

@@ -1,8 +1,29 @@
-import styled from 'styled-components';
-export const ImageComponent = styled.img`
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  object-fit: contain;
-  image-orientation: none;
-`;
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+const imgStyle = {
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  objectFit: 'contain',
+  imageOrientation: 'none'
+};
+/*
+This image component falls back to using the native React CSS in JS styling because
+in Styled Components 3.6.2 the additinoal loading property is stripped from the final html.
+This is not the case when using the JSX <img> tag, it is also fixed in the latest versionm of
+styled-components.
+*/
+
+export const ImageComponent = props => {
+  const {
+    style,
+    imageRef,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/React.createElement("img", _extends({}, otherProps, {
+    ref: imageRef,
+    style: { ...imgStyle,
+      ...style
+    }
+  }));
+};

package/dist/es2019/messages.js

@@ -50,6 +50,11 @@ export const messages = defineMessages({
     defaultMessage: 'Failed to load',
     description: 'We show this message when we have an error loading a file'
   },
+  failed_to_upload: {
+    id: 'fabric.media.failed_to_upload',
+    defaultMessage: 'Failed to upload',
+    description: 'We show this message when we have an error uploading a file'
+  },
   recent_uploads: {
     id: 'fabric.media.recent_uploads',
     defaultMessage: 'Recent uploads',
@@ -442,12 +447,12 @@ export const messages = defineMessages({
   },
   play: {
     id: 'fabric.media.play',
-    defaultMessage: 'play',
+    defaultMessage: 'Play',
     description: ''
   },
   pause: {
     id: 'fabric.media.pause',
-    defaultMessage: 'pause',
+    defaultMessage: 'Pause',
     description: ''
   },
   disable_fullscreen: {
@@ -515,6 +520,11 @@ export const messages = defineMessages({
     defaultMessage: 'text',
     description: ''
   },
+  displayThumbnail: {
+    id: 'fabric.media.display_thumbnail',
+    defaultMessage: 'Display thumbnail',
+    description: 'Display file with as a thumbnail.'
+  },
   search: {
     id: 'fabric.media.search',
     defaultMessage: 'search',
@@ -540,6 +550,16 @@ export const messages = defineMessages({
     defaultMessage: 'Playback speed',
     description: 'In the context of a video player, it allows user to switch the speed of the video'
   },
+  skipBackward: {
+    id: 'fabric.media.skip_backward',
+    defaultMessage: 'Back 10 seconds',
+    description: 'In the context of a video player, it allows user to skip 10 seconds of play time backward.'
+  },
+  skipForward: {
+    id: 'fabric.media.skip_forward',
+    defaultMessage: 'Forward 10 seconds',
+    description: 'In the context of a video player, it allows user to skip 10 seconds of play time forward.'
+  },
   playbackDefaultSpeed: {
     id: 'fabric.media.playback_default_speed',
     defaultMessage: 'Default',
@@ -575,11 +595,6 @@ export const messages = defineMessages({
     defaultMessage: 'Error 429',
     description: 'Error 429 is thrown'
   },
-  preview_rateLimited: {
-    id: 'fabric.media.preview_rateLimited',
-    defaultMessage: 'We had difficulties creating a preview',
-    description: 'The preview is rate limited'
-  },
   close_and_reopen: {
     id: 'fabric.media.close_and_reopen',
     defaultMessage: 'Try closing this file and reopening.',

package/dist/es2019/shortcut.js

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Component } from 'react';
 export const keyCodes = {
-  space: 32,
-  m: 77
+  space: 'Space',
+  m: 'KeyM',
+  rightArrow: 'ArrowRight',
+  leftArrow: 'ArrowLeft'
 };
 export class Shortcut extends Component {
   constructor(...args) {
@@ -10,11 +12,16 @@ export class Shortcut extends Component {
 
     _defineProperty(this, "keyHandler", e => {
       const {
-        keyCode,
-        handler
+        handler,
+        code,
+        keyCode
       } = this.props;
 
-      if (e.keyCode === keyCode) {
+      if (keyCode !== undefined && e.keyCode === keyCode) {
+        handler();
+      }
+
+      if (code !== undefined && e.code === code) {
         handler();
       }
     });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "16.5.0",
+	"version": "17.2.0",
 	"sideEffects": false
 }

package/dist/esm/BlockCard/components/Byline.js

@@ -5,7 +5,8 @@ import { gs, mq } from '../utils';
 export var Byline = function Byline(_ref) {
   var text = _ref.text,
       children = _ref.children,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      className = _ref.className;
   return jsx("span", {
     css: mq({
       fontSize: gs(1.5),
@@ -27,6 +28,7 @@ export var Byline = function Byline(_ref) {
       // due to HTML its unwrapping behaviour on paste.
       MozUserSelect: 'none'
     }),
-    "data-testid": testId
+    "data-testid": testId,
+    className: className
   }, text || children);
 };

package/dist/esm/BlockCard/components/Content.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { gs, mq } from '../utils';
+export var blockCardContentClassName = 'block-card-content';
 export var Content = function Content(_ref) {
   var children = _ref.children,
       _ref$isCompact = _ref.isCompact,
@@ -13,6 +14,7 @@ export var Content = function Content(_ref) {
       justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
       flexGrow: 1
     }),
-    "data-trello-do-not-use-override": "block-card-content"
+    "data-trello-do-not-use-override": "block-card-content",
+    className: blockCardContentClassName
   }, children);
 };

package/dist/esm/BlockCard/components/ContentHeader.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+export var blockCardContentHeaderClassName = 'block-card-content-header';
 export var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,
       link = _ref.link,
@@ -15,6 +16,7 @@ export var ContentHeader = function ContentHeader(_ref) {
       // due to HTML its unwrapping behaviour on paste.
       MozUserSelect: 'none'
     },
-    "data-trello-do-not-use-override": "block-card-content-header"
+    "data-trello-do-not-use-override": "block-card-content-header",
+    className: blockCardContentHeaderClassName
   }, children);
 };

package/dist/esm/BlockCard/components/Icon.js

@@ -24,8 +24,7 @@ export var Icon = function Icon(_ref) {
         width: gs(2)
       },
       src: url,
-      "data-testid": "".concat(testId, "-image"),
-      className: blockCardIconImageClassName
+      "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
@@ -37,6 +36,7 @@ export var Icon = function Icon(_ref) {
       alignItems: 'center',
       justifyContent: 'center'
     },
-    "data-testid": testId
+    "data-testid": testId,
+    className: blockCardIconImageClassName
   }, icon || image || placeholder);
 };

package/dist/esm/BlockCard/components/Link.js

@@ -4,9 +4,11 @@ import { B400 } from '@atlaskit/theme/colors';
 export var Link = function Link(_ref) {
   var url = _ref.url,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'block-card' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'block-card' : _ref$testId,
+      className = _ref.className;
   return jsx("span", {
     "data-testid": "".concat(testId, "-link"),
+    className: className,
     css: {
       color: B400,
       wordBreak: 'break-all'

package/dist/esm/BlockCard/components/Modal.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -10,9 +9,25 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/* TODO: (from codemod)
+We have converted this file as best we could but you might still need
+to manually complete migrating this usage of ModalDialog.
+
+This file uses one or more of the following ModalDialog props: 'components', 'header',
+'footer', 'body'. These props have been removed as part of moving to
+a compositional API.
+
+The render props that used to be exposed by the custom component APIs are
+now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+We are also no longer exposing 'appearance' as render prop, so this needs to be
+manually passed to your custom components.
+
+For a complete guide on customization using the new compositional API, refer to the docs at
+https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
 import React, { useState } from 'react';
-import ModalDialog, { ModalTransition } from '@atlaskit/modal-dialog';
-import { Header as _Header } from './ModalHeader';
+import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
+import { Header } from './ModalHeader';
 import { getIframeSandboxAttribute } from '../../util';
 var iframeStyles = {
   width: "100%",
@@ -78,28 +93,22 @@ var Modal = function Modal(_ref) {
     width: "large",
     testId: testId,
     onOpenComplete: onOpen,
-    components: {
-      // TODO modal body wants to be original modal with height 100% - find out how to add
-      Header: function Header(props) {
-        return /*#__PURE__*/React.createElement(_Header, _extends({}, props, {
-          providerName: providerName,
-          icon: icon,
-          metadata: metadata,
-          url: url,
-          title: title,
-          label: closeLabel,
-          download: download,
-          byline: byline,
-          onViewActionClick: onViewActionClick,
-          onDownloadActionClick: onDownloadActionClick
-        }));
-      }
-    },
     onClose: function onClose() {
       setIsOpen(false);
     },
     onCloseComplete: onClose
-  }, src ? /*#__PURE__*/React.createElement("iframe", {
+  }, /*#__PURE__*/React.createElement(Header, {
+    providerName: providerName,
+    icon: icon,
+    metadata: metadata,
+    url: url,
+    title: title,
+    label: closeLabel,
+    download: download,
+    byline: byline,
+    onViewActionClick: onViewActionClick,
+    onDownloadActionClick: onDownloadActionClick
+  }), /*#__PURE__*/React.createElement(ModalBody, null, src ? /*#__PURE__*/React.createElement("iframe", {
     style: iframeStyles,
     name: iframeName,
     frameBorder: 0,
@@ -110,7 +119,7 @@ var Modal = function Modal(_ref) {
     name: iframeName,
     frameBorder: 0,
     sandbox: sandbox
-  })));
+  }))));
 };
 
 export default ModalWithErrorBoundary;

package/dist/esm/BlockCard/components/ModalHeader.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { Fragment as F } from 'react';
+import { useModal } from '@atlaskit/modal-dialog';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -12,8 +13,7 @@ import { MetadataList } from './MetadataList';
 import { Byline } from './Byline';
 import { messages } from '../../messages';
 export var Header = function Header(_ref) {
-  var onClose = _ref.onClose,
-      title = _ref.title,
+  var title = _ref.title,
       label = _ref.label,
       _ref$metadata = _ref.metadata,
       metadata = _ref$metadata === void 0 ? {
@@ -26,6 +26,10 @@ export var Header = function Header(_ref) {
       byline = _ref.byline,
       onViewActionClick = _ref.onViewActionClick,
       onDownloadActionClick = _ref.onDownloadActionClick;
+
+  var _useModal = useModal(),
+      onClose = _useModal.onClose;
+
   return jsx("div", {
     style: {
       paddingLeft: gs(3),

package/dist/esm/BlockCard/components/Name.js

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core';
 import { fontSize } from '@atlaskit/theme/constants';
 import { gs } from '../utils';
+export var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
 export var Name = function Name(_ref) {
   var name = _ref.name,
       _ref$isLeftPadded = _ref.isLeftPadded,
@@ -26,6 +27,7 @@ export var Name = function Name(_ref) {
       maxHeight: gs(6)
     },
     "data-testid": testId,
-    "data-trello-do-not-use-override": "block-card-content-header-name"
+    "data-trello-do-not-use-override": "block-card-content-header-name",
+    className: blockCardContentHeaderNameClassName
   }, name);
 };

package/dist/esm/BlockCard/views/ErroredView.js

@@ -24,6 +24,7 @@ import { RetryAction } from '../actions/RetryAction';
 
 var textDescriptionProps = _objectSpread({}, messages.could_not_load_link);
 
+export var blockCardErroredViewClassName = 'block-card-errored-view';
 export var ErroredView = function ErroredView(_ref) {
   var _ref$isSelected = _ref.isSelected,
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -47,6 +48,7 @@ export var ErroredView = function ErroredView(_ref) {
   return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
+    className: blockCardErroredViewClassName,
     isFluidHeight: true,
     inheritDimensions: inheritDimensions
   }, jsx(Content, {

package/dist/esm/BlockCard/views/ForbiddenView.js

@@ -18,6 +18,7 @@ import { handleClickCommon } from '../utils/handlers';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 export var blockCardForbiddenViewClassName = 'block-card-forbidden-view';
+export var blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
 export var ForbiddenView = function ForbiddenView(_ref) {
   var _ref$context = _ref.context,
       context = _ref$context === void 0 ? {
@@ -58,7 +59,8 @@ export var ForbiddenView = function ForbiddenView(_ref) {
     link: link
   }, jsx(Link, {
     url: link,
-    testId: testId
+    testId: testId,
+    className: blockCardForbiddenViewLinkClassName
   })), jsx(Byline, null, jsx(UnresolvedText, {
     icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",

package/dist/esm/BlockCard/views/NotFoundView.js

@@ -23,6 +23,7 @@ import { handleClickCommon } from '../utils/handlers';
 
 var textDescriptionProps = _objectSpread({}, messages.not_found_description);
 
+export var blockCardNotFoundViewClassName = 'block-card-not-found-view';
 export var NotFoundView = function NotFoundView(_ref) {
   var _ref$context = _ref.context,
       context = _ref$context === void 0 ? {
@@ -44,6 +45,7 @@ export var NotFoundView = function NotFoundView(_ref) {
   return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
+    className: blockCardNotFoundViewClassName,
     isFluidHeight: true
   }, jsx(Content, {
     isCompact: true

package/dist/esm/BlockCard/views/ResolvedView.js

@@ -18,6 +18,7 @@ import { ContentFooter } from '../components/ContentFooter';
 import { gs } from '../utils';
 import { handleClickCommon } from '../utils/handlers';
 export var blockCardResolvedViewClassName = 'block-card-resolved-view';
+export var blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
 export var ResolvedView = function ResolvedView(_ref) {
   var _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? {} : _ref$icon,
@@ -58,7 +59,8 @@ export var ResolvedView = function ResolvedView(_ref) {
     items: details
   }) : undefined;
   var resolvedByline = jsx(Byline, {
-    testId: testId ? "".concat(testId, "-by") : undefined
+    testId: testId ? "".concat(testId, "-by") : undefined,
+    className: blockCardResolvedViewByClassName
   }, byline);
 
   var handleClick = function handleClick(event) {

package/dist/esm/EmbedCard/components/Frame.js

@@ -36,7 +36,7 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
     },
     allowFullScreen: true,
     scrolling: "yes",
-    allow: "autoplay; encrypted-media",
+    allow: "autoplay; encrypted-media; clipboard-write",
     onLoad: function onLoad() {
       return setIframeLoaded(true);
     },

package/dist/esm/MediaInlineCard/ErroredView/index.js

@@ -0,0 +1,70 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { R300 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { Frame } from '../Frame';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { AKIconWrapper } from '../Icon';
+import { NoLinkAppearance } from '../styled';
+export var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component) {
+  _inherits(MediaInlineCardErroredView, _React$Component);
+
+  var _super = _createSuper(MediaInlineCardErroredView);
+
+  function MediaInlineCardErroredView() {
+    var _this;
+
+    _classCallCheck(this, MediaInlineCardErroredView);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "renderMessage", function () {
+      var message = _this.props.message;
+      var errorMessage = /*#__PURE__*/React.createElement(NoLinkAppearance, null, message);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, errorMessage);
+    });
+
+    return _this;
+  }
+
+  _createClass(MediaInlineCardErroredView, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          onClick = _this$props.onClick,
+          isSelected = _this$props.isSelected,
+          _this$props$testId = _this$props.testId,
+          testId = _this$props$testId === void 0 ? 'media-inline-card-errored-view' : _this$props$testId,
+          icon = _this$props.icon;
+      return /*#__PURE__*/React.createElement(Frame, {
+        testId: testId,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+        icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
+          label: "error",
+          size: "small",
+          primaryColor: R300
+        })),
+        title: this.renderMessage()
+      }));
+    }
+  }]);
+
+  return MediaInlineCardErroredView;
+}(React.Component);

package/dist/esm/MediaInlineCard/Frame/index.js

@@ -0,0 +1,84 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { Wrapper } from './styled';
+export var Frame = /*#__PURE__*/function (_React$Component) {
+  _inherits(Frame, _React$Component);
+
+  var _super = _createSuper(Frame);
+
+  function Frame() {
+    var _this;
+
+    _classCallCheck(this, Frame);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (event) {
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+
+      var onClick = _this.props.onClick;
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
+      e.preventDefault();
+    });
+
+    return _this;
+  }
+
+  _createClass(Frame, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          isSelected = _this$props.isSelected,
+          children = _this$props.children,
+          onClick = _this$props.onClick,
+          testId = _this$props.testId;
+      var isInteractive = Boolean(onClick);
+      return /*#__PURE__*/React.createElement(Wrapper, {
+        isSelected: isSelected,
+        tabIndex: isInteractive ? 0 : undefined,
+        role: isInteractive ? 'button' : undefined,
+        onClick: this.handleClick,
+        onMouseDown: this.handleMouseDown,
+        onKeyPress: this.handleKeyPress,
+        "data-testid": testId
+      }, children);
+    }
+  }]);
+
+  return Frame;
+}(React.Component);