@atlaskit/editor-core 180.0.0 → 181.0.0

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

@@ -10,9 +10,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _colors = require("@atlaskit/theme/colors");
+var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _ColorPalette = _interopRequireDefault(require("../ColorPalette"));
 var _common = require("../ColorPalette/Palettes/common");
@@ -26,7 +29,12 @@ var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObj
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var colorPickerWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+var colorPickerWrapper = function colorPickerWrapper(theme) {
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
+    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
+  })(theme), _colors.N60A, _colors.N60A);
+};
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPickerButton = function ColorPickerButton(props) {
@@ -36,8 +44,20 @@ var ColorPickerButton = function ColorPickerButton(props) {
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isPopupOpen = _React$useState2[0],
     setIsPopupOpen = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isPopupPositioned = _React$useState4[0],
+    setIsPopupPositioned = _React$useState4[1];
+  var _React$useState5 = _react.default.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    isOpenedByKeyboard = _React$useState6[0],
+    setIsOpenedByKeyboard = _React$useState6[1];
   var togglePopup = function togglePopup() {
     setIsPopupOpen(!isPopupOpen);
+    if (!isPopupOpen) {
+      setIsOpenedByKeyboard(false);
+      setIsPopupPositioned(false);
+    }
   };
   _react.default.useEffect(function () {
     if (props.setDisableParentScroll) {
@@ -45,9 +65,25 @@ var ColorPickerButton = function ColorPickerButton(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isPopupOpen]);
+  var focusButton = function focusButton() {
+    var _buttonRef$current;
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+  };
+  var handleEsc = _react.default.useCallback(function () {
+    setIsOpenedByKeyboard(false);
+    setIsPopupPositioned(false);
+    setIsPopupOpen(false);
+    focusButton();
+  }, []);
+  var onPositionCalculated = _react.default.useCallback(function (position) {
+    setIsPopupPositioned(true);
+    return position;
+  }, []);
   var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
   var onColorSelected = function onColorSelected(color, label) {
+    setIsOpenedByKeyboard(false);
     setIsPopupOpen(false);
+    setIsPopupPositioned(false);
     if (props.onChange) {
       if (props.createAnalyticsEvent) {
         // fire analytics
@@ -69,11 +105,16 @@ var ColorPickerButton = function ColorPickerButton(props) {
       });
       newPalette && props.onChange(newPalette);
     }
+    focusButton();
   };
   var renderPopup = function renderPopup() {
     if (!isPopupOpen || !buttonRef.current) {
       return;
     }
+    var selectedColor = props.currentColor || null;
+    var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(props.colorPalette, selectedColor, props.cols),
+      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
     return (0, _react2.jsx)(_ui.Popup, {
       target: buttonRef.current,
       fitHeight: 350,
@@ -86,20 +127,38 @@ var ColorPickerButton = function ColorPickerButton(props) {
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined,
-      ariaLabel: "Color picker popup"
+      ariaLabel: "Color picker popup",
+      onPositionCalculated: onPositionCalculated
     }, (0, _react2.jsx)("div", {
       css: colorPickerWrapper,
       "data-test-id": "color-picker-menu"
+    }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+      type: _uiMenu.ArrowKeyNavigationType.COLOR,
+      selectedRowIndex: selectedRowIndex,
+      selectedColumnIndex: selectedColumnIndex,
+      closeOnTab: true,
+      handleClose: function handleClose() {
+        return setIsPopupOpen(false);
+      },
+      isOpenedByKeyboard: isOpenedByKeyboard,
+      isPopupPositioned: isPopupPositioned
     }, (0, _react2.jsx)(ColorPaletteWithListeners, {
-      palette: props.colorPalette,
       cols: props.cols,
-      selectedColor: props.currentColor || null,
+      selectedColor: selectedColor,
       onClick: onColorSelected,
-      handleClickOutside: togglePopup
-    })));
+      handleClickOutside: togglePopup,
+      handleEscapeKeydown: handleEsc,
+      paletteOptions: {
+        palette: props.colorPalette,
+        hexToPaletteColor: props.hexToPaletteColor,
+        showSomewhatSemanticTooltips: props.showSomewhatSemanticTooltips,
+        paletteColorTooltipMessages: props.paletteColorTooltipMessages
+      }
+    }))));
   };
   var title = props.title || '';
-  var buttonStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 6px;\n    background-color: ", ";\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", "px;\n      height: ", "px;\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), props.currentColor || 'transparent', ((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14, ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14);
+  var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
+  var buttonStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 6px;\n    background-color: ", ";\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", "px;\n      height: ", "px;\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14, ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14);
   return (0, _react2.jsx)("div", {
     css: colorPickerButtonWrapper
   }, (0, _react2.jsx)(_tooltip.default, {
@@ -110,6 +169,13 @@ var ColorPickerButton = function ColorPickerButton(props) {
     "aria-label": title,
     spacing: "compact",
     onClick: togglePopup,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
     css: buttonStyle
   })), renderPopup());
 };

package/dist/cjs/ui/ConfigPanel/ConfigPanel.js

@@ -23,7 +23,7 @@ var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 var _merge = _interopRequireDefault(require("lodash/merge"));
-var _analytics = require("../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _LoadingState = _interopRequireDefault(require("./LoadingState"));
 var _Header = _interopRequireDefault(require("./Header"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));

package/dist/cjs/ui/ConfigPanel/Fields/Expand.js

@@ -40,6 +40,7 @@ function Expand(_ref) {
     expanded = _useState2[0],
     setExpanded = _useState2[1];
   return (0, _react2.jsx)("div", {
+    "data-testid": "expand-config-field",
     css: expandContainer
   }, (0, _react2.jsx)("div", {
     css: expandControl

package/dist/cjs/ui/ConfigPanel/utils.js

@@ -1,36 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateRequired = exports.validate = exports.isValidHex = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.getNameFromDuplicateField = exports.fromEntries = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+exports.validateRequired = exports.validate = exports.isValidHex = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.getNameFromDuplicateField = void 0;
 var _types = require("./types");
 var validate = function validate(field, value) {
   return validateRequired(field, value);
 };
 exports.validate = validate;
-var fromEntries = function fromEntries(iterable) {
-  return (0, _toConsumableArray2.default)(iterable).reduce(function (obj, _ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-      key = _ref2[0],
-      val = _ref2[1];
-    obj[key] = val;
-    return obj;
-  }, {});
-};
-exports.fromEntries = fromEntries;
 var isEmptyString = function isEmptyString(value) {
   return typeof value === 'string' && value === '';
 };
 var isEmptyArray = function isEmptyArray(value) {
   return Array.isArray(value) && value.length === 0;
 };
-var validateRequired = function validateRequired(_ref3, value) {
-  var isRequired = _ref3.isRequired,
-    isMultiple = _ref3.isMultiple;
+var validateRequired = function validateRequired(_ref, value) {
+  var isRequired = _ref.isRequired,
+    isMultiple = _ref.isMultiple;
   if (isRequired) {
     var isUndefined = typeof value === 'undefined';
     var isEmpty = isEmptyString(value) || isMultiple && isEmptyArray(value) || false;

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

@@ -47,7 +47,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, (0, _styles11.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

package/dist/cjs/ui/ContextPanel/context.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContextPanelWidthProvider = exports.ContextPanelProvider = exports.ContextPanelConsumer = void 0;
+exports.ContextPanelWidthProvider = exports.ContextPanelProvider = exports.ContextPanelConsumer = exports.ContextPanel = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,16 +15,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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; } }
-var _React$createContext = /*#__PURE__*/_react.default.createContext({
-    width: 0,
-    positionedOverEditor: false,
-    broadcastWidth: function broadcastWidth() {},
-    broadcastPosition: function broadcastPosition() {}
-  }),
-  Provider = _React$createContext.Provider,
-  Consumer = _React$createContext.Consumer;
-exports.ContextPanelConsumer = Consumer;
-exports.ContextPanelProvider = Provider;
+var ContextPanel = /*#__PURE__*/_react.default.createContext({
+  width: 0,
+  positionedOverEditor: false,
+  broadcastWidth: function broadcastWidth() {},
+  broadcastPosition: function broadcastPosition() {}
+});
+exports.ContextPanel = ContextPanel;
 var ContextPanelWidthProvider = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ContextPanelWidthProvider, _React$Component);
   var _super = _createSuper(ContextPanelWidthProvider);
@@ -70,4 +67,8 @@ var ContextPanelWidthProvider = /*#__PURE__*/function (_React$Component) {
   }]);
   return ContextPanelWidthProvider;
 }(_react.default.Component);
-exports.ContextPanelWidthProvider = ContextPanelWidthProvider;
+exports.ContextPanelWidthProvider = ContextPanelWidthProvider;
+var Provider = ContextPanel.Provider,
+  Consumer = ContextPanel.Consumer;
+exports.ContextPanelConsumer = Consumer;
+exports.ContextPanelProvider = Provider;

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

@@ -6,21 +6,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _react = _interopRequireWildcard(require("react"));
 var _ToolbarArrowKeyNavigationProvider = require("../ToolbarArrowKeyNavigationProvider");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2.default)(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; }
 var Dropdown = /*#__PURE__*/_react.default.memo(function (_ref) {
   var props = (0, _extends2.default)({}, _ref);
-  var keydownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
+  var keyDownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
   return (
     /*#__PURE__*/
     //This context is to handle the tab, Arrow Right/Left key events for dropdown.
     //Default context has the void callbacks for above key events
     _react.default.createElement(_uiMenu.Dropdown, (0, _extends2.default)({
-      keyDownHandlerContext: keydownHandlerContext
+      arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+        keyDownHandlerContext: keyDownHandlerContext
+      })
     }, props))
   );
 });

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

@@ -6,19 +6,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _react = _interopRequireWildcard(require("react"));
 var _ToolbarArrowKeyNavigationProvider = require("../ToolbarArrowKeyNavigationProvider");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2.default)(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; }
 var DropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   var props = (0, _extends2.default)({}, _ref);
-  var keydownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
+  var keyDownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
   //This context is to handle the tab, Arrow Right/Left key events for dropdown.
   //Default context has the void callbacks for above key events
   return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenu, (0, _extends2.default)({
-    keyDownHandlerContext: keydownHandlerContext
+    arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+      keyDownHandlerContext: keyDownHandlerContext
+    })
   }, props));
 });
 var _default = DropdownMenu;

package/dist/cjs/ui/ElementBrowser/ModalElementBrowser.js

@@ -123,7 +123,7 @@ var Footer = function Footer(_ref) {
 var HelpLink = function HelpLink(url, helpText) {
   return (0, _react2.jsx)(_customThemeButton.default, {
     iconBefore: (0, _react2.jsx)(_questionCircle.default, {
-      label: "help",
+      label: "",
       size: "medium"
     }),
     appearance: "subtle-link",

package/dist/cjs/ui/ElementBrowser/components/CategoryList.js

@@ -18,7 +18,7 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _constants = require("../constants");
 var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
-var _analytics = require("../../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _templateObject;
 var _excluded = ["categories"],
   _excluded2 = ["buttonStyles"];

package/dist/cjs/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -20,7 +20,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _fallback = _interopRequireDefault(require("../../../../plugins/quick-insert/assets/fallback"));
 var _TypeAheadListItem = require("../../../../plugins/type-ahead/ui/TypeAheadListItem");
 var _styles = require("../../../styles");

package/dist/cjs/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _ElementList = _interopRequireDefault(require("./ElementList/ElementList"));
 var _CategoryList = _interopRequireDefault(require("./CategoryList"));
 var _ElementSearch = _interopRequireDefault(require("./ElementSearch"));

package/dist/cjs/ui/ElementBrowser/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_MARGIN = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.MODAL_WRAPPER_PADDING = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
+exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.MODAL_WRAPPER_PADDING = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
 var _constants = require("@atlaskit/theme/constants");
 var GRID_SIZE = (0, _constants.gridSize)();
 exports.GRID_SIZE = GRID_SIZE;
@@ -27,8 +27,6 @@ var SIDEBAR_HEADING_PADDING_LEFT = '12px';
 exports.SIDEBAR_HEADING_PADDING_LEFT = SIDEBAR_HEADING_PADDING_LEFT;
 var INLINE_SIDEBAR_HEIGHT = '54px';
 exports.INLINE_SIDEBAR_HEIGHT = INLINE_SIDEBAR_HEIGHT;
-var SEARCH_ITEM_MARGIN = '12px';
-exports.SEARCH_ITEM_MARGIN = SEARCH_ITEM_MARGIN;
 var SEARCH_ITEM_HEIGHT_WIDTH = '20px';
 exports.SEARCH_ITEM_HEIGHT_WIDTH = SEARCH_ITEM_HEIGHT_WIDTH;
 var SCROLLBAR_WIDTH = 15;

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

@@ -92,11 +92,11 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
   (0, _createClass2.default)(PanelTextInput, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.defaultValue !== this.props.defaultValue) {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.defaultValue !== this.props.defaultValue) {
         this.setState({
-          value: nextProps.defaultValue
+          value: this.props.defaultValue
         });
       }
     }

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

@@ -18,7 +18,7 @@ var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _analyticsNextStableReactContext = _interopRequireDefault(require("@atlaskit/analytics-next-stable-react-context"));
 var _eventDispatcher = require("../../event-dispatcher");
-var _enums = require("../../plugins/analytics/types/enums");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _reactIntlNext = require("react-intl-next");
 var _components = require("@atlaskit/theme/components");
 var _PortalProviderThemesProvider = require("./PortalProviderThemesProvider");
@@ -112,9 +112,9 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
         if (this.onAnalyticsEvent) {
           this.onAnalyticsEvent({
             payload: {
-              action: _enums.ACTION.FAILED_TO_UNMOUNT,
-              actionSubject: _enums.ACTION_SUBJECT.EDITOR,
-              actionSubjectId: _enums.ACTION_SUBJECT_ID.REACT_NODE_VIEW,
+              action: _analytics.ACTION.FAILED_TO_UNMOUNT,
+              actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.REACT_NODE_VIEW,
               attributes: {
                 error: error,
                 domNodes: {
@@ -122,7 +122,7 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
                   child: container.firstElementChild ? container.firstElementChild.className : undefined
                 }
               },
-              eventType: _enums.EVENT_TYPE.OPERATIONAL
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
             }
           });
         }

package/dist/cjs/ui/Resizer/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.snapTo = exports.imageAlignmentMap = exports.handleSides = exports.alignmentLayouts = void 0;
+exports.snapTo = exports.imageAlignmentMap = exports.handleSides = void 0;
 var snapTo = function snapTo(target, points) {
   return points.length === 0 ?
   // extreme last case if there are no points somehow
@@ -14,8 +14,6 @@ var snapTo = function snapTo(target, points) {
 exports.snapTo = snapTo;
 var handleSides = ['left', 'right'];
 exports.handleSides = handleSides;
-var alignmentLayouts = ['align-start', 'align-end'];
-exports.alignmentLayouts = alignmentLayouts;
 var imageAlignmentMap = {
   left: 'start',
   right: 'end'

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

@@ -1,48 +1,42 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _width = require("../../plugins/width");
 var _ui = require("@atlaskit/editor-common/ui");
 var _context = require("../ContextPanel/context");
-function useCreateWidthCallbacks(_ref) {
-  var setContextPanelWidth = _ref.setContextPanelWidth,
-    setContainerWidth = _ref.setContainerWidth;
-  var contextPanelWidthCallback = _react.default.useCallback(function (_ref2) {
-    var width = _ref2.width;
-    setContextPanelWidth(width);
-    return null;
-  }, [setContextPanelWidth]);
-  var containerWidthCallback = _react.default.useCallback(function (_ref3) {
-    var width = _ref3.width;
-    setContainerWidth(width);
-    return null;
-  }, [setContainerWidth]);
-  return [contextPanelWidthCallback, containerWidthCallback];
-}
-var WidthEmitter = function WidthEmitter(_ref4) {
-  var editorView = _ref4.editorView;
-  var _React$useState = _react.default.useState(0),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    contextPanelWidth = _React$useState2[0],
-    setContextPanelWidth = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(0),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    containerWidth = _React$useState4[0],
-    setContainerWidth = _React$useState4[1];
-  var _useCreateWidthCallba = useCreateWidthCallbacks({
-      setContextPanelWidth: setContextPanelWidth,
-      setContainerWidth: setContainerWidth
-    }),
-    _useCreateWidthCallba2 = (0, _slicedToArray2.default)(_useCreateWidthCallba, 2),
-    contextPanelWidthCallback = _useCreateWidthCallba2[0],
-    containerWidthCallback = _useCreateWidthCallba2[1];
-  _react.default.useEffect(function () {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Why do we need this? Why not just use the width from the context directly rather than this?
+// Well my friend - some of the VR tests break, seemingly due to the fact that existing behaviour
+// assumes the initial value is 0, the width from context may not start from 0 however.
+// We should investigate further if we can remove this entirely but for now we'll do this
+// awkward workaround to keep the behaviour consistent.
+var useListener = function useListener(contextValue) {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setValue(contextValue);
+  }, [contextValue]);
+  return value;
+};
+var WidthEmitter = function WidthEmitter(_ref) {
+  var editorView = _ref.editorView;
+  var _useContext = (0, _react.useContext)(_context.ContextPanel),
+    contextPanelWidthContext = _useContext.width;
+  var _useContext2 = (0, _react.useContext)(_ui.WidthContext),
+    containerWidthContext = _useContext2.width;
+  var containerWidth = useListener(containerWidthContext);
+  var contextPanelWidth = useListener(contextPanelWidthContext);
+  (0, _react.useEffect)(function () {
     var width = containerWidth - contextPanelWidth;
     if (width <= 0 || isNaN(width) || !editorView) {
       return;
@@ -58,7 +52,7 @@ var WidthEmitter = function WidthEmitter(_ref4) {
     dispatch(tr);
     return function () {};
   }, [editorView, contextPanelWidth, containerWidth]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, contextPanelWidthCallback), /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, containerWidthCallback));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 };
 var _default = WidthEmitter;
 exports.default = _default;

package/dist/cjs/ui/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.expandIconWrapperStyle = exports.dropShadow = exports.clickSelectWrapperStyle = exports.buttonGroupStyle = exports.buttonContentStyle = exports.buttonContentReducedSpacingStyle = void 0;
+exports.expandIconWrapperStyle = exports.clickSelectWrapperStyle = exports.buttonGroupStyle = exports.buttonContentStyle = exports.buttonContentReducedSpacingStyle = void 0;
 Object.defineProperty(exports, "scrollbarStyles", {
   enumerable: true,
   get: function get() {
@@ -24,7 +24,7 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 var buttonGroupStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
 exports.buttonGroupStyle = buttonGroupStyle;
 var separatorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"));
@@ -40,10 +40,6 @@ exports.triggerWrapperStyles = triggerWrapperStyles;
 var buttonContentStyle = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 6px;\n"])));
 exports.buttonContentStyle = buttonContentStyle;
 var buttonContentReducedSpacingStyle = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n"])));
-
-// Taken from the style of inline dialog components
 exports.buttonContentReducedSpacingStyle = buttonContentReducedSpacingStyle;
-var dropShadow = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n"])), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"));
-exports.dropShadow = dropShadow;
-var clickSelectWrapperStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
+var clickSelectWrapperStyle = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
 exports.clickSelectWrapperStyle = clickSelectWrapperStyle;

package/dist/cjs/utils/document.js

@@ -20,6 +20,7 @@ exports.isNodeEmpty = isNodeEmpty;
 exports.isProseMirrorSchemaCheckError = isProseMirrorSchemaCheckError;
 exports.isSelectionEndOfParagraph = void 0;
 exports.nodesBetweenChanged = nodesBetweenChanged;
+exports.processRawFragmentValue = processRawFragmentValue;
 exports.processRawValue = processRawValue;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _prosemirrorModel = require("prosemirror-model");
@@ -129,6 +130,20 @@ function bracketTyped(state) {
   }
   return false;
 }
+function processRawFragmentValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
+  if (!value) {
+    return;
+  }
+  var adfEntities = value.map(function (item) {
+    return processRawValue(schema, item, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent);
+  }).filter(function (item) {
+    return Boolean(item);
+  });
+  if (adfEntities.length === 0) {
+    return;
+  }
+  return _prosemirrorModel.Fragment.from(adfEntities);
+}
 function processRawValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
   if (!value) {
     return;