@atlaskit/editor-core 187.8.3 → 187.8.7

package/tmp/api-report-tmp.d.ts

@@ -99,7 +99,7 @@ import type { MentionDescription } from '@atlaskit/mention';
 import { MentionProvider } from '@atlaskit/mention/resource';
 import type { MentionProvider as MentionProvider_2 } from '@atlaskit/mention';
 import { MentionResource } from '@atlaskit/mention/resource';
-import { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import { default as messages } from '@atlaskit/editor-common/messages';
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import { Node as Node_2 } from '@atlaskit/editor-prosemirror/model';
@@ -129,7 +129,6 @@ import { QuickInsertProvider } from '@atlaskit/editor-common/provider-factory';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import type { ReactHookFactory } from '@atlaskit/editor-common/types';
-import type { RefObject } from 'react';
 import type { ReplaceRawValue } from '@atlaskit/editor-common/types';
 import type { ResolvedEditorState } from '@atlaskit/collab-provider';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
@@ -154,6 +153,7 @@ import { UploadEndEventPayload } from '@atlaskit/media-picker/types';
 import { UploadErrorEventPayload } from '@atlaskit/media-picker/types';
 import { UploadParams } from '@atlaskit/media-picker/types';
 import { UploadPreviewUpdateEventPayload } from '@atlaskit/media-picker/types';
+import type { UseStickyToolbarType } from '@atlaskit/editor-common/ui';
 import type { WeekDay } from '@atlaskit/calendar/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
@@ -2164,11 +2164,6 @@ export const updateStatus: (status?: StatusType) => Command;
 // @public (undocumented)
 export const updateStatusWithAnalytics: (inputMethod: InsertBlockInputMethodToolbar, status?: StatusType) => Command;
 
-// @public (undocumented)
-type UseStickyToolbarType = RefObject<HTMLElement> | boolean | {
-    offsetTop: number;
-};
-
 // @public (undocumented)
 export const version: string;
 

package/dist/cjs/ui/Appearance/FullPage/messages.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactIntlNext = require("react-intl-next");
-var _default = (0, _reactIntlNext.defineMessages)({
-  toolbarLabel: {
-    id: 'fabric.editor.toolbarLabel',
-    defaultMessage: 'Editor toolbar',
-    description: 'Label for the ARIA region landmark'
-  },
-  pageActionsLabel: {
-    id: 'fabric.editor.pageActionsLabel',
-    defaultMessage: 'Page actions',
-    description: 'Label for the ARIA region landmark'
-  },
-  editableContentLabel: {
-    id: 'fabric.editor.editableContentLabel',
-    defaultMessage: 'Editable content',
-    description: 'Label for the ARIA region landmark'
-  }
-});
-exports.default = _default;

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

@@ -1,31 +0,0 @@
-"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-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)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
-  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)({
-    arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
-      keyDownHandlerContext: keyDownHandlerContext
-    })
-  }, props));
-});
-var _default = DropdownMenu;
-exports.default = _default;

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

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

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

