@atlaskit/editor-plugin-synced-block 11.0.2 → 11.0.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 11.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.0.3
+
+### Patch Changes
+
+- [`7167e21d35f98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7167e21d35f98) -
+  Include the source block in synced location toolbar counts and explain the empty state in a
+  tooltip
+- Updated dependencies
+
 ## 11.0.2
 
 ### Patch Changes

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -477,6 +477,13 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     }),
     fetchStatus = _useReferenceData.fetchStatus,
     referenceData = _useReferenceData.referenceData;
+  var referenceCount = (0, _react.useMemo)(function () {
+    return referenceData.filter(function (_ref0) {
+      var isSourceItem = _ref0.isSource;
+      return !isSourceItem;
+    }).length;
+  }, [referenceData]);
+  var tooltipContent = !isOpen && fetchStatus === 'success' && referenceCount === 0 ? intl.formatMessage(_messages.syncBlockMessages.syncedLocationDropdownNoReferencesTooltip) : null;
   var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
     resourceId: resourceId,
     intl: intl,
@@ -514,13 +521,14 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
         size: "small"
       }),
       onClick: toggleOpen,
-      ariaHasPopup: true
+      ariaHasPopup: true,
+      tooltipContent: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : undefined
     }, /*#__PURE__*/React.createElement(SyncedLocationTriggerContent, {
       intl: intl,
       fetchStatus: fetchStatus,
-      referenceData: referenceData
+      referenceCount: referenceCount
     }));
-  }, [fetchStatus, intl, isOpen, referenceData, toggleOpen]);
+  }, [fetchStatus, intl, isOpen, referenceCount, toggleOpen, tooltipContent]);
   return /*#__PURE__*/React.createElement(_uiMenu.DropdownContainer, {
     alignX: "center",
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
@@ -538,13 +546,13 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     }
   }, content);
 };
-var DropdownContent = function DropdownContent(_ref0) {
-  var syncBlockStore = _ref0.syncBlockStore,
-    resourceId = _ref0.resourceId,
-    intl = _ref0.intl,
-    isSource = _ref0.isSource,
-    localId = _ref0.localId,
-    api = _ref0.api;
+var DropdownContent = function DropdownContent(_ref1) {
+  var syncBlockStore = _ref1.syncBlockStore,
+    resourceId = _ref1.resourceId,
+    intl = _ref1.intl,
+    isSource = _ref1.isSource,
+    localId = _ref1.localId,
+    api = _ref1.api;
   var _useState7 = (0, _react.useState)('none'),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     fetchStatus = _useState8[0],
@@ -556,7 +564,7 @@ var DropdownContent = function DropdownContent(_ref0) {
   (0, _react.useEffect)(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref1 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var response;
         return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -581,7 +589,7 @@ var DropdownContent = function DropdownContent(_ref0) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref1.apply(this, arguments);
+        return _ref10.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -594,12 +602,12 @@ var DropdownContent = function DropdownContent(_ref0) {
     referenceData: referenceData
   });
 };
-var useReferenceData = function useReferenceData(_ref10) {
-  var syncBlockStore = _ref10.syncBlockStore,
-    resourceId = _ref10.resourceId,
-    intl = _ref10.intl,
-    isSource = _ref10.isSource,
-    localId = _ref10.localId;
+var useReferenceData = function useReferenceData(_ref11) {
+  var syncBlockStore = _ref11.syncBlockStore,
+    resourceId = _ref11.resourceId,
+    intl = _ref11.intl,
+    isSource = _ref11.isSource,
+    localId = _ref11.localId;
   var _useState1 = (0, _react.useState)(function () {
       return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
     }),
@@ -621,7 +629,7 @@ var useReferenceData = function useReferenceData(_ref10) {
       referenceData: []
     });
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
         var response;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -660,7 +668,7 @@ var useReferenceData = function useReferenceData(_ref10) {
         }, _callee2);
       }));
       return function getReferenceData() {
-        return _ref11.apply(this, arguments);
+        return _ref12.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -673,18 +681,13 @@ var useReferenceData = function useReferenceData(_ref10) {
     referenceData: state.referenceData
   };
 };
-var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12) {
-  var intl = _ref12.intl,
-    fetchStatus = _ref12.fetchStatus,
-    referenceData = _ref12.referenceData;
+var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref13) {
+  var intl = _ref13.intl,
+    fetchStatus = _ref13.fetchStatus,
+    referenceCount = _ref13.referenceCount;
   var formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
-  var referenceCount = (0, _react.useMemo)(function () {
-    return referenceData.filter(function (_ref13) {
-      var isSource = _ref13.isSource;
-      return !isSource;
-    }).length;
-  }, [referenceData]);
+  var syncedLocationCount = referenceCount === 0 ? 0 : referenceCount + 1;
   switch (fetchStatus) {
     case 'loading':
       return /*#__PURE__*/React.createElement(_compiled.Inline, {
@@ -696,7 +699,7 @@ var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12)
       }));
     case 'success':
       {
-        var count = referenceCount > 99 ? '99+' : intl.formatNumber(referenceCount);
+        var count = syncedLocationCount > 99 ? '99+' : intl.formatNumber(syncedLocationCount);
         return formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleWithCount, {
           count: count
         });

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -446,6 +446,10 @@ export const SyncedLocationDropdownWithCount = ({
     resourceId,
     syncBlockStore
   });
+  const referenceCount = useMemo(() => referenceData.filter(({
+    isSource: isSourceItem
+  }) => !isSourceItem).length, [referenceData]);
+  const tooltipContent = !isOpen && fetchStatus === 'success' && referenceCount === 0 ? intl.formatMessage(messages.syncedLocationDropdownNoReferencesTooltip) : null;
   const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
     resourceId: resourceId,
     intl: intl,
@@ -480,12 +484,13 @@ export const SyncedLocationDropdownWithCount = ({
       size: "small"
     }),
     onClick: toggleOpen,
-    ariaHasPopup: true
+    ariaHasPopup: true,
+    tooltipContent: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : undefined
   }, /*#__PURE__*/React.createElement(SyncedLocationTriggerContent, {
     intl: intl,
     fetchStatus: fetchStatus,
-    referenceData: referenceData
-  })), [fetchStatus, intl, isOpen, referenceData, toggleOpen]);
+    referenceCount: referenceCount
+  })), [fetchStatus, intl, isOpen, referenceCount, toggleOpen, tooltipContent]);
   return /*#__PURE__*/React.createElement(DropdownContainer, {
     alignX: "center",
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
@@ -585,15 +590,13 @@ const useReferenceData = ({
 const SyncedLocationTriggerContent = ({
   intl,
   fetchStatus,
-  referenceData
+  referenceCount
 }) => {
   const {
     formatMessage
   } = intl;
   const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
-  const referenceCount = useMemo(() => referenceData.filter(({
-    isSource
-  }) => !isSource).length, [referenceData]);
+  const syncedLocationCount = referenceCount === 0 ? 0 : referenceCount + 1;
   switch (fetchStatus) {
     case 'loading':
       return /*#__PURE__*/React.createElement(Inline, {
@@ -605,7 +608,7 @@ const SyncedLocationTriggerContent = ({
       }));
     case 'success':
       {
-        const count = referenceCount > 99 ? '99+' : intl.formatNumber(referenceCount);
+        const count = syncedLocationCount > 99 ? '99+' : intl.formatNumber(syncedLocationCount);
         return formatMessage(messages.syncedLocationDropdownTitleWithCount, {
           count
         });

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -469,6 +469,13 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
     }),
     fetchStatus = _useReferenceData.fetchStatus,
     referenceData = _useReferenceData.referenceData;
+  var referenceCount = useMemo(function () {
+    return referenceData.filter(function (_ref0) {
+      var isSourceItem = _ref0.isSource;
+      return !isSourceItem;
+    }).length;
+  }, [referenceData]);
+  var tooltipContent = !isOpen && fetchStatus === 'success' && referenceCount === 0 ? intl.formatMessage(messages.syncedLocationDropdownNoReferencesTooltip) : null;
   var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
     resourceId: resourceId,
     intl: intl,
@@ -506,13 +513,14 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
         size: "small"
       }),
       onClick: toggleOpen,
-      ariaHasPopup: true
+      ariaHasPopup: true,
+      tooltipContent: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : undefined
     }, /*#__PURE__*/React.createElement(SyncedLocationTriggerContent, {
       intl: intl,
       fetchStatus: fetchStatus,
-      referenceData: referenceData
+      referenceCount: referenceCount
     }));
-  }, [fetchStatus, intl, isOpen, referenceData, toggleOpen]);
+  }, [fetchStatus, intl, isOpen, referenceCount, toggleOpen, tooltipContent]);
   return /*#__PURE__*/React.createElement(DropdownContainer, {
     alignX: "center",
     testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
@@ -530,13 +538,13 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
     }
   }, content);
 };
-var DropdownContent = function DropdownContent(_ref0) {
-  var syncBlockStore = _ref0.syncBlockStore,
-    resourceId = _ref0.resourceId,
-    intl = _ref0.intl,
-    isSource = _ref0.isSource,
-    localId = _ref0.localId,
-    api = _ref0.api;
+var DropdownContent = function DropdownContent(_ref1) {
+  var syncBlockStore = _ref1.syncBlockStore,
+    resourceId = _ref1.resourceId,
+    intl = _ref1.intl,
+    isSource = _ref1.isSource,
+    localId = _ref1.localId,
+    api = _ref1.api;
   var _useState7 = useState('none'),
     _useState8 = _slicedToArray(_useState7, 2),
     fetchStatus = _useState8[0],
@@ -548,7 +556,7 @@ var DropdownContent = function DropdownContent(_ref0) {
   useEffect(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref1 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var response;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -573,7 +581,7 @@ var DropdownContent = function DropdownContent(_ref0) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref1.apply(this, arguments);
+        return _ref10.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -586,12 +594,12 @@ var DropdownContent = function DropdownContent(_ref0) {
     referenceData: referenceData
   });
 };
-var useReferenceData = function useReferenceData(_ref10) {
-  var syncBlockStore = _ref10.syncBlockStore,
-    resourceId = _ref10.resourceId,
-    intl = _ref10.intl,
-    isSource = _ref10.isSource,
-    localId = _ref10.localId;
+var useReferenceData = function useReferenceData(_ref11) {
+  var syncBlockStore = _ref11.syncBlockStore,
+    resourceId = _ref11.resourceId,
+    intl = _ref11.intl,
+    isSource = _ref11.isSource,
+    localId = _ref11.localId;
   var _useState1 = useState(function () {
       return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
     }),
@@ -613,7 +621,7 @@ var useReferenceData = function useReferenceData(_ref10) {
       referenceData: []
     });
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var response;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -652,7 +660,7 @@ var useReferenceData = function useReferenceData(_ref10) {
         }, _callee2);
       }));
       return function getReferenceData() {
-        return _ref11.apply(this, arguments);
+        return _ref12.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -665,18 +673,13 @@ var useReferenceData = function useReferenceData(_ref10) {
     referenceData: state.referenceData
   };
 };
-var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12) {
-  var intl = _ref12.intl,
-    fetchStatus = _ref12.fetchStatus,
-    referenceData = _ref12.referenceData;
+var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref13) {
+  var intl = _ref13.intl,
+    fetchStatus = _ref13.fetchStatus,
+    referenceCount = _ref13.referenceCount;
   var formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
-  var referenceCount = useMemo(function () {
-    return referenceData.filter(function (_ref13) {
-      var isSource = _ref13.isSource;
-      return !isSource;
-    }).length;
-  }, [referenceData]);
+  var syncedLocationCount = referenceCount === 0 ? 0 : referenceCount + 1;
   switch (fetchStatus) {
     case 'loading':
       return /*#__PURE__*/React.createElement(Inline, {
@@ -688,7 +691,7 @@ var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12)
       }));
     case 'success':
       {
-        var count = referenceCount > 99 ? '99+' : intl.formatNumber(referenceCount);
+        var count = syncedLocationCount > 99 ? '99+' : intl.formatNumber(syncedLocationCount);
         return formatMessage(messages.syncedLocationDropdownTitleWithCount, {
           count: count
         });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "11.0.2",
+	"version": "11.0.4",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,8 +38,8 @@
 		"@atlaskit/editor-synced-block-provider": "^9.0.0",
 		"@atlaskit/editor-toolbar": "^2.4.0",
 		"@atlaskit/flag": "^18.2.0",
-		"@atlaskit/icon": "37.2.4",
-		"@atlaskit/icon-lab": "^7.4.0",
+		"@atlaskit/icon": "37.3.0",
+		"@atlaskit/icon-lab": "^7.5.0",
 		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/lozenge": "^15.0.0",
 		"@atlaskit/modal-dialog": "^16.2.0",
@@ -58,7 +58,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^117.1.0",
+		"@atlaskit/editor-common": "^117.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},