@atlaskit/smart-card 25.8.0 → 25.9.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/smart-card
 
+## 25.9.1
+
+### Patch Changes
+
+- [`b76602c1619`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b76602c1619) - Revert 25.8.0 changes "Include additional attributes (urlHash, display, id) and resolved attributes for link clicked analytics events" due to regression
+- [`1aedc244e41`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1aedc244e41) - [ux] Smart Links Internal Grey theme is now more specific to prevent Confluence override
+
+## 25.9.0
+
+### Minor Changes
+
+- [`7f248766888`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f248766888) - [ux] Add container names which mark the location in which the linked resource sits within. This funtionality will be used to show the container names for Trello links.
+
+  FlexUI: Reduced gap between title and subtitle in TitleBlock.
+
 ## 25.8.0
 
 ### Minor Changes

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.MediaPlacement = exports.IconType = exports.ElementName = exports.CardDisplay = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.ActionName = void 0;
+exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkInternalTheme = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.MediaPlacement = exports.IconType = exports.ElementName = exports.CardDisplay = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.ActionName = void 0;
 var CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 
 /**
@@ -70,16 +70,21 @@ exports.SmartLinkStatus = SmartLinkStatus;
   SmartLinkStatus["Fallback"] = "fallback";
 })(SmartLinkStatus || (exports.SmartLinkStatus = SmartLinkStatus = {}));
 var SmartLinkTheme;
-/**
- * Determines whether the container size will fit to the content
- * or expand to the available width or the parent component.
- * Similar to flex's flex-grow concept.
- */
 exports.SmartLinkTheme = SmartLinkTheme;
 (function (SmartLinkTheme) {
   SmartLinkTheme["Black"] = "black";
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (exports.SmartLinkTheme = SmartLinkTheme = {}));
+var SmartLinkInternalTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
+exports.SmartLinkInternalTheme = SmartLinkInternalTheme;
+(function (SmartLinkInternalTheme) {
+  SmartLinkInternalTheme["Grey"] = "grey";
+})(SmartLinkInternalTheme || (exports.SmartLinkInternalTheme = SmartLinkInternalTheme = {}));
 var SmartLinkWidth;
 /**
  * Flexible UI element name - each reflecting the link data its represented.
@@ -116,7 +121,9 @@ exports.ElementName = ElementName;
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["DueOn"] = "DueOn";
+  ElementName["LatestCommit"] = "LatestCommit";
   ElementName["LinkIcon"] = "LinkIcon";
+  ElementName["Location"] = "Location";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["OwnedBy"] = "OwnedBy";
@@ -133,7 +140,6 @@ exports.ElementName = ElementName;
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
-  ElementName["LatestCommit"] = "LatestCommit";
 })(ElementName || (exports.ElementName = ElementName = {}));
 var ActionName;
 /**

package/dist/cjs/extractors/flexible/index.js

@@ -49,6 +49,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     downloadAction: (0, _extractDownloadAction.extractDownloadAction)(data),
     latestCommit: (0, _latestCommit.extractLatestCommit)(data),
     linkIcon: (0, _icon.extractLinkIcon)(response, renderers),
+    location: (0, _utils.extractLocation)(data),
     modifiedBy: (0, _utils.extractModifiedBy)(data),
     modifiedOn: (0, _extractors.extractDateUpdated)(data),
     preview: (0, _extractPreview.default)(data),

package/dist/cjs/extractors/flexible/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSourceBranch = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractOwnedBy = exports.extractModifiedBy = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractChecklistProgress = exports.extractAttachmentCount = void 0;
+exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSourceBranch = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractOwnedBy = exports.extractModifiedBy = exports.extractLocation = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractChecklistProgress = exports.extractAttachmentCount = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _extractors = require("@atlaskit/linking-common/extractors");
 var extractLinkName = function extractLinkName(link) {
@@ -80,4 +80,16 @@ var extractChecklistProgress = function extractChecklistProgress(data) {
   var checkItemsObj = extractValue(data, 'atlassian:checkItems');
   return checkItemsObj ? "".concat(checkItemsObj.checkedItems, "/").concat(checkItemsObj.totalItems) : undefined;
 };
-exports.extractChecklistProgress = extractChecklistProgress;
+exports.extractChecklistProgress = extractChecklistProgress;
+var extractLocation = function extractLocation(data) {
+  var _ref = extractValue(data, 'location') || {},
+    url = _ref.url,
+    name = _ref.name;
+  if (url && name && typeof url === 'string') {
+    return {
+      text: name,
+      url: url
+    };
+  }
+};
+exports.extractLocation = extractLocation;

package/dist/cjs/state/actions/index.js

@@ -25,20 +25,13 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     connections = _useSmartLinkContext.connections;
   var getState = store.getState,
     dispatch = store.dispatch;
-  var getSmartLinkState = (0, _react.useCallback)(function () {
-    var _getState$url;
-    var _ref = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
-        status: _constants.SmartLinkStatus.Pending
-      },
-      details = _ref.details,
-      status = _ref.status,
-      metadataStatus = _ref.metadataStatus;
-    return {
-      details: details,
-      status: status,
-      metadataStatus: metadataStatus
-    };
-  }, [getState, url]);
+  var _ref = getState()[url] || {
+      status: _constants.SmartLinkStatus.Pending,
+      details: undefined
+    },
+    details = _ref.details,
+    status = _ref.status,
+    metadataStatus = _ref.metadataStatus;
   var setMetadataStatus = (0, _react.useCallback)(function (metadataStatus) {
     dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_UPDATE_METADATA_STATUS, {
       url: url
@@ -65,8 +58,6 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     }, _callee);
   })), [id, resolveUrl, url]);
   var register = (0, _react.useCallback)(function () {
-    var _getSmartLinkState = getSmartLinkState(),
-      details = _getSmartLinkState.details;
     if (!details) {
       dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVING, {
         url: url
@@ -74,10 +65,8 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
+  }, [details, resolve, dispatch, url, setMetadataStatus]);
   var reload = (0, _react.useCallback)(function () {
-    var _getSmartLinkState2 = getSmartLinkState(),
-      details = _getSmartLinkState2.details;
     var definitionId = (0, _helpers.getDefinitionId)(details);
     if (definitionId) {
       (0, _helpers.getByDefinitionId)(definitionId, getState()).map(function (url) {
@@ -86,20 +75,15 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     } else {
       resolve(url, true);
     }
-  }, [getSmartLinkState, url, getState, resolve]);
+  }, [details, url, getState, resolve]);
   var loadMetadata = (0, _react.useCallback)(function () {
-    var _getSmartLinkState3 = getSmartLinkState(),
-      metadataStatus = _getSmartLinkState3.metadataStatus;
     //metadataStatus will be undefined for SSR links only
     if (metadataStatus === undefined) {
       setMetadataStatus('pending');
       return resolve(url, false, true);
     }
-  }, [getSmartLinkState, resolve, setMetadataStatus, url]);
+  }, [metadataStatus, resolve, setMetadataStatus, url]);
   var authorize = (0, _react.useCallback)(function (appearance) {
-    var _getSmartLinkState4 = getSmartLinkState(),
-      details = _getSmartLinkState4.details,
-      status = _getSmartLinkState4.status;
     var definitionId = (0, _helpers.getDefinitionId)(details);
     var extensionKey = (0, _helpers.getExtensionKey)(details);
     var services = (0, _helpers.getServices)(details);
@@ -151,7 +135,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
         reload();
       });
     }
-  }, [getSmartLinkState, analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload]);
+  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
   var invoke = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(opts, appearance) {
       var key, action, source, markName, response;

package/dist/cjs/state/hooks/use-resolve/index.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
-var _reactDom = require("react-dom");
 var _analytics = require("../../analytics");
 var _helpers = require("../../helpers");
 var _linkingCommon = require("@atlaskit/linking-common");
@@ -107,26 +106,18 @@ var useResolve = function useResolve() {
       return;
     }
 
-    /**
-     * Using unstable_batchedUpdates because this store update happens async and trigers a rerender
-     * more info:
-     * https://github.com/facebook/react/blob/v18.2.0/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L113
-     * https://react-redux.js.org/api/batch
-     */
-    (0, _reactDom.unstable_batchedUpdates)(function () {
-      //if a link resolves normally, metadata will also always be resolved
-      setMetadataStatus(resourceUrl, 'resolved');
-      // Dispatch Analytics and resolved card action - including unauthorized states.
-      if (isReloading) {
-        dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RELOADING, {
-          url: resourceUrl
-        }, response));
-      } else {
-        dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
-          url: resourceUrl
-        }, response, undefined, undefined, isMetadataRequest));
-      }
-    });
+    //if a link resolves normally, metadata will also always be resolved
+    setMetadataStatus(resourceUrl, 'resolved');
+    // Dispatch Analytics and resolved card action - including unauthorized states.
+    if (isReloading) {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response, undefined, undefined, isMetadataRequest));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
   return (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "25.8.0",
+	"version": "25.9.1",
 	"sideEffects": false
 }

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -89,7 +89,10 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }, {
       name: _constants.ElementName.State
     }],
