@atlaskit/mention 23.0.3 → 23.1.0

package/dist/cjs/api/MentionNameResolver.js

@@ -5,22 +5,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultMentionNameResolver = void 0;
+exports.mergeNameResolverQueues = mergeNameResolverQueues;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _types = require("../types");
 var _analytics = require("../util/analytics");
+/** A queue for user ids */
 var DefaultMentionNameResolver = exports.DefaultMentionNameResolver = /*#__PURE__*/function () {
   function DefaultMentionNameResolver(client) {
     var _this = this;
     var analyticsProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var onResolvedAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
     (0, _classCallCheck2.default)(this, DefaultMentionNameResolver);
     (0, _defineProperty2.default)(this, "nameCache", new Map());
     (0, _defineProperty2.default)(this, "nameQueue", new Map());
     (0, _defineProperty2.default)(this, "nameStartTime", new Map());
     (0, _defineProperty2.default)(this, "processingQueue", new Map());
     (0, _defineProperty2.default)(this, "debounce", 0);
+    (0, _defineProperty2.default)(this, "debounceOnResolve", null);
+    (0, _defineProperty2.default)(this, "isOnResolvedAllCalled", false);
     (0, _defineProperty2.default)(this, "processQueue", function () {
       clearTimeout(_this.debounce);
       _this.debounce = 0;
@@ -28,7 +34,7 @@ var DefaultMentionNameResolver = exports.DefaultMentionNameResolver = /*#__PURE_
         queue = _this$splitQueueAtLim.queue,
         extraQueue = _this$splitQueueAtLim.extraQueue;
       _this.nameQueue = extraQueue;
-      _this.processingQueue = new Map([].concat((0, _toConsumableArray2.default)(_this.processingQueue), (0, _toConsumableArray2.default)(queue)));
+      _this.processingQueue = mergeNameResolverQueues(_this.processingQueue, queue);
       _this.client.lookupMentionNames(Array.from(queue.keys())).then(function (response) {
         response.forEach(function (mentionDetail) {
           var id = mentionDetail.id;
@@ -55,10 +61,15 @@ var DefaultMentionNameResolver = exports.DefaultMentionNameResolver = /*#__PURE_
       // Make sure anything left in the queue gets processed.
       if (_this.nameQueue.size > 0) {
         _this.scheduleProcessQueue();
+      } else {
+        _this.scheduleOnAllResolved();
       }
     });
     this.client = client;
     this.fireHydrationEvent = (0, _analytics.fireAnalyticsMentionHydrationEvent)(analyticsProps);
+    // If provided, this will be called once all pending mentions in the queue are resolved.
+    // A sample usage is scrolling to a mention on page load, after the mentions have loadad.
+    this.onResolvedAll = onResolvedAll;
   }
   (0, _createClass2.default)(DefaultMentionNameResolver, [{
     key: "lookupName",
@@ -67,6 +78,9 @@ var DefaultMentionNameResolver = exports.DefaultMentionNameResolver = /*#__PURE_
       var name = this.nameCache.get(id);
       if (name) {
         this.fireAnalytics(true, name);
+        if (this.nameQueue.size === 0) {
+          this.scheduleOnAllResolved();
+        }
         return name;
       }
       return new Promise(function (resolve) {
@@ -101,6 +115,21 @@ var DefaultMentionNameResolver = exports.DefaultMentionNameResolver = /*#__PURE_
         this.debounce = window.setTimeout(this.processQueue, DefaultMentionNameResolver.waitForBatch);
       }
     }
+  }, {
+    key: "scheduleOnAllResolved",
+    value: function scheduleOnAllResolved() {
+      var _this3 = this;
+      if (this.debounceOnResolve) {
+        clearTimeout(this.debounceOnResolve);
+      }
+      this.debounceOnResolve = window.setTimeout(function () {
+        if (_this3.isOnResolvedAllCalled) {
+          return;
+        }
+        _this3.onResolvedAll();
+        _this3.isOnResolvedAllCalled = true;
+      }, DefaultMentionNameResolver.waitForResolveAll);
+    }
   }, {
     key: "isQueueAtLimit",
     value: function isQueueAtLimit() {
@@ -147,4 +176,33 @@ var DefaultMentionNameResolver = exports.DefaultMentionNameResolver = /*#__PURE_
   }]);
   return DefaultMentionNameResolver;
 }();
-(0, _defineProperty2.default)(DefaultMentionNameResolver, "waitForBatch", 100);
+/**
+ * Merge the two queues making sure to merge callback arrays for items in queueB already in queueA.
+ * This addresses [this ticket](https://product-fabric.atlassian.net/browse/QS-3789).
+ */
+(0, _defineProperty2.default)(DefaultMentionNameResolver, "waitForBatch", 100);
+// ms
+(0, _defineProperty2.default)(DefaultMentionNameResolver, "waitForResolveAll", 800);
+function mergeNameResolverQueues(queueA, queueB) {
+  var queueBeingMerged = new Map((0, _toConsumableArray2.default)(queueA));
+
+  // now add the items from the second queue that are not already in the
+  //  merged queue being built
+  (0, _toConsumableArray2.default)(queueB).forEach(function (item) {
+    var _item = (0, _slicedToArray2.default)(item, 2),
+      key = _item[0],
+      queueBCallbacks = _item[1];
+    var itemAlreadyInMergedQueue = queueBeingMerged.has(key);
+    if (!itemAlreadyInMergedQueue) {
+      queueBeingMerged.set(key, queueBCallbacks);
+    } else {
+      var _queueBeingMerged$get;
+      // item already in merged queue, merge the callback arrays
+      var queueACallbacks = (_queueBeingMerged$get = queueBeingMerged.get(key)) !== null && _queueBeingMerged$get !== void 0 ? _queueBeingMerged$get : [];
+      var mergedCallbacks = new Set([].concat((0, _toConsumableArray2.default)(queueBCallbacks), (0, _toConsumableArray2.default)(queueACallbacks)));
+      var deduplicatedCallbacks = Array.from(mergedCallbacks.values()); // prevents calling them twice
+      queueBeingMerged.set(key, deduplicatedCallbacks);
+    }
+  });
+  return queueBeingMerged;
+}

package/dist/cjs/components/Mention/ResourcedMention.js

@@ -124,6 +124,7 @@ var ResourcedMention = exports.default = /*#__PURE__*/function (_React$PureCompo
         text: props.text || state.resolvedMentionName || '',
         isHighlighted: state.isHighlighted,
         accessLevel: props.accessLevel,
+        localId: props.localId,
         onClick: props.onClick,
         onMouseEnter: props.onMouseEnter,
         onMouseLeave: props.onMouseLeave

package/dist/cjs/components/Mention/index.js

@@ -122,7 +122,8 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
         props = this.props;
       var text = props.text,
         id = props.id,
-        accessLevel = props.accessLevel;
+        accessLevel = props.accessLevel,
+        localId = props.localId;
       var mentionType = this.getMentionType();
       var failedMention = text === "@".concat(UNKNOWN_USER_ID);
       var mentionComponent = /*#__PURE__*/_react.default.createElement(_focusRing.default, null, /*#__PURE__*/_react.default.createElement(_PrimitiveMention.default, {
@@ -135,7 +136,9 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
       return /*#__PURE__*/_react.default.createElement(_ufoExperiences.UfoErrorBoundary, {
         id: id
       }, /*#__PURE__*/_react.default.createElement("span", {
+        id: localId,
         "data-mention-id": id,
+        "data-local-id": localId,
         "data-access-level": accessLevel,
         spellCheck: false
       }, /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, mentionType === _types.MentionType.RESTRICTED ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {

package/dist/cjs/components/MentionDescriptionByline/styles.js

@@ -9,4 +9,5 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var DescriptionBylineStyle = exports.DescriptionBylineStyle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 12px;\n\n  margin-top: ", ";\n\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), "var(--ds-space-025, 2px)");

package/dist/cjs/components/MentionItem/styles.js

@@ -9,20 +9,34 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var RowStyle = exports.RowStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", " ", ";\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var AvatarStyle = exports.AvatarStyle = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  flex: initial;\n  opacity: ", ";\n"])), function (props) {
   return props.restricted ? '0.5' : 'inherit';
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var NameSectionStyle = exports.NameSectionStyle = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: ", ";\n  opacity: ", ";\n"])), "var(--ds-space-150, 12px)", function (props) {
   return props.restricted ? '0.5' : 'inherit';
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var FullNameStyle = exports.FullNameStyle = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n"])), "var(--ds-text, ".concat(_colors.N900, ")"));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var InfoSectionStyle = exports.InfoSectionStyle = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  text-align: right;\n  opacity: ", ";\n\n  & {\n    /* Lozenge */\n    & > span {\n      margin-bottom: ", ";\n    }\n  }\n"])), function (props) {
   return props.restricted ? '0.5' : 'inherit';
 }, "var(--ds-space-025, 2px)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TimeStyle = exports.TimeStyle = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  flex: none;\n  color: ", ";\n  font-size: 12px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
 var MENTION_ITEM_HEIGHT = exports.MENTION_ITEM_HEIGHT = 48;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var MentionItemStyle = exports.MentionItemStyle = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  height: ", "px;\n  line-height: 1.2;\n  cursor: pointer;\n"])), function (props) {
   return props.selected ? "var(--ds-background-selected, ".concat(_colors.N30, ")") : 'transparent';
 }, MENTION_ITEM_HEIGHT);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var AccessSectionStyle = exports.AccessSectionStyle = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: ", ";\n  color: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtle, ".concat(_colors.N500, ")"));

package/dist/cjs/components/MentionList/styles.js

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _sharedStyles = require("../../shared-styles");
 var _templateObject;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var MentionListStyle = exports.MentionListStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n\n  /* list style */\n  width: ", ";\n  color: ", ";\n\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n"])), function (props) {
   return props.empty ? 'none' : 'block';
 }, _sharedStyles.mentionListWidth, "var(--ds-text-subtle, #333)", _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow);

package/dist/cjs/components/MentionListError/GenericErrorIllustration.js

@@ -64,29 +64,35 @@ var GenericErrorIllustration = exports.GenericErrorIllustration = /*#__PURE__*/f
       }, /*#__PURE__*/_react.default.createElement("g", {
         "data-name": "Layer 1-2"
       }, /*#__PURE__*/_react.default.createElement("path", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "cls-1",
         d: "M94.8,74.2l66.4,115.1a15.16,15.16,0,0,1-5.5,20.7,15.4,15.4,0,0,1-7.6,2H15.2A15.19,15.19,0,0,1,0,196.8a15.4,15.4,0,0,1,2-7.6l66.5-115a15.21,15.21,0,0,1,20.7-5.6A15.81,15.81,0,0,1,94.8,74.2Zm-7.6,83.5,2.9-44.3a9.26,9.26,0,0,0-8.6-9.8h-.6a9.18,9.18,0,0,0-9.2,9.2v.6l2.9,44.3a6.33,6.33,0,0,0,6.3,5.9h0A6.26,6.26,0,0,0,87.2,157.7ZM71.4,181.2a9.5,9.5,0,0,0,9.4,9.6h.9a9.79,9.79,0,0,0,8.8-10.5,9.69,9.69,0,0,0-9.7-8.8A9.58,9.58,0,0,0,71.4,181.2Z"
       }), /*#__PURE__*/_react.default.createElement("g", {
         className: "cls-2"
       }, /*#__PURE__*/_react.default.createElement("path", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "cls-3",
         d: "M92.7,27.2,85.3.4a.57.57,0,0,0-.7-.4c-.2.1-.4.2-.4.5L79.5,25.6l-5.8-1.1c-.3-.1-.6.2-.7.5v.3L80.3,52a.75.75,0,0,0,.7.5.82.82,0,0,0,.5-.5l4.7-25.1,5.8,1c.3.1.6-.2.7-.5Z"
       }), /*#__PURE__*/_react.default.createElement("path", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "cls-3",
         d: "M66.1,41.8,55.2,33.2a.3.3,0,0,0-.4,0,.19.19,0,0,0,0,.3L60.4,45l-2.7,1.3c-.1.1-.2.2-.1.4a.1.1,0,0,0,.1.1l10.9,8.5a.3.3,0,0,0,.4,0,.19.19,0,0,0,0-.3L63.4,43.6l2.7-1.3a.33.33,0,0,0,0-.5Z"
       })), /*#__PURE__*/_react.default.createElement("g", {
         className: "cls-2"
       }, /*#__PURE__*/_react.default.createElement("path", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "cls-4",
         d: "M102.1,56.8a1.42,1.42,0,0,1-.6-.2,1,1,0,0,1-.3-1.2c-.2-.8-2.3-2.8-3.5-4.1-3-3-4.9-5-3.8-6.5s3.6-.2,7.3,1.7a28.41,28.41,0,0,0,4.5,2,21.58,21.58,0,0,0-3.3-3.6c-3-3-4.9-5-3.8-6.5s3.6-.2,7.4,1.7a27.65,27.65,0,0,0,4.4,2,21.58,21.58,0,0,0-3.3-3.6c-3-3-4.9-5-3.8-6.5s3.6-.2,7.3,1.7c1.6.8,4.2,2.1,5,2.1a.91.91,0,0,1,1.2,0,1.08,1.08,0,0,1,.2,1.4c-1.1,1.5-3.6.2-7.3-1.7a27.65,27.65,0,0,0-4.4-2,21.58,21.58,0,0,0,3.3,3.6c3,3,4.9,5,3.8,6.5s-3.6.2-7.3-1.7a28.41,28.41,0,0,0-4.5-2,21.58,21.58,0,0,0,3.3,3.6c3,3,4.9,5,3.8,6.5s-3.6.2-7.3-1.7a28.41,28.41,0,0,0-4.5-2,21.58,21.58,0,0,0,3.3,3.6c3,3,4.9,5,3.8,6.5A1.8,1.8,0,0,1,102.1,56.8Z"
       })), /*#__PURE__*/_react.default.createElement("g", {
         className: "cls-5"
       }, /*#__PURE__*/_react.default.createElement("path", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "cls-4",
         d: "M107.7,71.1a1.05,1.05,0,0,1-.9-.5c-1-1.9-2.2-4-.9-5.2s3.3.2,5.5,1.6a19.31,19.31,0,0,0,2.9,1.7,15.89,15.89,0,0,0-1.4-3.1c-1.3-2.3-2.5-4.4-1.1-5.6s3.3.2,5.5,1.6c1,.6,2.5,1.7,3.1,1.7a1,1,0,0,1,1.3.1,1,1,0,0,1-.1,1.4c-1.3,1.2-3.3-.2-5.5-1.6a19.31,19.31,0,0,0-2.9-1.7,13.64,13.64,0,0,0,1.4,3.1c1.3,2.3,2.4,4.4,1.1,5.6s-3.3-.2-5.5-1.6a19.31,19.31,0,0,0-2.9-1.7,13.07,13.07,0,0,0,1.2,2.7,1,1,0,0,1-.4,1.4A.6.6,0,0,1,107.7,71.1Zm12.5-7.6Z"
       })), /*#__PURE__*/_react.default.createElement("g", {
         className: "cls-5"
       }, /*#__PURE__*/_react.default.createElement("path", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "cls-4",
         d: "M53.4,68.1a2,2,0,0,1-.7-.1c-1.6-.7-1.2-3.1-.8-5.6a10.87,10.87,0,0,0,.3-3.4A15,15,0,0,0,50,61.6c-1.5,2.1-3,4.1-4.6,3.4a1,1,0,0,1-.5-1.3,1,1,0,0,1,1.2-.6,11.23,11.23,0,0,0,2.3-2.7c1.5-2.1,3-4.1,4.7-3.4s1.3,3.1.8,5.7a13.86,13.86,0,0,0-.3,3.3,11.82,11.82,0,0,0,2.1-2.6c1.5-2.1,3-4.1,4.7-3.4s1.2,3.1.9,5.2a1,1,0,1,1-1.9-.3,14.28,14.28,0,0,0,.3-2.9,15,15,0,0,0-2.2,2.6C56,66.4,54.7,68.1,53.4,68.1Z"
       }))))));

package/dist/cjs/components/MentionListError/styles.js

@@ -11,9 +11,15 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var MentionListErrorStyle = exports.MentionListErrorStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-text-subtle, ".concat(_colors.N500, ")"), "var(--ds-surface-overlay, #fff)", (0, _constants.borderRadius)());
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var GenericErrorVisualStyle = exports.GenericErrorVisualStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-400, 32px)", "var(--ds-space-1000, 80px)");
 
 // TODO: Figure out why the themed css function is causing type errors when passed prop children
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var MentionListErrorHeadlineStyle = exports.MentionListErrorHeadlineStyle = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-bottom: ", ";\n"])), (0, _typography.h400)(), "var(--ds-space-100, 8px)");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var MentionListAdviceStyle = exports.MentionListAdviceStyle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-600, 48px)");

package/dist/cjs/components/MentionPicker/index.js

@@ -214,7 +214,9 @@ var MentionPicker = exports.MentionPicker = /*#__PURE__*/function (_React$PureCo
       return (
         /*#__PURE__*/
         /* old classnames are essential for Confluence tests */
-        _react.default.createElement(_styles.MentionPickerStyle, {
+        _react.default.createElement(_styles.MentionPickerStyle
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
           className: "ak-mention-picker",
           visible: visible || info
         }, content)

package/dist/cjs/components/MentionPicker/styles.js

@@ -10,7 +10,10 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _sharedStyles = require("../../shared-styles");
 var _templateObject, _templateObject2;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var MentionPickerStyle = exports.MentionPickerStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n"])), function (props) {
   return props.visible ? 'block' : 'none';
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var MentionPickerInfoStyle = exports.MentionPickerInfoStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: block;\n  width: ", ";\n  white-space: nowrap;\n\n  & {\n    p {\n      margin: 0;\n      overflow: hidden;\n      padding: ", ";\n      text-overflow: ellipsis;\n    }\n  }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow, _sharedStyles.mentionListWidth, "var(--ds-space-100, 8px)");

package/dist/cjs/components/Scrollable/styles.js

@@ -10,4 +10,5 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var _sharedStyles = require("../../shared-styles");
 var _templateObject;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var ScrollableStyle = exports.ScrollableStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  padding: ", " 0;\n  margin: 0;\n\n  background: ", ";\n  max-height: ", ";\n\n  border-radius: ", "px;\n"])), "var(--ds-space-050, 4px)", "var(--ds-surface, white)", _sharedStyles.scrollableMaxHeight, (0, _constants.borderRadius)());

package/dist/cjs/util/analytics.js

@@ -12,7 +12,7 @@ var _types = require("../types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/mention";
-var packageVersion = "23.0.3";
+var packageVersion = "23.1.0";
 var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
 var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
 var SliNames = exports.SliNames = /*#__PURE__*/function (SliNames) {

package/dist/es2019/api/MentionNameResolver.js

@@ -1,13 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { MentionNameStatus } from '../types';
 import { fireAnalyticsMentionHydrationEvent } from '../util/analytics';
+
+/** A queue for user ids */
+
 export class DefaultMentionNameResolver {
-  constructor(client, analyticsProps = {}) {
+  constructor(client, analyticsProps = {}, onResolvedAll = () => {}) {
     _defineProperty(this, "nameCache", new Map());
     _defineProperty(this, "nameQueue", new Map());
     _defineProperty(this, "nameStartTime", new Map());
     _defineProperty(this, "processingQueue", new Map());
     _defineProperty(this, "debounce", 0);
+    _defineProperty(this, "debounceOnResolve", null);
+    _defineProperty(this, "isOnResolvedAllCalled", false);
     _defineProperty(this, "processQueue", () => {
       clearTimeout(this.debounce);
       this.debounce = 0;
@@ -16,7 +21,7 @@ export class DefaultMentionNameResolver {
         extraQueue
       } = this.splitQueueAtLimit();
       this.nameQueue = extraQueue;
-      this.processingQueue = new Map([...this.processingQueue, ...queue]);
+      this.processingQueue = mergeNameResolverQueues(this.processingQueue, queue);
       this.client.lookupMentionNames(Array.from(queue.keys())).then(response => {
         response.forEach(mentionDetail => {
           const {
@@ -45,15 +50,23 @@ export class DefaultMentionNameResolver {
       // Make sure anything left in the queue gets processed.
       if (this.nameQueue.size > 0) {
         this.scheduleProcessQueue();
+      } else {
+        this.scheduleOnAllResolved();
       }
     });
     this.client = client;
     this.fireHydrationEvent = fireAnalyticsMentionHydrationEvent(analyticsProps);
+    // If provided, this will be called once all pending mentions in the queue are resolved.
+    // A sample usage is scrolling to a mention on page load, after the mentions have loadad.
+    this.onResolvedAll = onResolvedAll;
   }
   lookupName(id) {
     const name = this.nameCache.get(id);
     if (name) {
       this.fireAnalytics(true, name);
+      if (this.nameQueue.size === 0) {
+        this.scheduleOnAllResolved();
+      }
       return name;
     }
     return new Promise(resolve => {
@@ -84,6 +97,18 @@ export class DefaultMentionNameResolver {
       this.debounce = window.setTimeout(this.processQueue, DefaultMentionNameResolver.waitForBatch);
     }
   }
+  scheduleOnAllResolved() {
+    if (this.debounceOnResolve) {
+      clearTimeout(this.debounceOnResolve);
+    }
+    this.debounceOnResolve = window.setTimeout(() => {
+      if (this.isOnResolvedAllCalled) {
+        return;
+      }
+      this.onResolvedAll();
+      this.isOnResolvedAllCalled = true;
+    }, DefaultMentionNameResolver.waitForResolveAll);
+  }
   isQueueAtLimit() {
     return this.nameQueue.size >= this.client.getLookupLimit();
   }
@@ -124,4 +149,32 @@ export class DefaultMentionNameResolver {
     this.fireHydrationEvent(action, id, fromCache, duration);
   }
 }
-_defineProperty(DefaultMentionNameResolver, "waitForBatch", 100);
+
+/**
+ * Merge the two queues making sure to merge callback arrays for items in queueB already in queueA.
+ * This addresses [this ticket](https://product-fabric.atlassian.net/browse/QS-3789).
+ */
+_defineProperty(DefaultMentionNameResolver, "waitForBatch", 100);
+// ms
+_defineProperty(DefaultMentionNameResolver, "waitForResolveAll", 800);
+export function mergeNameResolverQueues(queueA, queueB) {
+  const queueBeingMerged = new Map([...queueA]);
+
+  // now add the items from the second queue that are not already in the
+  //  merged queue being built
+  [...queueB].forEach(item => {
+    const [key, queueBCallbacks] = item;
+    const itemAlreadyInMergedQueue = queueBeingMerged.has(key);
+    if (!itemAlreadyInMergedQueue) {
+      queueBeingMerged.set(key, queueBCallbacks);
+    } else {
+      var _queueBeingMerged$get;
+      // item already in merged queue, merge the callback arrays
+      const queueACallbacks = (_queueBeingMerged$get = queueBeingMerged.get(key)) !== null && _queueBeingMerged$get !== void 0 ? _queueBeingMerged$get : [];
+      const mergedCallbacks = new Set([...queueBCallbacks, ...queueACallbacks]);
+      const deduplicatedCallbacks = Array.from(mergedCallbacks.values()); // prevents calling them twice
+      queueBeingMerged.set(key, deduplicatedCallbacks);
+    }
+  });
+  return queueBeingMerged;
+}

package/dist/es2019/components/Mention/ResourcedMention.js

@@ -95,6 +95,7 @@ export default class ResourcedMention extends React.PureComponent {
       text: props.text || state.resolvedMentionName || '',
       isHighlighted: state.isHighlighted,
       accessLevel: props.accessLevel,
+      localId: props.localId,
       onClick: props.onClick,
       onMouseEnter: props.onMouseEnter,
       onMouseLeave: props.onMouseLeave

package/dist/es2019/components/Mention/index.js

@@ -99,7 +99,8 @@ export class MentionInternal extends React.PureComponent {
     const {
       text,
       id,
-      accessLevel
+      accessLevel,
+      localId
     } = props;
     const mentionType = this.getMentionType();
     const failedMention = text === `@${UNKNOWN_USER_ID}`;
@@ -113,7 +114,9 @@ export class MentionInternal extends React.PureComponent {
     return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
       id: id
     }, /*#__PURE__*/React.createElement("span", {
+      id: localId,
       "data-mention-id": id,
+      "data-local-id": localId,
       "data-access-level": accessLevel,
       spellCheck: false
     }, /*#__PURE__*/React.createElement(MessagesIntlProvider, null, mentionType === MentionType.RESTRICTED ? /*#__PURE__*/React.createElement(React.Suspense, {

package/dist/es2019/components/MentionDescriptionByline/styles.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const DescriptionBylineStyle = styled.span`
   color: ${`var(--ds-text-subtlest, ${N100})`};
   font-size: 12px;

package/dist/es2019/components/MentionItem/styles.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const RowStyle = styled.div`
   align-items: center;
   display: flex;
@@ -10,17 +11,23 @@ export const RowStyle = styled.div`
   text-overflow: ellipsis;
   vertical-align: middle;
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const AvatarStyle = styled.span`
   position: relative;
   flex: initial;
   opacity: ${props => props.restricted ? '0.5' : 'inherit'};
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const NameSectionStyle = styled.div`
   flex: 1;
   min-width: 0;
   margin-left: ${"var(--ds-space-150, 12px)"};
   opacity: ${props => props.restricted ? '0.5' : 'inherit'};
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const FullNameStyle = styled.span`
   display: block;
   overflow: hidden;
@@ -28,6 +35,8 @@ export const FullNameStyle = styled.span`
   white-space: nowrap;
   color: ${`var(--ds-text, ${N900})`};
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const InfoSectionStyle = styled.div`
   display: flex;
   flex-direction: column;
@@ -41,6 +50,8 @@ export const InfoSectionStyle = styled.div`
     }
   }
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const TimeStyle = styled.div`
   margin-left: ${"var(--ds-space-250, 20px)"};
   flex: none;
@@ -48,6 +59,7 @@ export const TimeStyle = styled.div`
   font-size: 12px;
 `;
 export const MENTION_ITEM_HEIGHT = 48;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const MentionItemStyle = styled.div`
   background-color: ${props => props.selected ? `var(--ds-background-selected, ${N30})` : 'transparent'};
   display: block;
@@ -57,6 +69,8 @@ export const MentionItemStyle = styled.div`
   line-height: 1.2;
   cursor: pointer;
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const AccessSectionStyle = styled.div`
   padding-left: ${"var(--ds-space-050, 4px)"};
   color: ${`var(--ds-text-subtle, ${N500})`};

package/dist/es2019/components/MentionList/styles.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const MentionListStyle = styled.div`
   display: ${props => props.empty ? 'none' : 'block'};
 

package/dist/es2019/components/MentionListError/GenericErrorIllustration.js

@@ -43,29 +43,35 @@ export class GenericErrorIllustration extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("g", {
       "data-name": "Layer 1-2"
     }, /*#__PURE__*/React.createElement("path", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "cls-1",
       d: "M94.8,74.2l66.4,115.1a15.16,15.16,0,0,1-5.5,20.7,15.4,15.4,0,0,1-7.6,2H15.2A15.19,15.19,0,0,1,0,196.8a15.4,15.4,0,0,1,2-7.6l66.5-115a15.21,15.21,0,0,1,20.7-5.6A15.81,15.81,0,0,1,94.8,74.2Zm-7.6,83.5,2.9-44.3a9.26,9.26,0,0,0-8.6-9.8h-.6a9.18,9.18,0,0,0-9.2,9.2v.6l2.9,44.3a6.33,6.33,0,0,0,6.3,5.9h0A6.26,6.26,0,0,0,87.2,157.7ZM71.4,181.2a9.5,9.5,0,0,0,9.4,9.6h.9a9.79,9.79,0,0,0,8.8-10.5,9.69,9.69,0,0,0-9.7-8.8A9.58,9.58,0,0,0,71.4,181.2Z"
     }), /*#__PURE__*/React.createElement("g", {
       className: "cls-2"
     }, /*#__PURE__*/React.createElement("path", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "cls-3",
       d: "M92.7,27.2,85.3.4a.57.57,0,0,0-.7-.4c-.2.1-.4.2-.4.5L79.5,25.6l-5.8-1.1c-.3-.1-.6.2-.7.5v.3L80.3,52a.75.75,0,0,0,.7.5.82.82,0,0,0,.5-.5l4.7-25.1,5.8,1c.3.1.6-.2.7-.5Z"
     }), /*#__PURE__*/React.createElement("path", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "cls-3",
       d: "M66.1,41.8,55.2,33.2a.3.3,0,0,0-.4,0,.19.19,0,0,0,0,.3L60.4,45l-2.7,1.3c-.1.1-.2.2-.1.4a.1.1,0,0,0,.1.1l10.9,8.5a.3.3,0,0,0,.4,0,.19.19,0,0,0,0-.3L63.4,43.6l2.7-1.3a.33.33,0,0,0,0-.5Z"
     })), /*#__PURE__*/React.createElement("g", {
       className: "cls-2"
     }, /*#__PURE__*/React.createElement("path", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "cls-4",
       d: "M102.1,56.8a1.42,1.42,0,0,1-.6-.2,1,1,0,0,1-.3-1.2c-.2-.8-2.3-2.8-3.5-4.1-3-3-4.9-5-3.8-6.5s3.6-.2,7.3,1.7a28.41,28.41,0,0,0,4.5,2,21.58,21.58,0,0,0-3.3-3.6c-3-3-4.9-5-3.8-6.5s3.6-.2,7.4,1.7a27.65,27.65,0,0,0,4.4,2,21.58,21.58,0,0,0-3.3-3.6c-3-3-4.9-5-3.8-6.5s3.6-.2,7.3,1.7c1.6.8,4.2,2.1,5,2.1a.91.91,0,0,1,1.2,0,1.08,1.08,0,0,1,.2,1.4c-1.1,1.5-3.6.2-7.3-1.7a27.65,27.65,0,0,0-4.4-2,21.58,21.58,0,0,0,3.3,3.6c3,3,4.9,5,3.8,6.5s-3.6.2-7.3-1.7a28.41,28.41,0,0,0-4.5-2,21.58,21.58,0,0,0,3.3,3.6c3,3,4.9,5,3.8,6.5s-3.6.2-7.3-1.7a28.41,28.41,0,0,0-4.5-2,21.58,21.58,0,0,0,3.3,3.6c3,3,4.9,5,3.8,6.5A1.8,1.8,0,0,1,102.1,56.8Z"
     })), /*#__PURE__*/React.createElement("g", {
       className: "cls-5"
     }, /*#__PURE__*/React.createElement("path", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "cls-4",
       d: "M107.7,71.1a1.05,1.05,0,0,1-.9-.5c-1-1.9-2.2-4-.9-5.2s3.3.2,5.5,1.6a19.31,19.31,0,0,0,2.9,1.7,15.89,15.89,0,0,0-1.4-3.1c-1.3-2.3-2.5-4.4-1.1-5.6s3.3.2,5.5,1.6c1,.6,2.5,1.7,3.1,1.7a1,1,0,0,1,1.3.1,1,1,0,0,1-.1,1.4c-1.3,1.2-3.3-.2-5.5-1.6a19.31,19.31,0,0,0-2.9-1.7,13.64,13.64,0,0,0,1.4,3.1c1.3,2.3,2.4,4.4,1.1,5.6s-3.3-.2-5.5-1.6a19.31,19.31,0,0,0-2.9-1.7,13.07,13.07,0,0,0,1.2,2.7,1,1,0,0,1-.4,1.4A.6.6,0,0,1,107.7,71.1Zm12.5-7.6Z"
     })), /*#__PURE__*/React.createElement("g", {
       className: "cls-5"
     }, /*#__PURE__*/React.createElement("path", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "cls-4",
       d: "M53.4,68.1a2,2,0,0,1-.7-.1c-1.6-.7-1.2-3.1-.8-5.6a10.87,10.87,0,0,0,.3-3.4A15,15,0,0,0,50,61.6c-1.5,2.1-3,4.1-4.6,3.4a1,1,0,0,1-.5-1.3,1,1,0,0,1,1.2-.6,11.23,11.23,0,0,0,2.3-2.7c1.5-2.1,3-4.1,4.7-3.4s1.3,3.1.8,5.7a13.86,13.86,0,0,0-.3,3.3,11.82,11.82,0,0,0,2.1-2.6c1.5-2.1,3-4.1,4.7-3.4s1.2,3.1.9,5.2a1,1,0,1,1-1.9-.3,14.28,14.28,0,0,0,.3-2.9,15,15,0,0,0-2.2,2.6C56,66.4,54.7,68.1,53.4,68.1Z"
     }))))));

package/dist/es2019/components/MentionListError/styles.js

@@ -2,6 +2,8 @@ import styled from '@emotion/styled';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N500 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const MentionListErrorStyle = styled.div`
   align-items: center;
   display: flex;
@@ -12,6 +14,8 @@ export const MentionListErrorStyle = styled.div`
   border: 1px solid ${"var(--ds-surface-overlay, #fff)"};
   border-radius: ${borderRadius()}px;
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const GenericErrorVisualStyle = styled.div`
   margin-bottom: ${"var(--ds-space-100, 8px)"};
   margin-top: ${"var(--ds-space-400, 32px)"};
@@ -19,10 +23,13 @@ export const GenericErrorVisualStyle = styled.div`
 `;
 
 // TODO: Figure out why the themed css function is causing type errors when passed prop children
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const MentionListErrorHeadlineStyle = styled.div`
   ${h400()};
   margin-bottom: ${"var(--ds-space-100, 8px)"};
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const MentionListAdviceStyle = styled.div`
   margin-bottom: ${"var(--ds-space-600, 48px)"};
 `;

package/dist/es2019/components/MentionPicker/index.js

@@ -179,7 +179,9 @@ export class MentionPicker extends React.PureComponent {
     return (
       /*#__PURE__*/
       /* old classnames are essential for Confluence tests */
-      React.createElement(MentionPickerStyle, {
+      React.createElement(MentionPickerStyle
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: "ak-mention-picker",
         visible: visible || info
       }, content)

package/dist/es2019/components/MentionPicker/styles.js

@@ -1,9 +1,12 @@
 import styled from '@emotion/styled';
 import { N100 } from '@atlaskit/theme/colors';
 import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../shared-styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const MentionPickerStyle = styled.div`
   display: ${props => props.visible ? 'block' : 'none'};
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const MentionPickerInfoStyle = styled.div`
   background: ${"var(--ds-surface, #fff)"};
   color: ${`var(--ds-text-subtlest, ${N100})`};

package/dist/es2019/components/Scrollable/styles.js

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { scrollableMaxHeight } from '../../shared-styles';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const ScrollableStyle = styled.div`
   display: block;
   overflow-x: hidden;