@atlaskit/editor-plugin-synced-block 5.1.10 → 5.1.12

package/dist/es2019/nodeviews/syncedBlock.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
@@ -17,7 +19,7 @@ export class SyncBlock extends ReactNodeView {
     return domRef;
   }
   render() {
-    var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$options2;
+    var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2, _this$options3;
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
       return null;
     }
@@ -35,13 +37,26 @@ export class SyncBlock extends ReactNodeView {
     }
 
     // get document node from data provider
-    return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+    return fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+      component: ACTION_SUBJECT.SYNCED_BLOCK,
+      dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions.fireAnalyticsEvent,
+      fallbackComponent: null
+    }, /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
       localId: this.node.attrs.localId,
       syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
       useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
       useFetchSyncBlockData: () => {
-        var _this$api2, _this$api2$analytics, _this$api2$analytics$;
-        return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : (_this$api2$analytics$ = _this$api2$analytics.actions) === null || _this$api2$analytics$ === void 0 ? void 0 : _this$api2$analytics$.fireAnalyticsEvent);
+        var _this$api3, _this$api3$analytics, _this$api3$analytics$;
+        return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : (_this$api3$analytics$ = _this$api3$analytics.actions) === null || _this$api3$analytics$ === void 0 ? void 0 : _this$api3$analytics$.fireAnalyticsEvent);
+      },
+      api: this.api
+    })) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+      localId: this.node.attrs.localId,
+      syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
+      useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
+      useFetchSyncBlockData: () => {
+        var _this$api4, _this$api4$analytics, _this$api4$analytics$;
+        return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : (_this$api4$analytics$ = _this$api4$analytics.actions) === null || _this$api4$analytics$ === void 0 ? void 0 : _this$api4$analytics$.fireAnalyticsEvent);
       },
       api: this.api
     });

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

@@ -0,0 +1,26 @@
+
+._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}
+._1bsb1osq{width:100%}
+._1bsb96ou{width:327px}
+._1bsbo8uj{width:235px}
+._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}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ajmmnqa1{text-decoration-style:solid}
+._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}

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -0,0 +1,254 @@
+/* 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 StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+const headingStyles = null;
+const styles = {
+  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
+  note: "_syaz1rpy _o5721q9c",
+  lozenge: "_ahbq1b66 _1ul91wqb",
+  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  dropdownContent: "_1rjcv77o _1bsb96ou _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  contentContainer: "_1bsb1osq _1wpz1fhb _18m91wug",
+  errorContainer: "_1bsbo8uj _1e0c1txw",
+  errorIcon: "_1mour5cr",
+  learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
+};
+const ItemTitle = ({
+  title,
+  formatMessage,
+  onSamePage,
+  isSource
+}) => {
+  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))));
+};
+const Logo = ({
+  product
+}) => {
+  switch (product) {
+    case 'confluence-page':
+      return /*#__PURE__*/React.createElement(ConfluenceIcon, {
+        size: "xsmall"
+      });
+    case 'jira-work-item':
+      return /*#__PURE__*/React.createElement(JiraIcon, {
+        size: "xsmall"
+      });
+    default:
+      return null;
+  }
+};
+const ItemIcon = ({
+  reference
+}) => {
+  const {
+    hasAccess,
+    subType
+  } = reference;
+  const icon = hasAccess ? subType ? PageLiveDocIcon : PageIcon : () => /*#__PURE__*/React.createElement(Logo, {
+    product: reference.productType
+  });
+  return /*#__PURE__*/React.createElement(IconTile, {
+    icon: icon,
+    label: "",
+    appearance: hasAccess ? 'grayBold' : 'gray',
+    size: "xsmall"
+  });
+};
+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(DropdownItem, {
+            elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+              reference: reference
+            }),
+            href: reference.url,
+            key: reference.title
+          }, /*#__PURE__*/React.createElement(ItemTitle, {
+            title: reference.title || reference.url || '',
+            formatMessage: formatMessage,
+            onSamePage: reference.onSamePage,
+            isSource: reference.isSource
+          })))));
+        } 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);
@@ -25,6 +26,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 +53,22 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
     };
     items.push(deleteButton);
   } else {
+    if (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/nodeviews/bodiedSyncedBlock.js

@@ -6,10 +6,13 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 var toDOM = function toDOM() {
   return ['div', {
@@ -82,12 +85,20 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
-      var _this$api5;
+      var _this$api5, _this$api6;
       var syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.syncedBlock.sharedState) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.currentState()) === null || _this$api5 === void 0 ? void 0 : _this$api5.syncBlockStore;
       if (!syncBlockStore) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
+      return fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+        component: ACTION_SUBJECT.SYNCED_BLOCK,
+        dispatchAnalyticsEvent: (_this$api6 = this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions.fireAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
+        ref: forwardRef,
+        syncBlockStore: syncBlockStore,
+        node: this.node
+      })) : /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
         ref: forwardRef,
         syncBlockStore: syncBlockStore,
         node: this.node

package/dist/esm/nodeviews/syncedBlock.js

@@ -8,6 +8,8 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { useFetchSyncBlockData as _useFetchSyncBlockData, useFetchSyncBlockTitle as _useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
@@ -37,8 +39,10 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       var _this$options,
         _this$api$syncedBlock,
         _this$api,
+        _this$api2,
         _this$options2,
-        _this2 = this;
+        _this2 = this,
+        _this$options3;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
         return null;
       }
@@ -55,7 +59,11 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       }
 
       // get document node from data provider
-      return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+      return fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+        component: ACTION_SUBJECT.SYNCED_BLOCK,
+        dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions.fireAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
         useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
@@ -66,6 +74,17 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           return _useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this2$api = _this2.api) === null || _this2$api === void 0 || (_this2$api = _this2$api.analytics) === null || _this2$api === void 0 || (_this2$api = _this2$api.actions) === null || _this2$api === void 0 ? void 0 : _this2$api.fireAnalyticsEvent);
         },
         api: this.api
+      })) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+        localId: this.node.attrs.localId,
+        syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
+        useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
+          return _useFetchSyncBlockTitle(syncBlockStore, _this2.node);
+        },
+        useFetchSyncBlockData: function useFetchSyncBlockData() {
+          var _this2$api2;
+          return _useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this2$api2 = _this2.api) === null || _this2$api2 === void 0 || (_this2$api2 = _this2$api2.analytics) === null || _this2$api2 === void 0 || (_this2$api2 = _this2$api2.actions) === null || _this2$api2 === void 0 ? void 0 : _this2$api2.fireAnalyticsEvent);
+        },
+        api: this.api
       });
     }
   }, {

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

@@ -0,0 +1,26 @@
+
+._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}
+._1bsb1osq{width:100%}
+._1bsb96ou{width:327px}
+._1bsbo8uj{width:235px}
+._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}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ajmmnqa1{text-decoration-style:solid}
+._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}