@atlaskit/editor-core 189.4.0 → 189.4.2

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -1,201 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import memoizeOne from 'memoize-one';
-import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
-import TaskIcon from '@atlaskit/icon/glyph/editor/task';
-import TableIcon from '@atlaskit/icon/glyph/editor/table';
-import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
-import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
-import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
-import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
-import DateIcon from '@atlaskit/icon/glyph/editor/date';
-import StatusIcon from '@atlaskit/icon/glyph/status';
-import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
-import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
-import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
-import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
-import CodeIcon from '@atlaskit/icon/glyph/editor/code';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
-import QuoteIcon from '@atlaskit/icon/glyph/quote';
-import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { tooltip, addLink, toggleTable } from '@atlaskit/editor-common/keymaps';
-import { shallowEquals } from './shallow-equals';
-import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
-const from = init => ({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  value: {
-    name: init.name
-  },
-  elemBefore: jsx(init.Icon, {
-    label: init.content
-  }),
-  elemAfter: init.shortcut ? jsx("div", {
-    css: shortcutStyle
-  }, init.shortcut) : undefined,
-  'aria-label': init.shortcut ? init.content + ' ' + init.shortcut : init.content,
-  'aria-haspopup': init['aria-haspopup'],
-  'aria-keyshortcuts': init['aria-keyshortcuts'],
-  shortcut: init.shortcut,
-  isDisabled: init.disabled
-});
-const mem = fn => memoizeOne(fn, shallowEquals);
-export const action = mem(init => {
-  return from({
-    content: init.content,
-    tooltipDescription: init.tooltipDescription,
-    disabled: init.disabled,
-    name: 'action',
-    shortcut: '[]',
-    Icon: TaskIcon,
-    'aria-keyshortcuts': '[ ] Space'
-  });
-});
-export const link = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'link',
-  shortcut: tooltip(addLink),
-  Icon: LinkIcon,
-  'aria-haspopup': init['aria-haspopup'],
-  'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
-}));
-export const media = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'media',
-  Icon: EditorImageIcon
-}));
-export const imageUpload = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'image upload',
-  Icon: EditorImageIcon
-}));
-export const mention = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'mention',
-  Icon: MentionIcon,
-  shortcut: '@',
-  'aria-haspopup': init['aria-haspopup'],
-  'aria-keyshortcuts': 'Shift+2 Space'
-}));
-export const emoji = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'emoji',
-  Icon: EmojiIcon,
-  shortcut: ':',
-  'aria-haspopup': init['aria-haspopup'],
-  'aria-keyshortcuts': 'Shift+;'
-}));
-export const table = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'table',
-  Icon: TableIcon,
-  shortcut: tooltip(toggleTable),
-  'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
-}));
-export const layout = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'layout',
-  Icon: LayoutTwoEqualIcon
-}));
-export const codeblock = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'codeblock',
-  Icon: CodeIcon,
-  shortcut: init.shortcut,
-  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
-}));
-export const panel = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'panel',
-  Icon: InfoIcon,
-  shortcut: init.shortcut,
-  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
-}));
-export const blockquote = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'blockquote',
-  Icon: QuoteIcon,
-  shortcut: init.shortcut,
-  'aria-keyshortcuts': 'Shift+. Space'
-}));
-export const decision = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'decision',
-  Icon: DecisionIcon,
-  shortcut: '<>',
-  'aria-keyshortcuts': 'Shift+, Shift+. Space'
-}));
-export const horizontalrule = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'horizontalrule',
-  Icon: HorizontalRuleIcon,
-  shortcut: '---',
-  'aria-keyshortcuts': '- - -'
-}));
-export const expand = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'expand',
-  Icon: ExpandNodeIcon
-}));
-export const date = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'date',
-  Icon: DateIcon,
-  shortcut: '//',
-  'aria-keyshortcuts': '/ / Enter'
-}));
-export const placeholder = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'placeholder text',
-  Icon: () => jsx(PlaceholderTextIcon, {
-    label: ""
-  })
-}));
-export const status = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'status',
-  Icon: StatusIcon
-}));
-export const more = mem(init => from({
-  content: init.content,
-  tooltipDescription: init.tooltipDescription,
-  disabled: init.disabled,
-  name: 'macro',
-  Icon: () => jsx(EditorMoreIcon, {
-    label: ""
-  })
-}));

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/messages.js

