@atlaskit/editor-plugin-synced-block 5.3.1 → 5.3.2

package/dist/esm/ui/DeleteConfirmationModal.js

@@ -1,4 +1,9 @@
+/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./DeleteConfirmationModal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
@@ -7,20 +12,52 @@ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages'
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Text } from '@atlaskit/primitives/compiled';
+import { Text, Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
+var modalContentMap = {
+  'source-block-deleted': {
+    titleMultiple: messages.deleteConfirmationModalTitleSingle,
+    titleSingle: messages.deleteConfirmationModalTitleSingle,
+    descriptionSingle: messages.deleteConfirmationModalDescriptionNoRef,
+    descriptionMultiple: messages.deleteConfirmationModalDescription,
+    confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
+  },
+  'source-block-unsynced': {
+    titleMultiple: messages.unsyncConfirmationModalTitle,
+    titleSingle: messages.unsyncConfirmationModalTitle,
+    descriptionSingle: messages.unsyncConfirmationModalDescriptionSingle,
+    descriptionMultiple: messages.unsyncConfirmationModalDescriptionMultiple,
+    confirmButtonLabel: messages.deleteConfirmationModalUnsyncButton
+  }
+};
+var styles = {
+  spinner: "_1mou1wug _195g1wug"
+};
 export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
-  var _api$core2, _api$core4, _api$core6;
+  var _api$core2, _api$core4, _api$core6, _syncBlockIds$length;
   var syncBlockStoreManager = _ref.syncBlockStoreManager,
     api = _ref.api;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  var _useState3 = useState(1),
+  var _useState3 = useState(undefined),
     _useState4 = _slicedToArray(_useState3, 2),
-    syncBlockCount = _useState4[0],
-    setSyncBlockCount = _useState4[1];
+    syncBlockIds = _useState4[0],
+    setSyncBlockIds = _useState4[1];
+  var _useState5 = useState(undefined),
+    _useState6 = _slicedToArray(_useState5, 2),
+    referenceCount = _useState6[0],
+    setReferenceCount = _useState6[1];
+  var _useState7 = useState('source-block-deleted'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    deleteReason = _useState8[0],
+    setDeleteReason = _useState8[1];
+  var _useState9 = useState('none'),
+    _useState0 = _slicedToArray(_useState9, 2),
+    fetchStatus = _useState0[0],
+    setFetchStatus = _useState0[1];
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity', 'syncedBlock'], function (states) {
       var _states$connectivityS, _states$syncedBlockSt, _states$syncedBlockSt2;
       return {
@@ -44,6 +81,8 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
       }
       if (!confirm) {
         setIsOpen(false);
+        setFetchStatus('none');
+        setReferenceCount(undefined);
       }
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
         var tr = _ref2.tr;
@@ -54,9 +93,12 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
       });
     };
   }, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
