@atlaskit/smart-card 38.5.0 → 38.5.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 38.5.2
+
+### Patch Changes
+
+- [#160330](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160330)
+  [`f1c0f21f646c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1c0f21f646c9) -
+  Remove renderChildren prop pass through (behind platform-linking-flexible-card-context)
+- Updated dependencies
+
+## 38.5.1
+
+### Patch Changes
+
+- [#159249](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159249)
+  [`1459101430d1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1459101430d1e) -
+  Add new Flexible Card UI elements creation jsx functions behind a FG
+
 ## 38.5.0
 
 ### Minor Changes

package/dist/cjs/extractors/flexible/extract-link-title.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../../constants");
+var extractLinkTitle = function extractLinkTitle(status, propUrl, response, onClick) {
+  var _ref;
+  var data = response === null || response === void 0 ? void 0 : response.data;
+  var responseUrl = (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkUrl)(response) : (0, _linkExtractors.extractLink)(data);
+  var url = status === _constants.SmartLinkStatus.Resolved ? responseUrl !== null && responseUrl !== void 0 ? responseUrl : propUrl : propUrl;
+  var name = (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkTitle)(response) : (0, _linkExtractors.extractTitle)(data);
+  var text = status === _constants.SmartLinkStatus.Resolved ? (_ref = name !== null && name !== void 0 ? name : responseUrl) !== null && _ref !== void 0 ? _ref : propUrl : propUrl;
+  return {
+    onClick: onClick,
+    text: text,
+    url: url
+  };
+};
+var _default = exports.default = extractLinkTitle;

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

@@ -13,6 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("../common/primitives");
 var _actions = require("./actions");
 var _collaboratorGroup = require("./collaboratorGroup");
+var _extractLinkTitle = _interopRequireDefault(require("./extract-link-title"));
 var _extractPreview = _interopRequireWildcard(require("./extract-preview"));
 var _extractPriority = _interopRequireDefault(require("./extract-priority"));
 var _extractState = _interopRequireDefault(require("./extract-state"));
@@ -20,7 +21,7 @@ var _icon = require("./icon");
 var _extractProviderIcon = _interopRequireWildcard(require("./icon/extract-provider-icon"));
 var _latestCommit = require("./latest-commit");
 var _utils = require("./utils");
-var _excluded = ["appearance", "fireEvent", "id", "origin", "renderers", "resolve", "actionOptions", "response", "aiSummaryConfig"];
+var _excluded = ["appearance", "fireEvent", "id", "onClick", "origin", "renderers", "resolve", "actionOptions", "response", "status", "aiSummaryConfig"];
 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; }
 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; }
@@ -30,11 +31,13 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
   var appearance = _ref.appearance,
     fireEvent = _ref.fireEvent,
     id = _ref.id,
+    onClick = _ref.onClick,
     origin = _ref.origin,
     renderers = _ref.renderers,
     resolve = _ref.resolve,
     actionOptions = _ref.actionOptions,
     response = _ref.response,
+    status = _ref.status,
     aiSummaryConfig = _ref.aiSummaryConfig,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (!response) {
@@ -43,7 +46,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
   var data = response.data;
   var meta = response.meta;
   var url = (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkUrl)(response) : (0, _linkExtractors.extractLink)(data);
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     actions: (0, _actions.extractFlexibleCardActions)({
       actionOptions: actionOptions,
       aiSummaryConfig: aiSummaryConfig,
@@ -71,7 +74,10 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     createdOn: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkCreatedOn)(response) : (0, _linkExtractors.extractDateCreated)(data),
     dueOn: (0, _utils.extractDueOn)(data),
     latestCommit: (0, _latestCommit.extractLatestCommit)(data),
-    linkIcon: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _icon.extractSmartLinkIcon)(response) : (0, _icon.extractLinkIcon)(response, renderers),
+    linkIcon: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _icon.extractSmartLinkIcon)(response) : (0, _icon.extractLinkIcon)(response, renderers)
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') && {
+    linkTitle: (0, _extractLinkTitle.default)(status, props.url, response, onClick)
+  }), {}, {
     location: (0, _utils.extractLocation)(data),
     modifiedBy: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkModifiedBy)(response) : (0, _utils.extractModifiedBy)(data),
     modifiedOn: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkModifiedOn)(response) : (0, _linkExtractors.extractDateUpdated)(data),
@@ -88,8 +94,10 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     subscriberCount: (0, _utils.extractSubscriberCount)(data),
     subTasksProgress: (0, _utils.extractSubTasksProgress)(data),
     storyPoints: (0, _utils.extractStoryPoints)(data),
-    targetBranch: (0, _utils.extractTargetBranch)(data),
-    title: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkTitle)(response) || url : (0, _linkExtractors.extractTitle)(data) || url,
+    targetBranch: (0, _utils.extractTargetBranch)(data)
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    title: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkTitle)(response) || url : (0, _linkExtractors.extractTitle)(data) || url
+  }), {}, {
     url: url,
     ari: (0, _platformFeatureFlags.fg)('smart_links_noun_support') ? (0, _linkExtractors.extractSmartLinkAri)(response) : (0, _linkExtractors.extractAri)(data)
   }, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && {

package/dist/cjs/state/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.hasAuthScopeOverrides = exports.getSubproduct = exports.getStatusDetails = exports.getServices = exports.getResourceType = exports.getProduct = exports.getExtensionKey = exports.getDefinitionId = exports.getDatasources = exports.getClickUrl = exports.getCanBeDatasource = exports.getByDefinitionId = void 0;
+exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.hasAuthScopeOverrides = exports.getSubproduct = exports.getStatusDetails = exports.getServices = exports.getResourceType = exports.getProduct = exports.getObjectAri = exports.getExtensionKey = exports.getDefinitionId = exports.getDatasources = exports.getClickUrl = exports.getCanBeDatasource = exports.getByDefinitionId = void 0;
 var _extractVisitUrl = require("../extractors/common/primitives/extractVisitUrl");
 var getByDefinitionId = exports.getByDefinitionId = function getByDefinitionId(definitionId, store) {
   var urls = Object.keys(store);
@@ -29,6 +29,9 @@ var getExtensionKey = exports.getExtensionKey = function getExtensionKey(details
   var _details$meta2;
   return details === null || details === void 0 || (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
 };
+var getObjectAri = exports.getObjectAri = function getObjectAri(details) {
+  return (details === null || details === void 0 ? void 0 : details.data) && 'atlassian:ari' in details.data && details.data['atlassian:ari'] || undefined;
+};
 var getResourceType = exports.getResourceType = function getResourceType(details) {
   var _details$meta3;
   return details === null || details === void 0 || (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;

package/dist/cjs/state/hooks/useSmartLink.js

@@ -15,7 +15,9 @@ var _store = require("../store");
 function useSmartLink(id, url) {
   var state = (0, _store.useSmartCardState)(url);
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
-    store = _useSmartLinkContext.store;
+    store = _useSmartLinkContext.store,
+    isGlancePanelAvailable = _useSmartLinkContext.isGlancePanelAvailable,
+    openGlancePanel = _useSmartLinkContext.openGlancePanel;
   var actions = (0, _actions.useSmartCardActions)(id, url);
   var config = (0, _config.useSmartLinkConfig)();
   var renderers = (0, _renderers.useSmartLinkRenderers)();
@@ -41,6 +43,8 @@ function useSmartLink(id, url) {
     actions: actions,
     config: config,
     renderers: renderers,
-    error: error
+    error: error,
+    isGlancePanelAvailable: isGlancePanelAvailable,
+    openGlancePanel: openGlancePanel
   };
 }

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.5.0"
+  packageVersion: "38.5.2"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -83,35 +83,44 @@ var ResolvedView = function ResolvedView(_ref) {
     origin: "smartLinkCard",
     actionOptions: actionOptions,
     testId: testId,
-    ui: _utils.FlexibleCardUiOptions,
+    ui: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _utils.FlexibleCardUiOptions : _utils.FlexibleCardUiOptionsOld,
     url: url
   }, /*#__PURE__*/React.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
     metadata: titleMetadata,
     subtitle: [{
       name: _constants.ElementName.Location
     }],
-    metadataPosition: _constants.SmartLinkPosition.Top,
-    status: status,
+    metadataPosition: _constants.SmartLinkPosition.Top
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    status: status
+  }, {
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulpcxkx _13mh1pd9"])
-  })), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, {
+  })), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
     primary: topMetadata,
