@atlaskit/editor-plugin-toolbar-lists-indentation 6.1.2 → 6.1.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-toolbar-lists-indentation
 
+## 6.1.4
+
+### Patch Changes
+
+- [`fb6997c75469f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb6997c75469f) -
+  [ux] ED-29319 [CR-6a] Update full page toolbar responstiveness
+- Updated dependencies
+
+## 6.1.3
+
+### Patch Changes
+
+- [`19b70bcbda751`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19b70bcbda751) -
+  [ux] ED-29181 Keyboard shortcuts should appear disabled in menu item
+- Updated dependencies
+
 ## 6.1.2
 
 ### Patch Changes

package/dist/cjs/ui/Toolbar.js

@@ -1,4 +1,4 @@
-/* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Toolbar.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/ToolbarDropdown.js

@@ -1,4 +1,4 @@
-/* ToolbarDropdown.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ToolbarDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/toolbar-components/BulletedListButton.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BulletedListButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _BulletedListMenuItem = require("./BulletedListMenuItem");
+var BulletedListButton = exports.BulletedListButton = function BulletedListButton(_ref) {
+  var api = _ref.api,
+    parents = _ref.parents;
+  var _useBulletedListInfo = (0, _BulletedListMenuItem.useBulletedListInfo)({
+      api: api,
+      parents: parents
+    }),
+    bulletMessage = _useBulletedListInfo.bulletMessage,
+    onClick = _useBulletedListInfo.onClick,
+    isDisabled = _useBulletedListInfo.isDisabled,
+    isSelected = _useBulletedListInfo.isSelected;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: bulletMessage,
+      keymap: _keymaps.toggleBulletList
+    })
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ListBulletedIcon, {
+      size: "small",
+      label: ""
+    }),
+    onClick: onClick,
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleBulletList)
+  }));
+};

package/dist/cjs/ui/toolbar-components/BulletedListButtonGroup.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBulletedListButtonGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _BulletedListButton = require("./BulletedListButton");
+var BulletedListButtonGroup = function BulletedListButtonGroup(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+      above: "xl"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+  }
+};
+var getBulletedListButtonGroup = exports.getBulletedListButtonGroup = function getBulletedListButtonGroup(api) {
+  return [{
+    type: _toolbar.BULLETED_LIST_BUTTON_GROUP.type,
+    key: _toolbar.BULLETED_LIST_BUTTON_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.BULLETED_LIST_BUTTON_GROUP.key]
+    }],
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(BulletedListButtonGroup, null, children);
+    }
+  }, {
+    type: _toolbar.BULLETED_LIST_BUTTON.type,
+    key: _toolbar.BULLETED_LIST_BUTTON.key,
+    parents: [{
+      type: _toolbar.BULLETED_LIST_BUTTON_GROUP.type,
+      key: _toolbar.BULLETED_LIST_BUTTON_GROUP.key,
+      rank: 100
+    }],
+    component: function component(_ref3) {
+      var parents = _ref3.parents;
+      return /*#__PURE__*/_react.default.createElement(_BulletedListButton.BulletedListButton, {
+        api: api,
+        parents: parents
+      });
+    }
+  }];
+};

package/dist/cjs/ui/toolbar-components/BulletedListMenuItem.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BulletedListMenuItem = void 0;
+exports.useBulletedListInfo = exports.BulletedListMenuItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -13,11 +13,12 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var BulletedListMenuItem = exports.BulletedListMenuItem = function BulletedListMenuItem(_ref) {
+var useBulletedListInfo = exports.useBulletedListInfo = function useBulletedListInfo(_ref) {
   var api = _ref.api,
     parents = _ref.parents;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var bulletMessage = formatMessage(_messages.listMessages.bulletedList);
   var isTaskListItemEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_task_list_menu_item', 'isEnabled', true);
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['list', 'taskDecision'], function (states) {
       var _states$listState, _states$listState2, _states$taskDecisionS;
@@ -34,7 +35,28 @@ var BulletedListMenuItem = exports.BulletedListMenuItem = function BulletedListM
     var _api$taskDecision;
     api === null || api === void 0 || api.core.actions.execute(isTaskListItemEnabled && taskListActive ? api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 ? void 0 : _api$taskDecision.commands.toggleTaskList('bulletList') : api === null || api === void 0 ? void 0 : api.list.commands.toggleBulletList((0, _toolbar.getInputMethodFromParentKeys)(parents)));
   };
+  var isDisabled = isTaskListItemEnabled ? bulletListDisabled && !taskListActive : bulletListDisabled;
   var shortcut = (0, _keymaps.formatShortcut)(_keymaps.toggleBulletList);
+  return {
+    bulletMessage: bulletMessage,
+    onClick: onClick,
+    isDisabled: isDisabled,
+    isSelected: bulletListActive,
+    shortcut: shortcut
+  };
+};
+var BulletedListMenuItem = exports.BulletedListMenuItem = function BulletedListMenuItem(_ref2) {
+  var api = _ref2.api,
+    parents = _ref2.parents;
+  var _useBulletedListInfo = useBulletedListInfo({
+      api: api,
+      parents: parents
+    }),
+    bulletMessage = _useBulletedListInfo.bulletMessage,
+    onClick = _useBulletedListInfo.onClick,
+    isDisabled = _useBulletedListInfo.isDisabled,
+    isSelected = _useBulletedListInfo.isSelected,
+    shortcut = _useBulletedListInfo.shortcut;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ListBulletedIcon, {
       size: "small",
@@ -43,9 +65,9 @@ var BulletedListMenuItem = exports.BulletedListMenuItem = function BulletedListM
     elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
       shortcut: shortcut
     }) : undefined,
-    isSelected: bulletListActive,
-    isDisabled: isTaskListItemEnabled ? bulletListDisabled && !taskListActive : bulletListDisabled,
+    isSelected: isSelected,
+    isDisabled: isDisabled,
     onClick: onClick,
     ariaKeyshortcuts: shortcut
-  }, formatMessage(_messages.listMessages.bulletedList));
+  }, bulletMessage);
 };

package/dist/cjs/ui/toolbar-components/ListsIndentationGroupForInlineToolbar.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getListsIndentationGroupForInlineToolbar = void 0;
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var getListsIndentationGroupForInlineToolbar = exports.getListsIndentationGroupForInlineToolbar = function getListsIndentationGroupForInlineToolbar() {
+  return [{
+    type: _toolbar.LISTS_INDENTATION_GROUP_INLINE.type,
+    key: _toolbar.LISTS_INDENTATION_GROUP_INLINE.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION.type,
+      key: _toolbar.TEXT_SECTION.key,
+      rank: _toolbar.TEXT_SECTION_RANK[_toolbar.LISTS_INDENTATION_GROUP.key]
+    }]
+  }];
+};

package/dist/cjs/ui/toolbar-components/ListsIndentationGroupForPrimaryToolbar.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getListsIndentationGroupForPrimaryToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var ListsIndentationGroup = function ListsIndentationGroup(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+      above: "xl"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+  }
+};
+var ListsIndentationGroupCollapsed = function ListsIndentationGroupCollapsed(_ref2) {
+  var children = _ref2.children;
+  var _useEditorToolbar2 = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar2.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+      below: "xl"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children);
+};
+var getListsIndentationGroupForPrimaryToolbar = exports.getListsIndentationGroupForPrimaryToolbar = function getListsIndentationGroupForPrimaryToolbar() {
+  return [{
+    type: _toolbar.LISTS_INDENTATION_GROUP.type,
+    key: _toolbar.LISTS_INDENTATION_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.LISTS_INDENTATION_GROUP.key]
+    }],
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/_react.default.createElement(ListsIndentationGroup, null, children);
+    }
+  }, {
+    type: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED.type,
+    key: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.LISTS_INDENTATION_GROUP.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/_react.default.createElement(ListsIndentationGroupCollapsed, null, children);
+    }
+  }];
+};

package/dist/cjs/ui/toolbar-components/ListsIndentationHeroButton.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ListsIndentationHeroButton = void 0;
+exports.ListsIndentationHeroButtonNew = exports.ListsIndentationHeroButtonCollapsed = exports.ListsIndentationHeroButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -14,9 +14,10 @@ var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var ListsIndentationHeroButton = exports.ListsIndentationHeroButton = function ListsIndentationHeroButton(_ref) {
+function useListsIndentationHeroButtonInfo(_ref) {
   var api = _ref.api,
-    parents = _ref.parents;
+    parents = _ref.parents,
+    defaultListType = _ref.defaultListType;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isTaskListItemEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_task_list_menu_item', 'isEnabled', true);
@@ -33,12 +34,125 @@ var ListsIndentationHeroButton = exports.ListsIndentationHeroButton = function L
     bulletListDisabled = _useSharedPluginState.bulletListDisabled,
     orderedListActive = _useSharedPluginState.orderedListActive,
     taskListActive = _useSharedPluginState.taskListActive;
-  var shortcut = isTaskListItemEnabled && taskListActive ? (0, _keymaps.formatShortcut)(_keymaps.toggleTaskItemCheckbox) : orderedListActive ? (0, _keymaps.formatShortcut)(_keymaps.toggleOrderedList) : (0, _keymaps.formatShortcut)(_keymaps.toggleBulletList);
+  var getListType = isTaskListItemEnabled && taskListActive ? 'taskList' : orderedListActive ? 'orderedList' : defaultListType;
+  var getKeymap = getListType === 'taskList' ? _keymaps.toggleTaskItemCheckbox : getListType === 'orderedList' ? _keymaps.toggleOrderedList : _keymaps.toggleBulletList;
+  var shortcut = (0, _keymaps.formatShortcut)(getKeymap);
+  var keymap = getKeymap;
+  var message = getListType === 'taskList' ? formatMessage(_messages.tasksAndDecisionsMessages.taskList) : getListType === 'orderedList' ? formatMessage(_messages.listMessages.orderedList) : formatMessage(_messages.listMessages.bulletedList);
   var onClick = function onClick() {
     var inputMethod = (0, _toolbar.getInputMethodFromParentKeys)(parents);
-    if (isTaskListItemEnabled && taskListActive) {
+    if (getListType === 'taskList') {
       var _api$taskDecision;
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 ? void 0 : _api$taskDecision.commands.toggleTaskList());
+    } else if (getListType === 'orderedList') {
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleOrderedList(inputMethod));
+    } else {
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleBulletList(inputMethod));
+    }
+  };
+  var iconBefore = getListType === 'taskList' ? /*#__PURE__*/_react.default.createElement(_task.default, {
+    label: formatMessage(_messages.tasksAndDecisionsMessages.taskList),
+    size: "small"
+  }) : getListType === 'orderedList' ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ListNumberedIcon, {
+    label: formatMessage(_messages.listMessages.orderedList),
+    size: "small"
+  }) : /*#__PURE__*/_react.default.createElement(_editorToolbar.ListBulletedIcon, {
+    label: formatMessage(_messages.listMessages.bulletedList),
+    size: "small"
+  });
+  var isSelected = getListType === 'bulletList' ? bulletListActive : getListType === 'orderedList' ? orderedListActive : isTaskListItemEnabled && taskListActive;
+  var isDisabled = !orderedListActive && !(isTaskListItemEnabled && taskListActive) && bulletListDisabled;
+  return {
+    shortcut: shortcut,
+    keymap: keymap,
+    message: message,
+    onClick: onClick,
+    iconBefore: iconBefore,
+    isSelected: isSelected,
+    isDisabled: isDisabled
+  };
+}
+var ListsIndentationHeroButtonCollapsed = exports.ListsIndentationHeroButtonCollapsed = function ListsIndentationHeroButtonCollapsed(_ref2) {
+  var api = _ref2.api,
+    parents = _ref2.parents;
+  var _useListsIndentationH = useListsIndentationHeroButtonInfo({
+      api: api,
+      parents: parents,
+      defaultListType: 'bulletList'
+    }),
+    shortcut = _useListsIndentationH.shortcut,
+    keymap = _useListsIndentationH.keymap,
+    message = _useListsIndentationH.message,
+    onClick = _useListsIndentationH.onClick,
+    iconBefore = _useListsIndentationH.iconBefore,
+    isSelected = _useListsIndentationH.isSelected,
+    isDisabled = _useListsIndentationH.isDisabled;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: message,
+      keymap: keymap
+    })
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: iconBefore,
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    ariaKeyshortcuts: shortcut,
+    onClick: onClick
+  }));
+};
+var ListsIndentationHeroButtonNew = exports.ListsIndentationHeroButtonNew = function ListsIndentationHeroButtonNew(_ref3) {
+  var api = _ref3.api,
+    parents = _ref3.parents;
+  var _useListsIndentationH2 = useListsIndentationHeroButtonInfo({
+      api: api,
+      parents: parents,
+      defaultListType: 'orderedList'
+    }),
+    shortcut = _useListsIndentationH2.shortcut,
+    keymap = _useListsIndentationH2.keymap,
+    message = _useListsIndentationH2.message,
+    onClick = _useListsIndentationH2.onClick,
+    iconBefore = _useListsIndentationH2.iconBefore,
+    isSelected = _useListsIndentationH2.isSelected,
+    isDisabled = _useListsIndentationH2.isDisabled;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: message,
+      keymap: keymap
+    })
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: iconBefore,
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    ariaKeyshortcuts: shortcut,
+    onClick: onClick
+  }));
+};
+var ListsIndentationHeroButton = exports.ListsIndentationHeroButton = function ListsIndentationHeroButton(_ref4) {
+  var api = _ref4.api,
+    parents = _ref4.parents;
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  var isTaskListItemEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_task_list_menu_item', 'isEnabled', true);
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['list', 'taskDecision'], function (states) {
+      var _states$listState4, _states$listState5, _states$listState6, _states$taskDecisionS2;
+      return {
+        bulletListActive: (_states$listState4 = states.listState) === null || _states$listState4 === void 0 ? void 0 : _states$listState4.bulletListActive,
+        bulletListDisabled: (_states$listState5 = states.listState) === null || _states$listState5 === void 0 ? void 0 : _states$listState5.bulletListDisabled,
+        orderedListActive: (_states$listState6 = states.listState) === null || _states$listState6 === void 0 ? void 0 : _states$listState6.orderedListActive,
+        taskListActive: (_states$taskDecisionS2 = states.taskDecisionState) === null || _states$taskDecisionS2 === void 0 ? void 0 : _states$taskDecisionS2.isInsideTask
+      };
+    }),
+    bulletListActive = _useSharedPluginState2.bulletListActive,
+    bulletListDisabled = _useSharedPluginState2.bulletListDisabled,
+    orderedListActive = _useSharedPluginState2.orderedListActive,
+    taskListActive = _useSharedPluginState2.taskListActive;
+  var shortcut = isTaskListItemEnabled && taskListActive ? (0, _keymaps.formatShortcut)(_keymaps.toggleTaskItemCheckbox) : orderedListActive ? (0, _keymaps.formatShortcut)(_keymaps.toggleOrderedList) : (0, _keymaps.formatShortcut)(_keymaps.toggleBulletList);
+  var onClick = function onClick() {
+    var inputMethod = (0, _toolbar.getInputMethodFromParentKeys)(parents);
+    if (isTaskListItemEnabled && taskListActive) {
+      var _api$taskDecision2;
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 ? void 0 : _api$taskDecision2.commands.toggleTaskList());
     } else if (orderedListActive) {
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleOrderedList(inputMethod));
     } else {

package/dist/cjs/ui/toolbar-components/ListsIndentationHeroButtonGroup.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getListsIndentationHeroButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _ListsIndentationHeroButton = require("./ListsIndentationHeroButton");
+var getListsIndentationHeroButton = exports.getListsIndentationHeroButton = function getListsIndentationHeroButton(api) {
+  return [{
+    type: _toolbar.LISTS_INDENTATION_HERO_BUTTON.type,
+    key: _toolbar.LISTS_INDENTATION_HERO_BUTTON.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_GROUP.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_RANK[_toolbar.LISTS_INDENTATION_HERO_BUTTON.key]
+    }],
+    component: function component(_ref) {
+      var parents = _ref.parents;
+      return /*#__PURE__*/_react.default.createElement(_ListsIndentationHeroButton.ListsIndentationHeroButtonNew, {
+        api: api,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.LISTS_INDENTATION_HERO_BUTTON_COLLAPSED.type,
+    key: _toolbar.LISTS_INDENTATION_HERO_BUTTON_COLLAPSED.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED_RANK[_toolbar.LISTS_INDENTATION_HERO_BUTTON_COLLAPSED.key]
+    }, {
+      type: _toolbar.LISTS_INDENTATION_GROUP_INLINE.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP_INLINE.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED_RANK[_toolbar.LISTS_INDENTATION_HERO_BUTTON_COLLAPSED.key]
+    }],
+    component: function component(_ref2) {
+      var parents = _ref2.parents;
+      return /*#__PURE__*/_react.default.createElement(_ListsIndentationHeroButton.ListsIndentationHeroButtonCollapsed, {
+        api: api,
+        parents: parents
+      });
+    }
+  }];
+};

package/dist/cjs/ui/toolbar-components/ListsIndentationMenuGroup.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getListsIndentationMenu = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _BulletedListMenuItem = require("./BulletedListMenuItem");
+var _IndentMenuItem = require("./IndentMenuItem");
+var _ListsIndentationMenu = require("./ListsIndentationMenu");
+var _MenuSection = require("./MenuSection");
+var _NumberedListMenuItem = require("./NumberedListMenuItem");
+var _OutdentMenuItem = require("./OutdentMenuItem");
+var _TaskListMenuItem = require("./TaskListMenuItem");
+var getListsIndentationMenu = exports.getListsIndentationMenu = function getListsIndentationMenu(allowHeadingAndParagraphIndentation, showIndentationButtons, api) {
+  return [{
+    type: _toolbar.LISTS_INDENTATION_MENU.type,
+    key: _toolbar.LISTS_INDENTATION_MENU.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_GROUP.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_RANK[_toolbar.LISTS_INDENTATION_MENU.key]
+    }, {
+      type: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED_RANK[_toolbar.LISTS_INDENTATION_MENU.key]
+    }, {
+      type: _toolbar.LISTS_INDENTATION_GROUP_INLINE.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP_INLINE.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_COLLAPSED_RANK[_toolbar.LISTS_INDENTATION_MENU.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_ListsIndentationMenu.ListsIndentationMenu, {
+        api: api,
+        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
+      }, children);
+    }
+  }, {
+    type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+    key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU.type,
+      key: _toolbar.LISTS_INDENTATION_MENU.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_RANK[_toolbar.LISTS_INDENTATION_MENU_SECTION.key]
+    }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: _toolbar.TEXT_COLLAPSED_MENU.type,
+      key: _toolbar.TEXT_COLLAPSED_MENU.key,
+      rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.LISTS_INDENTATION_MENU_SECTION.key]
+    }] : [])),
+    component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _MenuSection.MenuSection : undefined
+  }, {
+    type: _toolbar.BULLETED_LIST_MENU_ITEM.type,
+    key: _toolbar.BULLETED_LIST_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.BULLETED_LIST_MENU_ITEM.key]
+    }],
+    component: function component(_ref2) {
+      var parents = _ref2.parents;
+      return /*#__PURE__*/_react.default.createElement(_BulletedListMenuItem.BulletedListMenuItem, {
+        api: api,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.NUMBERED_LIST_MENU_ITEM.type,
+    key: _toolbar.NUMBERED_LIST_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.NUMBERED_LIST_MENU_ITEM.key]
+    }],
+    component: function component(_ref3) {
+      var parents = _ref3.parents;
+      return /*#__PURE__*/_react.default.createElement(_NumberedListMenuItem.NumberedListMenuItem, {
+        api: api,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.TASK_LIST_MENU_ITEM.type,
+    key: _toolbar.TASK_LIST_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.TASK_LIST_MENU_ITEM.key]
+    }],
+    component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_task_list_menu_item', 'isEnabled', true) ? function (_ref4) {
+      var parents = _ref4.parents;
+      return /*#__PURE__*/_react.default.createElement(_TaskListMenuItem.TaskListMenuItem, {
+        api: api,
+        parents: parents
+      });
+    } : undefined
+  }, {
+    type: _toolbar.OUTDENT_MENU_ITEM.type,
+    key: _toolbar.OUTDENT_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.OUTDENT_MENU_ITEM.key]
+    }],
+    component: function component(_ref5) {
+      var parents = _ref5.parents;
+      return /*#__PURE__*/_react.default.createElement(_OutdentMenuItem.OutdentMenuItem, {
+        api: api,
+        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
+        showIndentationButtons: showIndentationButtons,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.INDENT_MENU_ITEM.type,
+    key: _toolbar.INDENT_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.INDENT_MENU_ITEM.key]
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      return /*#__PURE__*/_react.default.createElement(_IndentMenuItem.IndentMenuItem, {
+        api: api,
+        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
+        showIndentationButtons: showIndentationButtons,
+        parents: parents
+      });
+    }
+  }];
+};

package/dist/cjs/ui/toolbar-components.js

@@ -9,10 +9,15 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _BulletedListButtonGroup = require("./toolbar-components/BulletedListButtonGroup");
 var _BulletedListMenuItem = require("./toolbar-components/BulletedListMenuItem");
 var _IndentMenuItem = require("./toolbar-components/IndentMenuItem");
+var _ListsIndentationGroupForInlineToolbar = require("./toolbar-components/ListsIndentationGroupForInlineToolbar");
+var _ListsIndentationGroupForPrimaryToolbar = require("./toolbar-components/ListsIndentationGroupForPrimaryToolbar");
 var _ListsIndentationHeroButton = require("./toolbar-components/ListsIndentationHeroButton");
+var _ListsIndentationHeroButtonGroup = require("./toolbar-components/ListsIndentationHeroButtonGroup");
 var _ListsIndentationMenu = require("./toolbar-components/ListsIndentationMenu");
+var _ListsIndentationMenuGroup = require("./toolbar-components/ListsIndentationMenuGroup");
 var _MenuSection = require("./toolbar-components/MenuSection");
 var _NumberedListMenuItem = require("./toolbar-components/NumberedListMenuItem");
 var _OutdentMenuItem = require("./toolbar-components/OutdentMenuItem");
@@ -21,7 +26,11 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
   var api = _ref.api,
     showIndentationButtons = _ref.showIndentationButtons,
     allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
-  return [{
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? getToolbarComponentsResponsivenessUpdate({
+    api: api,
+    showIndentationButtons: showIndentationButtons,
+    allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
+  }) : [{
     type: _toolbar.LISTS_INDENTATION_GROUP.type,
     key: _toolbar.LISTS_INDENTATION_GROUP.key,
     parents: [{
@@ -152,4 +161,10 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       });
     }
   }];
+};
+var getToolbarComponentsResponsivenessUpdate = function getToolbarComponentsResponsivenessUpdate(_ref9) {
+  var api = _ref9.api,
+    showIndentationButtons = _ref9.showIndentationButtons,
+    allowHeadingAndParagraphIndentation = _ref9.allowHeadingAndParagraphIndentation;
+  return [].concat((0, _toConsumableArray2.default)((0, _ListsIndentationGroupForPrimaryToolbar.getListsIndentationGroupForPrimaryToolbar)()), (0, _toConsumableArray2.default)((0, _ListsIndentationGroupForInlineToolbar.getListsIndentationGroupForInlineToolbar)()), (0, _toConsumableArray2.default)((0, _ListsIndentationHeroButtonGroup.getListsIndentationHeroButton)(api)), (0, _toConsumableArray2.default)((0, _BulletedListButtonGroup.getBulletedListButtonGroup)(api)), (0, _toConsumableArray2.default)((0, _ListsIndentationMenuGroup.getListsIndentationMenu)(allowHeadingAndParagraphIndentation, showIndentationButtons, api)));
 };

package/dist/es2019/ui/Toolbar.js

@@ -1,4 +1,4 @@
-/* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Toolbar.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useRef } from 'react';