@atlaskit/editor-common 71.0.3 → 72.0.1

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

@@ -15,6 +15,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
+import createFocusTrap from 'focus-trap';
 import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -44,6 +45,8 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       validPosition: true
     });
 
+    _defineProperty(_assertThisInitialized(_this), "popupRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "placement", ['', '']);
 
     _defineProperty(_assertThisInitialized(_this), "handleRef", function (popup) {
@@ -66,6 +69,25 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       _this.scheduledUpdatePosition(_this.props);
     }) : undefined);
 
+    _defineProperty(_assertThisInitialized(_this), "initFocusTrap", rafSchedule(function () {
+      var popup = _this.popupRef.current;
+
+      if (!popup) {
+        return;
+      }
+
+      var trapConfig = {
+        clickOutsideDeactivates: true,
+        escapeDeactivates: true,
+        initialFocus: popup,
+        fallbackFocus: popup,
+        returnFocusOnDeactivate: false
+      };
+      _this.focusTrap = createFocusTrap(popup, trapConfig);
+
+      _this.focusTrap.activate();
+    }));
+
     return _this;
   }
 
@@ -88,13 +110,14 @@ var Popup = /*#__PURE__*/function (_React$Component) {
           stick = props.stick,
           forcePlacement = props.forcePlacement,
           allowOutOfBounds = props.allowOutOfBounds,
-          rect = props.rect;
+          rect = props.rect,
+          preventOverflow = props.preventOverflow;
 
       if (!target || !popup) {
         return {};
       }
 
-      var placement = calculatePlacement(target, boundariesElement || document.body, fitWidth, fitHeight, alignX, alignY, forcePlacement);
+      var placement = calculatePlacement(target, boundariesElement || document.body, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow);
 
       if (onPlacementChanged && this.placement.join('') !== placement.join('')) {
         onPlacementChanged(placement);
@@ -156,6 +179,7 @@ var Popup = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "initPopup",
     value: function initPopup(popup) {
+      this.popupRef.current = popup;
       var target = this.props.target;
       var overflowScrollParent = findOverflowScrollParent(popup);
 
@@ -179,6 +203,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
        */
 
       this.scheduledUpdatePosition(this.props);
+
+      if (this.props.focusTrap) {
+        this.initFocusTrap();
+      }
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
@@ -187,6 +215,48 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       // get rendered and we end up with a wrong position
       this.scheduledUpdatePosition(newProps);
     }
+  }, {
+    key: "destroyFocusTrap",
+    value:
+    /**
+     * Cancels the initialisation of the focus trap if it has not yet occured
+     * Deactivates the focus trap if it exists
+     */
+    function destroyFocusTrap() {
+      var _this$focusTrap;
+
+      this.initFocusTrap.cancel();
+      (_this$focusTrap = this.focusTrap) === null || _this$focusTrap === void 0 ? void 0 : _this$focusTrap.deactivate();
+    }
+    /**
+     * Handle pausing, unpausing, and initialising (if not yet initialised) of the focus trap
+     */
+
+  }, {
+    key: "handleChangedFocusTrapProp",
+    value: function handleChangedFocusTrapProp(prevProps) {
+      if (prevProps.focusTrap !== this.props.focusTrap) {
+        // If currently set to disable, then pause the trap if it exists
+        if (!this.props.focusTrap) {
+          var _this$focusTrap2;
+
+          return (_this$focusTrap2 = this.focusTrap) === null || _this$focusTrap2 === void 0 ? void 0 : _this$focusTrap2.pause();
+        } // If set to enabled and trap already exists, unpause
+
+
+        if (this.focusTrap) {
+          this.focusTrap.unpause();
+        } // Else initialise the focus trap
+
+
+        return this.initFocusTrap();
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      this.handleChangedFocusTrapProp(prevProps);
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -222,6 +292,7 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       }
 
       this.scheduledUpdatePosition.cancel();
+      this.destroyFocusTrap();
     }
   }, {
     key: "renderPopup",

package/dist/esm/ui/Popup/utils.js

@@ -15,7 +15,7 @@ export function isTextNode(elem) {
  * Decides if given fitHeight fits below or above the target taking boundaries into account.
  */
 
-export function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement) {
+export function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow) {
   if (forcePlacement && alignY) {
     return alignY;
   }
@@ -37,7 +37,13 @@ export function getVerticalPlacement(target, boundariesElement, fitHeight, align
       targetHeight = _target$getBoundingCl.height;
 
   var spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
-  var spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight);
+  var spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight); // Force vertical placement to bottom if the space above doesn't accomodate the fitHeight
+
+  if (preventOverflow) {
+    if (spaceAbove <= fitHeight) {
+      return 'bottom';
+    }
+  }
 
   if (spaceBelow >= fitHeight || spaceBelow >= spaceAbove) {
     return 'bottom';
@@ -49,8 +55,9 @@ export function getVerticalPlacement(target, boundariesElement, fitHeight, align
  * Decides if given fitWidth fits to the left or to the right of the target taking boundaries into account.
  */
 
-export function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement) {
-  if (forcePlacement && alignX) {
+export function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow) {
+  // force placement unless preventOverflow is enabled
+  if (forcePlacement && alignX && !preventOverflow) {
     return alignX;
   }
 
@@ -81,8 +88,8 @@ export function getHorizontalPlacement(target, boundariesElement, fitWidth, alig
 
   return 'right';
 }
-export function calculatePlacement(target, boundariesElement, fitWidth, fitHeight, alignX, alignY, forcePlacement) {
-  return [getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement), getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement)];
+export function calculatePlacement(target, boundariesElement, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow) {
+  return [getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow), getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow)];
 }
 
 var calculateHorizontalPlacement = function calculateHorizontalPlacement(_ref) {

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

@@ -10,13 +10,12 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
-import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
+var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-border-disabled, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

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

@@ -10,13 +10,12 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
-import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
+var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-border-disabled, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,

package/dist/esm/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -0,0 +1,124 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { defineMessages } from 'react-intl-next'; // These messages are only to be used when useSomewhatSemanticTextColorNames feature flag is true.
+// They are used only in Jira and are part of work for https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
+
+export var newLightPalette = defineMessages({
+  '#FFFFFF': {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'Name of a color'
+  },
+  '#B3D4FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#B3F5FF': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#ABF5D1': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#FFF0B3': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFBDAD': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#EAE6FF': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#97A0AF': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#4C9AFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#00B8D9': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#36B37E': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#FFC400': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FF5630': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color'
+  },
+  '#FF991F': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'Name of a color.'
+  },
+  '#6554C0': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#0747A6': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#008DA6': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#006644': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#BF2600': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#403294': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#172B4D': {
+    id: 'fabric.theme.default',
+    defaultMessage: 'Default',
+    description: 'Name of a color'
+  }
+});
+var darkModeWhite = defineMessages({
+  '#FFFFFF': {
+    id: 'fabric.theme.dark-gray',
+    defaultMessage: 'Dark gray',
+    description: 'Name of a color'
+  }
+});
+export var newDarkPalette = _objectSpread(_objectSpread({}, newLightPalette), darkModeWhite);

