@atlaskit/editor-plugin-synced-block 10.4.1 → 10.4.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.4.3
+
+### Patch Changes
+
+- [`8b49fc1fd582e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b49fc1fd582e) -
+  Show the number of synced block references in the floating toolbar when the sync block activation
+  experiment is enabled.
+- Updated dependencies
+
+## 10.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.4.1
 
 ### Patch Changes

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.processReferenceData = exports.SyncedLocationDropdown = void 0;
+exports.processReferenceData = exports.SyncedLocationDropdownWithCount = exports.SyncedLocationDropdown = void 0;
 require("./SyncedLocationDropdown.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -46,7 +46,7 @@ var _excluded = ["triggerRef"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // eslint-disable-next-line import/order -- CI requires icon-lab imports before core icon imports.
 var fadeIn = null;
 var headingStyles = null;
 var dropdownItemStyles = null;
@@ -311,24 +311,24 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
     localId = _ref4.localId,
     api = _ref4.api,
     floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
-  if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_13')) {
-    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+  if (!(0, _platformFeatureFlags.fg)('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
       syncBlockStore: syncBlockStore,
       resourceId: resourceId,
       intl: intl,
       isSource: isSource,
       localId: localId,
-      api: api,
-      floatingToolbarRenderContext: floatingToolbarRenderContext
+      api: api
     });
   }
-  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+  return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
     intl: intl,
     isSource: isSource,
     localId: localId,
-    api: api
+    api: api,
+    floatingToolbarRenderContext: floatingToolbarRenderContext
   });
 };
 var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref5) {
@@ -339,8 +339,7 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     localId = _ref5.localId,
     api = _ref5.api,
     floatingToolbarRenderContext = _ref5.floatingToolbarRenderContext;
-  var formatMessage = intl.formatMessage;
-  var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
+  var triggerTitle = intl.formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -409,8 +408,7 @@ var LegacySyncedLocationDropdown = function LegacySyncedLocationDropdown(_ref6)
     isSource = _ref6.isSource,
     localId = _ref6.localId,
     api = _ref6.api;
-  var formatMessage = intl.formatMessage;
-  var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
+  var triggerTitle = intl.formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isOpen = _useState4[0],
@@ -452,26 +450,106 @@ var LegacySyncedLocationDropdown = function LegacySyncedLocationDropdown(_ref6)
     }
   }, content);
 };
-var DropdownContent = function DropdownContent(_ref9) {
+var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref9) {
   var syncBlockStore = _ref9.syncBlockStore,
     resourceId = _ref9.resourceId,
     intl = _ref9.intl,
     isSource = _ref9.isSource,
     localId = _ref9.localId,
-    api = _ref9.api;
-  var formatMessage = intl.formatMessage;
-  var _useState5 = (0, _react.useState)('none'),
+    api = _ref9.api,
+    floatingToolbarRenderContext = _ref9.floatingToolbarRenderContext;
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    fetchStatus = _useState6[0],
-    setFetchStatus = _useState6[1];
-  var _useState7 = (0, _react.useState)([]),
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
+  var _useReferenceData = useReferenceData({
+      intl: intl,
+      isSource: isSource,
+      localId: localId,
+      resourceId: resourceId,
+      syncBlockStore: syncBlockStore
+    }),
+    fetchStatus = _useReferenceData.fetchStatus,
+    referenceData = _useReferenceData.referenceData;
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
+    resourceId: resourceId,
+    intl: intl,
+    api: api,
+    fetchStatus: fetchStatus,
+    referenceData: referenceData
+  }) : null;
+  var toggleOpen = (0, _react.useCallback)(function () {
+    setIsOpen(function (currentIsOpen) {
+      return !currentIsOpen;
+    });
+  }, []);
+  var closeDropdown = (0, _react.useCallback)(function () {
+    setIsOpen(false);
+  }, []);
+  var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  (0, _react.useEffect)(function () {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(true);
+    return function () {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  var trigger = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, {
+      areAnyNewToolbarFlagsEnabled: true,
+      testId: _types.SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSyncedLocationsTrigger,
+      selected: isOpen,
+      iconAfter: /*#__PURE__*/React.createElement(_chevronDown.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      }),
+      onClick: toggleOpen,
+      ariaHasPopup: true
+    }, /*#__PURE__*/React.createElement(SyncedLocationTriggerContent, {
+      intl: intl,
+      fetchStatus: fetchStatus,
+      referenceData: referenceData
+    }));
+  }, [fetchStatus, intl, isOpen, referenceData, toggleOpen]);
+  return /*#__PURE__*/React.createElement(_uiMenu.DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
+var DropdownContent = function DropdownContent(_ref0) {
+  var syncBlockStore = _ref0.syncBlockStore,
+    resourceId = _ref0.resourceId,
+    intl = _ref0.intl,
+    isSource = _ref0.isSource,
+    localId = _ref0.localId,
+    api = _ref0.api;
+  var _useState7 = (0, _react.useState)('none'),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    referenceData = _useState8[0],
-    setReferenceData = _useState8[1];
+    fetchStatus = _useState8[0],
+    setFetchStatus = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    referenceData = _useState0[0],
+    setReferenceData = _useState0[1];
   (0, _react.useEffect)(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref0 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _ref1 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var response;
         return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -496,11 +574,128 @@ var DropdownContent = function DropdownContent(_ref9) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref0.apply(this, arguments);
+        return _ref1.apply(this, arguments);
       };
     }();
-    getReferenceData();
+    void getReferenceData();
   }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  return /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
+    resourceId: resourceId,
+    intl: intl,
+    api: api,
+    fetchStatus: fetchStatus,
+    referenceData: referenceData
+  });
+};
+var useReferenceData = function useReferenceData(_ref10) {
+  var syncBlockStore = _ref10.syncBlockStore,
+    resourceId = _ref10.resourceId,
+    intl = _ref10.intl,
+    isSource = _ref10.isSource,
+    localId = _ref10.localId;
+  var _useState1 = (0, _react.useState)({
+      fetchStatus: 'loading',
+      referenceData: []
+    }),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    state = _useState10[0],
+    setState = _useState10[1];
+  (0, _react.useEffect)(function () {
+    var isCurrentRequest = true;
+    setState({
+      fetchStatus: 'loading',
+      referenceData: []
+    });
+    var getReferenceData = /*#__PURE__*/function () {
+      var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var response;
+        return _regenerator.default.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 1;
+              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+            case 1:
+              response = _context2.sent;
+              if (isCurrentRequest) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 2:
+              if (!response.error) {
+                _context2.next = 3;
+                break;
+              }
+              setState({
+                fetchStatus: 'error',
+                referenceData: []
+              });
+              return _context2.abrupt("return");
+            case 3:
+              setState({
+                fetchStatus: 'success',
+                referenceData: processReferenceData(response.references, intl)
+              });
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function getReferenceData() {
+        return _ref11.apply(this, arguments);
+      };
+    }();
+    void getReferenceData();
+    return function () {
+      isCurrentRequest = false;
+    };
+  }, [syncBlockStore, resourceId, intl, isSource, localId]);
+  return {
+    fetchStatus: state.fetchStatus,
+    referenceData: state.referenceData
+  };
+};
+var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12) {
+  var intl = _ref12.intl,
+    fetchStatus = _ref12.fetchStatus,
+    referenceData = _ref12.referenceData;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
+  var referenceCount = (0, _react.useMemo)(function () {
+    return referenceData.filter(function (_ref13) {
+      var isSource = _ref13.isSource;
+      return !isSource;
+    }).length;
+  }, [referenceData]);
+  switch (fetchStatus) {
+    case 'loading':
+      return /*#__PURE__*/React.createElement(_compiled.Inline, {
+        alignBlock: "center",
+        space: "space.050"
+      }, triggerTitle, /*#__PURE__*/React.createElement(_spinner.default, {
+        size: "small",
+        label: formatMessage(_messages.syncBlockMessages.syncedLocationDropdownLoading)
+      }));
+    case 'success':
+      {
+        var count = referenceCount === 0 ? formatMessage(_messages.syncBlockMessages.syncedLocationDropdownNone) : referenceCount > 99 ? '99+' : intl.formatNumber(referenceCount);
+        return formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleWithCount, {
+          count: count
+        });
+      }
+    case 'none':
+    case 'error':
+      return triggerTitle;
+  }
+};
+var DropdownContentWithReferenceData = function DropdownContentWithReferenceData(_ref14) {
+  var resourceId = _ref14.resourceId,
+    intl = _ref14.intl,
+    api = _ref14.api,
+    fetchStatus = _ref14.fetchStatus,
+    referenceData = _ref14.referenceData;
+  var formatMessage = intl.formatMessage;
   var handleLocationClick = function handleLocationClick() {
     var _api$analytics;
     api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
@@ -516,7 +711,9 @@ var DropdownContent = function DropdownContent(_ref9) {
   var content = function content() {
     switch (fetchStatus) {
       case 'loading':
-        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+        return /*#__PURE__*/React.createElement(LoadingScreen, {
+          formatMessage: formatMessage
+        });
       case 'error':
         return /*#__PURE__*/React.createElement(ErrorScreen, {
           formatMessage: formatMessage
@@ -571,11 +768,14 @@ var DropdownContent = function DropdownContent(_ref9) {
     xcss: (0, _react2.cx)(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
   }, content());
 };
-var LoadingScreen = function LoadingScreen() {
-  return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_spinner.default, null));
+var LoadingScreen = function LoadingScreen(_ref15) {
+  var formatMessage = _ref15.formatMessage;
+  return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_spinner.default, {
+    label: formatMessage(_messages.syncBlockMessages.syncedLocationDropdownLoading)
+  }));
 };
-var ErrorScreen = function ErrorScreen(_ref1) {
-  var formatMessage = _ref1.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref16) {
+  var formatMessage = _ref16.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -591,8 +791,8 @@ var ErrorScreen = function ErrorScreen(_ref1) {
     size: "medium"
   }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref10) {
-  var formatMessage = _ref10.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref17) {
+  var formatMessage = _ref17.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Stack, {
     xcss: styles.noResultsContainer,
     space: "space.100",

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

@@ -96,6 +96,18 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
         type: 'custom',
         fallback: [],
         render: function render(_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) {
+          if (isSyncBlockActivationEnabled) {
+            return /*#__PURE__*/_react.default.createElement(_SyncedLocationDropdown.SyncedLocationDropdownWithCount, {
+              key: "".concat(resourceId, ":").concat(localId, ":").concat(isBodiedSyncBlock),
+              syncBlockStore: syncBlockStore,
+              resourceId: resourceId,
+              localId: localId,
+              intl: intl,
+              isSource: isBodiedSyncBlock,
+              api: api,
+              floatingToolbarRenderContext: floatingToolbarRenderContext
+            });
+          }
           return /*#__PURE__*/_react.default.createElement(_SyncedLocationDropdown.SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -13,6 +13,7 @@ import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer } from '@atlaskit/editor-common/ui-menu';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
+// eslint-disable-next-line import/order -- CI requires icon-lab imports before core icon imports.
 import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
 import BugIcon from '@atlaskit/icon/core/bug';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
@@ -290,24 +291,24 @@ export const SyncedLocationDropdown = ({
   api,
   floatingToolbarRenderContext
 }) => {
-  if (fg('platform_synced_block_patch_13')) {
-    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+  if (!fg('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
       syncBlockStore: syncBlockStore,
       resourceId: resourceId,
       intl: intl,
       isSource: isSource,
       localId: localId,
-      api: api,
-      floatingToolbarRenderContext: floatingToolbarRenderContext
+      api: api
     });
   }
-  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+  return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
     intl: intl,
     isSource: isSource,
     localId: localId,
-    api: api
+    api: api,
+    floatingToolbarRenderContext: floatingToolbarRenderContext
   });
 };
 const EditorPositionedSyncedLocationDropdown = ({
@@ -319,10 +320,7 @@ const EditorPositionedSyncedLocationDropdown = ({
   api,
   floatingToolbarRenderContext
 }) => {
-  const {
-    formatMessage
-  } = intl;
-  const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  const triggerTitle = intl.formatMessage(messages.syncedLocationDropdownTitle);
   const [isOpen, setIsOpen] = useState(false);
   const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
     syncBlockStore: syncBlockStore,
@@ -385,10 +383,7 @@ const LegacySyncedLocationDropdown = ({
   localId,
   api
 }) => {
-  const {
-    formatMessage
-  } = intl;
-  const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  const triggerTitle = intl.formatMessage(messages.syncedLocationDropdownTitle);
   const [isOpen, setIsOpen] = useState(false);
   const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
     syncBlockStore: syncBlockStore,
@@ -425,6 +420,82 @@ const LegacySyncedLocationDropdown = ({
     }, triggerProps), triggerTitle)
   }, content);
 };
+export const SyncedLocationDropdownWithCount = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId,
+  api,
+  floatingToolbarRenderContext
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    fetchStatus,
+    referenceData
+  } = useReferenceData({
+    intl,
+    isSource,
+    localId,
+    resourceId,
+    syncBlockStore
+  });
+  const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
+    resourceId: resourceId,
+    intl: intl,
+    api: api,
+    fetchStatus: fetchStatus,
+    referenceData: referenceData
+  }) : null;
+  const toggleOpen = useCallback(() => {
+    setIsOpen(currentIsOpen => !currentIsOpen);
+  }, []);
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 ? void 0 : setDisableParentScroll(true);
+    return () => {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 ? void 0 : setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  const trigger = useMemo(() => /*#__PURE__*/React.createElement(Button, {
+    areAnyNewToolbarFlagsEnabled: true,
+    testId: SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSyncedLocationsTrigger,
+    selected: isOpen,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      size: "small"
+    }),
+    onClick: toggleOpen,
+    ariaHasPopup: true
+  }, /*#__PURE__*/React.createElement(SyncedLocationTriggerContent, {
+    intl: intl,
+    fetchStatus: fetchStatus,
+    referenceData: referenceData
+  })), [fetchStatus, intl, isOpen, referenceData, toggleOpen]);
+  return /*#__PURE__*/React.createElement(DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
 const DropdownContent = ({
   syncBlockStore,
   resourceId,
@@ -433,9 +504,6 @@ const DropdownContent = ({
   localId,
   api
 }) => {
-  const {
-    formatMessage
-  } = intl;
   const [fetchStatus, setFetchStatus] = useState('none');
   const [referenceData, setReferenceData] = useState([]);
   useEffect(() => {
@@ -449,8 +517,103 @@ const DropdownContent = ({
       setReferenceData(processReferenceData(response.references, intl));
       setFetchStatus('success');
     };
-    getReferenceData();
+    void getReferenceData();
   }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  return /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
+    resourceId: resourceId,
+    intl: intl,
+    api: api,
+    fetchStatus: fetchStatus,
+    referenceData: referenceData
+  });
+};
+const useReferenceData = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId
+}) => {
+  const [state, setState] = useState({
+    fetchStatus: 'loading',
+    referenceData: []
+  });
+  useEffect(() => {
+    let isCurrentRequest = true;
+    setState({
+      fetchStatus: 'loading',
+      referenceData: []
+    });
+    const getReferenceData = async () => {
+      const response = await syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+      if (!isCurrentRequest) {
+        return;
+      }
+      if (response.error) {
+        setState({
+          fetchStatus: 'error',
+          referenceData: []
+        });
+        return;
+      }
+      setState({
+        fetchStatus: 'success',
+        referenceData: processReferenceData(response.references, intl)
+      });
+    };
+    void getReferenceData();
+    return () => {
+      isCurrentRequest = false;
+    };
+  }, [syncBlockStore, resourceId, intl, isSource, localId]);
+  return {
+    fetchStatus: state.fetchStatus,
+    referenceData: state.referenceData
+  };
+};
+const SyncedLocationTriggerContent = ({
+  intl,
+  fetchStatus,
+  referenceData
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  const referenceCount = useMemo(() => referenceData.filter(({
+    isSource
+  }) => !isSource).length, [referenceData]);
+  switch (fetchStatus) {
+    case 'loading':
+      return /*#__PURE__*/React.createElement(Inline, {
+        alignBlock: "center",
+        space: "space.050"
+      }, triggerTitle, /*#__PURE__*/React.createElement(Spinner, {
+        size: "small",
+        label: formatMessage(messages.syncedLocationDropdownLoading)
+      }));
+    case 'success':
+      {
+        const count = referenceCount === 0 ? formatMessage(messages.syncedLocationDropdownNone) : referenceCount > 99 ? '99+' : intl.formatNumber(referenceCount);
+        return formatMessage(messages.syncedLocationDropdownTitleWithCount, {
+          count
+        });
+      }
+    case 'none':
+    case 'error':
+      return triggerTitle;
+  }
+};
+const DropdownContentWithReferenceData = ({
+  resourceId,
+  intl,
+  api,
+  fetchStatus,
+  referenceData
+}) => {
+  const {
+    formatMessage
+  } = intl;
   const handleLocationClick = () => {
     var _api$analytics, _api$analytics$action;
     api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent({
@@ -466,7 +629,9 @@ const DropdownContent = ({
   const content = () => {
     switch (fetchStatus) {
       case 'loading':
-        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+        return /*#__PURE__*/React.createElement(LoadingScreen, {
+          formatMessage: formatMessage
+        });
       case 'error':
         return /*#__PURE__*/React.createElement(ErrorScreen, {
           formatMessage: formatMessage
@@ -519,8 +684,12 @@ const DropdownContent = ({
     xcss: cx(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
   }, content());
 };
-const LoadingScreen = () => {
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
+const LoadingScreen = ({
+  formatMessage
+}) => {
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, {
+    label: formatMessage(messages.syncedLocationDropdownLoading)
+  }));
 };
 const ErrorScreen = ({
   formatMessage

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

@@ -16,7 +16,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock, unsync } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
-import { SyncedLocationDropdown } from './SyncedLocationDropdown';
+import { SyncedLocationDropdown, SyncedLocationDropdownWithCount } from './SyncedLocationDropdown';
 export const getToolbarConfig = (state, intl, api, syncBlockStore, isLivePage, onGiveFeedback) => {
   var _syncBlockInstance$er, _api$decorations, _api$connectivity, _api$connectivity$sha;
   const syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
@@ -92,6 +92,18 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore, isLivePage, o
         type: 'custom',
         fallback: [],
         render: (_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) => {
+          if (isSyncBlockActivationEnabled) {
+            return /*#__PURE__*/React.createElement(SyncedLocationDropdownWithCount, {
+              key: `${resourceId}:${localId}:${isBodiedSyncBlock}`,
+              syncBlockStore: syncBlockStore,
+              resourceId: resourceId,
+              localId: localId,
+              intl: intl,
+              isSource: isBodiedSyncBlock,
+              api: api,
+              floatingToolbarRenderContext: floatingToolbarRenderContext
+            });
+          }
           return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -21,6 +21,7 @@ import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer } from '@atlaskit/editor-common/ui-menu';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
+// eslint-disable-next-line import/order -- CI requires icon-lab imports before core icon imports.
 import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
 import BugIcon from '@atlaskit/icon/core/bug';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
@@ -302,24 +303,24 @@ export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
     localId = _ref4.localId,
     api = _ref4.api,
     floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
-  if (fg('platform_synced_block_patch_13')) {
-    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+  if (!fg('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
       syncBlockStore: syncBlockStore,
       resourceId: resourceId,
       intl: intl,
       isSource: isSource,
       localId: localId,
-      api: api,
-      floatingToolbarRenderContext: floatingToolbarRenderContext
+      api: api
     });
   }
-  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+  return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
     intl: intl,
     isSource: isSource,
     localId: localId,
-    api: api
+    api: api,
+    floatingToolbarRenderContext: floatingToolbarRenderContext
   });
 };
 var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref5) {
@@ -330,8 +331,7 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     localId = _ref5.localId,
     api = _ref5.api,
     floatingToolbarRenderContext = _ref5.floatingToolbarRenderContext;
-  var formatMessage = intl.formatMessage;
-  var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  var triggerTitle = intl.formatMessage(messages.syncedLocationDropdownTitle);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -400,8 +400,7 @@ var LegacySyncedLocationDropdown = function LegacySyncedLocationDropdown(_ref6)
     isSource = _ref6.isSource,
     localId = _ref6.localId,
     api = _ref6.api;
-  var formatMessage = intl.formatMessage;
-  var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  var triggerTitle = intl.formatMessage(messages.syncedLocationDropdownTitle);
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isOpen = _useState4[0],
@@ -443,26 +442,106 @@ var LegacySyncedLocationDropdown = function LegacySyncedLocationDropdown(_ref6)
     }
   }, content);
 };
-var DropdownContent = function DropdownContent(_ref9) {
+export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref9) {
   var syncBlockStore = _ref9.syncBlockStore,
     resourceId = _ref9.resourceId,
     intl = _ref9.intl,
     isSource = _ref9.isSource,
     localId = _ref9.localId,
-    api = _ref9.api;
-  var formatMessage = intl.formatMessage;
-  var _useState5 = useState('none'),
+    api = _ref9.api,
+    floatingToolbarRenderContext = _ref9.floatingToolbarRenderContext;
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    fetchStatus = _useState6[0],
-    setFetchStatus = _useState6[1];
-  var _useState7 = useState([]),
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
+  var _useReferenceData = useReferenceData({
+      intl: intl,
+      isSource: isSource,
+      localId: localId,
+      resourceId: resourceId,
+      syncBlockStore: syncBlockStore
+    }),
+    fetchStatus = _useReferenceData.fetchStatus,
+    referenceData = _useReferenceData.referenceData;
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
+    resourceId: resourceId,
+    intl: intl,
+    api: api,
+    fetchStatus: fetchStatus,
+    referenceData: referenceData
+  }) : null;
+  var toggleOpen = useCallback(function () {
+    setIsOpen(function (currentIsOpen) {
+      return !currentIsOpen;
+    });
+  }, []);
+  var closeDropdown = useCallback(function () {
+    setIsOpen(false);
+  }, []);
+  var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(true);
+    return function () {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  var trigger = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      areAnyNewToolbarFlagsEnabled: true,
+      testId: SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSyncedLocationsTrigger,
+      selected: isOpen,
+      iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      }),
+      onClick: toggleOpen,
+      ariaHasPopup: true
+    }, /*#__PURE__*/React.createElement(SyncedLocationTriggerContent, {
+      intl: intl,
+      fetchStatus: fetchStatus,
+      referenceData: referenceData
+    }));
+  }, [fetchStatus, intl, isOpen, referenceData, toggleOpen]);
+  return /*#__PURE__*/React.createElement(DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
+var DropdownContent = function DropdownContent(_ref0) {
+  var syncBlockStore = _ref0.syncBlockStore,
+    resourceId = _ref0.resourceId,
+    intl = _ref0.intl,
+    isSource = _ref0.isSource,
+    localId = _ref0.localId,
+    api = _ref0.api;
+  var _useState7 = useState('none'),
     _useState8 = _slicedToArray(_useState7, 2),
-    referenceData = _useState8[0],
-    setReferenceData = _useState8[1];
+    fetchStatus = _useState8[0],
+    setFetchStatus = _useState8[1];
+  var _useState9 = useState([]),
+    _useState0 = _slicedToArray(_useState9, 2),
+    referenceData = _useState0[0],
+    setReferenceData = _useState0[1];
   useEffect(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref0 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref1 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var response;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -487,11 +566,128 @@ var DropdownContent = function DropdownContent(_ref9) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref0.apply(this, arguments);
+        return _ref1.apply(this, arguments);
       };
     }();
-    getReferenceData();
+    void getReferenceData();
   }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  return /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
+    resourceId: resourceId,
+    intl: intl,
+    api: api,
+    fetchStatus: fetchStatus,
+    referenceData: referenceData
+  });
+};
+var useReferenceData = function useReferenceData(_ref10) {
+  var syncBlockStore = _ref10.syncBlockStore,
+    resourceId = _ref10.resourceId,
+    intl = _ref10.intl,
+    isSource = _ref10.isSource,
+    localId = _ref10.localId;
+  var _useState1 = useState({
+      fetchStatus: 'loading',
+      referenceData: []
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    state = _useState10[0],
+    setState = _useState10[1];
+  useEffect(function () {
+    var isCurrentRequest = true;
+    setState({
+      fetchStatus: 'loading',
+      referenceData: []
+    });
+    var getReferenceData = /*#__PURE__*/function () {
+      var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var response;
+        return _regeneratorRuntime.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 1;
+              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+            case 1:
+              response = _context2.sent;
+              if (isCurrentRequest) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 2:
+              if (!response.error) {
+                _context2.next = 3;
+                break;
+              }
+              setState({
+                fetchStatus: 'error',
+                referenceData: []
+              });
+              return _context2.abrupt("return");
+            case 3:
+              setState({
+                fetchStatus: 'success',
+                referenceData: processReferenceData(response.references, intl)
+              });
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function getReferenceData() {
+        return _ref11.apply(this, arguments);
+      };
+    }();
+    void getReferenceData();
+    return function () {
+      isCurrentRequest = false;
+    };
+  }, [syncBlockStore, resourceId, intl, isSource, localId]);
+  return {
+    fetchStatus: state.fetchStatus,
+    referenceData: state.referenceData
+  };
+};
+var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12) {
+  var intl = _ref12.intl,
+    fetchStatus = _ref12.fetchStatus,
+    referenceData = _ref12.referenceData;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  var referenceCount = useMemo(function () {
+    return referenceData.filter(function (_ref13) {
+      var isSource = _ref13.isSource;
+      return !isSource;
+    }).length;
+  }, [referenceData]);
+  switch (fetchStatus) {
+    case 'loading':
+      return /*#__PURE__*/React.createElement(Inline, {
+        alignBlock: "center",
+        space: "space.050"
+      }, triggerTitle, /*#__PURE__*/React.createElement(Spinner, {
+        size: "small",
+        label: formatMessage(messages.syncedLocationDropdownLoading)
+      }));
+    case 'success':
+      {
+        var count = referenceCount === 0 ? formatMessage(messages.syncedLocationDropdownNone) : referenceCount > 99 ? '99+' : intl.formatNumber(referenceCount);
+        return formatMessage(messages.syncedLocationDropdownTitleWithCount, {
+          count: count
+        });
+      }
+    case 'none':
+    case 'error':
+      return triggerTitle;
+  }
+};
+var DropdownContentWithReferenceData = function DropdownContentWithReferenceData(_ref14) {
+  var resourceId = _ref14.resourceId,
+    intl = _ref14.intl,
+    api = _ref14.api,
+    fetchStatus = _ref14.fetchStatus,
+    referenceData = _ref14.referenceData;
+  var formatMessage = intl.formatMessage;
   var handleLocationClick = function handleLocationClick() {
     var _api$analytics;
     api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
@@ -507,7 +703,9 @@ var DropdownContent = function DropdownContent(_ref9) {
   var content = function content() {
     switch (fetchStatus) {
       case 'loading':
-        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+        return /*#__PURE__*/React.createElement(LoadingScreen, {
+          formatMessage: formatMessage
+        });
       case 'error':
         return /*#__PURE__*/React.createElement(ErrorScreen, {
           formatMessage: formatMessage
@@ -562,11 +760,14 @@ var DropdownContent = function DropdownContent(_ref9) {
     xcss: cx(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
   }, content());
 };
-var LoadingScreen = function LoadingScreen() {
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
+var LoadingScreen = function LoadingScreen(_ref15) {
+  var formatMessage = _ref15.formatMessage;
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, {
+    label: formatMessage(messages.syncedLocationDropdownLoading)
+  }));
 };
-var ErrorScreen = function ErrorScreen(_ref1) {
-  var formatMessage = _ref1.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref16) {
+  var formatMessage = _ref16.formatMessage;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -582,8 +783,8 @@ var ErrorScreen = function ErrorScreen(_ref1) {
     size: "medium"
   }, formatMessage(messages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref10) {
-  var formatMessage = _ref10.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref17) {
+  var formatMessage = _ref17.formatMessage;
   return /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.noResultsContainer,
     space: "space.100",

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

@@ -20,7 +20,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock, unsync } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
-import { SyncedLocationDropdown } from './SyncedLocationDropdown';
+import { SyncedLocationDropdown, SyncedLocationDropdownWithCount } from './SyncedLocationDropdown';
 export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore, isLivePage, onGiveFeedback) {
   var _syncBlockInstance$er, _api$decorations, _api$connectivity;
   var syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
@@ -87,6 +87,18 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
         type: 'custom',
         fallback: [],
         render: function render(_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) {
+          if (isSyncBlockActivationEnabled) {
+            return /*#__PURE__*/React.createElement(SyncedLocationDropdownWithCount, {
+              key: "".concat(resourceId, ":").concat(localId, ":").concat(isBodiedSyncBlock),
+              syncBlockStore: syncBlockStore,
+              resourceId: resourceId,
+              localId: localId,
+              intl: intl,
+              isSource: isBodiedSyncBlock,
+              api: api,
+              floatingToolbarRenderContext: floatingToolbarRenderContext
+            });
+          }
           return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,

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

@@ -13,4 +13,5 @@ interface Props {
 }
 export declare const processReferenceData: (referenceData: ReferencesSourceInfo["references"], intl: IntlShape) => SyncBlockSourceInfo[];
 export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, api, floatingToolbarRenderContext, }: Props) => JSX.Element;
+export declare const SyncedLocationDropdownWithCount: ({ syncBlockStore, resourceId, intl, isSource, localId, api, floatingToolbarRenderContext, }: Props) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "10.4.1",
+	"version": "10.4.3",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/spinner": "20.1.1",
-		"@atlaskit/tmp-editor-statsig": "^132.6.0",
+		"@atlaskit/tmp-editor-statsig": "^133.1.0",
 		"@atlaskit/tokens": "16.3.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
@@ -57,7 +57,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.38.0",
+		"@atlaskit/editor-common": "^116.39.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},