@atlaskit/media-ui 22.2.3 → 22.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-ui
 
+## 22.3.0
+
+### Minor Changes
+
+- [`1687a9fddf0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1687a9fddf0) - Updated previewOrientation prop to allow "from-image" orientation
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.2.4
+
+### Patch Changes
+
+- [`a8eeb045e3a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a8eeb045e3a) - adding media only callouts to docs
+- Updated dependencies
+
 ## 22.2.3
 
 ### Patch Changes

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

@@ -21,8 +21,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
@@ -83,7 +81,7 @@ var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
           label: "error",
           size: "small",
-          primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300)
+          primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
         })),
         title: this.renderMessage()
       }));

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

@@ -9,8 +9,6 @@ exports.Wrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@atlaskit/theme/colors");
@@ -19,9 +17,9 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _templateObject;
 
-var FONT_COLOR = (0, _tokens.token)('color.text', _colors.N900);
-var BACKGROUND_COLOR = (0, _tokens.token)('color.background.neutral', _colors.N30A);
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat((0, _tokens.token)('color.border.selected', _colors.B300), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var FONT_COLOR = "var(--ds-text, ".concat(_colors.N900, ")");
+var BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(_colors.N30A, ")");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".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;
@@ -48,6 +46,6 @@ var isSelected = function isSelected(_ref) {
 
 var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), FONT_COLOR, BACKGROUND_COLOR, function (props) {
   return isSelected(props);
-}, (0, _tokens.token)('color.background.neutral.hovered', _colors.N40A));
+}, "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")"));
 
 exports.Wrapper = Wrapper;

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

@@ -27,8 +27,6 @@ var _styled = require("./styled");
 
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 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); }; }
@@ -124,7 +122,7 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
         style: {
-          color: titleColor || (0, _tokens.token)('color.text', _colors.N900)
+          color: titleColor || "var(--ds-text, ".concat(_colors.N900, ")")
         }
       }, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, null, title)));
     }

package/dist/cjs/MediaInlineCard/styled.js

@@ -9,14 +9,12 @@ exports.NoLinkAppearance = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var NoLinkAppearance = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+var NoLinkAppearance = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 
 exports.NoLinkAppearance = NoLinkAppearance;

package/dist/cjs/customMediaPlayer/index.js

@@ -96,7 +96,7 @@ 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; } }
 
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "22.2.3";
+var packageVersion = "22.3.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/cjs/mediaImage/index.js

@@ -104,7 +104,8 @@ var MediaImage = /*#__PURE__*/function (_Component) {
           crop = _this$props.crop,
           stretch = _this$props.stretch,
           dataURI = _this$props.dataURI,
-          previewOrientation = _this$props.previewOrientation,
+          _this$props$previewOr = _this$props.previewOrientation,
+          previewOrientation = _this$props$previewOr === void 0 ? 1 : _this$props$previewOr,
           crossOrigin = _this$props.crossOrigin,
           onImageError = _this$props.onImageError,
           _this$props$alt = _this$props.alt,
@@ -145,7 +146,7 @@ var MediaImage = /*#__PURE__*/function (_Component) {
        */
 
       var isFitStrategy = !crop;
-      var isImageRotated = (0, _imageMetaData.isRotated)(previewOrientation || 1);
+      var isImageRotated = previewOrientation !== 'from-image' && (0, _imageMetaData.isRotated)(previewOrientation);
       /*
         When photo has orientation of 90deg or 270deg (stored in EXIF meta data)
         things get very tricky. Let me go through an two examples to explain how we deal with that:
@@ -398,7 +399,9 @@ var MediaImage = /*#__PURE__*/function (_Component) {
         style.display = 'none';
       }
 
-      if (previewOrientation && previewOrientation > 1) {
+      if (previewOrientation === 'from-image') {
+        style.imageOrientation = 'from-image';
+      } else if (previewOrientation > 1) {
         var transform = (0, _imageMetaData.getCssFromImageOrientation)(previewOrientation);
         style.transform += " ".concat(transform);
       }

package/dist/cjs/version.json

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

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
@@ -35,7 +34,7 @@ export class MediaInlineCardErroredView extends React.Component {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
         label: "error",
         size: "small",
-        primaryColor: token('color.icon.danger', R300)
+        primaryColor: `var(--ds-icon-danger, ${R300})`
       })),
       title: this.renderMessage()
     }));

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

@@ -1,12 +1,11 @@
-import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-const FONT_COLOR = token('color.text', N900);
-const BACKGROUND_COLOR = token('color.background.neutral', N30A);
+const FONT_COLOR = `var(--ds-text, ${N900})`;
+const BACKGROUND_COLOR = `var(--ds-background-neutral, ${N30A})`;
 const selected = `
   cursor: pointer;
-  box-shadow: 0 0 0 1px ${token('color.border.selected', B300)};
+  box-shadow: 0 0 0 1px ${`var(--ds-border-selected, ${B300})`};
   outline: none;
   user-select: none;
   border-color: transparent;
@@ -52,6 +51,6 @@ export const Wrapper = styled.span`
   cursor: pointer;
 
   &:hover {
-    background-color: ${token('color.background.neutral.hovered', N40A)};
+    background-color: ${`var(--ds-background-neutral-hovered, ${N40A})`};
   }
 `;

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

@@ -3,7 +3,6 @@ import ImageLoader from 'react-render-image';
 import { Icon } from '../Icon';
 import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { token } from '@atlaskit/tokens';
 import { N900 } from '@atlaskit/theme/colors';
 export class IconAndTitleLayout extends React.Component {
   renderAtlaskitIcon() {
@@ -84,7 +83,7 @@ export class IconAndTitleLayout extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
       style: {
-        color: titleColor || token('color.text', N900)
+        color: titleColor || `var(--ds-text, ${N900})`
       }
     }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
   }

package/dist/es2019/MediaInlineCard/styled.js

@@ -1,6 +1,5 @@
-import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { N200 } from '@atlaskit/theme/colors';
 export const NoLinkAppearance = styled.span`
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
 `;

package/dist/es2019/customMediaPlayer/index.js

@@ -35,7 +35,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "22.2.3";
+const packageVersion = "22.3.0";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/es2019/mediaImage/index.js

@@ -61,7 +61,7 @@ export class MediaImage extends Component {
       crop,
       stretch,
       dataURI,
-      previewOrientation,
+      previewOrientation = 1,
       crossOrigin,
       onImageError,
       alt = '',
@@ -103,7 +103,7 @@ export class MediaImage extends Component {
      */
 
     const isFitStrategy = !crop;
-    const isImageRotated = isRotated(previewOrientation || 1);
+    const isImageRotated = previewOrientation !== 'from-image' && isRotated(previewOrientation);
     /*
       When photo has orientation of 90deg or 270deg (stored in EXIF meta data)
       things get very tricky. Let me go through an two examples to explain how we deal with that:
@@ -356,7 +356,9 @@ export class MediaImage extends Component {
       style.display = 'none';
     }
 
-    if (previewOrientation && previewOrientation > 1) {
+    if (previewOrientation === 'from-image') {
+      style.imageOrientation = 'from-image';
+    } else if (previewOrientation > 1) {
       const transform = getCssFromImageOrientation(previewOrientation);
       style.transform += ` ${transform}`;
     }

package/dist/es2019/version.json

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

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

@@ -10,7 +10,6 @@ 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; } }
 
-import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
@@ -60,7 +59,7 @@ export var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component)
         icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
           label: "error",
           size: "small",
-          primaryColor: token('color.icon.danger', R300)
+          primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
         })),
         title: this.renderMessage()
       }));

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

@@ -2,13 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-var FONT_COLOR = token('color.text', N900);
-var BACKGROUND_COLOR = token('color.background.neutral', N30A);
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat(token('color.border.selected', B300), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var FONT_COLOR = "var(--ds-text, ".concat(N900, ")");
+var BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(N30A, ")");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".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;
@@ -35,4 +34,4 @@ var isSelected = function isSelected(_ref) {
 
 export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), akBorderRadius(), FONT_COLOR, BACKGROUND_COLOR, function (props) {
   return isSelected(props);
-}, token('color.background.neutral.hovered', N40A));
+}, "var(--ds-background-neutral-hovered, ".concat(N40A, ")"));

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

@@ -13,7 +13,6 @@ import ImageLoader from 'react-render-image';
 import { Icon } from '../Icon';
 import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { token } from '@atlaskit/tokens';
 import { N900 } from '@atlaskit/theme/colors';
 export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   _inherits(IconAndTitleLayout, _React$Component);
@@ -105,7 +104,7 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
         style: {
-          color: titleColor || token('color.text', N900)
+          color: titleColor || "var(--ds-text, ".concat(N900, ")")
         }
       }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
     }

package/dist/esm/MediaInlineCard/styled.js

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { N200 } from '@atlaskit/theme/colors';
-export var NoLinkAppearance = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.subtlest', N200));
+export var NoLinkAppearance = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));

package/dist/esm/customMediaPlayer/index.js

@@ -49,7 +49,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "22.2.3";
+var packageVersion = "22.3.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/esm/mediaImage/index.js

@@ -83,7 +83,8 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
           crop = _this$props.crop,
           stretch = _this$props.stretch,
           dataURI = _this$props.dataURI,
-          previewOrientation = _this$props.previewOrientation,
+          _this$props$previewOr = _this$props.previewOrientation,
+          previewOrientation = _this$props$previewOr === void 0 ? 1 : _this$props$previewOr,
           crossOrigin = _this$props.crossOrigin,
           onImageError = _this$props.onImageError,
           _this$props$alt = _this$props.alt,
@@ -124,7 +125,7 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
        */
 
       var isFitStrategy = !crop;
-      var isImageRotated = isRotated(previewOrientation || 1);
+      var isImageRotated = previewOrientation !== 'from-image' && isRotated(previewOrientation);
       /*
         When photo has orientation of 90deg or 270deg (stored in EXIF meta data)
         things get very tricky. Let me go through an two examples to explain how we deal with that:
@@ -377,7 +378,9 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
         style.display = 'none';
       }
 
-      if (previewOrientation && previewOrientation > 1) {
+      if (previewOrientation === 'from-image') {
+        style.imageOrientation = 'from-image';
+      } else if (previewOrientation > 1) {
         var transform = getCssFromImageOrientation(previewOrientation);
         style.transform += " ".concat(transform);
       }

package/dist/esm/version.json

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

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

@@ -5,7 +5,7 @@ export interface MediaImageProps {
     alt?: string;
     crop?: boolean;
     stretch?: boolean;
-    previewOrientation?: number;
+    previewOrientation?: number | 'from-image';
     crossOrigin?: '' | 'anonymous' | 'use-credentials';
     onImageLoad?: (loadedImage: HTMLImageElement) => void;
     onImageError?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "22.2.3",
+  "version": "22.3.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,8 +45,8 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/locale": "^2.3.0",
-    "@atlaskit/media-common": "^2.17.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/media-common": "^2.19.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.13.0",
@@ -68,12 +68,12 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.3.0",
+    "@atlaskit/analytics-listeners": "^8.5.0",
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/lozenge": "^11.3.0",
-    "@atlaskit/media-test-helpers": "^30.0.0",
+    "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/page": "^12.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/media-ui"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -449,7 +450,7 @@ export interface MediaImageProps {
   // (undocumented)
   onImageLoad?: (loadedImage: HTMLImageElement) => void;
   // (undocumented)
-  previewOrientation?: number;
+  previewOrientation?: 'from-image' | number;
   // (undocumented)
   stretch?: boolean;
 }
@@ -884,3 +885,17 @@ export interface WithShowControlMethodProp {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0",
+  "react-intl-next": "npm:react-intl@^5.18.1"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->