@atlaskit/media-ui 16.5.0 → 17.2.0

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @atlaskit/media-ui
 
+## 17.2.0
+
+### Minor Changes
+
+- [`ca519a86b1d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca519a86b1d) - Add new prop forceSyncDisplay in MediaImage to provide an option of always showing images.
+  Enable MediaCard to turn on forceSyncDisplay when server side rendering is enabled.
+- [`af29def3dac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af29def3dac) - expose missing smart-card classnames
+
+  ```
+  import {
+    blockCardResolvedViewByClassName,
+    blockCardForbiddenViewLinkClassName,
+    blockCardContentClassName,
+    blockCardContentHeaderClassName,
+    blockCardContentHeaderNameClassName,
+    blockCardNotFoundViewClassName,
+    blockCardErroredViewClassName,
+  } from '@atlaskit/smart-card'
+
+  css`
+    .${blockCardContentHeaderNameClassName} {
+      background-color: red;
+    }
+  `
+  ```
+
+### Patch Changes
+
+- [`09f27f70093`](https://bitbucket.org/atlassian/atlassian-frontend/commits/09f27f70093) - Grant "clipboard-write" permission so that the browsing contexts within the iframe will have Clipboard API available
+- [`f124adcb18f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f124adcb18f) - Adding .md, .lock, .yaml, .yml, .tsx, .jsx as known extension types
+- [`fe8e5ca9a92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe8e5ca9a92) - [ux] MediaInline package now correctly shows a border around it upon being selected
+- Updated dependencies
+
+## 17.1.0
+
+### Minor Changes
+
+- [`269ee940b87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/269ee940b87) - redesign error UI on new media card experience
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.0.0
+
+### Major Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Updated and refreshed media inline component
+
+### Minor Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Skip forward and backward buttons are added to inline media player
+
+### Patch Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Adds support for lazy loading of MediaImage
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Adding lazy loading as the default for the SSR media card
+- Updated dependencies
+
+## 16.6.0
+
+### Minor Changes
+
+- [`4777a174e6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4777a174e6d) - Added analytics support for customMediaPlayer + screen event + entrypoint for locales
+- [`8f9f7250bba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f9f7250bba) - CustomMediaPlayer: refactored screen event + added "viewed" track event
+- [`5662f7f329c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5662f7f329c) - Added analytics track event for tracking the total playcount for each individual video based on the first time a video is played
+- [`ab905c0e924`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ab905c0e924) - [ux] EDM-1641: add floating toolbar to media card and view switcher for inline view
+- [`46d9d2872b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/46d9d2872b4) - Video Analytics - Add UI events for CustomMediaPlayer
+- [`9c0241362a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c0241362a6) - [ux] Upgrade to the latest version of @atlaskit/modal-dialog. This change includes shifting the primary button in the footer of the modal to be on the right instead of the left.
+
+### Patch Changes
+
+- [`abb74b2f8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abb74b2f8a4) - Filter out undefined attributes in video analytics, add actionSubjectId in screen event
+- [`a46eca1d68c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a46eca1d68c) - [ux] Fix ellipsified text issue when used in MediaAvatarPicker inside a modal
+- [`35d85025b4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35d85025b4d) - MEX-860 Changed base track events payload + added CustomMediaPlayerType
+- [`b90c0237824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b90c0237824) - Update package.jsons to remove unused dependencies.
+- [`bab5f91af08`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bab5f91af08) - Add UI events for the case when TimeRange's value changed
+- [`64216e944dd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64216e944dd) - Fixed track event "played" + added test
+- Updated dependencies
+
 ## 16.5.0
 
 ### Minor Changes

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

@@ -15,7 +15,8 @@ var _utils = require("../utils");
 var Byline = function Byline(_ref) {
   var text = _ref.text,
       children = _ref.children,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      className = _ref.className;
   return (0, _core.jsx)("span", {
     css: (0, _utils.mq)({
       fontSize: (0, _utils.gs)(1.5),
@@ -37,7 +38,8 @@ 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/cjs/BlockCard/components/Content.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Content = void 0;
+exports.Content = exports.blockCardContentClassName = void 0;
 
 var _core = require("@emotion/core");
 
 var _utils = require("../utils");
 
 /** @jsx jsx */
+var blockCardContentClassName = 'block-card-content';
+exports.blockCardContentClassName = blockCardContentClassName;
+
 var Content = function Content(_ref) {
   var children = _ref.children,
       _ref$isCompact = _ref.isCompact,
@@ -22,7 +25,8 @@ 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/cjs/BlockCard/components/ContentHeader.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContentHeader = void 0;
+exports.ContentHeader = exports.blockCardContentHeaderClassName = void 0;
 
 var _core = require("@emotion/core");
 
 /** @jsx jsx */
+var blockCardContentHeaderClassName = 'block-card-content-header';
+exports.blockCardContentHeaderClassName = blockCardContentHeaderClassName;
+
 var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,
       link = _ref.link,
@@ -23,7 +26,8 @@ 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/cjs/BlockCard/components/Icon.js

@@ -40,8 +40,7 @@ var Icon = function Icon(_ref) {
         width: (0, _utils.gs)(2)
       },
       src: url,
-      "data-testid": "".concat(testId, "-image"),
-      className: blockCardIconImageClassName
+      "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
@@ -53,7 +52,8 @@ var Icon = function Icon(_ref) {
       alignItems: 'center',
       justifyContent: 'center'
     },
-    "data-testid": testId
+    "data-testid": testId,
+    className: blockCardIconImageClassName
   }, icon || image || placeholder);
 };
 

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

@@ -13,9 +13,11 @@ var _colors = require("@atlaskit/theme/colors");
 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 (0, _core.jsx)("span", {
     "data-testid": "".concat(testId, "-link"),
+    className: className,
     css: {
       color: _colors.B400,
       wordBreak: 'break-all'

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

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -101,28 +99,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.default.createElement(_ModalHeader.Header, (0, _extends2.default)({}, 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.default.createElement("iframe", {
+  }, /*#__PURE__*/_react.default.createElement(_ModalHeader.Header, {
+    providerName: providerName,
+    icon: icon,
+    metadata: metadata,
+    url: url,
+    title: title,
+    label: closeLabel,
+    download: download,
+    byline: byline,
+    onViewActionClick: onViewActionClick,
+    onDownloadActionClick: onDownloadActionClick
+  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, src ? /*#__PURE__*/_react.default.createElement("iframe", {
     style: iframeStyles,
     name: iframeName,
     frameBorder: 0,
@@ -133,7 +125,7 @@ var Modal = function Modal(_ref) {
     name: iframeName,
     frameBorder: 0,
     sandbox: sandbox
-  })));
+  }))));
 };
 
 var _default = ModalWithErrorBoundary;

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

@@ -11,6 +11,8 @@ var _core = require("@emotion/core");
 
 var _react = require("react");
 
+var _modalDialog = require("@atlaskit/modal-dialog");
+
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
@@ -33,8 +35,7 @@ var _messages = require("../../messages");
 
 /** @jsx jsx */
 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 ? {
@@ -47,6 +48,10 @@ var Header = function Header(_ref) {
       byline = _ref.byline,
       onViewActionClick = _ref.onViewActionClick,
       onDownloadActionClick = _ref.onDownloadActionClick;
+
+  var _useModal = (0, _modalDialog.useModal)(),
+      onClose = _useModal.onClose;
+
   return (0, _core.jsx)("div", {
     style: {
       paddingLeft: (0, _utils.gs)(3),

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Name = void 0;
+exports.Name = exports.blockCardContentHeaderNameClassName = void 0;
 
 var _core = require("@emotion/core");
 
@@ -12,6 +12,9 @@ var _constants = require("@atlaskit/theme/constants");
 var _utils = require("../utils");
 
 /** @jsx jsx */
+var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+exports.blockCardContentHeaderNameClassName = blockCardContentHeaderNameClassName;
+
 var Name = function Name(_ref) {
   var name = _ref.name,
       _ref$isLeftPadded = _ref.isLeftPadded,
@@ -36,7 +39,8 @@ var Name = function Name(_ref) {
       maxHeight: (0, _utils.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/cjs/BlockCard/views/ErroredView.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ErroredView = void 0;
+exports.ErroredView = exports.blockCardErroredViewClassName = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -47,6 +47,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var textDescriptionProps = _objectSpread({}, _messages.messages.could_not_load_link);
 
+var blockCardErroredViewClassName = 'block-card-errored-view';
+exports.blockCardErroredViewClassName = blockCardErroredViewClassName;
+
 var ErroredView = function ErroredView(_ref) {
   var _ref$isSelected = _ref.isSelected,
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -70,6 +73,7 @@ var ErroredView = function ErroredView(_ref) {
   return (0, _core.jsx)(_Frame.Frame, {
     isSelected: isSelected,
     testId: testId,
+    className: blockCardErroredViewClassName,
     isFluidHeight: true,
     inheritDimensions: inheritDimensions
   }, (0, _core.jsx)(_Content.Content, {

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ForbiddenView = exports.blockCardForbiddenViewClassName = void 0;
+exports.ForbiddenView = exports.blockCardForbiddenViewLinkClassName = exports.blockCardForbiddenViewClassName = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -44,6 +44,8 @@ var _UnresolvedText = require("../components/UnresolvedText");
 /** @jsx jsx */
 var blockCardForbiddenViewClassName = 'block-card-forbidden-view';
 exports.blockCardForbiddenViewClassName = blockCardForbiddenViewClassName;
+var blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
+exports.blockCardForbiddenViewLinkClassName = blockCardForbiddenViewLinkClassName;
 
 var ForbiddenView = function ForbiddenView(_ref) {
   var _ref$context = _ref.context,
@@ -85,7 +87,8 @@ var ForbiddenView = function ForbiddenView(_ref) {
     link: link
   }, (0, _core.jsx)(_Link.Link, {
     url: link,
-    testId: testId
+    testId: testId,
+    className: blockCardForbiddenViewLinkClassName
   })), (0, _core.jsx)(_Byline.Byline, null, (0, _core.jsx)(_UnresolvedText.UnresolvedText, {
     icon: (0, _core.jsx)(_lockFilled.default, {
       label: "forbidden-lock-icon",

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NotFoundView = void 0;
+exports.NotFoundView = exports.blockCardNotFoundViewClassName = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -45,6 +45,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var textDescriptionProps = _objectSpread({}, _messages.messages.not_found_description);
 
+var blockCardNotFoundViewClassName = 'block-card-not-found-view';
+exports.blockCardNotFoundViewClassName = blockCardNotFoundViewClassName;
+
 var NotFoundView = function NotFoundView(_ref) {
   var _ref$context = _ref.context,
       context = _ref$context === void 0 ? {
@@ -66,6 +69,7 @@ var NotFoundView = function NotFoundView(_ref) {
   return (0, _core.jsx)(_Frame.Frame, {
     isSelected: isSelected,
     testId: testId,
+    className: blockCardNotFoundViewClassName,
     isFluidHeight: true
   }, (0, _core.jsx)(_Content.Content, {
     isCompact: true

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResolvedView = exports.blockCardResolvedViewClassName = void 0;
+exports.ResolvedView = exports.blockCardResolvedViewByClassName = exports.blockCardResolvedViewClassName = void 0;
 
 var _core = require("@emotion/core");
 
@@ -46,6 +46,8 @@ var _handlers = require("../utils/handlers");
 /** @jsx jsx */
 var blockCardResolvedViewClassName = 'block-card-resolved-view';
 exports.blockCardResolvedViewClassName = blockCardResolvedViewClassName;
+var blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
+exports.blockCardResolvedViewByClassName = blockCardResolvedViewByClassName;
 
 var ResolvedView = function ResolvedView(_ref) {
   var _ref$icon = _ref.icon,
@@ -87,7 +89,8 @@ var ResolvedView = function ResolvedView(_ref) {
     items: details
   }) : undefined;
   var resolvedByline = (0, _core.jsx)(_Byline.Byline, {
-    testId: testId ? "".concat(testId, "-by") : undefined
+    testId: testId ? "".concat(testId, "-by") : undefined,
+    className: blockCardResolvedViewByClassName
   }, byline);
 
   var handleClick = function handleClick(event) {

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

@@ -54,7 +54,7 @@ var Frame = /*#__PURE__*/_react.default.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/cjs/MediaInlineCard/ErroredView/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaInlineCardErroredView = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+
+var _Frame = require("../Frame");
+
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+
+var _Icon = require("../Icon");
+
+var _styled = require("../styled");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(MediaInlineCardErroredView, _React$Component);
+
+  var _super = _createSuper(MediaInlineCardErroredView);
+
+  function MediaInlineCardErroredView() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
+      var message = _this.props.message;
+
+      var errorMessage = /*#__PURE__*/_react.default.createElement(_styled.NoLinkAppearance, null, message);
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errorMessage);
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(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.default.createElement(_Frame.Frame, {
+        testId: testId,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+          label: "error",
+          size: "small",
+          primaryColor: _colors.R300
+        })),
+        title: this.renderMessage()
+      }));
+    }
+  }]);
+  return MediaInlineCardErroredView;
+}(_react.default.Component);
+
+exports.MediaInlineCardErroredView = MediaInlineCardErroredView;

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

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Frame = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = require("./styled");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var Frame = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Frame, _React$Component);
+
+  var _super = _createSuper(Frame);
+
+  function Frame() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyPress", function (event) {
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+
+      var onClick = _this.props.onClick;
+
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (e) {
+      e.preventDefault();
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(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.default.createElement(_styled.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.default.Component);
+
+exports.Frame = Frame;