@atlaskit/editor-plugin-floating-toolbar 0.5.0 → 0.6.0

package/dist/es2019/ui/ScrollButtons.js

@@ -0,0 +1,141 @@
+/** @jsx jsx */
+import React, { useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import rafSchedule from 'raf-schd';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
+import { N30 } from '@atlaskit/theme/colors';
+import messages from './messages';
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const toolbarScrollButtons = css`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: ${"var(--ds-space-050, 4px)"};
+  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
+  border-left: solid ${`var(--ds-border, ${N30})`} 1px;
+  flex-shrink: 0;
+  align-items: center;
+`;
+const LeftIcon = ChevronLeftLargeIcon;
+const RightIcon = ChevronRightLargeIcon;
+export const ScrollButtons = ({
+  intl,
+  scrollContainerRef,
+  node,
+  disabled
+}) => {
+  const buttonsContainerRef = useRef(null);
+  const [needScroll, setNeedScroll] = useState(false);
+  const [canScrollLeft, setCanScrollLeft] = useState(true);
+  const [canScrollRight, setCanScrollRight] = useState(true);
+  const setCanScrollDebounced = rafSchedule(() => {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    const {
+      scrollLeft,
+      scrollWidth,
+      offsetWidth
+    } = scrollContainerRef.current;
+    setCanScrollLeft(scrollLeft > 0);
+    setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
+  });
+
+  const onScroll = () => setCanScrollDebounced();
+  const scrollLeft = () => {
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0;
+
+    // scroll to current position - scroll container width
+    let scrollTo = scrollLeft - scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  const scrollRight = () => {
+    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0;
+
+    // scroll to current position + scroll container width
+    let scrollTo = scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  const resizeObserver = new ResizeObserver(t => {
+    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
+    const widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
+    const availableSpace = (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : (_scrollContainerRef$c9 = _scrollContainerRef$c8.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  useEffect(() => {
+    onScroll();
+    const scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      // enable/disable scroll buttons depending on scroll position
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      scrollContainerRefCurrent.addEventListener('scroll', onScroll);
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return () => {
+      if (scrollContainerRefCurrent) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    const scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 ? void 0 : _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [node.type]);
+  return needScroll ? jsx("div", {
+    ref: buttonsContainerRef,
+    css: toolbarScrollButtons,
+    className: "scroll-buttons"
+  }, jsx(Button, {
+    title: intl.formatMessage(messages.floatingToolbarScrollLeft),
+    icon: jsx(LeftIcon, {
+      label: intl.formatMessage(messages.floatingToolbarScrollLeft)
+    }),
+    onClick: scrollLeft,
+    disabled: !canScrollLeft || disabled
+  }), jsx(Button, {
+    title: intl.formatMessage(messages.floatingToolbarScrollRight),
+    icon: jsx(RightIcon, {
+      label: intl.formatMessage(messages.floatingToolbarScrollRight)
+    }),
+    onClick: scrollRight,
+    disabled: !canScrollRight || disabled
+  })) : null;
+};

package/dist/es2019/ui/Select.js

@@ -0,0 +1,62 @@
+import React, { useRef } from 'react';
+import Select from '@atlaskit/select';
+export default function Search(props) {
+  const selectRef = useRef(null);
+  const {
+    width = 200
+  } = props;
+  const style = React.useMemo(() => ({
+    container: base => ({
+      ...base,
+      width
+    }),
+    menuPortal: base => {
+      var _selectRef$current, _selectRef$current$se, _selectRef$current$se2, _selectRef$current2, _selectRef$current2$s, _selectRef$current2$s2, _selectRef$current2$s3;
+      // ED:16095: We add two possible getter paths for safely reaching into the underlying
+      // react-select element. We first try a getter that conforms with react-select v5 APIs,
+      // Failing that, we try a getter consistent with react-select v4 APIs. (We
+      // handle both as consumers may control the time of the actual dependency version
+      // cutover).
+      const controlWrapper = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : (_selectRef$current$se = _selectRef$current.select) === null || _selectRef$current$se === void 0 ? void 0 : (_selectRef$current$se2 = _selectRef$current$se.controlRef) === null || _selectRef$current$se2 === void 0 ? void 0 : _selectRef$current$se2.parentNode) || (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : (_selectRef$current2$s = _selectRef$current2.select) === null || _selectRef$current2$s === void 0 ? void 0 : (_selectRef$current2$s2 = _selectRef$current2$s.select) === null || _selectRef$current2$s2 === void 0 ? void 0 : (_selectRef$current2$s3 = _selectRef$current2$s2.controlRef) === null || _selectRef$current2$s3 === void 0 ? void 0 : _selectRef$current2$s3.parentNode);
+      const menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
+        // since the portal is now outside, we need to position it as before
+        top: controlWrapper.offsetTop,
+        left: controlWrapper.offsetLeft,
+        height: controlWrapper.offsetHeight,
+        width
+      } : {};
+      return {
+        ...base,
+        ...menuPortalStyles
+      };
+    }
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [width]);
+  const onMenuOpen = () => {
+    if (props.setDisableParentScroll) {
+      props.setDisableParentScroll(true);
+    }
+  };
+  const onMenuClose = () => {
+    if (props.setDisableParentScroll) {
+      props.setDisableParentScroll(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Select, {
+    ref: selectRef,
+    options: props.options,
+    value: props.defaultValue,
+    onChange: props.onChange,
+    placeholder: props.placeholder,
+    spacing: "compact",
+    menuPlacement: "auto",
+    filterOption: props.filterOption,
+    styles: style,
+    menuPortalTarget: props.mountPoint,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    "aria-label": props.ariaLabel,
+    classNamePrefix: props.classNamePrefix
+  });
+}

package/dist/es2019/ui/Separator.js

@@ -0,0 +1,2 @@
+import { FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+export default FloatingToolbarSeparator;

package/dist/es2019/ui/SimpleModal.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export const SimpleModal = props => {
+  const {
+    onConfirm,
+    onClose,
+    options,
+    intl: {
+      formatMessage
+    },
+    testId
+  } = props;
+  const heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
+  const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  const cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? `${testId}-cancel-button` : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: () => {
+      onConfirm();
+      onClose();
+    },
+    testId: testId ? `${testId}-confirm-button` : undefined
+  }, okButtonLabel)));
+};

package/dist/es2019/ui/Toolbar.js

@@ -0,0 +1,428 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React, { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import ButtonGroup from '@atlaskit/button/button-group';
+import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
+import { Announcer, FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import { DN70 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { themed } from '@atlaskit/theme/components';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { borderRadius } from '@atlaskit/theme/constants';
+import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
+import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
+import Dropdown from './Dropdown';
+import { EmojiPickerButton } from './EmojiPickerButton';
+import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
+import Input from './Input';
+import messages from './messages';
+import { ScrollButtons } from './ScrollButtons';
+import Select from './Select';
+import Separator from './Separator';
+const ToolbarItems = /*#__PURE__*/React.memo(({
+  items,
+  dispatchCommand,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  editorView,
+  dispatchAnalyticsEvent,
+  popupsScrollableElement,
+  scrollable,
+  providerFactory,
+  extensionsProvider,
+  node,
+  setDisableScroll,
+  mountRef,
+  featureFlags,
+  api
+}) => {
+  const emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
+    var _api$contextPanel, _api$extension;
+    switch (item.type) {
+      case 'button':
+        const ButtonIcon = item.icon;
+        const onClickHandler = () => {
+          if (item.confirmDialog) {
+            dispatchCommand(showConfirmDialog(idx));
+          } else {
+            dispatchCommand(item.onClick);
+            if (item.focusEditoronEnter && !(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+              editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+            }
+          }
+        };
+        return jsx(Button, {
+          className: item.className,
+          key: idx,
+          title: item.title,
+          href: item.href,
+          icon: item.icon ? jsx(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          appearance: item.appearance,
+          target: item.target,
+          onClick: onClickHandler,
+          onMouseEnter: () => dispatchCommand(item.onMouseEnter),
+          onMouseLeave: () => dispatchCommand(item.onMouseLeave),
+          onFocus: () => dispatchCommand(item.onFocus),
+          onBlur: () => dispatchCommand(item.onBlur),
+          selected: item.selected,
+          disabled: item.disabled,
+          tooltipContent: item.tooltipContent,
+          testId: item.testId,
+          hideTooltipOnClick: item.hideTooltipOnClick,
+          ariaHasPopup: item.ariaHasPopup,
+          tabIndex: item.tabIndex
+        }, item.showTitle && item.title);
+      case 'input':
+        return jsx(Input, {
+          key: idx,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          defaultValue: item.defaultValue,
+          placeholder: item.placeholder,
+          onSubmit: value => dispatchCommand(item.onSubmit(value)),
+          onBlur: value => dispatchCommand(item.onBlur(value))
+        });
+      case 'custom':
+        {
+          return item.render(editorView, idx, dispatchAnalyticsEvent);
+        }
+      case 'dropdown':
+        const DropdownIcon = item.icon;
+        return jsx(Dropdown, {
+          key: idx,
+          title: item.title,
+          icon: DropdownIcon && jsx(DropdownIcon, {
+            label: item.title
+          }),
+          dispatchCommand: dispatchCommand,
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: item.hideExpandIcon,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && `${item.id}-dropdownList`,
+          alignDropdownWithToolbar: items.length === 1
+        });
+      case 'select':
+        if (item.selectType === 'list') {
+          const ariaLabel = item.title || item.placeholder;
+          return jsx(Select, {
+            key: idx,
+            dispatchCommand: dispatchCommand,
+            options: item.options,
+            hideExpandIcon: item.hideExpandIcon,
+            mountPoint: scrollable ? mountRef.current : undefined,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            defaultValue: item.defaultValue,
+            placeholder: item.placeholder,
+            onChange: selected => dispatchCommand(item.onChange(selected)),
+            ariaLabel: ariaLabel,
+            filterOption: item.filterOption,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+            classNamePrefix: 'floating-toolbar-select'
+          });
+        }
+        if (item.selectType === 'color') {
+          return jsx(ColorPickerButton, {
+            skipFocusButtonAfterPick: true,
+            key: idx,
+            title: item.title,
+            onChange: selected => {
+              dispatchCommand(item.onChange(selected));
+            },
+            colorPalette: item.options,
+            currentColor: item.defaultValue ? item.defaultValue.value : undefined,
+            placement: "Panels",
+            mountPoint: emojiAndColourPickerMountPoint,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined
+            // Currently in floating toolbar, color picker is only
+            //  used in panel and table cell background color.
+            // Both uses same color palette.
+            // That's why hard-coding hexToEditorBackgroundPaletteColor
+            //  and paletteColorTooltipMessages.
+            // When we need to support different color palette
+            //  in floating toolbar, we need to set hexToPaletteColor
+            //  and paletteColorTooltipMessages in item options.
+            ,
+            hexToPaletteColor: hexToEditorBackgroundPaletteColor,
+            paletteColorTooltipMessages: backgroundPaletteTooltipMessages
+          });
+        }
+        if (item.selectType === 'emoji') {
+          return jsx(EmojiPickerButton, {
+            key: idx,
+            editorView: editorView,
+            title: item.title,
+            providerFactory: providerFactory,
+            isSelected: item.selected,
+            onChange: selected => dispatchCommand(item.onChange(selected)),
+            mountPoint: emojiAndColourPickerMountPoint,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          });
+        }
+        return null;
+      case 'extensions-placeholder':
+        if (!editorView || !extensionsProvider) {
+          return null;
+        }
+        const {
+          extendFloatingToolbar
+        } = featureFlags || {};
+        if (!extendFloatingToolbar) {
+          return null;
+        }
+        return jsx(ExtensionsPlaceholder, {
+          key: idx,
+          node: node,
+          editorView: editorView,
+          extensionProvider: extensionsProvider,
+          separator: item.separator,
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
+        });
+      case 'separator':
+        return jsx(Separator, {
+          key: idx
+        });
+    }
+  }));
+}, (prevProps, nextProps) => {
+  if (!nextProps.node) {
+    return false;
+  }
+  // only rerender toolbar items if the node is different
+  // otherwise it causes an issue where multiple popups stays open
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const toolbarContainer = (theme, scrollable, hasSelect, firstElementIsSelect) => css`
+  background-color: ${themed({
+  light: "var(--ds-surface-overlay, white)",
+  dark: `var(--ds-surface-overlay, ${DN70})`
+})(theme)};
+  border-radius: ${borderRadius()}px;
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
+  display: flex;
+  line-height: 1;
+  box-sizing: border-box;
+
+  & > div > div {
+    align-items: center;
+  }
+  ${scrollable ? css`
+        ${hasSelect ? css`
+              height: 40px;
+            ` : css`
+              height: 32px;
+            `}
+        overflow: hidden;
+      ` : css`
+        padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
+        ${firstElementIsSelect && css`
+          padding-left: ${"var(--ds-space-050, 4px)"};
+        `}
+      `}
+`;
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => css`
+  ${scrollable ? css`
+        ${scrollDisabled ? css`
+              overflow: hidden;
+            ` : css`
+              overflow-x: auto;
+              overflow-y: hidden;
+            `}
+        -webkit-overflow-scrolling: touch;
+        padding: ${"var(--ds-space-050, 4px)"} 0 50px;
+        > div {
+          > div:first-child {
+            ${firstElementIsSelect ? css`
+                  margin-left: ${"var(--ds-space-050, 4px)"};
+                ` : css`
+                  margin-left: ${"var(--ds-space-100, 8px)"};
+                `}
+          }
+          > div:last-child {
+            margin-right: ${"var(--ds-space-100, 8px)"};
+          }
+        }
+      ` : css`
+        display: flex;
+      `}
+`;
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class Toolbar extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "shouldHandleArrowKeys", () => {
+      var _this$props$items;
+      //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
+      //Usually the button which has menus or popups
+      return !((_this$props$items = this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(item => item.type === 'custom' && item.disableArrowNavigation));
+    });
+    _defineProperty(this, "handleEscape", event => {
+      var _this$props$editorVie;
+      // If any menu is open inside the floating toolbar 'Esc' key should not
+      // focus the editorview.
+      // Event can't be stopped as they are not childnodes of floating toolbar
+
+      const isDropdownOpen = !!document.querySelector('[data-role="droplistContent"]');
+      const isSelectMenuOpen = !!document.querySelector('.floating-toolbar-select__menu');
+      if (isDropdownOpen || isSelectMenuOpen) {
+        return;
+      }
+      (_this$props$editorVie = this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
+      event.preventDefault();
+      event.stopPropagation();
+    });
+    this.scrollContainerRef = /*#__PURE__*/React.createRef();
+    this.mountRef = /*#__PURE__*/React.createRef();
+    this.toolbarContainerRef = /*#__PURE__*/React.createRef();
+    this.state = {
+      scrollDisabled: false,
+      mounted: false
+    };
+  }
+  // remove any decorations added by toolbar buttons i.e danger and selected styling
+  // this prevents https://product-fabric.atlassian.net/browse/ED-10207
+  resetStyling({
+    table
+  }) {
+    if (this.props.editorView) {
+      var _this$props$api;
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      if (table) {
+        return clearHoverSelection()(state, dispatch);
+      }
+      (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : _this$props$api.decorations.actions.removeDecoration(state, dispatch);
+    }
+  }
+  setDisableScroll(disabled) {
+    // wait before setting disabled state incase users jumping from one popup to another
+    if (disabled) {
+      requestAnimationFrame(() => {
+        this.setState({
+          scrollDisabled: disabled
+        });
+      });
+    } else {
+      this.setState({
+        scrollDisabled: disabled
+      });
+    }
+  }
+  componentDidMount() {
+    this.setState({
+      mounted: true
+    });
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props;
+    checkShouldForceFocusAndApply((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.editorView);
+    if (this.props.node !== prevProps.node) {
+      this.resetStyling({
+        table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
+      });
+    }
+  }
+  componentWillUnmount() {
+    const {
+      editorView
+    } = this.props;
+    if (editorView) {
+      const {
+        state: {
+          tr
+        },
+        dispatch
+      } = editorView;
+      dispatch(forceFocusSelector(null)(tr));
+    }
+    this.resetStyling({
+      table: this.props.node.type.name === 'table'
+    });
+  }
+  render() {
+    const {
+      items,
+      className,
+      node,
+      intl,
+      scrollable
+    } = this.props;
+    if (!items || !items.length) {
+      return null;
+    }
+
+    // Select has left padding of 4px to the border, everything else 8px
+    const firstElementIsSelect = items[0].type === 'select';
+    const hasSelect = items.find(item => item.type === 'select' && item.selectType === 'list');
+    const isShortcutToFocusToolbar = event => {
+      //Alt + F10 to reach first element in this floating toolbar
+      return event.altKey && (event.key === 'F10' || event.keyCode === 121);
+    };
+    return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
+      editorView: this.props.editorView,
+      handleEscape: this.handleEscape,
+      disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
+      childComponentSelector: "[data-testid='editor-floating-toolbar']",
+      isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+      intl: intl
+    }, jsx("div", {
+      ref: this.toolbarContainerRef,
+      css: theme => [toolbarContainer({
+        theme
+      }, scrollable, hasSelect !== undefined, firstElementIsSelect)],
+      "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
+      role: "toolbar",
+      "data-testid": "editor-floating-toolbar",
+      className: className
+    }, jsx(Announcer, {
+      text: intl.formatMessage(messages.floatingToolbarAnnouncer),
+      delay: 250
+    }), jsx("div", {
+      "data-testid": "floating-toolbar-items",
+      ref: this.scrollContainerRef
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      ,
+      css: toolbarOverflow(scrollable, this.state.scrollDisabled, firstElementIsSelect)
+    }, jsx(ToolbarItems, _extends({}, this.props, {
+      setDisableScroll: this.setDisableScroll.bind(this),
+      mountRef: this.mountRef,
+      mounted: this.state.mounted,
+      featureFlags: this.props.featureFlags
+    }))), scrollable && jsx(ScrollButtons, {
+      intl: intl,
+      scrollContainerRef: this.scrollContainerRef,
+      node: node,
+      disabled: this.state.scrollDisabled
+    })), jsx("div", {
+      ref: this.mountRef
+    })));
+  }
+}
+export default injectIntl(Toolbar);

package/dist/es2019/ui/ToolbarLoader.js

@@ -0,0 +1,6 @@
+import Loadable from 'react-loadable';
+export const ToolbarLoader = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-core-floating-toolbar" */
+  './Toolbar').then(mod => mod.default),
+  loading: () => null
+});