@atlaskit/editor-plugin-selection-toolbar 4.2.2 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 4.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.3.0
+
+### Minor Changes
+
+- [#196043](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/196043)
+  [`c6cb0ed855827`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6cb0ed855827) -
+  Add new ShowMoreHorizontal Icon, add new ranks to support overflow menu, add pin as a menu item
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.2.2
 
 ### Patch Changes

package/dist/cjs/selectionToolbarPlugin.js

@@ -21,6 +21,7 @@ var _pluginKey = require("./pm-plugins/plugin-key");
 var _PageVisibilityWatcher = require("./ui/PageVisibilityWatcher");
 var _pinToolbarConfig = require("./ui/pin-toolbar-config");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
+var _toolbarComponents = require("./ui/toolbar-components");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
@@ -43,21 +44,26 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
   var primaryToolbarComponent;
   var userPreferencesProvider = config.userPreferencesProvider,
     contextualFormattingEnabled = config.contextualFormattingEnabled;
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
-    exposure: true
-  })) {
-    var _api$primaryToolbar;
-    primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
-      var disabled = _ref2.disabled;
-      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
-        api: api,
-        disabled: disabled
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
+  } else {
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
+      exposure: true
+    })) {
+      var _api$primaryToolbar;
+      primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+        var disabled = _ref2.disabled;
+        return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+          api: api,
+          disabled: disabled
+        });
+      };
+      api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+        name: 'pinToolbar',
+        component: primaryToolbarComponent
       });
-    };
-    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-      name: 'pinToolbar',
-      component: primaryToolbarComponent
-    });
+    }
   }
   var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
   var isPreferenceInitialized = false;

package/dist/cjs/ui/PinMenuItem.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PinMenuItem = 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");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var shouldShowPinMenuItem = function shouldShowPinMenuItem(api) {
+  var _api$userPreferences, _api$selectionToolbar;
+  var isDocked = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? (api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition) === 'top' : (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
+  return !isDocked;
+};
+/**
+ * The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
+ */
+var PinMenuItem = exports.PinMenuItem = function PinMenuItem(_ref) {
+  var api = _ref.api;
+  var intl = (0, _reactIntlNext.useIntl)();
+  if (!shouldShowPinMenuItem(api)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var _api$selectionToolbar2, _api$selectionToolbar3;
+    api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 || _api$selectionToolbar3.call(_api$selectionToolbar2, 'top');
+  };
+  var message = intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionUnpinnedConcise);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: onClick,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.PinIcon, {
+      label: ""
+    })
+  }, message);
+};

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _PinMenuItem = require("./PinMenuItem");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: _toolbar.PIN_MENU_SECTION.type,
+    key: _toolbar.PIN_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.OVERFLOW_MENU.type,
+      key: _toolbar.OVERFLOW_MENU.key,
+      rank: _toolbar.OVERFLOW_MENU_RANK[_toolbar.PIN_MENU_SECTION.key]
+    }]
+  }, {
+    type: _toolbar.PIN_MENU_ITEM.type,
+    key: _toolbar.PIN_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.PIN_MENU_SECTION.type,
+      key: _toolbar.PIN_MENU_SECTION.key,
+      rank: _toolbar.PIN_MENU_SECTION_RANK[_toolbar.PIN_MENU_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_PinMenuItem.PinMenuItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/es2019/selectionToolbarPlugin.js

@@ -12,6 +12,7 @@ import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
 import { getPinOptionToolbarConfig } from './ui/pin-toolbar-config';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { getToolbarComponents } from './ui/toolbar-components';
 const getToolbarDocking = (contextualFormattingEnabled, userPreferencesProvider) => {
   if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
     var _userPreferencesProvi;
@@ -35,22 +36,27 @@ export const selectionToolbarPlugin = ({
     userPreferencesProvider,
     contextualFormattingEnabled
   } = config;
-  if (editorExperiment('platform_editor_controls', 'variant1', {
-    exposure: true
-  })) {
-    var _api$primaryToolbar;
-    primaryToolbarComponent = ({
-      disabled
-    }) => {
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        api: api,
-        disabled: disabled
+  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+  } else {
+    if (editorExperiment('platform_editor_controls', 'variant1', {
+      exposure: true
+    })) {
+      var _api$primaryToolbar;
+      primaryToolbarComponent = ({
+        disabled
+      }) => {
+        return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+          api: api,
+          disabled: disabled
+        });
+      };
+      api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+        name: 'pinToolbar',
+        component: primaryToolbarComponent
       });
-    };
-    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
-      name: 'pinToolbar',
-      component: primaryToolbarComponent
-    });
+    }
   }
   let previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
   let isPreferenceInitialized = false;

