@atlaskit/editor-common 77.3.2 → 77.4.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 77.4.1
+
+### Patch Changes
+
+- [#72081](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72081) [`4487160917d2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4487160917d2) - [ux] ED-22052: adds button type attribute to non atlaskit button instances
+
+## 77.4.0
+
+### Minor Changes
+
+- [#71201](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71201) [`1b48cdd3c074`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b48cdd3c074) - ED-21767 fixed dom structure for inline images.
+- [#69911](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69911) [`af0eee5ebf98`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af0eee5ebf98) - Added DropdownMenuItem export from ui-menu, added DropList export from ui
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 77.3.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -81,9 +81,21 @@
         {
             "path": "../../../media/media-client/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../media/media-client-react/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-common/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-file-preview/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../media/media-picker/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../media/media-ui/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../elements/mention/afm-cc/tsconfig.json"
         },

package/dist/cjs/analytics/types/enums.js

@@ -292,6 +292,7 @@ var ACTION_SUBJECT_ID = exports.ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTIO
   ACTION_SUBJECT_ID["MEDIA"] = "media";
   ACTION_SUBJECT_ID["MEDIA_GROUP"] = "mediaGroup";
   ACTION_SUBJECT_ID["MEDIA_INLINE"] = "mediaInline";
+  ACTION_SUBJECT_ID["MEDIA_INLINE_IMAGE"] = "mediaInlineImage";
   ACTION_SUBJECT_ID["MEDIA_LINK"] = "mediaLink";
   ACTION_SUBJECT_ID["MEDIA_SINGLE"] = "mediaSingle";
   ACTION_SUBJECT_ID["MENTION"] = "mention";

package/dist/cjs/media-inline/inline-image-card.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineImageCard = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _mediaCommon = require("@atlaskit/media-common");
+var _mediaFilePreview = require("@atlaskit/media-file-preview");
+var _mediaUi = require("@atlaskit/media-ui");
+var _loadingView = require("./views/loading-view");
+/** @jsx jsx */
+
+var InlineImageCard = exports.InlineImageCard = function InlineImageCard(_ref) {
+  var dimensions = _ref.dimensions,
+    identifier = _ref.identifier,
+    renderError = _ref.renderError,
+    alt = _ref.alt,
+    isLazy = _ref.isLazy,
+    ssr = _ref.ssr,
+    crop = _ref.crop,
+    stretch = _ref.stretch;
+  // Generate unique traceId for file
+  var traceContext = (0, _react.useMemo)(function () {
+    return {
+      traceId: (0, _mediaCommon.getRandomHex)(8)
+    };
+  }, []);
+
+  // TODO do we need to handle nonCriticalError
+  var _useFilePreview = (0, _mediaFilePreview.useFilePreview)({
+      identifier: identifier,
+      ssr: ssr,
+      dimensions: dimensions,
+      traceContext: traceContext
+    }),
+    preview = _useFilePreview.preview,
+    previewError = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    _onImageLoad = _useFilePreview.onImageLoad;
+  if (previewError) {
+    return renderError({
+      error: previewError
+    });
+  }
+  if (!preview) {
+    return (0, _react2.jsx)(_loadingView.InlineImageCardLoadingView, null);
+  }
+  return (0, _react2.jsx)(_mediaUi.MediaImage, {
+    dataURI: preview.dataURI,
+    alt: alt,
+    previewOrientation: preview.orientation,
+    onImageLoad: function onImageLoad() {
+      _onImageLoad(preview);
+    },
+    onImageError: onImageError,
+    loading: isLazy ? 'lazy' : undefined,
+    forceSyncDisplay: !!ssr,
+    crop: crop,
+    stretch: stretch
+  });
+};

package/dist/cjs/media-inline/inline-image-wrapper.js

@@ -12,6 +12,15 @@ var _editorPalette = require("@atlaskit/editor-palette");
 var _styles = require("./styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+// The MediaImage component needs to obtain its parent's dimensions.
+// To achieve this, we have added an additional wrapper that allows
+// for better interaction with the parent element. This is necessary
+//  because the parent size changes its box-sizing with the node border.
+var sizeWrapperStyle = (0, _react.css)({
+  display: 'inline-flex',
+  width: '100%',
+  height: '100%'
+});
 var InlineImageWrapper = exports.InlineImageWrapper = function InlineImageWrapper(_ref) {
   var _ref2;
   var children = _ref.children,
@@ -30,6 +39,8 @@ var InlineImageWrapper = exports.InlineImageWrapper = function InlineImageWrappe
       className: _styles.INLINE_IMAGE_WRAPPER_CLASS_NAME,
       css: [_styles.wrapperStyle, borderSize && borderColor && _styles.borderStyle, isSelected && _styles.selectedStyle],
       "data-testid": "inline-image-wrapper"
-    }, htmlAttrs), children)
+    }, htmlAttrs), (0, _react.jsx)("span", {
+      css: sizeWrapperStyle
+    }, children))
   );
 };

package/dist/cjs/media-inline/media-inline-image-card.js

@@ -10,9 +10,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _mediaCard = require("@atlaskit/media-card");
+var _mediaClient = require("@atlaskit/media-client");
+var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaInlineCard = require("../messages/media-inline-card");
 var _constants = require("./constants");
+var _inlineImageCard = require("./inline-image-card");
 var _inlineImageWrapper = require("./inline-image-wrapper");
 var _errorView = require("./views/error-view");
 var _loadingView = require("./views/loading-view");
@@ -38,10 +42,34 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     subscribeError = _useState4[0],
     setSubscribeError = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isFailedEventSent = _useState6[0],
+    setIsFailedEventSent = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isSucceededEventSent = _useState8[0],
+    setIsSucceededEventSent = _useState8[1];
   var _ref2 = intl || (0, _reactIntlNext.createIntl)({
       locale: 'en'
     }),
     formatMessage = _ref2.formatMessage;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var fireFailedOperationalEvent = function fireFailedOperationalEvent() {
+    var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _mediaCard.MediaCardError('missing-error-data');
+    var failReason = arguments.length > 1 ? arguments[1] : undefined;
+    if (!isFailedEventSent && fileState) {
+      setIsFailedEventSent(true);
+      (0, _mediaCard.fireFailedMediaInlineEvent)(fileState, error, failReason, createAnalyticsEvent);
+    }
+  };
+  var fireSucceededOperationalEvent = function fireSucceededOperationalEvent() {
+    if (!isSucceededEventSent && fileState) {
+      setIsSucceededEventSent(true);
+      (0, _mediaCard.fireSucceededMediaInlineEvent)(fileState, createAnalyticsEvent);
+    }
+  };
   (0, _react.useEffect)(function () {
     if (mediaClient) {
       var subscription = mediaClient.file.getFileState(identifier.id, {
@@ -64,41 +92,52 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
     if (subscribeError) {
       var isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
       var errorMessage = isUploading ? _mediaInlineCard.messages.failedToUpload : _mediaInlineCard.messages.unableToLoadContent;
+      var errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
+      fireFailedOperationalEvent(new _mediaCard.MediaCardError(errorReason, subscribeError));
       return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {
         message: formatMessage(errorMessage)
       });
     }
-    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+    if (!fileState || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
+      return (0, _react2.jsx)(_loadingView.InlineImageCardLoadingView, null);
+    }
+    if (fileState.status === 'error') {
+      var error = new _mediaCard.MediaCardError('error-file-state', new Error(fileState.message));
+      !isFailedEventSent && fireFailedOperationalEvent(error);
       return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {
         message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
       });
-    }
-    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+    } else if (fileState.status === 'failed-processing') {
+      !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
       return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {
         message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
       });
-    }
-    // Empty file handling
-    if (fileState && !fileState.name) {
+    } else if (!fileState.name) {
+      var _error = new _mediaCard.MediaCardError('metadata-fetch', new _mediaClient.FileFetcherError('emptyFileName', fileState.id));
+      !isFailedEventSent && fireFailedOperationalEvent(_error);
       return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {
         message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
       });
     }
-    var mediaClientConfig = (ssr === null || ssr === void 0 ? void 0 : ssr.config) || (mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig);
-    if (!fileState) {
-      return (0, _react2.jsx)(_loadingView.InlineImageCardLoadingView, null);
+    if (fileState.status === 'processed') {
+      fireSucceededOperationalEvent();
     }
-    return (0, _react2.jsx)(_mediaCard.Card, {
-      mediaClientConfig: mediaClientConfig,
-      isLazy: isLazy,
-      identifier: identifier,
+    return (0, _react2.jsx)(_mediaClientReact.MediaClientContext.Provider, {
+      value: mediaClient
+    }, (0, _react2.jsx)(_inlineImageCard.InlineImageCard, {
       dimensions: dimensions,
-      selectable: true,
-      disableOverlay: true,
-      selected: isSelected,
+      identifier: identifier,
+      renderError: function renderError() {
+        return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {
+          message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
+        });
+      },
       alt: alt,
-      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
-    });
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+      isLazy: isLazy,
+      crop: true,
+      stretch: false
+    }));
   };
   var aspectRatio = (0, _react.useMemo)(function () {
     return width && height ? width / height : undefined;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "77.3.2";
+var packageVersion = "77.4.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 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; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "77.3.2";
+var packageVersion = "77.4.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "ContextPanelWidthProvider", {
     return _context.ContextPanelWidthProvider;
   }
 });
+Object.defineProperty(exports, "DropList", {
+  enumerable: true,
+  get: function get() {
+    return _DropList.default;
+  }
+});
 Object.defineProperty(exports, "EDIT_AREA_ID", {
   enumerable: true,
   get: function get() {
@@ -408,5 +414,6 @@ var _styles = require("./PanelTextInput/styles");
 var _PanelTextInput = _interopRequireDefault(require("./PanelTextInput"));
 var _announcer = _interopRequireDefault(require("./Announcer/announcer"));
 var _Toolbar = require("./Toolbar");
+var _DropList = _interopRequireDefault(require("./DropList"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/ui-color/ColorPalette/Color/index.js

@@ -65,6 +65,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
       }, (0, _react2.jsx)("span", {
         css: _styles.buttonWrapperStyle
       }, (0, _react2.jsx)("button", {
+        type: "button",
         css: _styles.buttonStyle,
         "aria-label": label,
         role: "radio",

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -5,6 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DropdownMenuItem = DropdownMenuItem;
 exports.default = exports.DropdownMenuWithKeyboardNavigation = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -334,6 +335,7 @@ function DropdownMenuItem(_ref) {
 var DropdownMenuWithKeyboardNavigation = exports.DropdownMenuWithKeyboardNavigation = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref2), _ref2));
   var keyDownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
+
   // This context is to handle the tab, Arrow Right/Left key events for dropdown.
   // Default context has the void callbacks for above key events
   return (0, _react2.jsx)(DropdownMenuWrapper, (0, _extends2.default)({

package/dist/cjs/ui-menu/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "DropdownMenu", {
     return _DropdownMenu.default;
   }
 });
+Object.defineProperty(exports, "DropdownMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownMenu.DropdownMenuItem;
+  }
+});
 Object.defineProperty(exports, "DropdownMenuWithKeyboardNavigation", {
   enumerable: true,
   get: function get() {

package/dist/es2019/analytics/types/enums.js

@@ -286,6 +286,7 @@ export let ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["MEDIA"] = "media";
   ACTION_SUBJECT_ID["MEDIA_GROUP"] = "mediaGroup";
   ACTION_SUBJECT_ID["MEDIA_INLINE"] = "mediaInline";
+  ACTION_SUBJECT_ID["MEDIA_INLINE_IMAGE"] = "mediaInlineImage";
   ACTION_SUBJECT_ID["MEDIA_LINK"] = "mediaLink";
   ACTION_SUBJECT_ID["MEDIA_SINGLE"] = "mediaSingle";
   ACTION_SUBJECT_ID["MENTION"] = "mention";

package/dist/es2019/media-inline/inline-image-card.js

@@ -0,0 +1,56 @@
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { getRandomHex } from '@atlaskit/media-common';
+import { useFilePreview } from '@atlaskit/media-file-preview';
+import { MediaImage } from '@atlaskit/media-ui';
+import { InlineImageCardLoadingView } from './views/loading-view';
+export const InlineImageCard = ({
+  dimensions,
+  identifier,
+  renderError,
+  alt,
+  isLazy,
+  ssr,
+  crop,
+  stretch
+}) => {
+  // Generate unique traceId for file
+  const traceContext = useMemo(() => ({
+    traceId: getRandomHex(8)
+  }), []);
+
+  // TODO do we need to handle nonCriticalError
+  const {
+    preview,
+    error: previewError,
+    onImageError,
+    onImageLoad
+  } = useFilePreview({
+    identifier,
+    ssr,
+    dimensions,
+    traceContext
+  });
+  if (previewError) {
+    return renderError({
+      error: previewError
+    });
+  }
+  if (!preview) {
+    return jsx(InlineImageCardLoadingView, null);
+  }
+  return jsx(MediaImage, {
+    dataURI: preview.dataURI,
+    alt: alt,
+    previewOrientation: preview.orientation,
+    onImageLoad: () => {
+      onImageLoad(preview);
+    },
+    onImageError: onImageError,
+    loading: isLazy ? 'lazy' : undefined,
+    forceSyncDisplay: !!ssr,
+    crop: crop,
+    stretch: stretch
+  });
+};

package/dist/es2019/media-inline/inline-image-wrapper.js

@@ -1,9 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, selectedStyle, wrapperStyle } from './styles';
+
+// The MediaImage component needs to obtain its parent's dimensions.
+// To achieve this, we have added an additional wrapper that allows
+// for better interaction with the parent element. This is necessary
+//  because the parent size changes its box-sizing with the node border.
+const sizeWrapperStyle = css({
+  display: 'inline-flex',
+  width: '100%',
+  height: '100%'
+});
 export const InlineImageWrapper = ({
   children,
   isSelected,
@@ -29,6 +39,8 @@ export const InlineImageWrapper = ({
       className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
       css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle],
       "data-testid": "inline-image-wrapper"
-    }, htmlAttrs), children)
+    }, htmlAttrs), jsx("span", {
+      css: sizeWrapperStyle
+    }, children))
   );
 };

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -3,9 +3,13 @@
 import { useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { createIntl, injectIntl } from 'react-intl-next';
-import { Card } from '@atlaskit/media-card';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
+import { FileFetcherError } from '@atlaskit/media-client';
+import { MediaClientContext } from '@atlaskit/media-client-react';
 import { messages } from '../messages/media-inline-card';
 import { referenceHeights } from './constants';
+import { InlineImageCard } from './inline-image-card';
 import { InlineImageWrapper } from './inline-image-wrapper';
 import { InlineImageCardErrorView } from './views/error-view';
 import { InlineImageCardLoadingView } from './views/loading-view';
@@ -24,11 +28,28 @@ export const MediaInlineImageCardInternal = ({
 }) => {
   const [fileState, setFileState] = useState();
   const [subscribeError, setSubscribeError] = useState();
+  const [isFailedEventSent, setIsFailedEventSent] = useState(false);
+  const [isSucceededEventSent, setIsSucceededEventSent] = useState(false);
   const {
     formatMessage
   } = intl || createIntl({
     locale: 'en'
   });
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const fireFailedOperationalEvent = (error = new MediaCardError('missing-error-data'), failReason) => {
+    if (!isFailedEventSent && fileState) {
+      setIsFailedEventSent(true);
+      fireFailedMediaInlineEvent(fileState, error, failReason, createAnalyticsEvent);
+    }
+  };
+  const fireSucceededOperationalEvent = () => {
+    if (!isSucceededEventSent && fileState) {
+      setIsSucceededEventSent(true);
+      fireSucceededMediaInlineEvent(fileState, createAnalyticsEvent);
+    }
+  };
   useEffect(() => {
     if (mediaClient) {
       const subscription = mediaClient.file.getFileState(identifier.id, {
@@ -51,41 +72,50 @@ export const MediaInlineImageCardInternal = ({
     if (subscribeError) {
       const isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
       const errorMessage = isUploading ? messages.failedToUpload : messages.unableToLoadContent;
+      const errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
+      fireFailedOperationalEvent(new MediaCardError(errorReason, subscribeError));
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(errorMessage)
       });
     }
-    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+    if (!fileState || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
+      return jsx(InlineImageCardLoadingView, null);
+    }
+    if (fileState.status === 'error') {
+      const error = new MediaCardError('error-file-state', new Error(fileState.message));
+      !isFailedEventSent && fireFailedOperationalEvent(error);
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
-    }
-    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+    } else if (fileState.status === 'failed-processing') {
+      !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
-    }
-    // Empty file handling
-    if (fileState && !fileState.name) {
+    } else if (!fileState.name) {
+      const error = new MediaCardError('metadata-fetch', new FileFetcherError('emptyFileName', fileState.id));
+      !isFailedEventSent && fireFailedOperationalEvent(error);
       return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
     }
-    const mediaClientConfig = (ssr === null || ssr === void 0 ? void 0 : ssr.config) || (mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig);
-    if (!fileState) {
-      return jsx(InlineImageCardLoadingView, null);
+    if (fileState.status === 'processed') {
+      fireSucceededOperationalEvent();
     }
-    return jsx(Card, {
-      mediaClientConfig: mediaClientConfig,
-      isLazy: isLazy,
-      identifier: identifier,
+    return jsx(MediaClientContext.Provider, {
+      value: mediaClient
+    }, jsx(InlineImageCard, {
       dimensions: dimensions,
-      selectable: true,
-      disableOverlay: true,
-      selected: isSelected,
+      identifier: identifier,
+      renderError: () => jsx(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      }),
       alt: alt,
-      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
-    });
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+      isLazy: isLazy,
+      crop: true,
+      stretch: false
+    }));
   };
   const aspectRatio = useMemo(() => width && height ? width / height : undefined, [width, height]);
 

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "77.3.2";
+const packageVersion = "77.4.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "77.3.2";
+const packageVersion = "77.4.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/index.js

@@ -28,4 +28,5 @@ export { wrapperStyle } from './ResizerLegacy/styled';
 export { panelTextInput } from './PanelTextInput/styles';
 export { default as PanelTextInput } from './PanelTextInput';
 export { default as Announcer } from './Announcer/announcer';
-export { EDIT_AREA_ID } from './Toolbar';
+export { EDIT_AREA_ID } from './Toolbar';
+export { default as DropList } from './DropList';

package/dist/es2019/ui-color/ColorPalette/Color/index.js

@@ -46,6 +46,7 @@ class Color extends PureComponent {
     }, jsx("span", {
       css: buttonWrapperStyle
     }, jsx("button", {
+      type: "button",
       css: buttonStyle,
       "aria-label": label,
       role: "radio",

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -264,7 +264,7 @@ const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, re
     }
   }), children);
 });
-function DropdownMenuItem({
+export function DropdownMenuItem({
   item,
   onItemActivated,
   shouldUseDefaultRole,
@@ -328,6 +328,7 @@ export const DropdownMenuWithKeyboardNavigation = /*#__PURE__*/React.memo(({
   ...props
 }) => {
   const keyDownHandlerContext = useContext(KeyDownHandlerContext);
+
   // This context is to handle the tab, Arrow Right/Left key events for dropdown.
   // Default context has the void callbacks for above key events
   return jsx(DropdownMenuWrapper, _extends({

package/dist/es2019/ui-menu/index.js

@@ -1,4 +1,4 @@
-export { default as DropdownMenu, DropdownMenuWithKeyboardNavigation } from './DropdownMenu';
+export { default as DropdownMenu, DropdownMenuItem, DropdownMenuWithKeyboardNavigation } from './DropdownMenu';
 export { default as ToolbarButton, TOOLBAR_BUTTON } from './ToolbarButton';
 export { ArrowKeyNavigationProvider } from './ArrowKeyNavigationProvider';
 export { ToolbarArrowKeyNavigationProvider, KeyDownHandlerContext } from './ToolbarArrowKeyNavigationProvider';

package/dist/esm/analytics/types/enums.js

@@ -286,6 +286,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["MEDIA"] = "media";
   ACTION_SUBJECT_ID["MEDIA_GROUP"] = "mediaGroup";
   ACTION_SUBJECT_ID["MEDIA_INLINE"] = "mediaInline";
+  ACTION_SUBJECT_ID["MEDIA_INLINE_IMAGE"] = "mediaInlineImage";
   ACTION_SUBJECT_ID["MEDIA_LINK"] = "mediaLink";
   ACTION_SUBJECT_ID["MEDIA_SINGLE"] = "mediaSingle";
   ACTION_SUBJECT_ID["MENTION"] = "mention";