@@ -1 +0,0 @@
-export { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/shallow-equals.js

@@ -1,8 +0,0 @@
-export const shallowEquals = ([aRaw], [bRaw]) => {
-  const a = aRaw;
-  const b = bRaw;
-  return !Object.keys(a).some(key => {
-    const k = key;
-    return a[k] !== b[k];
-  });
-};

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/sort-items.js

@@ -1,22 +0,0 @@
-const endPositionNames = ['macro-browser', 'slash-onboarding'];
-const isMacro = item => typeof item.content === 'string' && item.content.includes('macro');
-export const sortItems = items => {
-  return items.sort((a, b) => {
-    if (endPositionNames.includes(a.value.name) && endPositionNames.includes(b.value.name)) {
-      return endPositionNames.indexOf(a.value.name) - endPositionNames.indexOf(b.value.name);
-    }
-    if (endPositionNames.includes(b.value.name)) {
-      return -1;
-    }
-    if (endPositionNames.includes(a.value.name)) {
-      return 1;
-    }
-    if (isMacro(a) && !isMacro(b)) {
-      return 1;
-    }
-    if (isMacro(b) && !isMacro(a)) {
-      return -1;
-    }
-    return a.content < b.content ? -1 : 1;
-  });
-};

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/styles.js

@@ -1,16 +0,0 @@
-import { css } from '@emotion/react';
-export const triggerWrapper = css`
-  width: 42px;
-
-  display: flex;
-  align-items: center;
-
-  > div,
-  > span {
-    display: flex;
-  }
-
-  > div > div {
-    display: flex;
-  }
-`;

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/types.js

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

package/dist/es2019/plugins/toolbar-lists-indentation/index.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import ToolbarListsIndentation from './ui';
-import { ToolbarSize } from '../../ui/Toolbar/types';
-import { getIndentationButtonsState } from './pm-plugins/indentation-buttons';
-const toolbarListsIndentationPlugin = ({
-  config,
-  api
-}) => {
-  var _api$featureFlags;
-  const {
-    showIndentationButtons = false,
-    allowHeadingAndParagraphIndentation = false
-  } = config !== null && config !== void 0 ? config : {};
-  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
-  return {
-    name: 'toolbarListsIndentation',
-    primaryToolbarComponent({
-      editorView,
-      popupsMountPoint,
-      popupsBoundariesElement,
-      popupsScrollableElement,
-      toolbarSize,
-      disabled,
-      isToolbarReducedSpacing
-    }) {
-      const isSmall = toolbarSize < ToolbarSize.L;
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        featureFlags: featureFlags,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        isSmall: isSmall,
-        isToolbarReducedSpacing: isToolbarReducedSpacing,
-        disabled: disabled,
-        editorView: editorView,
-        showIndentationButtons: showIndentationButtons,
-        pluginInjectionApi: api,
-        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
-      });
-    }
-  };
-};
-export function PrimaryToolbarComponent({
-  featureFlags,
-  popupsMountPoint,
-  popupsBoundariesElement,
-  popupsScrollableElement,
-  isSmall,
-  isToolbarReducedSpacing,
-  disabled,
-  editorView,
-  showIndentationButtons,
-  pluginInjectionApi,
-  allowHeadingAndParagraphIndentation
-}) {
-  const {
-    listState,
-    indentationState,
-    taskDecisionState
-  } = useSharedPluginState(pluginInjectionApi, ['list', 'indentation', 'taskDecision']);
-  const toolbarListsIndentationState = getIndentationButtonsState(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, indentationState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.actions.isInsideListItem);
-  if (!listState) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
-    featureFlags: featureFlags,
-    isSmall: isSmall,
-    isReducedSpacing: isToolbarReducedSpacing,
-    disabled: disabled,
-    editorView: editorView,
-    popupsMountPoint: popupsMountPoint,
-    popupsBoundariesElement: popupsBoundariesElement,
-    popupsScrollableElement: popupsScrollableElement,
-    bulletListActive: listState.bulletListActive,
-    bulletListDisabled: listState.bulletListDisabled,
-    orderedListActive: listState.orderedListActive,
-    orderedListDisabled: listState.orderedListDisabled,
-    showIndentationButtons: !!showIndentationButtons,
-    indentDisabled: toolbarListsIndentationState.indentDisabled,
-    outdentDisabled: toolbarListsIndentationState.outdentDisabled,
-    indentationStateNode: toolbarListsIndentationState === null || toolbarListsIndentationState === void 0 ? void 0 : toolbarListsIndentationState.node,
-    pluginInjectionApi: pluginInjectionApi
-  });
-}
-export default toolbarListsIndentationPlugin;

package/dist/es2019/plugins/toolbar-lists-indentation/pm-plugins/indentation-buttons.js

@@ -1,53 +0,0 @@
-import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { getListItemAttributes } from '@atlaskit/editor-common/lists';
-import { MAX_INDENTATION_LEVEL } from '@atlaskit/editor-common/indentation';
-export function getIndentationButtonsState(editorState, allowHeadingAndParagraphIndentation, taskDecisionState, indentationState, isInsideListItem) {
-  var _indentationState$isI;
-  const state = {
-    indentDisabled: true,
-    outdentDisabled: true,
-    node: null
-  };
-  const {
-    selection
-  } = editorState;
-
-  // Handle bullet and numbered lists seperately as they do
-  // not use the indentation mark.
-  // Check for lists before paragraphs and headings in case
-  // the selection is in a list nested in a layout column.
-  if (isInsideListItem !== null && isInsideListItem !== void 0 && isInsideListItem(editorState.tr)) {
-    const {
-      indentLevel,
-      itemIndex
-    } = getListItemAttributes(selection.$head);
-    return {
-      // List indent levels are zero indexed so we need to subtract 1
-      indentDisabled: itemIndex === 0 || indentLevel >= MAX_INDENTATION_LEVEL - 1,
-      outdentDisabled: false,
-      node: 'list'
-    };
-  }
-
-  // Handle tasks seperately as they do not use the indentation mark
-  // and have different behaviour for outdent compared to lists
-  if (taskDecisionState !== null && taskDecisionState !== void 0 && taskDecisionState.isInsideTask) {
-    return {
-      indentDisabled: taskDecisionState.indentDisabled,
-      outdentDisabled: taskDecisionState.outdentDisabled,
-      node: 'taskList'
-    };
-  }
-  const isTopLevelParagraphOrHeading = selection.$from.depth === 1;
-  const isInLayoutNode = hasParentNodeOfType(editorState.schema.nodes.layoutColumn)(selection) &&
-  // depth of non-nested paragraphs and headings in layouts will always be 3
-  selection.$from.depth === 3;
-  if (allowHeadingAndParagraphIndentation && ((_indentationState$isI = indentationState === null || indentationState === void 0 ? void 0 : indentationState.isIndentationAllowed) !== null && _indentationState$isI !== void 0 ? _indentationState$isI : false) && (isTopLevelParagraphOrHeading || isInLayoutNode) && indentationState) {
-    return {
-      indentDisabled: indentationState.indentDisabled,
-      outdentDisabled: indentationState.outdentDisabled,
-      node: 'paragraph_heading'
-    };
-  }
-  return state;
-}

package/dist/es2019/plugins/toolbar-lists-indentation/types.js

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

