@atlaskit/editor-plugin-floating-toolbar 2.0.4 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.0.1
+
+### Patch Changes
+
+- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
+  [`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
+  Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
+  future to avoid an accidental regression.
+
+  This is related to
+  https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
+
+## 3.0.0
+
+### Major Changes
+
+- [#119765](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119765)
+  [`328d167524d8d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/328d167524d8d) -
+  WHAT Removed `contextualToolbar` from floating toolbar plugin, which removes `contextualToolbar`
+  from `sharedState`, removes `updateContextualToolbar` from commands. WHY These properties were
+  supporting experimental features for new editor controls which will not be released and is no
+  longer needed. HOW These properties where not exposed on the default types and were only used
+  internally to the plugin, this should not create any friction or issues
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.4
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -21,12 +21,10 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _plugin = require("./pm-plugins/contextual-toolbar/plugin");
-var _pluginKey = require("./pm-plugins/contextual-toolbar/plugin-key");
 var _forceFocus = _interopRequireWildcard(require("./pm-plugins/force-focus"));
 var _commands = require("./pm-plugins/toolbar-data/commands");
-var _plugin2 = require("./pm-plugins/toolbar-data/plugin");
-var _pluginKey2 = require("./pm-plugins/toolbar-data/plugin-key");
+var _plugin = require("./pm-plugins/toolbar-data/plugin");
+var _pluginKey = require("./pm-plugins/toolbar-data/plugin-key");
 var _utils2 = require("./pm-plugins/utils");
 var _ConfirmationModal = require("./ui/ConfirmationModal");
 var _ExpandButton = require("./ui/ExpandButton");
@@ -153,7 +151,7 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
         name: 'floatingToolbarData',
         plugin: function plugin(_ref3) {
           var dispatch = _ref3.dispatch;
-          return (0, _plugin2.createPlugin)(dispatch);
+          return (0, _plugin.createPlugin)(dispatch);
         }
       }, {
         name: 'forceFocus',
@@ -161,14 +159,6 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
           return (0, _forceFocus.default)();
         }
       }];
-      if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-        plugins.push({
-          name: 'contextualToolbar',
-          plugin: function plugin() {
-            return (0, _plugin.contextualToolbarPlugin)();
-          }
-        });
-      }
       return plugins;
     },
     actions: {
@@ -182,27 +172,16 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
       var configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
       return {
         configWithNodeInfo: configWithNodeInfo,
-        floatingToolbarData: _pluginKey2.pluginKey.getState(editorState),
-        // Experimental - excluding this property from the external API whilst it's in development
-        contextualToolbar: _pluginKey.contextualToolbarPluginKey.getState(editorState)
+        floatingToolbarData: _pluginKey.pluginKey.getState(editorState)
       };
     },
-    commands: {
-      // Experimental
-      updateContextualToolbar: function updateContextualToolbar(action) {
-        return function (_ref4) {
-          var tr = _ref4.tr;
-          return tr.setMeta(_pluginKey.contextualToolbarPluginKey, action);
-        };
-      }
-    },
-    contentComponent: function contentComponent(_ref5) {
-      var popupsMountPoint = _ref5.popupsMountPoint,
-        popupsBoundariesElement = _ref5.popupsBoundariesElement,
-        popupsScrollableElement = _ref5.popupsScrollableElement,
-        editorView = _ref5.editorView,
-        providerFactory = _ref5.providerFactory,
-        dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref4) {
+      var popupsMountPoint = _ref4.popupsMountPoint,
+        popupsBoundariesElement = _ref4.popupsBoundariesElement,
+        popupsScrollableElement = _ref4.popupsScrollableElement,
+        editorView = _ref4.editorView,
+        providerFactory = _ref4.providerFactory,
+        dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(ContentComponent, {
         editorView: editorView,
         pluginInjectionApi: api,
@@ -215,23 +194,23 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
     }
   };
 };
-function ContentComponent(_ref6) {
+function ContentComponent(_ref5) {
   var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
-  var pluginInjectionApi = _ref6.pluginInjectionApi,
-    editorView = _ref6.editorView,
-    popupsMountPoint = _ref6.popupsMountPoint,
-    popupsBoundariesElement = _ref6.popupsBoundariesElement,
-    popupsScrollableElement = _ref6.popupsScrollableElement,
-    providerFactory = _ref6.providerFactory,
-    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
+  var pluginInjectionApi = _ref5.pluginInjectionApi,
+    editorView = _ref5.editorView,
+    popupsMountPoint = _ref5.popupsMountPoint,
+    popupsBoundariesElement = _ref5.popupsBoundariesElement,
+    popupsScrollableElement = _ref5.popupsScrollableElement,
+    providerFactory = _ref5.providerFactory,
+    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'blockControls']),
     floatingToolbarState = _useSharedPluginState.floatingToolbarState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     blockControlsState = _useSharedPluginState.blockControlsState;
-  var _ref7 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
-    configWithNodeInfo = _ref7.configWithNodeInfo,
-    floatingToolbarData = _ref7.floatingToolbarData;
+  var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
+    configWithNodeInfo = _ref6.configWithNodeInfo,
+    floatingToolbarData = _ref6.floatingToolbarData;
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }
@@ -271,8 +250,7 @@ function ContentComponent(_ref6) {
     _config$mediaAssistiv = config.mediaAssistiveMessage,
     mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv,
     _config$stick = config.stick,
-    stick = _config$stick === void 0 ? true : _config$stick,
-    forceStaticToolbar = config.forceStaticToolbar;
+    stick = _config$stick === void 0 ? true : _config$stick;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
   var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
@@ -336,8 +314,8 @@ function ContentComponent(_ref6) {
   };
 
   // Confirm dialog
-  var _ref8 = floatingToolbarData || {},
-    confirmDialogForItem = _ref8.confirmDialogForItem;
+  var _ref7 = floatingToolbarData || {},
+    confirmDialogForItem = _ref7.confirmDialogForItem;
   var confirmButtonItem = confirmDialogForItem ?
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -400,8 +378,7 @@ function ContentComponent(_ref6) {
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         api: pluginInjectionApi,
-        mediaAssistiveMessage: mediaAssistiveMessage,
-        forceStaticToolbar: forceStaticToolbar
+        mediaAssistiveMessage: mediaAssistiveMessage
       });
     }
   })), /*#__PURE__*/_react.default.createElement(_ConfirmationModal.ConfirmationModal, {

package/dist/cjs/ui/Toolbar.js

@@ -22,12 +22,9 @@ var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _commands = require("@atlaskit/editor-plugin-table/commands");
-var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _forceFocus = require("../pm-plugins/force-focus");
@@ -41,9 +38,7 @@ var _Select = _interopRequireDefault(require("./Select"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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; } /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */ /**
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */ /**
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -387,106 +382,6 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
-var getFormattedItems = function getFormattedItems(items, isCollapsed, api) {
-  if (isCollapsed) {
-    var updatedItems = items.filter(function (item) {
-      return item.type === 'separator' || 'contextualToolbarDefaultVisibility' in item && item.contextualToolbarDefaultVisibility === 'visible' || !('contextualToolbarDefaultVisibility' in item);
-    }).filter(function (item, index, items) {
-      return item.type !== 'separator' || index > 0 && index < items.length - 1 && items[index - 1].type !== 'separator';
-    });
-    if (updatedItems[updatedItems.length - 1].type === 'separator') {
-      updatedItems.pop();
-    }
-    updatedItems.unshift({
-      type: 'separator'
-    });
-    updatedItems.unshift({
-      type: 'button',
-      icon: _edit.default,
-      title: 'Show items',
-      onClick: function onClick() {
-        if (api) {
-          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
-            type: 'expand-toolbar'
-          }));
-        }
-      }
-    });
-    return updatedItems;
-  }
-  items.unshift({
-    type: 'separator'
-  });
-  items.unshift({
-    type: 'button',
-    icon: _chevronRight.default,
-    title: 'Hide items',
-    onClick: function onClick() {
-      if (api) {
-        api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
-          type: 'collapse-toolbar'
-        }));
-      }
-    }
-  });
-  return items;
-};
-var ToolbarItemsCollapsable = /*#__PURE__*/_react.default.memo(function (_ref2) {
-  var _contextualToolbarSta;
-  var items = _ref2.items,
-    groupLabel = _ref2.groupLabel,
-    dispatchCommand = _ref2.dispatchCommand,
-    popupsMountPoint = _ref2.popupsMountPoint,
-    popupsBoundariesElement = _ref2.popupsBoundariesElement,
-    editorView = _ref2.editorView,
-    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-    popupsScrollableElement = _ref2.popupsScrollableElement,
-    scrollable = _ref2.scrollable,
-    providerFactory = _ref2.providerFactory,
-    extensionsProvider = _ref2.extensionsProvider,
-    node = _ref2.node,
-    setDisableScroll = _ref2.setDisableScroll,
-    mountRef = _ref2.mountRef,
-    mounted = _ref2.mounted,
-    api = _ref2.api;
-  var contextualToolbarState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'floatingToolbar.contextualToolbar');
-
-  // NOTE: Unsure if collapse/expand logic will be needed, for now hard code for cards
-  var isCard = node.type.name === 'inlineCard' || node.type.name === 'blockCard' || node.type.name === 'embedCard';
-  var updatedItems = isCard && items.length > 1 ? getFormattedItems(items.map(function (item) {
-    if ('id' in item && (item.id === 'editor.link.openLink' || item.id === 'editor.floatingToolbar.copy' || item.id === 'editor.link.commentLink')) {
-      return item;
-    }
-    return _objectSpread(_objectSpread({}, item), {}, {
-      contextualToolbarDefaultVisibility: 'hidden'
-    });
-  }), (_contextualToolbarSta = contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.isCollapsed) !== null && _contextualToolbarSta !== void 0 ? _contextualToolbarSta : false, api) : items;
-  return (0, _react2.jsx)(ToolbarItems, {
-    items: updatedItems,
-    groupLabel: groupLabel,
-    dispatchCommand: dispatchCommand,
-    popupsMountPoint: popupsMountPoint,
-    popupsBoundariesElement: popupsBoundariesElement,
-    editorView: editorView,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    popupsScrollableElement: popupsScrollableElement,
-    scrollable: scrollable,
-    providerFactory: providerFactory,
-    extensionsProvider: extensionsProvider,
-    node: node,
-    setDisableScroll: setDisableScroll,
-    mountRef: mountRef,
-    mounted: mounted,
-    api: api
-  });
-}, function (prevProps, nextProps) {
-  if (!nextProps.node) {
-    return false;
-  }
-  // only rerender toolbar items if the node is different
-  // otherwise it causes an issue where multiple popups stays open
-  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
-});
 var buttonGroupStyles = (0, _react2.css)({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
@@ -532,15 +427,21 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   (0, _react2.css)({
     paddingLeft: "var(--ds-space-050, 4px)"
-  })));
+  })),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ?
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  (0, _react2.css)({
+    height: "var(--ds-space-500, 40px)"
+  }) : undefined);
 };
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var toolbarOverflow = function toolbarOverflow(_ref3) {
-  var scrollable = _ref3.scrollable,
-    scrollDisabled = _ref3.scrollDisabled,
-    firstElementIsSelect = _ref3.firstElementIsSelect,
-    paddingFeatureFlag = _ref3.paddingFeatureFlag;
+var toolbarOverflow = function toolbarOverflow(_ref2) {
+  var scrollable = _ref2.scrollable,
+    scrollDisabled = _ref2.scrollDisabled,
+    firstElementIsSelect = _ref2.firstElementIsSelect,
+    paddingFeatureFlag = _ref2.paddingFeatureFlag;
   return (0, _react2.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   scrollable ?
@@ -626,8 +527,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Toolbar, _Component);
   return (0, _createClass2.default)(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref4) {
-      var table = _ref4.table;
+    value: function resetStyling(_ref3) {
+      var table = _ref3.table;
       if (this.props.editorView) {
         var _this$props$api;
         var _this$props$editorVie2 = this.props.editorView,
@@ -743,14 +644,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
           paddingFeatureFlag: (0, _platformFeatureFlags.fg)('platform_editor_floating_toolbar_padding_fix')
         })
-      }, (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? (0, _react2.jsx)(ToolbarItems
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      , (0, _extends2.default)({}, this.props, {
-        setDisableScroll: this.setDisableScroll.bind(this),
-        mountRef: this.mountRef,
-        mounted: this.state.mounted
-      })) : (0, _react2.jsx)(ToolbarItemsCollapsable
+      }, (0, _react2.jsx)(ToolbarItems
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , (0, _extends2.default)({}, this.props, {

package/dist/es2019/floatingToolbarPlugin.js

@@ -9,8 +9,6 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
-import { contextualToolbarPlugin } from './pm-plugins/contextual-toolbar/plugin';
-import { contextualToolbarPluginKey } from './pm-plugins/contextual-toolbar/plugin-key';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
@@ -144,12 +142,6 @@ export const floatingToolbarPlugin = ({
         name: 'forceFocus',
         plugin: () => forceFocusPlugin()
       }];
-      if (!editorExperiment('platform_editor_controls', 'control')) {
-        plugins.push({
-          name: 'contextualToolbar',
-          plugin: () => contextualToolbarPlugin()
-        });
-      }
       return plugins;
     },
     actions: {
@@ -163,19 +155,9 @@ export const floatingToolbarPlugin = ({
       const configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 ? void 0 : (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
       return {
         configWithNodeInfo,
-        floatingToolbarData: dataPluginKey.getState(editorState),
-        // Experimental - excluding this property from the external API whilst it's in development
-        contextualToolbar: contextualToolbarPluginKey.getState(editorState)
+        floatingToolbarData: dataPluginKey.getState(editorState)
       };
     },
-    commands: {
-      // Experimental
-      updateContextualToolbar: action => ({
-        tr
-      }) => {
-        return tr.setMeta(contextualToolbarPluginKey, action);
-      }
-    },
     contentComponent({
       popupsMountPoint,
       popupsBoundariesElement,
@@ -255,8 +237,7 @@ export function ContentComponent({
     },
     focusTrap,
     mediaAssistiveMessage = '',
-    stick = true,
-    forceStaticToolbar
+    stick = true
   } = config;
   const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   const isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
@@ -376,8 +357,7 @@ export function ContentComponent({
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         api: pluginInjectionApi,
-        mediaAssistiveMessage: mediaAssistiveMessage,
-        forceStaticToolbar: forceStaticToolbar
+        mediaAssistiveMessage: mediaAssistiveMessage
       });
     }
   })), /*#__PURE__*/React.createElement(ConfirmationModal, {

package/dist/es2019/ui/Toolbar.js

@@ -15,12 +15,9 @@ import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar
 import { Announcer, FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
-import EditIcon from '@atlaskit/icon/core/edit';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
@@ -348,104 +345,6 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
-const getFormattedItems = (items, isCollapsed, api) => {
-  if (isCollapsed) {
-    const updatedItems = items.filter(item => item.type === 'separator' || 'contextualToolbarDefaultVisibility' in item && item.contextualToolbarDefaultVisibility === 'visible' || !('contextualToolbarDefaultVisibility' in item)).filter((item, index, items) => item.type !== 'separator' || index > 0 && index < items.length - 1 && items[index - 1].type !== 'separator');
-    if (updatedItems[updatedItems.length - 1].type === 'separator') {
-      updatedItems.pop();
-    }
-    updatedItems.unshift({
-      type: 'separator'
-    });
-    updatedItems.unshift({
-      type: 'button',
-      icon: EditIcon,
-      title: 'Show items',
-      onClick: () => {
-        if (api) {
-          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
-            type: 'expand-toolbar'
-          }));
-        }
-      }
-    });
-    return updatedItems;
-  }
-  items.unshift({
-    type: 'separator'
-  });
-  items.unshift({
-    type: 'button',
-    icon: ChevronRightIcon,
-    title: 'Hide items',
-    onClick: () => {
-      if (api) {
-        api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
-          type: 'collapse-toolbar'
-        }));
-      }
-    }
-  });
-  return items;
-};
-const ToolbarItemsCollapsable = /*#__PURE__*/React.memo(({
-  items,
-  groupLabel,
-  dispatchCommand,
-  popupsMountPoint,
-  popupsBoundariesElement,
-  editorView,
-  dispatchAnalyticsEvent,
-  popupsScrollableElement,
-  scrollable,
-  providerFactory,
-  extensionsProvider,
-  node,
-  setDisableScroll,
-  mountRef,
-  mounted,
-  api
-}) => {
-  var _contextualToolbarSta;
-  const contextualToolbarState = useSharedPluginStateSelector(api, 'floatingToolbar.contextualToolbar');
-
-  // NOTE: Unsure if collapse/expand logic will be needed, for now hard code for cards
-  const isCard = node.type.name === 'inlineCard' || node.type.name === 'blockCard' || node.type.name === 'embedCard';
-  const updatedItems = isCard && items.length > 1 ? getFormattedItems(items.map(item => {
-    if ('id' in item && (item.id === 'editor.link.openLink' || item.id === 'editor.floatingToolbar.copy' || item.id === 'editor.link.commentLink')) {
-      return item;
-    }
-    return {
-      ...item,
-      contextualToolbarDefaultVisibility: 'hidden'
-    };
-  }), (_contextualToolbarSta = contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.isCollapsed) !== null && _contextualToolbarSta !== void 0 ? _contextualToolbarSta : false, api) : items;
-  return jsx(ToolbarItems, {
-    items: updatedItems,
-    groupLabel: groupLabel,
-    dispatchCommand: dispatchCommand,
-    popupsMountPoint: popupsMountPoint,
-    popupsBoundariesElement: popupsBoundariesElement,
-    editorView: editorView,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    popupsScrollableElement: popupsScrollableElement,
-    scrollable: scrollable,
-    providerFactory: providerFactory,
-    extensionsProvider: extensionsProvider,
-    node: node,
-    setDisableScroll: setDisableScroll,
-    mountRef: mountRef,
-    mounted: mounted,
-    api: api
-  });
-}, (prevProps, nextProps) => {
-  if (!nextProps.node) {
-    return false;
-  }
-  // only rerender toolbar items if the node is different
-  // otherwise it causes an issue where multiple popups stays open
-  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
-});
 const buttonGroupStyles = css({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
@@ -490,7 +389,13 @@ firstElementIsSelect &&
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 css({
   paddingLeft: "var(--ds-space-050, 4px)"
-})));
+})),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+editorExperiment('platform_editor_controls', 'variant1') ?
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+css({
+  height: "var(--ds-space-500, 40px)"
+}) : undefined);
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const toolbarOverflow = ({
@@ -685,14 +590,7 @@ class Toolbar extends Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
         paddingFeatureFlag: fg('platform_editor_floating_toolbar_padding_fix')
       })
