@atlaskit/smart-card 43.1.10 → 43.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 43.2.0
+
+### Minor Changes
+
+- [`6f1b276e3b112`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f1b276e3b112) -
+  Adds the new `placeholderData` property to the Smart Card (SSR) component. The card will display
+  using the respective object for the first render while still resolving `url` in the background.
+  Placeholder data should be considered a transient state and it will be replaced by the actual data
+  when the given `url` is resolved.
+
+## 43.1.11
+
+### Patch Changes
+
+- [`f1542b8bcb4d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1542b8bcb4d3) -
+  [ux] NAVX-1910 removing dynamic image margin to improve performance metrics
+- Updated dependencies
+
 ## 43.1.10
 
 ### Patch Changes

package/dist/cjs/extractors/flexible/extract-placeholder-data.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractPlaceHolderCardState = void 0;
+var isValidPlaceholderData = function isValidPlaceholderData(placeholderData) {
+  return (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
+};
+var extractPlaceHolderCardState = exports.extractPlaceHolderCardState = function extractPlaceHolderCardState(placeholderData) {
+  return isValidPlaceholderData(placeholderData) ? {
+    status: 'resolved',
+    metadataStatus: undefined,
+    details: placeholderData
+  } : undefined;
+};

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

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

@@ -31,9 +31,6 @@ var _InlineCard = require("../InlineCard");
 var _useSmartLinkEvents = require("../SmartLinkEvents/useSmartLinkEvents");
 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 thirdPartyARIPrefix = 'ari:third-party';
-var isValidPlaceholderData = function isValidPlaceholderData(placeholderData) {
-  return (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
-};
 function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -235,19 +232,6 @@ function Component(_ref) {
       display: isFlexibleUi ? 'flexible' : appearance
     });
   }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
-  var structuredPlaceholderData = (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  (0, _react.useMemo)(function () {
-    // execute some basic validation logic to ensure we should consider using placeholder data
-    if (isFlexibleUi && isValidPlaceholderData(placeholderData)) {
-      var data = {
-        status: 'resolved',
-        metadataStatus: undefined,
-        details: placeholderData
-      };
-      return data;
-    }
-  }, [isFlexibleUi, placeholderData]) : undefined;
   if (isFlexibleUi) {
     var cardState = state;
     if (error) {
@@ -262,7 +246,7 @@ function Component(_ref) {
     return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
       id: id,
       cardState: cardState,
-      placeholderData: (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ? structuredPlaceholderData : undefined,
+      placeholderData: (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ? placeholderData : undefined,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       origin: "smartLinkCard",

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.EmbedCardResolvedView = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokens = require("@atlaskit/tokens");
 var _utils = require("../../../utils");
 var _ExpandedFrame = require("../components/ExpandedFrame");
@@ -55,13 +54,10 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
       hideLoadingSkeleton: hideIconLoadingSkeleton
     });
   }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
-  if ((0, _platformFeatureFlags.fg)('ptc-enable-embed-team-smart-links')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _useEmbedResolvePostMessageListener.useEmbedResolvePostMessageListener)({
-      url: link,
-      embedIframeRef: embedIframeRef
-    });
-  }
+  (0, _useEmbedResolvePostMessageListener.useEmbedResolvePostMessageListener)({
+    url: link,
+    embedIframeRef: embedIframeRef
+  });
   var themeState = (0, _tokens.useThemeObserver)();
   var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
   if (previewUrl && isSupportTheming) {

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

@@ -12,6 +12,7 @@ var _linkProvider = require("@atlaskit/link-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
+var _extractPlaceholderData = require("../../extractors/flexible/extract-placeholder-data");
 var _flexibleUiContext = require("../../state/flexible-ui-context");
 var _useAiSummaryConfig = require("../../state/hooks/use-ai-summary-config");
 var _useResolve = _interopRequireDefault(require("../../state/hooks/use-resolve"));
@@ -31,7 +32,6 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'flexible' : _ref$appearance,
     cardState = _ref.cardState,
-    placeholderData = _ref.placeholderData,
     children = _ref.children,
     id = _ref.id,
     onAuthorize = _ref.onAuthorize,
@@ -39,6 +39,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     onError = _ref.onError,
     onResolve = _ref.onResolve,
     origin = _ref.origin,
+    placeholderData = _ref.placeholderData,
     renderers = _ref.renderers,
     showHoverPreview = _ref.showHoverPreview,
     hoverPreviewOptions = _ref.hoverPreviewOptions,
@@ -56,16 +57,19 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardType = cardState.status,
     details = cardState.details;
   var status = cardType;
-  var shouldUsePlaceholderData = PENDING_LINK_STATUSES.includes(status) && placeholderData && (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards');
-  // if we have placeholder data it means we can internally use it
-  // as resolved data until the actual data comes back as one of the final statuses
-  var contextStatus = shouldUsePlaceholderData ? _constants.SmartLinkStatus.Resolved : status;
+
+  // if we have placeholder state it means we can internally use it
+  // as temporary resolved data until the actual data comes back as one of the final statuses
+  var placeholderCardState = (0, _react.useMemo)(function () {
+    return PENDING_LINK_STATUSES.includes(status) && placeholderData && (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ? (0, _extractPlaceholderData.extractPlaceHolderCardState)(placeholderData) : undefined;
+  }, [placeholderData, status]);
+  var placeHolderStatus = placeholderCardState === null || placeholderCardState === void 0 ? void 0 : placeholderCardState.status;
   var context = (0, _react.useMemo)(function () {
     return (0, _utils.getContextByStatus)({
       aiSummaryConfig: aiSummaryConfig,
       appearance: appearance,
       fireEvent: fireEvent,
-      response: shouldUsePlaceholderData ? placeholderData.details : details,
+      response: placeholderCardState ? placeholderCardState.details : details,
       id: id,
       onAuthorize: onAuthorize,
       onClick: onClick,
@@ -73,19 +77,19 @@ var FlexibleCard = function FlexibleCard(_ref) {
       renderers: renderers,
       resolve: resolve,
       actionOptions: actionOptions,
-      status: shouldUsePlaceholderData ? contextStatus : status,
+      status: placeholderCardState ? placeHolderStatus : status,
       url: url,
       isPreviewPanelAvailable: isPreviewPanelAvailable,
       openPreviewPanel: openPreviewPanel
     });
-  }, [aiSummaryConfig, appearance, fireEvent, shouldUsePlaceholderData, placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.details, details, id, onAuthorize, onClick, origin, renderers, resolve, actionOptions, contextStatus, status, url, isPreviewPanelAvailable, openPreviewPanel]);
+  }, [aiSummaryConfig, appearance, actionOptions, details, id, isPreviewPanelAvailable, onAuthorize, onClick, openPreviewPanel, origin, placeholderCardState, placeHolderStatus, renderers, resolve, status, url, fireEvent]);
   var flexibleCardContext = (0, _react.useMemo)(function () {
     return {
       data: context,
-      status: (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ? contextStatus : status,
+      status: (0, _platformFeatureFlags.fg)('platform_initial_data_for_smart_cards') ? placeHolderStatus !== null && placeHolderStatus !== void 0 ? placeHolderStatus : status : status,
       ui: ui
     };
-  }, [context, contextStatus, status, ui]);
+  }, [context, placeHolderStatus, status, ui]);
   var _ref2 = context || {},
     linkTitle = _ref2.linkTitle;
   var title = linkTitle === null || linkTitle === void 0 ? void 0 : linkTitle.text;

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

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _extractPreview = require("../../../extractors/flexible/extract-preview");
 var _blocks = require("../../FlexibleCard/components/blocks");
 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); }
@@ -33,11 +34,12 @@ var ImagePreview = function ImagePreview(_ref) {
     if (previewBlockRef.current) {
       var _previewBlockRef$curr;
       var previewHeight = (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height;
-      setDynamicStyles(_objectSpread({
+      setDynamicStyles(_objectSpread(_objectSpread({
         borderTopLeftRadius: "var(--ds-radius-large, 8px)",
-        borderTopRightRadius: "var(--ds-radius-large, 8px)",
+        borderTopRightRadius: "var(--ds-radius-large, 8px)"
+      }, (0, _platformFeatureFlags.fg)('navx-1910-fix-hovercard-performance-metrics') ? {} : {
         marginBottom: "var(--ds-space-100, 8px)"
-      }, previewHeight ? {
+      }), previewHeight ? {
         height: "".concat(previewHeight, "px")
       } : {}));
     }

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

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

package/dist/es2019/extractors/flexible/extract-placeholder-data.js

@@ -0,0 +1,8 @@
+const isValidPlaceholderData = placeholderData => (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
+export const extractPlaceHolderCardState = placeholderData => {
+  return isValidPlaceholderData(placeholderData) ? {
+    status: 'resolved',
+    metadataStatus: undefined,
+    details: placeholderData
+  } : undefined;
+};

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

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

@@ -22,7 +22,6 @@ import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 const thirdPartyARIPrefix = 'ari:third-party';
-const isValidPlaceholderData = placeholderData => (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
 function Component({
   id,
   url,
@@ -222,19 +221,6 @@ function Component({
       display: isFlexibleUi ? 'flexible' : appearance
     });
   }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
-  const structuredPlaceholderData = fg('platform_initial_data_for_smart_cards') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useMemo(() => {
-    // execute some basic validation logic to ensure we should consider using placeholder data
-    if (isFlexibleUi && isValidPlaceholderData(placeholderData)) {
-      const data = {
-        status: 'resolved',
-        metadataStatus: undefined,
-        details: placeholderData
-      };
-      return data;
-    }
-  }, [isFlexibleUi, placeholderData]) : undefined;
   if (isFlexibleUi) {
     let cardState = state;
     if (error) {
@@ -249,7 +235,7 @@ function Component({
     return /*#__PURE__*/React.createElement(FlexibleCard, {
       id: id,
       cardState: cardState,
-      placeholderData: fg('platform_initial_data_for_smart_cards') ? structuredPlaceholderData : undefined,
+      placeholderData: fg('platform_initial_data_for_smart_cards') ? placeholderData : undefined,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       origin: "smartLinkCard",

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
 import { ExpandedFrame } from '../components/ExpandedFrame';
@@ -46,13 +45,10 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
       hideLoadingSkeleton: hideIconLoadingSkeleton
     });
   }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
-  if (fg('ptc-enable-embed-team-smart-links')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEmbedResolvePostMessageListener({
-      url: link,
-      embedIframeRef
-    });
-  }
+  useEmbedResolvePostMessageListener({
+    url: link,
+    embedIframeRef
+  });
   const themeState = useThemeObserver();
   let previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
   if (previewUrl && isSupportTheming) {

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

@@ -4,6 +4,7 @@ import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { InternalActionName, SmartLinkStatus } from '../../constants';
+import { extractPlaceHolderCardState } from '../../extractors/flexible/extract-placeholder-data';
 import { FlexibleCardContext } from '../../state/flexible-ui-context';
 import { useAISummaryConfig } from '../../state/hooks/use-ai-summary-config';
 import useResolve from '../../state/hooks/use-resolve';
@@ -20,7 +21,6 @@ const PENDING_LINK_STATUSES = [SmartLinkStatus.Pending, SmartLinkStatus.Resolvin
 const FlexibleCard = ({
   appearance = 'flexible',
   cardState,
-  placeholderData,
   children,
   id,
   onAuthorize,
@@ -28,6 +28,7 @@ const FlexibleCard = ({
   onError,
   onResolve,
   origin,
+  placeholderData,
   renderers,
   showHoverPreview,
   hoverPreviewOptions,
@@ -51,15 +52,16 @@ const FlexibleCard = ({
     details
   } = cardState;
   const status = cardType;
-  const shouldUsePlaceholderData = PENDING_LINK_STATUSES.includes(status) && placeholderData && fg('platform_initial_data_for_smart_cards');
-  // if we have placeholder data it means we can internally use it
-  // as resolved data until the actual data comes back as one of the final statuses
-  const contextStatus = shouldUsePlaceholderData ? SmartLinkStatus.Resolved : status;
+
+  // if we have placeholder state it means we can internally use it
+  // as temporary resolved data until the actual data comes back as one of the final statuses
+  const placeholderCardState = useMemo(() => PENDING_LINK_STATUSES.includes(status) && placeholderData && fg('platform_initial_data_for_smart_cards') ? extractPlaceHolderCardState(placeholderData) : undefined, [placeholderData, status]);
+  const placeHolderStatus = placeholderCardState === null || placeholderCardState === void 0 ? void 0 : placeholderCardState.status;
   const context = useMemo(() => getContextByStatus({
     aiSummaryConfig,
     appearance,
     fireEvent,
-    response: shouldUsePlaceholderData ? placeholderData.details : details,
+    response: placeholderCardState ? placeholderCardState.details : details,
     id,
     onAuthorize,
     onClick,
@@ -67,16 +69,16 @@ const FlexibleCard = ({
     renderers,
     resolve,
     actionOptions,
-    status: shouldUsePlaceholderData ? contextStatus : status,
+    status: placeholderCardState ? placeHolderStatus : status,
     url,
     isPreviewPanelAvailable,
     openPreviewPanel
-  }), [aiSummaryConfig, appearance, fireEvent, shouldUsePlaceholderData, placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.details, details, id, onAuthorize, onClick, origin, renderers, resolve, actionOptions, contextStatus, status, url, isPreviewPanelAvailable, openPreviewPanel]);
+  }), [aiSummaryConfig, appearance, actionOptions, details, id, isPreviewPanelAvailable, onAuthorize, onClick, openPreviewPanel, origin, placeholderCardState, placeHolderStatus, renderers, resolve, status, url, fireEvent]);
   const flexibleCardContext = useMemo(() => ({
     data: context,
-    status: fg('platform_initial_data_for_smart_cards') ? contextStatus : status,
+    status: fg('platform_initial_data_for_smart_cards') ? placeHolderStatus !== null && placeHolderStatus !== void 0 ? placeHolderStatus : status : status,
     ui
-  }), [context, contextStatus, status, ui]);
+  }), [context, placeHolderStatus, status, ui]);
   const {
     linkTitle
   } = context || {};

package/dist/es2019/view/HoverCard/components/ImagePreview.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { extractSmartLinkPreviewImage } from '../../../extractors/flexible/extract-preview';
 import { PreviewBlock } from '../../FlexibleCard/components/blocks';
 const ImagePreview = ({
@@ -18,7 +19,9 @@ const ImagePreview = ({
       setDynamicStyles({
         borderTopLeftRadius: "var(--ds-radius-large, 8px)",
         borderTopRightRadius: "var(--ds-radius-large, 8px)",
-        marginBottom: "var(--ds-space-100, 8px)",
+        ...(fg('navx-1910-fix-hovercard-performance-metrics') ? {} : {
+          marginBottom: "var(--ds-space-100, 8px)"
+        }),
         ...(previewHeight ? {
           height: `${previewHeight}px`
         } : {})

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

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.1.9",
+  packageVersion: "43.1.11",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/extractors/flexible/extract-placeholder-data.js

@@ -0,0 +1,10 @@
+var isValidPlaceholderData = function isValidPlaceholderData(placeholderData) {
+  return (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
+};
+export var extractPlaceHolderCardState = function extractPlaceHolderCardState(placeholderData) {
+  return isValidPlaceholderData(placeholderData) ? {
+    status: 'resolved',
+    metadataStatus: undefined,
+    details: placeholderData
+  } : undefined;
+};

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.1.9"
+  packageVersion: "43.1.11"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -22,9 +22,6 @@ import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 var thirdPartyARIPrefix = 'ari:third-party';
-var isValidPlaceholderData = function isValidPlaceholderData(placeholderData) {
-  return (placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.data) && 'url' in placeholderData.data && 'name' in placeholderData.data;
-};
 function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -226,19 +223,6 @@ function Component(_ref) {
       display: isFlexibleUi ? 'flexible' : appearance
     });
   }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
-  var structuredPlaceholderData = fg('platform_initial_data_for_smart_cards') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useMemo(function () {
-    // execute some basic validation logic to ensure we should consider using placeholder data
-    if (isFlexibleUi && isValidPlaceholderData(placeholderData)) {
-      var data = {
-        status: 'resolved',
-        metadataStatus: undefined,
-        details: placeholderData
-      };
-      return data;
-    }
-  }, [isFlexibleUi, placeholderData]) : undefined;
   if (isFlexibleUi) {
     var cardState = state;
     if (error) {
@@ -253,7 +237,7 @@ function Component(_ref) {
     return /*#__PURE__*/React.createElement(FlexibleCard, {
       id: id,
       cardState: cardState,
-      placeholderData: fg('platform_initial_data_for_smart_cards') ? structuredPlaceholderData : undefined,
+      placeholderData: fg('platform_initial_data_for_smart_cards') ? placeholderData : undefined,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       origin: "smartLinkCard",

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
 import { ExpandedFrame } from '../components/ExpandedFrame';
@@ -48,13 +47,10 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
       hideLoadingSkeleton: hideIconLoadingSkeleton
     });
   }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
-  if (fg('ptc-enable-embed-team-smart-links')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEmbedResolvePostMessageListener({
-      url: link,
-      embedIframeRef: embedIframeRef
-    });
-  }
+  useEmbedResolvePostMessageListener({
+    url: link,
+    embedIframeRef: embedIframeRef
+  });
   var themeState = useThemeObserver();
   var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
   if (previewUrl && isSupportTheming) {

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

@@ -4,6 +4,7 @@ import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { InternalActionName, SmartLinkStatus } from '../../constants';
+import { extractPlaceHolderCardState } from '../../extractors/flexible/extract-placeholder-data';
 import { FlexibleCardContext } from '../../state/flexible-ui-context';
 import { useAISummaryConfig } from '../../state/hooks/use-ai-summary-config';
 import useResolve from '../../state/hooks/use-resolve';
@@ -22,7 +23,6 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'flexible' : _ref$appearance,
     cardState = _ref.cardState,
-    placeholderData = _ref.placeholderData,
     children = _ref.children,
     id = _ref.id,
     onAuthorize = _ref.onAuthorize,
@@ -30,6 +30,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     onError = _ref.onError,
     onResolve = _ref.onResolve,
     origin = _ref.origin,
+    placeholderData = _ref.placeholderData,
     renderers = _ref.renderers,
     showHoverPreview = _ref.showHoverPreview,
     hoverPreviewOptions = _ref.hoverPreviewOptions,
@@ -47,16 +48,19 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardType = cardState.status,
     details = cardState.details;
   var status = cardType;
-  var shouldUsePlaceholderData = PENDING_LINK_STATUSES.includes(status) && placeholderData && fg('platform_initial_data_for_smart_cards');
-  // if we have placeholder data it means we can internally use it
-  // as resolved data until the actual data comes back as one of the final statuses
-  var contextStatus = shouldUsePlaceholderData ? SmartLinkStatus.Resolved : status;
+
+  // if we have placeholder state it means we can internally use it
+  // as temporary resolved data until the actual data comes back as one of the final statuses
+  var placeholderCardState = useMemo(function () {
+    return PENDING_LINK_STATUSES.includes(status) && placeholderData && fg('platform_initial_data_for_smart_cards') ? extractPlaceHolderCardState(placeholderData) : undefined;
+  }, [placeholderData, status]);
+  var placeHolderStatus = placeholderCardState === null || placeholderCardState === void 0 ? void 0 : placeholderCardState.status;
   var context = useMemo(function () {
     return getContextByStatus({
       aiSummaryConfig: aiSummaryConfig,
       appearance: appearance,
       fireEvent: fireEvent,
-      response: shouldUsePlaceholderData ? placeholderData.details : details,
+      response: placeholderCardState ? placeholderCardState.details : details,
       id: id,
       onAuthorize: onAuthorize,
       onClick: onClick,
@@ -64,19 +68,19 @@ var FlexibleCard = function FlexibleCard(_ref) {
       renderers: renderers,
       resolve: resolve,
       actionOptions: actionOptions,
-      status: shouldUsePlaceholderData ? contextStatus : status,
+      status: placeholderCardState ? placeHolderStatus : status,
       url: url,
       isPreviewPanelAvailable: isPreviewPanelAvailable,
       openPreviewPanel: openPreviewPanel
     });
-  }, [aiSummaryConfig, appearance, fireEvent, shouldUsePlaceholderData, placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.details, details, id, onAuthorize, onClick, origin, renderers, resolve, actionOptions, contextStatus, status, url, isPreviewPanelAvailable, openPreviewPanel]);
+  }, [aiSummaryConfig, appearance, actionOptions, details, id, isPreviewPanelAvailable, onAuthorize, onClick, openPreviewPanel, origin, placeholderCardState, placeHolderStatus, renderers, resolve, status, url, fireEvent]);
   var flexibleCardContext = useMemo(function () {
     return {
       data: context,
-      status: fg('platform_initial_data_for_smart_cards') ? contextStatus : status,
+      status: fg('platform_initial_data_for_smart_cards') ? placeHolderStatus !== null && placeHolderStatus !== void 0 ? placeHolderStatus : status : status,
       ui: ui
     };
-  }, [context, contextStatus, status, ui]);
+  }, [context, placeHolderStatus, status, ui]);
   var _ref2 = context || {},
     linkTitle = _ref2.linkTitle;
   var title = linkTitle === null || linkTitle === void 0 ? void 0 : linkTitle.text;

package/dist/esm/view/HoverCard/components/ImagePreview.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
 import React, { useCallback, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { extractSmartLinkPreviewImage } from '../../../extractors/flexible/extract-preview';
 import { PreviewBlock } from '../../FlexibleCard/components/blocks';
 var ImagePreview = function ImagePreview(_ref) {
@@ -24,11 +25,12 @@ var ImagePreview = function ImagePreview(_ref) {
     if (previewBlockRef.current) {
       var _previewBlockRef$curr;
       var previewHeight = (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height;
-      setDynamicStyles(_objectSpread({
+      setDynamicStyles(_objectSpread(_objectSpread({
         borderTopLeftRadius: "var(--ds-radius-large, 8px)",
-        borderTopRightRadius: "var(--ds-radius-large, 8px)",
+        borderTopRightRadius: "var(--ds-radius-large, 8px)"
+      }, fg('navx-1910-fix-hovercard-performance-metrics') ? {} : {
         marginBottom: "var(--ds-space-100, 8px)"
-      }, previewHeight ? {
+      }), previewHeight ? {
         height: "".concat(previewHeight, "px")
       } : {}));
     }

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

@@ -15,7 +15,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.1.9",
+  packageVersion: "43.1.11",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/extractors/flexible/extract-placeholder-data.d.ts

@@ -0,0 +1,3 @@
+import type { CardState } from "@atlaskit/linking-common";
+import type { SmartLinkResponse } from "@atlaskit/linking-types";
+export declare const extractPlaceHolderCardState: (placeholderData: SmartLinkResponse) => CardState | undefined;

package/dist/types/ssr.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { SmartLinkResponse } from '@atlaskit/linking-types';
 import type { CardProps } from './types';
 export type CardSSRProps = CardProps & {
     hideIconLoadingSkeleton?: boolean;
+    placeholderData?: SmartLinkResponse;
     url: string;
 };
 export declare const CardSSR: (props: CardSSRProps) => React.JSX.Element;

package/dist/types/view/CardWithUrl/types.d.ts

@@ -1,4 +1,5 @@
 import { type EventHandler, type KeyboardEvent, type MouseEvent } from 'react';
+import type { SmartLinkResponse } from '@atlaskit/linking-types';
 import type { CardActionOptions, CardAppearance, CardPlatform, EmbedIframeUrlType, OnResolveCallback } from '../Card/types';
 import { type FrameStyle } from '../EmbedCard/types';
 import { type FlexibleUiOptions } from '../FlexibleCard/types';
@@ -28,6 +29,7 @@ export type CardWithUrlContentProps = {
     onError?: OnErrorCallback;
     onResolve?: OnResolveCallback;
     placeholder?: string;
+    placeholderData?: SmartLinkResponse;
     platform?: CardPlatform;
     removeTextHighlightingFromTitle?: boolean;
     resolvingPlaceholder?: string;

package/dist/types/view/FlexibleCard/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { CardState } from '@atlaskit/linking-common';
 import { type FlexibleCardProps } from './types';
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
@@ -7,16 +6,5 @@ import { type FlexibleCardProps } from './types';
  * Note: TitleBlock is mandatory for a Flexible Card to render.
  * @see Container
  */
-declare const FlexibleCard: ({ appearance, cardState, placeholderData, children, id, onAuthorize, onClick, onError, onResolve, origin, renderers, showHoverPreview, hoverPreviewOptions, actionOptions, testId, ui, url, }: FlexibleCardProps & {
-    /**
-     * @experimental
-     * This is a new prop that is not part of the public API - DO NOT USE.
-     * If provided, the card will display using the respective object for the first render (particularly useful for SSR),
-     * while still resolving `url` in the background.
-     * Placeholder data should be considered a transient state - in the sense that it will not persisted to the main store -
-     * and it will be replaced by the actual data when the given `url` is resolved.
-     * ANIP-288: Expose this prop to the public API
-     */
-    placeholderData?: CardState;
-}) => React.JSX.Element;
+declare const FlexibleCard: ({ appearance, cardState, children, id, onAuthorize, onClick, onError, onResolve, origin, placeholderData, renderers, showHoverPreview, hoverPreviewOptions, actionOptions, testId, ui, url, }: FlexibleCardProps) => React.JSX.Element;
 export default FlexibleCard;

package/dist/types/view/FlexibleCard/types.d.ts

@@ -72,6 +72,12 @@ export type FlexibleCardProps = {
      * Smart links origin for analytics purposes
      */
     origin?: AnalyticsOrigin;
+    /**
+     * Placeholder data to be used when the card is in a pending state.
+     * This allows the card to render with some data until the actual data is fetched, useful for SSR.
+     * @internal
+     */
+    placeholderData?: SmartLinkResponse;
     /**
      * Any additional renderers required by Flexible UI. Currently used by icon
      * to render Emoji.

package/dist/types-ts4.5/extractors/flexible/extract-placeholder-data.d.ts

@@ -0,0 +1,3 @@
+import type { CardState } from "@atlaskit/linking-common";
+import type { SmartLinkResponse } from "@atlaskit/linking-types";
+export declare const extractPlaceHolderCardState: (placeholderData: SmartLinkResponse) => CardState | undefined;

package/dist/types-ts4.5/ssr.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { SmartLinkResponse } from '@atlaskit/linking-types';
 import type { CardProps } from './types';
 export type CardSSRProps = CardProps & {
     hideIconLoadingSkeleton?: boolean;
+    placeholderData?: SmartLinkResponse;
     url: string;
 };
 export declare const CardSSR: (props: CardSSRProps) => React.JSX.Element;

package/dist/types-ts4.5/view/CardWithUrl/types.d.ts

@@ -1,4 +1,5 @@
 import { type EventHandler, type KeyboardEvent, type MouseEvent } from 'react';
+import type { SmartLinkResponse } from '@atlaskit/linking-types';
 import type { CardActionOptions, CardAppearance, CardPlatform, EmbedIframeUrlType, OnResolveCallback } from '../Card/types';
 import { type FrameStyle } from '../EmbedCard/types';
 import { type FlexibleUiOptions } from '../FlexibleCard/types';
@@ -28,6 +29,7 @@ export type CardWithUrlContentProps = {
     onError?: OnErrorCallback;
     onResolve?: OnResolveCallback;
     placeholder?: string;
+    placeholderData?: SmartLinkResponse;
     platform?: CardPlatform;
     removeTextHighlightingFromTitle?: boolean;
     resolvingPlaceholder?: string;

package/dist/types-ts4.5/view/FlexibleCard/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { CardState } from '@atlaskit/linking-common';
 import { type FlexibleCardProps } from './types';
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
@@ -7,16 +6,5 @@ import { type FlexibleCardProps } from './types';
  * Note: TitleBlock is mandatory for a Flexible Card to render.
  * @see Container
  */
-declare const FlexibleCard: ({ appearance, cardState, placeholderData, children, id, onAuthorize, onClick, onError, onResolve, origin, renderers, showHoverPreview, hoverPreviewOptions, actionOptions, testId, ui, url, }: FlexibleCardProps & {
-    /**
-     * @experimental
-     * This is a new prop that is not part of the public API - DO NOT USE.
-     * If provided, the card will display using the respective object for the first render (particularly useful for SSR),
-     * while still resolving `url` in the background.
-     * Placeholder data should be considered a transient state - in the sense that it will not persisted to the main store -
-     * and it will be replaced by the actual data when the given `url` is resolved.
-     * ANIP-288: Expose this prop to the public API
-     */
-    placeholderData?: CardState;
-}) => React.JSX.Element;
+declare const FlexibleCard: ({ appearance, cardState, children, id, onAuthorize, onClick, onError, onResolve, origin, placeholderData, renderers, showHoverPreview, hoverPreviewOptions, actionOptions, testId, ui, url, }: FlexibleCardProps) => React.JSX.Element;
 export default FlexibleCard;

package/dist/types-ts4.5/view/FlexibleCard/types.d.ts

@@ -72,6 +72,12 @@ export type FlexibleCardProps = {
      * Smart links origin for analytics purposes
      */
     origin?: AnalyticsOrigin;
+    /**
+     * Placeholder data to be used when the card is in a pending state.
+     * This allows the card to render with some data until the actual data is fetched, useful for SSR.
+     * @internal
+     */
+    placeholderData?: SmartLinkResponse;
     /**
      * Any additional renderers required by Flexible UI. Currently used by icon
      * to render Emoji.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.1.10",
+	"version": "43.2.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -63,7 +63,7 @@
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.4.0",
-		"@atlaskit/primitives": "^15.0.0",
+		"@atlaskit/primitives": "^16.0.0",
 		"@atlaskit/section-message": "^8.7.0",
 		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/spinner": "^19.0.0",
@@ -214,9 +214,6 @@
 		"platform_smartlink_3pclick_analytics": {
 			"type": "boolean"
 		},
-		"ptc-enable-embed-team-smart-links": {
-			"type": "boolean"
-		},
 		"platform_deprecate_lp_cc_embed": {
 			"type": "boolean"
 		},
@@ -234,6 +231,9 @@
 		},
 		"jfp-magma-platform-lozenge-jump-fix": {
 			"type": "boolean"
+		},
+		"navx-1910-fix-hovercard-performance-metrics": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/f74ef1bc-7240-4aac-9dc8-9dc43b502089"