-    maxLines: 1,
-    status: _constants.SmartLinkStatus.Resolved,
+    maxLines: 1
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    status: _constants.SmartLinkStatus.Resolved
+  }, {
     className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_wwyvidpf _1sxbcxkx _i8d01j6v"])
-  }), /*#__PURE__*/React.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, {
+  })), /*#__PURE__*/React.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
     primary: bottomMetadata,
-    maxLines: 1,
-    status: _constants.SmartLinkStatus.Resolved,
+    maxLines: 1
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    status: _constants.SmartLinkStatus.Resolved
+  }, {
     className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_wwyvidpf _1sxbcxkx _i8d01j6v"])
-  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
+  })), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
-    },
+    }
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    status: _constants.SmartLinkStatus.Resolved
+  })) : null, /*#__PURE__*/React.createElement(_blocks.FooterBlock, (0, _extends2.default)({
+    actions: footerActions
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
     status: _constants.SmartLinkStatus.Resolved
-  })) : null, /*#__PURE__*/React.createElement(_blocks.FooterBlock, {
-    actions: footerActions,
-    status: _constants.SmartLinkStatus.Resolved,
+  }, {
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
-  }));
+  })));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(ResolvedView);

package/dist/cjs/view/BlockCard/views/unresolved-view/index.js

@@ -53,23 +53,28 @@ var UnresolvedView = function UnresolvedView(_ref) {
     onError: onError,
     origin: "smartLinkCard",
     testId: testId,
-    ui: _utils.FlexibleCardUiOptions,
+    ui: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _utils.FlexibleCardUiOptions : _utils.FlexibleCardUiOptionsOld,
     url: url
   }, /*#__PURE__*/React.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
     hideIcon: !!title,
-    text: title,
-    status: cardState.status,
+    text: title
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    status: cardState.status
+  }, {
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulp1f3t _13mh1pd9"])
-  })), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
-    status: cardState.status,
+  })), /*#__PURE__*/React.createElement(_blocks.CustomBlock, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    status: cardState.status
+  }, {
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulp1b66 _1e0c1txw _4cvr1y6m _1wpz1fhb _7yjtidpf _ngc01fxt" : "_4cvr1y6m"])
-  }, children), showPreview && /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
+  }), children), showPreview && /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
     status: cardState.status
-  })), /*#__PURE__*/React.createElement(_blocks.InternalFooterBlock, {
+  })), /*#__PURE__*/React.createElement(_blocks.InternalFooterBlock, (0, _extends2.default)({
     actions: actions,
-    testId: "smart-block-card-footer",
-    status: cardState.status,
+    testId: "smart-block-card-footer"
+  }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
+    status: cardState.status
+  }, {
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
-  }));
+  })));
 };
 var _default = exports.default = UnresolvedView;

package/dist/cjs/view/BlockCard/views/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockOptions = exports.getSimulatedBetterMetadata = exports.PreviewBlockOptions = exports.FlexibleCardUiOptions = void 0;
+exports.titleBlockOptions = exports.getSimulatedBetterMetadata = exports.PreviewBlockOptions = exports.FlexibleCardUiOptionsOld = exports.FlexibleCardUiOptions = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../constants");
 var _utils = require("../../../../extractors/flexible/utils");
@@ -158,10 +158,18 @@ var getSimulatedBetterMetadata = exports.getSimulatedBetterMetadata = function g
       };
   }
 };
-var FlexibleCardUiOptions = exports.FlexibleCardUiOptions = {
+/**
+ * @deprecated Remove on platform-linking-flexible-card-context cleanup
+ */
+var FlexibleCardUiOptionsOld = exports.FlexibleCardUiOptionsOld = {
   hideElevation: true,
   hideLegacyButton: true
 };
+var FlexibleCardUiOptions = exports.FlexibleCardUiOptions = {
+  hideElevation: true,
+  hideLegacyButton: true,
+  removeBlockRestriction: true
+};
 var titleBlockOptions = exports.titleBlockOptions = {
   anchorTarget: '_self',
   position: _constants.SmartLinkPosition.Center,

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

@@ -62,7 +62,10 @@ function Component(_ref) {
     actions = _useSmartLink.actions,
     config = _useSmartLink.config,
     renderers = _useSmartLink.renderers,
-    error = _useSmartLink.error;
+    error = _useSmartLink.error,
+    isGlancePanelAvailable = _useSmartLink.isGlancePanelAvailable,
+    openGlancePanel = _useSmartLink.openGlancePanel;
+  var ari = (0, _platformFeatureFlags.fg)('fun-1765_wire_up_glance_panel_to_smart_cards') ? (0, _helpers.getObjectAri)(state.details) : undefined;
   var definitionId = (0, _helpers.getDefinitionId)(state.details);
   var extensionKey = (0, _helpers.getExtensionKey)(state.details);
   var resourceType = (0, _helpers.getResourceType)(state.details);
@@ -78,19 +81,37 @@ function Component(_ref) {
   // Setup UI handlers.
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
+    // Ctrl+left click on mac typically doesn't trigger onClick
+    // The event could have potentially had `e.preventDefault()` called on it by now
+    // event by smart card internally
+    // If it has been called then only then can `isModifierKeyPressed` be true.
+    var target = isModifierKeyPressed ? '_blank' : '_self';
     fireEvent('ui.smartLink.clicked', {
       id: id,
       display: isFlexibleUi ? _constants.CardDisplay.Flexible : appearance,
       definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
       isModifierKeyPressed: isModifierKeyPressed
     });
-    if (!onClick && !isFlexibleUi) {
+
+    // If glance panel is available and the user clicked on the link,
+    // delegate the click to the glance panel handler
+    if (
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    (0, _platformFeatureFlags.fg)('fun-1765_wire_up_glance_panel_to_smart_cards') && target !== '_blank' && ari && isGlancePanelAvailable !== null && isGlancePanelAvailable !== void 0 && isGlancePanelAvailable({
+      url: url,
+      ari: ari
+    }) && openGlancePanel) {
+      openGlancePanel({
+        url: url,
+        ari: ari
+      });
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: 'glancePanel'
+        }
+      });
+    } else if (!onClick && !isFlexibleUi) {
       var clickUrl = (0, _helpers.getClickUrl)(url, state.details);
-      // Ctrl+left click on mac typically doesn't trigger onClick
-      // The event could have potentially had `e.preventDefault()` called on it by now
-      // event by smart card internally
-      // If it has been called then only then can `isModifierKeyPressed` be true.
-      var target = isModifierKeyPressed ? '_blank' : '_self';
       window.open(clickUrl, target);
       (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event, {
         attributes: {
@@ -103,7 +124,7 @@ function Component(_ref) {
       }
       (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
     }
-  }, [id, url, state.details, appearance, definitionId, onClick, isFlexibleUi, createAnalyticsEvent, fireEvent]);
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, state.details, ari, isGlancePanelAvailable, openGlancePanel, createAnalyticsEvent]);
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);

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

@@ -15,7 +15,7 @@ var _tokens = require("@atlaskit/tokens");
 var _constants = require("../../constants");
 var _useInvokeClientAction = _interopRequireDefault(require("../../state/hooks/use-invoke-client-action"));
 var _utils = require("../../utils");
-var _iconElement = _interopRequireDefault(require("../FlexibleCard/components/elements/icon-element"));
+var _common = require("../FlexibleCard/components/elements/common");
 var _analytics = _interopRequireDefault(require("./components/analytics"));
 var _embedContent = _interopRequireDefault(require("./components/embed-content"));
 var _errorBoundary = _interopRequireDefault(require("./components/error-boundary"));
@@ -114,7 +114,7 @@ var EmbedModal = function EmbedModal(_ref) {
     label: title
   } : {}), /*#__PURE__*/_react.default.createElement(_linkInfo.default, {
     icon: linkIcon && {
-      icon: /*#__PURE__*/_react.default.createElement(_iconElement.default, (0, _extends2.default)({}, linkIcon, {
+      icon: /*#__PURE__*/_react.default.createElement(_common.BaseIconElement, (0, _extends2.default)({}, linkIcon, {
         size: _constants.SmartLinkSize.Large
       })),
       isFlexibleUi: true

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

@@ -99,7 +99,7 @@ var ActionBlock = function ActionBlock(_ref) {
         },
         onError: onError,
         onLoadingChange: onLoadingChange,
-        size: size
+        size: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? size || (ui === null || ui === void 0 ? void 0 : ui.size) : size
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/no-unsafe-design-token-usage
         ,
         style: padding && {
@@ -108,7 +108,7 @@ var ActionBlock = function ActionBlock(_ref) {
         hideTooltip: isLoading
       }) : null;
     });
-  }, [context === null || context === void 0 ? void 0 : context.actions, _onClick, onError, padding, size, spaceInline, isLoading, onLoadingChange]);
+  }, [context === null || context === void 0 ? void 0 : context.actions, spaceInline, onError, onLoadingChange, size, ui === null || ui === void 0 ? void 0 : ui.size, padding, isLoading, _onClick]);
   return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
     "data-testid": testId

package/dist/cjs/view/FlexibleCard/components/blocks/ai-footer-block/index.js

@@ -8,7 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _resolved = _interopRequireDefault(require("./resolved"));
 var _excluded = ["status", "testId"];
 /**
@@ -18,14 +20,26 @@ var _excluded = ["status", "testId"];
  * @see Block
  */
 var AIFooterBlock = function AIFooterBlock(_ref) {
+  var _props$size, _cardContext$ui;
   var status = _ref.status,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-ai-footer-block' : _ref$testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (status !== _constants.SmartLinkStatus.Resolved) {
-    return null;
+  var cardContext = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleCardContext)() : undefined;
+  if ((0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context')) {
+    if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== _constants.SmartLinkStatus.Resolved) {
+      return null;
+    }
+  } else {
+    if (status !== _constants.SmartLinkStatus.Resolved) {
+      return null;
+    }
   }
-  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? {
+    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 || (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size
+  } : undefined, {
     testId: testId
   }));
 };

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _resolved = _interopRequireDefault(require("./resolved"));
@@ -20,20 +21,31 @@ var _excluded = ["status", "testId"];
  * @see Block
  */
 var AISummaryBlock = function AISummaryBlock(_ref) {
-  var _context$actions;
+  var _context$actions, _props$size, _cardContext$ui;
   var status = _ref.status,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-ai-summary-block' : _ref$testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var cardContext = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleCardContext)() : undefined;
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
   var actionData = context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[_constants.InternalActionName.AISummaryAction];
-  if (status !== _constants.SmartLinkStatus.Resolved) {
-    return null;
+  if ((0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context')) {
+    if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== _constants.SmartLinkStatus.Resolved) {
+      return null;
+    }
+  } else {
+    if (status !== _constants.SmartLinkStatus.Resolved) {
+      return null;
+    }
   }
   if (!(actionData !== null && actionData !== void 0 && actionData.url)) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? {
+    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 || (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size
+  } : undefined, {
     testId: testId,
     url: actionData.url
   }));

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

@@ -8,7 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _resolved = _interopRequireDefault(require("./resolved"));
 var _excluded = ["status", "testId", "alwaysShow"];
 /**
@@ -19,15 +21,27 @@ var _excluded = ["status", "testId", "alwaysShow"];
  * @see Block
  */
 var FooterBlock = function FooterBlock(_ref) {
+  var _props$size, _cardContext$ui;
   var status = _ref.status,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-footer-block' : _ref$testId,
     alwaysShow = _ref.alwaysShow,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (status !== _constants.SmartLinkStatus.Resolved && !alwaysShow) {
-    return null;
+  var cardContext = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleCardContext)() : undefined;
+  if ((0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context')) {
+    if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== _constants.SmartLinkStatus.Resolved && !alwaysShow) {
+      return null;
+    }
+  } else {
+    if (status !== _constants.SmartLinkStatus.Resolved && !alwaysShow) {
+      return null;
+    }
   }
-  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, props, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? {
+    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 || (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size
+  } : undefined, {
     testId: testId
   }));
 };

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

@@ -14,6 +14,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 _constants = require("../../../../../constants");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _block = _interopRequireDefault(require("../block"));
 var _elementGroup = _interopRequireDefault(require("../element-group"));
 var _utils = require("../utils");
@@ -49,6 +50,26 @@ var getMaxLines = function getMaxLines(maxLines) {
   }
   return maxLines;
 };
+var ElementItemRenderer = function ElementItemRenderer(_ref) {
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? _constants.SmartLinkAlignment.Left : _ref$align,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'inline' : _ref$display,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines;
+  var elements = (0, _utils.renderElementItems)(items, display);
+  return elements && /*#__PURE__*/React.createElement(_elementGroup.default, {
+    align: align,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible,
+    size: size,
+    className: (0, _runtime.ax)([truncateStyles[maxLines], !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && sizeStylesOld[size], (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && sizeStyles[size]])
+  }, elements);
+};
 
 /**
  * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
@@ -57,26 +78,52 @@ var getMaxLines = function getMaxLines(maxLines) {
  * @param {MetadataBlockProps} MetadataBlockProps
  * @see Block
  */
-var MetadataBlock = function MetadataBlock(_ref) {
-  var _ref$maxLines = _ref.maxLines,
-    maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
-    _ref$primary = _ref.primary,
-    primary = _ref$primary === void 0 ? [] : _ref$primary,
-    _ref$secondary = _ref.secondary,
-    secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
-    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
-    return null;
+var MetadataBlock = function MetadataBlock(_ref2) {
+  var _ref3, _blockProps$size2, _cardContext$ui;
+  var _ref2$maxLines = _ref2.maxLines,
+    maxLines = _ref2$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref2$maxLines,
+    _ref2$status = _ref2.status,
+    status = _ref2$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref2$status,
+    _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? 'smart-block-metadata' : _ref2$testId,
+    _ref2$primary = _ref2.primary,
+    primary = _ref2$primary === void 0 ? [] : _ref2$primary,
+    _ref2$secondary = _ref2.secondary,
+    secondary = _ref2$secondary === void 0 ? [] : _ref2$secondary,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var cardContext = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _flexibleUiContext.useFlexibleCardContext)() : undefined;
+  if ((0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context')) {
+    if (primary.length === 0 && secondary.length === 0 || (cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== _constants.SmartLinkStatus.Resolved) {
+      return null;
+    }
+  } else {
+    if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
+      return null;
+    }
   }
-  var primaryElements = (0, _utils.renderElementItems)(primary);
-  var secondaryElements = (0, _utils.renderElementItems)(secondary);
   var _blockProps$size = blockProps.size,
-    size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+    sizeProp = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var size = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? (_ref3 = (_blockProps$size2 = blockProps === null || blockProps === void 0 ? void 0 : blockProps.size) !== null && _blockProps$size2 !== void 0 ? _blockProps$size2 : cardContext === null || cardContext === void 0 || (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size) !== null && _ref3 !== void 0 ? _ref3 : _constants.SmartLinkSize.Medium : sizeProp;
   var maxLinesTotal = getMaxLines(maxLines);
+  if ((0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context')) {
+    return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+      size: size,
+      testId: "".concat(testId, "-resolved-view")
+    }), /*#__PURE__*/React.createElement(ElementItemRenderer, {
+      items: primary,
+      size: size,
+      maxLines: maxLinesTotal
+    }), /*#__PURE__*/React.createElement(ElementItemRenderer, {
+      align: _constants.SmartLinkAlignment.Right,
+      items: secondary,
+      size: size,
+      maxLines: maxLinesTotal
+    }));
+  }
+  var primaryElements = (0, _utils.renderElementItems)(primary);
+  var secondaryElements = (0, _utils.renderElementItems)(secondary);
   return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
   }), primaryElements && /*#__PURE__*/React.createElement(_elementGroup.default, {