package/dist/esm/ui-color/ColorPalette/index.js

@@ -4,8 +4,10 @@ import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
+import getColorMessage from './Palettes/getColorMessage';
+import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
 import { colorPaletteWrapper } from './styles';
 
 /**
@@ -29,7 +31,7 @@ function getCheckMarkColor(color, textPalette) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 
-  return contrastColor === N0 ? token('color.icon.inverse', N0) : token('color.icon', N500);
+  return contrastColor === N0 ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, ".concat(N500, ")");
 }
 
 var ColorPalette = function ColorPalette(props) {
@@ -41,7 +43,10 @@ var ColorPalette = function ColorPalette(props) {
       className = props.className,
       formatMessage = props.intl.formatMessage,
       _props$textPalette = props.textPalette,
-      textPalette = _props$textPalette === void 0 ? false : _props$textPalette;
+      textPalette = _props$textPalette === void 0 ? false : _props$textPalette,
+      _props$useSomewhatSem = props.useSomewhatSemanticTextColorNames,
+      useSomewhatSemanticTextColorNames = _props$useSomewhatSem === void 0 ? false : _props$useSomewhatSem;
+  var tokenTheme = useThemeObserver();
   var colorsPerRow = React.useMemo(function () {
     return palette.reduce(function (resultArray, item, index) {
       var chunkIndex = Math.floor(index / cols);
@@ -62,6 +67,17 @@ var ColorPalette = function ColorPalette(props) {
           label = _ref.label,
           border = _ref.border,
           message = _ref.message;
+
+      if (textPalette === true && useSomewhatSemanticTextColorNames) {
+        if (tokenTheme === 'dark') {
+          message = getColorMessage(newDarkPalette, value.toUpperCase());
+        }
+
+        if (tokenTheme === 'light') {
+          message = getColorMessage(newLightPalette, value.toUpperCase());
+        }
+      }
+
       return jsx(Color, {
         key: value,
         value: value,

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

@@ -23,14 +23,13 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup } from '@atlaskit/menu';
 import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), token('color.border.focused', B100));
+var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(B100, ")"));
 
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
@@ -38,20 +37,20 @@ var buttonStyles = function buttonStyles(isActive) {
       /**
        * Hack for item to imitate old dropdown-menu selected styles
        */
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), token('color.background.selected', '#6c798f'), token('color.text', '#fff'), focusedMenuItemStyle);
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
     } else {
       return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), themed({
-        light: token('color.text', N900),
-        dark: token('color.text', DN600)
+        light: "var(--ds-text, ".concat(N900, ")"),
+        dark: "var(--ds-text, ".concat(DN600, ")")
       })(theme), themed({
-        light: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-        dark: token('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+        light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
+        dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
       })(theme), themed({
-        light: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-        dark: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
+        light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
+        dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
       })(theme), themed({
-        light: token('color.text.disabled', N70),
-        dark: token('color.text.disabled', DN80)
+        light: "var(--ds-text-disabled, ".concat(N70, ")"),
+        dark: "var(--ds-text-disabled, ".concat(DN80, ")")
       })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
     }
   };