package/dist/es2019/ui/PinMenuItem.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
+import { PinIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
+const shouldShowPinMenuItem = api => {
+  var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar;
+  const isDocked = fg('platform_editor_use_preferences_plugin') ? (api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition) === 'top' : (api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
+  return !isDocked;
+};
+/**
+ * The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
+ */
+export const PinMenuItem = ({
+  api
+}) => {
+  const intl = useIntl();
+  if (!shouldShowPinMenuItem(api)) {
+    return null;
+  }
+  const onClick = () => {
+    var _api$selectionToolbar2, _api$selectionToolbar3;
+    api === null || api === void 0 ? void 0 : (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'top');
+  };
+  const message = intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpinnedConcise);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: onClick,
+    elemBefore: /*#__PURE__*/React.createElement(PinIcon, {
+      label: ""
+    })
+  }, message);
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { PinMenuItem } from './PinMenuItem';
+export const getToolbarComponents = api => {
+  return [{
+    type: PIN_MENU_SECTION.type,
+    key: PIN_MENU_SECTION.key,
+    parents: [{
+      type: OVERFLOW_MENU.type,
+      key: OVERFLOW_MENU.key,
+      rank: OVERFLOW_MENU_RANK[PIN_MENU_SECTION.key]
+    }]
+  }, {
+    type: PIN_MENU_ITEM.type,
+    key: PIN_MENU_ITEM.key,
+    parents: [{
+      type: PIN_MENU_SECTION.type,
+      key: PIN_MENU_SECTION.key,
+      rank: PIN_MENU_SECTION_RANK[PIN_MENU_ITEM.key]
+    }],
+    component: () => {
+      return /*#__PURE__*/React.createElement(PinMenuItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/esm/selectionToolbarPlugin.js

@@ -16,6 +16,7 @@ import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
 import { getPinOptionToolbarConfig } from './ui/pin-toolbar-config';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { getToolbarComponents } from './ui/toolbar-components';
 var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
   if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
     var _userPreferencesProvi;
@@ -36,21 +37,26 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
   var primaryToolbarComponent;
   var userPreferencesProvider = config.userPreferencesProvider,
     contextualFormattingEnabled = config.contextualFormattingEnabled;
-  if (editorExperiment('platform_editor_controls', 'variant1', {
-    exposure: true
-  })) {
-    var _api$primaryToolbar;
-    primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
-      var disabled = _ref2.disabled;
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        api: api,
-        disabled: disabled
+  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+  } else {
+    if (editorExperiment('platform_editor_controls', 'variant1', {
+      exposure: true
+    })) {
+      var _api$primaryToolbar;
+      primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+        var disabled = _ref2.disabled;
+        return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+          api: api,
+          disabled: disabled
+        });
+      };
+      api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+        name: 'pinToolbar',
+        component: primaryToolbarComponent
       });
-    };
-    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-      name: 'pinToolbar',
-      component: primaryToolbarComponent
-    });
+    }
   }
   var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
   var isPreferenceInitialized = false;

