@atlaskit/editor-core 187.48.6 → 187.48.8

package/dist/es2019/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -1,137 +0,0 @@
-/** @jsx jsx */
-import React, { useEffect, useState, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
-import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
-import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
-import messages from './messages';
-import rafSchedule from 'raf-schd';
-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
-      scrollContainerRefCurrent.addEventListener('scroll', onScroll);
-
-      // watch for toolbar resize and show/hide scroll buttons if needed
-      resizeObserver.observe(scrollContainerRefCurrent);
-    }
-    return () => {
-      if (scrollContainerRefCurrent) {
-        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/plugins/floating-toolbar/ui/Select.js

@@ -1,62 +0,0 @@
-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/plugins/floating-toolbar/ui/Separator.js

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

package/dist/es2019/plugins/floating-toolbar/ui/SimpleModal.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import Button from '@atlaskit/button/standard-button';
-import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } 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/plugins/floating-toolbar/ui/Toolbar.js

@@ -1,419 +0,0 @@
-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 ButtonGroup from '@atlaskit/button/button-group';
-import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { DN70 } from '@atlaskit/theme/colors';
-import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
-import { FloatingToolbarButton as Button, Announcer } from '@atlaskit/editor-common/ui';
-import Dropdown from './Dropdown';
-import Select from './Select';
-import Separator from './Separator';
-import Input from './Input';
-import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
-import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
-import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
-import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
-import { EmojiPickerButton } from './EmojiPickerButton';
-import { injectIntl } from 'react-intl-next';
-import messages from './messages';
-import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
-import { ScrollButtons } from './ScrollButtons';
-import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
-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);
-});
-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)"};
-        `}
-      `}
-`;
-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;
-      `}
-`;
-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,
-      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/plugins/floating-toolbar/ui/ToolbarLoader.js

@@ -1,6 +0,0 @@
-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
-});