@atlaskit/editor-plugin-floating-toolbar 6.0.2 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 7.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.1.0
+
+### Minor Changes
+
+- [`c0113eeccb2df`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c0113eeccb2df) -
+  [ux] ED-29120 add a new config option for default editor preset
+  (`toolbar.enableNewToolbarExperience`) which allows the new toolbar to be disabled. This is needed
+  for editors that can't be excluded at the experiment level.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.2
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -244,7 +244,7 @@ function ContentComponent(_ref5) {
     node = configWithNodeInfo.node;
 
   // When the new inline editor-toolbar is enabled, suppress floating toolbar for text selections.
-  if ((0, _experiments.editorExperiment)('platform_editor_toolbar_aifc', true)) {
+  if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar) && (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc', true)) {
     var selection = editorView.state.selection;
     var isCellSelection = '$anchorCell' in selection && !selection.empty;
     var isTextSelected = selection instanceof _state.TextSelection && !selection.empty;
@@ -299,7 +299,7 @@ function ContentComponent(_ref5) {
       return toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp];
     });
   }
-  if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+  if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
     var _items2;
     // Consolidate floating toolbar items
     var toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);

package/dist/cjs/ui/Dropdown.js

@@ -14,7 +14,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
@@ -75,13 +74,15 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
         showSelected = _this$props.showSelected,
         dispatchCommand = _this$props.dispatchCommand,
-        editorView = _this$props.editorView;
+        editorView = _this$props.editorView,
+        areAnyNewToolbarFlagsEnabled = _this$props.areAnyNewToolbarFlagsEnabled;
       return (0, _react2.jsx)(_DropdownMenu.default, {
         hide: _this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
         showSelected: showSelected,
-        editorView: editorView
+        editorView: editorView,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       });
     });
     (0, _defineProperty2.default)(_this, "toggleOpen", function () {
@@ -158,7 +159,8 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
         pulse = _this$props2.pulse,
         spotlightConfig = _this$props2.spotlightConfig,
         shouldFitContainer = _this$props2.shouldFitContainer,
-        alignX = _this$props2.alignX;
+        alignX = _this$props2.alignX,
+        areAnyNewToolbarFlagsEnabled = _this$props2.areAnyNewToolbarFlagsEnabled;
       var trigger;
       if (icon) {
         var TriggerIcon = hideExpandIcon ? icon : (0, _react2.jsx)(CompositeIcon, {
@@ -173,10 +175,11 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
           selected: isOpen,
           disabled: disabled,
           tooltipContent: tooltip,
-          ariaHasPopup: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)() ? true : undefined,
+          ariaHasPopup: areAnyNewToolbarFlagsEnabled ? true : undefined,
           onMount: onMount,
           pulse: pulse,
-          spotlightConfig: spotlightConfig
+          spotlightConfig: spotlightConfig,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       } else {
         trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
@@ -200,7 +203,8 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
           areaControls: dropdownListId,
           onMount: onMount,
           pulse: pulse,
-          spotlightConfig: spotlightConfig
+          spotlightConfig: spotlightConfig,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, title);
       }
 

package/dist/cjs/ui/DropdownMenu.js

@@ -8,7 +8,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
-var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _menu = require("@atlaskit/menu");
 /**
  * @jsxRuntime classic
@@ -55,8 +54,9 @@ var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
     intl = props.intl,
     editorView = props.editorView,
     _props$showSelected = props.showSelected,
-    showSelected = _props$showSelected === void 0 ? true : _props$showSelected;
-  if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+    showSelected = _props$showSelected === void 0 ? true : _props$showSelected,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
+  if (areAnyNewToolbarFlagsEnabled) {
     return (0, _react2.jsx)("div", {
       css: menuContainerStyles,
       role: "menu"

package/dist/cjs/ui/ExtensionsPlaceholder.js

@@ -55,7 +55,8 @@ var resolveExtensionIcon = /*#__PURE__*/function () {
 var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
-    extensionApi = props.extensionApi;
+    extensionApi = props.extensionApi,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var ButtonIcon = _react.default.useMemo(function () {
     return item.icon ? (0, _reactLoadable.default)({
       // Ignored via go/ees005
@@ -110,7 +111,8 @@ var ExtensionButton = function ExtensionButton(props) {
     onClick: onClick,
     tooltipContent: item.tooltip,
     tooltipStyle: item.tooltipStyle,
-    disabled: item.disabled
+    disabled: item.disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }, item.label);
 };
 var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
@@ -126,7 +128,8 @@ var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsP
     popupsMountPoint = props.popupsMountPoint,
     popupsBoundariesElement = props.popupsBoundariesElement,
     popupsScrollableElement = props.popupsScrollableElement,
-    alignDropdownWithToolbar = props.alignDropdownWithToolbar;
+    alignDropdownWithToolbar = props.alignDropdownWithToolbar,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var _useState = (0, _react.useState)([]),
@@ -184,7 +187,9 @@ var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsP
   // but count fragment as 1 child, so here we create the children manually.
   var children = [];
   if (separator && ['start', 'both'].includes(separator)) {
-    children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+    children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }));
   }
   var isNestedTable = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _nesting.isSelectionTableNestedInTable)(editorView.state);
 
@@ -219,7 +224,8 @@ var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsP
         footer: item.footer,
         onMount: item.onMount,
         onClick: item.onClick,
-        pulse: item.pulse
+        pulse: item.pulse,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }));
     } else {
       children.push( /*#__PURE__*/_react.default.createElement(ExtensionButton, {
@@ -227,15 +233,20 @@ var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsP
         item: item,
         editorView: editorView,
         applyChangeToContextPanel: applyChangeToContextPanel,
-        extensionApi: extensionApi
+        extensionApi: extensionApi,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }));
     }
     if (index < extensionItems.length - 1) {
-      children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+      children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, {
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+      }));
     }
   });
   if (separator && ['end', 'both'].includes(separator)) {
-    children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+    children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }));
   }
 
   // eslint-disable-next-line react/no-children-prop

package/dist/cjs/ui/ScrollButtons.js

@@ -40,7 +40,8 @@ var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
   var intl = _ref.intl,
     scrollContainerRef = _ref.scrollContainerRef,
     node = _ref.node,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var buttonsContainerRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -158,7 +159,8 @@ var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
       size: "small"
     }),
     onClick: scrollLeft,
-    disabled: !canScrollLeft || disabled
+    disabled: !canScrollLeft || disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     title: intl.formatMessage(_floatingToolbar.messages.floatingToolbarScrollRight),
     icon: (0, _react2.jsx)(RightIcon, {
@@ -166,6 +168,7 @@ var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
       size: "small"
     }),
     onClick: scrollRight,
-    disabled: !canScrollRight || disabled
+    disabled: !canScrollRight || disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   })) : null;
 };

package/dist/cjs/ui/Toolbar.js

@@ -43,7 +43,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function groupItems(items) {
+function groupItems(items, areAnyNewToolbarFlagsEnabled) {
   var groupItems = items.reduce(function (accumulator, item, i) {
     var finalOutput = accumulator.finalOutput,
       buttonGroup = accumulator.buttonGroup;
@@ -65,7 +65,7 @@ function groupItems(items) {
       } else {
         finalOutput.push(item);
       }
-    } else if (item.type === 'separator' && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+    } else if (item.type === 'separator' && areAnyNewToolbarFlagsEnabled) {
       var _items;
       var isLeadingSeparator = i === 0;
       var isTrailingSeparator = i === items.length - 1;
@@ -99,7 +99,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
     api = _ref.api,
     intl = _ref.intl;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  var isNewEditorToolbarEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
+  var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   var renderItem = function renderItem(item, idx) {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
@@ -177,7 +177,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           ariaLabel: (0, _expValEquals.expValEquals)('platform_editor_floating_toolbar_button_aria_label', 'isEnabled', true) ? item === null || item === void 0 ? void 0 : item.ariaLabel : undefined,
           pulse: item.pulse,
           spotlightConfig: item.spotlightConfig,
-          interactionName: item.interactionName
+          interactionName: item.interactionName,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, item.showTitle && item.title);
       case 'input':
         return (0, _react2.jsx)(_Input.Input, {
@@ -199,7 +200,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         }
       case 'overflow-dropdown':
         return (0, _react2.jsx)(_Dropdown.default, {
-          alignX: (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc', true) ? 'right' : undefined,
+          alignX: areAnyNewToolbarFlagsEnabled ? 'right' : undefined,
           key: idx,
           title: intl.formatMessage(_messages.default.viewMore),
           icon: (0, _react2.jsx)(_showMoreHorizontal.default, {
@@ -221,7 +222,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           setDisableParentScroll: scrollable ? setDisableScroll : undefined,
           dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
           alignDropdownWithToolbar: items.length === 1,
-          onClick: item.onClick
+          onClick: item.onClick,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'dropdown':
         var DropdownIcon = item.icon;
@@ -255,7 +257,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           onMount: item.onMount,
           onClick: item.onClick,
           pulse: item.pulse,
-          shouldFitContainer: item.shouldFitContainer
+          shouldFitContainer: item.shouldFitContainer,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'select':
         if (item.selectType === 'list') {
@@ -344,24 +347,27 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           alignDropdownWithToolbar: items.length === 1,
-          scrollable: scrollable
+          scrollable: scrollable,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'separator':
-        if (isNewEditorToolbarEnabled) {
+        if (areAnyNewToolbarFlagsEnabled) {
           return item.fullHeight ? (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
             key: idx,
-            fullHeight: true
+            fullHeight: true,
+            areAnyNewToolbarFlagsEnabled: true
           }) : null;
         }
         return (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
           key: idx,
-          fullHeight: item.fullHeight
+          fullHeight: item.fullHeight,
+          areAnyNewToolbarFlagsEnabled: false
         });
     }
   };
   var groupedItems = groupItems(items.filter(function (item) {
     return !item.hidden;
-  }));
+  }), areAnyNewToolbarFlagsEnabled);
   return (0, _react2.jsx)(_buttonGroup.default, {
     testId: "editor-floating-toolbar-items"
   }, groupedItems.map(function (element, index) {
@@ -371,7 +377,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
         key: index,
-        css: isNewEditorToolbarEnabled ? buttonGroupStylesNew : buttonGroupStyles,
+        css: areAnyNewToolbarFlagsEnabled ? buttonGroupStylesNew : buttonGroupStyles,
         role: "radiogroup",
         "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
         "data-testid": "editor-floating-toolbar-grouped-buttons"
@@ -406,7 +412,7 @@ var buttonGroupStylesNew = (0, _react2.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
+var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
   return (0, _react2.css)({
     backgroundColor: "var(--ds-surface-overlay, white)",
     borderRadius: "var(--ds-radius-small, 3px)",
@@ -437,7 +443,7 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
     overflow: 'hidden'
   }) :
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  (0, _toolbarFlagCheck.areToolbarFlagsEnabled)() ?
+  areAnyNewToolbarFlagsEnabled ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   (0, _react2.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -460,7 +466,7 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
     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, _toolbarFlagCheck.areToolbarFlagsEnabled)() ?
+  areAnyNewToolbarFlagsEnabled ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   (0, _react2.css)({
     minHeight: "var(--ds-space-500, 40px)"
@@ -471,7 +477,8 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
 var toolbarOverflow = function toolbarOverflow(_ref2) {
   var scrollable = _ref2.scrollable,
     scrollDisabled = _ref2.scrollDisabled,
-    firstElementIsSelect = _ref2.firstElementIsSelect;
+    firstElementIsSelect = _ref2.firstElementIsSelect,
+    areAnyNewToolbarFlagsEnabled = _ref2.areAnyNewToolbarFlagsEnabled;
   return (0, _react2.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   scrollable ?
@@ -512,7 +519,7 @@ var toolbarOverflow = function toolbarOverflow(_ref2) {
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  (0, _toolbarFlagCheck.areToolbarFlagsEnabled)() ?
+  areAnyNewToolbarFlagsEnabled ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   (0, _react2.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -651,6 +658,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this$props$api2;
       var _this$props2 = this.props,
         items = _this$props2.items,
         className = _this$props2.className,
@@ -658,7 +666,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl = _this$props2.intl,
         scrollable = _this$props2.scrollable,
         mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
-      var isNewEditorToolbarEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
+      var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean((_this$props$api2 = this.props.api) === null || _this$props$api2 === void 0 ? void 0 : _this$props$api2.toolbar));
       if (!items || !items.length) {
         return null;
       }
@@ -682,7 +690,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)("div", {
         ref: this.toolbarContainerRef,
         css: function css() {
-          return [toolbarContainer(scrollable, hasSelect !== undefined, firstElementIsSelect)];
+          return [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)];
         },
         "aria-label": intl.formatMessage(_floatingToolbar.messages.floatingToolbarAriaLabel),
         role: "toolbar",
@@ -690,11 +698,11 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: className,
-        onMouseDown: isNewEditorToolbarEnabled ? this.captureMouseEvent : undefined
+        onMouseDown: areAnyNewToolbarFlagsEnabled ? this.captureMouseEvent : undefined
       }, (0, _react2.jsx)(_ui.Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer)) : intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer),
         delay: 250
-      }), scrollable && isNewEditorToolbarEnabled && (0, _react2.jsx)(_ScrollButton.ScrollButton, {
+      }), scrollable && areAnyNewToolbarFlagsEnabled && (0, _react2.jsx)(_ScrollButton.ScrollButton, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
@@ -706,6 +714,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
         ,
         css: toolbarOverflow({
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled,
           scrollable: scrollable,
           scrollDisabled: this.state.scrollDisabled,
           firstElementIsSelect: firstElementIsSelect
@@ -717,7 +726,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted
-      }))), scrollable && (isNewEditorToolbarEnabled ? (0, _react2.jsx)(_ScrollButton.ScrollButton, {
+      }))), scrollable && (areAnyNewToolbarFlagsEnabled ? (0, _react2.jsx)(_ScrollButton.ScrollButton, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
@@ -727,7 +736,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
-        disabled: this.state.scrollDisabled
+        disabled: this.state.scrollDisabled,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }))), (0, _react2.jsx)("div", {
         ref: this.mountRef
       })));

package/dist/es2019/floatingToolbarPlugin.js

@@ -236,7 +236,7 @@ export function ContentComponent({
   } = configWithNodeInfo;
 
   // When the new inline editor-toolbar is enabled, suppress floating toolbar for text selections.
-  if (editorExperiment('platform_editor_toolbar_aifc', true)) {
+  if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar) && editorExperiment('platform_editor_toolbar_aifc', true)) {
     const selection = editorView.state.selection;
     const isCellSelection = '$anchorCell' in selection && !selection.empty;
     const isTextSelected = selection instanceof TextSelection && !selection.empty;
@@ -288,7 +288,7 @@ export function ContentComponent({
     const toolbarItemViewModeProp = 'supportsViewMode';
     items = iterableItems.filter(item => toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp]);
   }
-  if (areToolbarFlagsEnabled()) {
+  if (areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
     var _items2;
     // Consolidate floating toolbar items
     const toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);

package/dist/es2019/ui/Dropdown.js

@@ -9,7 +9,6 @@ import React, { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
@@ -56,14 +55,16 @@ export default class Dropdown extends Component {
       const {
         showSelected,
         dispatchCommand,
-        editorView
+        editorView,
+        areAnyNewToolbarFlagsEnabled
       } = this.props;
       return jsx(DropdownMenu, {
         hide: this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
         showSelected: showSelected,
-        editorView: editorView
+        editorView: editorView,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       });
     });
     _defineProperty(this, "toggleOpen", () => {
@@ -139,7 +140,8 @@ export default class Dropdown extends Component {
       pulse,
       spotlightConfig,
       shouldFitContainer,
-      alignX
+      alignX,
+      areAnyNewToolbarFlagsEnabled
     } = this.props;
     let trigger;
     if (icon) {
@@ -155,10 +157,11 @@ export default class Dropdown extends Component {
         selected: isOpen,
         disabled: disabled,
         tooltipContent: tooltip,
-        ariaHasPopup: areToolbarFlagsEnabled() ? true : undefined,
+        ariaHasPopup: areAnyNewToolbarFlagsEnabled ? true : undefined,
         onMount: onMount,
         pulse: pulse,
-        spotlightConfig: spotlightConfig
+        spotlightConfig: spotlightConfig,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       });
     } else {
       trigger = jsx(Button, {
@@ -182,7 +185,8 @@ export default class Dropdown extends Component {
         areaControls: dropdownListId,
         onMount: onMount,
         pulse: pulse,
-        spotlightConfig: spotlightConfig
+        spotlightConfig: spotlightConfig,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }, title);
     }
 

package/dist/es2019/ui/DropdownMenu.js

@@ -10,7 +10,6 @@ import { css, jsx } from '@emotion/react';
 
 import { injectIntl } from 'react-intl-next';
 import { DropdownMenuItem, DropdownSeparator } from '@atlaskit/editor-common/floating-toolbar';
-import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { HeadingItem } from '@atlaskit/menu';
 export const menuItemDimensions = {
   width: 175,
@@ -48,9 +47,10 @@ const Dropdown = /*#__PURE__*/memo(props => {
     items,
     intl,
     editorView,
-    showSelected = true
+    showSelected = true,
+    areAnyNewToolbarFlagsEnabled
   } = props;
-  if (areToolbarFlagsEnabled()) {
+  if (areAnyNewToolbarFlagsEnabled) {
     return jsx("div", {
       css: menuContainerStyles,
       role: "menu"

package/dist/es2019/ui/ExtensionsPlaceholder.js

@@ -22,7 +22,8 @@ const ExtensionButton = props => {
   const {
     item,
     node,
-    extensionApi
+    extensionApi,
+    areAnyNewToolbarFlagsEnabled
   } = props;
   const ButtonIcon = React.useMemo(() => item.icon ? Loadable({
     // Ignored via go/ees005
@@ -60,7 +61,8 @@ const ExtensionButton = props => {
     onClick: onClick,
     tooltipContent: item.tooltip,
     tooltipStyle: item.tooltipStyle,
-    disabled: item.disabled
+    disabled: item.disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }, item.label);
 };
 export const ExtensionsPlaceholder = props => {
@@ -77,7 +79,8 @@ export const ExtensionsPlaceholder = props => {
     popupsMountPoint,
     popupsBoundariesElement,
     popupsScrollableElement,
-    alignDropdownWithToolbar
+    alignDropdownWithToolbar,
+    areAnyNewToolbarFlagsEnabled
   } = props;
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -107,7 +110,9 @@ export const ExtensionsPlaceholder = props => {
   // but count fragment as 1 child, so here we create the children manually.
   const children = [];
   if (separator && ['start', 'both'].includes(separator)) {
-    children.push( /*#__PURE__*/React.createElement(Separator, null));
+    children.push( /*#__PURE__*/React.createElement(Separator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }));
   }
   const isNestedTable = fg('platform_editor_use_nested_table_pm_nodes') && isSelectionTableNestedInTable(editorView.state);
 
@@ -142,7 +147,8 @@ export const ExtensionsPlaceholder = props => {
         footer: item.footer,
         onMount: item.onMount,
         onClick: item.onClick,
-        pulse: item.pulse
+        pulse: item.pulse,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }));
     } else {
       children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
@@ -150,15 +156,20 @@ export const ExtensionsPlaceholder = props => {
         item: item,
         editorView: editorView,
         applyChangeToContextPanel: applyChangeToContextPanel,
-        extensionApi: extensionApi
+        extensionApi: extensionApi,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }));
     }
     if (index < extensionItems.length - 1) {
-      children.push( /*#__PURE__*/React.createElement(Separator, null));
+      children.push( /*#__PURE__*/React.createElement(Separator, {
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+      }));
     }
   });
   if (separator && ['end', 'both'].includes(separator)) {
-    children.push( /*#__PURE__*/React.createElement(Separator, null));
+    children.push( /*#__PURE__*/React.createElement(Separator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }));
   }
 
   // eslint-disable-next-line react/no-children-prop

package/dist/es2019/ui/ScrollButtons.js

@@ -29,7 +29,8 @@ export const ScrollButtons = ({
   intl,
   scrollContainerRef,
   node,
-  disabled
+  disabled,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const buttonsContainerRef = useRef(null);
   const [needScroll, setNeedScroll] = useState(false);
@@ -138,7 +139,8 @@ export const ScrollButtons = ({
       size: "small"
     }),
     onClick: scrollLeft,
-    disabled: !canScrollLeft || disabled
+    disabled: !canScrollLeft || disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }), jsx(Button, {
     title: intl.formatMessage(messages.floatingToolbarScrollRight),
     icon: jsx(RightIcon, {
@@ -146,6 +148,7 @@ export const ScrollButtons = ({
       size: "small"
     }),
     onClick: scrollRight,
-    disabled: !canScrollRight || disabled
+    disabled: !canScrollRight || disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   })) : null;
 };