@atlaskit/smart-card 38.3.0 → 38.4.2

package/dist/cjs/view/FlexibleCard/components/elements/{text → common/base-text-element}/index.js

@@ -5,25 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.BaseTextElement = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _utils = require("../../utils");
+var _utils = require("../../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var baseStyleOld = null;
 var baseStyle = null;
-
 /**
  * A base element that displays some Text.
  * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */
-var Text = function Text(_ref) {
+var BaseTextElement = exports.BaseTextElement = function BaseTextElement(_ref) {
   var content = _ref.content,
     _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
@@ -56,4 +55,4 @@ var Text = function Text(_ref) {
     }
   }, (0, _platformFeatureFlags.fg)('platform-linking-additional-flexible-element-props') ? newContent : oldContent);
 };
-var _default = exports.default = Text;
+var _default = exports.default = BaseTextElement;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseAvatarGroupElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseAvatarGroupElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseBadgeElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseBadgeElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseDateTimeElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseDateTimeElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseLinkElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseLinkElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseLozengeElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseLozengeElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseTextElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseTextElement.default;
+  }
+});
+var _baseBadgeElement = _interopRequireDefault(require("./base-badge-element"));
+var _baseTextElement = _interopRequireDefault(require("./base-text-element"));
+var _baseAvatarGroupElement = _interopRequireDefault(require("./base-avatar-group-element"));
+var _baseDateTimeElement = _interopRequireDefault(require("./base-date-time-element"));
+var _baseLozengeElement = _interopRequireDefault(require("./base-lozenge-element"));
+var _baseLinkElement = _interopRequireDefault(require("./base-link-element"));

package/dist/cjs/view/FlexibleCard/components/elements/{icon → icon-element}/index.js

@@ -79,10 +79,10 @@ var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
 /**
  * A base element that displays an Icon or favicon.
  * @internal
- * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @param props - The props necessary for the Icon element.
  * @see LinkIcon
  */
-var Icon = function Icon(_ref) {
+var IconElement = function IconElement(_ref) {
   var icon = _ref.icon,
     overrideIcon = _ref.overrideIcon,
     _ref$label = _ref.label,
@@ -119,4 +119,4 @@ var Icon = function Icon(_ref) {
     }
   }, element));
 };
-var _default = exports.default = Icon;
+var _default = exports.default = IconElement;

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

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "AppliedToComponentsCount", {
   enumerable: true,
   get: function get() {
-    return _appliedToComponentsCount.default;
+    return _appliedToComponentsCountElement.default;
   }
 });
 exports.OwnedByGroup = 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 = exports.AssignedToGroup = exports.AssignedTo = void 0;
 Object.defineProperty(exports, "Preview", {
   enumerable: true,
   get: function get() {
-    return _preview.default;
+    return _previewElement.default;
   }
 });
 exports.SentOn = exports.ReadTime = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = void 0;
@@ -27,9 +27,9 @@ Object.defineProperty(exports, "Snippet", {
 exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.SubTasksProgress = exports.StoryPoints = exports.State = exports.SourceBranch = void 0;
 var _constants = require("../../../../constants");
 var _utils = require("./utils");
-var _preview = _interopRequireDefault(require("./preview"));
+var _previewElement = _interopRequireDefault(require("./preview-element"));
 var _snippetElement = _interopRequireDefault(require("./snippet-element"));
-var _appliedToComponentsCount = _interopRequireDefault(require("./applied-to-components-count"));
+var _appliedToComponentsCountElement = _interopRequireDefault(require("./applied-to-components-count-element"));
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems

package/dist/cjs/view/FlexibleCard/components/elements/{media → media-element}/index.js

@@ -24,14 +24,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * contents within the element's box.
  */
 var styles = null;
-
 /**
  * A base element that displays a Media.
  * @internal
- * @param {MediaProps} MediaProps - The props necessary for the Media element.
- * @see Preview
+ * @param props - The props necessary for the Media element.
  */
-var Media = function Media(_ref) {
+var MediaElement = function MediaElement(_ref) {
   var name = _ref.name,
     className = _ref.className,
     _ref$testId = _ref.testId,
@@ -58,4 +56,4 @@ var Media = function Media(_ref) {
     defaultIcon: null
   }));
 };
-var _default = exports.default = Media;
+var _default = exports.default = MediaElement;

package/dist/cjs/view/FlexibleCard/components/elements/{preview → preview-element}/index.js

@@ -9,17 +9,22 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
-var _media = _interopRequireDefault(require("../media"));
+var _mediaElement = _interopRequireDefault(require("../media-element"));
 var _excluded = ["overrideUrl"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var Preview = function Preview(props) {
+var PreviewElement = function PreviewElement(props) {
   var _ref = props !== null && props !== void 0 ? props : {},
     overrideUrl = _ref.overrideUrl,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+  var context = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleUiContext)() :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
   var data = overrideUrl ? {
     url: overrideUrl,
     type: _constants.MediaType.Image
@@ -27,6 +32,6 @@ var Preview = function Preview(props) {
   if (!data) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_media.default, (0, _extends2.default)({}, rest, data));
+  return /*#__PURE__*/_react.default.createElement(_mediaElement.default, (0, _extends2.default)({}, rest, data));
 };
-var _default = exports.default = Preview;
+var _default = exports.default = PreviewElement;

package/dist/cjs/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
-var _text = _interopRequireDefault(require("../text"));
+var _common = require("../common");
 var _excluded = ["content", "maxLines", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,8 +31,12 @@ var SnippetElement = function SnippetElement(props) {
     maxLines = _ref$maxLines === void 0 ? SNIPPET_DEFAULT_MAX_LINES : _ref$maxLines,
     className = _ref.className,
     restOfProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
-  return /*#__PURE__*/React.createElement(_text.default, (0, _extends2.default)({
+  var context = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleUiContext)() :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+  return /*#__PURE__*/React.createElement(_common.BaseTextElement, (0, _extends2.default)({
     content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
     maxLines: maxLines,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

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

@@ -16,131 +16,134 @@ var _constants = require("../../../../constants");
 var _messages = require("../../../../messages");
 var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 var _utils = require("../../../../utils");
-var _appliedToComponentsCount = _interopRequireDefault(require("./applied-to-components-count"));
-var _atlaskitBadge = _interopRequireDefault(require("./atlaskit-badge"));
-var _avatarGroup = _interopRequireDefault(require("./avatar-group"));
-var _badge = _interopRequireDefault(require("./badge"));
-var _dateTime = _interopRequireDefault(require("./date-time"));
-var _icon = _interopRequireDefault(require("./icon"));
-var _link = _interopRequireDefault(require("./link"));
-var _lozenge = _interopRequireDefault(require("./lozenge"));
-var _media = _interopRequireDefault(require("./media"));
-var _text = _interopRequireDefault(require("./text"));
+var _appliedToComponentsCountElement = _interopRequireDefault(require("./applied-to-components-count-element"));
+var _atlaskitBadgeElement = _interopRequireDefault(require("./atlaskit-badge-element"));
+var _common = require("./common");
+var _iconElement = _interopRequireDefault(require("./icon-element"));
+var _mediaElement = _interopRequireDefault(require("./media-element"));
 var _elementMappings;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AppliedToComponentsCount, {
-  component: _appliedToComponentsCount.default,
+  component: _appliedToComponentsCountElement.default,
   props: {
     icon: _constants.IconType.Component
   }
 }), _constants.ElementName.AttachmentCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Attachment
   }
 }), _constants.ElementName.AuthorGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.ChecklistProgress, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.CheckItem
   }
 }), _constants.ElementName.CollaboratorGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.CommentCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Comment
   }
 }), _constants.ElementName.ViewCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.View
   }
 }), _constants.ElementName.ReactCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.React
   }
 }), _constants.ElementName.VoteCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Vote
   }
 }), _constants.ElementName.CreatedBy, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.OwnedBy, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.AssignedTo, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.AssignedToGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.OwnedByGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.CreatedOn, {
-  component: _dateTime.default
+  component: _common.BaseDateTimeElement
 }), _constants.ElementName.DueOn, {
-  component: _lozenge.default
+  component: _common.BaseLozengeElement
 }), _constants.ElementName.LatestCommit, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Commit
   }
 }), _constants.ElementName.LinkIcon, {
-  component: _icon.default
+  component: _iconElement.default
 }), _constants.ElementName.ModifiedBy, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.ModifiedOn, {
-  component: _dateTime.default
+  component: _common.BaseDateTimeElement
 }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Preview, {
-  component: _media.default
+  component: _mediaElement.default
 }), _constants.ElementName.Priority, {
-  component: _badge.default
+  component: _common.BaseBadgeElement
 }), _constants.ElementName.ProgrammingLanguage, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.ProgrammingLanguage
   }
 }), _constants.ElementName.Provider, {
-  component: _badge.default
+  component: _common.BaseBadgeElement
 }), _constants.ElementName.ReadTime, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.SentOn, {
-  component: _dateTime.default
+  component: _common.BaseDateTimeElement
 }), _constants.ElementName.SourceBranch, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.State, {
-  component: _lozenge.default
+  component: _common.BaseLozengeElement
 }), _constants.ElementName.SubscriberCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Subscriber
   }
 }), _constants.ElementName.SubTasksProgress, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.SubTasksProgress
   }
 }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.StoryPoints, {
-  component: _atlaskitBadge.default
+  component: _atlaskitBadgeElement.default
 }), _constants.ElementName.TargetBranch, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.Title, {
-  component: _link.default
+  component: _common.BaseLinkElement
 }), _constants.ElementName.Location, {
-  component: _link.default,
+  component: _common.BaseLinkElement,
   props: {
     theme: _constants.SmartLinkInternalTheme.Grey
   }
 }));
+
+/**
+ * @deprecated
+ */
 var getContextKey = function getContextKey(name) {
   // Attempt to predict context prop name in advance to reduce the amount of
   // code run during runtime
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
+
+/**
+ * @deprecated
+ */
 var getData = function getData(elementName, contextKey, context) {
   if (!context) {
     return undefined;
@@ -281,6 +284,10 @@ var toLinkIconProps = function toLinkIconProps(data, type) {
     appearance: isImageRound ? 'round' : 'square'
   });
 };
+
+/**
+ * @deprecated
+ */
 var createElement = exports.createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
     BaseElement = _ref.component,
@@ -290,7 +297,11 @@ var createElement = exports.createElement = function createElement(name) {
     throw Error("Element ".concat(name, " does not exist."));
   }
   return function (overrides) {
-    var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+    var context = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _flexibleUiContext.useFlexibleUiContext)() :
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
     var data = getData(name, contextKey, context);
     return data ? /*#__PURE__*/_react.default.createElement(BaseElement, (0, _extends2.default)({}, props, data, overrides, {
       name: name

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

@@ -65,6 +65,15 @@ var FlexibleCard = function FlexibleCard(_ref) {
       url: url
     });
   }, [aiSummaryConfig, appearance, details, fireEvent, id, onAuthorize, origin, renderers, actionOptions, resolve, status, url]);
+  var flexibleCardContext = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useMemo)(function () {
+    return {
+      data: context,
+      status: status,
+      ui: ui
+    };
+  }, [context, status, ui]) : undefined;
   var retry = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-unresolved-action') ? undefined : (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
   var _ref2 = context || {},
     title = _ref2.title;
@@ -92,6 +101,20 @@ var FlexibleCard = function FlexibleCard(_ref) {
         break;
     }
   }, [onError, onResolve, status, title, url]);
+  if ((0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context')) {
+    return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleCardContext.Provider, {
+      value: flexibleCardContext
+    }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
+      testId: testId
+    }, ui, {
+      onClick: onClick,
+      retry: retry,
+      showHoverPreview: showHoverPreview,
+      hoverPreviewOptions: hoverPreviewOptions,
+      actionOptions: actionOptions,
+      status: status
+    }), children));
+  }
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiOptionContext.Provider, {
     value: ui
   }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {

package/dist/cjs/view/HoverCard/components/views/resolving/index.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
 var _loadingSkeleton = require("../../../../FlexibleCard/components/common/loading-skeleton");
-var _icon = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon"));
+var _iconElement = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon-element"));
 var _styled = require("../../../styled");
 var loadingViewContainer = null;
 var skeletonContainer = null;
@@ -38,7 +38,7 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
     testId: "".concat(testId, "-title-block"),
     className: (0, _runtime.ax)(["_zulpcxkx _1bsb1osq"])
-  }), /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }), /*#__PURE__*/_react.default.createElement(_iconElement.default, {
     render: function render() {
       return /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeleton, null);
     },

package/dist/cjs/view/LinkUrl/index.js

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.3.0",
+  packageVersion: "38.4.2",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/state/flexible-ui-context/index.js

@@ -1,14 +1,36 @@
 import { createContext, useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * This provides the data that will be used by Smart Links Flexible UI to populate it's
  * underlying elements.
  */
+export const FlexibleCardContext = /*#__PURE__*/createContext(undefined);
+export const useFlexibleCardContext = () => useContext(FlexibleCardContext);
+
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ * @deprecated Remove on cleanup of platform-linking-flexible-card-context
+ */
 export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
-export const useFlexibleUiContext = () => useContext(FlexibleUiContext);
+export const useFlexibleUiContext = () => {
+  var _useFlexibleCardConte;
+  return fg('platform-linking-flexible-card-context') ? // eslint-disable-next-line react-hooks/rules-of-hooks
+  (_useFlexibleCardConte = useFlexibleCardContext()) === null || _useFlexibleCardConte === void 0 ? void 0 : _useFlexibleCardConte.data :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useContext(FlexibleUiContext);
+};
 
 /**
  * This provides the ui options that will be used by Smart Links Flexible UI
  * to render its underlying elements.
+ * @deprecated Remove on cleanup of platform-linking-flexible-card-context
  */
 export const FlexibleUiOptionContext = /*#__PURE__*/createContext(undefined);
-export const useFlexibleUiOptionContext = () => useContext(FlexibleUiOptionContext);
+export const useFlexibleUiOptionContext = () => {
+  var _useFlexibleCardConte2;
+  return fg('platform-linking-flexible-card-context') ? // eslint-disable-next-line react-hooks/rules-of-hooks
+  (_useFlexibleCardConte2 = useFlexibleCardContext()) === null || _useFlexibleCardConte2 === void 0 ? void 0 : _useFlexibleCardConte2.ui :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useContext(FlexibleUiOptionContext);
+};

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.3.0"
+  packageVersion: "38.4.2"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/ErroredView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import WarningIcon from '@atlaskit/icon/core/migration/warning';
 import { messages } from '../../../messages';
-import Text from '../../FlexibleCard/components/elements/text';
+import Text from '../../FlexibleCard/components/elements/common/base-text-element';
 import { RetryAction } from '../actions/RetryAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';

package/dist/es2019/view/BlockCard/views/ForbiddenView.js

@@ -15,7 +15,7 @@ import extractHostname from '../../../extractors/common/hostname/extractHostname
 import { messages } from '../../../messages';
 import { toMessage } from '../../../utils/intl-utils';
 import { getForbiddenJsonLd } from '../../../utils/jsonld';
-import Text from '../../FlexibleCard/components/elements/text';
+import Text from '../../FlexibleCard/components/elements/common/base-text-element';
 import { ForbiddenAction } from '../actions/ForbiddenAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';

package/dist/es2019/view/BlockCard/views/NotFoundView.js

@@ -10,7 +10,7 @@ import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
 import { extractProvider, extractSmartLinkProvider } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../../../messages';
-import Text from '../../FlexibleCard/components/elements/text';
+import Text from '../../FlexibleCard/components/elements/common/base-text-element';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 const textStyles = null;

package/dist/es2019/view/EmbedModal/index.js

@@ -6,7 +6,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
 import { SmartLinkSize } from '../../constants';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
 import { getPreviewUrlWithTheme } from '../../utils';
-import Icon from '../FlexibleCard/components/elements/icon';
+import IconElement from '../FlexibleCard/components/elements/icon-element';
 import withAnalytics from './components/analytics';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
@@ -89,7 +89,7 @@ const EmbedModal = ({
     label: title
   } : {}), /*#__PURE__*/React.createElement(LinkInfo, {
     icon: linkIcon && {
-      icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+      icon: /*#__PURE__*/React.createElement(IconElement, _extends({}, linkIcon, {
         size: SmartLinkSize.Large
       })),
       isFlexibleUi: true

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

@@ -59,6 +59,7 @@ const TitleBlock = ({
   metadataPosition,
   hideIcon = false,
   className,
+  anchorRef,
   ...props
 }) => {
   if (!fg('platform-linking-flexible-card-unresolved-action')) {
@@ -90,7 +91,8 @@ const TitleBlock = ({
     onClick: onClick,
     onMouseDown: onMouseDown,
     target: anchorTarget,
-    theme: theme
+    theme: theme,
+    anchorRef: anchorRef
   }, overrideText));
   const Component = getTitleBlockViewComponent(status);
   return /*#__PURE__*/React.createElement(Component, _extends({}, props, {

package/dist/es2019/view/FlexibleCard/components/container/index.js

@@ -8,7 +8,7 @@ import { di } from 'react-magnetic-di';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import { FlexibleUiContext, useFlexibleUiContext } from '../../../../state/flexible-ui-context';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isStyleCacheProvider } from '../../../../utils/flexible';
 import { TitleBlock } from '../blocks';
@@ -310,7 +310,11 @@ const Container = ({
 }) => {
   const padding = hidePadding ? fg('platform-linking-visual-refresh-v1') ? '0px' : '0rem' : getPadding(size);
   const gap = getGap(size);
-  const context = useContext(FlexibleUiContext);
+  const context = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiContext() :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useContext(FlexibleUiContext);
   const {
     previewOnLeft,
     previewOnRight