@atlaskit/editor-plugin-synced-block 5.1.11 → 5.1.13

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -0,0 +1,283 @@
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./SyncedLocationDropdown.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState, useEffect } from 'react';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { IconTile } from '@atlaskit/icon';
+import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import PageIcon from '@atlaskit/icon/core/page';
+import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
+import StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+const fadeIn = null;
+const headingStyles = null;
+const dropdownItemStyles = null;
+
+// logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
+const logoTileStyles = null;
+const styles = {
+  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
+  note: "_syaz1rpy _o5721q9c",
+  lozenge: "_ahbq12x7 _1ul91wqb",
+  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
+  errorContainer: "_1bsbo8uj _1e0c1txw",
+  errorIcon: "_1mour5cr",
+  learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
+  requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
+};
+const ItemTitle = ({
+  title,
+  formatMessage,
+  onSamePage,
+  isSource,
+  hasAccess
+}) => {
+  return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.title
+  }, title), onSamePage && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.requestAccess
+  }, formatMessage(messages.syncedLocationDropdownRequestAccess)));
+};
+const productIconMap = {
+  'confluence-page': ConfluenceIcon,
+  'jira-work-item': JiraIcon
+};
+const subTypeIconMap = {
+  live: PageLiveDocIcon,
+  page: PageIcon,
+  blogpost: QuotationMarkIcon
+};
+const getSubTypeIcon = subType => {
+  return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
+};
+const ProductIcon = ({
+  product
+}) => {
+  var _productIconMap$produ;
+  const ProductIcon = product ? (_productIconMap$produ = productIconMap[product]) !== null && _productIconMap$produ !== void 0 ? _productIconMap$produ : AtlassianIcon : AtlassianIcon;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, /*#__PURE__*/React.createElement(ProductIcon, {
+    size: "xxsmall",
+    appearance: "neutral"
+  }));
+};
+const ItemIcon = ({
+  reference
+}) => {
+  const {
+    hasAccess,
+    subType
+  } = reference;
+  if (hasAccess) {
+    return /*#__PURE__*/React.createElement(IconTile, {
+      icon: getSubTypeIcon(subType),
+      label: "",
+      appearance: 'gray',
+      size: "xsmall"
+    });
+  }
+  return /*#__PURE__*/React.createElement(ProductIcon, {
+    product: reference.productType
+  });
+};
+export const processReferenceData = (referenceData, intl) => {
+  const {
+    formatMessage
+  } = intl;
+  const sourceInfoMap = new Map();
+  referenceData === null || referenceData === void 0 ? void 0 : referenceData.forEach(reference => {
+    if (!reference) {
+      return;
+    }
+    if (sourceInfoMap.has(reference.sourceAri)) {
+      var _sourceInfoMap$get;
+      (_sourceInfoMap$get = sourceInfoMap.get(reference.sourceAri)) === null || _sourceInfoMap$get === void 0 ? void 0 : _sourceInfoMap$get.push(reference);
+    } else {
+      sourceInfoMap.set(reference.sourceAri, [reference]);
+    }
+  });
+  for (const references of sourceInfoMap.values()) {
+    if (references.length > 1) {
+      references.forEach((reference, index) => reference.title = `${reference.title}: ${formatMessage(messages.syncedLocationDropdownTitleBlockIndex, {
+        index: index + 1
+      })}`);
+    }
+  }
+  const sortedReferences = Array.from(sourceInfoMap.values()).flat().sort((a, b) => {
+    if (a.isSource !== b.isSource) {
+      return b.isSource ? 1 : -1;
+    }
+    if (a.hasAccess !== b.hasAccess) {
+      return a.hasAccess ? -1 : 1;
+    }
+    return (a.title || '').localeCompare(b.title || '');
+  });
+  return sortedReferences;
+};
+export const SyncedLocationDropdown = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  const [isOpen, setIsOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: ({
+      isOpen
+    }) => setIsOpen(isOpen),
+    trigger: ({
+      triggerRef,
+      ...triggerProps
+    }) => /*#__PURE__*/React.createElement(Button, _extends({
+      ref: triggerRef,
+      areAnyNewToolbarFlagsEnabled: true,
+      iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      })
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, triggerProps), triggerTitle)
+  }, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId
+  }));
+};
+const DropdownContent = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  const [fetchStatus, setFetchStatus] = useState('none');
+  const [referenceData, setReferenceData] = useState([]);
+  useEffect(() => {
+    setFetchStatus('loading');
+    const getReferenceData = async () => {
+      const response = await syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+      if (response.error) {
+        setFetchStatus('error');
+        return;
+      }
+      setReferenceData(processReferenceData(response.references, intl));
+      setFetchStatus('success');
+    };
+    getReferenceData();
+  }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  const content = () => {
+    switch (fetchStatus) {
+      case 'loading':
+        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+      case 'error':
+        return /*#__PURE__*/React.createElement(ErrorScreen, {
+          formatMessage: formatMessage
+        });
+      case 'success':
+        if (referenceData.length > 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: `${referenceData.length > 99 ? '99+' : referenceData.length}`
+            })
+          }, referenceData.map(reference => /*#__PURE__*/React.createElement("div", {
+            key: reference.title,
+            className: ax(["_2ll012x7"])
+          }, /*#__PURE__*/React.createElement(Tooltip, {
+            content: reference.title || reference.url || ''
+          }, /*#__PURE__*/React.createElement(DropdownItem, {
+            elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+              reference: reference
+            }),
+            href: reference.url,
+            target: "_blank",
+            key: reference.title
+          }, /*#__PURE__*/React.createElement(ItemTitle, {
+            title: reference.title || reference.url || '',
+            formatMessage: formatMessage,
+            onSamePage: reference.onSamePage,
+            isSource: reference.isSource,
+            hasAccess: reference.hasAccess
+          })))))));
+        } else {
+          return /*#__PURE__*/React.createElement(NoResultScreen, {
+            formatMessage: formatMessage
+          });
+        }
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.dropdownContent
+  }, content());
+};
+const LoadingScreen = () => {
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
+};
+const ErrorScreen = ({
+  formatMessage
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorContainer
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorIcon
+  }, /*#__PURE__*/React.createElement(StatusErrorIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    spacing: "spacious",
+    label: "",
+    size: "small"
+  })), /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    size: "medium"
+  }, formatMessage(messages.syncedLocationDropdownError)));
+};
+const NoResultScreen = ({
+  formatMessage
+}) => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.noResultsContainer,
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, formatMessage(messages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(Anchor, {
+    href: "https://hello.atlassian.net/wiki/x/tAtCeAE",
+    target: "_blank",
+    xcss: styles.learnMoreLink
+  }, formatMessage(messages.syncedLocationDropdownLearnMoreLink))));
+};

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

@@ -9,6 +9,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
+import { SyncedLocationDropdown } from './SyncedLocationDropdown';
 export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
   var _api$decorations, _api$connectivity, _api$connectivity$sha;
   const syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
@@ -17,6 +18,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
   }
   const syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
   const isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === SyncBlockError.NotFound;
+  const isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
   const {
     schema: {
       nodes: {
@@ -25,6 +27,10 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
     }
   } = state;
   const isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockObject.node, bodiedSyncBlock);
+  const {
+    resourceId,
+    localId
+  } = syncBlockObject.node.attrs;
   const {
     formatMessage
   } = intl;
@@ -48,6 +54,22 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
     };
     items.push(deleteButton);
   } else {
+    if (!isErroredBlock && fg('platform_synced_block_dogfooding')) {
+      const syncedLocation = {
+        type: 'custom',
+        fallback: [],
+        render: () => {
+          return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
+            syncBlockStore: syncBlockStore,
+            resourceId: resourceId,
+            localId: localId,
+            intl: intl,
+            isSource: isBodiedSyncBlock
+          });
+        }
+      };
+      items.push(syncedLocation);
+    }
     const copyButton = {
       id: 'editor.syncedBlock.copy',
       type: 'button',

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

@@ -0,0 +1,34 @@
+
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
+._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
+._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._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}
+._1bsb19n7{width:106px}
+._1bsb1osq{width:100%}
+._1bsbgktf{width:20px}
+._1bsbo8uj{width:235px}
+._1bsbsmdz{width:342px}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1reo15vq{overflow-x:hidden}
+._1tkeqkoa{min-height:9pc}
+._1ul91wqb{min-width:60px}
+._1wpz1fhb{align-self:stretch}
+._2ll012x7 a>span{column-gap:var(--ds-space-075,6px)}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}
+._ahbq12x7{margin-inline-start:var(--ds-space-075,6px)}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._c71lko4j{max-height:19pc}
+._o5721q9c{white-space:nowrap}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._y3gn1h6o{text-align:center}
+@keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -0,0 +1,320 @@
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["triggerRef"];
+import "./SyncedLocationDropdown.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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 { useState, useEffect } from 'react';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { IconTile } from '@atlaskit/icon';
+import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import PageIcon from '@atlaskit/icon/core/page';
+import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
+import StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+var fadeIn = null;
+var headingStyles = null;
+var dropdownItemStyles = null;
+
+// logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
+var logoTileStyles = null;
+var styles = {
+  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
+  note: "_syaz1rpy _o5721q9c",
+  lozenge: "_ahbq12x7 _1ul91wqb",
+  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
+  errorContainer: "_1bsbo8uj _1e0c1txw",
+  errorIcon: "_1mour5cr",
+  learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
+  requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
+};
+var ItemTitle = function ItemTitle(_ref) {
+  var title = _ref.title,
+    formatMessage = _ref.formatMessage,
+    onSamePage = _ref.onSamePage,
+    isSource = _ref.isSource,
+    hasAccess = _ref.hasAccess;
+  return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.title
+  }, title), onSamePage && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.requestAccess
+  }, formatMessage(messages.syncedLocationDropdownRequestAccess)));
+};
+var productIconMap = {
+  'confluence-page': ConfluenceIcon,
+  'jira-work-item': JiraIcon
+};
+var subTypeIconMap = {
+  live: PageLiveDocIcon,
+  page: PageIcon,
+  blogpost: QuotationMarkIcon
+};
+var getSubTypeIcon = function getSubTypeIcon(subType) {
+  return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
+};
+var ProductIcon = function ProductIcon(_ref2) {
+  var _productIconMap$produ;
+  var product = _ref2.product;
+  var ProductIcon = product ? (_productIconMap$produ = productIconMap[product]) !== null && _productIconMap$produ !== void 0 ? _productIconMap$produ : AtlassianIcon : AtlassianIcon;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, /*#__PURE__*/React.createElement(ProductIcon, {
+    size: "xxsmall",
+    appearance: "neutral"
+  }));
+};
+var ItemIcon = function ItemIcon(_ref3) {
+  var reference = _ref3.reference;
+  var hasAccess = reference.hasAccess,
+    subType = reference.subType;
+  if (hasAccess) {
+    return /*#__PURE__*/React.createElement(IconTile, {
+      icon: getSubTypeIcon(subType),
+      label: "",
+      appearance: 'gray',
+      size: "xsmall"
+    });
+  }
+  return /*#__PURE__*/React.createElement(ProductIcon, {
+    product: reference.productType
+  });
+};
+export var processReferenceData = function processReferenceData(referenceData, intl) {
+  var formatMessage = intl.formatMessage;
+  var sourceInfoMap = new Map();
+  referenceData === null || referenceData === void 0 || referenceData.forEach(function (reference) {
+    if (!reference) {
+      return;
+    }
+    if (sourceInfoMap.has(reference.sourceAri)) {
+      var _sourceInfoMap$get;
+      (_sourceInfoMap$get = sourceInfoMap.get(reference.sourceAri)) === null || _sourceInfoMap$get === void 0 || _sourceInfoMap$get.push(reference);
+    } else {
+      sourceInfoMap.set(reference.sourceAri, [reference]);
+    }
+  });
+  var _iterator = _createForOfIteratorHelper(sourceInfoMap.values()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var references = _step.value;
+      if (references.length > 1) {
+        references.forEach(function (reference, index) {
+          return reference.title = "".concat(reference.title, ": ").concat(formatMessage(messages.syncedLocationDropdownTitleBlockIndex, {
+            index: index + 1
+          }));
+        });
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var sortedReferences = Array.from(sourceInfoMap.values()).flat().sort(function (a, b) {
+    if (a.isSource !== b.isSource) {
+      return b.isSource ? 1 : -1;
+    }
+    if (a.hasAccess !== b.hasAccess) {
+      return a.hasAccess ? -1 : 1;
+    }
+    return (a.title || '').localeCompare(b.title || '');
+  });
+  return sortedReferences;
+};
+export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
+  var syncBlockStore = _ref4.syncBlockStore,
+    resourceId = _ref4.resourceId,
+    intl = _ref4.intl,
+    isSource = _ref4.isSource,
+    localId = _ref4.localId;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange(_ref5) {
+      var isOpen = _ref5.isOpen;
+      return setIsOpen(isOpen);
+    },
+    trigger: function trigger(_ref6) {
+      var triggerRef = _ref6.triggerRef,
+        triggerProps = _objectWithoutProperties(_ref6, _excluded);
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        ref: triggerRef,
+        areAnyNewToolbarFlagsEnabled: true,
+        iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: "",
+          size: "small"
+        })
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, triggerProps), triggerTitle);
+    }
+  }, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId
+  }));
+};
+var DropdownContent = function DropdownContent(_ref7) {
+  var syncBlockStore = _ref7.syncBlockStore,
+    resourceId = _ref7.resourceId,
+    intl = _ref7.intl,
+    isSource = _ref7.isSource,
+    localId = _ref7.localId;
+  var formatMessage = intl.formatMessage;
+  var _useState3 = useState('none'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fetchStatus = _useState4[0],
+    setFetchStatus = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    referenceData = _useState6[0],
+    setReferenceData = _useState6[1];
+  useEffect(function () {
+    setFetchStatus('loading');
+    var getReferenceData = /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var response;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+            case 2:
+              response = _context.sent;
+              if (!response.error) {
+                _context.next = 6;
+                break;
+              }
+              setFetchStatus('error');
+              return _context.abrupt("return");
+            case 6:
+              setReferenceData(processReferenceData(response.references, intl));
+              setFetchStatus('success');
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getReferenceData() {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    getReferenceData();
+  }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  var content = function content() {
+    switch (fetchStatus) {
+      case 'loading':
+        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+      case 'error':
+        return /*#__PURE__*/React.createElement(ErrorScreen, {
+          formatMessage: formatMessage
+        });
+      case 'success':
+        if (referenceData.length > 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)
+            })
+          }, referenceData.map(function (reference) {
+            return /*#__PURE__*/React.createElement("div", {
+              key: reference.title,
+              className: ax(["_2ll012x7"])
+            }, /*#__PURE__*/React.createElement(Tooltip, {
+              content: reference.title || reference.url || ''
+            }, /*#__PURE__*/React.createElement(DropdownItem, {
+              elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+                reference: reference
+              }),
+              href: reference.url,
+              target: "_blank",
+              key: reference.title
+            }, /*#__PURE__*/React.createElement(ItemTitle, {
+              title: reference.title || reference.url || '',
+              formatMessage: formatMessage,
+              onSamePage: reference.onSamePage,
+              isSource: reference.isSource,
+              hasAccess: reference.hasAccess
+            }))));
+          })));
+        } else {
+          return /*#__PURE__*/React.createElement(NoResultScreen, {
+            formatMessage: formatMessage
+          });
+        }
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.dropdownContent
+  }, content());
+};
+var LoadingScreen = function LoadingScreen() {
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
+};
+var ErrorScreen = function ErrorScreen(_ref9) {
+  var formatMessage = _ref9.formatMessage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorContainer
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorIcon
+  }, /*#__PURE__*/React.createElement(StatusErrorIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    spacing: "spacious",
+    label: "",
+    size: "small"
+  })), /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    size: "medium"
+  }, formatMessage(messages.syncedLocationDropdownError)));
+};
+var NoResultScreen = function NoResultScreen(_ref0) {
+  var formatMessage = _ref0.formatMessage;
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.noResultsContainer,
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, formatMessage(messages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(Anchor, {
+    href: "https://hello.atlassian.net/wiki/x/tAtCeAE",
+    target: "_blank",
+    xcss: styles.learnMoreLink
+  }, formatMessage(messages.syncedLocationDropdownLearnMoreLink))));
+};