package/dist/es2019/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -1,123 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
-import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
-import NumberListIcon from '@atlaskit/icon/glyph/editor/number-list';
-import IndentIcon from '@atlaskit/icon/glyph/editor/indent';
-import OutdentIcon from '@atlaskit/icon/glyph/editor/outdent';
-import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, ToolTipContent, tooltip } from '../../../keymaps';
-import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
-import { listMessages as messages, indentationMessages } from '@atlaskit/editor-common/messages';
-import { separatorStyles, buttonGroupStyle } from '@atlaskit/editor-common/styles';
-import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
-import { useEffect, useRef } from 'react';
-export function Toolbar(props) {
-  const {
-    formatMessage
-  } = useIntl();
-  const indentButtonRef = useRef(null);
-  const outdentButtonRef = useRef(null);
-  const {
-    disabled,
-    isReducedSpacing,
-    bulletListActive,
-    bulletListDisabled,
-    orderedListActive,
-    orderedListDisabled,
-    showIndentationButtons,
-    indentDisabled,
-    outdentDisabled,
-    onItemActivated
-  } = props;
-  const labelUnorderedList = formatMessage(messages.unorderedList);
-  const labelOrderedList = formatMessage(messages.orderedList);
-  const indentMessage = formatMessage(indentationMessages.indent);
-  const outdentMessage = formatMessage(indentationMessages.outdent);
-  const isIndentButtonFocused = document.activeElement === indentButtonRef.current;
-  const isOutdentButtonFocused = document.activeElement === outdentButtonRef.current;
-  const handleOnItemActivated = buttonName => event => onItemActivated({
-    editorView: props.editorView,
-    buttonName
-  });
-  useEffect(() => {
-    if (isIndentButtonFocused && indentDisabled && outdentButtonRef.current) {
-      outdentButtonRef.current.focus();
-    }
-  }, [indentButtonRef, indentDisabled, isIndentButtonFocused]);
-  useEffect(() => {
-    if (isOutdentButtonFocused && outdentDisabled && indentButtonRef.current) {
-      indentButtonRef.current.focus();
-    }
-  }, [outdentButtonRef, outdentDisabled, isOutdentButtonFocused]);
-  return jsx("span", {
-    css: buttonGroupStyle
-  }, jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.BULLET_LIST,
-    testId: labelUnorderedList,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('bullet_list'),
-    selected: bulletListActive,
-    "aria-pressed": bulletListActive,
-    "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
-    disabled: bulletListDisabled || disabled,
-    title: jsx(ToolTipContent, {
-      description: labelUnorderedList,
-      keymap: toggleBulletListKeymap
-    }),
-    iconBefore: jsx(BulletListIcon, {
-      label: ""
-    })
-  }), jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
-    testId: labelOrderedList,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('ordered_list'),
-    selected: orderedListActive,
-    "aria-pressed": orderedListActive,
-    "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
-    disabled: orderedListDisabled || disabled,
-    title: jsx(ToolTipContent, {
-      description: labelOrderedList,
-      keymap: toggleOrderedListKeymap
-    }),
-    iconBefore: jsx(NumberListIcon, {
-      label: ""
-    })
-  }), showIndentationButtons && jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.OUTDENT,
-    testId: TOOLBAR_BUTTON.OUTDENT,
-    ref: outdentButtonRef,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('outdent'),
-    iconBefore: jsx(OutdentIcon, {
-      label: ""
-    }),
-    disabled: outdentDisabled || disabled,
-    "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
-    title: jsx(ToolTipContent, {
-      description: outdentMessage,
-      keymap: toggleOutdentKeymap
-    })
-  }), showIndentationButtons && jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.INDENT,
-    testId: TOOLBAR_BUTTON.INDENT,
-    ref: indentButtonRef,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('indent'),
-    iconBefore: jsx(IndentIcon, {
-      label: ""
-    }),
-    disabled: indentDisabled || disabled,
-    "aria-label": tooltip(toggleIndentKeymap, indentMessage),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
-    title: jsx(ToolTipContent, {
-      description: indentMessage,
-      keymap: toggleIndentKeymap
-    })
-  }), jsx("span", {
-    css: separatorStyles
-  }));
-}