package/dist/esm/ui/PinMenuItem.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
+import { PinIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
+var shouldShowPinMenuItem = function shouldShowPinMenuItem(api) {
+  var _api$userPreferences, _api$selectionToolbar;
+  var isDocked = fg('platform_editor_use_preferences_plugin') ? (api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition) === 'top' : (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
+  return !isDocked;
+};
+/**
+ * The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
+ */
+export var PinMenuItem = function PinMenuItem(_ref) {
+  var api = _ref.api;
+  var intl = useIntl();
+  if (!shouldShowPinMenuItem(api)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var _api$selectionToolbar2, _api$selectionToolbar3;
+    api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 || _api$selectionToolbar3.call(_api$selectionToolbar2, 'top');
+  };
+  var message = intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpinnedConcise);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: onClick,
+    elemBefore: /*#__PURE__*/React.createElement(PinIcon, {
+      label: ""
+    })
+  }, message);
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { PinMenuItem } from './PinMenuItem';
+export var getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: PIN_MENU_SECTION.type,
+    key: PIN_MENU_SECTION.key,
+    parents: [{
+      type: OVERFLOW_MENU.type,
+      key: OVERFLOW_MENU.key,
+      rank: OVERFLOW_MENU_RANK[PIN_MENU_SECTION.key]
+    }]
+  }, {
+    type: PIN_MENU_ITEM.type,
+    key: PIN_MENU_ITEM.key,
+    parents: [{
+      type: PIN_MENU_SECTION.type,
+      key: PIN_MENU_SECTION.key,
+      rank: PIN_MENU_SECTION_RANK[PIN_MENU_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(PinMenuItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/types/pm-plugins/commands.d.ts

@@ -9,10 +9,10 @@ export declare const updateToolbarDocking: ({ toolbarDocking }: {
 }) => EditorCommand;
 export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, editorAnalyticsApi, }: {
     toolbarDocking: ToolbarDocking;
-    userPreferencesProvider?: UserPreferencesProvider | undefined;
+    userPreferencesProvider?: UserPreferencesProvider;
     editorAnalyticsApi?: EditorAnalyticsAPI | undefined;
 }) => EditorCommand;
 export declare const forceToolbarDockingWithoutAnalytics: ({ toolbarDocking, userPreferencesProvider, }: {
     toolbarDocking: ToolbarDocking;
-    userPreferencesProvider?: UserPreferencesProvider | undefined;
+    userPreferencesProvider?: UserPreferencesProvider;
 }) => EditorCommand;

package/dist/types/selectionToolbarPluginType.d.ts

@@ -4,6 +4,7 @@ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { ToolbarDocking } from './types';
 export type SelectionToolbarPluginOptions = {
@@ -23,7 +24,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<ConnectivityPlugin>,
-        OptionalPlugin<UserPreferencesPlugin>
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     actions?: {
         suppressToolbar?: () => boolean;

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

@@ -2,5 +2,5 @@ import type { ExtractInjectionAPI, UserPreferencesProvider } from '@atlaskit/edi
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 export declare const PageVisibilityWatcher: ({ api, userPreferencesProvider, }: {
     api: ExtractInjectionAPI<SelectionToolbarPlugin> | undefined;
-    userPreferencesProvider?: UserPreferencesProvider | undefined;
+    userPreferencesProvider?: UserPreferencesProvider;
 }) => null;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type PinMenuItemProps = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+};
+/**
+ * The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
+ */
+export declare const PinMenuItem: ({ api }: PinMenuItemProps) => React.JSX.Element | null;
+export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 type PrimaryToolbarComponentProps = {

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

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>) => RegisterComponent[];

package/dist/types-ts4.5/pm-plugins/commands.d.ts

@@ -9,10 +9,10 @@ export declare const updateToolbarDocking: ({ toolbarDocking }: {
 }) => EditorCommand;
 export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, editorAnalyticsApi, }: {
     toolbarDocking: ToolbarDocking;
-    userPreferencesProvider?: UserPreferencesProvider | undefined;
+    userPreferencesProvider?: UserPreferencesProvider;
     editorAnalyticsApi?: EditorAnalyticsAPI | undefined;
 }) => EditorCommand;
 export declare const forceToolbarDockingWithoutAnalytics: ({ toolbarDocking, userPreferencesProvider, }: {
     toolbarDocking: ToolbarDocking;
-    userPreferencesProvider?: UserPreferencesProvider | undefined;
+    userPreferencesProvider?: UserPreferencesProvider;
 }) => EditorCommand;

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

@@ -4,6 +4,7 @@ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { ToolbarDocking } from './types';
 export type SelectionToolbarPluginOptions = {
@@ -23,7 +24,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<ConnectivityPlugin>,
-        OptionalPlugin<UserPreferencesPlugin>
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     actions?: {
         suppressToolbar?: () => boolean;

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

@@ -2,5 +2,5 @@ import type { ExtractInjectionAPI, UserPreferencesProvider } from '@atlaskit/edi
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 export declare const PageVisibilityWatcher: ({ api, userPreferencesProvider, }: {
     api: ExtractInjectionAPI<SelectionToolbarPlugin> | undefined;
-    userPreferencesProvider?: UserPreferencesProvider | undefined;
+    userPreferencesProvider?: UserPreferencesProvider;
 }) => null;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type PinMenuItemProps = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+};
+/**
+ * The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
+ */
+export declare const PinMenuItem: ({ api }: PinMenuItemProps) => React.JSX.Element | null;
+export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 type PrimaryToolbarComponentProps = {

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

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "4.2.2",
+	"version": "4.3.1",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,19 +38,22 @@
 		"@atlaskit/editor-plugin-connectivity": "^3.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.2.0",
 		"@atlaskit/editor-plugin-user-preferences": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^27.9.0",
-		"@atlaskit/icon-lab": "^5.3.0",
+		"@atlaskit/editor-toolbar": "^0.2.0",
+		"@atlaskit/editor-toolbar-model": "^0.1.0",
+		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/icon-lab": "^5.4.0",
 		"@atlaskit/menu": "^8.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/tmp-editor-statsig": "^9.27.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.20.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -60,7 +63,6 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {