@atlaskit/editor-plugin-media 1.23.2 → 1.24.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media
 
+## 1.24.1
+
+### Patch Changes
+
+- [#120417](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120417)
+  [`26e76bb38b63f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/26e76bb38b63f) -
+  [ux] ECA11Y-175: This changes improves the floating toolbar a11y by making the image border
+  options menu accessible for keyboard-only users, and is behind the feature gate
+  `platform-editor-a11y-image-border-options-dropdown`.
+- Updated dependencies
+
+## 1.24.0
+
+### Minor Changes
+
+- [#119966](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119966)
+  [`596ad24e38929`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/596ad24e38929) -
+  Clean up typescript references to LegacyPortalProviderAPI
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.23.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaGroup.js

@@ -372,11 +372,10 @@ var ReactMediaGroupNode = exports.ReactMediaGroupNode = function ReactMediaGroup
   var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
   return function (node, view, getPos) {
-    var hasIntlContext = true;
     return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
       mediaOptions: mediaOptions,
       pluginInjectionApi: pluginInjectionApi
-    }, undefined, undefined, undefined, hasIntlContext).init();
+    }).init();
   };
 };

package/dist/cjs/nodeviews/mediaNodeView/index.js

@@ -190,12 +190,11 @@ var ReactMediaNode = exports.ReactMediaNode = function ReactMediaNode(portalProv
   var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
   return function (node, view, getPos) {
-    var hasIntlContext = true;
     return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       eventDispatcher: eventDispatcher,
       providerFactory: providerFactory,
       mediaOptions: mediaOptions,
       pluginInjectionApi: pluginInjectionApi
-    }, undefined, undefined, undefined, hasIntlContext).init();
+    }).init();
   };
 };

package/dist/cjs/nodeviews/mediaSingle.js

@@ -698,7 +698,6 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
 var ReactMediaSingleNode = exports.ReactMediaSingleNode = function ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) {
   var mediaOptions = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
   return function (node, view, getPos) {
-    var hasIntlContext = true;
     return new MediaSingleNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       eventDispatcher: eventDispatcher,
       fullWidthMode: mediaOptions.fullWidthEnabled,
@@ -708,6 +707,6 @@ var ReactMediaSingleNode = exports.ReactMediaSingleNode = function ReactMediaSin
       isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
       pluginInjectionApi: pluginInjectionApi,
       editorAppearance: mediaOptions.editorAppearance
-    }, undefined, undefined, undefined, hasIntlContext).init();
+    }).init();
   };
 };

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

@@ -16,6 +16,7 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles2 = require("./styles");
 /** @jsx jsx */
@@ -28,6 +29,11 @@ var ImageBorder = function ImageBorder(_ref) {
     borderMark = _ref.borderMark,
     setBorder = _ref.setBorder;
   var popupTarget = (0, _react.useRef)(null);
+  var dropDownColorOptionButton = (0, _react.useRef)(null);
+  var dropDownSizeOptionButton = (0, _react.useRef)(null);
+  var colorSubmenuRef = (0, _react.useRef)(null);
+  var sizeSubmenuRef = (0, _react.useRef)(null);
+  var openDropdownButtonRef = (0, _react.useRef)(null);
   var enabled = !!borderMark;
   var color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
   var size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
@@ -37,12 +43,28 @@ var ImageBorder = function ImageBorder(_ref) {
     setIsOpen = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isColorSubmenuOpen = _useState4[0],
-    setIsColorSubmenuOpen = _useState4[1];
+    isOpenByKeyboard = _useState4[0],
+    setIsOpenedByKeyboard = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isSizeSubmenuOpen = _useState6[0],
-    setIsSizeSubmenuOpen = _useState6[1];
+    isColorSubmenuOpen = _useState6[0],
+    setIsColorSubmenuOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isSizeSubmenuOpen = _useState8[0],
+    setIsSizeSubmenuOpen = _useState8[1];
+  var handleColorSubmenuEsc = (0, _react.useCallback)(function () {
+    var _dropDownColorOptionB;
+    setIsOpenedByKeyboard(false);
+    setIsColorSubmenuOpen(false);
+    dropDownColorOptionButton === null || dropDownColorOptionButton === void 0 || (_dropDownColorOptionB = dropDownColorOptionButton.current) === null || _dropDownColorOptionB === void 0 || _dropDownColorOptionB.focus();
+  }, []);
+  var handleSizeSubmenuEsc = (0, _react.useCallback)(function () {
+    var _dropDownSizeOptionBu;
+    setIsOpenedByKeyboard(false);
+    setIsSizeSubmenuOpen(false);
+    dropDownSizeOptionButton === null || dropDownSizeOptionButton === void 0 || (_dropDownSizeOptionBu = dropDownSizeOptionButton.current) === null || _dropDownSizeOptionBu === void 0 || _dropDownSizeOptionBu.focus();
+  }, []);
   var handleSubMenuRef = function handleSubMenuRef(ref) {
     if (!ref) {
       return;
@@ -52,6 +74,38 @@ var ImageBorder = function ImageBorder(_ref) {
       ref.style.left = "-".concat(rect.width, "px");
     }
   };
+  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, callback) {
+    if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        callback();
+        setIsOpenedByKeyboard(true);
+      }
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+      var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
+        if (!isOpenByKeyboard) {
+          return;
+        }
+        if (isOpen && submenuRef.current) {
+          var firstOption = submenuRef.current.querySelector('button');
+          if (!firstOption) {
+            return;
+          }
+          firstOption.focus();
+          var keyboardEvent = new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true
+          });
+          firstOption.dispatchEvent(keyboardEvent);
+        }
+      };
+      focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
+      focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
+    }
+  }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   var borderSizeOptions = [{
     name: formatMessage(_media.imageBorderMessages.borderSizeSubtle),
     value: 1
@@ -62,7 +116,153 @@ var ImageBorder = function ImageBorder(_ref) {
     name: formatMessage(_media.imageBorderMessages.borderSizeBold),
     value: 3
   }];
-  var items = [{
+  var items = (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? [{
+    content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
+      ref: dropDownColorOptionButton,
+      type: "button",
+      "aria-label": "Image border options Color dropdown button",
+      "data-testid": "image-border-dropdown-button-color"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      ,
+      css: [_styles2.dropdownOptionButton],
+      "aria-expanded": isColorSubmenuOpen,
+      onKeyDown: function onKeyDown(e) {
+        return handleTriggerByKeyboard(e, function () {
+          return setIsColorSubmenuOpen(!isColorSubmenuOpen);
+        });
+      }
+    }, (0, _react2.jsx)("span", null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
+      css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
+    })), (0, _react2.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
+      ref: colorSubmenuRef
+    }, isColorSubmenuOpen &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("div", {
+      css: (0, _styles2.contextualSubMenu)(0),
+      ref: handleSubMenuRef
+    }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+      type: _uiMenu.ArrowKeyNavigationType.MENU,
+      handleClose: function handleClose(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleColorSubmenuEsc();
+      },
+      disableCloseOnArrowClick: true
+    }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+      onClick: function onClick(color) {
+        setBorder({
+          color: color
+        });
+        setIsOpen(!isOpen);
+      },
+      onKeyDown: function onKeyDown(color, _, event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          var _openDropdownButtonRe;
+          setBorder({
+            color: color
+          });
+          setIsOpen(!isOpen);
+          setIsColorSubmenuOpen(false);
+          setIsSizeSubmenuOpen(false);
+          (_openDropdownButtonRe = openDropdownButtonRef.current) === null || _openDropdownButtonRe === void 0 || _openDropdownButtonRe.focus();
+        }
+      },
+      selectedColor: color !== null && color !== void 0 ? color : null,
+      paletteOptions: {
+        palette: _uiColor.borderColorPalette,
+        paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
+        hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor
+      }
+    }))))),
+    'data-testid': 'dropdown-item__Color',
+    key: 'dropdown-menu-image-border-color-button',
+    value: {
+      name: 'color'
+    },
+    'aria-label': '',
+    wrapperTabIndex: null
+  }, {
+    content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
+      type: "button",
+      "aria-label": "Image border options Size dropdown button",
+      "data-testid": "image-border-dropdown-button-size"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      ,
+      css: [_styles2.dropdownOptionButton],
+      "aria-expanded": isSizeSubmenuOpen,
+      ref: dropDownSizeOptionButton,
+      onKeyDown: function onKeyDown(e) {
+        return handleTriggerByKeyboard(e, function () {
+          return setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+        });
+      }
+    }, (0, _react2.jsx)("span", null, formatMessage(_media.imageBorderMessages.borderSize)), (0, _react2.jsx)("div", {
+      css: _styles2.contextualMenuArrow
+    })), (0, _react2.jsx)("div", {
+      //eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
+      ref: sizeSubmenuRef
+    }, isSizeSubmenuOpen && (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+      type: _uiMenu.ArrowKeyNavigationType.MENU,
+      handleClose: function handleClose(e) {
+        e.preventDefault();
+        handleSizeSubmenuEsc();
+      },
+      disableCloseOnArrowClick: true
+    }, (0, _react2.jsx)("div", {
+      css: (0, _styles2.contextualSubMenu)(1),
+      ref: handleSubMenuRef
+    }, borderSizeOptions.map(function (_ref2, idx) {
+      var name = _ref2.name,
+        value = _ref2.value;
+      return (0, _react2.jsx)(_tooltip.default, {
+        key: idx,
+        content: name
+      }, (0, _react2.jsx)("span", {
+        css: _styles2.buttonWrapperStyle
+      }, (0, _react2.jsx)("button", {
+        type: "button"
+        /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
+        css: (0, _styles2.buttonStyle)(value === size),
+        "aria-label": name,
+        role: "radio",
+        "aria-checked": value === size,
+        onClick: function onClick() {
+          setBorder({
+            size: value
+          });
+          setIsOpen(false);
+        },
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === 'Enter' || event.key === ' ') {
+            var _openDropdownButtonRe2;
+            setBorder({
+              size: value
+            });
+            setIsOpen(false);
+            setIsColorSubmenuOpen(false);
+            setIsSizeSubmenuOpen(false);
+            (_openDropdownButtonRe2 = openDropdownButtonRef.current) === null || _openDropdownButtonRe2 === void 0 || _openDropdownButtonRe2.focus();
+          }
+        },
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+        }
+      }, (0, _react2.jsx)("div", {
+        css: (0, _styles2.line)(value, value === size),
+        role: "presentation"
+      }))));
+    }))))),
+    'data-testid': 'dropdown-item__Size',
+    key: 'dropdown-menu-image-border-size-button',
+    value: {
+      name: 'size'
+    },
+    'aria-label': '',
+    wrapperTabIndex: null
+  }] : [{
     content: formatMessage(_media.imageBorderMessages.borderColor),
     value: {
       name: 'color'
@@ -108,9 +308,9 @@ var ImageBorder = function ImageBorder(_ref) {
     (0, _react2.jsx)("div", {
       css: (0, _styles2.contextualSubMenu)(1),
       ref: handleSubMenuRef
-    }, borderSizeOptions.map(function (_ref2, idx) {
-      var name = _ref2.name,
-        value = _ref2.value;
+    }, borderSizeOptions.map(function (_ref3, idx) {
+      var name = _ref3.name,
+        value = _ref3.value;
       return (0, _react2.jsx)(_tooltip.default, {
         key: idx,
         content: name
@@ -139,7 +339,6 @@ var ImageBorder = function ImageBorder(_ref) {
       }))));
     })))
   }];
-
   /**
    * We want to change direction of our dropdowns a bit early,
    * not exactly when it hits the boundary.
@@ -147,6 +346,7 @@ var ImageBorder = function ImageBorder(_ref) {
   var fitTolerance = 10;
   var fitWidth = _styles2.menuItemDimensions.width;
   var fitHeight = items.length * (_styles2.menuItemDimensions.height + _styles2.itemSpacing);
+  var isAnySubMenuOpen = isSizeSubmenuOpen || isColorSubmenuOpen;
   return (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css: (0, _styles2.toolbarButtonWrapper)({
@@ -171,7 +371,9 @@ var ImageBorder = function ImageBorder(_ref) {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "image-border-toolbar-dropdown",
+    ref: openDropdownButtonRef,
     selected: enabled || isOpen,
+    "aria-expanded": (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isOpen : undefined,
     "aria-label": formatMessage(_media.imageBorderMessages.borderOptions),
     title: formatMessage(_media.imageBorderMessages.borderOptions),
     spacing: "compact",
@@ -180,7 +382,15 @@ var ImageBorder = function ImageBorder(_ref) {
     }),
     onClick: function onClick() {
       setIsOpen(!isOpen);
-    }
+      if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+        setIsOpenedByKeyboard(false);
+      }
+    },
+    onKeyDown: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? function (e) {
+      return handleTriggerByKeyboard(e, function () {
+        return setIsOpen(!isOpen);
+      });
+    } : undefined
   }))), (0, _react2.jsx)(_ui.Popup, {
     target: popupTarget.current ? popupTarget.current : undefined,
     fitWidth: fitWidth + fitTolerance,
@@ -191,7 +401,9 @@ var ImageBorder = function ImageBorder(_ref) {
     onMouseLeave: function onMouseLeave() {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
-    }
+    },
+    css: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    _styles2.dropdownWrapper : undefined
   }, (0, _react2.jsx)(_uiMenu.DropdownMenu
   //This needs be removed when the a11y is completely handled
   //Disabling key navigation now as it works only partially
@@ -199,19 +411,32 @@ var ImageBorder = function ImageBorder(_ref) {
   , {
     arrowKeyNavigationProviderOptions: {
       type: _uiMenu.ArrowKeyNavigationType.MENU,
-      disableArrowKeyNavigation: true
+      disableArrowKeyNavigation: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : true
     },
+    allowEnterDefaultBehavior: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : undefined,
+    handleEscapeKeydown: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? function () {
+      return;
+    } : function () {
+      var _openDropdownButtonRe3;
+      (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 || _openDropdownButtonRe3.focus();
+    } : undefined,
     items: [{
       items: items
     }],
     isOpen: isOpen,
+    shouldFocusFirstItem: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? function () {
+      return isOpenByKeyboard;
+    } : undefined,
     onOpenChange: function onOpenChange() {
       setIsOpen(false);
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
+      if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+        setIsOpenedByKeyboard(false);
+      }
     },
-    onItemActivated: function onItemActivated(_ref3) {
-      var item = _ref3.item;
+    onItemActivated: function onItemActivated(_ref4) {
+      var item = _ref4.item;
       if (item.value.name === 'color') {
         setIsColorSubmenuOpen(!isColorSubmenuOpen);
       }
@@ -219,17 +444,23 @@ var ImageBorder = function ImageBorder(_ref) {
         setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
       }
     },
-    onMouseEnter: function onMouseEnter(_ref4) {
-      var item = _ref4.item;
+    onMouseEnter: function onMouseEnter(_ref5) {
+      var item = _ref5.item;
       if (item.value.name === 'color') {
         setIsColorSubmenuOpen(true);
+        if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+          setIsOpenedByKeyboard(false);
+        }
       }
       if (item.value.name === 'size') {
         setIsSizeSubmenuOpen(true);
+        if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+          setIsOpenedByKeyboard(false);
+        }
       }
     },
-    onMouseLeave: function onMouseLeave(_ref5) {
-      var item = _ref5.item;
+    onMouseLeave: function onMouseLeave(_ref6) {
+      var item = _ref6.item;
       if (item.value.name === 'color') {
         setIsColorSubmenuOpen(false);
       }

package/dist/cjs/ui/ImageBorder/styles.js

@@ -5,14 +5,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toolbarButtonWrapper = exports.menuItemDimensions = exports.line = exports.itemSpacing = exports.contextualSubMenu = exports.contextualMenuColorIcon = exports.contextualMenuArrow = exports.buttonWrapperStyle = exports.buttonStyle = void 0;
+exports.toolbarButtonWrapper = exports.menuItemDimensions = exports.line = exports.itemSpacing = exports.dropdownWrapper = exports.dropdownOptionButton = exports.contextualSubMenu = exports.contextualMenuColorIcon = exports.contextualMenuArrow = exports.buttonWrapperStyle = exports.buttonStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
 var _constants = require("@atlaskit/theme/constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation*/
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -55,4 +55,10 @@ var toolbarButtonWrapper = exports.toolbarButtonWrapper = function toolbarButton
   var enabled = _ref.enabled,
     isOpen = _ref.isOpen;
   return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t.image-border-toolbar-btn {\n\t\tborder-top-right-radius: 0;\n\t\tborder-bottom-right-radius: 0;\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t.image-border-toolbar-dropdown {\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t\twidth: 16px !important;\n\t\tborder-top-left-radius: 0 !important;\n\t\tborder-bottom-left-radius: 0 !important;\n\t\tmargin-left: ", ";\n\t}\n\n\t", "\n\t", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
-};
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var dropdownOptionButton = exports.dropdownOptionButton = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: transparent;\n\tborder: 2px solid transparent;\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 8px 16px;\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t\tborder: 2px solid ", ";\n\t}\n"])), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", "var(--ds-border-focused, #2684FF)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var dropdownWrapper = exports.dropdownWrapper = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\tspan[role='menuitem'] {\n\t\tpadding: 0;\n\t}\n"])));

package/dist/es2019/nodeviews/mediaGroup.js

@@ -311,10 +311,9 @@ class MediaGroupNodeView extends ReactNodeView {
   }
 }
 export const ReactMediaGroupNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
-  const hasIntlContext = true;
   return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     providerFactory,
     mediaOptions,
     pluginInjectionApi
-  }, undefined, undefined, undefined, hasIntlContext).init();
+  }).init();
 };

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -161,11 +161,10 @@ class MediaNodeView extends SelectionBasedNodeView {
   }
 }
 export const ReactMediaNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
-  const hasIntlContext = true;
   return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     eventDispatcher,
     providerFactory,
     mediaOptions,
     pluginInjectionApi
-  }, undefined, undefined, undefined, hasIntlContext).init();
+  }).init();
 };

package/dist/es2019/nodeviews/mediaSingle.js

@@ -585,7 +585,6 @@ class MediaSingleNodeView extends ReactNodeView {
   }
 }
 export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent, mediaOptions = {}) => (node, view, getPos) => {
-  const hasIntlContext = true;
   return new MediaSingleNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     eventDispatcher,
     fullWidthMode: mediaOptions.fullWidthEnabled,
@@ -595,5 +594,5 @@ export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, provide
     isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
     pluginInjectionApi,
     editorAppearance: mediaOptions.editorAppearance
-  }, undefined, undefined, undefined, hasIntlContext).init();
+  }).init();
 };