-    }, editorExperiment('platform_editor_controls', 'control') ? jsx(ToolbarItems
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends({}, this.props, {
-      setDisableScroll: this.setDisableScroll.bind(this),
-      mountRef: this.mountRef,
-      mounted: this.state.mounted
-    })) : jsx(ToolbarItemsCollapsable
+    }, jsx(ToolbarItems
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _extends({}, this.props, {

package/dist/esm/floatingToolbarPlugin.js

@@ -12,8 +12,6 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
-import { contextualToolbarPlugin } from './pm-plugins/contextual-toolbar/plugin';
-import { contextualToolbarPluginKey } from './pm-plugins/contextual-toolbar/plugin-key';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
@@ -149,14 +147,6 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
           return forceFocusPlugin();
         }
       }];
-      if (!editorExperiment('platform_editor_controls', 'control')) {
-        plugins.push({
-          name: 'contextualToolbar',
-          plugin: function plugin() {
-            return contextualToolbarPlugin();
-          }
-        });
-      }
       return plugins;
     },
     actions: {
@@ -170,27 +160,16 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
       var configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 || (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
       return {
         configWithNodeInfo: configWithNodeInfo,
-        floatingToolbarData: dataPluginKey.getState(editorState),
-        // Experimental - excluding this property from the external API whilst it's in development
-        contextualToolbar: contextualToolbarPluginKey.getState(editorState)
+        floatingToolbarData: dataPluginKey.getState(editorState)
       };
     },
-    commands: {
-      // Experimental
-      updateContextualToolbar: function updateContextualToolbar(action) {
-        return function (_ref4) {
-          var tr = _ref4.tr;
-          return tr.setMeta(contextualToolbarPluginKey, action);
-        };
-      }
-    },
-    contentComponent: function contentComponent(_ref5) {
-      var popupsMountPoint = _ref5.popupsMountPoint,
-        popupsBoundariesElement = _ref5.popupsBoundariesElement,
-        popupsScrollableElement = _ref5.popupsScrollableElement,
-        editorView = _ref5.editorView,
-        providerFactory = _ref5.providerFactory,
-        dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref4) {
+      var popupsMountPoint = _ref4.popupsMountPoint,
+        popupsBoundariesElement = _ref4.popupsBoundariesElement,
+        popupsScrollableElement = _ref4.popupsScrollableElement,
+        editorView = _ref4.editorView,
+        providerFactory = _ref4.providerFactory,
+        dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ContentComponent, {
         editorView: editorView,
         pluginInjectionApi: api,
@@ -203,23 +182,23 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
     }
   };
 };
-export function ContentComponent(_ref6) {
+export function ContentComponent(_ref5) {
   var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
-  var pluginInjectionApi = _ref6.pluginInjectionApi,
-    editorView = _ref6.editorView,
-    popupsMountPoint = _ref6.popupsMountPoint,
-    popupsBoundariesElement = _ref6.popupsBoundariesElement,
-    popupsScrollableElement = _ref6.popupsScrollableElement,
-    providerFactory = _ref6.providerFactory,
-    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
+  var pluginInjectionApi = _ref5.pluginInjectionApi,
+    editorView = _ref5.editorView,
+    popupsMountPoint = _ref5.popupsMountPoint,
+    popupsBoundariesElement = _ref5.popupsBoundariesElement,
+    popupsScrollableElement = _ref5.popupsScrollableElement,
+    providerFactory = _ref5.providerFactory,
+    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'blockControls']),
     floatingToolbarState = _useSharedPluginState.floatingToolbarState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     blockControlsState = _useSharedPluginState.blockControlsState;
-  var _ref7 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
-    configWithNodeInfo = _ref7.configWithNodeInfo,
-    floatingToolbarData = _ref7.floatingToolbarData;
+  var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
+    configWithNodeInfo = _ref6.configWithNodeInfo,
+    floatingToolbarData = _ref6.floatingToolbarData;
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }
@@ -259,8 +238,7 @@ export function ContentComponent(_ref6) {
     _config$mediaAssistiv = config.mediaAssistiveMessage,
     mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv,
     _config$stick = config.stick,
-    stick = _config$stick === void 0 ? true : _config$stick,
-    forceStaticToolbar = config.forceStaticToolbar;
+    stick = _config$stick === void 0 ? true : _config$stick;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
   var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
@@ -324,8 +302,8 @@ export function ContentComponent(_ref6) {
   };
 
   // Confirm dialog
-  var _ref8 = floatingToolbarData || {},
-    confirmDialogForItem = _ref8.confirmDialogForItem;
+  var _ref7 = floatingToolbarData || {},
+    confirmDialogForItem = _ref7.confirmDialogForItem;
   var confirmButtonItem = confirmDialogForItem ?
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -388,8 +366,7 @@ export function ContentComponent(_ref6) {
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         api: pluginInjectionApi,
-        mediaAssistiveMessage: mediaAssistiveMessage,
-        forceStaticToolbar: forceStaticToolbar
+        mediaAssistiveMessage: mediaAssistiveMessage
       });
     }
   })), /*#__PURE__*/React.createElement(ConfirmationModal, {

package/dist/esm/ui/Toolbar.js

@@ -7,8 +7,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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) { _defineProperty(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; }
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /**
  * @jsxRuntime classic
@@ -24,12 +22,9 @@ import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar
 import { Announcer, FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
-import EditIcon from '@atlaskit/icon/core/edit';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
@@ -380,106 +375,6 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
-var getFormattedItems = function getFormattedItems(items, isCollapsed, api) {
-  if (isCollapsed) {
-    var updatedItems = items.filter(function (item) {
-      return item.type === 'separator' || 'contextualToolbarDefaultVisibility' in item && item.contextualToolbarDefaultVisibility === 'visible' || !('contextualToolbarDefaultVisibility' in item);
-    }).filter(function (item, index, items) {
-      return item.type !== 'separator' || index > 0 && index < items.length - 1 && items[index - 1].type !== 'separator';
-    });
-    if (updatedItems[updatedItems.length - 1].type === 'separator') {
-      updatedItems.pop();
-    }
-    updatedItems.unshift({
-      type: 'separator'
-    });
-    updatedItems.unshift({
-      type: 'button',
-      icon: EditIcon,
-      title: 'Show items',
-      onClick: function onClick() {
-        if (api) {
-          api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
-            type: 'expand-toolbar'
-          }));
-        }
-      }
-    });
-    return updatedItems;
-  }
-  items.unshift({
-    type: 'separator'
-  });
-  items.unshift({
-    type: 'button',
-    icon: ChevronRightIcon,
-    title: 'Hide items',
-    onClick: function onClick() {
-      if (api) {
-        api.core.actions.execute(api.floatingToolbar.commands.updateContextualToolbar({
-          type: 'collapse-toolbar'
-        }));
-      }
-    }
-  });
-  return items;
-};
-var ToolbarItemsCollapsable = /*#__PURE__*/React.memo(function (_ref2) {
-  var _contextualToolbarSta;
-  var items = _ref2.items,
-    groupLabel = _ref2.groupLabel,
-    dispatchCommand = _ref2.dispatchCommand,
-    popupsMountPoint = _ref2.popupsMountPoint,
-    popupsBoundariesElement = _ref2.popupsBoundariesElement,
-    editorView = _ref2.editorView,
-    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-    popupsScrollableElement = _ref2.popupsScrollableElement,
-    scrollable = _ref2.scrollable,
-    providerFactory = _ref2.providerFactory,
-    extensionsProvider = _ref2.extensionsProvider,
-    node = _ref2.node,
-    setDisableScroll = _ref2.setDisableScroll,
-    mountRef = _ref2.mountRef,
-    mounted = _ref2.mounted,
-    api = _ref2.api;
-  var contextualToolbarState = useSharedPluginStateSelector(api, 'floatingToolbar.contextualToolbar');
-
-  // NOTE: Unsure if collapse/expand logic will be needed, for now hard code for cards
-  var isCard = node.type.name === 'inlineCard' || node.type.name === 'blockCard' || node.type.name === 'embedCard';
-  var updatedItems = isCard && items.length > 1 ? getFormattedItems(items.map(function (item) {
-    if ('id' in item && (item.id === 'editor.link.openLink' || item.id === 'editor.floatingToolbar.copy' || item.id === 'editor.link.commentLink')) {
-      return item;
-    }
-    return _objectSpread(_objectSpread({}, item), {}, {
-      contextualToolbarDefaultVisibility: 'hidden'
-    });
-  }), (_contextualToolbarSta = contextualToolbarState === null || contextualToolbarState === void 0 ? void 0 : contextualToolbarState.isCollapsed) !== null && _contextualToolbarSta !== void 0 ? _contextualToolbarSta : false, api) : items;
-  return jsx(ToolbarItems, {
-    items: updatedItems,
-    groupLabel: groupLabel,
-    dispatchCommand: dispatchCommand,
-    popupsMountPoint: popupsMountPoint,
-    popupsBoundariesElement: popupsBoundariesElement,
-    editorView: editorView,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    popupsScrollableElement: popupsScrollableElement,
-    scrollable: scrollable,
-    providerFactory: providerFactory,
-    extensionsProvider: extensionsProvider,
-    node: node,
-    setDisableScroll: setDisableScroll,
-    mountRef: mountRef,
-    mounted: mounted,
-    api: api
-  });
-}, function (prevProps, nextProps) {
-  if (!nextProps.node) {
-    return false;
-  }
-  // only rerender toolbar items if the node is different
-  // otherwise it causes an issue where multiple popups stays open
-  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
-});
 var buttonGroupStyles = css({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
@@ -525,15 +420,21 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   css({
     paddingLeft: "var(--ds-space-050, 4px)"
-  })));
+  })),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  editorExperiment('platform_editor_controls', 'variant1') ?
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  css({
+    height: "var(--ds-space-500, 40px)"
+  }) : undefined);
 };
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var toolbarOverflow = function toolbarOverflow(_ref3) {
-  var scrollable = _ref3.scrollable,
-    scrollDisabled = _ref3.scrollDisabled,
-    firstElementIsSelect = _ref3.firstElementIsSelect,
-    paddingFeatureFlag = _ref3.paddingFeatureFlag;
+var toolbarOverflow = function toolbarOverflow(_ref2) {
+  var scrollable = _ref2.scrollable,
+    scrollDisabled = _ref2.scrollDisabled,
+    firstElementIsSelect = _ref2.firstElementIsSelect,
+    paddingFeatureFlag = _ref2.paddingFeatureFlag;
   return css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   scrollable ?
@@ -619,8 +520,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   _inherits(Toolbar, _Component);
   return _createClass(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref4) {
-      var table = _ref4.table;
+    value: function resetStyling(_ref3) {
+      var table = _ref3.table;
       if (this.props.editorView) {
         var _this$props$api;
         var _this$props$editorVie2 = this.props.editorView,
@@ -736,14 +637,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
           paddingFeatureFlag: fg('platform_editor_floating_toolbar_padding_fix')
         })
-      }, editorExperiment('platform_editor_controls', 'control') ? jsx(ToolbarItems
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      , _extends({}, this.props, {
-        setDisableScroll: this.setDisableScroll.bind(this),
-        mountRef: this.mountRef,
-        mounted: this.state.mounted
-      })) : jsx(ToolbarItemsCollapsable
+      }, jsx(ToolbarItems
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _extends({}, this.props, {

package/dist/types/floatingToolbarPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { EditorCommand, FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { CopyButtonPlugin } from '@atlaskit/editor-plugin-copy-button';
@@ -10,7 +10,6 @@ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { ContextualToolbarActions, ContextualToolbarState } from './pm-plugins/contextual-toolbar/types';
 export type ConfigWithNodeInfo = {
     config: FloatingToolbarConfig | undefined;
     pos: number;
@@ -48,17 +47,3 @@ export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
         floatingToolbarData: FloatingToolbarPluginData | undefined;
     } | undefined;
 }>;
-export type FloatingToolbarPluginNext = NextEditorPlugin<'floatingToolbar', {
-    dependencies: FloatingToolbarPluginDependencies;
-    actions: {
-        forceFocusSelector: ForceFocusSelector;
-    };
-    sharedState: {
-        configWithNodeInfo: ConfigWithNodeInfo | undefined;
-        floatingToolbarData: FloatingToolbarPluginData | undefined;
-        contextualToolbar: ContextualToolbarState | undefined;
-    } | undefined;
-    commands: {
-        updateContextualToolbar: (action: ContextualToolbarActions) => EditorCommand;
-    };
-}>;

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

@@ -30,7 +30,6 @@ export interface Props {
     scrollable?: boolean;
     api: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
     mediaAssistiveMessage?: string;
-    forceStaticToolbar?: boolean;
 }
 type GroupedItems = (Item | Item[])[];
 export declare function groupItems(items: Item[]): GroupedItems;

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

@@ -1,4 +1,4 @@
-import type { EditorCommand, FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FloatingToolbarConfig, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { CopyButtonPlugin } from '@atlaskit/editor-plugin-copy-button';
@@ -10,7 +10,6 @@ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { ContextualToolbarActions, ContextualToolbarState } from './pm-plugins/contextual-toolbar/types';
 export type ConfigWithNodeInfo = {
     config: FloatingToolbarConfig | undefined;
     pos: number;
@@ -48,17 +47,3 @@ export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
         floatingToolbarData: FloatingToolbarPluginData | undefined;
     } | undefined;
 }>;
-export type FloatingToolbarPluginNext = NextEditorPlugin<'floatingToolbar', {
-    dependencies: FloatingToolbarPluginDependencies;
-    actions: {
-        forceFocusSelector: ForceFocusSelector;
-    };
-    sharedState: {
-        configWithNodeInfo: ConfigWithNodeInfo | undefined;
-        floatingToolbarData: FloatingToolbarPluginData | undefined;
-        contextualToolbar: ContextualToolbarState | undefined;
-    } | undefined;
-    commands: {
-        updateContextualToolbar: (action: ContextualToolbarActions) => EditorCommand;
-    };
-}>;

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

@@ -30,7 +30,6 @@ export interface Props {
     scrollable?: boolean;
     api: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
     mediaAssistiveMessage?: string;
-    forceStaticToolbar?: boolean;
 }
 type GroupedItems = (Item | Item[])[];
 export declare function groupItems(items: Item[]): GroupedItems;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "2.0.4",
+	"version": "3.0.1",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -17,7 +17,9 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": false,
+	"sideEffects": [
+		"*.compiled.css"
+	],
 	"atlaskit:src": "src/index.ts",
 	"af:exports": {
 		".": "./src/index.ts"
@@ -26,7 +28,7 @@
 		"@atlaskit/adf-utils": "^19.18.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/checkbox": "^17.0.0",
-		"@atlaskit/editor-common": "^100.2.0",
+		"@atlaskit/editor-common": "^100.4.0",
 		"@atlaskit/editor-palette": "2.0.0",
 		"@atlaskit/editor-plugin-block-controls": "^3.1.0",
 		"@atlaskit/editor-plugin-context-panel": "^3.0.0",
@@ -36,7 +38,7 @@
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-emoji": "^3.0.0",
 		"@atlaskit/editor-plugin-extension": "^4.0.0",
-		"@atlaskit/editor-plugin-table": "^10.1.0",
+		"@atlaskit/editor-plugin-table": "^10.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^68.0.0",
 		"@atlaskit/icon": "^24.1.0",
@@ -46,7 +48,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.2.0",
+		"@atlaskit/tmp-editor-statsig": "^3.3.0",
 		"@atlaskit/tokens": "^4.2.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",

package/dist/cjs/pm-plugins/contextual-toolbar/plugin-key.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.contextualToolbarPluginKey = void 0;
-var _state = require("@atlaskit/editor-prosemirror/state");
-var contextualToolbarPluginKey = exports.contextualToolbarPluginKey = new _state.PluginKey('contextualToolbar');

package/dist/cjs/pm-plugins/contextual-toolbar/plugin.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.contextualToolbarPlugin = void 0;
-var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _pluginKey = require("./plugin-key");
-var defaultEditState = {
-  isCollapsed: true
-};
-var contextualToolbarPlugin = exports.contextualToolbarPlugin = function contextualToolbarPlugin() {
-  return new _safePlugin.SafePlugin({
-    key: _pluginKey.contextualToolbarPluginKey,
-    state: {
-      init: function init() {
-        return defaultEditState;
-      },
-      apply: function apply(tr, pluginState) {
-        var action = tr.getMeta(_pluginKey.contextualToolbarPluginKey);
-        if (action) {
-          switch (action.type) {
-            case 'expand-toolbar':
-              return {
-                isCollapsed: false
-              };
-            case 'collapse-toolbar':
-              return {
-                isCollapsed: true
-              };
-            default:
-              return pluginState;
-          }
-        }
-        return pluginState;
-      }
-    }
-  });
-};

package/dist/cjs/pm-plugins/contextual-toolbar/types.js

@@ -1 +0,0 @@
-"use strict";

package/dist/es2019/pm-plugins/contextual-toolbar/plugin-key.js

@@ -1,2 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export const contextualToolbarPluginKey = new PluginKey('contextualToolbar');

package/dist/es2019/pm-plugins/contextual-toolbar/plugin.js

@@ -1,33 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { contextualToolbarPluginKey } from './plugin-key';
-const defaultEditState = {
-  isCollapsed: true
-};
-export const contextualToolbarPlugin = () => {
-  return new SafePlugin({
-    key: contextualToolbarPluginKey,
-    state: {
-      init() {
-        return defaultEditState;
-      },
-      apply(tr, pluginState) {
-        const action = tr.getMeta(contextualToolbarPluginKey);
-        if (action) {
-          switch (action.type) {
-            case 'expand-toolbar':
-              return {
-                isCollapsed: false
-              };
-            case 'collapse-toolbar':
-              return {
-                isCollapsed: true
-              };
-            default:
-              return pluginState;
-          }
-        }
-        return pluginState;
-      }
-    }
-  });
-};

package/dist/esm/pm-plugins/contextual-toolbar/plugin-key.js

@@ -1,2 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export var contextualToolbarPluginKey = new PluginKey('contextualToolbar');

package/dist/esm/pm-plugins/contextual-toolbar/plugin.js

@@ -1,33 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { contextualToolbarPluginKey } from './plugin-key';
-var defaultEditState = {
-  isCollapsed: true
-};
-export var contextualToolbarPlugin = function contextualToolbarPlugin() {
-  return new SafePlugin({
-    key: contextualToolbarPluginKey,
-    state: {
-      init: function init() {
-        return defaultEditState;
-      },
-      apply: function apply(tr, pluginState) {
-        var action = tr.getMeta(contextualToolbarPluginKey);
-        if (action) {
-          switch (action.type) {
-            case 'expand-toolbar':
-              return {
-                isCollapsed: false
-              };
-            case 'collapse-toolbar':
-              return {
-                isCollapsed: true
-              };
-            default:
-              return pluginState;
-          }
-        }
-        return pluginState;
-      }
-    }
-  });
-};

package/dist/types/pm-plugins/contextual-toolbar/plugin-key.d.ts

@@ -1,3 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { ContextualToolbarState } from './types';
-export declare const contextualToolbarPluginKey: PluginKey<ContextualToolbarState>;

package/dist/types/pm-plugins/contextual-toolbar/plugin.d.ts

@@ -1,3 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { ContextualToolbarState } from './types';
-export declare const contextualToolbarPlugin: () => SafePlugin<ContextualToolbarState>;

package/dist/types/pm-plugins/contextual-toolbar/types.d.ts

@@ -1,8 +0,0 @@
-export type ContextualToolbarState = {
-    isCollapsed: boolean;
-};
-export type ContextualToolbarActions = {
-    type: 'expand-toolbar';
-} | {
-    type: 'collapse-toolbar';
-};

package/dist/types-ts4.5/pm-plugins/contextual-toolbar/plugin-key.d.ts

@@ -1,3 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { ContextualToolbarState } from './types';
-export declare const contextualToolbarPluginKey: PluginKey<ContextualToolbarState>;

package/dist/types-ts4.5/pm-plugins/contextual-toolbar/plugin.d.ts

@@ -1,3 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { ContextualToolbarState } from './types';
-export declare const contextualToolbarPlugin: () => SafePlugin<ContextualToolbarState>;

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

@@ -1,8 +0,0 @@
-export type ContextualToolbarState = {
-    isCollapsed: boolean;
-};
-export type ContextualToolbarActions = {
-    type: 'expand-toolbar';
-} | {
-    type: 'collapse-toolbar';
-};