@atlaskit/editor-plugin-synced-block 17.0.8 → 17.0.10

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -1,14 +1,17 @@
 /* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./SyncedLocationDropdown.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _defineProperty(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; }
 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; }
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
 import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
@@ -33,6 +36,7 @@ import IconTile from '@atlaskit/icon/icon-tile';
 import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';
 import Lozenge from '@atlaskit/lozenge/lozenge';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -55,6 +59,8 @@ var styles = {
   activationDropdownContent: "_1rjcze3t _1bsb1kdj",
   activationNoResultsContainer: "_vchhusvi _1bsb1kdj _ca0q1ejb _n3td1ejb",
   activationNoResultsContent: "_195g1wug _1bsb12aa _y3gn1h6o",
+  fieldAwareDropdownContent: "_1bsb1kdj",
+  fieldSecondLine: "_1reo15vq _18m915vq _o5721q9c _1bto1l2s",
   dropdownContent: "_1rjcv77o _1bsbsmdz _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
   containerWithMinHeight: "_1tkeqkoa",
   contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
@@ -63,6 +69,21 @@ var styles = {
   learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
   requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
 };
+
+/**
+ * One field-aware dropdown row. Every string the row shows is composed here from the untouched
+ * provider `reference`. Only built with `editor_synced_blocks_jira_custom_rich_text` on.
+ */
+
+/** Decided once per fetch. The control shape is what the dropdown held before the experiment. */
+
+var EMPTY_LOCATIONS = {
+  kind: 'control',
+  references: []
+};
+var countLocations = function countLocations(locations) {
+  return locations.kind === 'control' ? locations.references.length : locations.items.length;
+};
 var shouldApplyMinHeight = function shouldApplyMinHeight(fetchStatus, itemCount) {
   // When there are 1/2 items, dropdown height is less than minHeight 144px
   return !(fetchStatus === 'success' && itemCount > 0);
@@ -298,14 +319,114 @@ export var processReferenceData = function processReferenceData(referenceData, i
   });
   return sortedReferences;
 };
-export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
-  var syncBlockStore = _ref4.syncBlockStore,
-    resourceId = _ref4.resourceId,
-    intl = _ref4.intl,
-    isSource = _ref4.isSource,
-    localId = _ref4.localId,
-    api = _ref4.api,
-    floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
+var isFieldAwareLocationList = function isFieldAwareLocationList(references) {
+  var _references$some;
+  return ((_references$some = references === null || references === void 0 ? void 0 : references.some(function (reference) {
+    return (reference === null || reference === void 0 ? void 0 : reference.productType) === 'jira-work-item';
+  })) !== null && _references$some !== void 0 ? _references$some : false) && isExperimentEnabled('editor_synced_blocks_jira_custom_rich_text');
+};
+var groupBySourceAri = function groupBySourceAri(referenceData) {
+  var groups = new Map();
+  referenceData === null || referenceData === void 0 || referenceData.forEach(function (reference) {
+    if (!reference) {
+      return;
+    }
+    var group = groups.get(reference.sourceAri);
+    if (group) {
+      group.push(reference);
+    } else {
+      groups.set(reference.sourceAri, [reference]);
+    }
+  });
+  return groups;
+};
+
+/** Sources first, then accessible locations. `0` leaves the title order to the caller. */
+var compareLocationOrder = function compareLocationOrder(a, b) {
+  if (a.isSource !== b.isSource) {
+    return b.isSource ? 1 : -1;
+  }
+  if (a.hasAccess !== b.hasAccess) {
+    return a.hasAccess ? -1 : 1;
+  }
+  return 0;
+};
+
+/** The title alone. The field name is placed by the row and the tooltip, not baked in here. */
+var getBaseTitle = function getBaseTitle(_ref4) {
+  var blockIndex = _ref4.blockIndex,
+    formatMessage = _ref4.formatMessage,
+    reference = _ref4.reference;
+  var title = reference.title === '' && reference.hasAccess ? formatMessage(messages.syncedLocationDropdownUntitledPage) : reference.title || reference.url || '';
+  return blockIndex === undefined ? title : "".concat(title, ": ").concat(formatMessage(messages.syncedLocationDropdownTitleBlockIndex, {
+    index: blockIndex
+  }));
+};
+
+/** Jira rows are noted from `locationScope`; other rows keep the pre-experiment `onSameDocument` note. */
+var getFieldAwareNote = function getFieldAwareNote(reference, formatMessage) {
+  var _reference$locationSc;
+  if (reference.productType !== 'jira-work-item') {
+    if (!reference.onSameDocument) {
+      return undefined;
+    }
+    return formatMessage(reference.productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem);
+  }
+
+  // A provider that computes no scope still reports `onSameDocument`. It is the same host
+  // comparison `getLocationScope` starts with, and in Jira the host document is one field.
+  var locationScope = (_reference$locationSc = reference.locationScope) !== null && _reference$locationSc !== void 0 ? _reference$locationSc : reference.onSameDocument ? 'same-document' : undefined;
+  switch (locationScope) {
+    case 'same-document':
+      return formatMessage(messages.syncedLocationDropdownTitleNoteForJiraWorkItemField);
+    case 'same-parent-document':
+      return formatMessage(messages.syncedLocationDropdownTitleNoteForJiraWorkItem);
+    default:
+      return undefined;
+  }
+};
+export var buildFieldAwareItems = function buildFieldAwareItems(referenceData, formatMessage) {
+  return Array.from(groupBySourceAri(referenceData).values()).flatMap(function (group) {
+    return group.map(function (reference, index) {
+      var fieldName = reference.productType === 'jira-work-item' ? reference.fieldName : undefined;
+      var note = getFieldAwareNote(reference, formatMessage);
+      return _objectSpread(_objectSpread(_objectSpread({
+        baseTitle: getBaseTitle({
+          blockIndex: group.length > 1 ? index + 1 : undefined,
+          formatMessage: formatMessage,
+          reference: reference
+        })
+      }, fieldName !== undefined && {
+        fieldName: fieldName
+      }), {}, {
+        key: "".concat(reference.sourceAri, "#").concat(index)
+      }, note !== undefined && {
+        note: note
+      }), {}, {
+        reference: reference
+      });
+    });
+  }).sort(function (a, b) {
+    return compareLocationOrder(a.reference, b.reference) || a.baseTitle.localeCompare(b.baseTitle);
+  });
+};
+var toSyncedLocations = function toSyncedLocations(references, intl) {
+  return isFieldAwareLocationList(references) ? {
+    kind: 'field-aware',
+    items: buildFieldAwareItems(references, intl.formatMessage)
+  } : {
+    kind: 'control',
+    references: processReferenceData(references, intl)
+  };
+};
+export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref5) {
+  var syncBlockStore = _ref5.syncBlockStore,
+    resourceId = _ref5.resourceId,
+    intl = _ref5.intl,
+    isSource = _ref5.isSource,
+    localId = _ref5.localId,
+    api = _ref5.api,
+    floatingToolbarRenderContext = _ref5.floatingToolbarRenderContext;
   return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
@@ -316,14 +437,14 @@ export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
     floatingToolbarRenderContext: floatingToolbarRenderContext
   });
 };
-var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref5) {
-  var syncBlockStore = _ref5.syncBlockStore,
-    resourceId = _ref5.resourceId,
-    intl = _ref5.intl,
-    isSource = _ref5.isSource,
-    localId = _ref5.localId,
-    api = _ref5.api,
-    floatingToolbarRenderContext = _ref5.floatingToolbarRenderContext;
+var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref6) {
+  var syncBlockStore = _ref6.syncBlockStore,
+    resourceId = _ref6.resourceId,
+    intl = _ref6.intl,
+    isSource = _ref6.isSource,
+    localId = _ref6.localId,
+    api = _ref6.api,
+    floatingToolbarRenderContext = _ref6.floatingToolbarRenderContext;
   var triggerTitle = intl.formatMessage(messages.syncedLocationDropdownTitle);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -386,14 +507,14 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     }
   }, content);
 };
-export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref6) {
-  var syncBlockStore = _ref6.syncBlockStore,
-    resourceId = _ref6.resourceId,
-    intl = _ref6.intl,
-    isSource = _ref6.isSource,
-    localId = _ref6.localId,
-    api = _ref6.api,
-    floatingToolbarRenderContext = _ref6.floatingToolbarRenderContext;
+export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref7) {
+  var syncBlockStore = _ref7.syncBlockStore,
+    resourceId = _ref7.resourceId,
+    intl = _ref7.intl,
+    isSource = _ref7.isSource,
+    localId = _ref7.localId,
+    api = _ref7.api,
+    floatingToolbarRenderContext = _ref7.floatingToolbarRenderContext;
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isOpen = _useState4[0],
@@ -406,20 +527,28 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
       syncBlockStore: syncBlockStore
     }),
     fetchStatus = _useReferenceData.fetchStatus,
-    referenceData = _useReferenceData.referenceData;
+    locations = _useReferenceData.locations;
   var referenceCount = useMemo(function () {
-    return referenceData.filter(function (_ref7) {
-      var isSourceItem = _ref7.isSource;
-      return !isSourceItem;
-    }).length;
-  }, [referenceData]);
+    switch (locations.kind) {
+      case 'control':
+        return locations.references.filter(function (_ref8) {
+          var isSourceItem = _ref8.isSource;
+          return !isSourceItem;
+        }).length;
+      case 'field-aware':
+        return locations.items.filter(function (_ref9) {
+          var reference = _ref9.reference;
+          return !reference.isSource;
+        }).length;
+    }
+  }, [locations]);
   var tooltipContent = !isOpen && fetchStatus === 'success' && referenceCount === 0 ? intl.formatMessage(messages.syncedLocationDropdownNoReferencesTooltip) : null;
   var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
     resourceId: resourceId,
     intl: intl,
     api: api,
     fetchStatus: fetchStatus,
-    referenceData: referenceData
+    locations: locations
   }) : null;
   var toggleOpen = useCallback(function () {
     setIsOpen(function (currentIsOpen) {
@@ -477,25 +606,25 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
     }
   }, content);
 };
-var DropdownContent = function DropdownContent(_ref8) {
-  var syncBlockStore = _ref8.syncBlockStore,
-    resourceId = _ref8.resourceId,
-    intl = _ref8.intl,
-    isSource = _ref8.isSource,
-    localId = _ref8.localId,
-    api = _ref8.api;
+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 _useState5 = useState('none'),
     _useState6 = _slicedToArray(_useState5, 2),
     fetchStatus = _useState6[0],
     setFetchStatus = _useState6[1];
-  var _useState7 = useState([]),
+  var _useState7 = useState(EMPTY_LOCATIONS),
     _useState8 = _slicedToArray(_useState7, 2),
-    referenceData = _useState8[0],
-    setReferenceData = _useState8[1];
+    locations = _useState8[0],
+    setLocations = _useState8[1];
   useEffect(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref9 = _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) {
@@ -511,7 +640,7 @@ var DropdownContent = function DropdownContent(_ref8) {
               setFetchStatus('error');
               return _context.abrupt("return");
             case 2:
-              setReferenceData(processReferenceData(response.references, intl));
+              setLocations(toSyncedLocations(response.references, intl));
               setFetchStatus('success');
             case 3:
             case "end":
@@ -520,7 +649,7 @@ var DropdownContent = function DropdownContent(_ref8) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref9.apply(this, arguments);
+        return _ref1.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -530,15 +659,15 @@ var DropdownContent = function DropdownContent(_ref8) {
     intl: intl,
     api: api,
     fetchStatus: fetchStatus,
-    referenceData: referenceData
+    locations: locations
   });
 };
-var useReferenceData = function useReferenceData(_ref0) {
-  var syncBlockStore = _ref0.syncBlockStore,
-    resourceId = _ref0.resourceId,
-    intl = _ref0.intl,
-    isSource = _ref0.isSource,
-    localId = _ref0.localId;
+var useReferenceData = function useReferenceData(_ref10) {
+  var syncBlockStore = _ref10.syncBlockStore,
+    resourceId = _ref10.resourceId,
+    intl = _ref10.intl,
+    isSource = _ref10.isSource,
+    localId = _ref10.localId;
   var _useState9 = useState(function () {
       return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
     }),
@@ -547,7 +676,7 @@ var useReferenceData = function useReferenceData(_ref0) {
   var _useState1 = useState(function () {
       return {
         fetchStatus: isNewSourceBlock ? 'success' : 'loading',
-        referenceData: []
+        locations: EMPTY_LOCATIONS
       };
     }),
     _useState10 = _slicedToArray(_useState1, 2),
@@ -557,10 +686,10 @@ var useReferenceData = function useReferenceData(_ref0) {
     var isCurrentRequest = true;
     setState({
       fetchStatus: isNewSourceBlock ? 'success' : 'loading',
-      referenceData: []
+      locations: EMPTY_LOCATIONS
     });
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref1 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var response;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -584,13 +713,13 @@ var useReferenceData = function useReferenceData(_ref0) {
               }
               setState({
                 fetchStatus: 'error',
-                referenceData: []
+                locations: EMPTY_LOCATIONS
               });
               return _context2.abrupt("return");
             case 3:
               setState({
                 fetchStatus: 'success',
-                referenceData: processReferenceData(response.references, intl)
+                locations: toSyncedLocations(response.references, intl)
               });
             case 4:
             case "end":
@@ -599,7 +728,7 @@ var useReferenceData = function useReferenceData(_ref0) {
         }, _callee2);
       }));
       return function getReferenceData() {
-        return _ref1.apply(this, arguments);
+        return _ref11.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -609,13 +738,13 @@ var useReferenceData = function useReferenceData(_ref0) {
   }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock]);
   return {
     fetchStatus: state.fetchStatus,
-    referenceData: state.referenceData
+    locations: state.locations
   };
 };
-var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref10) {
-  var intl = _ref10.intl,
-    fetchStatus = _ref10.fetchStatus,
-    referenceCount = _ref10.referenceCount;
+var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12) {
+  var intl = _ref12.intl,
+    fetchStatus = _ref12.fetchStatus,
+    referenceCount = _ref12.referenceCount;
   var formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
   var syncedLocationCount = referenceCount === 0 ? 0 : referenceCount + 1;
@@ -640,13 +769,14 @@ var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref10)
       return triggerTitle;
   }
 };
-var DropdownContentWithReferenceData = function DropdownContentWithReferenceData(_ref11) {
-  var resourceId = _ref11.resourceId,
-    intl = _ref11.intl,
-    api = _ref11.api,
-    fetchStatus = _ref11.fetchStatus,
-    referenceData = _ref11.referenceData;
+var DropdownContentWithReferenceData = function DropdownContentWithReferenceData(_ref13) {
+  var resourceId = _ref13.resourceId,
+    intl = _ref13.intl,
+    api = _ref13.api,
+    fetchStatus = _ref13.fetchStatus,
+    locations = _ref13.locations;
   var formatMessage = intl.formatMessage;
+  var locationCount = countLocations(locations);
   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({
@@ -670,43 +800,22 @@ var DropdownContentWithReferenceData = function DropdownContentWithReferenceData
           formatMessage: formatMessage
         });
       case 'success':
-        if (referenceData.length > 0) {
+        if (locationCount > 0) {
           return /*#__PURE__*/React.createElement("div", {
             "data-testid": "synced-locations-dropdown-content",
             className: ax([styles.contentContainer, "_ku9g126e _18bk1rpy"])
           }, /*#__PURE__*/React.createElement(DropdownItemGroup, {
             title: formatMessage(messages.syncedLocationDropdownHeading, {
-              count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
+              count: "".concat(locationCount > 99 ? '99+' : locationCount)
             })
-          }, referenceData.map(function (reference) {
-            var title = reference.title === '' && reference.hasAccess ? formatMessage(messages.syncedLocationDropdownUntitledPage) : reference.title || reference.url || '';
-            return /*#__PURE__*/React.createElement("div", {
-              key: reference.title,
-              className: ax(["_2ll012x7"])
-            }, /*#__PURE__*/React.createElement(Tooltip, {
-              content: title
-            }, /*#__PURE__*/React.createElement(DropdownItem, {
-              elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
-                reference: reference,
-                intl: intl
-              }),
-              href: reference.url,
-              target: "_blank",
-              key: reference.title,
-              rel: "noopener noreferrer"
-              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-              ,
-              onClick: function onClick() {
-                return handleLocationClick();
-              }
-            }, /*#__PURE__*/React.createElement(ItemTitle, {
-              title: title,
-              formatMessage: formatMessage,
-              onSameDocument: reference.onSameDocument,
-              isSource: reference.isSource,
-              hasAccess: reference.hasAccess,
-              productType: reference.productType
-            }))));
+          }, locations.kind === 'field-aware' ? /*#__PURE__*/React.createElement(FieldAwareLocationRows, {
+            items: locations.items,
+            intl: intl,
+            handleLocationClick: handleLocationClick
+          }) : /*#__PURE__*/React.createElement(ControlLocationRows, {
+            referenceData: locations.references,
+            intl: intl,
+            handleLocationClick: handleLocationClick
           })));
         } else {
           return /*#__PURE__*/React.createElement(NoResultScreen, {
@@ -716,17 +825,127 @@ var DropdownContentWithReferenceData = function DropdownContentWithReferenceData
     }
   };
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.dropdownContent, expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true) && fetchStatus === 'success' && referenceData.length === 0 && styles.activationDropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
+    xcss: cx(styles.dropdownContent,
+    // Read off the discriminant rather than the experiment, so the control cohort
+    // cannot reach this width and no second exposure is fired for a style.
+    locations.kind === 'field-aware' && styles.fieldAwareDropdownContent, expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true) && fetchStatus === 'success' && locationCount === 0 && styles.activationDropdownContent, shouldApplyMinHeight(fetchStatus, locationCount) && styles.containerWithMinHeight)
   }, content());
 };
-var LoadingScreen = function LoadingScreen(_ref12) {
-  var formatMessage = _ref12.formatMessage;
+// The pre-experiment rows. This block is master's, moved into a component; remove with the experiment.
+var ControlLocationRows = function ControlLocationRows(_ref14) {
+  var referenceData = _ref14.referenceData,
+    intl = _ref14.intl,
+    handleLocationClick = _ref14.handleLocationClick;
+  var formatMessage = intl.formatMessage;
+  return /*#__PURE__*/React.createElement(Fragment, null, referenceData.map(function (reference) {
+    var title = reference.title === '' && reference.hasAccess ? formatMessage(messages.syncedLocationDropdownUntitledPage) : reference.title || reference.url || '';
+    return /*#__PURE__*/React.createElement("div", {
+      key: reference.title,
+      className: ax(["_2ll012x7"])
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: title
+    }, /*#__PURE__*/React.createElement(DropdownItem, {
+      elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+        reference: reference,
+        intl: intl
+      }),
+      href: reference.url,
+      target: "_blank",
+      key: reference.title,
+      rel: "noopener noreferrer"
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
+      onClick: function onClick() {
+        return handleLocationClick();
+      }
+    }, /*#__PURE__*/React.createElement(ItemTitle, {
+      title: title,
+      formatMessage: formatMessage,
+      onSameDocument: reference.onSameDocument,
+      isSource: reference.isSource,
+      hasAccess: reference.hasAccess,
+      productType: reference.productType
+    }))));
+  }));
+};
+var FieldAwareItemTitle = function FieldAwareItemTitle(_ref15) {
+  var _ref15$item = _ref15.item,
+    baseTitle = _ref15$item.baseTitle,
+    fieldName = _ref15$item.fieldName,
+    note = _ref15$item.note,
+    reference = _ref15$item.reference,
+    formatMessage = _ref15.formatMessage;
+  var titleLine = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.title
+  }, baseTitle), note && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", note), reference.isSource && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !reference.hasAccess && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.requestAccess
+  }, formatMessage(messages.syncedLocationDropdownRequestAccess)));
+  if (fieldName === undefined) {
+    return titleLine;
+  }
+
+  // AGG localises the field name, so it is shown as given rather than wrapped in a message.
+  return /*#__PURE__*/React.createElement(Stack, null, titleLine, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.fieldSecondLine
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtlest"
+  }, fieldName)));
+};
+var FieldAwareLocationRows = function FieldAwareLocationRows(_ref16) {
+  var items = _ref16.items,
+    intl = _ref16.intl,
+    handleLocationClick = _ref16.handleLocationClick;
+  var formatMessage = intl.formatMessage;
+  return /*#__PURE__*/React.createElement(Fragment, null, items.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: ax(["_2ll012x7"])
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: item.fieldName ?
+      /*#__PURE__*/
+      // Two lines in the tooltip's own text flow. Wrapping them in `Text` would
+      // default to `font.body` and override the container's `font.body.small`,
+      // so the field-aware tooltip would not match every other one.
+      React.createElement(Fragment, null, item.baseTitle, /*#__PURE__*/React.createElement("br", null), formatMessage(messages.syncedLocationDropdownTooltipFieldName, {
+        fieldName: item.fieldName
+      })) : item.baseTitle
+    }, /*#__PURE__*/React.createElement(DropdownItem, {
+      elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+        reference: item.reference,
+        intl: intl
+      }),
+      href: item.reference.url,
+      target: "_blank",
+      rel: "noopener noreferrer"
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
+      onClick: function onClick() {
+        return handleLocationClick();
+      }
+    }, /*#__PURE__*/React.createElement(FieldAwareItemTitle, {
+      item: item,
+      formatMessage: formatMessage
+    }))));
+  }));
+};
+var LoadingScreen = function LoadingScreen(_ref17) {
+  var formatMessage = _ref17.formatMessage;
   return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, {
     label: formatMessage(messages.syncedLocationDropdownLoading)
   }));
 };
-var ErrorScreen = function ErrorScreen(_ref13) {
-  var formatMessage = _ref13.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref18) {
+  var formatMessage = _ref18.formatMessage;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -742,8 +961,8 @@ var ErrorScreen = function ErrorScreen(_ref13) {
     size: "medium"
   }, formatMessage(messages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref14) {
-  var formatMessage = _ref14.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref19) {
+  var formatMessage = _ref19.formatMessage;
   return expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Box, {
     xcss: styles.activationNoResultsContainer,
     testId: "synced-locations-dropdown-content-no-results"

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

@@ -11,7 +11,26 @@ interface Props {
     resourceId: string;
     syncBlockStore: SyncBlockStoreManager;
 }
+/**
+ * One field-aware dropdown row. Every string the row shows is composed here from the untouched
+ * provider `reference`. Only built with `editor_synced_blocks_jira_custom_rich_text` on.
+ */
+export type SyncedLocationItem = {
+    /**
+     * Work item or page title, with the untitled fallback and the block index applied.
+     * Never carries the field name, so the row and the tooltip can place it differently.
+     */
+    baseTitle: string;
+    /** Jira field holding the block, when the provider resolved one. */
+    fieldName?: string;
+    /** `sourceAri` plus the block's position within that source. */
+    key: string;
+    /** Same-location note shown after the title. */
+    note?: string;
+    reference: SyncBlockSourceInfo;
+};
 export declare const processReferenceData: (referenceData: ReferencesSourceInfo['references'], intl: IntlShape) => SyncBlockSourceInfo[];
+export declare const buildFieldAwareItems: (referenceData: ReferencesSourceInfo['references'], formatMessage: IntlShape['formatMessage']) => SyncedLocationItem[];
 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 {};