@atlaskit/editor-plugin-toolbar 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 0.4.6
+
+### Patch Changes
+
+- [`51f3f2db61f6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51f3f2db61f6e) -
+  Update toolbar config across plugins
+- Updated dependencies
+
 ## 0.4.5
 
 ### Patch Changes

package/dist/cjs/ui/PrimaryToolbar.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrimaryToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
+    label: "Primary Toolbar",
+    reducedBreakpoints: editorAppearance !== 'full-page'
+  }, children);
+};

package/dist/cjs/ui/TextCollapsedMenu.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextCollapsedMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+/**
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
+ * and is also placeholder to render all other menus in the collapsed state.
+ */
+var TextCollapsedMenu = exports.TextCollapsedMenu = function TextCollapsedMenu(_ref) {
+  var children = _ref.children;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarMessages.textStylesTooltip)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TextIcon, {
+      label: formatMessage(_messages.toolbarMessages.textStylesTooltip),
+      size: "small"
+    }),
+    enableMaxHeight: true
+  }, children));
+};

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
@@ -12,7 +13,9 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("./consts");
 var _OverflowMenu = require("./OverflowMenu");
 var _OverflowSection = require("./OverflowSection");
+var _PrimaryToolbar = require("./PrimaryToolbar");
 var _Section = require("./Section");
+var _TextCollapsedMenu = require("./TextCollapsedMenu");
 var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api, disableSelectionToolbar) {
   var components = [{
     type: 'toolbar',
@@ -26,10 +29,10 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
   }, {
     type: 'toolbar',
     key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
-    component: function component(_ref2) {
+    component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _PrimaryToolbar.PrimaryToolbar : function (_ref2) {
       var children = _ref2.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
-        label: 'Primary Toolbar'
+        label: "Primary Toolbar"
       }, children);
     }
   }, {
@@ -47,6 +50,16 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
     component: function component(_ref3) {
       var children = _ref3.children,
         parents = _ref3.parents;
+      if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+        return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+          above: "md"
+        }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
+          parents: parents,
+          api: api,
+          disableSelectionToolbar: disableSelectionToolbar,
+          testId: "text-section"
+        }, children));
+      }
       return /*#__PURE__*/_react.default.createElement(_Section.Section, {
         parents: parents,
         api: api,
@@ -54,7 +67,48 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         testId: "text-section"
       }, children);
     }
+  }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+    type: _toolbar.TEXT_SECTION_COLLAPSED.type,
+    key: _toolbar.TEXT_SECTION_COLLAPSED.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION_COLLAPSED.key]
+    }, {
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION_COLLAPSED.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children,
+        parents = _ref4.parents;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+        below: "md"
+      }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
+        parents: parents,
+        api: api,
+        disableSelectionToolbar: disableSelectionToolbar,
+        testId: "text-section"
+      }, children));
+    }
+  }, {
+    type: _toolbar.TEXT_COLLAPSED_GROUP.type,
+    key: _toolbar.TEXT_COLLAPSED_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_COLLAPSED.type,
+      key: _toolbar.TEXT_SECTION_COLLAPSED.key,
+      rank: 100
+    }]
   }, {
+    type: _toolbar.TEXT_COLLAPSED_MENU.type,
+    key: _toolbar.TEXT_COLLAPSED_MENU.key,
+    parents: [{
+      type: _toolbar.TEXT_COLLAPSED_GROUP.type,
+      key: _toolbar.TEXT_COLLAPSED_GROUP.key,
+      rank: 100
+    }],
+    component: _TextCollapsedMenu.TextCollapsedMenu
+  }] : []), [{
     type: _toolbar.INSERT_BLOCK_SECTION.type,
     key: _toolbar.INSERT_BLOCK_SECTION.key,
     parents: [{
@@ -62,9 +116,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.INSERT_BLOCK_SECTION.key]
     }],
-    component: function component(_ref4) {
-      var children = _ref4.children,
-        parents = _ref4.parents;
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        parents = _ref5.parents;
       return /*#__PURE__*/_react.default.createElement(_Section.Section, {
         testId: "insert-block-section",
         parents: parents,
@@ -85,9 +139,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.LINKING_SECTION.key]
     }],
-    component: function component(_ref5) {
-      var children = _ref5.children,
-        parents = _ref5.parents;
+    component: function component(_ref6) {
+      var children = _ref6.children,
+        parents = _ref6.parents;
       return /*#__PURE__*/_react.default.createElement(_Section.Section, {
         testId: "link-section",
         parents: parents,
@@ -119,8 +173,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.OVERFLOW_GROUP.key,
       rank: _toolbar.OVERFLOW_GROUP_RANK[_toolbar.OVERFLOW_MENU.key]
     }],
-    component: function component(_ref6) {
-      var children = _ref6.children;
+    component: function component(_ref7) {
+      var children = _ref7.children;
       return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
     }
   }, {
@@ -131,7 +185,7 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.PIN_SECTION.key]
     }]
-  }];
+  }]);
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
     components.push({
       type: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
@@ -141,8 +195,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
         rank: _toolbar.TOOLBAR_RANK[_toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref7) {
-        var children = _ref7.children;
+      component: function component(_ref8) {
+        var children = _ref8.children;
         return /*#__PURE__*/_react.default.createElement(_OverflowSection.OverflowSection, null, children);
       }
     }, {
@@ -161,8 +215,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
         rank: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref8) {
-        var children = _ref8.children;
+      component: function component(_ref9) {
+        var children = _ref9.children;
         return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
       }
     });

package/dist/es2019/ui/PrimaryToolbar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { PrimaryToolbar as PrimaryToolbarBase } from '@atlaskit/editor-toolbar';
+export const PrimaryToolbar = ({
+  children
+}) => {
+  const {
+    editorAppearance
+  } = useEditorToolbar();
+  return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
+    label: "Primary Toolbar",
+    reducedBreakpoints: editorAppearance !== 'full-page'
+  }, children);
+};

package/dist/es2019/ui/TextCollapsedMenu.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
+/**
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
+ * and is also placeholder to render all other menus in the collapsed state.
+ */
+export const TextCollapsedMenu = ({
+  children
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(toolbarMessages.textStylesTooltip)
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
+      label: formatMessage(toolbarMessages.textStylesTooltip),
+      size: "small"
+    }),
+    enableMaxHeight: true
+  }, children));
+};

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
-import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
+import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SELECTION_TOOLBAR_LABEL } from './consts';
 import { OverflowMenu } from './OverflowMenu';
 import { OverflowSection } from './OverflowSection';
+import { PrimaryToolbar } from './PrimaryToolbar';
 import { Section } from './Section';
+import { TextCollapsedMenu } from './TextCollapsedMenu';
 export const getToolbarComponents = (api, disableSelectionToolbar) => {
   const components = [{
     type: 'toolbar',
@@ -20,10 +22,10 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
   }, {
     type: 'toolbar',
     key: TOOLBARS.PRIMARY_TOOLBAR,
-    component: ({
+    component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : ({
       children
-    }) => /*#__PURE__*/React.createElement(PrimaryToolbar, {
-      label: 'Primary Toolbar'
+    }) => /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
+      label: "Primary Toolbar"
     }, children)
   }, {
     type: TEXT_SECTION.type,
@@ -41,6 +43,16 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
       children,
       parents
     }) => {
+      if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+        return /*#__PURE__*/React.createElement(Show, {
+          above: "md"
+        }, /*#__PURE__*/React.createElement(Section, {
+          parents: parents,
+          api: api,
+          disableSelectionToolbar: disableSelectionToolbar,
+          testId: "text-section"
+        }, children));
+      }
       return /*#__PURE__*/React.createElement(Section, {
         parents: parents,
         api: api,
@@ -48,7 +60,49 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
         testId: "text-section"
       }, children);
     }
+  }, ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+    type: TEXT_SECTION_COLLAPSED.type,
+    key: TEXT_SECTION_COLLAPSED.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
+    }],
+    component: ({
+      children,
+      parents
+    }) => {
+      return /*#__PURE__*/React.createElement(Show, {
+        below: "md"
+      }, /*#__PURE__*/React.createElement(Section, {
+        parents: parents,
+        api: api,
+        disableSelectionToolbar: disableSelectionToolbar,
+        testId: "text-section"
+      }, children));
+    }
   }, {
+    type: TEXT_COLLAPSED_GROUP.type,
+    key: TEXT_COLLAPSED_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION_COLLAPSED.type,
+      key: TEXT_SECTION_COLLAPSED.key,
+      rank: 100
+    }]
+  }, {
+    type: TEXT_COLLAPSED_MENU.type,
+    key: TEXT_COLLAPSED_MENU.key,
+    parents: [{
+      type: TEXT_COLLAPSED_GROUP.type,
+      key: TEXT_COLLAPSED_GROUP.key,
+      rank: 100
+    }],
+    component: TextCollapsedMenu
+  }] : []), {
     type: INSERT_BLOCK_SECTION.type,
     key: INSERT_BLOCK_SECTION.key,
     parents: [{

package/dist/esm/ui/PrimaryToolbar.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { PrimaryToolbar as PrimaryToolbarBase } from '@atlaskit/editor-toolbar';
+export var PrimaryToolbar = function PrimaryToolbar(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
+    label: "Primary Toolbar",
+    reducedBreakpoints: editorAppearance !== 'full-page'
+  }, children);
+};

package/dist/esm/ui/TextCollapsedMenu.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
+/**
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
+ * and is also placeholder to render all other menus in the collapsed state.
+ */
+export var TextCollapsedMenu = function TextCollapsedMenu(_ref) {
+  var children = _ref.children;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(toolbarMessages.textStylesTooltip)
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
+      label: formatMessage(toolbarMessages.textStylesTooltip),
+      size: "small"
+    }),
+    enableMaxHeight: true
+  }, children));
+};

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

@@ -1,11 +1,14 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
-import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
+import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SELECTION_TOOLBAR_LABEL } from './consts';
 import { OverflowMenu } from './OverflowMenu';
 import { OverflowSection } from './OverflowSection';
+import { PrimaryToolbar } from './PrimaryToolbar';
 import { Section } from './Section';
+import { TextCollapsedMenu } from './TextCollapsedMenu';
 export var getToolbarComponents = function getToolbarComponents(api, disableSelectionToolbar) {
   var components = [{
     type: 'toolbar',
@@ -19,10 +22,10 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
   }, {
     type: 'toolbar',
     key: TOOLBARS.PRIMARY_TOOLBAR,
-    component: function component(_ref2) {
+    component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : function (_ref2) {
       var children = _ref2.children;
-      return /*#__PURE__*/React.createElement(PrimaryToolbar, {
-        label: 'Primary Toolbar'
+      return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
+        label: "Primary Toolbar"
       }, children);
     }
   }, {
@@ -40,6 +43,16 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
     component: function component(_ref3) {
       var children = _ref3.children,
         parents = _ref3.parents;
+      if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+        return /*#__PURE__*/React.createElement(Show, {
+          above: "md"
+        }, /*#__PURE__*/React.createElement(Section, {
+          parents: parents,
+          api: api,
+          disableSelectionToolbar: disableSelectionToolbar,
+          testId: "text-section"
+        }, children));
+      }
       return /*#__PURE__*/React.createElement(Section, {
         parents: parents,
         api: api,
@@ -47,7 +60,48 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         testId: "text-section"
       }, children);
     }
+  }].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+    type: TEXT_SECTION_COLLAPSED.type,
+    key: TEXT_SECTION_COLLAPSED.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children,
+        parents = _ref4.parents;
+      return /*#__PURE__*/React.createElement(Show, {
+        below: "md"
+      }, /*#__PURE__*/React.createElement(Section, {
+        parents: parents,
+        api: api,
+        disableSelectionToolbar: disableSelectionToolbar,
+        testId: "text-section"
+      }, children));
+    }
+  }, {
+    type: TEXT_COLLAPSED_GROUP.type,
+    key: TEXT_COLLAPSED_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION_COLLAPSED.type,
+      key: TEXT_SECTION_COLLAPSED.key,
+      rank: 100
+    }]
   }, {
+    type: TEXT_COLLAPSED_MENU.type,
+    key: TEXT_COLLAPSED_MENU.key,
+    parents: [{
+      type: TEXT_COLLAPSED_GROUP.type,
+      key: TEXT_COLLAPSED_GROUP.key,
+      rank: 100
+    }],
+    component: TextCollapsedMenu
+  }] : []), [{
     type: INSERT_BLOCK_SECTION.type,
     key: INSERT_BLOCK_SECTION.key,
     parents: [{
@@ -55,9 +109,9 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[INSERT_BLOCK_SECTION.key]
     }],
-    component: function component(_ref4) {
-      var children = _ref4.children,
-        parents = _ref4.parents;
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        parents = _ref5.parents;
       return /*#__PURE__*/React.createElement(Section, {
         testId: "insert-block-section",
         parents: parents,
@@ -78,9 +132,9 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[LINKING_SECTION.key]
     }],
-    component: function component(_ref5) {
-      var children = _ref5.children,
-        parents = _ref5.parents;
+    component: function component(_ref6) {
+      var children = _ref6.children,
+        parents = _ref6.parents;
       return /*#__PURE__*/React.createElement(Section, {
         testId: "link-section",
         parents: parents,
@@ -112,8 +166,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: OVERFLOW_GROUP.key,
       rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
     }],
-    component: function component(_ref6) {
-      var children = _ref6.children;
+    component: function component(_ref7) {
+      var children = _ref7.children;
       return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
     }
   }, {
@@ -124,7 +178,7 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[PIN_SECTION.key]
     }]
-  }];
+  }]);
   if (expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
     components.push({
       type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
@@ -134,8 +188,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         key: TOOLBARS.PRIMARY_TOOLBAR,
         rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref7) {
-        var children = _ref7.children;
+      component: function component(_ref8) {
+        var children = _ref8.children;
         return /*#__PURE__*/React.createElement(OverflowSection, null, children);
       }
     }, {
@@ -154,8 +208,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
         rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref8) {
-        var children = _ref8.children;
+      component: function component(_ref9) {
+        var children = _ref9.children;
         return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
       }
     });

package/dist/types/ui/PrimaryToolbar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type PrimaryToolbarProps = {
+    children: React.ReactNode;
+};
+export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
+export {};

package/dist/types/ui/TextCollapsedMenu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type TextStylesMenuButtonProps = {
+    children: React.ReactNode;
+};
+/**
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
+ * and is also placeholder to render all other menus in the collapsed state.
+ */
+export declare const TextCollapsedMenu: ({ children }: TextStylesMenuButtonProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/PrimaryToolbar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type PrimaryToolbarProps = {
+    children: React.ReactNode;
+};
+export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/TextCollapsedMenu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type TextStylesMenuButtonProps = {
+    children: React.ReactNode;
+};
+/**
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
+ * and is also placeholder to render all other menus in the collapsed state.
+ */
+export declare const TextCollapsedMenu: ({ children }: TextStylesMenuButtonProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "0.4.5",
+	"version": "0.4.6",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,15 +34,15 @@
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-plugin-user-preferences": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-toolbar": "^0.5.0",
-		"@atlaskit/editor-toolbar-model": "^0.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/editor-toolbar": "^0.6.0",
+		"@atlaskit/editor-toolbar-model": "^0.2.0",
+		"@atlaskit/tmp-editor-statsig": "^11.11.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.33.0",
+		"@atlaskit/editor-common": "^107.34.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {