@atlaskit/editor-plugin-card 8.0.0 → 8.1.0

package/dist/es2019/ui/LinkToolbarAppearance.js

@@ -27,7 +27,8 @@ export class LinkToolbarAppearance extends React.Component {
         allowBlockCards = true,
         editorAnalyticsApi,
         showUpgradeDiscoverability = true,
-        isDatasourceView
+        isDatasourceView,
+        areAnyNewToolbarFlagsEnabled
       } = this.props;
       const preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, 'web');
       const defaultCommand = () => false;
@@ -88,7 +89,7 @@ export class LinkToolbarAppearance extends React.Component {
       }
       const LinkToolbarButtons = /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
         key: "link-toolbar-button-group",
-        options: options.map(option => getButtonGroupOption(intl, dispatchCommand, {
+        options: options.map(option => getButtonGroupOption(intl, areAnyNewToolbarFlagsEnabled, dispatchCommand, {
           ...option,
           onClick: commandWithMetadata(option.onClick, {
             inputMethod: INPUT_METHOD.FLOATING_TB

package/dist/es2019/ui/LinkToolbarAppearanceDropdown.js

@@ -126,7 +126,8 @@ export const getLinkAppearanceDropdown = ({
   editorAnalyticsApi,
   showUpgradeDiscoverability = true,
   isDatasourceView,
-  settingsConfig
+  settingsConfig,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const alignmentItemOptions = {
     render: props => {
@@ -142,7 +143,8 @@ export const getLinkAppearanceDropdown = ({
         isDatasourceView: isDatasourceView,
         allowDatasource: allowDatasource,
         dispatchCommand: props.dispatchCommand,
-        settingsConfig: settingsConfig
+        settingsConfig: settingsConfig,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       });
     },
     width: 200,

package/dist/es2019/ui/OpenPreviewButton/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { linkMessages } from '@atlaskit/editor-common/messages';
-import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import PanelRightIcon from '@atlaskit/icon/core/panel-right';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
@@ -8,7 +7,8 @@ import { Inline, Box, Flex } from '@atlaskit/primitives/compiled';
 import { getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
 export const OpenPreviewPanelToolbarButton = ({
   node,
-  intl
+  intl,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const {
     store,
@@ -35,13 +35,13 @@ export const OpenPreviewPanelToolbarButton = ({
       }
     };
     const title = intl.formatMessage(linkMessages.openPreviewPanel);
-    const icon = areToolbarFlagsEnabled() ? /*#__PURE__*/React.createElement(PanelRightIcon, {
+    const icon = areAnyNewToolbarFlagsEnabled ? /*#__PURE__*/React.createElement(PanelRightIcon, {
       label: "",
       spacing: "spacious"
     }) :
     /*#__PURE__*/
     // This is a hack required for Jira until areToolbarFlagsEnabled are enabled to ensure the icon has padding
-    // Padding is removed when areToolbarFlagsEnabed for a button with icon only in platform/packages/editor/editor-common/src/ui/FloatingToolbar/Button.tsx
+    // Padding is removed when areToolbarFlagsEnabled for a button with icon only in platform/packages/editor/editor-common/src/ui/FloatingToolbar/Button.tsx
     React.createElement(Inline, {
       as: "span",
       space: "space.050",
@@ -65,7 +65,8 @@ export const OpenPreviewPanelToolbarButton = ({
         testId: "open-preview-panel-floating-toolbar-button",
         onClick: handleOpenGlancePanelClick,
         icon: icon,
-        title: title
+        title: title,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }));
     }
   }

package/dist/es2019/ui/toolbar.js

@@ -169,8 +169,8 @@ const unlinkCard = (node, state, editorAnalyticsApi) => {
   }
   return () => false;
 };
-const buildAlignmentOptions = (state, intl, widthPluginDependencyApi, analyticsApi, cardOptions) => {
-  if (areToolbarFlagsEnabled()) {
+const buildAlignmentOptions = (state, intl, widthPluginDependencyApi, analyticsApi, cardOptions, areAnyNewToolbarFlagsEnabled) => {
+  if (areAnyNewToolbarFlagsEnabled) {
     return buildLayoutDropdown(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, analyticsApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
   }
   return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, analyticsApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
@@ -213,7 +213,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       title: title
     };
   }
-  const isNewEditorToolbarDisabled = !areToolbarFlagsEnabled();
+  const areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const currentAppearance = appearanceForNodeType(node.type);
   const {
     hoverDecoration
@@ -271,7 +271,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
         onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, true),
-        currentAppearance: currentAppearance
+        currentAppearance: currentAppearance,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       })
     }] : [{
       id: 'editor.link.edit',
@@ -309,7 +310,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
         onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, true),
-        currentAppearance: currentAppearance
+        currentAppearance: currentAppearance,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       })
     }] : [{
       id: 'editor.link.edit',
@@ -329,10 +331,11 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       render: () => /*#__PURE__*/React.createElement(OpenPreviewPanelToolbarButton, {
         node: node,
         intl: intl,
-        editorAnalyticsApi: editorAnalyticsApi
+        editorAnalyticsApi: editorAnalyticsApi,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       })
     }] : [];
-    const toolbarItems = isNewEditorToolbarDisabled ? [...editItems, ...commentItems, ...openPreviewPanelItems, {
+    const toolbarItems = areAllNewToolbarFlagsDisabled ? [...editItems, ...commentItems, ...openPreviewPanelItems, {
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
@@ -345,7 +348,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       target: '_blank'
     }, {
       type: 'separator'
-    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
+    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled), {
       type: 'copy-button',
       items: [{
         state,
@@ -369,10 +372,10 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       title: intl.formatMessage(commonMessages.remove),
       onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-    }] : [...openPreviewPanelItems, ...editButtonItems, ...(fg('platform_editor_controls_patch_15') ? [...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
+    }] : [...openPreviewPanelItems, ...editButtonItems, ...(fg('platform_editor_controls_patch_15') ? [...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled), {
       type: 'separator',
       fullHeight: true
-    }] : getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), {
+    }] : getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), {
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
@@ -389,8 +392,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     }, commentItems[0]] : commentItems)];
     if (currentAppearance === 'embed') {
       var _pluginInjectionApi$a5;
-      const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions, cardOptions);
-      if (alignmentOptions.length && isNewEditorToolbarDisabled) {
+      const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions, cardOptions, !areAllNewToolbarFlagsDisabled);
+      if (alignmentOptions.length && areAllNewToolbarFlagsDisabled) {
         alignmentOptions.push({
           type: 'separator'
         });
@@ -407,7 +410,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     // For url appearance, please see HyperlinkToolbarAppearanceProps
     if (currentAppearance) {
       const showDatasourceAppearance = allowDatasource && url;
-      toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), isNewEditorToolbarDisabled ? {
+      toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), areAllNewToolbarFlagsDisabled ? {
         type: 'custom',
         fallback: [],
         render: editorView => /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
@@ -420,7 +423,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
           allowEmbeds: allowEmbeds,
           allowBlockCards: allowBlockCards,
           editorAnalyticsApi: editorAnalyticsApi,
-          showUpgradeDiscoverability: showUpgradeDiscoverability
+          showUpgradeDiscoverability: showUpgradeDiscoverability,
+          areAnyNewToolbarFlagsEnabled: false
         })
       } : getLinkAppearanceDropdown({
         url,
@@ -433,8 +437,9 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         allowDatasource: cardOptions.allowDatasource,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
-        isDatasourceView: isDatasource
-      }), ...(showDatasourceAppearance && isNewEditorToolbarDisabled ? [{
+        isDatasourceView: isDatasource,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
+      }), ...(showDatasourceAppearance && areAllNewToolbarFlagsDisabled ? [{
         type: 'custom',
         fallback: [],
         render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
@@ -443,13 +448,14 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
           url: url,
           editorView: editorView,
           editorState: state,
-          inputMethod: INPUT_METHOD.FLOATING_TB
+          inputMethod: INPUT_METHOD.FLOATING_TB,
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
         })
-      }] : []), ...(!isNewEditorToolbarDisabled ? [] : [{
+      }] : []), ...(!areAllNewToolbarFlagsDisabled ? [] : [{
         type: 'separator'
       }]));
     }
-    if (!isNewEditorToolbarDisabled) {
+    if (!areAllNewToolbarFlagsDisabled) {
       const hoverDecorationProps = (nodeType, className) => ({
         onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
@@ -491,7 +497,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     return toolbarItems;
   }
 };
-const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi) => {
+const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi, areAnyNewToolbarFlagsEnabled) => {
   return node.type === inlineCard ? [{
     id: 'editor.link.unlink',
     focusEditoronEnter: true,
@@ -500,7 +506,7 @@ const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi)
     icon: LinkBrokenIcon,
     iconFallback: UnlinkIcon,
     onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
-  }, ...(areToolbarFlagsEnabled() ? [] : [{
+  }, ...(areAnyNewToolbarFlagsEnabled ? [] : [{
     type: 'separator'
   }])] : [];
 };
@@ -519,7 +525,7 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
 const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) => {
   var _node$attrs2;
   const toolbarItems = [];
-  const isNewEditorToolbarDisabled = !areToolbarFlagsEnabled();
+  const areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const canShowAppearanceSwitch = () => {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
@@ -536,7 +542,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     const {
       url
     } = metadata;
-    if (isNewEditorToolbarDisabled) {
+    if (areAllNewToolbarFlagsDisabled) {
       toolbarItems.push({
         type: 'custom',
         fallback: [],
@@ -552,7 +558,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
             allowBlockCards: allowBlockCards,
             editorAnalyticsApi: editorAnalyticsApi,
             showUpgradeDiscoverability: showUpgradeDiscoverability,
-            isDatasourceView: true
+            isDatasourceView: true,
+            areAnyNewToolbarFlagsEnabled: false
           });
         }
       }, {
@@ -565,7 +572,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
           editorView: editorView,
           editorState: state,
           selected: true,
-          inputMethod: INPUT_METHOD.FLOATING_TB
+          inputMethod: INPUT_METHOD.FLOATING_TB,
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
         })
       }, {
         type: 'separator'
@@ -582,7 +590,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
         allowDatasource: cardOptions.allowDatasource,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
-        isDatasourceView: true
+        isDatasourceView: true,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       }), {
         type: 'separator'
       });
@@ -601,7 +610,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, false),
-      currentAppearance: "datasource"
+      currentAppearance: "datasource",
+      areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
     })
   });
   if (node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.url) {
@@ -617,13 +627,13 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       href: node.attrs.url,
       target: '_blank'
     });
-    if (isNewEditorToolbarDisabled) {
+    if (areAllNewToolbarFlagsDisabled) {
       toolbarItems.push({
         type: 'separator'
       });
     }
   }
-  if (isNewEditorToolbarDisabled) {
+  if (areAllNewToolbarFlagsDisabled) {
     toolbarItems.push({
       type: 'copy-button',
       supportsViewMode: true,
@@ -711,6 +721,7 @@ export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDis
 };
 export const getStartingToolbarItems = (options, api) => {
   return (intl, link, onEditLink, metadata, state) => {
+    const areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
     const editLinkItem = options.allowDatasource ? [{
       type: 'custom',
       fallback: [],
@@ -726,7 +737,8 @@ export const getStartingToolbarItems = (options, api) => {
           url: link,
           editorView: editorView,
           onLinkEditClick: onEditLink,
-          currentAppearance: "url"
+          currentAppearance: "url",
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
         });
       }
     }] : [{
@@ -741,7 +753,7 @@ export const getStartingToolbarItems = (options, api) => {
     }, {
       type: 'separator'
     }];
-    if (areToolbarFlagsEnabled()) {
+    if (!areAllNewToolbarFlagsDisabled) {
       var _api$analytics2, _api$analytics3;
       const hyperlinkAppearance = [getCustomHyperlinkAppearanceDropdown({
         url: link,
@@ -800,7 +812,7 @@ export const getEndingToolbarItems = (options, api) => (intl, link) => {
    * Require either provider to be supplied (controls link preferences)
    * Or explicit user preferences config in order to enable button
    */
-  if ((options.provider || options.userPreferencesLink) && !areToolbarFlagsEnabled()) {
+  if ((options.provider || options.userPreferencesLink) && !areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
     var _api$analytics5;
     return [{
       type: 'separator'

package/dist/esm/nodeviews/toDOM-fixes/blockCard.js

@@ -39,7 +39,7 @@ export var blockCardSpecWithFixedToDOM = function blockCardSpecWithFixedToDOM()
           display: 'inline',
           boxDecorationBreak: 'clone',
           WebkitBoxDecorationBreak: 'clone',
-          borderRadius: "var(--ds-border-radius-100, 4px)",
+          borderRadius: "var(--ds-radius-small, 4px)",
           color: "var(--ds-link, ".concat(B400, ")"),
           lineHeight: '22px',
           WebkitTransition: '0.1s all ease-in-out',

package/dist/esm/nodeviews/toDOM-fixes/embedCard.js

@@ -97,7 +97,7 @@ export var embedCardSpecWithFixedToDOM = function embedCardSpecWithFixedToDOM()
           marginLeft: "var(--ds-space-negative-025, -2px)",
           display: 'inline',
           boxDecorationBreak: 'clone',
-          borderRadius: "var(--ds-border-radius-100, 4px)",
+          borderRadius: "var(--ds-radius-small, 4px)",
           color: "var(--ds-link, ".concat(B400, ")"),
           lineHeight: '22px',
           WebkitTransition: '0.1s all ease-in-out',

package/dist/esm/nodeviews/toDOM-fixes/inlineCard.js

@@ -30,7 +30,7 @@ export var inlineCardSpecWithFixedToDOM = function inlineCardSpecWithFixedToDOM(
           display: 'inline',
           boxDecorationBreak: 'clone',
           WebkitBoxDecorationBreak: 'clone',
-          borderRadius: "var(--ds-border-radius-100, 4px)",
+          borderRadius: "var(--ds-radius-small, 4px)",
           color: "var(--ds-link, ".concat(B400, ")"),
           lineHeight: '22px',
           WebkitTransition: '0.1s all ease-in-out',

package/dist/esm/ui/DatasourceAppearanceButton.js

@@ -27,7 +27,8 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     editorView = _ref.editorView,
     editorState = _ref.editorState,
     selected = _ref.selected,
-    inputMethod = _ref.inputMethod;
+    inputMethod = _ref.inputMethod,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var _useFetchDatasourceIn = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
@@ -94,7 +95,8 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     }),
     selected: selected,
     onClick: onChangeAppearance,
-    testId: 'card-datasource-appearance-button'
+    testId: 'card-datasource-appearance-button',
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }));
 };
 export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref2) {
@@ -104,7 +106,8 @@ export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref
     editorView = _ref2.editorView,
     editorState = _ref2.editorState,
     selected = _ref2.selected,
-    inputMethod = _ref2.inputMethod;
+    inputMethod = _ref2.inputMethod,
+    areAnyNewToolbarFlagsEnabled = _ref2.areAnyNewToolbarFlagsEnabled;
   var cardContext = useSmartLinkContext();
   return jsx(DatasourceAppearanceButtonWithCardContext, {
     url: url,
@@ -114,6 +117,7 @@ export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref
     editorState: editorState,
     cardContext: cardContext,
     selected: selected,
-    inputMethod: inputMethod
+    inputMethod: inputMethod,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };

package/dist/esm/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -9,7 +9,6 @@ import { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
-import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import EditIcon from '@atlaskit/icon/core/edit';
@@ -29,7 +28,8 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
     editorView = _ref.editorView,
     extensionKey = _ref.extensionKey,
     onLinkEditClick = _ref.onLinkEditClick,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -55,11 +55,10 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
       focusEditorView(editorView);
     }
   }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
-  var isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
-  var icon = isNewEditorToolbarEnabled ? jsx(EditIcon, {
+  var icon = areAnyNewToolbarFlagsEnabled ? jsx(EditIcon, {
     label: ""
   }) : undefined;
-  var tooltipContent = isNewEditorToolbarEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
+  var tooltipContent = areAnyNewToolbarFlagsEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
   switch (editVariant) {
     case 'edit-link':
       {
@@ -69,11 +68,14 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           testId: "edit-link",
           onClick: onEditLink,
           icon: icon,
-          tooltipContent: tooltipContent
-        }, !isNewEditorToolbarEnabled && jsx(FormattedMessage
+          tooltipContent: tooltipContent,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+        }, !areAnyNewToolbarFlagsEnabled && jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editLink)), !isNewEditorToolbarEnabled && jsx(Separator, null));
+        , linkToolbarMessages.editLink)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-datasource':
       {
@@ -82,11 +84,14 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, jsx(Button, {
           testId: "edit-datasource",
           tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
-          onClick: onEditDatasource
+          onClick: onEditDatasource,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editDatasourceStandalone)), !isNewEditorToolbarEnabled && jsx(Separator, null));
+        , linkToolbarMessages.editDatasourceStandalone)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-dropdown':
       {
@@ -103,11 +108,14 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           onClick: toggleOpen,
           selected: isOpen,
           disabled: false,
-          ariaHasPopup: true
+          ariaHasPopup: true,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , messages.editDropdownTriggerTitle)), !isNewEditorToolbarEnabled && jsx(Separator, null));
+        , messages.editDropdownTriggerTitle)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
         return jsx(Flex, {
           ref: containerRef
         }, jsx(UiDropdown, {

package/dist/esm/ui/EditToolbarButton/index.js

@@ -34,7 +34,8 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
     editorView = props.editorView,
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
+    url = props.url,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var _useFetchDatasourceIn = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
@@ -94,11 +95,14 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           gap: "space.050"
         }, jsx(Button, {
           testId: "edit-link",
-          onClick: onEditLink
+          onClick: onEditLink,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editLink)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, null));
+        , linkToolbarMessages.editLink)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-datasource':
       {
@@ -107,11 +111,14 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
         }, jsx(Button, {
           testId: "edit-datasource",
           tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
-          onClick: onEditDatasource
+          onClick: onEditDatasource,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editDatasourceStandalone)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, null));
+        , linkToolbarMessages.editDatasourceStandalone)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-dropdown':
       {
@@ -128,11 +135,14 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           onClick: toggleOpen,
           selected: isOpen,
           disabled: false,
-          ariaHasPopup: true
+          ariaHasPopup: true,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , messages.editDropdownTriggerTitle)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, null));
+        , messages.editDropdownTriggerTitle)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
         return jsx(Flex, {
           ref: containerRef
         }, jsx(UiDropdown, {
@@ -174,7 +184,8 @@ var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
     editorView = props.editorView,
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
+    url = props.url,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var _useFetchDatasourceIn2 = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
@@ -202,7 +213,8 @@ var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
     editorView: editorView,
     extensionKey: extensionKey,
     onLinkEditClick: onLinkEditClick,
-    intl: intl
+    intl: intl,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasourceId(props) {
@@ -212,7 +224,8 @@ var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasource
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
     datasourceId = props.datasourceId,
-    node = props.node;
+    node = props.node,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var fetchData = useMemo(function () {
     try {
       var _attrs$datasource$vie;
@@ -250,7 +263,8 @@ var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasource
     editorView: editorView,
     extensionKey: extensionKey,
     onLinkEditClick: onLinkEditClick,
-    intl: intl
+    intl: intl,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 export var EditToolbarButton = function EditToolbarButton(props) {
@@ -260,7 +274,8 @@ export var EditToolbarButton = function EditToolbarButton(props) {
     editorView = props.editorView,
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
+    url = props.url,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var cardContext = useSmartLinkContext();
   if (props.url) {
     return jsx(EditToolbarButtonWithUrl, {
@@ -271,7 +286,8 @@ export var EditToolbarButton = function EditToolbarButton(props) {
       editorView: editorView,
       cardContext: cardContext,
       onLinkEditClick: onLinkEditClick,
-      currentAppearance: currentAppearance
+      currentAppearance: currentAppearance,
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     });
   }
   if (props.datasourceId && props.node) {
@@ -282,7 +298,8 @@ export var EditToolbarButton = function EditToolbarButton(props) {
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       onLinkEditClick: onLinkEditClick,
-      currentAppearance: currentAppearance
+      currentAppearance: currentAppearance,
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     });
   }
   return jsx(EditToolbarButtonWithCardContext, {
@@ -293,6 +310,7 @@ export var EditToolbarButton = function EditToolbarButton(props) {
     editorView: editorView,
     cardContext: cardContext,
     onLinkEditClick: onLinkEditClick,
-    currentAppearance: currentAppearance
+    currentAppearance: currentAppearance,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };