@atlaskit/editor-common 71.0.2 → 72.0.0

package/dist/esm/styles/shared/lists.js

@@ -1,9 +1,56 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject;
 
 import { css } from '@emotion/react';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
 import browser from '../../utils/browser';
-export var listPaddingLeftMarkerSpace = 24;
-export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: ", "px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), listPaddingLeftMarkerSpace, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);
+export var listItemCounterPadding = 24;
+var CSS_VAR_NAMES;
+
+(function (CSS_VAR_NAMES) {
+  CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
+})(CSS_VAR_NAMES || (CSS_VAR_NAMES = {}));
+
+var getItemCounterLeftPadding = function getItemCounterLeftPadding(itemCounterDigitsSize) {
+  // Previous padding-left was approximately 24px. We approximate that
+  // same value using "ch" units (which represent the width of a "0" digit
+  // character). We use "ch" so that this computed padding can now grow if
+  //  the font-size ever enlarges.
+  var paddingLeft = "2.385ch";
+
+  if (itemCounterDigitsSize >= 3) {
+    // When there are 3 or more digits, we use a combination of "ch" units and
+    // pixel values so that while the computed padding grows if font-size ever
+    // enlarges, it doesn't over-scale with each digit (because of the fixed pixel
+    // portion of the computed value). This way, very large item counters will not
+    // become overly left-padded.
+    var fixedBasePx = 2;
+    paddingLeft = "calc(".concat(itemCounterDigitsSize + 1, "ch - ").concat(fixedBasePx, "px)");
+  }
+
+  return paddingLeft;
+};
+
+var stringifyStyle = function stringifyStyle(style) {
+  return Object.entries(style).reduce(function (str, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return "".concat(str).concat(key, ":").concat(value, ";");
+  }, "");
+};
+
+export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
+  var style = _defineProperty({}, CSS_VAR_NAMES.ITEM_COUNTER_PADDING, getItemCounterLeftPadding(itemCounterDigitsSize));
+
+  if (styleFormat === 'string') {
+    return stringifyStyle(style);
+  }
+
+  return style;
+}
+export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: var(\n      ", ",\n      ", "px\n    );\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);

package/dist/esm/styles/shared/panel.js

@@ -3,8 +3,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2;
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
@@ -21,9 +23,6 @@ var tokenPanelColor = {
   error: 'color.background.danger'
 };
 var lightPanelColor = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-
-  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -93,8 +92,6 @@ export var darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
 var lightIconColor = {
   info: token('color.icon.information', colors.B400),
   note: token('color.icon.discovery', colors.P400),
@@ -116,15 +113,15 @@ var darkIconColor = {
 var panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
 var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]]; // used for custom panels
 
-var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
 export var getPanelDarkColor = function getPanelDarkColor(panelColor) {
   var colorObject = panelDarkModeColors.find(function (color) {
     return color[0] === panelColor || color[1] === panelColor;
   });
   return colorObject ? colorObject[1] : darkPanelColors.B1200S;
-};
+}; // used for custom panels
+
 export var getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       colorName = _ref2[0],
@@ -193,10 +190,8 @@ export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
   /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-  var light = token(tokenPanelColor[panelType], lightPanelColor[panelType]);
+  var light = hexToEditorBackgroundPaletteColor(lightPanelColor[panelType]);
   var dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-
   var background = themed({
     light: light,
     dark: dark

package/dist/esm/styles/shared/shadow.js

@@ -3,10 +3,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4116
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { shadowClassNames } from '../../ui/OverflowShadow';
 import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 var shadowWidth = 8;
@@ -24,5 +24,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, N40A, shadowClassNames.RIGHT_SHADOW, N40A, shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
+var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, token('elevation.shadow.overflow.spread', N40A), token('elevation.shadow.overflow.perimeter', 'transparent'), shadowClassNames.RIGHT_SHADOW, token('elevation.shadow.overflow.spread', N40A), token('elevation.shadow.overflow.perimeter', 'transparent'), shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
 export { shadowSharedStyle };

package/dist/esm/styles/shared/table.js

@@ -3,7 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4118
 import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
@@ -57,7 +56,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: token('color.background.neutral', 'rgb(235, 237, 240)'),
       dark: token('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
-    width: "".concat(gridSize(), "px")
+    leftCoverWidth: "".concat(gridSize() * 3, "px")
   }), themed({
     light: token('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: token('color.background.neutral', 'rgb(36, 47, 66)')
@@ -69,7 +68,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: token('color.background.neutral', 'rgb(235, 237, 240)'),
       dark: token('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
-    width: "".concat(gridSize(), "px")
+    leftCoverWidth: "".concat(gridSize() * 3, "px")
   }), themed({
     light: token('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: token('color.background.neutral', 'rgb(36, 47, 66)')

package/dist/esm/types/next-editor-plugin.js

@@ -0,0 +1 @@
+export {};

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

@@ -23,7 +23,7 @@ import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "71.0.2";
+var packageVersion = "72.0.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 

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

@@ -27,13 +27,16 @@ var EmojiNode = /*#__PURE__*/function (_PureComponent) {
     _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "renderWithProvider", function (providers) {
+      var _resourceConfig$optim;
+
       var _this$props = _this.props,
           allowTextFallback = _this$props.allowTextFallback,
           shortName = _this$props.shortName,
           id = _this$props.id,
           fallback = _this$props.fallback,
           fitToHeight = _this$props.fitToHeight,
-          showTooltip = _this$props.showTooltip;
+          showTooltip = _this$props.showTooltip,
+          resourceConfig = _this$props.resourceConfig;
 
       if (allowTextFallback && !providers.emojiProvider) {
         return /*#__PURE__*/React.createElement("span", {
@@ -55,7 +58,13 @@ var EmojiNode = /*#__PURE__*/function (_PureComponent) {
         },
         emojiProvider: providers.emojiProvider,
         showTooltip: showTooltip,
-        fitToHeight: fitToHeight
+        fitToHeight: fitToHeight,
+        optimistic: true,
+        optimisticImageURL: resourceConfig === null || resourceConfig === void 0 ? void 0 : (_resourceConfig$optim = resourceConfig.optimisticImageApi) === null || _resourceConfig$optim === void 0 ? void 0 : _resourceConfig$optim.getUrl({
+          id: id,
+          fallback: fallback,
+          shortName: shortName
+        })
       });
     });
 

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

@@ -12,8 +12,8 @@ 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()));

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

@@ -12,8 +12,8 @@ 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()));

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 { token, useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
+import getColorMessage from './Palettes/getColorMessage';
+import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
 import { colorPaletteWrapper } from './styles';
 
 /**
@@ -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

@@ -243,6 +243,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 +255,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) {