@atlaskit/smart-card 38.7.2 → 38.9.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 38.9.0
+
+### Minor Changes
+
+- [#166270](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166270)
+  [`231ec9798652d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/231ec9798652d) -
+  [ux] Added hideIconLoadingSkeleton prop to CardSSR to allow for hiding the loading skeleton for
+  image icons in the title of block cards. Set to true in the renderer.
+
+## 38.8.0
+
+### Minor Changes
+
+- [#166380](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166380)
+  [`769ada2231863`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/769ada2231863) -
+  Adds optional FlexibleUI property for enabling the SnippetRenderer
+
 ## 38.7.2
 
 ### Patch Changes

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.7.2"
+  packageVersion: "38.9.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -30,7 +30,8 @@ var BlockCard = exports.BlockCard = function BlockCard(_ref) {
     onError = _ref.onError,
     testId = _ref.testId,
     actionOptions = _ref.actionOptions,
-    CompetitorPrompt = _ref.CompetitorPrompt;
+    CompetitorPrompt = _ref.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton;
   var status = cardState.status;
   var blockCardProps = {
     id: id,
@@ -44,7 +45,8 @@ var BlockCard = exports.BlockCard = function BlockCard(_ref) {
     onResolve: onResolve,
     renderers: renderers,
     actionOptions: actionOptions,
-    CompetitorPrompt: CompetitorPrompt
+    CompetitorPrompt: CompetitorPrompt,
+    hideIconLoadingSkeleton: hideIconLoadingSkeleton
   };
   var _useControlDataExport = (0, _useControlDataExportConfig.useControlDataExportConfig)(),
     _useControlDataExport2 = _useControlDataExport.shouldControlDataExport,

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

@@ -42,7 +42,8 @@ var ResolvedView = function ResolvedView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
     url = _ref.url,
-    CompetitorPrompt = _ref.CompetitorPrompt;
+    CompetitorPrompt = _ref.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
@@ -74,6 +75,10 @@ var ResolvedView = function ResolvedView(_ref) {
     }];
   }, []);
   var status = cardState.status;
+  var uiOptions = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _utils.FlexibleCardUiOptions : _utils.FlexibleCardUiOptionsOld;
+  if ((0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -83,7 +88,7 @@ var ResolvedView = function ResolvedView(_ref) {
     origin: "smartLinkCard",
     actionOptions: actionOptions,
     testId: testId,
-    ui: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _utils.FlexibleCardUiOptions : _utils.FlexibleCardUiOptionsOld,
+    ui: uiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
     metadata: titleMetadata,
@@ -96,6 +101,7 @@ var ResolvedView = function ResolvedView(_ref) {
   }, {
     CompetitorPrompt: CompetitorPrompt,
     url: url,
+    hideIconLoadingSkeleton: hideIconLoadingSkeleton,
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulpcxkx _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
     primary: topMetadata,

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

@@ -50,7 +50,8 @@ function Component(_ref) {
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
     resolvingPlaceholder = _ref.resolvingPlaceholder,
     truncateInline = _ref.truncateInline,
-    CompetitorPrompt = _ref.CompetitorPrompt;
+    CompetitorPrompt = _ref.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton;
   var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
@@ -80,12 +81,7 @@ 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';
+    var isModifierKeyPressed = (0, _utils.isSpecialKey)(event) || (0, _utils.isSpecialClick)(event);
     fireEvent('ui.smartLink.clicked', {
       id: id,
       display: isFlexibleUi ? _constants.CardDisplay.Flexible : appearance,
@@ -97,9 +93,11 @@ function Component(_ref) {
     // 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({
+    (0, _platformFeatureFlags.fg)('fun-1765_wire_up_glance_panel_to_smart_cards') && !isModifierKeyPressed && ari && openGlancePanel && isGlancePanelAvailable !== null && isGlancePanelAvailable !== void 0 && isGlancePanelAvailable({
       ari: ari
-    }) && openGlancePanel) {
+    })) {
+      event.preventDefault();
+      event.stopPropagation();
       openGlancePanel({
         url: url,
         ari: ari,
@@ -113,6 +111,12 @@ function Component(_ref) {
       });
     } 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 `isSpecialEvent` be true.
+      var target = (0, _utils.isSpecialEvent)(event) ? '_blank' : '_self';
       window.open(clickUrl, target);
       (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event, {
         attributes: {
@@ -268,7 +272,8 @@ function Component(_ref) {
         onError: onError,
         testId: testId,
         actionOptions: actionOptions,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
     case 'embed':
       return /*#__PURE__*/_react.default.createElement(_EmbedCard.EmbedCard, {

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

@@ -10,7 +10,7 @@ exports.ActionFooter = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _motionWrapper = _interopRequireDefault(require("../../../common/motion-wrapper"));
@@ -31,7 +31,8 @@ var getIcon = function getIcon(appearance) {
         label: "Error",
         LEGACY_size: "small",
         testId: "action-error-icon",
-        LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
+        LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+        size: "small"
       });
     default:
       return null;

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

@@ -27,7 +27,7 @@ var MINIMUM_MAX_LINES = 1;
  * @see Block
  */
 var SnippetBlock = function SnippetBlock(_ref) {
-  var _blockProps$size2, _cardContext$ui2, _ref2, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
+  var _useFlexibleUiOptionC, _blockProps$size2, _cardContext$ui2, _ref2, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
     _ref$status = _ref.status,
@@ -44,6 +44,8 @@ var SnippetBlock = function SnippetBlock(_ref) {
   var renderers = (0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   (0, _renderers.useSmartLinkRenderers)() : undefined;
+  var enableSnippetRenderer = (0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer') ? // eslint-disable-next-line react-hooks/rules-of-hooks
+  (_useFlexibleUiOptionC = (0, _flexibleUiContext.useFlexibleUiOptionContext)()) === null || _useFlexibleUiOptionC === void 0 ? void 0 : _useFlexibleUiOptionC.enableSnippetRenderer : undefined;
   var cardContext = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   (0, _flexibleUiContext.useFlexibleCardContext)() : undefined;
@@ -62,7 +64,7 @@ var SnippetBlock = function SnippetBlock(_ref) {
     maxLines: snippetMaxLines,
     content: text
   });
-  if (!(0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer')) {
+  if (!(0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer') || !enableSnippetRenderer) {
     var _blockProps$size, _cardContext$ui;
     return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? {
       size: (_blockProps$size = blockProps.size) !== null && _blockProps$size !== void 0 ? _blockProps$size : cardContext === null || cardContext === void 0 || (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size

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

@@ -23,7 +23,7 @@ var _actionGroup = _interopRequireDefault(require("../action-group"));
 var _errored = _interopRequireDefault(require("./errored"));
 var _resolved = _interopRequireDefault(require("./resolved"));
 var _resolving = _interopRequireDefault(require("./resolving"));
-var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "status", "showActionOnHover", "testId", "text", "icon", "theme", "hideRetry", "metadataPosition", "hideIcon", "className", "anchorRef", "CompetitorPrompt", "url"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "status", "showActionOnHover", "testId", "text", "icon", "theme", "hideRetry", "metadataPosition", "hideIcon", "className", "anchorRef", "CompetitorPrompt", "url", "hideIconLoadingSkeleton"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var actionStyles = null;
 var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
@@ -80,6 +80,7 @@ var TitleBlock = function TitleBlock(_ref) {
     anchorRef = _ref.anchorRef,
     CompetitorPrompt = _ref.CompetitorPrompt,
     url = _ref.url,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton,
     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
@@ -139,6 +140,7 @@ var TitleBlock = function TitleBlock(_ref) {
     hideRetry: hideRetry
   } : undefined, {
     icon: icon,
+    hideIconLoadingSkeleton: hideIconLoadingSkeleton,
     size: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : ui === null || ui === void 0 ? void 0 : ui.size : props === null || props === void 0 ? void 0 : props.size
   }, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? undefined : {
     theme: theme

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

@@ -19,7 +19,7 @@ var _elements = require("../../../elements");
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _utils = require("../../utils");
-var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "icon", "title", "metadataPosition", "hideIcon", "CompetitorPrompt", "url"];
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "icon", "title", "metadataPosition", "hideIcon", "CompetitorPrompt", "url", "hideIconLoadingSkeleton"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var style = null;
 var styles = {
@@ -46,6 +46,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     hideIcon = _ref.hideIcon,
     CompetitorPrompt = _ref.CompetitorPrompt,
     url = _ref.url,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var size = blockProps.size;
   var metadataElements = (0, _utils.renderElementItems)(metadata);
@@ -55,7 +56,8 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }), !hideIcon && /*#__PURE__*/React.createElement(_elements.LinkIcon, {
     overrideIcon: icon,
     position: position,
-    size: size
+    size: size,
+    hideLoadingSkeleton: hideIconLoadingSkeleton
   }), /*#__PURE__*/React.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible,

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./index.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _loadingSkeleton = require("../loading-skeleton");
@@ -26,15 +28,23 @@ var ImageIcon = function ImageIcon(_ref) {
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance,
     onError = _ref.onError,
-    onLoad = _ref.onLoad;
-  return /*#__PURE__*/React.createElement(_reactRenderImage.default, {
-    src: url,
-    loading: /*#__PURE__*/React.createElement(_loadingSkeleton.LoadingSkeleton, {
-      testId: "".concat(testId, "-loading"),
-      width: width,
-      height: height
-    }),
-    loaded: /*#__PURE__*/React.createElement("img", {
+    onLoad = _ref.onLoad,
+    _ref$hideLoadingSkele = _ref.hideLoadingSkeleton,
+    hideLoadingSkeleton = _ref$hideLoadingSkele === void 0 ? false : _ref$hideLoadingSkele;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If url changes, reset state
+  (0, _react.useEffect)(function () {
+    setHasImageErrored(false);
+  }, [url]);
+  if (hasImageErrored) {
+    return defaultIcon;
+  }
+  if (hideLoadingSkeleton && (0, _platformFeatureFlags.fg)('platform_fix_block_card_img_icon_vc')) {
+    return /*#__PURE__*/React.createElement("img", {
       src: url,
       "data-testid": "".concat(testId, "-image"),
       alt: "",
@@ -42,11 +52,33 @@ var ImageIcon = function ImageIcon(_ref) {
         width: width,
         height: height
       },
+      onError: function onError() {
+        return setHasImageErrored(true);
+      },
       className: (0, _runtime.ax)([appearance === 'round' && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && styles.roundImg])
-    }),
-    errored: defaultIcon,
-    onError: onError,
-    onLoad: onLoad
-  });
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(_reactRenderImage.default, {
+      src: url,
+      loading: /*#__PURE__*/React.createElement(_loadingSkeleton.LoadingSkeleton, {
+        testId: "".concat(testId, "-loading"),
+        width: width,
+        height: height
+      }),
+      loaded: /*#__PURE__*/React.createElement("img", {
+        src: url,
+        "data-testid": "".concat(testId, "-image"),
+        alt: "",
+        style: {
+          width: width,
+          height: height
+        },
+        className: (0, _runtime.ax)([appearance === 'round' && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && styles.roundImg])
+      }),
+      errored: defaultIcon,
+      onError: onError,
+      onLoad: onLoad
+    });
+  }
 };
 var _default = exports.default = ImageIcon;

package/dist/cjs/view/FlexibleCard/components/elements/common/base-icon-element/index.js

@@ -62,6 +62,7 @@ var renderDefaultIcon = function renderDefaultIcon(label, testId) {
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
   var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants.SmartLinkSize.Medium;
   var appearance = arguments.length > 4 ? arguments[4] : undefined;
+  var hideLoadingSkeleton = arguments.length > 5 ? arguments[5] : undefined;
   var width = size === _constants.SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
     return /*#__PURE__*/React.createElement(_imageIcon.default, (0, _extends2.default)({
@@ -72,6 +73,8 @@ var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
       height: width
     }, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && {
       appearance: appearance
+    }, {
+      hideLoadingSkeleton: hideLoadingSkeleton
     }));
   }
 };
@@ -98,11 +101,12 @@ var IconElement = function IconElement(_ref) {
     testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
     url = _ref.url,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance;
+    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance,
+    hideLoadingSkeleton = _ref.hideLoadingSkeleton;
   var element = (0, _react.useMemo)(function () {
     var defaultIcon = renderDefaultIcon(label, testId);
-    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, size, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? appearance : undefined) || renderAtlaskitIcon(icon, testId, size) || defaultIcon;
-  }, [label, testId, overrideIcon, render, url, size, appearance, icon]);
+    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, size, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ? appearance : undefined, hideLoadingSkeleton) || renderAtlaskitIcon(icon, testId, size) || defaultIcon;
+  }, [label, testId, overrideIcon, render, url, size, appearance, hideLoadingSkeleton, icon]);
   var width = (0, _utils2.getIconWidth)(size);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {} : (0, _defineProperty2.default)({}, 'data-fit-to-content', true), {
     "data-smart-element": name,

package/dist/cjs/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.js

@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react2 = require("@compiled/react");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _linkingCommon = require("@atlaskit/linking-common");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -61,7 +61,8 @@ var LozengeActionTriggerOld = function LozengeActionTriggerOld(_ref) {
       color: "currentColor",
       label: "options",
       LEGACY_size: "medium",
-      LEGACY_margin: "-4px -8px -4px -7px"
+      LEGACY_margin: "-4px -8px -4px -7px",
+      size: "small"
     }))));
   }, [appearance, isBold, text]);
   return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
@@ -151,7 +152,8 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref2) {
       color: "currentColor",
       label: "options",
       LEGACY_size: "medium",
-      LEGACY_margin: "-4px -8px -4px -7px"
+      LEGACY_margin: "-4px -8px -4px -7px",
+      size: "small"
     })))));
   }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
   return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({

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

@@ -241,6 +241,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
     label: label
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
     ,
-    popupComponent: _CustomPopupContainer.default
+    popupComponent: _CustomPopupContainer.default,
+    shouldRenderToParent: (0, _platformFeatureFlags.fg)('should-render-to-parent-should-be-true-linking-pla')
   });
 };

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

@@ -114,6 +114,10 @@ var HoverCardContent = function HoverCardContent(_ref) {
     position: _constants.SmartLinkPosition.Center,
     subtitle: subtitle
   };
+  var uiOptions = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _styled.flexibleUiOptions : _styled.flexibleUiOptionsOld;
+  if ((0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   var flexibleCardProps = {
     appearance: _constants.CardDisplay.HoverCardPreview,
     cardState: cardState,
@@ -122,7 +126,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     origin: 'smartLinkPreviewHoverCard',
     renderers: renderers,
     actionOptions: actionOptions,
-    ui: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _styled.flexibleUiOptions : _styled.flexibleUiOptionsOld,
+    ui: uiOptions,
     url: url,
     children: null
   };

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -12,7 +12,6 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
-var _error2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("../../../messages");
@@ -37,11 +36,12 @@ var fallbackIcon = function fallbackIcon() {
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.iconWrapper
-  }, /*#__PURE__*/_react.default.createElement(_error2.default, {
+  }, /*#__PURE__*/_react.default.createElement(_error.default, {
     color: "var(--ds-icon-danger, #C9372C)",
     label: "error",
     LEGACY_size: "small",
-    testId: "errored-view-default-icon"
+    testId: "errored-view-default-icon",
+    size: "small"
   }));
 };
 var InlineCardErroredView = exports.InlineCardErroredView = function InlineCardErroredView(_ref) {

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.7.2",
+  packageVersion: "38.9.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

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.7.2"
+  packageVersion: "38.9.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -23,7 +23,8 @@ export const BlockCard = ({
   onError,
   testId,
   actionOptions,
-  CompetitorPrompt
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
 }) => {
   const {
     status
@@ -38,7 +39,8 @@ export const BlockCard = ({
     onResolve,
     renderers,
     actionOptions,
-    CompetitorPrompt
+    CompetitorPrompt,
+    hideIconLoadingSkeleton
   };
   const {
     shouldControlDataExport = false

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

@@ -31,7 +31,8 @@ const ResolvedView = ({
   actionOptions,
   testId = 'smart-block-resolved-view',
   url,
-  CompetitorPrompt
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
 }) => {
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
   const {
@@ -58,6 +59,10 @@ const ResolvedView = ({
     hideIcon: true
   }], []);
   const status = cardState.status;
+  const uiOptions = fg('platform-linking-flexible-card-context') ? FlexibleCardUiOptions : FlexibleCardUiOptionsOld;
+  if (fg('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -67,7 +72,7 @@ const ResolvedView = ({
     origin: "smartLinkCard",
     actionOptions: actionOptions,
     testId: testId,
-    ui: fg('platform-linking-flexible-card-context') ? FlexibleCardUiOptions : FlexibleCardUiOptionsOld,
+    ui: uiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
     metadata: titleMetadata,
@@ -80,6 +85,7 @@ const ResolvedView = ({
   }, {
     CompetitorPrompt: CompetitorPrompt,
     url: url,
+    hideIconLoadingSkeleton: hideIconLoadingSkeleton,
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulpcxkx _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topMetadata,

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

@@ -7,7 +7,7 @@ import { useSmartLink } from '../../state';
 import { succeedUfoExperience } from '../../state/analytics';
 import { getClickUrl, getDefinitionId, getExtensionKey, getObjectAri, getObjectIconUrl, getObjectName, getResourceType, getServices, isFinalState } from '../../state/helpers';
 import { SmartLinkModalProvider } from '../../state/modal';
-import { isSpecialEvent } from '../../utils';
+import { isSpecialClick, isSpecialEvent, isSpecialKey } from '../../utils';
 import { combineActionOptions } from '../../utils/actions/combine-action-options';
 import { fireLinkClickedEvent } from '../../utils/analytics/click';
 import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyticsContext';
@@ -41,7 +41,8 @@ function Component({
   removeTextHighlightingFromTitle,
   resolvingPlaceholder,
   truncateInline,
-  CompetitorPrompt
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
 }) {
   const {
     createAnalyticsEvent
@@ -73,12 +74,7 @@ function Component({
 
   // Setup UI handlers.
   const handleClickWrapper = useCallback(event => {
-    const isModifierKeyPressed = 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.
-    const target = isModifierKeyPressed ? '_blank' : '_self';
+    const isModifierKeyPressed = isSpecialKey(event) || isSpecialClick(event);
     fireEvent('ui.smartLink.clicked', {
       id,
       display: isFlexibleUi ? CardDisplay.Flexible : appearance,
@@ -90,9 +86,11 @@ function Component({
     // delegate the click to the glance panel handler
     if (
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('fun-1765_wire_up_glance_panel_to_smart_cards') && target !== '_blank' && ari && isGlancePanelAvailable !== null && isGlancePanelAvailable !== void 0 && isGlancePanelAvailable({
+    fg('fun-1765_wire_up_glance_panel_to_smart_cards') && !isModifierKeyPressed && ari && openGlancePanel && isGlancePanelAvailable !== null && isGlancePanelAvailable !== void 0 && isGlancePanelAvailable({
       ari
-    }) && openGlancePanel) {
+    })) {
+      event.preventDefault();
+      event.stopPropagation();
       openGlancePanel({
         url,
         ari,
@@ -106,6 +104,12 @@ function Component({
       });
     } else if (!onClick && !isFlexibleUi) {
       const clickUrl = 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 `isSpecialEvent` be true.
+      const target = isSpecialEvent(event) ? '_blank' : '_self';
       window.open(clickUrl, target);
       fireLinkClickedEvent(createAnalyticsEvent)(event, {
         attributes: {
@@ -257,7 +261,8 @@ function Component({
         onError: onError,
         testId: testId,
         actionOptions: actionOptions,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
     case 'embed':
       return /*#__PURE__*/React.createElement(EmbedCard, {

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

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import MotionWrapper from '../../../common/motion-wrapper';
@@ -22,7 +22,8 @@ const getIcon = appearance => {
         label: "Error",
         LEGACY_size: "small",
         testId: "action-error-icon",
-        LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`
+        LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
+        size: "small"
       });
     default:
       return null;