@atlaskit/media-ui 17.1.0 → 17.2.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @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

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/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/Frame/styled.js

@@ -22,7 +22,7 @@ var _templateObject;
 var FONT_COLOR = _colors.text; // TODO: Dark mode background color to be added in the future.
 
 var BACKGROUND_COLOR_LIGHT = _colors.N30A;
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(_colors.B100, ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat(_colors.B300, ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isSelected = function isSelected(_ref) {
   var isSelected = _ref.isSelected;

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -67,6 +67,6 @@ var IconEmptyWrapper = _styledComponents.default.span(_templateObject8 || (_temp
 
 exports.IconEmptyWrapper = IconEmptyWrapper;
 
-var TitleWrapper = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([""])));
+var TitleWrapper = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ::selection {\n    background: none;\n  }\n"])));
 
 exports.TitleWrapper = TitleWrapper;

package/dist/cjs/classNames.js

@@ -27,18 +27,60 @@ Object.defineProperty(exports, "blockCardResolvedViewClassName", {
     return _ResolvedView.blockCardResolvedViewClassName;
   }
 });
+Object.defineProperty(exports, "blockCardResolvedViewByClassName", {
+  enumerable: true,
+  get: function get() {
+    return _ResolvedView.blockCardResolvedViewByClassName;
+  }
+});
 Object.defineProperty(exports, "blockCardForbiddenViewClassName", {
   enumerable: true,
   get: function get() {
     return _ForbiddenView.blockCardForbiddenViewClassName;
   }
 });
+Object.defineProperty(exports, "blockCardForbiddenViewLinkClassName", {
+  enumerable: true,
+  get: function get() {
+    return _ForbiddenView.blockCardForbiddenViewLinkClassName;
+  }
+});
 Object.defineProperty(exports, "blockCardIconImageClassName", {
   enumerable: true,
   get: function get() {
     return _Icon.blockCardIconImageClassName;
   }
 });
+Object.defineProperty(exports, "blockCardContentClassName", {
+  enumerable: true,
+  get: function get() {
+    return _Content.blockCardContentClassName;
+  }
+});
+Object.defineProperty(exports, "blockCardContentHeaderClassName", {
+  enumerable: true,
+  get: function get() {
+    return _ContentHeader.blockCardContentHeaderClassName;
+  }
+});
+Object.defineProperty(exports, "blockCardContentHeaderNameClassName", {
+  enumerable: true,
+  get: function get() {
+    return _Name.blockCardContentHeaderNameClassName;
+  }
+});
+Object.defineProperty(exports, "blockCardNotFoundViewClassName", {
+  enumerable: true,
+  get: function get() {
+    return _NotFoundView.blockCardNotFoundViewClassName;
+  }
+});
+Object.defineProperty(exports, "blockCardErroredViewClassName", {
+  enumerable: true,
+  get: function get() {
+    return _ErroredView.blockCardErroredViewClassName;
+  }
+});
 exports.hideControlsClassName = void 0;
 
 var _ContentFooter = require("./BlockCard/components/ContentFooter");
@@ -53,5 +95,15 @@ var _ForbiddenView = require("./BlockCard/views/ForbiddenView");
 
 var _Icon = require("./BlockCard/components/Icon");
 
+var _Content = require("./BlockCard/components/Content");
+
+var _ContentHeader = require("./BlockCard/components/ContentHeader");
+
+var _Name = require("./BlockCard/components/Name");
+
+var _NotFoundView = require("./BlockCard/views/NotFoundView");
+
+var _ErroredView = require("./BlockCard/views/ErroredView");
+
 var hideControlsClassName = 'mvng-hide-controls';
 exports.hideControlsClassName = hideControlsClassName;

package/dist/cjs/codeViewer.js

@@ -118,6 +118,7 @@ function getLanguageType(name) {
       return 'haxe';
 
     case 'js':
+    case 'jsx':
       return 'javascript';
 
     case 'jl':
@@ -177,9 +178,11 @@ function getLanguageType(name) {
     case 'msg':
     case 'log':
     case 'csv':
+    case 'md':
       return 'text';
 
     case 'ts':
+    case 'tsx':
       return 'typescript';
 
     case 'v':
@@ -191,6 +194,11 @@ function getLanguageType(name) {
     case 'xqy':
       return 'xquery';
 
+    case 'lock':
+    case 'yaml':
+    case 'yml':
+      return 'yaml';
+
     default:
       return null;
   }

package/dist/cjs/mediaImage/index.js

@@ -109,7 +109,8 @@ var MediaImage = /*#__PURE__*/function (_Component) {
           onImageError = _this$props.onImageError,
           _this$props$alt = _this$props.alt,
           alt = _this$props$alt === void 0 ? '' : _this$props$alt,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          forceSyncDisplay = _this$props.forceSyncDisplay;
       var _this$state = this.state,
           parentWidth = _this$state.parentWidth,
           parentHeight = _this$state.parentHeight,
@@ -312,7 +313,7 @@ var MediaImage = /*#__PURE__*/function (_Component) {
         and we can do that only when image is loaded (and we have image size)
        */
 
-      var showImage = isImageLoaded || isFitStrategy && !isImageRotated;
+      var showImage = forceSyncDisplay || isImageLoaded || isFitStrategy && !isImageRotated;
       var style = {
         transform: 'translate(-50%, -50%)'
       };
@@ -422,5 +423,6 @@ var MediaImage = /*#__PURE__*/function (_Component) {
 exports.MediaImage = MediaImage;
 (0, _defineProperty2.default)(MediaImage, "defaultProps", {
   crop: true,
-  stretch: false
+  stretch: false,
+  forceSyncDisplay: false
 });

package/dist/cjs/version.json

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

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

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

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { gs, mq } from '../utils';
+export const blockCardContentClassName = 'block-card-content';
 export const Content = ({
   children,
   isCompact = false
@@ -12,5 +13,6 @@ export const Content = ({
     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/es2019/BlockCard/components/ContentHeader.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
+export const blockCardContentHeaderClassName = 'block-card-content-header';
 export const ContentHeader = ({
   onClick,
   link,
@@ -15,5 +16,6 @@ export const ContentHeader = ({
     // 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/es2019/BlockCard/components/Icon.js

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

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

@@ -3,10 +3,12 @@ import { jsx } from '@emotion/core';
 import { B400 } from '@atlaskit/theme/colors';
 export const Link = ({
   url,
-  testId = 'block-card'
+  testId = 'block-card',
+  className
 }) => {
   return jsx("span", {
     "data-testid": `${testId}-link`,
+    className: className,
     css: {
       color: B400,
       wordBreak: 'break-all'

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

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core';
 import { fontSize } from '@atlaskit/theme/constants';
 import { gs } from '../utils';
+export const blockCardContentHeaderNameClassName = 'block-card-content-header-name';
 export const Name = ({
   name,
   isLeftPadded = true,
@@ -25,5 +26,6 @@ export const Name = ({
     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/es2019/BlockCard/views/ErroredView.js

@@ -17,6 +17,7 @@ import { UnresolvedText } from '../components/UnresolvedText';
 import { RetryAction } from '../actions/RetryAction';
 const textDescriptionProps = { ...messages.could_not_load_link
 };
+export const blockCardErroredViewClassName = 'block-card-errored-view';
 export const ErroredView = ({
   isSelected = false,
   testId = 'block-card-errored-view',
@@ -31,6 +32,7 @@ export const ErroredView = ({
   return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
+    className: blockCardErroredViewClassName,
     isFluidHeight: true,
     inheritDimensions: inheritDimensions
   }, jsx(Content, {

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

@@ -17,6 +17,7 @@ import { handleClickCommon } from '../utils/handlers';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 export const blockCardForbiddenViewClassName = 'block-card-forbidden-view';
+export const blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
 export const ForbiddenView = ({
   context = {
     text: ''
@@ -48,7 +49,8 @@ export const ForbiddenView = ({
     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/es2019/BlockCard/views/NotFoundView.js

@@ -16,6 +16,7 @@ import { UnresolvedText } from '../components/UnresolvedText';
 import { handleClickCommon } from '../utils/handlers';
 const textDescriptionProps = { ...messages.not_found_description
 };
+export const blockCardNotFoundViewClassName = 'block-card-not-found-view';
 export const NotFoundView = ({
   context = {
     text: ''
@@ -30,6 +31,7 @@ export const NotFoundView = ({
   return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
+    className: blockCardNotFoundViewClassName,
     isFluidHeight: true
   }, jsx(Content, {
     isCompact: true

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

@@ -18,6 +18,7 @@ import { ContentFooter } from '../components/ContentFooter';
 import { gs } from '../utils';
 import { handleClickCommon } from '../utils/handlers';
 export const blockCardResolvedViewClassName = 'block-card-resolved-view';
+export const blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
 export const ResolvedView = ({
   icon = {},
   actions = [],
@@ -45,7 +46,8 @@ export const ResolvedView = ({
     items: details
   }) : undefined;
   const resolvedByline = jsx(Byline, {
-    testId: testId ? `${testId}-by` : undefined
+    testId: testId ? `${testId}-by` : undefined,
+    className: blockCardResolvedViewByClassName
   }, byline);
 
   const handleClick = event => handleClickCommon(event, onClick);

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

@@ -30,7 +30,7 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
     },
     allowFullScreen: true,
     scrolling: "yes",
-    allow: "autoplay; encrypted-media",
+    allow: "autoplay; encrypted-media; clipboard-write",
     onLoad: () => setIframeLoaded(true),
     sandbox: getIframeSandboxAttribute(isTrusted)
   });

package/dist/es2019/MediaInlineCard/Frame/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { B100, N30A, N40A, text } from '@atlaskit/theme/colors';
+import { B300, N30A, N40A, text } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
 const FONT_COLOR = text; // TODO: Dark mode background color to be added in the future.
@@ -7,9 +7,10 @@ const FONT_COLOR = text; // TODO: Dark mode background color to be added in the
 const BACKGROUND_COLOR_LIGHT = N30A;
 const selected = `
   cursor: pointer;
-  box-shadow: 0 0 0 2px ${B100};
+  box-shadow: 0 0 0 1px ${B300};
   outline: none;
   user-select: none;
+  border-color: transparent;
   &, :hover, :focus, :active {
     text-decoration: none;
   }

package/dist/es2019/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -96,4 +96,8 @@ export const IconEmptyWrapper = styled.span`
   display: inline-block;
   opacity: 0;
 `;
-export const TitleWrapper = styled.span``;
+export const TitleWrapper = styled.span`
+  ::selection {
+    background: none;
+  }
+`;

package/dist/es2019/classNames.js

@@ -2,6 +2,11 @@ export const hideControlsClassName = 'mvng-hide-controls';
 export { contentFooterClassName } from './BlockCard/components/ContentFooter';
 export { metadataListClassName } from './BlockCard/components/MetadataList';
 export { blockCardResolvingViewClassName } from './BlockCard/views/ResolvingView';
-export { blockCardResolvedViewClassName } from './BlockCard/views/ResolvedView';
-export { blockCardForbiddenViewClassName } from './BlockCard/views/ForbiddenView';
-export { blockCardIconImageClassName } from './BlockCard/components/Icon';
+export { blockCardResolvedViewClassName, blockCardResolvedViewByClassName } from './BlockCard/views/ResolvedView';
+export { blockCardForbiddenViewClassName, blockCardForbiddenViewLinkClassName } from './BlockCard/views/ForbiddenView';
+export { blockCardIconImageClassName } from './BlockCard/components/Icon';
+export { blockCardContentClassName } from './BlockCard/components/Content';
+export { blockCardContentHeaderClassName } from './BlockCard/components/ContentHeader';
+export { blockCardContentHeaderNameClassName } from './BlockCard/components/Name';
+export { blockCardNotFoundViewClassName } from './BlockCard/views/NotFoundView';
+export { blockCardErroredViewClassName } from './BlockCard/views/ErroredView';

package/dist/es2019/codeViewer.js

@@ -107,6 +107,7 @@ export function getLanguageType(name) {
       return 'haxe';
 
     case 'js':
+    case 'jsx':
       return 'javascript';
 
     case 'jl':
@@ -166,9 +167,11 @@ export function getLanguageType(name) {
     case 'msg':
     case 'log':
     case 'csv':
+    case 'md':
       return 'text';
 
     case 'ts':
+    case 'tsx':
       return 'typescript';
 
     case 'v':
@@ -180,6 +183,11 @@ export function getLanguageType(name) {
     case 'xqy':
       return 'xquery';
 
+    case 'lock':
+    case 'yaml':
+    case 'yml':
+      return 'yaml';
+
     default:
       return null;
   }

package/dist/es2019/mediaImage/index.js

@@ -65,7 +65,8 @@ export class MediaImage extends Component {
       crossOrigin,
       onImageError,
       alt = '',
-      loading
+      loading,
+      forceSyncDisplay
     } = this.props;
     const {
       parentWidth,
@@ -270,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%)'
     };
@@ -378,5 +379,6 @@ export class MediaImage extends Component {
 
 _defineProperty(MediaImage, "defaultProps", {
   crop: true,
-  stretch: false
+  stretch: false,
+  forceSyncDisplay: false
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "17.1.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/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/Frame/styled.js

@@ -3,13 +3,13 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import styled from 'styled-components';
-import { B100, N30A, N40A, text } from '@atlaskit/theme/colors';
+import { B300, N30A, N40A, text } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
 var FONT_COLOR = text; // TODO: Dark mode background color to be added in the future.
 
 var BACKGROUND_COLOR_LIGHT = N30A;
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(B100, ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat(B300, ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isSelected = function isSelected(_ref) {
   var isSelected = _ref.isSelected;

package/dist/esm/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -30,4 +30,4 @@ export var RightIconPositionWrapper = styled.span(_templateObject6 || (_template
 
 export var IconPositionWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
 export var IconEmptyWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
-export var TitleWrapper = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])));
+export var TitleWrapper = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ::selection {\n    background: none;\n  }\n"])));

package/dist/esm/classNames.js

@@ -2,6 +2,11 @@ export var hideControlsClassName = 'mvng-hide-controls';
 export { contentFooterClassName } from './BlockCard/components/ContentFooter';
 export { metadataListClassName } from './BlockCard/components/MetadataList';
 export { blockCardResolvingViewClassName } from './BlockCard/views/ResolvingView';
-export { blockCardResolvedViewClassName } from './BlockCard/views/ResolvedView';
-export { blockCardForbiddenViewClassName } from './BlockCard/views/ForbiddenView';
-export { blockCardIconImageClassName } from './BlockCard/components/Icon';
+export { blockCardResolvedViewClassName, blockCardResolvedViewByClassName } from './BlockCard/views/ResolvedView';
+export { blockCardForbiddenViewClassName, blockCardForbiddenViewLinkClassName } from './BlockCard/views/ForbiddenView';
+export { blockCardIconImageClassName } from './BlockCard/components/Icon';
+export { blockCardContentClassName } from './BlockCard/components/Content';
+export { blockCardContentHeaderClassName } from './BlockCard/components/ContentHeader';
+export { blockCardContentHeaderNameClassName } from './BlockCard/components/Name';
+export { blockCardNotFoundViewClassName } from './BlockCard/views/NotFoundView';
+export { blockCardErroredViewClassName } from './BlockCard/views/ErroredView';

package/dist/esm/codeViewer.js

@@ -107,6 +107,7 @@ export function getLanguageType(name) {
       return 'haxe';
 
     case 'js':
+    case 'jsx':
       return 'javascript';
 
     case 'jl':
@@ -166,9 +167,11 @@ export function getLanguageType(name) {
     case 'msg':
     case 'log':
     case 'csv':
+    case 'md':
       return 'text';
 
     case 'ts':
+    case 'tsx':
       return 'typescript';
 
     case 'v':
@@ -180,6 +183,11 @@ export function getLanguageType(name) {
     case 'xqy':
       return 'xquery';
 
+    case 'lock':
+    case 'yaml':
+    case 'yml':
+      return 'yaml';
+
     default:
       return null;
   }

package/dist/esm/mediaImage/index.js

@@ -88,7 +88,8 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
           onImageError = _this$props.onImageError,
           _this$props$alt = _this$props.alt,
           alt = _this$props$alt === void 0 ? '' : _this$props$alt,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          forceSyncDisplay = _this$props.forceSyncDisplay;
       var _this$state = this.state,
           parentWidth = _this$state.parentWidth,
           parentHeight = _this$state.parentHeight,
@@ -291,7 +292,7 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
         and we can do that only when image is loaded (and we have image size)
        */
 
-      var showImage = isImageLoaded || isFitStrategy && !isImageRotated;
+      var showImage = forceSyncDisplay || isImageLoaded || isFitStrategy && !isImageRotated;
       var style = {
         transform: 'translate(-50%, -50%)'
       };
@@ -401,5 +402,6 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
 
 _defineProperty(MediaImage, "defaultProps", {
   crop: true,
-  stretch: false
+  stretch: false,
+  forceSyncDisplay: false
 });

package/dist/esm/version.json

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

package/dist/types/BlockCard/components/Byline.d.ts

@@ -2,6 +2,7 @@
 export interface BylineProps {
     text?: React.ReactNode;
     testId?: string;
+    className?: string;
     children?: React.ReactNode;
 }
-export declare const Byline: ({ text, children, testId }: BylineProps) => JSX.Element;
+export declare const Byline: ({ text, children, testId, className }: BylineProps) => JSX.Element;

package/dist/types/BlockCard/components/Content.d.ts

@@ -3,4 +3,5 @@ export interface ContentProps {
     children: React.ReactNode;
     isCompact?: boolean;
 }
+export declare const blockCardContentClassName = "block-card-content";
 export declare const Content: ({ children, isCompact }: ContentProps) => JSX.Element;

package/dist/types/BlockCard/components/ContentHeader.d.ts

@@ -4,4 +4,5 @@ export interface ContentHeaderProps {
     link: string;
     children: React.ReactNode;
 }
+export declare const blockCardContentHeaderClassName = "block-card-content-header";
 export declare const ContentHeader: ({ onClick, link, children, }: ContentHeaderProps) => JSX.Element;

package/dist/types/BlockCard/components/Link.d.ts

@@ -1,5 +1,6 @@
 export interface LinkProps {
     url: string;
     testId?: string;
+    className?: string;
 }
-export declare const Link: ({ url, testId }: LinkProps) => JSX.Element;
+export declare const Link: ({ url, testId, className }: LinkProps) => JSX.Element;

package/dist/types/BlockCard/components/Name.d.ts

@@ -6,4 +6,5 @@ export interface NameProps {
     children?: React.ReactNode;
     textColor?: string;
 }
+export declare const blockCardContentHeaderNameClassName = "block-card-content-header-name";
 export declare const Name: ({ name, isLeftPadded, testId, textColor, }: NameProps) => JSX.Element;

package/dist/types/BlockCard/views/ErroredView.d.ts

@@ -8,4 +8,5 @@ export interface ErroredViewProps {
     testId?: string;
     inheritDimensions?: boolean;
 }
+export declare const blockCardErroredViewClassName = "block-card-errored-view";
 export declare const ErroredView: ({ isSelected, testId, link, onClick, onRetry, inheritDimensions, }: ErroredViewProps) => JSX.Element;

package/dist/types/BlockCard/views/ForbiddenView.d.ts

@@ -17,4 +17,5 @@ export interface PermissionDeniedProps {
     requestAccessContext?: RequestAccessContextProps;
 }
 export declare const blockCardForbiddenViewClassName = "block-card-forbidden-view";
+export declare const blockCardForbiddenViewLinkClassName = "block-card-forbidden-view-link";
 export declare const ForbiddenView: ({ context, isSelected, actions, testId, showActions, link, onClick, requestAccessContext, }: PermissionDeniedProps) => JSX.Element;

package/dist/types/BlockCard/views/NotFoundView.d.ts

@@ -11,4 +11,5 @@ export interface NotFoundProps {
     icon: IconProps;
     testId?: string;
 }
+export declare const blockCardNotFoundViewClassName = "block-card-not-found-view";
 export declare const NotFoundView: ({ context, isSelected, testId, link, onClick, }: NotFoundProps) => JSX.Element;

package/dist/types/BlockCard/views/ResolvedView.d.ts

@@ -28,4 +28,5 @@ export interface ResolvedViewProps {
     isTrusted?: boolean;
 }
 export declare const blockCardResolvedViewClassName = "block-card-resolved-view";
+export declare const blockCardResolvedViewByClassName = "block-card-resolved-view-by";
 export declare const ResolvedView: ({ icon, actions, thumbnail, context, title, titleTextColor, titlePrefix, isSelected, users, handleAvatarClick, handleMoreAvatarsClick, onClick, link, byline, lozenge, details, testId, showActions, }: ResolvedViewProps) => JSX.Element;

package/dist/types/classNames.d.ts

@@ -2,6 +2,11 @@ export declare const hideControlsClassName = "mvng-hide-controls";
 export { contentFooterClassName } from './BlockCard/components/ContentFooter';
 export { metadataListClassName } from './BlockCard/components/MetadataList';
 export { blockCardResolvingViewClassName } from './BlockCard/views/ResolvingView';
-export { blockCardResolvedViewClassName } from './BlockCard/views/ResolvedView';
-export { blockCardForbiddenViewClassName } from './BlockCard/views/ForbiddenView';
+export { blockCardResolvedViewClassName, blockCardResolvedViewByClassName, } from './BlockCard/views/ResolvedView';
+export { blockCardForbiddenViewClassName, blockCardForbiddenViewLinkClassName, } from './BlockCard/views/ForbiddenView';
 export { blockCardIconImageClassName } from './BlockCard/components/Icon';
+export { blockCardContentClassName } from './BlockCard/components/Content';
+export { blockCardContentHeaderClassName } from './BlockCard/components/ContentHeader';
+export { blockCardContentHeaderNameClassName } from './BlockCard/components/Name';
+export { blockCardNotFoundViewClassName } from './BlockCard/views/NotFoundView';
+export { blockCardErroredViewClassName } from './BlockCard/views/ErroredView';

package/dist/types/mediaImage/index.d.ts

@@ -10,6 +10,7 @@ export interface MediaImageProps {
     onImageLoad?: (loadedImage: HTMLImageElement) => void;
     onImageError?: () => void;
     loading?: 'auto' | 'lazy' | 'eager';
+    forceSyncDisplay?: boolean;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,15 +44,15 @@
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/avatar-group": "^8.5.0",
     "@atlaskit/button": "^16.1.0",
-    "@atlaskit/code": "^14.1.0",
+    "@atlaskit/code": "^14.3.0",
     "@atlaskit/droplist": "^11.0.0",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/locale": "^2.3.0",
     "@atlaskit/lozenge": "^11.1.0",
-    "@atlaskit/media-common": "^2.9.0",
-    "@atlaskit/modal-dialog": "^12.1.0",
+    "@atlaskit/media-common": "^2.10.0",
+    "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.0.0",
@@ -83,7 +83,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.5",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^28.8.0",
+    "@atlaskit/media-test-helpers": "^28.9.0",
     "@atlaskit/page": "^12.0.6",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.0.5",