@atlaskit/editor-plugin-toolbar 3.4.6 → 3.4.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 3.4.7
+
+### Patch Changes
+
+- [`8263f21e34dff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8263f21e34dff) -
+  [ux] ED-29646 Implement ResponsiveContainer breakpoint preset system
+- Updated dependencies
+
 ## 3.4.6
 
 ### Patch Changes

package/dist/cjs/toolbarPlugin.js

@@ -79,9 +79,10 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
   var disableSelectionToolbar = config.disableSelectionToolbar,
     disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
     _config$contextualFor = config.contextualFormattingEnabled,
-    contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor;
+    contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor,
+    breakpointPreset = config.breakpointPreset;
   var registry = (0, _editorToolbarModel.createComponentRegistry)();
-  registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, disableSelectionToolbar));
+  registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
   return {
     name: 'toolbar',
     actions: {

package/dist/cjs/ui/PrimaryToolbar.js

@@ -8,12 +8,23 @@ exports.PrimaryToolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var isFullPage = function isFullPage(editorAppearance) {
+  return editorAppearance === 'full-page' || editorAppearance === 'full-width';
+};
+var getBreakpointPreset = function getBreakpointPreset(breakpointPreset, editorAppearance) {
+  if (breakpointPreset) {
+    return breakpointPreset;
+  }
+  return editorAppearance && isFullPage(editorAppearance) ? 'fullpage' : 'reduced';
+};
 var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    breakpointPreset = _ref.breakpointPreset;
   var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
     editorAppearance = _useEditorToolbar.editorAppearance;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
     label: "Primary Toolbar",
-    reducedBreakpoints: editorAppearance !== 'full-page'
+    reducedBreakpoints: editorAppearance !== 'full-page',
+    breakpointPreset: getBreakpointPreset(breakpointPreset, editorAppearance)
   }, children);
 };

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

@@ -32,12 +32,17 @@ var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
     }
   }];
 };
-var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
+var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(breakpointPreset) {
   return [{
     type: 'toolbar',
     key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
-    component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _PrimaryToolbar.PrimaryToolbar : function (_ref2) {
+    component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? function (_ref2) {
       var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbar.PrimaryToolbar, {
+        breakpointPreset: breakpointPreset
+      }, children);
+    } : function (_ref3) {
+      var children = _ref3.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
         label: "Primary Toolbar",
         testId: "primary-toolbar"
@@ -45,7 +50,7 @@ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
     }
   }];
 };
-var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar) {
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset) {
   var components = [{
     type: _toolbar.TEXT_SECTION.type,
     key: _toolbar.TEXT_SECTION.key,
@@ -54,9 +59,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
     }],
-    component: function component(_ref3) {
-      var children = _ref3.children,
-        parents = _ref3.parents;
+    component: function component(_ref4) {
+      var children = _ref4.children,
+        parents = _ref4.parents;
       if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
         return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
           above: "md"
@@ -82,9 +87,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
     }],
-    component: function component(_ref4) {
-      var children = _ref4.children,
-        parents = _ref4.parents;
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        parents = _ref5.parents;
       if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
         return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
           above: "md"
@@ -114,9 +119,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION_COLLAPSED.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(_editorToolbar.Show, {
         below: "md"
       }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
@@ -151,9 +156,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.INSERT_BLOCK_SECTION.key]
     }],
-    component: function component(_ref6) {
-      var children = _ref6.children,
-        parents = _ref6.parents;
+    component: function component(_ref7) {
+      var children = _ref7.children,
+        parents = _ref7.parents;
       return /*#__PURE__*/_react.default.createElement(_Section.Section, {
         testId: "insert-block-section",
         parents: parents,
@@ -174,9 +179,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.LINKING_SECTION.key]
     }],
-    component: function component(_ref7) {
-      var children = _ref7.children,
-        parents = _ref7.parents;
+    component: function component(_ref8) {
+      var children = _ref8.children,
+        parents = _ref8.parents;
       return /*#__PURE__*/_react.default.createElement(_Section.Section, {
         testId: "link-section",
         parents: parents,
@@ -208,8 +213,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.OVERFLOW_GROUP.key,
       rank: _toolbar.OVERFLOW_GROUP_RANK[_toolbar.OVERFLOW_MENU.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);
     }
   }, {
@@ -230,8 +235,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(_ref9) {
-        var children = _ref9.children;
+      component: function component(_ref0) {
+        var children = _ref0.children;
         return /*#__PURE__*/_react.default.createElement(_OverflowSection.OverflowSection, null, children);
       }
     }, {
@@ -250,8 +255,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(_ref0) {
-        var children = _ref0.children;
+      component: function component(_ref1) {
+        var children = _ref1.children;
         return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
       }
     });
@@ -262,16 +267,16 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
         break;
       case 'always-pinned':
-        components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
+        components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
         break;
       case 'controlled':
         components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
-        components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
+        components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
         break;
     }
   } else {
     components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
-    components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
+    components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
   }
   return components;
 };

package/dist/es2019/toolbarPlugin.js

@@ -64,10 +64,11 @@ export const toolbarPlugin = ({
   const {
     disableSelectionToolbar,
     disableSelectionToolbarWhenPinned,
-    contextualFormattingEnabled = 'always-pinned'
+    contextualFormattingEnabled = 'always-pinned',
+    breakpointPreset
   } = config;
   const registry = createComponentRegistry();
-  registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar));
+  registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
   return {
     name: 'toolbar',
     actions: {

package/dist/es2019/ui/PrimaryToolbar.js

@@ -1,14 +1,25 @@
 import React from 'react';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar as PrimaryToolbarBase } from '@atlaskit/editor-toolbar';
+const isFullPage = editorAppearance => {
+  return editorAppearance === 'full-page' || editorAppearance === 'full-width';
+};
+const getBreakpointPreset = (breakpointPreset, editorAppearance) => {
+  if (breakpointPreset) {
+    return breakpointPreset;
+  }
+  return editorAppearance && isFullPage(editorAppearance) ? 'fullpage' : 'reduced';
+};
 export const PrimaryToolbar = ({
-  children
+  children,
+  breakpointPreset
 }) => {
   const {
     editorAppearance
   } = useEditorToolbar();
   return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
     label: "Primary Toolbar",
-    reducedBreakpoints: editorAppearance !== 'full-page'
+    reducedBreakpoints: editorAppearance !== 'full-page',
+    breakpointPreset: getBreakpointPreset(breakpointPreset, editorAppearance)
   }, children);
 };

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

@@ -25,11 +25,15 @@ const getInlineTextToolbarComponents = () => {
     }
   }];
 };
-const getPrimaryToolbarComponents = () => {
+const getPrimaryToolbarComponents = breakpointPreset => {
   return [{
     type: 'toolbar',
     key: TOOLBARS.PRIMARY_TOOLBAR,
-    component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : ({
+    component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
+      children
+    }) => /*#__PURE__*/React.createElement(PrimaryToolbar, {
+      breakpointPreset: breakpointPreset
+    }, children) : ({
       children
     }) => /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
       label: "Primary Toolbar",
@@ -37,7 +41,7 @@ const getPrimaryToolbarComponents = () => {
     }, children)
   }];
 };
-export const getToolbarComponents = (contextualFormattingEnabled, api, disableSelectionToolbar) => {
+export const getToolbarComponents = (contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset) => {
   const components = [{
     type: TEXT_SECTION.type,
     key: TEXT_SECTION.key,
@@ -258,16 +262,16 @@ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSe
         components.unshift(...getInlineTextToolbarComponents());
         break;
       case 'always-pinned':
-        components.unshift(...getPrimaryToolbarComponents());
+        components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
         break;
       case 'controlled':
         components.unshift(...getInlineTextToolbarComponents());
-        components.unshift(...getPrimaryToolbarComponents());
+        components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
         break;
     }
   } else {
     components.unshift(...getInlineTextToolbarComponents());
-    components.unshift(...getPrimaryToolbarComponents());
+    components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
   }
   return components;
 };

package/dist/esm/toolbarPlugin.js

@@ -72,9 +72,10 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
   var disableSelectionToolbar = config.disableSelectionToolbar,
     disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
     _config$contextualFor = config.contextualFormattingEnabled,
-    contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor;
+    contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor,
+    breakpointPreset = config.breakpointPreset;
   var registry = createComponentRegistry();
-  registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar));
+  registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
   return {
     name: 'toolbar',
     actions: {

package/dist/esm/ui/PrimaryToolbar.js

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

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

@@ -25,12 +25,17 @@ var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
     }
   }];
 };
-var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
+var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(breakpointPreset) {
   return [{
     type: 'toolbar',
     key: TOOLBARS.PRIMARY_TOOLBAR,
-    component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : function (_ref2) {
+    component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? function (_ref2) {
       var children = _ref2.children;
+      return /*#__PURE__*/React.createElement(PrimaryToolbar, {
+        breakpointPreset: breakpointPreset
+      }, children);
+    } : function (_ref3) {
+      var children = _ref3.children;
       return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
         label: "Primary Toolbar",
         testId: "primary-toolbar"
@@ -38,7 +43,7 @@ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
     }
   }];
 };
-export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar) {
+export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset) {
   var components = [{
     type: TEXT_SECTION.type,
     key: TEXT_SECTION.key,
@@ -47,9 +52,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
       key: TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: TOOLBAR_RANK[TEXT_SECTION.key]
     }],
-    component: function component(_ref3) {
-      var children = _ref3.children,
-        parents = _ref3.parents;
+    component: function component(_ref4) {
+      var children = _ref4.children,
+        parents = _ref4.parents;
       if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
         return /*#__PURE__*/React.createElement(Show, {
           above: "md"
@@ -75,9 +80,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[TEXT_SECTION.key]
     }],
-    component: function component(_ref4) {
-      var children = _ref4.children,
-        parents = _ref4.parents;
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        parents = _ref5.parents;
       if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
         return /*#__PURE__*/React.createElement(Show, {
           above: "md"
@@ -107,9 +112,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
       key: TOOLBARS.INLINE_TEXT_TOOLBAR,
       rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.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(Show, {
         below: "md"
       }, /*#__PURE__*/React.createElement(Section, {
@@ -144,9 +149,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[INSERT_BLOCK_SECTION.key]
     }],
-    component: function component(_ref6) {
-      var children = _ref6.children,
-        parents = _ref6.parents;
+    component: function component(_ref7) {
+      var children = _ref7.children,
+        parents = _ref7.parents;
       return /*#__PURE__*/React.createElement(Section, {
         testId: "insert-block-section",
         parents: parents,
@@ -167,9 +172,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[LINKING_SECTION.key]
     }],
-    component: function component(_ref7) {
-      var children = _ref7.children,
-        parents = _ref7.parents;
+    component: function component(_ref8) {
+      var children = _ref8.children,
+        parents = _ref8.parents;
       return /*#__PURE__*/React.createElement(Section, {
         testId: "link-section",
         parents: parents,
@@ -201,8 +206,8 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
       key: OVERFLOW_GROUP.key,
       rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
     }],
-    component: function component(_ref8) {
-      var children = _ref8.children;
+    component: function component(_ref9) {
+      var children = _ref9.children;
       return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
     }
   }, {
@@ -223,8 +228,8 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
         key: TOOLBARS.PRIMARY_TOOLBAR,
         rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref9) {
-        var children = _ref9.children;
+      component: function component(_ref0) {
+        var children = _ref0.children;
         return /*#__PURE__*/React.createElement(OverflowSection, null, children);
       }
     }, {
@@ -243,8 +248,8 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
         key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
         rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
       }],
-      component: function component(_ref0) {
-        var children = _ref0.children;
+      component: function component(_ref1) {
+        var children = _ref1.children;
         return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
       }
     });
@@ -255,16 +260,16 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
         components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
         break;
       case 'always-pinned':
-        components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
+        components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
         break;
       case 'controlled':
         components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
-        components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
+        components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
         break;
     }
   } else {
     components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
-    components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
+    components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
   }
   return components;
 };

package/dist/types/types/index.d.ts

@@ -1,6 +1,11 @@
 import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
+import type { BreakpointPreset } from '@atlaskit/editor-toolbar';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPluginOptions = {
+    /**
+     * Option to set the breakpoint preset for the toolbar.
+     */
+    breakpointPreset?: BreakpointPreset;
     /**
      * Controls which toolbars are available for in the editor.
      *

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

@@ -1,6 +1,8 @@
 import React from 'react';
+import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
 type PrimaryToolbarProps = {
+    breakpointPreset?: BreakpointPreset;
     children: React.ReactNode;
 };
-export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, breakpointPreset }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

package/dist/types/ui/toolbar-components.d.ts

@@ -1,5 +1,6 @@
 import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
 import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarPlugin } from '../toolbarPluginType';
-export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
+export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean, breakpointPreset?: BreakpointPreset) => RegisterComponent[];

package/dist/types-ts4.5/types/index.d.ts

@@ -1,6 +1,11 @@
 import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
+import type { BreakpointPreset } from '@atlaskit/editor-toolbar';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPluginOptions = {
+    /**
+     * Option to set the breakpoint preset for the toolbar.
+     */
+    breakpointPreset?: BreakpointPreset;
     /**
      * Controls which toolbars are available for in the editor.
      *

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

@@ -1,6 +1,8 @@
 import React from 'react';
+import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
 type PrimaryToolbarProps = {
+    breakpointPreset?: BreakpointPreset;
     children: React.ReactNode;
 };
-export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, breakpointPreset }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/toolbar-components.d.ts

@@ -1,5 +1,6 @@
 import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
 import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarPlugin } from '../toolbarPluginType';
-export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
+export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean, breakpointPreset?: BreakpointPreset) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "3.4.6",
+	"version": "3.4.7",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,13 +40,13 @@
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
-		"@atlaskit/tmp-editor-statsig": "^13.33.0",
+		"@atlaskit/tmp-editor-statsig": "^13.35.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": "^110.25.0",
+		"@atlaskit/editor-common": "^110.27.0",
 		"react": "^18.2.0"
 	},
 	"platform-feature-flags": {