@@ -1,218 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarArrowKeyNavigationProvider = exports.KeyDownHandlerContext = void 0;
-var _react = require("@emotion/react");
-var _styles = require("../styles");
-var _react2 = _interopRequireWildcard(require("react"));
-var _ReactEditorViewInternal = require("../../create-editor/ReactEditorViewInternal");
-var _messages = _interopRequireDefault(require("../Appearance/FullPage/messages"));
-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; }
-/** @jsx jsx */
-/* eslint-disable no-console */
-
-/*
- **  The context is used to handle the keydown events of submenus.
- **  Because the keyboard navigation is explicitly managed for main toolbar items
- **  Few key presses such as Tab,Arrow Right/Left need ot be handled here via context
- */
-var KeyDownHandlerContext = /*#__PURE__*/_react2.default.createContext({
-  handleArrowLeft: function handleArrowLeft() {},
-  handleArrowRight: function handleArrowRight() {},
-  handleTab: function handleTab() {}
-});
-
-/**
- * This component is a wrapper of main toolbar which listens to keydown events of children
- * and handles left/right arrow key navigation for all focusable elements
- * @param
- * @returns
- */
-exports.KeyDownHandlerContext = KeyDownHandlerContext;
-var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvider(_ref) {
-  var children = _ref.children,
-    editorView = _ref.editorView,
-    childComponentSelector = _ref.childComponentSelector,
-    handleEscape = _ref.handleEscape,
-    disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
-    isShortcutToFocusToolbar = _ref.isShortcutToFocusToolbar,
-    editorAppearance = _ref.editorAppearance,
-    useStickyToolbar = _ref.useStickyToolbar,
-    intl = _ref.intl;
-  var wrapperRef = (0, _react2.useRef)(null);
-  var selectedItemIndex = (0, _react2.useRef)(0);
-  var incrementIndex = (0, _react2.useCallback)(function (list) {
-    var index = 0;
-    if (document.activeElement) {
-      index = list.indexOf(document.activeElement);
-      index = (index + 1) % list.length;
-    }
-    selectedItemIndex.current = index;
-  }, []);
-  var decrementIndex = (0, _react2.useCallback)(function (list) {
-    var index = 0;
-    if (document.activeElement) {
-      index = list.indexOf(document.activeElement);
-      index = (list.length + index - 1) % list.length;
-    }
-    selectedItemIndex.current = index;
-  }, []);
-  var handleArrowRight = function handleArrowRight() {
-    var _filteredFocusableEle;
-    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    incrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
-  };
-  var handleArrowLeft = function handleArrowLeft() {
-    var _filteredFocusableEle2;
-    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    decrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
-  };
-  var handleTab = function handleTab() {
-    var _filteredFocusableEle3;
-    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    (_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
-  };
-  var handleTabLocal = function handleTabLocal() {
-    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    filteredFocusableElements.forEach(function (element) {
-      element.setAttribute('tabindex', '-1');
-    });
-    filteredFocusableElements[selectedItemIndex.current].setAttribute('tabindex', '0');
-  };
-  var focusAndScrollToElement = function focusAndScrollToElement(element) {
-    var scrollToElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    if (scrollToElement) {
-      element === null || element === void 0 ? void 0 : element.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'nearest'
-      });
-    }
-    element.focus();
-  };
-  var submenuKeydownHandleContext = {
-    handleArrowLeft: handleArrowLeft,
-    handleArrowRight: handleArrowRight,
-    handleTab: handleTab
-  };
-  (0, _react2.useLayoutEffect)(function () {
-    if (!wrapperRef.current || disableArrowKeyNavigation) {
-      return;
-    }
-    var element = wrapperRef.current;
-
-    /**
-     * To handle the key events on the list
-     * @param event
-     */
-    var handleKeyDown = function handleKeyDown(event) {
-      var _document$querySelect, _document$querySelect2, _wrapperRef$current;
-      //To trap the focus inside the horizontal toolbar for left and right arrow keys
-      var targetElement = event.target;
-
-      //To filter out the events outside the child component
-      if (!targetElement.closest("".concat(childComponentSelector))) {
-        return;
-      }
-
-      //The key events are from child components such as dropdown menus / popups are ignored
-      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || (_document$querySelect2 = document.querySelector('[data-test-id="color-picker-menu"]')) !== null && _document$querySelect2 !== void 0 && _document$querySelect2.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown' || disableArrowKeyNavigation) {
-        return;
-      }
-      var menuWrapper = document.querySelector('.menu-key-handler-wrapper');
-      if (menuWrapper) {
-        // if menu wrapper exists, then a menu is open and arrow keys will be handled by MenuArrowKeyNavigationProvider
-        return;
-      }
-      var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-      if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
-        return;
-      }
-
-      //This is kind of hack to reset the current focused toolbar item
-      //to handle some use cases such as Tab in/out of main toolbar
-      if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        selectedItemIndex.current = -1;
-      } else {
-        selectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : selectedItemIndex.current;
-      }
-
-      //do not scroll to focused element for sticky toolbar when navigating with arrows to avoid unnesessary scroll jump
-      var allowScrollToElement = !(editorAppearance === 'comment' && !!useStickyToolbar);
-      switch (event.key) {
-        case 'ArrowRight':
-          incrementIndex(filteredFocusableElements);
-          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current], allowScrollToElement);
-          event.preventDefault();
-          break;
-        case 'ArrowLeft':
-          decrementIndex(filteredFocusableElements);
-          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current], allowScrollToElement);
-          event.preventDefault();
-          break;
-        case 'Tab':
-          handleTabLocal();
-          break;
-        case 'Escape':
-          handleEscape(event);
-          break;
-        default:
-      }
-    };
-    var globalKeyDownHandler = function globalKeyDownHandler(event) {
-      //To focus the first element in the toolbar
-      if (isShortcutToFocusToolbar(event)) {
-        var _filteredFocusableEle4, _filteredFocusableEle5;
-        var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-        (_filteredFocusableEle4 = filteredFocusableElements[0]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
-        (_filteredFocusableEle5 = filteredFocusableElements[0]) === null || _filteredFocusableEle5 === void 0 ? void 0 : _filteredFocusableEle5.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-          inline: 'nearest'
-        });
-      }
-    };
-    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
-    var editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
-    if (isShortcutToFocusToolbar) {
-      editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.addEventListener('keydown', globalKeyDownHandler);
-    }
-    return function () {
-      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
-      if (isShortcutToFocusToolbar) {
-        editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
-      }
-    };
-  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
-  return (0, _react.jsx)("div", {
-    css: editorAppearance === 'comment' && _styles.centeredToolbarContainer,
-    className: "custom-key-handler-wrapper",
-    ref: wrapperRef,
-    role: "toolbar",
-    "aria-label": intl.formatMessage(_messages.default.toolbarLabel),
-    "aria-controls": _ReactEditorViewInternal.EDIT_AREA_ID
-  }, (0, _react.jsx)(KeyDownHandlerContext.Provider, {
-    value: submenuKeydownHandleContext
-  }, children));
-};
-exports.ToolbarArrowKeyNavigationProvider = ToolbarArrowKeyNavigationProvider;
-function getFocusableElements(rootNode) {
-  if (!rootNode) {
-    return [];
-  }
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"], div[tabindex="0"]') || [];
-  return Array.from(focusableModalElements);
-}
-function getFilteredFocusableElements(rootNode) {
-  //The focusable elements from child components such as dropdown menus / popups are ignored
-  return getFocusableElements(rootNode).filter(function (elm) {
-    return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons');
-  });
-}

package/dist/es2019/ui/Appearance/FullPage/messages.js

@@ -1,18 +0,0 @@
-import { defineMessages } from 'react-intl-next';
-export default defineMessages({
-  toolbarLabel: {
-    id: 'fabric.editor.toolbarLabel',
-    defaultMessage: 'Editor toolbar',
-    description: 'Label for the ARIA region landmark'
-  },
-  pageActionsLabel: {
-    id: 'fabric.editor.pageActionsLabel',
-    defaultMessage: 'Page actions',
-    description: 'Label for the ARIA region landmark'
-  },
-  editableContentLabel: {
-    id: 'fabric.editor.editableContentLabel',
-    defaultMessage: 'Editable content',
-    description: 'Label for the ARIA region landmark'
-  }
-});

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

@@ -1,18 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import { DropdownMenu as DropdownComponent } from '@atlaskit/editor-common/ui-menu';
-import React, { useContext } from 'react';
-import { KeyDownHandlerContext } from '../ToolbarArrowKeyNavigationProvider';
-const DropdownMenu = /*#__PURE__*/React.memo(({
-  ...props
-}) => {
-  const keyDownHandlerContext = useContext(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.createElement(DropdownComponent, _extends({
-    arrowKeyNavigationProviderOptions: {
-      ...props.arrowKeyNavigationProviderOptions,
-      keyDownHandlerContext
-    }
-  }, props));
-});
-export default DropdownMenu;

package/dist/es2019/ui/DropdownMenu/types.js

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

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

@@ -1,205 +0,0 @@
-/** @jsx jsx */
-/* eslint-disable no-console */
-import { jsx } from '@emotion/react';
-import { centeredToolbarContainer } from '../styles';
-import React, { useCallback, useLayoutEffect, useRef } from 'react';
-import { EDIT_AREA_ID } from '../../create-editor/ReactEditorViewInternal';
-import messages from '../Appearance/FullPage/messages';
-/*
- **  The context is used to handle the keydown events of submenus.
- **  Because the keyboard navigation is explicitly managed for main toolbar items
- **  Few key presses such as Tab,Arrow Right/Left need ot be handled here via context
- */
-export const KeyDownHandlerContext = /*#__PURE__*/React.createContext({
-  handleArrowLeft: () => {},
-  handleArrowRight: () => {},
-  handleTab: () => {}
-});
-
-/**
- * This component is a wrapper of main toolbar which listens to keydown events of children
- * and handles left/right arrow key navigation for all focusable elements
- * @param
- * @returns
- */
-export const ToolbarArrowKeyNavigationProvider = ({
-  children,
-  editorView,
-  childComponentSelector,
-  handleEscape,
-  disableArrowKeyNavigation,
-  isShortcutToFocusToolbar,
-  editorAppearance,
-  useStickyToolbar,
-  intl
-}) => {
-  const wrapperRef = useRef(null);
-  const selectedItemIndex = useRef(0);
-  const incrementIndex = useCallback(list => {
-    let index = 0;
-    if (document.activeElement) {
-      index = list.indexOf(document.activeElement);
-      index = (index + 1) % list.length;
-    }
-    selectedItemIndex.current = index;
-  }, []);
-  const decrementIndex = useCallback(list => {
-    let index = 0;
-    if (document.activeElement) {
-      index = list.indexOf(document.activeElement);
-      index = (list.length + index - 1) % list.length;
-    }
-    selectedItemIndex.current = index;
-  }, []);
-  const handleArrowRight = () => {
-    var _filteredFocusableEle;
-    const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    incrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
-  };
-  const handleArrowLeft = () => {
-    var _filteredFocusableEle2;
-    const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    decrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
-  };
-  const handleTab = () => {
-    var _filteredFocusableEle3;
-    const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    (_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
-  };
-  const handleTabLocal = () => {
-    const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    filteredFocusableElements.forEach(element => {
-      element.setAttribute('tabindex', '-1');
-    });
-    filteredFocusableElements[selectedItemIndex.current].setAttribute('tabindex', '0');
-  };
-  const focusAndScrollToElement = (element, scrollToElement = true) => {
-    if (scrollToElement) {
-      element === null || element === void 0 ? void 0 : element.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'nearest'
-      });
-    }
-    element.focus();
-  };
-  const submenuKeydownHandleContext = {
-    handleArrowLeft,
-    handleArrowRight,
-    handleTab
-  };
-  useLayoutEffect(() => {
-    if (!wrapperRef.current || disableArrowKeyNavigation) {
-      return;
-    }
-    const {
-      current: element
-    } = wrapperRef;
-
-    /**
-     * To handle the key events on the list
-     * @param event
-     */
-    const handleKeyDown = event => {
-      var _document$querySelect, _document$querySelect2, _wrapperRef$current;
-      //To trap the focus inside the horizontal toolbar for left and right arrow keys
-      const targetElement = event.target;
-
-      //To filter out the events outside the child component
-      if (!targetElement.closest(`${childComponentSelector}`)) {
-        return;
-      }
-
-      //The key events are from child components such as dropdown menus / popups are ignored
-      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || (_document$querySelect2 = document.querySelector('[data-test-id="color-picker-menu"]')) !== null && _document$querySelect2 !== void 0 && _document$querySelect2.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown' || disableArrowKeyNavigation) {
-        return;
-      }
-      const menuWrapper = document.querySelector('.menu-key-handler-wrapper');
-      if (menuWrapper) {
-        // if menu wrapper exists, then a menu is open and arrow keys will be handled by MenuArrowKeyNavigationProvider
-        return;
-      }
-      const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-      if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
-        return;
-      }
-
-      //This is kind of hack to reset the current focused toolbar item
-      //to handle some use cases such as Tab in/out of main toolbar
-      if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        selectedItemIndex.current = -1;
-      } else {
-        selectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : selectedItemIndex.current;
-      }
-
-      //do not scroll to focused element for sticky toolbar when navigating with arrows to avoid unnesessary scroll jump
-      const allowScrollToElement = !(editorAppearance === 'comment' && !!useStickyToolbar);
-      switch (event.key) {
-        case 'ArrowRight':
-          incrementIndex(filteredFocusableElements);
-          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current], allowScrollToElement);
-          event.preventDefault();
-          break;
-        case 'ArrowLeft':
-          decrementIndex(filteredFocusableElements);
-          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current], allowScrollToElement);
-          event.preventDefault();
-          break;
-        case 'Tab':
-          handleTabLocal();
-          break;
-        case 'Escape':
-          handleEscape(event);
-          break;
-        default:
-      }
-    };
-    const globalKeyDownHandler = event => {
-      //To focus the first element in the toolbar
-      if (isShortcutToFocusToolbar(event)) {
-        var _filteredFocusableEle4, _filteredFocusableEle5;
-        const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-        (_filteredFocusableEle4 = filteredFocusableElements[0]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
-        (_filteredFocusableEle5 = filteredFocusableElements[0]) === null || _filteredFocusableEle5 === void 0 ? void 0 : _filteredFocusableEle5.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-          inline: 'nearest'
-        });
-      }
-    };
-    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
-    const editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
-    if (isShortcutToFocusToolbar) {
-      editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.addEventListener('keydown', globalKeyDownHandler);
-    }
-    return () => {
-      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
-      if (isShortcutToFocusToolbar) {
-        editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
-      }
-    };
-  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
-  return jsx("div", {
-    css: editorAppearance === 'comment' && centeredToolbarContainer,
-    className: "custom-key-handler-wrapper",
-    ref: wrapperRef,
-    role: "toolbar",
-    "aria-label": intl.formatMessage(messages.toolbarLabel),
-    "aria-controls": EDIT_AREA_ID
-  }, jsx(KeyDownHandlerContext.Provider, {
-    value: submenuKeydownHandleContext
-  }, children));
-};
-function getFocusableElements(rootNode) {
-  if (!rootNode) {
-    return [];
-  }
-  const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"], div[tabindex="0"]') || [];
-  return Array.from(focusableModalElements);
-}
-function getFilteredFocusableElements(rootNode) {
-  //The focusable elements from child components such as dropdown menus / popups are ignored
-  return getFocusableElements(rootNode).filter(elm => !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons'));
-}

package/dist/esm/ui/Appearance/FullPage/messages.js

@@ -1,18 +0,0 @@
-import { defineMessages } from 'react-intl-next';
-export default defineMessages({
-  toolbarLabel: {
-    id: 'fabric.editor.toolbarLabel',
-    defaultMessage: 'Editor toolbar',
-    description: 'Label for the ARIA region landmark'
-  },
-  pageActionsLabel: {
-    id: 'fabric.editor.pageActionsLabel',
-    defaultMessage: 'Page actions',
-    description: 'Label for the ARIA region landmark'
-  },
-  editableContentLabel: {
-    id: 'fabric.editor.editableContentLabel',
-    defaultMessage: 'Editable content',
-    description: 'Label for the ARIA region landmark'
-  }
-});

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

@@ -1,20 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-import _extends from "@babel/runtime/helpers/extends";
-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 { DropdownMenu as DropdownComponent } from '@atlaskit/editor-common/ui-menu';
-import React, { useContext } from 'react';
-import { KeyDownHandlerContext } from '../ToolbarArrowKeyNavigationProvider';
-var DropdownMenu = /*#__PURE__*/React.memo(function (_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  var keyDownHandlerContext = useContext(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.createElement(DropdownComponent, _extends({
-    arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
-      keyDownHandlerContext: keyDownHandlerContext
-    })
-  }, props));
-});
-export default DropdownMenu;

package/dist/esm/ui/DropdownMenu/types.js

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