@@ -243,6 +242,7 @@ function DropdownMenuItem(_ref) {
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
+    testId: "dropdown-item__".concat(String(item.content)),
     role: shouldUseDefaultRole ? 'button' : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
@@ -254,6 +254,7 @@ function DropdownMenuItem(_ref) {
     },
     "aria-label": item['aria-label'] || String(item.content),
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
+    "aria-keyshortcuts": item['aria-keyshortcuts'],
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
     },

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

@@ -38,6 +38,7 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ariaHasPopup = props['aria-haspopup'],
       ariaExpanded = props['aria-expanded'],
       ariaPressed = props['aria-pressed'],
+      ariaKeyShortcuts = props['aria-keyshortcuts'],
       onClick = props.onClick,
       onItemClick = props.onItemClick;
   var handleClick = useCallback(function (event, analyticsEvent) {
@@ -83,7 +84,8 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
     "aria-label": ariaLabel,
-    "aria-pressed": ariaPressed
+    "aria-pressed": ariaPressed,
+    "aria-keyshortcuts": ariaKeyShortcuts
   }, children);
 
   if (!title) {

package/dist/esm/utils/analytics.js

@@ -37,37 +37,4 @@ export var SEVERITY;
 })(SEVERITY || (SEVERITY = {}));
 
 export { UNSUPPORTED_CONTENT_LEVEL_SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './unsupportedContent/get-unsupported-content-level-data';
-export var EVENT_TYPE;
-
-(function (EVENT_TYPE) {
-  EVENT_TYPE["TRACK"] = "track";
-  EVENT_TYPE["UI"] = "ui";
-})(EVENT_TYPE || (EVENT_TYPE = {}));
-
-export var ACTION;
-
-(function (ACTION) {
-  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncountered";
-  ACTION["UNSUPPORTED_TOOLTIP_VIEWED"] = "viewed";
-})(ACTION || (ACTION = {}));
-
-export var ACTION_SUBJECT;
-
-(function (ACTION_SUBJECT) {
-  ACTION_SUBJECT["DOCUMENT"] = "document";
-  ACTION_SUBJECT["TOOLTIP"] = "tooltip";
-})(ACTION_SUBJECT || (ACTION_SUBJECT = {}));
-
-export var ACTION_SUBJECT_ID;
-
-(function (ACTION_SUBJECT_ID) {
-  ACTION_SUBJECT_ID["UNSUPPORTED_BLOCK"] = "unsupportedBlock";
-  ACTION_SUBJECT_ID["UNSUPPORTED_INLINE"] = "unsupportedInline";
-  ACTION_SUBJECT_ID["UNSUPPORTED_MARK"] = "unsupportedMark";
-  ACTION_SUBJECT_ID["UNSUPPORTED_ERROR"] = "unsupportedUnhandled";
-  ACTION_SUBJECT_ID["UNSUPPORTED_NODE_ATTRIBUTE"] = "unsupportedNodeAttribute";
-  ACTION_SUBJECT_ID["ON_UNSUPPORTED_INLINE"] = "onUnsupportedInline";
-  ACTION_SUBJECT_ID["ON_UNSUPPORTED_BLOCK"] = "onUnsupportedBlock";
-})(ACTION_SUBJECT_ID || (ACTION_SUBJECT_ID = {}));
-
 export var analyticsEventKey = 'EDITOR_ANALYTICS_EVENT';

package/dist/esm/utils/builder.js

@@ -0,0 +1,30 @@
+import _construct from "@babel/runtime/helpers/construct";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+export var Builder = /*#__PURE__*/function () {
+  function Builder() {
+    _classCallCheck(this, Builder);
+
+    for (var _len = arguments.length, more = new Array(_len), _key = 0; _key < _len; _key++) {
+      more[_key] = arguments[_key];
+    }
+
+    this.data = [].concat(more) || [];
+  }
+
+  _createClass(Builder, [{
+    key: "add",
+    value: function add(nextOrTuple) {
+      return _construct(Builder, [
+      /**
+       * re-cast this to NewPlugin as we've done all the type
+       * safety, dependency checking, narrowing, during
+       * `SafePresetCheck & VerifyPluginDependencies`
+       */
+      nextOrTuple].concat(_toConsumableArray(this.data)));
+    }
+  }]);
+
+  return Builder;
+}();