@atlaskit/editor-plugin-synced-block 10.7.3 → 10.8.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.8.0
+
+### Minor Changes
+
+- [`ff72ee885c82b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff72ee885c82b) -
+  [ux] Prompt users with a feedback flag after undoing or deleting a synced block, and open the
+  product feedback collector only when they choose Give feedback. Keep the prompt UI and scoped
+  action alignment in the synced block plugin while preserving Flag's built-in action buttons.
+
+  Products check and persist the prompt allowance around the shared flag lifecycle:
+
+  ```ts
+  {
+  	shouldShowFeedbackPrompt: () => !feedbackStorage.has('prompt-shown'),
+  	onFeedbackPromptShown: () => feedbackStorage.set('prompt-shown', true),
+  	onGiveFeedback: (context) => openFeedbackCollector(context),
+  }
+  ```
+
+### Patch Changes
+
+- [`17014b0e91a7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/17014b0e91a7f) -
+  Update the synced locations activation empty state
+- [`b4e3664f1eb3c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4e3664f1eb3c) -
+  Keep the source sync block placeholder within narrow containers
+- [`04f47b1369740`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/04f47b1369740) -
+  Clarify source synced block labels and show more of referenced titles
+- Updated dependencies
+
 ## 10.7.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -471,7 +471,7 @@ var buildStatusDecorations = function buildStatusDecorations(doc, syncBlockStore
  * is explicitly scoped to a single plugin instance.
  */
 var SyncedBlockPluginContext = /*#__PURE__*/function () {
-  function SyncedBlockPluginContext(onGiveFeedback) {
+  function SyncedBlockPluginContext(onGiveFeedback, shouldShowFeedbackPrompt, api) {
     (0, _classCallCheck2.default)(this, SyncedBlockPluginContext);
     (0, _defineProperty2.default)(this, "confirmationTransactionRef", {
       current: undefined
@@ -480,9 +480,12 @@ var SyncedBlockPluginContext = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "cutRemovalGeneration", 0);
     (0, _defineProperty2.default)(this, "_isCopyEvent", false);
     (0, _defineProperty2.default)(this, "_isCutEvent", false);
+    (0, _defineProperty2.default)(this, "feedbackPromptConsumed", false);
     (0, _defineProperty2.default)(this, "unpublishedFlagShown", new Set());
     (0, _defineProperty2.default)(this, "extensionFlagShown", new Set());
     this.onGiveFeedback = onGiveFeedback;
+    this.shouldShowFeedbackPrompt = shouldShowFeedbackPrompt;
+    this.api = api;
   }
   return (0, _createClass2.default)(SyncedBlockPluginContext, [{
     key: "isCopyEvent",
@@ -580,7 +583,7 @@ var SyncedBlockPluginContext = /*#__PURE__*/function () {
         return;
       }
       if (context.blockType === 'reference') {
-        this.invokeFeedback(context);
+        this.requestFeedbackPrompt(context);
       }
     }
   }, {
@@ -590,37 +593,54 @@ var SyncedBlockPluginContext = /*#__PURE__*/function () {
       if (((_this$pendingSourceFe4 = this.pendingSourceFeedback) === null || _this$pendingSourceFe4 === void 0 ? void 0 : _this$pendingSourceFe4.sourceAttempt) === sourceAttempt && (_this$pendingSourceFe5 = this.pendingSourceFeedback) !== null && _this$pendingSourceFe5 !== void 0 && _this$pendingSourceFe5.deletionSucceeded && this.pendingSourceFeedback.transactionApplied) {
         var context = this.pendingSourceFeedback.context;
         this.pendingSourceFeedback = undefined;
-        this.invokeFeedback(context);
+        this.requestFeedbackPrompt(context);
       }
     }
   }, {
-    key: "invokeFeedback",
-    value: function invokeFeedback(context) {
+    key: "requestFeedbackPrompt",
+    value: function requestFeedbackPrompt(context) {
       var _this2 = this;
+      if (this.feedbackPromptConsumed) {
+        return;
+      }
+      this.feedbackPromptConsumed = true;
       (0, _utils3.deferDispatch)(function () {
         try {
-          var _this2$onGiveFeedback;
-          var feedbackResult = (_this2$onGiveFeedback = _this2.onGiveFeedback) === null || _this2$onGiveFeedback === void 0 ? void 0 : _this2$onGiveFeedback.call(_this2, context);
-          void Promise.resolve(feedbackResult).catch(function () {});
+          var _this2$shouldShowFeed, _this2$shouldShowFeed2;
+          var shouldShow = (_this2$shouldShowFeed = (_this2$shouldShowFeed2 = _this2.shouldShowFeedbackPrompt) === null || _this2$shouldShowFeed2 === void 0 ? void 0 : _this2$shouldShowFeed2.call(_this2)) !== null && _this2$shouldShowFeed !== void 0 ? _this2$shouldShowFeed : true;
+          void Promise.resolve(shouldShow).then(function (isEligible) {
+            var _this2$api;
+            if (!isEligible) {
+              return;
+            }
+            (_this2$api = _this2.api) === null || _this2$api === void 0 || _this2$api.core.actions.execute(function (_ref7) {
+              var tr = _ref7.tr;
+              return tr.setMeta(syncedBlockPluginKey, {
+                activeFlag: {
+                  id: _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT,
+                  feedbackContext: context
+                }
+              });
+            });
+          }).catch(function () {});
         } catch (_unused) {
-          // Product feedback collectors are optional UI. Their failures must
-          // never affect the already-applied editor transaction.
+          // Persisted feedback eligibility is optional product UI.
         }
       });
     }
   }]);
 }();
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
-  var _ref7 = options || {},
-    _ref7$useLongPressSel = _ref7.useLongPressSelection,
-    useLongPressSelection = _ref7$useLongPressSel === void 0 ? false : _ref7$useLongPressSel;
+  var _ref8 = options || {},
+    _ref8$useLongPressSel = _ref8.useLongPressSelection,
+    useLongPressSelection = _ref8$useLongPressSel === void 0 ? false : _ref8$useLongPressSel;
 
   // Cache the experiment value once at plugin creation time.
   // This fires the exposure event exactly once (correct per Exposure Events 101)
   // and avoids ~10 redundant Statsig SDK evaluations per keystroke in hot paths
   // (apply, filterTransaction, appendTransaction, decorations).
   var isPerfExperimentOn = (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true);
-  var ctx = new SyncedBlockPluginContext(options === null || options === void 0 ? void 0 : options.onGiveFeedback);
+  var ctx = new SyncedBlockPluginContext(options === null || options === void 0 ? void 0 : options.onGiveFeedback, options === null || options === void 0 ? void 0 : options.shouldShowFeedbackPrompt, api);
   var confirmationTransactionRef = ctx.confirmationTransactionRef;
   var unpublishedFlagShown = ctx.unpublishedFlagShown;
   var extensionFlagShown = ctx.extensionFlagShown;
@@ -630,8 +650,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
   // Classic pages with sync blocks.
   syncBlockStore.sourceManager.registerFlushCompletionCallback(function () {
     (0, _utils3.deferDispatch)(function () {
-      api === null || api === void 0 || api.core.actions.execute(function (_ref8) {
-        var tr = _ref8.tr;
+      api === null || api === void 0 || api.core.actions.execute(function (_ref9) {
+        var tr = _ref9.tr;
         return tr;
       });
     });
@@ -659,8 +679,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       // case the Confluence default is used.
       var sourceProduct = (0, _utils2.getSourceProductFromResourceIdSafe)(resourceId);
       (0, _utils3.deferDispatch)(function () {
-        api === null || api === void 0 || api.core.actions.execute(function (_ref9) {
-          var tr = _ref9.tr;
+        api === null || api === void 0 || api.core.actions.execute(function (_ref0) {
+          var tr = _ref0.tr;
           return tr.setMeta(syncedBlockPluginKey, {
             activeFlag: {
               id: _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED,
@@ -1003,8 +1023,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return node;
         });
       },
-      transformCopied: function transformCopied(slice, _ref0) {
-        var state = _ref0.state;
+      transformCopied: function transformCopied(slice, _ref1) {
+        var state = _ref1.state;
         var pluginState = syncedBlockPluginKey.getState(state);
         var syncBlockStore = pluginState === null || pluginState === void 0 ? void 0 : pluginState.syncBlockStore;
         var schema = state.schema;
@@ -1276,8 +1296,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
             if (!(step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep) || !('slice' in step)) {
               return false;
             }
-            var _ref1 = step,
-              slice = _ref1.slice;
+            var _ref10 = step,
+              slice = _ref10.slice;
             var found = false;
             slice.content.descendants(function (node) {
               if (syncBlockStore.sourceManager.isSourceBlock(node) && node.attrs.resourceId) {
@@ -1317,8 +1337,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           tr.setMeta('addToHistory', false);
           (0, _utils3.deferDispatch)(function () {
             var _api$core;
-            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref10) {
-              var tr = _ref10.tr;
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref11) {
+              var tr = _ref11.tr;
               return tr.setMeta(syncedBlockPluginKey, {
                 activeFlag: {
                   id: _types.FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK

package/dist/cjs/syncedBlockPlugin.js

@@ -34,7 +34,9 @@ var _toolbarComponents = require("./ui/toolbar-components");
  */
 var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStore,
-    api = _ref.api;
+    api = _ref.api,
+    onFeedbackPromptShown = _ref.onFeedbackPromptShown,
+    onGiveFeedback = _ref.onGiveFeedback;
   var hasSyncBlocks = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock'], function (states) {
     var _states$syncedBlockSt;
     return (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.hasSyncedBlocks;
@@ -53,7 +55,9 @@ var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
     syncBlockStoreManager: syncBlockStoreManager,
     api: api
   }), /*#__PURE__*/_react.default.createElement(_Flag.Flag, {
-    api: api
+    api: api,
+    onFeedbackPromptShown: onFeedbackPromptShown,
+    onGiveFeedback: onGiveFeedback
   }));
 };
 var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_ref2) {
@@ -160,7 +164,9 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       refs.wrapperElement = wrapperElement || undefined;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_SourceSyncBlockPlaceholder.SourceSyncBlockPlaceholder, null), /*#__PURE__*/_react.default.createElement(LazySyncedBlockUI, {
         syncBlockStore: syncBlockStore,
-        api: api
+        api: api,
+        onFeedbackPromptShown: config === null || config === void 0 ? void 0 : config.onFeedbackPromptShown,
+        onGiveFeedback: config === null || config === void 0 ? void 0 : config.onGiveFeedback
       }));
     },
     getSharedState: function getSharedState(editorState) {

package/dist/cjs/types/index.js

@@ -15,6 +15,7 @@ var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["INLINE_EXTENSION_IN_SYNC_BLOCK"] = "inline-extension-in-sync-block";
   FLAG_ID["EXTENSION_IN_SYNC_BLOCK"] = "extension-in-sync-block";
   FLAG_ID["DUPLICATE_SOURCE_SYNC_BLOCK"] = "duplicate-source-sync-block";
+  FLAG_ID["SYNC_BLOCK_FEEDBACK_PROMPT"] = "synced-block-feedback-prompt";
   return FLAG_ID;
 }({});
 var SYNCED_BLOCK_BUTTON_TEST_ID = exports.SYNCED_BLOCK_BUTTON_TEST_ID = {

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -1,4 +1,4 @@
-/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/Flag.compiled.css

@@ -0,0 +1 @@
+._btc7grf3 [data-testid=synced-block-feedback-prompt-actions] button{padding-inline-start:0!important}

package/dist/cjs/ui/Flag.js

@@ -1,3 +1,4 @@
+/* Flag.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSyncBlockCopiedDescription = exports.Flag = void 0;
+require("./Flag.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
@@ -14,15 +17,18 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
+var _megaphone = _interopRequireDefault(require("@atlaskit/icon/core/megaphone"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../pm-plugins/main");
 var _types = require("../types");
+var _flagMap;
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
+var feedbackFlagStyles = null;
+var flagMap = (_flagMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
   title: _messages.syncBlockMessages.failToDeleteTitle,
   description: _messages.syncBlockMessages.failToDeleteWhenOfflineDescription,
   type: 'error'
@@ -61,7 +67,11 @@ var flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _d
   title: _messages.syncBlockMessages.duplicateSourceSyncBlockTitle,
   description: _messages.syncBlockMessages.duplicateSourceSyncBlockDescription,
   type: 'error'
-});
+}), (0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT, {
+  title: _messages.syncBlockMessages.feedbackFlagTitle,
+  description: _messages.syncBlockMessages.feedbackFlagDescription,
+  type: 'feedback'
+}));
 var getSyncBlockCopiedDescription = exports.getSyncBlockCopiedDescription = function getSyncBlockCopiedDescription(activeFlag, isSyncBlockActivationEnabled) {
   if (!activeFlag || activeFlag.id !== _types.FLAG_ID.SYNC_BLOCK_COPIED || activeFlag.sourceProduct !== 'confluence-page' || !isSyncBlockActivationEnabled) {
     return undefined;
@@ -69,7 +79,9 @@ var getSyncBlockCopiedDescription = exports.getSyncBlockCopiedDescription = func
   return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? _messages.syncBlockMessages.syncBlockCopiedLivePageDescription : _messages.syncBlockMessages.syncBlockCopiedUnpublishedDescription;
 };
 var Flag = exports.Flag = function Flag(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    onFeedbackPromptShown = _ref.onFeedbackPromptShown,
+    onGiveFeedback = _ref.onGiveFeedback;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock', 'connectivity'], function (states) {
       var _states$syncedBlockSt, _states$connectivityS;
       return {
@@ -81,6 +93,18 @@ var Flag = exports.Flag = function Flag(_ref) {
     mode = _useSharedPluginState.mode;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var isFeedbackPromptVisible = activeFlag && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
+  _react.default.useEffect(function () {
+    if (!isFeedbackPromptVisible || !onFeedbackPromptShown) {
+      return;
+    }
+    try {
+      var promptShownResult = onFeedbackPromptShown();
+      void Promise.resolve(promptShownResult).catch(function () {});
+    } catch (_unused) {
+      // Prompt persistence is optional product UI.
+    }
+  }, [isFeedbackPromptVisible, onFeedbackPromptShown]);
   if (!activeFlag) {
     return;
   }
@@ -110,7 +134,7 @@ var Flag = exports.Flag = function Flag(_ref) {
     });
     return;
   }
-  var onDismissed = function onDismissed() {
+  var dismissFlag = function dismissFlag(shouldFocusEditor) {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       onDismissedCallback === null || onDismissedCallback === void 0 || onDismissedCallback(tr);
@@ -120,7 +144,12 @@ var Flag = exports.Flag = function Flag(_ref) {
       }));
       return tr;
     });
-    api === null || api === void 0 || api.core.actions.focus();
+    if (shouldFocusEditor) {
+      api === null || api === void 0 || api.core.actions.focus();
+    }
+  };
+  var onDismissed = function onDismissed() {
+    return dismissFlag(true);
   };
   var typeToActions = function typeToActions() {
     if (type === 'error') {
@@ -137,11 +166,28 @@ var Flag = exports.Flag = function Flag(_ref) {
         target: '_blank',
         rel: 'noopener noreferrer'
       }];
+    } else if (type === 'feedback' && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT && activeFlag.feedbackContext) {
+      var feedbackContext = activeFlag.feedbackContext;
+      return [{
+        content: formatMessage(_messages.syncBlockMessages.feedbackFlagGiveFeedback),
+        onClick: function onClick() {
+          dismissFlag(false);
+          try {
+            var feedbackResult = onGiveFeedback === null || onGiveFeedback === void 0 ? void 0 : onGiveFeedback(feedbackContext);
+            void Promise.resolve(feedbackResult).catch(function () {});
+          } catch (_unused2) {
+            // Feedback collectors are optional product UI.
+          }
+        }
+      }, {
+        content: formatMessage(_messages.syncBlockMessages.feedbackFlagNoThanks),
+        onClick: onDismissed
+      }];
     }
     return undefined;
   };
   var FlagComponent = type === 'info' ? _flag.AutoDismissFlag : _flag.default;
-  return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, null, /*#__PURE__*/_react.default.createElement(FlagComponent, {
+  var flag = /*#__PURE__*/_react.default.createElement(FlagComponent, {
     onDismissed: onDismissed,
     title: formatMessage(title),
     description: description ? formatMessage(description) : undefined,
@@ -149,7 +195,11 @@ var Flag = exports.Flag = function Flag(_ref) {
     testId: activeFlag.id,
     icon: typeToIcon(type),
     actions: typeToActions()
-  }));
+  });
+  return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, null, type === 'feedback' ? /*#__PURE__*/_react.default.createElement("div", {
+    id: activeFlag.id,
+    className: (0, _runtime.ax)(["_btc7grf3"])
+  }, flag) : flag);
 };
 var typeToIcon = function typeToIcon(type) {
   if (type === 'error') {
@@ -158,6 +208,13 @@ var typeToIcon = function typeToIcon(type) {
       color: "var(--ds-icon-warning, #E06C00)"
     });
   }
+  if (type === 'feedback') {
+    return /*#__PURE__*/_react.default.createElement(_megaphone.default, {
+      label: "",
+      spacing: "spacious",
+      color: "var(--ds-icon, #292A2E)"
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
     label: "",
     color: "var(--ds-icon-success, #6A9A23)"

package/dist/cjs/ui/SourceSyncBlockPlaceholder.js

@@ -33,8 +33,11 @@ var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholder
       font: 'inherit',
       insetInlineStart: 0,
       width: '100%',
+      overflow: 'hidden',
       pointerEvents: 'none',
-      userSelect: 'none'
+      textOverflow: 'ellipsis',
+      userSelect: 'none',
+      whiteSpace: 'nowrap'
     }
   }));
 };

package/dist/cjs/ui/SyncBlockLabel.js

@@ -14,6 +14,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
 var _time = require("./utils/time");
@@ -80,7 +81,13 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
         color: "color.text.subtle"
       }, formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
     }
-    if (isSource || !title) {
+    if (isSource) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage((0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? _messages.syncBlockMessages.sourceSyncedBlockLabel : _messages.syncBlockMessages.syncedBlockLabel));
+    }
+    if (!title) {
       return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         size: "small",
         color: "color.text.subtle"
@@ -119,6 +126,6 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     onShow: updateTooltipContent
   }, label, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
     id: ariaDescribedById
-  }, tooltipContent));
+  }, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent));
 };
 var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);

package/dist/cjs/ui/SyncedLocationDropdown.compiled.css

@@ -1,12 +1,16 @@
 ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
+._195g1wug{margin-inline:auto}
 ._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._1bah1h6o{justify-content:center}
+._1bsb12aa{width:290px}
 ._1bsb19n7{width:106px}
+._1bsb1kdj{width:25pc}
 ._1bsb1osq{width:100%}
 ._1bsbgktf{width:20px}
 ._1bsbo8uj{width:235px}
@@ -26,8 +30,11 @@
 ._ajmmnqa1{text-decoration-style:solid}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._c71lko4j{max-height:19pc}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._o5721q9c{white-space:nowrap}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}
+._vchhusvi{box-sizing:border-box}
 ._y3gn1h6o{text-align:center}
 @keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -1,4 +1,4 @@
-/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -40,8 +40,11 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _types = require("../types");
+var _SyncedLocationsEmptyStateIllustration = require("./assets/SyncedLocationsEmptyStateIllustration");
 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; } } }; }
@@ -59,6 +62,9 @@ var styles = {
   note: "_syaz1rpy _o5721q9c",
   lozenge: "_ahbq12x7 _1ul91wqb",
   noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  activationDropdownContent: "_1rjcze3t _1bsb1kdj",
+  activationNoResultsContainer: "_vchhusvi _1bsb1kdj _ca0q1ejb _n3td1ejb",
+  activationNoResultsContent: "_195g1wug _1bsb12aa _y3gn1h6o",
   dropdownContent: "_1rjcv77o _1bsbsmdz _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
   containerWithMinHeight: "_1tkeqkoa",
   contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
@@ -516,6 +522,7 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     }));
   }, [fetchStatus, intl, isOpen, referenceData, toggleOpen]);
   return /*#__PURE__*/React.createElement(_uiMenu.DropdownContainer, {
+    alignX: "center",
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
     isOpen: isOpen,
     trigger: trigger,
@@ -775,7 +782,7 @@ var DropdownContentWithReferenceData = function DropdownContentWithReferenceData
     }
   };
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: (0, _react2.cx)(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
+    xcss: (0, _react2.cx)(styles.dropdownContent, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_sync_block_activation', 'isEnabled', true) && fetchStatus === 'success' && referenceData.length === 0 && styles.activationDropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
   }, content());
 };
 var LoadingScreen = function LoadingScreen(_ref15) {
@@ -803,7 +810,23 @@ var ErrorScreen = function ErrorScreen(_ref16) {
 };
 var NoResultScreen = function NoResultScreen(_ref17) {
   var formatMessage = _ref17.formatMessage;
-  return /*#__PURE__*/React.createElement(_compiled.Stack, {
+  return (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.activationNoResultsContainer,
+    testId: "synced-locations-dropdown-content-no-results"
+  }, /*#__PURE__*/React.createElement(_compiled.Stack, {
+    alignInline: "center",
+    xcss: styles.activationNoResultsContent,
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(_SyncedLocationsEmptyStateIllustration.SyncedLocationsEmptyStateIllustration, null), /*#__PURE__*/React.createElement(_compiled.Text, {
+    as: "p"
+  }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownActivationNoResults)), /*#__PURE__*/React.createElement(_compiled.Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(_compiled.Anchor, {
+    href: _syncBlock.SYNCED_BLOCKS_DOCUMENTATION_URL,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    xcss: styles.learnMoreLink
+  }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownLearnMoreLink))))) : /*#__PURE__*/React.createElement(_compiled.Stack, {
     xcss: styles.noResultsContainer,
     space: "space.100",
     testId: "synced-locations-dropdown-content-no-results"