-  var confirmationCallback = useCallback(function (syncBlockCount) {
+  var confirmationCallback = useCallback(function (syncBlockIds, deleteReason) {
     setIsOpen(true);
-    setSyncBlockCount(syncBlockCount);
+    setSyncBlockIds(syncBlockIds);
+    if (deleteReason) {
+      setDeleteReason(deleteReason);
+    }
     var confirmedPromise = new Promise(function (resolve) {
       resolverRef.current = resolve;
     });
@@ -83,6 +125,7 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
       var _api$core5;
       // auto close modal once deletion is successful
       setIsOpen(false);
+      setFetchStatus('none');
       api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
         var tr = _ref4.tr;
         return tr.setMeta(syncedBlockPluginKey, {
@@ -92,15 +135,76 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
       });
     }
   }, [api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
+  useEffect(function () {
+    if (isOpen && syncBlockIds !== undefined && fg('platform_synced_block_dogfooding')) {
+      var _referenceCount = 0;
+      setFetchStatus('loading');
+      var fetchFailed = false;
+      syncBlockIds.forEach( /*#__PURE__*/function () {
+        var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(syncBlockId) {
+          var references, _references$reference, _references$reference2;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!fetchFailed) {
+                  _context.next = 2;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 2:
+                _context.next = 4;
+                return syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
+              case 4:
+                references = _context.sent;
+                if (!references.error) {
+                  _context.next = 11;
+                  break;
+                }
+                // Consider fetch fails as soon as one of the fetches fails
+                setFetchStatus('error');
+                fetchFailed = true;
+                return _context.abrupt("return");
+              case 11:
+                _referenceCount += (_references$reference = (_references$reference2 = references.references) === null || _references$reference2 === void 0 ? void 0 : _references$reference2.length) !== null && _references$reference !== void 0 ? _references$reference : 0;
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref5.apply(this, arguments);
+        };
+      }());
+      if (!fetchFailed) {
+        setReferenceCount(_referenceCount);
+        setFetchStatus('success');
+      }
+    }
+  }, [isOpen, syncBlockIds, syncBlockStoreManager.sourceManager]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     onClose: handleClick(false),
-    testId: "sync-block-delete-confirmation"
-  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    testId: "sync-block-delete-confirmation",
+    height: 184
+  }, fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(React.Fragment, null, referenceCount === undefined ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.spinner
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large"
+  })) : /*#__PURE__*/React.createElement(ModalContent, {
+    content: modalContentMap[deleteReason],
+    referenceCount: referenceCount,
+    handleClick: handleClick,
+    formatMessage: formatMessage,
+    isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
+    isDisabled: isOfflineMode(mode),
+    deleteReason: deleteReason,
+    failToFetch: fetchStatus === 'error'
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, formatMessage(messages.deleteConfirmationModalTitle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, formatMessage(messages.deleteConfirmationModalDescription, {
-    syncBlockCount: syncBlockCount
+  }, formatMessage(messages.deleteConfirmationModalTitleSingle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, formatMessage(messages.deleteConfirmationModalDescription, {
+    syncBlockCount: (_syncBlockIds$length = syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) !== null && _syncBlockIds$length !== void 0 ? _syncBlockIds$length : 1
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: handleClick(false)
@@ -109,7 +213,41 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
     onClick: handleClick(true),
     autoFocus: true,
     isDisabled: isOfflineMode(mode),
-    isLoading: bodiedSyncBlockDeletionStatus === 'processing',
-    testId: fg('platform_synced_block_dogfooding') ? 'synced-block-delete-confirmation-modal-delete-button' : undefined
-  }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
+  }, formatMessage(messages.deleteConfirmationModalDeleteButton))))));
+};
+var ModalContent = function ModalContent(_ref6) {
+  var content = _ref6.content,
+    referenceCount = _ref6.referenceCount,
+    handleClick = _ref6.handleClick,
+    formatMessage = _ref6.formatMessage,
+    isDeleting = _ref6.isDeleting,
+    isDisabled = _ref6.isDisabled,
+    deleteReason = _ref6.deleteReason,
+    failToFetch = _ref6.failToFetch;
+  var titleMultiple = content.titleMultiple,
+    titleSingle = content.titleSingle,
+    descriptionSingle = content.descriptionSingle,
+    descriptionMultiple = content.descriptionMultiple,
+    confirmButtonLabel = content.confirmButtonLabel;
+  var hasNoReferenceOrFailToFetch = referenceCount === 0 || failToFetch;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, hasNoReferenceOrFailToFetch ? formatMessage(titleSingle) : formatMessage(titleMultiple, {
+    count: referenceCount
+  }))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
+    syncBlockCount: referenceCount
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: handleClick(false)
+  }, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: handleClick(true),
+    autoFocus: true,
+    isDisabled: isDisabled,
+    isLoading: isDeleting,
+    testId: "synced-block-delete-confirmation-modal-".concat(deleteReason, "-button")
+  }, formatMessage(confirmButtonLabel))));
 };

package/dist/esm/ui/SyncBlockLabel.js

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import isYesterday from 'date-fns/isYesterday';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
@@ -9,76 +8,21 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { formatElapsedTime } from './utils/time';
 var SyncBlockLabelDataId = 'sync-block-label';
-var SECONDS_IN_MINUTE = 60;
-var SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
-var SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
-var SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
-var SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
-var SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
-export var formatElapsedTime = function formatElapsedTime(isoDate, intl) {
-  var now = Date.now();
-  var date = new Date(isoDate).getTime();
-  var diffInSeconds = Math.floor((now - date) / 1000);
-  var dateObj = new Date(isoDate);
-
-  // Show "yesterday" when timestamp is from the previous calendar day
-  if (isYesterday(dateObj) && diffInSeconds >= SECONDS_IN_DAY) {
-    return intl.formatRelativeTime(-1, 'day', {
-      numeric: 'auto',
-      style: 'long'
-    });
-  }
-  if (diffInSeconds < SECONDS_IN_MINUTE) {
-    return intl.formatRelativeTime(-Math.max(diffInSeconds, 1), 'second', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_HOUR) {
-    var minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
-    return intl.formatRelativeTime(-minutes, 'minute', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_DAY) {
-    var hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
-    return intl.formatRelativeTime(-hours, 'hour', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_WEEK) {
-    var days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
-    return intl.formatRelativeTime(-days, 'day', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_MONTH) {
-    var weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
-    return intl.formatRelativeTime(-weeks, 'week', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_YEAR) {
-    var months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
-    return intl.formatRelativeTime(-months, 'month', {
-      style: 'long'
-    });
-  } else {
-    var years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
-    return intl.formatRelativeTime(-years, 'year', {
-      style: 'long'
-    });
-  }
-};
 var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
-  var isSource = _ref.isSource,
-    useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
+  var contentUpdatedAt = _ref.contentUpdatedAt,
+    isSource = _ref.isSource,
     localId = _ref.localId,
-    contentUpdatedAt = _ref.contentUpdatedAt;
+    title = _ref.title;
   var intl = useIntl();
   var formatMessage = intl.formatMessage;
-  var title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
   var _useState = useState(formatMessage(messages.defaultSyncBlockTooltip)),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipContent = _useState2[0],
     setTooltipContent = _useState2[1];
   var tooltipMessage = formatMessage(messages.defaultSyncBlockTooltip);
-  if (isSource) {
+  if (isSource && !fg('platform_synced_block_dogfooding')) {
     tooltipMessage = formatMessage(messages.sourceSyncBlockTooltip);
   } else if (title) {
     tooltipMessage = formatMessage(messages.referenceSyncBlockTooltip, {
@@ -107,36 +51,42 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     setTooltipContent(tooltipContent);
   }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   var ariaDescribedById = "sync-block-label-description-".concat(localId);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    position: "top",
-    content: fg('platform_synced_block_dogfooding') ? tooltipContent : tooltipMessage
-    // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
-    // this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
-    // tooltip content is available for screen readers in visually hidden content after the label
-    ,
-    isScreenReaderAnnouncementDisabled: true
-    // using this to ensure that the 'last edited' time is updated when the tooltip is opened
-    ,
-    onShow: updateTooltipContent
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": SyncBlockLabelDataId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: SyncBlockLabelSharedCssClassName.labelClassName,
-    "aria-describedby": ariaDescribedById
-  }, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
-    color: "var(--ds-icon-subtle, #505258)",
-    size: "small",
-    label: ""
-  }), isSource || !title ? /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, formatMessage(messages.syncedBlockLabel)) : /*#__PURE__*/React.createElement(Text, {
-    maxLines: 1,
-    size: "small",
-    color: "color.text.subtle"
-  }, title)), /*#__PURE__*/React.createElement(VisuallyHidden, {
-    id: ariaDescribedById
-  }, tooltipContent));
+  var LabelComponent = function LabelComponent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      "data-testid": SyncBlockLabelDataId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: SyncBlockLabelSharedCssClassName.labelClassName,
+      "aria-describedby": ariaDescribedById
+    }, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
+      color: "var(--ds-icon-subtle, #505258)",
+      size: "small",
+      label: ""
+    }), isSource || !title ? /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: "color.text.subtle"
+    }, formatMessage(messages.syncedBlockLabel)) : /*#__PURE__*/React.createElement(Text, {
+      maxLines: 1,
+      size: "small",
+      color: "color.text.subtle"
+    }, title)), /*#__PURE__*/React.createElement(VisuallyHidden, {
+      id: ariaDescribedById
+    }, tooltipContent));
+  };
+  var LabelWithTooltip = function LabelWithTooltip() {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      position: "top",
+      content: fg('platform_synced_block_dogfooding') ? tooltipContent : tooltipMessage
+      // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
+      // this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
+      // tooltip content is available for screen readers in visually hidden content after the label
+      ,
+      isScreenReaderAnnouncementDisabled: true
+      // using this to ensure that the 'last edited' time is updated when the tooltip is opened
+      ,
+      onShow: updateTooltipContent
+    }, /*#__PURE__*/React.createElement(LabelComponent, null));
+  };
+  return fg('platform_synced_block_dogfooding') ? isSource ? /*#__PURE__*/React.createElement(LabelComponent, null) : /*#__PURE__*/React.createElement(LabelWithTooltip, null) : /*#__PURE__*/React.createElement(LabelWithTooltip, null);
 };
 export var SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -10,6 +10,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     localId = _ref.localId,
     api = _ref.api;
   var syncBlockFetchResult = useFetchSyncBlockData();
+  var title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
   var contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 || (_syncBlockFetchResult = _syncBlockFetchResult.data) === null || _syncBlockFetchResult === void 0 ? void 0 : _syncBlockFetchResult.contentUpdatedAt;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
@@ -21,7 +22,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     api: api
   })), /*#__PURE__*/React.createElement(SyncBlockLabel, {
     isSource: false,
-    useFetchSyncBlockTitle: useFetchSyncBlockTitle,
+    title: title,
     contentUpdatedAt: contentUpdatedAt,
     localId: localId
   }));

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -12,6 +12,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 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 { cx } from '@compiled/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';
@@ -37,13 +38,18 @@ var styles = {
   note: "_syaz1rpy _o5721q9c",
   lozenge: "_ahbq12x7 _1ul91wqb",
   noResultsContainer: "_1bsbo8uj _y3gn1h6o",
-  dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  dropdownContent: "_1rjcv77o _1bsbsmdz _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  containerWithMinHeight: "_1tkeqkoa",
   contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
   errorContainer: "_1bsbo8uj _1e0c1txw",
   errorIcon: "_1mour5cr",
   learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
   requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
 };
+var shouldApplyMinHeight = function shouldApplyMinHeight(fetchStatus, itemCount) {
+  // When there are 1/2 items, dropdown height is less than minHeight 144px
+  return !(fetchStatus === 'success' && itemCount > 0);
+};
 var ItemTitle = function ItemTitle(_ref) {
   var title = _ref.title,
     formatMessage = _ref.formatMessage,
@@ -57,7 +63,7 @@ var ItemTitle = function ItemTitle(_ref) {
   }, title), onSameDocument && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
+  }, "\xA0-", ' ', formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.lozenge
   }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
@@ -284,7 +290,7 @@ var DropdownContent = function DropdownContent(_ref7) {
     }
   };
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.dropdownContent
+    xcss: cx(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
   }, content());
 };
 var LoadingScreen = function LoadingScreen() {

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

@@ -17,13 +17,13 @@ import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plu
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 import { SyncedLocationDropdown } from './SyncedLocationDropdown';
 export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore) {
-  var _api$decorations, _api$connectivity;
+  var _syncBlockInstance$er, _api$decorations, _api$connectivity;
   var syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
   if (!syncBlockObject) {
     return;
   }
   var syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
-  var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === SyncBlockError.NotFound;
+  var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$er = syncBlockInstance.error) === null || _syncBlockInstance$er === void 0 ? void 0 : _syncBlockInstance$er.type) === SyncBlockError.NotFound;
   var isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
   var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
   var isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockObject.node, bodiedSyncBlock);

package/dist/esm/ui/utils/time.js

