@atlaskit/editor-plugin-media 1.23.2 → 1.24.1

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -8,11 +8,12 @@ import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
-import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
-import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
+import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
 const ImageBorder = ({
   intl: {
     formatMessage
@@ -22,12 +23,30 @@ const ImageBorder = ({
   setBorder
 }) => {
   const popupTarget = useRef(null);
+  const dropDownColorOptionButton = useRef(null);
+  const dropDownSizeOptionButton = useRef(null);
+  const colorSubmenuRef = useRef(null);
+  const sizeSubmenuRef = useRef(null);
+  const openDropdownButtonRef = useRef(null);
   const enabled = !!borderMark;
   const color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
   const size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
   const [isOpen, setIsOpen] = useState(false);
+  const [isOpenByKeyboard, setIsOpenedByKeyboard] = useState(false);
   const [isColorSubmenuOpen, setIsColorSubmenuOpen] = useState(false);
   const [isSizeSubmenuOpen, setIsSizeSubmenuOpen] = useState(false);
+  const handleColorSubmenuEsc = useCallback(() => {
+    var _dropDownColorOptionB;
+    setIsOpenedByKeyboard(false);
+    setIsColorSubmenuOpen(false);
+    dropDownColorOptionButton === null || dropDownColorOptionButton === void 0 ? void 0 : (_dropDownColorOptionB = dropDownColorOptionButton.current) === null || _dropDownColorOptionB === void 0 ? void 0 : _dropDownColorOptionB.focus();
+  }, []);
+  const handleSizeSubmenuEsc = useCallback(() => {
+    var _dropDownSizeOptionBu;
+    setIsOpenedByKeyboard(false);
+    setIsSizeSubmenuOpen(false);
+    dropDownSizeOptionButton === null || dropDownSizeOptionButton === void 0 ? void 0 : (_dropDownSizeOptionBu = dropDownSizeOptionButton.current) === null || _dropDownSizeOptionBu === void 0 ? void 0 : _dropDownSizeOptionBu.focus();
+  }, []);
   const handleSubMenuRef = ref => {
     if (!ref) {
       return;
@@ -37,6 +56,38 @@ const ImageBorder = ({
       ref.style.left = `-${rect.width}px`;
     }
   };
+  const handleTriggerByKeyboard = (event, callback) => {
+    if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        callback();
+        setIsOpenedByKeyboard(true);
+      }
+    }
+  };
+  useEffect(() => {
+    if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+      const focusFirstOption = (submenuRef, isOpen) => {
+        if (!isOpenByKeyboard) {
+          return;
+        }
+        if (isOpen && submenuRef.current) {
+          const firstOption = submenuRef.current.querySelector('button');
+          if (!firstOption) {
+            return;
+          }
+          firstOption.focus();
+          const keyboardEvent = new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true
+          });
+          firstOption.dispatchEvent(keyboardEvent);
+        }
+      };
+      focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
+      focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
+    }
+  }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   const borderSizeOptions = [{
     name: formatMessage(messages.borderSizeSubtle),
     value: 1
@@ -47,7 +98,144 @@ const ImageBorder = ({
     name: formatMessage(messages.borderSizeBold),
     value: 3
   }];
-  const items = [{
+  const items = fg('platform-editor-a11y-image-border-options-dropdown') ? [{
+    content: jsx("div", null, 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: [dropdownOptionButton],
+      "aria-expanded": isColorSubmenuOpen,
+      onKeyDown: e => handleTriggerByKeyboard(e, () => setIsColorSubmenuOpen(!isColorSubmenuOpen))
+    }, jsx("span", null, formatMessage(messages.borderColor)), jsx("div", {
+      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
+    })), jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: 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
+    jsx("div", {
+      css: contextualSubMenu(0),
+      ref: handleSubMenuRef
+    }, jsx(ArrowKeyNavigationProvider, {
+      type: ArrowKeyNavigationType.MENU,
+      handleClose: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleColorSubmenuEsc();
+      },
+      disableCloseOnArrowClick: true
+    }, jsx(ColorPalette, {
+      onClick: color => {
+        setBorder({
+          color
+        });
+        setIsOpen(!isOpen);
+      },
+      onKeyDown: (color, _, event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          var _openDropdownButtonRe;
+          setBorder({
+            color
+          });
+          setIsOpen(!isOpen);
+          setIsColorSubmenuOpen(false);
+          setIsSizeSubmenuOpen(false);
+          (_openDropdownButtonRe = openDropdownButtonRef.current) === null || _openDropdownButtonRe === void 0 ? void 0 : _openDropdownButtonRe.focus();
+        }
+      },
+      selectedColor: color !== null && color !== void 0 ? color : null,
+      paletteOptions: {
+        palette: borderColorPalette,
+        paletteColorTooltipMessages: borderPaletteTooltipMessages,
+        hexToPaletteColor: hexToEditorBorderPaletteColor
+      }
+    }))))),
+    'data-testid': 'dropdown-item__Color',
+    key: 'dropdown-menu-image-border-color-button',
+    value: {
+      name: 'color'
+    },
+    'aria-label': '',
+    wrapperTabIndex: null
+  }, {
+    content: jsx("div", null, 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: [dropdownOptionButton],
+      "aria-expanded": isSizeSubmenuOpen,
+      ref: dropDownSizeOptionButton,
+      onKeyDown: e => handleTriggerByKeyboard(e, () => setIsSizeSubmenuOpen(!isSizeSubmenuOpen))
+    }, jsx("span", null, formatMessage(messages.borderSize)), jsx("div", {
+      css: contextualMenuArrow
+    })), jsx("div", {
+      //eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: DropdownMenuSharedCssClassName.SUBMENU,
+      ref: sizeSubmenuRef
+    }, isSizeSubmenuOpen && jsx(ArrowKeyNavigationProvider, {
+      type: ArrowKeyNavigationType.MENU,
+      handleClose: e => {
+        e.preventDefault();
+        handleSizeSubmenuEsc();
+      },
+      disableCloseOnArrowClick: true
+    }, jsx("div", {
+      css: contextualSubMenu(1),
+      ref: handleSubMenuRef
+    }, borderSizeOptions.map(({
+      name,
+      value
+    }, idx) => jsx(Tooltip, {
+      key: idx,
+      content: name
+    }, jsx("span", {
+      css: buttonWrapperStyle
+    }, 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: buttonStyle(value === size),
+      "aria-label": name,
+      role: "radio",
+      "aria-checked": value === size,
+      onClick: () => {
+        setBorder({
+          size: value
+        });
+        setIsOpen(false);
+      },
+      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 ? void 0 : _openDropdownButtonRe2.focus();
+        }
+      },
+      onMouseDown: e => {
+        e.preventDefault();
+      }
+    }, jsx("div", {
+      css: 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(messages.borderColor),
     value: {
       name: 'color'
@@ -123,7 +311,6 @@ const ImageBorder = ({
       role: "presentation"
     })))))))
   }];
-
   /**
    * We want to change direction of our dropdowns a bit early,
    * not exactly when it hits the boundary.
@@ -131,6 +318,7 @@ const ImageBorder = ({
   const fitTolerance = 10;
   const fitWidth = menuItemDimensions.width;
   const fitHeight = items.length * (menuItemDimensions.height + itemSpacing);
+  const isAnySubMenuOpen = isSizeSubmenuOpen || isColorSubmenuOpen;
   return jsx("div", null, 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: toolbarButtonWrapper({
@@ -155,7 +343,9 @@ const ImageBorder = ({
   // 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": fg('platform-editor-a11y-image-border-options-dropdown') ? isOpen : undefined,
     "aria-label": formatMessage(messages.borderOptions),
     title: formatMessage(messages.borderOptions),
     spacing: "compact",
@@ -164,7 +354,11 @@ const ImageBorder = ({
     }),
     onClick: () => {
       setIsOpen(!isOpen);
-    }
+      if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+        setIsOpenedByKeyboard(false);
+      }
+    },
+    onKeyDown: fg('platform-editor-a11y-image-border-options-dropdown') ? e => handleTriggerByKeyboard(e, () => setIsOpen(!isOpen)) : undefined
   }))), jsx(Popup, {
     target: popupTarget.current ? popupTarget.current : undefined,
     fitWidth: fitWidth + fitTolerance,
@@ -175,7 +369,9 @@ const ImageBorder = ({
     onMouseLeave: () => {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
-    }
+    },
+    css: 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 */
+    dropdownWrapper : undefined
   }, jsx(DropdownMenu
   //This needs be removed when the a11y is completely handled
   //Disabling key navigation now as it works only partially
@@ -183,16 +379,27 @@ const ImageBorder = ({
   , {
     arrowKeyNavigationProviderOptions: {
       type: ArrowKeyNavigationType.MENU,
-      disableArrowKeyNavigation: true
+      disableArrowKeyNavigation: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : true
     },
+    allowEnterDefaultBehavior: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : undefined,
+    handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? () => {
+      return;
+    } : () => {
+      var _openDropdownButtonRe3;
+      (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 ? void 0 : _openDropdownButtonRe3.focus();
+    } : undefined,
     items: [{
       items
     }],
     isOpen: isOpen,
+    shouldFocusFirstItem: fg('platform-editor-a11y-image-border-options-dropdown') ? () => isOpenByKeyboard : undefined,
     onOpenChange: () => {
       setIsOpen(false);
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
+      if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+        setIsOpenedByKeyboard(false);
+      }
     },
     onItemActivated: ({
       item
@@ -209,9 +416,15 @@ const ImageBorder = ({
     }) => {
       if (item.value.name === 'color') {
         setIsColorSubmenuOpen(true);
+        if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+          setIsOpenedByKeyboard(false);
+        }
       }
       if (item.value.name === 'size') {
         setIsSizeSubmenuOpen(true);
+        if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+          setIsOpenedByKeyboard(false);
+        }
       }
     },
     onMouseLeave: ({

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

@@ -129,4 +129,27 @@ export const toolbarButtonWrapper = ({
 
 	${!enabled && getHoverStyles('.image-border-toolbar-btn')}
 	${!isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown')}
+`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const dropdownOptionButton = css`
+	background: transparent;
+	border: 2px solid transparent;
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 16px;
+
+	&:focus {
+		background-color: ${"var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))"};
+		border: 2px solid ${"var(--ds-border-focused, #2684FF)"};
+	}
+`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const dropdownWrapper = css`
+	span[role='menuitem'] {
+		padding: 0;
+	}
 `;

package/dist/esm/nodeviews/mediaGroup.js

@@ -365,11 +365,10 @@ export var ReactMediaGroupNode = function ReactMediaGroupNode(portalProviderAPI,
   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/esm/nodeviews/mediaNodeView/index.js

@@ -183,12 +183,11 @@ export var ReactMediaNode = function ReactMediaNode(portalProviderAPI, eventDisp
   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/esm/nodeviews/mediaSingle.js

@@ -693,7 +693,6 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
 export var 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,
@@ -703,6 +702,6 @@ export var ReactMediaSingleNode = function ReactMediaSingleNode(portalProviderAP
       isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
       pluginInjectionApi: pluginInjectionApi,
       editorAppearance: mediaOptions.editorAppearance
-    }, undefined, undefined, undefined, hasIntlContext).init();
+    }).init();
   };
 };