-    hideRetry: true
+    hideRetry: true,
+    subtitle: [{
+      name: _constants.ElementName.Location
+    }]
   }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: metadata,
     maxLines: 1

package/dist/cjs/view/CardWithUrl/component.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardWithUrlContent = void 0;
+exports.CardWithUrlContent = CardWithUrlContent;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
@@ -20,10 +20,9 @@ var _flexible = require("../../utils/flexible");
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 var _constants = require("../../constants");
 var _click = require("../../utils/analytics/click");
-var _SmartLinkAnalyticsContext = require("../../utils/analytics/SmartLinkAnalyticsContext");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function Component(_ref) {
+function CardWithUrlContent(_ref) {
   var id = _ref.id,
     url = _ref.url,
     isSelected = _ref.isSelected,
@@ -268,12 +267,4 @@ function Component(_ref) {
         onIframeFocus: onIframeFocus
       });
   }
-}
-var CardWithUrlContent = function CardWithUrlContent(props) {
-  return /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
-    url: props.url,
-    appearance: props.appearance,
-    id: props.id
-  }, /*#__PURE__*/_react.default.createElement(Component, props));
-};
-exports.CardWithUrlContent = CardWithUrlContent;
+}

package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js

@@ -33,8 +33,8 @@ var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, a
   var lineHeight = (0, _utils2.getMaxLineHeight)(size);
   return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
 };
-var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '');
+var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === _constants.SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 };
 
 /**
@@ -57,9 +57,11 @@ var ElementGroup = function ElementGroup(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-group' : _ref$testId,
     _ref$width = _ref.width,
-    width = _ref$width === void 0 ? _constants.SmartLinkWidth.FitToContent : _ref$width;
+    width = _ref$width === void 0 ? _constants.SmartLinkWidth.FitToContent : _ref$width,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? _constants.SmartLinkPosition.Center : _ref$position;
   return (0, _react2.jsx)("div", {
-    css: [getElementGroupStyles(direction, size, align, width), overrideCss],
+    css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
     "data-smart-element-group": true,
     "data-testid": testId
   }, (0, _utils.renderChildren)(children, size));

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _elements = require("../../../elements");
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _constants = require("../../../../../../constants");
 var _utils = require("../../utils");
+var _templateObject;
 var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
 /**
  * This renders a fully resolved TitleBlock.
@@ -38,12 +41,14 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     position: position
   }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Vertical,
-    width: _constants.SmartLinkWidth.Flexible
+    width: _constants.SmartLinkWidth.Flexible,
+    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          gap: 0.25rem;\n        "])))
   }, title, subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
-    align: _constants.SmartLinkAlignment.Right
+    align: _constants.SmartLinkAlignment.Right,
+    position: _constants.SmartLinkPosition.Top
   }, metadataElements), actionGroup);
 };
 var _default = TitleBlockResolvedView;

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -24,7 +24,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Determine whether the element can be display as inline/block.
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Location, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

package/dist/cjs/view/FlexibleCard/components/elements/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.State = exports.SourceBranch = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.OwnedBy = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.State = exports.SourceBranch = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.OwnedBy = exports.ModifiedOn = exports.ModifiedBy = exports.Location = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = void 0;
 var _utils = require("./utils");
 var _constants = require("../../../../constants");
 // Attention: Keep the export name and element name the same.
@@ -67,11 +67,18 @@ var LatestCommit = (0, _utils.createElement)(_constants.ElementName.LatestCommit
  */
 exports.LatestCommit = LatestCommit;
 var LinkIcon = (0, _utils.createElement)(_constants.ElementName.LinkIcon);
+/**
+ * Creates a Location Link element.
+ * This represents the location or container of the resource.
+ * @see Link
+ */
+exports.LinkIcon = LinkIcon;
+var Location = (0, _utils.createElement)(_constants.ElementName.Location);
 /**
  * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
  * @see Text
  */
-exports.LinkIcon = LinkIcon;
+exports.Location = Location;
 var ModifiedBy = (0, _utils.createElement)(_constants.ElementName.ModifiedBy);
 /**
  * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -14,7 +14,7 @@ var _constants = require("../../../../../constants");
 var _utils = require("../../utils");
 var _token = require("../../../../../utils/token");
 var _useMouseDownEvent = _interopRequireDefault(require("../../../../../state/analytics/useMouseDownEvent"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,17 +24,21 @@ var MINIMUM_MAX_LINES = 1;
 var containerStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n"])));
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
+    case _constants.SmartLinkInternalTheme.Grey:
+      // We are being specifc with the CSS selectors to ensure that Confluence overrides
+      // do not affect our internal Smart Card styles
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        a& {\n          color: ", ";\n          &:active,\n          &:visited,\n          &:focus,\n          &:hover {\n            color: ", ";\n            text-decoration: underline;\n          }\n          font-size: 12px;\n        }\n      "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
     case _constants.SmartLinkTheme.Link:
     default:
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blueLink, _token.tokens.blueLinkPressed, _token.tokens.blueLink);
+      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blueLink, _token.tokens.blueLinkPressed, _token.tokens.blueLink);
   }
 };
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
+  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -111,6 +111,11 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Title, {
   component: _link.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Location, {
+  component: _link.default,
+  props: {
+    theme: _constants.SmartLinkInternalTheme.Grey
+  }
 }), _elementMappings);
 var getContextKey = function getContextKey(name) {
   // Attempt to predict context prop name in advance to reduce the amount of

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -17,7 +17,6 @@ var _store = require("../../../state/store");
 var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
 var _styled = require("../styled");
 var _constants = require("../../../constants");
-var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -25,7 +24,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
     url = _ref.url,
-    id = _ref.id,
     analyticsHandler = _ref.analyticsHandler,
     analytics = _ref.analytics,
     _ref$canOpen = _ref.canOpen,
@@ -135,11 +133,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   }, [closeOnChildClick, hideCard]);
   var content = (0, _react2.useCallback)(function (_ref2) {
     var update = _ref2.update;
-    return (0, _react.jsx)(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
-      url: url,
-      appearance: _constants.CardDisplay.HoverCardPreview,
-      id: id
-    }, (0, _react.jsx)(_HoverCardContent.default, {
+    return (0, _react.jsx)(_HoverCardContent.default, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       analytics: analytics,
@@ -149,10 +143,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       onResolve: update,
       renderers: renderers,
       showServerActions: showServerActions,
-      url: url,
-      id: id
-    }));
-  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
+      url: url
+    });
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
   var trigger = (0, _react2.useCallback)(function (triggerProps) {
     return (0, _react.jsx)("span", {
       ref: parentSpan

package/dist/cjs/view/HoverCard/styled.js

@@ -35,7 +35,7 @@ var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _ta
 exports.separatorCss = separatorCss;
 var HoverCardContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
-var titleBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
+var titleBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 exports.titleBlockCss = titleBlockCss;
 var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);

package/dist/cjs/view/HoverCard/utils.js

@@ -56,7 +56,7 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
         metadata: {
           primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.State, _constants.ElementName.DueOn],
           secondary: [_constants.ElementName.ReactCount, _constants.ElementName.CommentCount, _constants.ElementName.AttachmentCount, _constants.ElementName.ChecklistProgress],
-          subtitle: []
+          subtitle: [_constants.ElementName.Location]
         }
       };
     case 'watermelon-object-provider':

package/dist/es2019/constants.js

@@ -63,16 +63,20 @@ export let SmartLinkStatus;
   SmartLinkStatus["Fallback"] = "fallback";
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 export let SmartLinkTheme;
+(function (SmartLinkTheme) {
+  SmartLinkTheme["Black"] = "black";
+  SmartLinkTheme["Link"] = "link";
+})(SmartLinkTheme || (SmartLinkTheme = {}));
+export let SmartLinkInternalTheme;
 
 /**
  * Determines whether the container size will fit to the content
  * or expand to the available width or the parent component.
  * Similar to flex's flex-grow concept.
  */
-(function (SmartLinkTheme) {
-  SmartLinkTheme["Black"] = "black";
-  SmartLinkTheme["Link"] = "link";
-})(SmartLinkTheme || (SmartLinkTheme = {}));
+(function (SmartLinkInternalTheme) {
+  SmartLinkInternalTheme["Grey"] = "grey";
+})(SmartLinkInternalTheme || (SmartLinkInternalTheme = {}));
 export let SmartLinkWidth;
 
 /**
@@ -109,7 +113,9 @@ export let ElementName;
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["DueOn"] = "DueOn";
+  ElementName["LatestCommit"] = "LatestCommit";
   ElementName["LinkIcon"] = "LinkIcon";
+  ElementName["Location"] = "Location";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["OwnedBy"] = "OwnedBy";
@@ -126,7 +132,6 @@ export let ElementName;
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
-  ElementName["LatestCommit"] = "LatestCommit";
 })(ElementName || (ElementName = {}));
 export let ActionName;
 

package/dist/es2019/extractors/flexible/index.js

@@ -1,6 +1,6 @@
 import { extractSummary } from '../common/primitives';
 import { extractLinkIcon } from './icon';
-import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractOwnedBy } from './utils';
+import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
@@ -42,6 +42,7 @@ const extractFlexibleUiContext = ({
     downloadAction: extractDownloadAction(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
+    location: extractLocation(data),
     modifiedBy: extractModifiedBy(data),
     modifiedOn: extractDateUpdated(data),
     preview: extractPreview(data),

package/dist/es2019/extractors/flexible/utils.js

@@ -38,4 +38,16 @@ export const extractTargetBranch = data => extractLinkName(data['atlassian:merge
 export const extractChecklistProgress = data => {
   const checkItemsObj = extractValue(data, 'atlassian:checkItems');
   return checkItemsObj ? `${checkItemsObj.checkedItems}/${checkItemsObj.totalItems}` : undefined;
+};
+export const extractLocation = data => {
+  const {
+    url,
+    name
+  } = extractValue(data, 'location') || {};
+  if (url && name && typeof url === 'string') {
+    return {
+      text: name,
+      url
+    };
+  }
 };