@@ -0,0 +1,56 @@
+import isYesterday from 'date-fns/isYesterday';
+var SECONDS_IN_MINUTE = 60;
+var SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
+var SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+var SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
+var SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
+var SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
+export var formatElapsedTime = function formatElapsedTime(isoDate, intl) {
+  var now = Date.now();
+  var date = new Date(isoDate).getTime();
+  var diffInSeconds = Math.floor((now - date) / 1000);
+  var dateObj = new Date(isoDate);
+
+  // Show "yesterday" when timestamp is from the previous calendar day
+  if (isYesterday(dateObj) && diffInSeconds >= SECONDS_IN_DAY) {
+    return intl.formatRelativeTime(-1, 'day', {
+      numeric: 'auto',
+      style: 'long'
+    });
+  }
+  if (diffInSeconds < SECONDS_IN_MINUTE) {
+    return intl.formatRelativeTime(-Math.max(diffInSeconds, 1), 'second', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_HOUR) {
+    var minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
+    return intl.formatRelativeTime(-minutes, 'minute', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_DAY) {
+    var hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
+    return intl.formatRelativeTime(-hours, 'hour', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_WEEK) {
+    var days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
+    return intl.formatRelativeTime(-days, 'day', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_MONTH) {
+    var weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
+    return intl.formatRelativeTime(-weeks, 'week', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_YEAR) {
+    var months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
+    return intl.formatRelativeTime(-months, 'month', {
+      style: 'long'
+    });
+  } else {
+    var years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
+    return intl.formatRelativeTime(-years, 'year', {
+      style: 'long'
+    });
+  }
+};

package/dist/types/pm-plugins/utils/handle-bodied-sync-block-removal.d.ts

@@ -1,9 +1,9 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { DeletionReason, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../../syncedBlockPluginType';
 import { type SyncBlockInfo } from '../../types';
 export type ConfirmationTransactionRef = {
     current: Transaction | undefined;
 };
-export declare const handleBodiedSyncBlockRemoval: (tr: Transaction, bodiedSyncBlockRemoved: SyncBlockInfo[], syncBlockStore: SyncBlockStoreManager, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, confirmationTransactionRef: ConfirmationTransactionRef) => boolean;
+export declare const handleBodiedSyncBlockRemoval: (bodiedSyncBlockRemoved: SyncBlockInfo[], syncBlockStore: SyncBlockStoreManager, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, confirmationTransactionRef: ConfirmationTransactionRef, deletionReason: DeletionReason | undefined) => boolean;

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { type IntlShape } from 'react-intl-next';
-export declare const formatElapsedTime: (isoDate: string, intl: IntlShape) => string;
 type SyncBlockLabelProps = {
     contentUpdatedAt?: string;
     isSource: boolean;
     localId: string;
-    useFetchSyncBlockTitle?: () => string | undefined;
+    title?: string;
 };
-export declare const SyncBlockLabel: React.MemoExoticComponent<({ isSource, useFetchSyncBlockTitle, localId, contentUpdatedAt, }: SyncBlockLabelProps) => React.JSX.Element>;
+export declare const SyncBlockLabel: React.MemoExoticComponent<({ contentUpdatedAt, isSource, localId, title, }: SyncBlockLabelProps) => React.JSX.Element>;
 export {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockRendererProps } from '../syncedBlockPluginType';
 type Props = {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;

package/dist/types/ui/utils/time.d.ts

@@ -0,0 +1,2 @@
+import { type IntlShape } from 'react-intl-next';
+export declare const formatElapsedTime: (isoDate: string, intl: IntlShape) => string;

package/dist/types-ts4.5/pm-plugins/utils/handle-bodied-sync-block-removal.d.ts

@@ -1,9 +1,9 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { DeletionReason, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../../syncedBlockPluginType';
 import { type SyncBlockInfo } from '../../types';
 export type ConfirmationTransactionRef = {
     current: Transaction | undefined;
 };
-export declare const handleBodiedSyncBlockRemoval: (tr: Transaction, bodiedSyncBlockRemoved: SyncBlockInfo[], syncBlockStore: SyncBlockStoreManager, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, confirmationTransactionRef: ConfirmationTransactionRef) => boolean;
+export declare const handleBodiedSyncBlockRemoval: (bodiedSyncBlockRemoved: SyncBlockInfo[], syncBlockStore: SyncBlockStoreManager, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, confirmationTransactionRef: ConfirmationTransactionRef, deletionReason: DeletionReason | undefined) => boolean;

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { type IntlShape } from 'react-intl-next';
-export declare const formatElapsedTime: (isoDate: string, intl: IntlShape) => string;
 type SyncBlockLabelProps = {
     contentUpdatedAt?: string;
     isSource: boolean;
     localId: string;
-    useFetchSyncBlockTitle?: () => string | undefined;
+    title?: string;
 };
-export declare const SyncBlockLabel: React.MemoExoticComponent<({ isSource, useFetchSyncBlockTitle, localId, contentUpdatedAt, }: SyncBlockLabelProps) => React.JSX.Element>;
+export declare const SyncBlockLabel: React.MemoExoticComponent<({ contentUpdatedAt, isSource, localId, title, }: SyncBlockLabelProps) => React.JSX.Element>;
 export {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockRendererProps } from '../syncedBlockPluginType';
 type Props = {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;

package/dist/types-ts4.5/ui/utils/time.d.ts

@@ -0,0 +1,2 @@
+import { type IntlShape } from 'react-intl-next';
+export declare const formatElapsedTime: (isoDate: string, intl: IntlShape) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "5.3.1",
+	"version": "5.3.2",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-plugin-selection": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
-		"@atlaskit/editor-synced-block-provider": "^3.13.0",
+		"@atlaskit/editor-synced-block-provider": "^3.14.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.19.0",
 		"@atlaskit/flag": "^17.8.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/spinner": "19.0.9",
-		"@atlaskit/tmp-editor-statsig": "^16.30.0",
+		"@atlaskit/tmp-editor-statsig": "^16.31.0",
 		"@atlaskit/tokens": "10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",