@atlaskit/editor-core 169.0.0 → 169.1.0

package/dist/cjs/plugins/list/index.js

@@ -11,16 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _ToolbarLists = _interopRequireDefault(require("./ui/ToolbarLists"));
-
 var _main = require("./pm-plugins/main");
 
 var _inputRules = _interopRequireDefault(require("./pm-plugins/input-rules"));
 
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
-
 var _messages = require("./messages");
 
 var _analytics = require("../analytics");
@@ -29,8 +25,6 @@ var _keymaps = require("../../keymaps");
 
 var _assets = require("../quick-insert/assets");
 
-var _types = require("../../ui/Toolbar/types");
-
 var listPlugin = function listPlugin() {
   return {
     name: 'list',
@@ -116,43 +110,6 @@ var listPlugin = function listPlugin() {
           }
         }];
       }
-    },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref4) {
-      var editorView = _ref4.editorView,
-          popupsMountPoint = _ref4.popupsMountPoint,
-          popupsBoundariesElement = _ref4.popupsBoundariesElement,
-          popupsScrollableElement = _ref4.popupsScrollableElement,
-          toolbarSize = _ref4.toolbarSize,
-          disabled = _ref4.disabled,
-          isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing;
-      var isSmall = toolbarSize < _types.ToolbarSize.L;
-      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        plugins: {
-          listState: _main.pluginKey
-        },
-        render: function render(_ref5) {
-          var listState = _ref5.listState;
-
-          if (!listState) {
-            return null;
-          }
-
-          return /*#__PURE__*/_react.default.createElement(_ToolbarLists.default, {
-            isSmall: isSmall,
-            isSeparator: true,
-            isReducedSpacing: isToolbarReducedSpacing,
-            disabled: disabled,
-            editorView: editorView,
-            popupsMountPoint: popupsMountPoint,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement,
-            bulletListActive: listState.bulletListActive,
-            bulletListDisabled: listState.bulletListDisabled,
-            orderedListActive: listState.orderedListActive,
-            orderedListDisabled: listState.orderedListDisabled
-          });
-        }
-      });
     }
   };
 };

package/dist/cjs/plugins/panel/toolbar.js

@@ -45,6 +45,8 @@ var _analytics = require("../analytics");
 
 var _message = require("./message");
 
+var _utils2 = require("../copy-button/utils");
+
 var _panelIconMap;
 
 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; }
@@ -72,7 +74,7 @@ var panelIconMap = (_panelIconMap = {}, (0, _defineProperty2.default)(_panelIcon
 }), _panelIconMap);
 exports.panelIconMap = panelIconMap;
 
-var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) {
+var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon, state) {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   var items = [{
     id: 'editor.panel.info',
@@ -271,6 +273,12 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
     }
   }
 
+  if (state && (0, _utils2.showCopyButton)(state)) {
+    items.push({
+      type: 'separator'
+    }, (0, _utils2.getCopyButtonConfig)(state, formatMessage, panelNodeType));
+  }
+
   items.push({
     type: 'separator'
   }, {
@@ -309,7 +317,7 @@ var getToolbarConfig = function getToolbarConfig(state, intl) {
     }; // force toolbar to be turned on
 
 
-    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined);
+    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
 
     var getDomRef = function getDomRef(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);

package/dist/cjs/plugins/table/commands/hover.js

@@ -107,7 +107,7 @@ var hoverRows = function hoverRows(hoveredRows, isInDanger) {
 
 exports.hoverRows = hoverRows;
 
-var hoverTable = function hoverTable(isInDanger) {
+var hoverTable = function hoverTable(isInDanger, isSelected) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var table = (0, _utils.findTable)(state.selection);
 
@@ -125,7 +125,7 @@ var hoverTable = function hoverTable(isInDanger) {
       return false;
     }
 
-    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'table', isInDanger);
+    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'table', isInDanger, isSelected);
     return {
       type: 'HOVER_TABLE',
       data: {

package/dist/cjs/plugins/table/toolbar.js

@@ -41,6 +41,8 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _dom = require("../../utils/dom");
 
+var _utils2 = require("../copy-button/utils");
+
 // TODO: ED-14403 investigate why these translations don't work
 var messages = (0, _reactIntlNext.defineMessages)({
   tableOptions: {
@@ -277,7 +279,9 @@ var getToolbarConfig = function getToolbarConfig(config) {
         items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), [{
           type: 'extensions-placeholder',
           separator: 'end'
-        }, {
+        }], (0, _toConsumableArray2.default)(state && (0, _utils2.showCopyButton)(state) ? [(0, _utils2.getCopyButtonConfig)(state, intl.formatMessage, nodeType, (0, _commands.hoverTable)(false, true), (0, _commands.clearHoverSelection)()), {
+          type: 'separator'
+        }] : []), [{
           id: 'editor.table.delete',
           type: 'button',
           appearance: 'danger',

package/dist/cjs/plugins/table/utils/decoration.js

@@ -45,7 +45,7 @@ var createCellHoverDecoration = function createCellHoverDecoration(cells, type)
 
 exports.createCellHoverDecoration = createCellHoverDecoration;
 
-var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger) {
+var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger, selected) {
   return cells.map(function (cell) {
     var classes = [_types.TableCssClassName.HOVERED_CELL];
 
@@ -53,6 +53,10 @@ var createControlsHoverDecoration = function createControlsHoverDecoration(cells
       classes.push(_types.TableCssClassName.HOVERED_CELL_IN_DANGER);
     }
 
+    if (selected) {
+      classes.push(_types.TableCssClassName.SELECTED_CELL);
+    }
+
     classes.push(type === 'column' ? _types.TableCssClassName.HOVERED_COLUMN : type === 'row' ? _types.TableCssClassName.HOVERED_ROW : _types.TableCssClassName.HOVERED_TABLE);
     var key;
 

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ui = _interopRequireDefault(require("./ui"));
+
+var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
+
+var _types = require("../../ui/Toolbar/types");
+
+var _main = require("../list/pm-plugins/main");
+
+var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
+  var showIndentationButtons = _ref.showIndentationButtons;
+  return {
+    name: 'toolbarListsIndentation',
+    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
+      var editorView = _ref2.editorView,
+          popupsMountPoint = _ref2.popupsMountPoint,
+          popupsBoundariesElement = _ref2.popupsBoundariesElement,
+          popupsScrollableElement = _ref2.popupsScrollableElement,
+          toolbarSize = _ref2.toolbarSize,
+          disabled = _ref2.disabled,
+          isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
+      var isSmall = toolbarSize < _types.ToolbarSize.L;
+      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+        plugins: {
+          listState: _main.pluginKey
+        },
+        render: function render(_ref3) {
+          var listState = _ref3.listState;
+
+          if (!listState) {
+            return null;
+          }
+
+          return /*#__PURE__*/_react.default.createElement(_ui.default, {
+            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
+          });
+        }
+      });
+    }
+  };
+};
+
+var _default = toolbarListsIndentationPlugin;
+exports.default = _default;

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

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

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

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = Toolbar;
+
+var _react = require("@emotion/react");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _bulletList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bullet-list"));
+
+var _numberList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/number-list"));
+
+var _indent = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/indent"));
+
+var _outdent = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/outdent"));
+
+var _keymaps = require("../../../keymaps");
+
+var _ToolbarButton = _interopRequireWildcard(require("../../../ui/ToolbarButton"));
+
+var _messages = require("../../list/messages");
+
+var _messages2 = require("../../indentation/messages");
+
+var _styles = require("../../../ui/styles");
+
+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 */
+function Toolbar(props) {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var disabled = props.disabled,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      bulletListDisabled = props.bulletListDisabled,
+      orderedListActive = props.orderedListActive,
+      orderedListDisabled = props.orderedListDisabled,
+      showIndentationButtons = props.showIndentationButtons,
+      onItemActivated = props.onItemActivated;
+  var labelUnorderedList = formatMessage(_messages.messages.unorderedList);
+  var labelOrderedList = formatMessage(_messages.messages.orderedList);
+
+  var handleOnItemActivated = function handleOnItemActivated(buttonName) {
+    return function (event) {
+      return onItemActivated({
+        editorView: props.editorView,
+        buttonName: buttonName
+      });
+    };
+  };
+
+  return (0, _react.jsx)("span", {
+    css: _styles.buttonGroupStyle
+  }, (0, _react.jsx)(_ToolbarButton.default, {
+    buttonId: _ToolbarButton.TOOLBAR_BUTTON.BULLET_LIST,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('bullet_list'),
+    selected: bulletListActive,
+    "aria-pressed": bulletListActive,
+    "aria-label": labelUnorderedList,
+    disabled: bulletListDisabled || disabled,
+    title: (0, _react.jsx)(_keymaps.ToolTipContent, {
+      description: labelUnorderedList,
+      keymap: _keymaps.toggleBulletList
+    }),
+    iconBefore: (0, _react.jsx)(_bulletList.default, {
+      label: ""
+    })
+  }), (0, _react.jsx)(_ToolbarButton.default, {
+    buttonId: _ToolbarButton.TOOLBAR_BUTTON.ORDERED_LIST,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('ordered_list'),
+    selected: orderedListActive,
+    "aria-pressed": orderedListActive,
+    "aria-label": labelOrderedList,
+    disabled: orderedListDisabled || disabled,
+    title: (0, _react.jsx)(_keymaps.ToolTipContent, {
+      description: labelOrderedList,
+      keymap: _keymaps.toggleOrderedList
+    }),
+    iconBefore: (0, _react.jsx)(_numberList.default, {
+      label: ""
+    })
+  }), showIndentationButtons && (0, _react.jsx)(_ToolbarButton.default, {
+    buttonId: _ToolbarButton.TOOLBAR_BUTTON.INDENT,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('indent'),
+    iconBefore: (0, _react.jsx)(_indent.default, {
+      label: ""
+    }),
+    disabled: true,
+    title: (0, _react.jsx)(_keymaps.ToolTipContent, {
+      description: formatMessage(_messages2.messages.indent),
+      keymap: _keymaps.indent
+    })
+  }), showIndentationButtons && (0, _react.jsx)(_ToolbarButton.default, {
+    buttonId: _ToolbarButton.TOOLBAR_BUTTON.OUTDENT,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('outdent'),
+    iconBefore: (0, _react.jsx)(_outdent.default, {
+      label: ""
+    }),
+    disabled: true,
+    title: (0, _react.jsx)(_keymaps.ToolTipContent, {
+      description: formatMessage(_messages2.messages.outdent),
+      keymap: _keymaps.outdent
+    })
+  }), (0, _react.jsx)("span", {
+    css: _styles.separatorStyles
+  }));
+}

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

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarDropdown = ToolbarDropdown;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _bulletList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bullet-list"));
+
+var _keymaps = require("../../../keymaps");
+
+var _DropdownMenu = _interopRequireDefault(require("../../../ui/DropdownMenu"));
+
+var _ToolbarButton = _interopRequireDefault(require("../../../ui/ToolbarButton"));
+
+var _styles = require("../../../ui/styles");
+
+var _messages = require("../../list/messages");
+
+var _messages2 = require("../../indentation/messages");
+
+/** @jsx jsx */
+function ToolbarDropdown(props) {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var disabled = props.disabled,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      orderedListActive = props.orderedListActive,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement,
+      onItemActivated = props.onItemActivated;
+
+  var _React$useState = _react2.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isDropdownOpen = _React$useState2[0],
+      setIsDropdownOpen = _React$useState2[1];
+
+  var labelLists = formatMessage(_messages.messages.lists);
+
+  var onOpenChange = function onOpenChange(attrs) {
+    setIsDropdownOpen(attrs.isDropdownOpen);
+  };
+
+  var handleTriggerClick = function handleTriggerClick() {
+    onOpenChange({
+      isDropdownOpen: !isDropdownOpen
+    });
+  };
+
+  var items = useItems(props);
+
+  var handleOnItemActivated = function handleOnItemActivated(_ref) {
+    var item = _ref.item;
+    setIsDropdownOpen(false);
+    return onItemActivated({
+      editorView: props.editorView,
+      buttonName: item.value.name
+    });
+  };
+
+  return (0, _react.jsx)("span", {
+    css: _styles.wrapperStyle
+  }, (0, _react.jsx)(_DropdownMenu.default, {
+    items: items,
+    onItemActivated: handleOnItemActivated,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen,
+    onOpenChange: onOpenChange,
+    fitHeight: 188,
+    fitWidth: 175,
+    shouldUseDefaultRole: true
+  }, (0, _react.jsx)(_ToolbarButton.default, {
+    spacing: isReducedSpacing ? 'none' : 'default',
+    selected: bulletListActive || orderedListActive,
+    "aria-expanded": isDropdownOpen,
+    "aria-haspopup": true,
+    "aria-label": labelLists,
+    disabled: disabled,
+    onClick: handleTriggerClick,
+    title: labelLists,
+    iconBefore: (0, _react.jsx)("span", {
+      css: _styles.wrapperStyle
+    }, (0, _react.jsx)(_bulletList.default, {
+      label: labelLists
+    }), (0, _react.jsx)("span", {
+      css: _styles.expandIconWrapperStyle
+    }, (0, _react.jsx)(_chevronDown.default, {
+      label: ""
+    })))
+  })), (0, _react.jsx)("span", {
+    css: _styles.separatorStyles
+  }));
+}
+
+function useItems(props) {
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl2.formatMessage;
+
+  var labelUnorderedList = formatMessage(_messages.messages.unorderedList);
+  var labelOrderedList = formatMessage(_messages.messages.orderedList);
+  var items = [{
+    key: 'unorderedList',
+    content: labelUnorderedList,
+    value: {
+      name: 'bullet_list'
+    },
+    isDisabled: props.bulletListDisabled,
+    isActive: Boolean(props.bulletListActive),
+    elemAfter: (0, _react.jsx)("div", {
+      css: _styles.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.toggleBulletList))
+  }, {
+    key: 'orderedList',
+    content: labelOrderedList,
+    value: {
+      name: 'ordered_list'
+    },
+    isDisabled: props.orderedListDisabled,
+    isActive: Boolean(props.orderedListActive),
+    elemAfter: (0, _react.jsx)("div", {
+      css: _styles.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.toggleOrderedList))
+  }];
+
+  if (props.showIndentationButtons) {
+    var labelIndent = formatMessage(_messages2.messages.indent);
+    var labelOutdent = formatMessage(_messages2.messages.outdent);
+    items.push({
+      key: 'indent',
+      content: labelIndent,
+      value: {
+        name: 'indent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: (0, _react.jsx)("div", {
+        css: _styles.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.indent))
+    }, {
+      key: 'outdent',
+      content: labelOutdent,
+      value: {
+        name: 'outdent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: (0, _react.jsx)("div", {
+        css: _styles.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.outdent))
+    });
+  }
+
+  return [{
+    items: items
+  }];
+}

package/dist/cjs/plugins/toolbar-lists-indentation/ui/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ToolbarListsIndentation;
+
+var _react = require("@emotion/react");
+
+var _onItemActivated = require("./onItemActivated");
+
+var _ToolbarDropdown = require("./ToolbarDropdown");
+
+var _Toolbar = require("./Toolbar");
+
+/** @jsx jsx */
+function ToolbarListsIndentation(props) {
+  var disabled = props.disabled,
+      isSmall = props.isSmall,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      bulletListDisabled = props.bulletListDisabled,
+      orderedListActive = props.orderedListActive,
+      orderedListDisabled = props.orderedListDisabled,
+      showIndentationButtons = props.showIndentationButtons,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement;
+
+  if (isSmall) {
+    return (0, _react.jsx)(_ToolbarDropdown.ToolbarDropdown, {
+      editorView: props.editorView,
+      isReducedSpacing: isReducedSpacing,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      bulletListActive: bulletListActive,
+      bulletListDisabled: bulletListDisabled,
+      showIndentationButtons: showIndentationButtons,
+      orderedListActive: orderedListActive,
+      orderedListDisabled: orderedListDisabled,
+      disabled: disabled,
+      onItemActivated: _onItemActivated.onItemActivated
+    });
+  }
+
+  return (0, _react.jsx)(_Toolbar.Toolbar, {
+    editorView: props.editorView,
+    isReducedSpacing: isReducedSpacing,
+    bulletListActive: bulletListActive,
+    bulletListDisabled: bulletListDisabled,
+    showIndentationButtons: showIndentationButtons,
+    orderedListActive: orderedListActive,
+    orderedListDisabled: orderedListDisabled,
+    disabled: disabled,
+    onItemActivated: _onItemActivated.onItemActivated
+  });
+}

package/dist/cjs/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onItemActivated = onItemActivated;
+
+var _commands = require("../../list/commands");
+
+var _analytics = require("../../analytics");
+
+function onItemActivated(_ref) {
+  var buttonName = _ref.buttonName,
+      editorView = _ref.editorView;
+
+  switch (buttonName) {
+    case 'bullet_list':
+      (0, _commands.toggleBulletList)(editorView, _analytics.INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'ordered_list':
+      (0, _commands.toggleOrderedList)(editorView, _analytics.INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'indent':
+      editorView.someProp('handleKeyDown', function (handleKeyDown) {
+        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          key: 'Tab',
+          code: 'Tab'
+        }));
+      });
+      break;
+
+    case 'outdent':
+      editorView.someProp('handleKeyDown', function (handleKeyDown) {
+        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          shiftKey: true,
+          key: 'Tab',
+          code: 'Tab'
+        }));
+      });
+      break;
+  }
+}

package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _item = require("@atlaskit/item");
+var _menu = require("@atlaskit/menu");
 
 var _TypeAheadListItem = require("./TypeAheadListItem");
 
@@ -128,12 +128,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
 
   var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   var height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, fitHeight);
-  return (0, _react2.jsx)(_item.ItemGroup, {
+  return (0, _react2.jsx)(_menu.MenuGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(_messages.typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals",
-    theme: _TypeAheadListItem.itemTheme
+    "aria-relevant": "additions removals"
   }, (0, _react2.jsx)(_useResizeObserver.ResizeObserverProvider, null, (0, _react2.jsx)(_DynamicHeightListItem.UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
   }, (0, _react2.jsx)(_DynamicHeightListItem.ListItemActionsContext.Provider, {
@@ -152,7 +151,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
     width: LIST_WIDTH,
     height: height,
     overscanCount: 3,
-    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    // temporary solution before we migrated off dst/item\n                    & span[class^='ItemParts__Before'] {\n                      margin-right: 12px;\n                    }\n                  "])))
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    button {\n                      padding: 12px 12px 11px;\n\n                      span:last-child span:last-child {\n                        white-space: normal;\n                      }\n                    }\n                  "])))
   }, _DynamicHeightListItem.DynamicHeightListItem))))));
 });