@atlaskit/editor-plugin-floating-toolbar 6.0.1 → 6.1.0

package/dist/es2019/ui/Toolbar.js

@@ -20,7 +20,6 @@ import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
@@ -31,7 +30,7 @@ import { Input } from './Input';
 import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
-export function groupItems(items) {
+export function groupItems(items, areAnyNewToolbarFlagsEnabled) {
   const groupItems = items.reduce((accumulator, item, i) => {
     const {
       finalOutput,
@@ -55,7 +54,7 @@ export function groupItems(items) {
       } else {
         finalOutput.push(item);
       }
-    } else if (item.type === 'separator' && areToolbarFlagsEnabled()) {
+    } else if (item.type === 'separator' && areAnyNewToolbarFlagsEnabled) {
       var _items;
       const isLeadingSeparator = i === 0;
       const isTrailingSeparator = i === items.length - 1;
@@ -90,7 +89,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   intl
 }) => {
   const 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;
-  const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
+  const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   const renderItem = (item, idx) => {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
@@ -160,7 +159,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           ariaLabel: 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 jsx(Input, {
@@ -178,7 +178,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         }
       case 'overflow-dropdown':
         return jsx(Dropdown, {
-          alignX: expValEqualsNoExposure('platform_editor_toolbar_aifc', 'isEnabled', true) ? 'right' : undefined,
+          alignX: areAnyNewToolbarFlagsEnabled ? 'right' : undefined,
           key: idx,
           title: intl.formatMessage(commonMessages.viewMore),
           icon: jsx(ShowMoreHorizontalIcon, {
@@ -200,7 +200,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           setDisableParentScroll: scrollable ? setDisableScroll : undefined,
           dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && `${item.id}-dropdownList`,
           alignDropdownWithToolbar: items.length === 1,
-          onClick: item.onClick
+          onClick: item.onClick,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'dropdown':
         const DropdownIcon = item.icon;
@@ -234,7 +235,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           onMount: item.onMount,
           onClick: item.onClick,
           pulse: item.pulse,
-          shouldFitContainer: item.shouldFitContainer
+          shouldFitContainer: item.shouldFitContainer,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'select':
         if (item.selectType === 'list') {
@@ -319,22 +321,25 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           alignDropdownWithToolbar: items.length === 1,
-          scrollable: scrollable
+          scrollable: scrollable,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'separator':
-        if (isNewEditorToolbarEnabled) {
+        if (areAnyNewToolbarFlagsEnabled) {
           return item.fullHeight ? jsx(Separator, {
             key: idx,
-            fullHeight: true
+            fullHeight: true,
+            areAnyNewToolbarFlagsEnabled: true
           }) : null;
         }
         return jsx(Separator, {
           key: idx,
-          fullHeight: item.fullHeight
+          fullHeight: item.fullHeight,
+          areAnyNewToolbarFlagsEnabled: false
         });
     }
   };
-  const groupedItems = groupItems(items.filter(item => !item.hidden));
+  const groupedItems = groupItems(items.filter(item => !item.hidden), areAnyNewToolbarFlagsEnabled);
   return jsx(ButtonGroup, {
     testId: "editor-floating-toolbar-items"
   }, groupedItems.map((element, index) => {
@@ -344,7 +349,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         // 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"
@@ -375,7 +380,7 @@ const buttonGroupStylesNew = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const toolbarContainer = (scrollable, hasSelect, firstElementIsSelect) => css({
+const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) => css({
   backgroundColor: "var(--ds-surface-overlay, white)",
   borderRadius: "var(--ds-radius-small, 3px)",
   boxShadow: `var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`,
@@ -405,7 +410,7 @@ css({
   overflow: 'hidden'
 }) :
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-areToolbarFlagsEnabled() ?
+areAnyNewToolbarFlagsEnabled ?
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -428,7 +433,7 @@ 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
-areToolbarFlagsEnabled() ?
+areAnyNewToolbarFlagsEnabled ?
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 css({
   minHeight: "var(--ds-space-500, 40px)"
@@ -438,7 +443,8 @@ css({
 const toolbarOverflow = ({
   scrollable,
   scrollDisabled,
-  firstElementIsSelect
+  firstElementIsSelect,
+  areAnyNewToolbarFlagsEnabled
 }) => css(
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 scrollable ?
@@ -479,7 +485,7 @@ css({
   }
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-areToolbarFlagsEnabled() ?
+areAnyNewToolbarFlagsEnabled ?
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -605,6 +611,7 @@ class Toolbar extends Component {
     this.resetStyling();
   }
   render() {
+    var _this$props$api2;
     const {
       items,
       className,
@@ -613,7 +620,7 @@ class Toolbar extends Component {
       scrollable,
       mediaAssistiveMessage
     } = this.props;
-    const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
+    const areAnyNewToolbarFlagsEnabled = 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;
     }
@@ -634,18 +641,18 @@ class Toolbar extends Component {
       intl: intl
     }, jsx("div", {
       ref: this.toolbarContainerRef,
-      css: () => [toolbarContainer(scrollable, hasSelect !== undefined, firstElementIsSelect)],
+      css: () => [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)],
       "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
       role: "toolbar",
       "data-testid": "editor-floating-toolbar"
       // 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
     }, jsx(Announcer, {
       text: mediaAssistiveMessage ? `${mediaAssistiveMessage}, ${intl.formatMessage(messages.floatingToolbarAnnouncer)}` : intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
-    }), scrollable && isNewEditorToolbarEnabled && jsx(ScrollButton, {
+    }), scrollable && areAnyNewToolbarFlagsEnabled && jsx(ScrollButton, {
       intl: intl,
       scrollContainerRef: this.scrollContainerRef,
       node: node,
@@ -657,6 +664,7 @@ class Toolbar extends Component {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: toolbarOverflow({
+        areAnyNewToolbarFlagsEnabled,
         scrollable,
         scrollDisabled: this.state.scrollDisabled,
         firstElementIsSelect
@@ -668,7 +676,7 @@ class Toolbar extends Component {
       setDisableScroll: this.setDisableScroll.bind(this),
       mountRef: this.mountRef,
       mounted: this.state.mounted
-    }))), scrollable && (isNewEditorToolbarEnabled ? jsx(ScrollButton, {
+    }))), scrollable && (areAnyNewToolbarFlagsEnabled ? jsx(ScrollButton, {
       intl: intl,
       scrollContainerRef: this.scrollContainerRef,
       node: node,
@@ -678,7 +686,8 @@ class Toolbar extends Component {
       intl: intl,
       scrollContainerRef: this.scrollContainerRef,
       node: node,
-      disabled: this.state.scrollDisabled
+      disabled: this.state.scrollDisabled,
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     }))), jsx("div", {
       ref: this.mountRef
     })));

package/dist/esm/floatingToolbarPlugin.js

@@ -235,7 +235,7 @@ export function ContentComponent(_ref5) {
     node = configWithNodeInfo.node;
 
   // When the new inline editor-toolbar is enabled, suppress floating toolbar for text selections.
-  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+  if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar) && editorExperiment('platform_editor_toolbar_aifc', true)) {
     var selection = editorView.state.selection;
     var isCellSelection = '$anchorCell' in selection && !selection.empty;
     var isTextSelected = selection instanceof TextSelection && !selection.empty;
@@ -290,7 +290,7 @@ export function ContentComponent(_ref5) {
       return 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
     var toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);

package/dist/esm/ui/Dropdown.js

@@ -18,7 +18,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';
@@ -71,13 +70,15 @@ var Dropdown = /*#__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 jsx(DropdownMenu, {
         hide: _this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
         showSelected: showSelected,
-        editorView: editorView
+        editorView: editorView,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       });
     });
     _defineProperty(_this, "toggleOpen", function () {
@@ -154,7 +155,8 @@ var Dropdown = /*#__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 : jsx(CompositeIcon, {
@@ -169,10 +171,11 @@ var Dropdown = /*#__PURE__*/function (_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, {
@@ -196,7 +199,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           areaControls: dropdownListId,
           onMount: onMount,
           pulse: pulse,
-          spotlightConfig: spotlightConfig
+          spotlightConfig: spotlightConfig,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, title);
       }
 

package/dist/esm/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 var menuItemDimensions = {
   width: 175,
@@ -48,8 +47,9 @@ var Dropdown = /*#__PURE__*/memo(function (props) {
     intl = props.intl,
     editorView = props.editorView,
     _props$showSelected = props.showSelected,
-    showSelected = _props$showSelected === void 0 ? true : _props$showSelected;
-  if (areToolbarFlagsEnabled()) {
+    showSelected = _props$showSelected === void 0 ? true : _props$showSelected,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
+  if (areAnyNewToolbarFlagsEnabled) {
     return jsx("div", {
       css: menuContainerStyles,
       role: "menu"

package/dist/esm/ui/ExtensionsPlaceholder.js

@@ -46,7 +46,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.useMemo(function () {
     return item.icon ? Loadable({
       // Ignored via go/ees005
@@ -101,7 +102,8 @@ var ExtensionButton = function ExtensionButton(props) {
     onClick: onClick,
     tooltipContent: item.tooltip,
     tooltipStyle: item.tooltipStyle,
-    disabled: item.disabled
+    disabled: item.disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }, item.label);
 };
 export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
@@ -117,7 +119,8 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     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 = useState([]),
@@ -175,7 +178,9 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
   // 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.createElement(Separator, null));
+    children.push( /*#__PURE__*/React.createElement(Separator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }));
   }
   var isNestedTable = fg('platform_editor_use_nested_table_pm_nodes') && isSelectionTableNestedInTable(editorView.state);
 
@@ -210,7 +215,8 @@ export var ExtensionsPlaceholder = function 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, {
@@ -218,15 +224,20 @@ export var ExtensionsPlaceholder = function 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/esm/ui/ScrollButtons.js

@@ -30,7 +30,8 @@ export var 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 = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -148,7 +149,8 @@ export var ScrollButtons = function ScrollButtons(_ref) {
       size: "small"
     }),
     onClick: scrollLeft,
-    disabled: !canScrollLeft || disabled
+    disabled: !canScrollLeft || disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }), jsx(Button, {
     title: intl.formatMessage(messages.floatingToolbarScrollRight),
     icon: jsx(RightIcon, {
@@ -156,6 +158,7 @@ export var ScrollButtons = function ScrollButtons(_ref) {
       size: "small"
     }),
     onClick: scrollRight,
-    disabled: !canScrollRight || disabled
+    disabled: !canScrollRight || disabled,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   })) : null;
 };

package/dist/esm/ui/Toolbar.js

@@ -27,7 +27,6 @@ import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
@@ -38,7 +37,7 @@ import { Input } from './Input';
 import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
-export function groupItems(items) {
+export function groupItems(items, areAnyNewToolbarFlagsEnabled) {
   var groupItems = items.reduce(function (accumulator, item, i) {
     var finalOutput = accumulator.finalOutput,
       buttonGroup = accumulator.buttonGroup;
@@ -60,7 +59,7 @@ export function groupItems(items) {
       } else {
         finalOutput.push(item);
       }
-    } else if (item.type === 'separator' && areToolbarFlagsEnabled()) {
+    } else if (item.type === 'separator' && areAnyNewToolbarFlagsEnabled) {
       var _items;
       var isLeadingSeparator = i === 0;
       var isTrailingSeparator = i === items.length - 1;
@@ -94,7 +93,7 @@ var ToolbarItems = /*#__PURE__*/React.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 = areToolbarFlagsEnabled();
+  var areAnyNewToolbarFlagsEnabled = 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) {
@@ -172,7 +171,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           ariaLabel: 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 jsx(Input, {
@@ -194,7 +194,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         }
       case 'overflow-dropdown':
         return jsx(Dropdown, {
-          alignX: expValEqualsNoExposure('platform_editor_toolbar_aifc', 'isEnabled', true) ? 'right' : undefined,
+          alignX: areAnyNewToolbarFlagsEnabled ? 'right' : undefined,
           key: idx,
           title: intl.formatMessage(commonMessages.viewMore),
           icon: jsx(ShowMoreHorizontalIcon, {
@@ -216,7 +216,8 @@ var ToolbarItems = /*#__PURE__*/React.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;
@@ -250,7 +251,8 @@ var ToolbarItems = /*#__PURE__*/React.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') {
@@ -339,24 +341,27 @@ var ToolbarItems = /*#__PURE__*/React.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 ? jsx(Separator, {
             key: idx,
-            fullHeight: true
+            fullHeight: true,
+            areAnyNewToolbarFlagsEnabled: true
           }) : null;
         }
         return jsx(Separator, {
           key: idx,
-          fullHeight: item.fullHeight
+          fullHeight: item.fullHeight,
+          areAnyNewToolbarFlagsEnabled: false
         });
     }
   };
   var groupedItems = groupItems(items.filter(function (item) {
     return !item.hidden;
-  }));
+  }), areAnyNewToolbarFlagsEnabled);
   return jsx(ButtonGroup, {
     testId: "editor-floating-toolbar-items"
   }, groupedItems.map(function (element, index) {
@@ -366,7 +371,7 @@ var ToolbarItems = /*#__PURE__*/React.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"
@@ -401,7 +406,7 @@ var buttonGroupStylesNew = 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 css({
     backgroundColor: "var(--ds-surface-overlay, white)",
     borderRadius: "var(--ds-radius-small, 3px)",
@@ -432,7 +437,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
-  areToolbarFlagsEnabled() ?
+  areAnyNewToolbarFlagsEnabled ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -455,7 +460,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
-  areToolbarFlagsEnabled() ?
+  areAnyNewToolbarFlagsEnabled ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   css({
     minHeight: "var(--ds-space-500, 40px)"
@@ -466,7 +471,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 css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   scrollable ?
@@ -507,7 +513,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
-  areToolbarFlagsEnabled() ?
+  areAnyNewToolbarFlagsEnabled ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -646,6 +652,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,
@@ -653,7 +660,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl = _this$props2.intl,
         scrollable = _this$props2.scrollable,
         mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
-      var isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
+      var areAnyNewToolbarFlagsEnabled = 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;
       }
@@ -677,7 +684,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       }, 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(messages.floatingToolbarAriaLabel),
         role: "toolbar",
@@ -685,11 +692,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
       }, jsx(Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250
-      }), scrollable && isNewEditorToolbarEnabled && jsx(ScrollButton, {
+      }), scrollable && areAnyNewToolbarFlagsEnabled && jsx(ScrollButton, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
@@ -701,6 +708,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
@@ -712,7 +720,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted
-      }))), scrollable && (isNewEditorToolbarEnabled ? jsx(ScrollButton, {
+      }))), scrollable && (areAnyNewToolbarFlagsEnabled ? jsx(ScrollButton, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
@@ -722,7 +730,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
-        disabled: this.state.scrollDisabled
+        disabled: this.state.scrollDisabled,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }))), jsx("div", {
         ref: this.mountRef
       })));

package/dist/types/floatingToolbarPluginType.d.ts

@@ -9,6 +9,7 @@ import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -39,7 +40,8 @@ export type FloatingToolbarPluginDependencies = [
     OptionalPlugin<EmojiPlugin>,
     OptionalPlugin<UserIntentPlugin>,
     OptionalPlugin<InteractionPlugin>,
-    OptionalPlugin<AnalyticsPlugin>
+    OptionalPlugin<AnalyticsPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
     actions: {