@atlaskit/editor-common 78.29.3 → 78.30.1

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

@@ -11,23 +11,23 @@ import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-const blockNodeStyle = css`
-  background: ${`var(--ds-background-disabled, ${N30})`};
-  border: 1px dashed ${`var(--ds-border-disabled, ${N50})`};
-  border-radius: ${borderRadius()}px;
-  box-sizing: border-box;
-  cursor: default;
-  display: flex;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  margin: ${"var(--ds-space-100, 8px)"} 0;
-  min-height: 24px;
-  padding: ${"var(--ds-space-150, 12px)"};
-  text-align: center;
-  vertical-align: text-bottom;
-  min-width: 120px;
-  align-items: center;
-  justify-content: center;
-`;
+const blockNodeStyle = css({
+  background: `var(--ds-background-disabled, ${N30})`,
+  border: `1px dashed ${`var(--ds-border-disabled, ${N50})`}`,
+  borderRadius: `${borderRadius()}px`,
+  boxSizing: 'border-box',
+  cursor: 'default',
+  display: 'flex',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  margin: `${"var(--ds-space-100, 8px)"} 0`,
+  minHeight: '24px',
+  padding: "var(--ds-space-150, 12px)",
+  textAlign: 'center',
+  verticalAlign: 'text-bottom',
+  minWidth: '120px',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 const UnsupportedBlockNode = ({
   node,
   intl,

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

@@ -3,6 +3,10 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
+const styles = css({
+  position: 'relative',
+  width: '100%'
+});
 const SCROLLBAR_WIDTH = 30;
 export function getBreakpoint(width = 0) {
   const MAX_S = 1266;
@@ -42,10 +46,7 @@ export const WidthProvider = ({
   });
   const skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
   return jsx("div", {
-    css: css`
-        position: relative;
-        width: 100%;
-      `,
+    css: styles,
     className: className
   }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
     setWidth: updateWidth,

package/dist/es2019/ui-color/ColorPalette/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-export const colorPaletteWrapper = css`
-  padding: 0 ${"var(--ds-space-100, 8px)"};
+export const colorPaletteWrapper = css({
+  padding: `0 ${"var(--ds-space-100, 8px)"}`,
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
-  display: flex;
-`;
+  display: 'flex'
+});

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

@@ -16,21 +16,22 @@ import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
-const wrapper = css`
+const wrapper = css({
   /* tooltip in ToolbarButton is display:block */
-  & > div > div {
-    display: flex;
+  '& > div > div': {
+    display: 'flex'
   }
-`;
-const focusedMenuItemStyle = css`
-  box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
-  outline: none;
-`;
+});
+const focusedMenuItemStyle = css({
+  boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
+  outline: 'none'
+});
 const buttonStyles = (isActive, submenuActive) => {
   if (isActive) {
     /**
      * Hack for item to imitate old dropdown-menu selected styles
      */
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
       > span,
       > span:hover,
@@ -47,6 +48,7 @@ const buttonStyles = (isActive, submenuActive) => {
       }
     `;
   } else {
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
       > span:hover[aria-disabled='false'] {
         color: ${`var(--ds-text, ${N900})`};

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

@@ -15,11 +15,11 @@ export const KeyDownHandlerContext = /*#__PURE__*/React.createContext({
   handleArrowRight: () => {},
   handleTab: () => {}
 });
-const centeredToolbarContainer = css`
-  display: flex;
-  width: 100%;
-  align-items: center;
-`;
+const centeredToolbarContainer = css({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center'
+});
 
 /**
  * This component is a wrapper of main toolbar which listens to keydown events of children

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

@@ -9,10 +9,10 @@ import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
 import Button from './styles';
 export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-const buttonWrapper = css`
-  display: flex;
-  height: 100%;
-`;
+const buttonWrapper = css({
+  display: 'flex',
+  height: '100%'
+});
 const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     buttonId,

package/dist/esm/analytics/fire-analytics-event.js

@@ -9,21 +9,10 @@ export var fireAnalyticsEvent = function fireAnalyticsEvent(createAnalyticsEvent
     if (!createAnalyticsEvent) {
       return;
     }
-
-    // START TEMPORARY CODE ED-10584
-    // __queueAnalytics property set in ReactEditorView based on featureFlags.queueAnalytics
-    var queueAnalytics = Boolean(createAnalyticsEvent.__queueAnalytics);
-    // END TEMPORARY CODE ED-10584
-
-    if (queueAnalytics) {
-      var queue = AnalyticsQueue.get();
-      queue.schedule(function () {
-        var _createAnalyticsEvent;
-        return (_createAnalyticsEvent = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent === void 0 ? void 0 : _createAnalyticsEvent.fire(channel);
-      });
-    } else {
-      var _createAnalyticsEvent2;
-      (_createAnalyticsEvent2 = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent2 === void 0 || _createAnalyticsEvent2.fire(channel);
-    }
+    var queue = AnalyticsQueue.get();
+    queue.schedule(function () {
+      var _createAnalyticsEvent;
+      return (_createAnalyticsEvent = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent === void 0 ? void 0 : _createAnalyticsEvent.fire(channel);
+    });
   };
 };

package/dist/esm/card/LinkToolbarButtonGroup.js

@@ -1,7 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -11,8 +9,12 @@ import { FloatingToolbarButton as Button } from '../ui';
 /**
  * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
  */
-var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  pointer-events: auto;\n"])));
-var buttonStyleNoneEvent = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+var buttonStyle = css({
+  pointerEvents: 'auto'
+});
+var buttonStyleNoneEvent = css({
+  pointerEvents: 'none'
+});
 var DisallowedWrapper = function DisallowedWrapper(_ref) {
   var disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -23,8 +25,12 @@ var DisallowedWrapper = function DisallowedWrapper(_ref) {
  * The button requires `pointer-events: none;` in order to fix the tooltip, hence
  * leaving us without a disabled cursor, the following fixes this:
  */
-var defaultWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: pointer;\n"])));
-var disallowedWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n"])));
+var defaultWrapperStyle = css({
+  cursor: 'pointer'
+});
+var disallowedWrapperStyle = css({
+  cursor: 'not-allowed'
+});
 export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
   var options = _ref2.options;
   return jsx(ButtonGroup, null, options.map(function (_ref3) {

package/dist/esm/element-browser/ViewMore.js

@@ -1,10 +1,16 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ButtonItem, Section } from '@atlaskit/menu';
-var itemBefore = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+var itemBefore = css({
+  width: '40px',
+  height: '40px',
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginRight: "var(--ds-space-050, 4px)"
+});
 export var ViewMore = function ViewMore(_ref) {
   var item = _ref.item,
     focus = _ref.focus;
@@ -25,7 +31,9 @@ export var ViewMore = function ViewMore(_ref) {
     "data-testid": "view-more-elements-item"
     // @ts-ignore Overriding Menu styles is not supported
     ,
-    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          padding: 0px ", ";\n        "])), "var(--ds-space-150, 12px)"),
+    css: css({
+      padding: "0px ".concat("var(--ds-space-150, 12px)")
+    }),
     ref: ref
   }, item.title));
 };

package/dist/esm/element-browser/components/ElementBrowserLoader.js

@@ -1,11 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import Loadable from 'react-loadable';
 import Spinner from '@atlaskit/spinner';
-var spinnerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
+var spinnerContainer = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%'
+});
 var ElementBrowserLoader = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {

package/dist/esm/element-browser/components/ElementList/NotFoundIllustration.js

@@ -1,8 +1,10 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-var imageContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 111px;\n  margin-top: ", ";\n"])), "var(--ds-space-600, 48px)");
+var imageContainer = css({
+  width: '120px',
+  height: '111px',
+  marginTop: "var(--ds-space-600, 48px)"
+});
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export default function NotFoundIllustration() {

package/dist/esm/element-browser/hooks/use-container-width.js

@@ -1,6 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -32,7 +30,9 @@ import { WidthObserver } from '@atlaskit/width-detector';
  *
  */
 
-var widthObserverWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var widthObserverWrapper = css({
+  position: 'relative'
+});
 export default function useContainerWidth() {
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -8,8 +8,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -39,14 +37,44 @@ import { filterUniqueItems, mapContentTypeToIcon, sha1, wordCount } from './util
  * Visible only to screenreaders. Use when there is a need
  * to provide more context to a non-sighted user.
  */
-export var visuallyHiddenStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: ", ";\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])), "var(--ds-space-negative-025, -2px)");
+export var visuallyHiddenStyles = css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: "var(--ds-space-negative-025, -2px)",
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute'
+});
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: ", ";\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-space-100, 8px)", "var(--ds-icon-subtle, ".concat(N90, ")"));
-var clearTextWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n"])));
-var containerPadding = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
-var textLabelMargin = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-150, 12px)");
-var inputLabel = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  font-weight: 500;\n  padding-bottom: ", ";\n"])), fontSizeSmall(), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
-var inputWrapperPosition = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var clearText = css({
+  cursor: 'pointer',
+  padding: 0,
+  marginRight: "var(--ds-space-100, 8px)",
+  color: "var(--ds-icon-subtle, ".concat(N90, ")"),
+  background: 'transparent',
+  border: 'none'
+});
+var clearTextWrapper = css({
+  position: 'absolute',
+  right: 0
+});
+var containerPadding = css({
+  padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-100, 8px)")
+});
+var textLabelMargin = css({
+  marginTop: "var(--ds-space-150, 12px)"
+});
+var inputLabel = css({
+  fontSize: "".concat(fontSizeSmall(), "px"),
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  fontWeight: 500,
+  paddingBottom: "var(--ds-space-050, 4px)"
+});
+var inputWrapperPosition = css({
+  position: 'relative'
+});
 export var messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 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 = "78.29.3";
+var packageVersion = "78.30.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/react-node-view/generateUniqueNodeKey.js

@@ -0,0 +1,4 @@
+import uuid from 'uuid/v4';
+export var generateUniqueNodeKey = function generateUniqueNodeKey() {
+  return uuid();
+};

package/dist/esm/react-node-view/getInlineNodeViewProducer.js

@@ -6,6 +6,7 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { browser } from '../utils';
 import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered, ZERO_WIDTH_SPACE } from '../utils';
+import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 export var inlineNodeViewClassname = 'inlineNodeView';
 function createNodeView(_ref) {
   var nodeViewParams = _ref.nodeViewParams,
@@ -16,6 +17,7 @@ function createNodeView(_ref) {
   // used for comparisions when doing updates, before being
   // overwritten to the updated node.
   var currentNode = nodeViewParams.node;
+  var key = generateUniqueNodeKey();
 
   // First we setup the dom element which will be rendered and "tracked" by prosemirror
   // and also used as a "editor portal" (not react portal) target by the editor
@@ -52,7 +54,7 @@ function createNodeView(_ref) {
       nodeViewParams: nodeViewParams,
       Component: Component,
       extraComponentProps: extraComponentProps
-    }), domRef, false,
+    }), domRef, key, false,
     // node views should be rendered with intl context
     true);
   }
@@ -110,7 +112,7 @@ function createNodeView(_ref) {
       // When prosemirror destroys the node view, we need to clean up
       // what we have previously rendered using the editor portal
       // provider api.
-      pmPluginFactoryParams.portalProviderAPI.remove(domRef);
+      pmPluginFactoryParams.portalProviderAPI.remove(key, domRef);
       // @ts-expect-error Expect an error as domRef is expected to be
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.

package/dist/esm/react-node-view/index.js

@@ -8,6 +8,7 @@ import { createDispatch } from '../event-dispatcher';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { analyticsEventKey } from '../utils/analytics';
+import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
 var ReactNodeView = /*#__PURE__*/function () {
   function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
@@ -38,6 +39,7 @@ var ReactNodeView = /*#__PURE__*/function () {
     this._viewShouldUpdate = viewShouldUpdate;
     this.eventDispatcher = eventDispatcher;
     this.hasIntlContext = hasIntlContext;
+    this.key = generateUniqueNodeKey();
   }
 
   /**
@@ -105,7 +107,7 @@ var ReactNodeView = /*#__PURE__*/function () {
           dispatchAnalyticsEvent: _this3.dispatchAnalyticsEvent
         }, component());
       };
-      this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.hasAnalyticsContext, this.hasIntlContext);
+      this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.key, this.hasAnalyticsContext, this.hasIntlContext);
     }
   }, {
     key: "createDomRef",
@@ -202,7 +204,7 @@ var ReactNodeView = /*#__PURE__*/function () {
       if (!this.domRef) {
         return;
       }
-      this.portalProviderAPI.remove(this.domRef);
+      this.portalProviderAPI.remove(this.key, this.domRef);
       this.domRef = undefined;
       this.contentDOM = undefined;
     }

package/dist/esm/ui/Caption/index.js

@@ -4,8 +4,6 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -14,8 +12,18 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(N400, ")"));
-var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
+var captionWrapperStyle = css({
+  marginTop: "var(--ds-space-100, 8px)",
+  textAlign: 'center',
+  position: 'relative',
+  color: "var(--ds-text-subtle, ".concat(N400, ")")
+});
+var placeholderStyle = css({
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  position: 'absolute',
+  top: 0,
+  width: '100%'
+});
 export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptionComponent, _React$Component);
   var _super = _createSuper(CaptionComponent);

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

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -6,7 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -17,7 +15,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.29.3";
+var packageVersion = "78.30.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -30,11 +28,30 @@ var DropList = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
-    _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
+    _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css({
+      display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      flex: _this.props.shouldFitContainer ? '1 1 auto' : undefined,
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)'
+    }));
+    _defineProperty(_assertThisInitialized(_this), "triggerStyles", css({
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+      display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      boxSizing: _this.props.shouldFitContainer ? 'border-box' : undefined
+    }));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(_assertThisInitialized(_this), "menuWrapper", function () {
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)");
+      return css({
+        color: "var(--ds-text, ".concat(N900, ")"),
+        backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+        borderRadius: "var(--ds-border-radius, 3px)",
+        boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+        boxSizing: 'border-box',
+        overflow: 'auto',
+        padding: "var(--ds-space-050, 4px)".concat(" 0"),
+        maxHeight: '90vh'
+      });
     });
     /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {