@atlaskit/editor-plugin-synced-block 8.3.15 → 8.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 8.4.0
+
+### Minor Changes
+
+- [`6644994a61d9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6644994a61d9c) -
+  Add editor-positioned dropdown support for custom floating toolbar items
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.3.15
 
 ### Patch Changes

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -22,6 +22,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _icon = require("@atlaskit/icon");
 var _pageLiveDoc = _interopRequireDefault(require("@atlaskit/icon-lab/core/page-live-doc"));
@@ -36,6 +37,7 @@ var _subtasks = _interopRequireDefault(require("@atlaskit/icon/core/subtasks"));
 var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
 var _logo = require("@atlaskit/logo");
 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 _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -50,6 +52,7 @@ 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 SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 var styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -305,27 +308,133 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
     intl = _ref4.intl,
     isSource = _ref4.isSource,
     localId = _ref4.localId,
-    api = _ref4.api;
+    api = _ref4.api,
+    floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
+  if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+      syncBlockStore: syncBlockStore,
+      resourceId: resourceId,
+      intl: intl,
+      isSource: isSource,
+      localId: localId,
+      api: api,
+      floatingToolbarRenderContext: floatingToolbarRenderContext
+    });
+  }
+  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  });
+};
+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 formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
+  var toggleOpen = (0, _react.useCallback)(function () {
+    setIsOpen(function (currentIsOpen) {
+      return !currentIsOpen;
+    });
+  }, []);
+  var closeDropdown = (0, _react.useCallback)(function () {
+    setIsOpen(false);
+  }, []);
+  var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  (0, _react.useEffect)(function () {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(true);
+    return function () {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  var trigger = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, {
+      areAnyNewToolbarFlagsEnabled: true,
+      selected: isOpen,
+      iconAfter: /*#__PURE__*/React.createElement(_chevronDown.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      }),
+      onClick: toggleOpen,
+      ariaHasPopup: true
+    }, triggerTitle);
+  }, [isOpen, toggleOpen, triggerTitle]);
+  return /*#__PURE__*/React.createElement(_uiMenu.DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
+var LegacySyncedLocationDropdown = function LegacySyncedLocationDropdown(_ref6) {
+  var syncBlockStore = _ref6.syncBlockStore,
+    resourceId = _ref6.resourceId,
+    intl = _ref6.intl,
+    isSource = _ref6.isSource,
+    localId = _ref6.localId,
+    api = _ref6.api;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
   return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
     isOpen: isOpen
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
-    onOpenChange: function onOpenChange(_ref5) {
-      var isOpen = _ref5.isOpen;
+    onOpenChange: function onOpenChange(_ref7) {
+      var isOpen = _ref7.isOpen;
       return setIsOpen(isOpen);
     },
-    testId: "synced-block-synced-locations-dropdown"
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
-    trigger: function trigger(_ref6) {
-      var triggerRef = _ref6.triggerRef,
-        triggerProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+    trigger: function trigger(_ref8) {
+      var triggerRef = _ref8.triggerRef,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
       return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, (0, _extends2.default)({
         ref: triggerRef,
         areAnyNewToolbarFlagsEnabled: true,
@@ -339,35 +448,28 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
         // 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,
-    api: api
-  }));
+  }, content);
 };
-var DropdownContent = function DropdownContent(_ref7) {
-  var syncBlockStore = _ref7.syncBlockStore,
-    resourceId = _ref7.resourceId,
-    intl = _ref7.intl,
-    isSource = _ref7.isSource,
-    localId = _ref7.localId,
-    api = _ref7.api;
+var DropdownContent = function DropdownContent(_ref9) {
+  var syncBlockStore = _ref9.syncBlockStore,
+    resourceId = _ref9.resourceId,
+    intl = _ref9.intl,
+    isSource = _ref9.isSource,
+    localId = _ref9.localId,
+    api = _ref9.api;
   var formatMessage = intl.formatMessage;
-  var _useState3 = (0, _react.useState)('none'),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    fetchStatus = _useState4[0],
-    setFetchStatus = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)('none'),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    referenceData = _useState6[0],
-    setReferenceData = _useState6[1];
+    fetchStatus = _useState6[0],
+    setFetchStatus = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    referenceData = _useState8[0],
+    setReferenceData = _useState8[1];
   (0, _react.useEffect)(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _ref0 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var response;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -392,7 +494,7 @@ var DropdownContent = function DropdownContent(_ref7) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref8.apply(this, arguments);
+        return _ref0.apply(this, arguments);
       };
     }();
     getReferenceData();
@@ -470,8 +572,8 @@ var DropdownContent = function DropdownContent(_ref7) {
 var LoadingScreen = function LoadingScreen() {
   return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_spinner.default, null));
 };
-var ErrorScreen = function ErrorScreen(_ref9) {
-  var formatMessage = _ref9.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref1) {
+  var formatMessage = _ref1.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -487,8 +589,8 @@ var ErrorScreen = function ErrorScreen(_ref9) {
     size: "medium"
   }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref0) {
-  var formatMessage = _ref0.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref10) {
+  var formatMessage = _ref10.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Stack, {
     xcss: styles.noResultsContainer,
     space: "space.100",

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

@@ -69,14 +69,15 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       var syncedLocation = {
         type: 'custom',
         fallback: [],
-        render: function render() {
+        render: function render(_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) {
           return /*#__PURE__*/_react.default.createElement(_SyncedLocationDropdown.SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,
             localId: localId,
             intl: intl,
             isSource: isBodiedSyncBlock,
-            api: api
+            api: api,
+            floatingToolbarRenderContext: floatingToolbarRenderContext
           });
         }
       };

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -3,13 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./SyncedLocationDropdown.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownContainer } from '@atlaskit/editor-common/ui-menu';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
 import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
@@ -24,6 +25,7 @@ import SubtaskIcon from '@atlaskit/icon/core/subtasks';
 import TaskIcon from '@atlaskit/icon/core/task';
 import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
@@ -33,6 +35,7 @@ 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 SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 const styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -278,6 +281,101 @@ export const processReferenceData = (referenceData, intl) => {
   return sortedReferences;
 };
 export const SyncedLocationDropdown = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId,
+  api,
+  floatingToolbarRenderContext
+}) => {
+  if (fg('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+      syncBlockStore: syncBlockStore,
+      resourceId: resourceId,
+      intl: intl,
+      isSource: isSource,
+      localId: localId,
+      api: api,
+      floatingToolbarRenderContext: floatingToolbarRenderContext
+    });
+  }
+  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  });
+};
+const EditorPositionedSyncedLocationDropdown = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId,
+  api,
+  floatingToolbarRenderContext
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  const [isOpen, setIsOpen] = useState(false);
+  const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
+  const toggleOpen = useCallback(() => {
+    setIsOpen(currentIsOpen => !currentIsOpen);
+  }, []);
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 ? void 0 : setDisableParentScroll(true);
+    return () => {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 ? void 0 : setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  const trigger = useMemo(() => /*#__PURE__*/React.createElement(Button, {
+    areAnyNewToolbarFlagsEnabled: true,
+    selected: isOpen,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      size: "small"
+    }),
+    onClick: toggleOpen,
+    ariaHasPopup: true
+  }, triggerTitle), [isOpen, toggleOpen, triggerTitle]);
+  return /*#__PURE__*/React.createElement(DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
+const LegacySyncedLocationDropdown = ({
   syncBlockStore,
   resourceId,
   intl,
@@ -290,6 +388,14 @@ export const SyncedLocationDropdown = ({
   } = intl;
   const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
   const [isOpen, setIsOpen] = useState(false);
+  const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     isOpen: isOpen
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -297,7 +403,7 @@ export const SyncedLocationDropdown = ({
     onOpenChange: ({
       isOpen
     }) => setIsOpen(isOpen),
-    testId: "synced-block-synced-locations-dropdown"
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     trigger: ({
@@ -315,14 +421,7 @@ export const SyncedLocationDropdown = ({
       })
       // 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,
-    api: api
-  }));
+  }, content);
 };
 const DropdownContent = ({
   syncBlockStore,

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

@@ -65,14 +65,15 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
       const syncedLocation = {
         type: 'custom',
         fallback: [],
-        render: () => {
+        render: (_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) => {
           return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,
             localId: localId,
             intl: intl,
             isSource: isBodiedSyncBlock,
-            api: api
+            api: api,
+            floatingToolbarRenderContext: floatingToolbarRenderContext
           });
         }
       };

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -11,13 +11,14 @@ 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 { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownContainer } from '@atlaskit/editor-common/ui-menu';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
 import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
@@ -32,6 +33,7 @@ import SubtaskIcon from '@atlaskit/icon/core/subtasks';
 import TaskIcon from '@atlaskit/icon/core/task';
 import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
@@ -41,6 +43,7 @@ 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 SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 var styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
   note: "_syaz1rpy _o5721q9c",
@@ -296,27 +299,133 @@ export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
     intl = _ref4.intl,
     isSource = _ref4.isSource,
     localId = _ref4.localId,
-    api = _ref4.api;
+    api = _ref4.api,
+    floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
+  if (fg('platform_synced_block_patch_13')) {
+    return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
+      syncBlockStore: syncBlockStore,
+      resourceId: resourceId,
+      intl: intl,
+      isSource: isSource,
+      localId: localId,
+      api: api,
+      floatingToolbarRenderContext: floatingToolbarRenderContext
+    });
+  }
+  return /*#__PURE__*/React.createElement(LegacySyncedLocationDropdown, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  });
+};
+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 formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
+  var toggleOpen = useCallback(function () {
+    setIsOpen(function (currentIsOpen) {
+      return !currentIsOpen;
+    });
+  }, []);
+  var closeDropdown = useCallback(function () {
+    setIsOpen(false);
+  }, []);
+  var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(true);
+    return function () {
+      setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(false);
+    };
+  }, [isOpen, setDisableParentScroll]);
+  var trigger = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      areAnyNewToolbarFlagsEnabled: true,
+      selected: isOpen,
+      iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      }),
+      onClick: toggleOpen,
+      ariaHasPopup: true
+    }, triggerTitle);
+  }, [isOpen, toggleOpen, triggerTitle]);
+  return /*#__PURE__*/React.createElement(DropdownContainer, {
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
+    isOpen: isOpen,
+    trigger: trigger,
+    handleClickOutside: closeDropdown,
+    handleEscapeKeydown: closeDropdown,
+    mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
+    boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
+    scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    }
+  }, content);
+};
+var LegacySyncedLocationDropdown = function LegacySyncedLocationDropdown(_ref6) {
+  var syncBlockStore = _ref6.syncBlockStore,
+    resourceId = _ref6.resourceId,
+    intl = _ref6.intl,
+    isSource = _ref6.isSource,
+    localId = _ref6.localId,
+    api = _ref6.api;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId,
+    api: api
+  }) : null;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     isOpen: isOpen
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
-    onOpenChange: function onOpenChange(_ref5) {
-      var isOpen = _ref5.isOpen;
+    onOpenChange: function onOpenChange(_ref7) {
+      var isOpen = _ref7.isOpen;
       return setIsOpen(isOpen);
     },
-    testId: "synced-block-synced-locations-dropdown"
+    testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
-    trigger: function trigger(_ref6) {
-      var triggerRef = _ref6.triggerRef,
-        triggerProps = _objectWithoutProperties(_ref6, _excluded);
+    trigger: function trigger(_ref8) {
+      var triggerRef = _ref8.triggerRef,
+        triggerProps = _objectWithoutProperties(_ref8, _excluded);
       return /*#__PURE__*/React.createElement(Button, _extends({
         ref: triggerRef,
         areAnyNewToolbarFlagsEnabled: true,
@@ -330,35 +439,28 @@ export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
         // 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,
-    api: api
-  }));
+  }, content);
 };
-var DropdownContent = function DropdownContent(_ref7) {
-  var syncBlockStore = _ref7.syncBlockStore,
-    resourceId = _ref7.resourceId,
-    intl = _ref7.intl,
-    isSource = _ref7.isSource,
-    localId = _ref7.localId,
-    api = _ref7.api;
+var DropdownContent = function DropdownContent(_ref9) {
+  var syncBlockStore = _ref9.syncBlockStore,
+    resourceId = _ref9.resourceId,
+    intl = _ref9.intl,
+    isSource = _ref9.isSource,
+    localId = _ref9.localId,
+    api = _ref9.api;
   var formatMessage = intl.formatMessage;
-  var _useState3 = useState('none'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    fetchStatus = _useState4[0],
-    setFetchStatus = _useState4[1];
-  var _useState5 = useState([]),
+  var _useState5 = useState('none'),
     _useState6 = _slicedToArray(_useState5, 2),
-    referenceData = _useState6[0],
-    setReferenceData = _useState6[1];
+    fetchStatus = _useState6[0],
+    setFetchStatus = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    referenceData = _useState8[0],
+    setReferenceData = _useState8[1];
   useEffect(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref0 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var response;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -383,7 +485,7 @@ var DropdownContent = function DropdownContent(_ref7) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref8.apply(this, arguments);
+        return _ref0.apply(this, arguments);
       };
     }();
     getReferenceData();
@@ -461,8 +563,8 @@ var DropdownContent = function DropdownContent(_ref7) {
 var LoadingScreen = function LoadingScreen() {
   return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
 };
-var ErrorScreen = function ErrorScreen(_ref9) {
-  var formatMessage = _ref9.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref1) {
+  var formatMessage = _ref1.formatMessage;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -478,8 +580,8 @@ var ErrorScreen = function ErrorScreen(_ref9) {
     size: "medium"
   }, formatMessage(messages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref0) {
-  var formatMessage = _ref0.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref10) {
+  var formatMessage = _ref10.formatMessage;
   return /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.noResultsContainer,
     space: "space.100",

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

@@ -60,14 +60,15 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
       var syncedLocation = {
         type: 'custom',
         fallback: [],
-        render: function render() {
+        render: function render(_view, _idx, _dispatchAnalyticsEvent, floatingToolbarRenderContext) {
           return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
             syncBlockStore: syncBlockStore,
             resourceId: resourceId,
             localId: localId,
             intl: intl,
             isSource: isBodiedSyncBlock,
-            api: api
+            api: api,
+            floatingToolbarRenderContext: floatingToolbarRenderContext
           });
         }
       };

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

@@ -1,9 +1,10 @@
 import type { IntlShape } from 'react-intl';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, FloatingToolbarCustomRenderContext } from '@atlaskit/editor-common/types';
 import type { SyncBlockSourceInfo, SyncBlockStoreManager, ReferencesSourceInfo } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 interface Props {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    floatingToolbarRenderContext?: FloatingToolbarCustomRenderContext;
     intl: IntlShape;
     isSource: boolean;
     localId: string;
@@ -11,5 +12,5 @@ interface Props {
     syncBlockStore: SyncBlockStoreManager;
 }
 export declare const processReferenceData: (referenceData: ReferencesSourceInfo["references"], intl: IntlShape) => SyncBlockSourceInfo[];
-export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, api, }: Props) => JSX.Element;
+export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, api, floatingToolbarRenderContext, }: Props) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/SyncedLocationDropdown.d.ts

@@ -1,9 +1,10 @@
 import type { IntlShape } from 'react-intl';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, FloatingToolbarCustomRenderContext } from '@atlaskit/editor-common/types';
 import type { SyncBlockSourceInfo, SyncBlockStoreManager, ReferencesSourceInfo } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 interface Props {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    floatingToolbarRenderContext?: FloatingToolbarCustomRenderContext;
     intl: IntlShape;
     isSource: boolean;
     localId: string;
@@ -11,5 +12,5 @@ interface Props {
     syncBlockStore: SyncBlockStoreManager;
 }
 export declare const processReferenceData: (referenceData: ReferencesSourceInfo["references"], intl: IntlShape) => SyncBlockSourceInfo[];
-export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, api, }: Props) => JSX.Element;
+export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, api, floatingToolbarRenderContext, }: Props) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "8.3.15",
+	"version": "8.4.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-connectivity": "10.1.0",
 		"@atlaskit/editor-plugin-content-format": "^4.1.0",
 		"@atlaskit/editor-plugin-decorations": "^10.1.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^12.1.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^12.2.0",
 		"@atlaskit/editor-plugin-focus": "^9.1.0",
 		"@atlaskit/editor-plugin-selection": "^10.1.0",
 		"@atlaskit/editor-plugin-user-intent": "^8.2.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "19.1.2",
-		"@atlaskit/tmp-editor-statsig": "^82.3.0",
+		"@atlaskit/tmp-editor-statsig": "^82.4.0",
 		"@atlaskit/tokens": "13.0.4",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
@@ -64,7 +64,7 @@
 		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.41.0",
+		"@atlaskit/editor-common": "^114.42.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -115,6 +115,9 @@
 		},
 		"platform_synced_block_patch_12": {
 			"type": "boolean"
+		},
+		"platform_synced_block_patch_13": {
+			"type": "boolean"
 		}
 	}
 }