package/dist/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -1,158 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import React from 'react';
-import { useIntl } from 'react-intl-next';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
-import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, tooltip } from '../../../keymaps';
-import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
-import ToolbarButton from '../../../ui/ToolbarButton';
-import { shortcutStyle } from '../../../ui/styles';
-import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
-import { wrapperStyle, separatorStyles } from '@atlaskit/editor-common/styles';
-import { listMessages, indentationMessages } from '@atlaskit/editor-common/messages';
-export function ToolbarDropdown(props) {
-  const {
-    formatMessage
-  } = useIntl();
-  const {
-    disabled,
-    isReducedSpacing,
-    bulletListActive,
-    orderedListActive,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement,
-    onItemActivated
-  } = props;
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isOpenedByKeyboard, setOpenedByKeyboard] = React.useState(false);
-  const labelLists = formatMessage(listMessages.lists);
-  const onOpenChange = attrs => {
-    setIsDropdownOpen(attrs.isDropdownOpen);
-  };
-  const handleTriggerClick = () => {
-    onOpenChange({
-      isDropdownOpen: !isDropdownOpen
-    });
-  };
-  const handleOnKeyDown = event => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      setIsDropdownOpen(!isDropdownOpen);
-      setOpenedByKeyboard(true);
-    }
-  };
-  const items = useItems(props);
-  const handleOnItemActivated = ({
-    item,
-    shouldCloseMenu = true
-  }) => {
-    setIsDropdownOpen(!shouldCloseMenu);
-    return onItemActivated({
-      editorView: props.editorView,
-      buttonName: item.value.name
-    });
-  };
-  return jsx("span", {
-    css: wrapperStyle
-  }, jsx(DropdownMenu, {
-    items: items,
-    onItemActivated: handleOnItemActivated,
-    mountTo: popupsMountPoint,
-    boundariesElement: popupsBoundariesElement,
-    scrollableElement: popupsScrollableElement,
-    isOpen: isDropdownOpen,
-    onOpenChange: onOpenChange,
-    fitHeight: 188,
-    fitWidth: 175,
-    shouldUseDefaultRole: true,
-    shouldFocusFirstItem: () => {
-      if (isOpenedByKeyboard) {
-        setOpenedByKeyboard(false);
-      }
-      return isOpenedByKeyboard;
-    }
-  }, jsx(ToolbarButton, {
-    spacing: isReducedSpacing ? 'none' : 'default',
-    selected: bulletListActive || orderedListActive,
-    "aria-expanded": isDropdownOpen,
-    "aria-haspopup": true,
-    "aria-label": labelLists,
-    disabled: disabled,
-    onClick: handleTriggerClick,
-    onKeyDown: handleOnKeyDown,
-    title: labelLists,
-    iconBefore: jsx("span", {
-      css: wrapperStyle
-    }, jsx(BulletListIcon, {
-      label: labelLists
-    }), jsx("span", {
-      css: expandIconWrapperStyle
-    }, jsx(ExpandIcon, {
-      label: ""
-    })))
-  })), jsx("span", {
-    css: separatorStyles
-  }));
-}
-function useItems(props) {
-  const {
-    formatMessage
-  } = useIntl();
-  const labelUnorderedList = formatMessage(listMessages.unorderedList);
-  const labelOrderedList = formatMessage(listMessages.orderedList);
-  let items = [{
-    key: 'unorderedList',
-    content: labelUnorderedList,
-    value: {
-      name: 'bullet_list'
-    },
-    isDisabled: props.bulletListDisabled,
-    isActive: Boolean(props.bulletListActive),
-    elemAfter: jsx("div", {
-      css: shortcutStyle
-    }, tooltip(toggleBulletListKeymap))
-  }, {
-    key: 'orderedList',
-    content: labelOrderedList,
-    value: {
-      name: 'ordered_list'
-    },
-    isDisabled: props.orderedListDisabled,
-    isActive: Boolean(props.orderedListActive),
-    elemAfter: jsx("div", {
-      css: shortcutStyle
-    }, tooltip(toggleOrderedListKeymap))
-  }];
-  if (props.showIndentationButtons) {
-    const labelIndent = formatMessage(indentationMessages.indent);
-    const labelOutdent = formatMessage(indentationMessages.outdent);
-    items.push({
-      key: 'outdent',
-      content: labelOutdent,
-      value: {
-        name: 'outdent'
-      },
-      isDisabled: props.outdentDisabled,
-      isActive: false,
-      elemAfter: jsx("div", {
-        css: shortcutStyle
-      }, tooltip(toggleOutdentKeymap))
-    }, {
-      key: 'indent',
-      content: labelIndent,
-      value: {
-        name: 'indent'
-      },
-      isDisabled: props.indentDisabled,
-      isActive: false,
-      elemAfter: jsx("div", {
-        css: shortcutStyle
-      }, tooltip(toggleIndentKeymap))
-    });
-  }
-  return [{
-    items
-  }];
-}