@atlaskit/editor-plugin-toolbar-lists-indentation 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-toolbar-lists-indentation
 
+## 0.2.0
+
+### Minor Changes
+
+- [#43661](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43661) [`ebf781502ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ebf781502ed) - Extract toolbar-lists-indentation plugin code from editor-core and move into @atlaskit/editor-plugin-toolbar-lists-indentation.
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "toolbarListsIndentationPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.toolbarListsIndentationPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
+exports.toolbarListsIndentationPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _types = require("@atlaskit/editor-common/types");
+var _indentationButtons = require("./pm-plugins/indentation-buttons");
+var _ui = _interopRequireDefault(require("./ui"));
+var toolbarListsIndentationPlugin = exports.toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
+  var _api$featureFlags;
+  var config = _ref.config,
+    api = _ref.api;
+  var _ref2 = config !== null && config !== void 0 ? config : {},
+    _ref2$showIndentation = _ref2.showIndentationButtons,
+    showIndentationButtons = _ref2$showIndentation === void 0 ? false : _ref2$showIndentation,
+    _ref2$allowHeadingAnd = _ref2.allowHeadingAndParagraphIndentation,
+    allowHeadingAndParagraphIndentation = _ref2$allowHeadingAnd === void 0 ? false : _ref2$allowHeadingAnd;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'toolbarListsIndentation',
+    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
+      var editorView = _ref3.editorView,
+        popupsMountPoint = _ref3.popupsMountPoint,
+        popupsBoundariesElement = _ref3.popupsBoundariesElement,
+        popupsScrollableElement = _ref3.popupsScrollableElement,
+        toolbarSize = _ref3.toolbarSize,
+        disabled = _ref3.disabled,
+        isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
+      var isSmall = toolbarSize < _types.ToolbarSize.L;
+      return /*#__PURE__*/_react.default.createElement(PrimaryToolbarComponent, {
+        featureFlags: featureFlags,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        isSmall: isSmall,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        disabled: disabled,
+        editorView: editorView,
+        showIndentationButtons: showIndentationButtons,
+        pluginInjectionApi: api,
+        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
+      });
+    }
+  };
+};
+function PrimaryToolbarComponent(_ref4) {
+  var featureFlags = _ref4.featureFlags,
+    popupsMountPoint = _ref4.popupsMountPoint,
+    popupsBoundariesElement = _ref4.popupsBoundariesElement,
+    popupsScrollableElement = _ref4.popupsScrollableElement,
+    isSmall = _ref4.isSmall,
+    isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing,
+    disabled = _ref4.disabled,
+    editorView = _ref4.editorView,
+    showIndentationButtons = _ref4.showIndentationButtons,
+    pluginInjectionApi = _ref4.pluginInjectionApi,
+    allowHeadingAndParagraphIndentation = _ref4.allowHeadingAndParagraphIndentation;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['list', 'indentation', 'taskDecision']),
+    listState = _useSharedPluginState.listState,
+    indentationState = _useSharedPluginState.indentationState,
+    taskDecisionState = _useSharedPluginState.taskDecisionState;
+  var toolbarListsIndentationState = (0, _indentationButtons.getIndentationButtonsState)(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, indentationState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.actions.isInsideListItem);
+  if (!listState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_ui.default, {
+    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
+  });
+}

package/dist/cjs/pm-plugins/indentation-buttons.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIndentationButtonsState = getIndentationButtonsState;
+var _indentation = require("@atlaskit/editor-common/indentation");
+var _lists = require("@atlaskit/editor-common/lists");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+function getIndentationButtonsState(editorState, allowHeadingAndParagraphIndentation, taskDecisionState, indentationState, isInsideListItem) {
+  var _indentationState$isI;
+  var state = {
+    indentDisabled: true,
+    outdentDisabled: true,
+    node: null
+  };
+  var selection = editorState.selection;
+
+  // 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)) {
+    var _getListItemAttribute = (0, _lists.getListItemAttributes)(selection.$head),
+      indentLevel = _getListItemAttribute.indentLevel,
+      itemIndex = _getListItemAttribute.itemIndex;
+    return {
+      // List indent levels are zero indexed so we need to subtract 1
+      indentDisabled: itemIndex === 0 || indentLevel >= _indentation.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'
+    };
+  }
+  var isTopLevelParagraphOrHeading = selection.$from.depth === 1;
+  var isInLayoutNode = (0, _utils.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/cjs/types.js

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

package/dist/cjs/ui/Toolbar.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = Toolbar;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _bulletList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bullet-list"));
+var _indent = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/indent"));
+var _numberList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/number-list"));
+var _outdent = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/outdent"));
+/** @jsx jsx */
+
+function Toolbar(props) {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var indentButtonRef = (0, _react.useRef)(null);
+  var outdentButtonRef = (0, _react.useRef)(null);
+  var disabled = props.disabled,
+    isReducedSpacing = props.isReducedSpacing,
+    bulletListActive = props.bulletListActive,
+    bulletListDisabled = props.bulletListDisabled,
+    orderedListActive = props.orderedListActive,
+    orderedListDisabled = props.orderedListDisabled,
+    showIndentationButtons = props.showIndentationButtons,
+    indentDisabled = props.indentDisabled,
+    outdentDisabled = props.outdentDisabled,
+    onItemActivated = props.onItemActivated;
+  var labelUnorderedList = formatMessage(_messages.listMessages.unorderedList);
+  var labelOrderedList = formatMessage(_messages.listMessages.orderedList);
+  var indentMessage = formatMessage(_messages.indentationMessages.indent);
+  var outdentMessage = formatMessage(_messages.indentationMessages.outdent);
+  var isIndentButtonFocused = document.activeElement === indentButtonRef.current;
+  var isOutdentButtonFocused = document.activeElement === outdentButtonRef.current;
+  var handleOnItemActivated = function handleOnItemActivated(buttonName) {
+    return function (event) {
+      return onItemActivated({
+        editorView: props.editorView,
+        buttonName: buttonName
+      });
+    };
+  };
+  (0, _react.useEffect)(function () {
+    if (isIndentButtonFocused && indentDisabled && outdentButtonRef.current) {
+      outdentButtonRef.current.focus();
+    }
+  }, [indentButtonRef, indentDisabled, isIndentButtonFocused]);
+  (0, _react.useEffect)(function () {
+    if (isOutdentButtonFocused && outdentDisabled && indentButtonRef.current) {
+      indentButtonRef.current.focus();
+    }
+  }, [outdentButtonRef, outdentDisabled, isOutdentButtonFocused]);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("span", {
+      css: _styles.buttonGroupStyle
+    }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+      buttonId: _uiMenu.TOOLBAR_BUTTON.BULLET_LIST,
+      testId: labelUnorderedList,
+      spacing: isReducedSpacing ? 'none' : 'default',
+      onClick: handleOnItemActivated('bullet_list'),
+      selected: bulletListActive,
+      "aria-pressed": bulletListActive,
+      "aria-label": (0, _keymaps.tooltip)(_keymaps.toggleBulletList, labelUnorderedList),
+      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleBulletList),
+      disabled: bulletListDisabled || disabled,
+      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+        description: labelUnorderedList,
+        keymap: _keymaps.toggleBulletList
+      }),
+      iconBefore: (0, _react2.jsx)(_bulletList.default, {
+        label: ""
+      })
+    }), (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+      buttonId: _uiMenu.TOOLBAR_BUTTON.ORDERED_LIST,
+      testId: labelOrderedList,
+      spacing: isReducedSpacing ? 'none' : 'default',
+      onClick: handleOnItemActivated('ordered_list'),
+      selected: orderedListActive,
+      "aria-pressed": orderedListActive,
+      "aria-label": (0, _keymaps.tooltip)(_keymaps.toggleOrderedList, labelOrderedList),
+      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleOrderedList),
+      disabled: orderedListDisabled || disabled,
+      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+        description: labelOrderedList,
+        keymap: _keymaps.toggleOrderedList
+      }),
+      iconBefore: (0, _react2.jsx)(_numberList.default, {
+        label: ""
+      })
+    }), showIndentationButtons && (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+      buttonId: _uiMenu.TOOLBAR_BUTTON.OUTDENT,
+      testId: _uiMenu.TOOLBAR_BUTTON.OUTDENT,
+      ref: outdentButtonRef,
+      spacing: isReducedSpacing ? 'none' : 'default',
+      onClick: handleOnItemActivated('outdent'),
+      iconBefore: (0, _react2.jsx)(_outdent.default, {
+        label: ""
+      }),
+      disabled: outdentDisabled || disabled,
+      "aria-label": (0, _keymaps.tooltip)(_keymaps.outdent, outdentMessage),
+      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.outdent),
+      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+        description: outdentMessage,
+        keymap: _keymaps.outdent
+      })
+    }), showIndentationButtons && (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+      buttonId: _uiMenu.TOOLBAR_BUTTON.INDENT,
+      testId: _uiMenu.TOOLBAR_BUTTON.INDENT,
+      ref: indentButtonRef,
+      spacing: isReducedSpacing ? 'none' : 'default',
+      onClick: handleOnItemActivated('indent'),
+      iconBefore: (0, _react2.jsx)(_indent.default, {
+        label: ""
+      }),
+      disabled: indentDisabled || disabled,
+      "aria-label": (0, _keymaps.tooltip)(_keymaps.indent, indentMessage),
+      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.indent),
+      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+        description: indentMessage,
+        keymap: _keymaps.indent
+      })
+    }), (0, _react2.jsx)("span", {
+      css: _styles.separatorStyles
+    }))
+  );
+}

package/dist/cjs/ui/ToolbarDropdown.js

@@ -0,0 +1,179 @@
+"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 = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _bulletList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bullet-list"));
+/** @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 = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isDropdownOpen = _React$useState2[0],
+    setIsDropdownOpen = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isOpenedByKeyboard = _React$useState4[0],
+    setOpenedByKeyboard = _React$useState4[1];
+  var labelLists = formatMessage(_messages.listMessages.lists);
+  var onOpenChange = function onOpenChange(attrs) {
+    setIsDropdownOpen(attrs.isDropdownOpen);
+  };
+  var handleTriggerClick = function handleTriggerClick() {
+    onOpenChange({
+      isDropdownOpen: !isDropdownOpen
+    });
+  };
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsDropdownOpen(!isDropdownOpen);
+      setOpenedByKeyboard(true);
+    }
+  };
+  var items = useItems(props);
+  var handleOnItemActivated = function handleOnItemActivated(_ref) {
+    var item = _ref.item,
+      _ref$shouldCloseMenu = _ref.shouldCloseMenu,
+      shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
+    setIsDropdownOpen(!shouldCloseMenu);
+    return onItemActivated({
+      editorView: props.editorView,
+      buttonName: item.value.name
+    });
+  };
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("span", {
+      css: _styles.wrapperStyle
+    }, (0, _react2.jsx)(_uiMenu.DropdownMenuWithKeyboardNavigation, {
+      items: items,
+      onItemActivated: handleOnItemActivated,
+      mountTo: popupsMountPoint,
+      boundariesElement: popupsBoundariesElement,
+      scrollableElement: popupsScrollableElement,
+      isOpen: isDropdownOpen,
+      onOpenChange: onOpenChange,
+      fitHeight: 188,
+      fitWidth: 175,
+      shouldUseDefaultRole: true,
+      shouldFocusFirstItem: function shouldFocusFirstItem() {
+        if (isOpenedByKeyboard) {
+          setOpenedByKeyboard(false);
+        }
+        return isOpenedByKeyboard;
+      }
+    }, (0, _react2.jsx)(_uiMenu.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:
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      (0, _react2.jsx)("span", {
+        css: _styles.wrapperStyle
+      }, (0, _react2.jsx)(_bulletList.default, {
+        label: labelLists
+      }), (0, _react2.jsx)("span", {
+        css: _styles.expandIconWrapperStyle
+      }, (0, _react2.jsx)(_chevronDown.default, {
+        label: ""
+      })))
+    })), (0, _react2.jsx)("span", {
+      css: _styles.separatorStyles
+    }))
+  );
+}
+function useItems(props) {
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  var labelUnorderedList = formatMessage(_messages.listMessages.unorderedList);
+  var labelOrderedList = formatMessage(_messages.listMessages.orderedList);
+  var items = [{
+    key: 'unorderedList',
+    content: labelUnorderedList,
+    value: {
+      name: 'bullet_list'
+    },
+    isDisabled: props.bulletListDisabled,
+    isActive: Boolean(props.bulletListActive),
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: _shortcut.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.toggleBulletList))
+  }, {
+    key: 'orderedList',
+    content: labelOrderedList,
+    value: {
+      name: 'ordered_list'
+    },
+    isDisabled: props.orderedListDisabled,
+    isActive: Boolean(props.orderedListActive),
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: _shortcut.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.toggleOrderedList))
+  }];
+  if (props.showIndentationButtons) {
+    var labelIndent = formatMessage(_messages.indentationMessages.indent);
+    var labelOutdent = formatMessage(_messages.indentationMessages.outdent);
+    items.push({
+      key: 'outdent',
+      content: labelOutdent,
+      value: {
+        name: 'outdent'
+      },
+      isDisabled: props.outdentDisabled,
+      isActive: false,
+      elemAfter:
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      (0, _react2.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.outdent))
+    }, {
+      key: 'indent',
+      content: labelIndent,
+      value: {
+        name: 'indent'
+      },
+      isDisabled: props.indentDisabled,
+      isActive: false,
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      elemAfter: (0, _react2.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.indent))
+    });
+  }
+  return [{
+    items: items
+  }];
+}

package/dist/cjs/ui/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ToolbarListsIndentation;
+var _react = require("@emotion/react");
+var _onItemActivated = require("./onItemActivated");
+var _Toolbar = require("./Toolbar");
+var _ToolbarDropdown = require("./ToolbarDropdown");
+/** @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,
+    indentDisabled = props.indentDisabled,
+    outdentDisabled = props.outdentDisabled,
+    indentationStateNode = props.indentationStateNode,
+    featureFlags = props.featureFlags,
+    pluginInjectionApi = props.pluginInjectionApi;
+  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,
+      indentDisabled: indentDisabled,
+      outdentDisabled: outdentDisabled,
+      disabled: disabled,
+      onItemActivated: (0, _onItemActivated.onItemActivated)(pluginInjectionApi, indentationStateNode),
+      featureFlags: featureFlags
+    });
+  }
+  return (0, _react.jsx)(_Toolbar.Toolbar, {
+    editorView: props.editorView,
+    isReducedSpacing: isReducedSpacing,
+    bulletListActive: bulletListActive,
+    bulletListDisabled: bulletListDisabled,
+    showIndentationButtons: showIndentationButtons,
+    orderedListActive: orderedListActive,
+    orderedListDisabled: orderedListDisabled,
+    indentDisabled: indentDisabled,
+    outdentDisabled: outdentDisabled,
+    disabled: disabled,
+    onItemActivated: (0, _onItemActivated.onItemActivated)(pluginInjectionApi, indentationStateNode),
+    featureFlags: featureFlags
+  });
+}

package/dist/cjs/ui/onItemActivated.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onItemActivated = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var onItemActivated = exports.onItemActivated = function onItemActivated(pluginInjectionApi, indentationStateNode) {
+  return function (_ref) {
+    var buttonName = _ref.buttonName,
+      editorView = _ref.editorView;
+    switch (buttonName) {
+      case 'bullet_list':
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.toggleBulletList(_analytics.INPUT_METHOD.TOOLBAR));
+        break;
+      case 'ordered_list':
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.toggleOrderedList(_analytics.INPUT_METHOD.TOOLBAR));
+        break;
+      case 'indent':
+        {
+          var node = indentationStateNode;
+          if (node === 'paragraph_heading') {
+            var _pluginInjectionApi$i;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.indentation) === null || _pluginInjectionApi$i === void 0 || _pluginInjectionApi$i.actions.indentParagraphOrHeading(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+          }
+          if (node === 'list') {
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.indentList(_analytics.INPUT_METHOD.TOOLBAR));
+          }
+          if (node === 'taskList') {
+            var _pluginInjectionApi$t;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t === void 0 || _pluginInjectionApi$t.actions.indentTaskList(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+          }
+          break;
+        }
+      case 'outdent':
+        {
+          var _node = indentationStateNode;
+          if (_node === 'paragraph_heading') {
+            var _pluginInjectionApi$i2;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i2 = pluginInjectionApi.indentation) === null || _pluginInjectionApi$i2 === void 0 || _pluginInjectionApi$i2.actions.outdentParagraphOrHeading(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+          }
+          if (_node === 'list') {
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.outdentList(_analytics.INPUT_METHOD.TOOLBAR));
+          }
+          if (_node === 'taskList') {
+            var _pluginInjectionApi$t2;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t2 = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t2 === void 0 || _pluginInjectionApi$t2.actions.outdentTaskList(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+          }
+          break;
+        }
+    }
+  };
+};

package/dist/es2019/index.js

@@ -1 +1 @@
-export {};
+export { toolbarListsIndentationPlugin } from './plugin';