@atlaskit/smart-card 34.5.2 → 34.6.0

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.hoverCardClassName = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 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 _helpers = require("../../../state/helpers");
@@ -20,21 +20,15 @@ var _click = require("../../../utils/analytics/click");
 var _styled = require("../styled");
 var _utils2 = require("../utils");
 var _ContentContainer = _interopRequireDefault(require("./ContentContainer"));
+var _HoverCardContentOld = _interopRequireDefault(require("./HoverCardContentOld"));
 var _forbidden = _interopRequireDefault(require("./views/forbidden"));
 var _resolved = _interopRequireDefault(require("./views/resolved"));
 var _resolving = _interopRequireDefault(require("./views/resolving"));
 var _unauthorised = _interopRequireDefault(require("./views/unauthorised"));
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var hoverCardClassName = exports.hoverCardClassName = 'smart-links-hover-preview';
-var HoverCardContent = function HoverCardContent(_ref) {
+var HoverCardContentNew = function HoverCardContentNew(_ref) {
   var _linkState$status, _cardState$details;
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? '' : _ref$id,
@@ -118,7 +112,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var titleBlockProps = {
     maxLines: titleMaxLines,
-    overrideCss: _styled.titleBlockCss,
     size: _constants.SmartLinkSize.Large,
     position: _constants.SmartLinkPosition.Center,
     subtitle: subtitle
@@ -140,13 +133,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
   }, []);
   var getCardView = function getCardView(cardState) {
     if (cardState.metadataStatus === 'pending') {
-      return (0, _react2.jsx)(_resolving.default, {
+      return /*#__PURE__*/_react.default.createElement(_resolving.default, {
         flexibleCardProps: flexibleCardProps,
         titleBlockProps: titleBlockProps
       });
     }
     if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
-      return (0, _react2.jsx)(_unauthorised.default, {
+      return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
         extensionKey: extensionKey,
         id: id,
         flexibleCardProps: flexibleCardProps,
@@ -154,12 +147,12 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     }
     if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
-      return (0, _react2.jsx)(_forbidden.default, {
+      return /*#__PURE__*/_react.default.createElement(_forbidden.default, {
         flexibleCardProps: flexibleCardProps
       });
     }
     if (cardState.status === 'resolved') {
-      return (0, _react2.jsx)(_resolved.default, {
+      return /*#__PURE__*/_react.default.createElement(_resolved.default, {
         cardState: cardState,
         extensionKey: extensionKey,
         flexibleCardProps: flexibleCardProps,
@@ -172,7 +165,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return null;
   };
   var cardView = getCardView(cardState);
-  return cardView ? (0, _react2.jsx)(_ContentContainer.default, {
+  return cardView ? /*#__PURE__*/_react.default.createElement(_ContentContainer.default, {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
@@ -180,4 +173,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url: url
   }, cardView) : null;
 };
+var HoverCardContent = function HoverCardContent(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(HoverCardContentNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_HoverCardContentOld.default, props);
+  }
+};
 var _default = exports.default = HoverCardContent;

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

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hoverCardClassName = exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _linkProvider = require("@atlaskit/link-provider");
+var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
+var _constants = require("../../../constants");
+var _helpers = require("../../../state/helpers");
+var _store = require("../../../state/store");
+var _utils = require("../../../utils");
+var _aiSummary = require("../../../utils/ai-summary");
+var _click = require("../../../utils/analytics/click");
+var _styled = require("../styled");
+var _utils2 = require("../utils");
+var _ContentContainer = _interopRequireDefault(require("./ContentContainer"));
+var _forbidden = _interopRequireDefault(require("./views/forbidden"));
+var _resolved = _interopRequireDefault(require("./views/resolved"));
+var _resolving = _interopRequireDefault(require("./views/resolving"));
+var _unauthorised = _interopRequireDefault(require("./views/unauthorised"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var hoverCardClassName = exports.hoverCardClassName = 'smart-links-hover-preview';
+var HoverCardContentOld = function HoverCardContentOld(_ref) {
+  var _linkState$status, _cardState$details;
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? '' : _ref$id,
+    cardState = _ref.cardState,
+    onActionClick = _ref.onActionClick,
+    onResolve = _ref.onResolve,
+    renderers = _ref.renderers,
+    url = _ref.url,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    actionOptions = _ref.actionOptions;
+  var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var extensionKey = (0, _react.useMemo)(function () {
+    return (0, _helpers.getExtensionKey)(cardState.details);
+  }, [cardState.details]);
+  var linkState = (0, _store.useSmartCardState)(url);
+  var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
+  var definitionId = (0, _react.useMemo)(function () {
+    return (0, _helpers.getDefinitionId)(cardState.details);
+  }, [cardState.details]);
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    isAdminHubAIEnabled = _useSmartLinkContext.isAdminHubAIEnabled;
+  var isAISummaryEnabled = (0, _aiSummary.getIsAISummaryEnabled)(isAdminHubAIEnabled, cardState.details);
+  var services = (0, _helpers.getServices)(linkState.details);
+  var statusRef = (0, _react.useRef)(linkStatus);
+  var fireEventRef = (0, _react.useRef)(fireEvent);
+  var definitionIdRef = (0, _react.useRef)(definitionId);
+  (0, _react.useEffect)(function () {
+    /**
+     * Must access object value via ref because its not stable
+     * and it can trigger useEffect to re-run below
+     */
+    if (statusRef.current !== linkStatus) {
+      statusRef.current = linkStatus;
+    }
+    if (fireEventRef.current !== fireEvent) {
+      fireEventRef.current = fireEvent;
+    }
+    if (definitionIdRef.current !== definitionId) {
+      definitionIdRef.current = definitionId;
+    }
+  }, [linkStatus, fireEvent, definitionId]);
+  (0, _react.useEffect)(function () {
+    var _definitionIdRef$curr;
+    var previewDisplay = 'card';
+    var previewInvokeMethod = 'mouse_hover';
+    var cardOpenTime = Date.now();
+    var fireEventCurrent = fireEventRef.current;
+    fireEventCurrent('ui.hoverCard.viewed', {
+      previewDisplay: previewDisplay,
+      previewInvokeMethod: previewInvokeMethod,
+      definitionId: (_definitionIdRef$curr = definitionIdRef.current) !== null && _definitionIdRef$curr !== void 0 ? _definitionIdRef$curr : null
+    });
+    return function () {
+      var _definitionIdRef$curr2;
+      var hoverTime = Date.now() - cardOpenTime;
+      fireEventCurrent('ui.hoverCard.dismissed', {
+        previewDisplay: previewDisplay,
+        previewInvokeMethod: previewInvokeMethod,
+        hoverTime: hoverTime,
+        definitionId: (_definitionIdRef$curr2 = definitionIdRef.current) !== null && _definitionIdRef$curr2 !== void 0 ? _definitionIdRef$curr2 : null
+      });
+    };
+  }, []);
+  var onClick = (0, _react.useCallback)(function (event) {
+    var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
+    fireEvent('ui.smartLink.clicked.titleGoToLink', {
+      id: id,
+      display: _constants.CardDisplay.HoverCardPreview,
+      isModifierKeyPressed: isModifierKeyPressed,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null
+    });
+    (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
+  }, [createAnalyticsEvent, id, fireEvent, definitionId]);
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var _getMetadata = (0, _utils2.getMetadata)(extensionKey, data),
+    subtitle = _getMetadata.subtitle;
+  var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
+  var titleBlockProps = {
+    maxLines: titleMaxLines,
+    overrideCss: _styled.titleBlockCss,
+    size: _constants.SmartLinkSize.Large,
+    position: _constants.SmartLinkPosition.Center,
+    subtitle: subtitle
+  };
+  var flexibleCardProps = {
+    appearance: _constants.CardDisplay.HoverCardPreview,
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    origin: 'smartLinkPreviewHoverCard',
+    renderers: renderers,
+    actionOptions: actionOptions,
+    ui: _styled.flexibleUiOptions,
+    url: url,
+    children: null
+  };
+  var onClickStopPropagation = (0, _react.useCallback)(function (e) {
+    return e.stopPropagation();
+  }, []);
+  var getCardView = function getCardView(cardState) {
+    if (cardState.metadataStatus === 'pending') {
+      return /*#__PURE__*/_react.default.createElement(_resolving.default, {
+        flexibleCardProps: flexibleCardProps,
+        titleBlockProps: titleBlockProps
+      });
+    }
+    if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
+      return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
+        extensionKey: extensionKey,
+        id: id,
+        flexibleCardProps: flexibleCardProps,
+        url: url
+      });
+    }
+    if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
+      return /*#__PURE__*/_react.default.createElement(_forbidden.default, {
+        flexibleCardProps: flexibleCardProps
+      });
+    }
+    if (cardState.status === 'resolved') {
+      return /*#__PURE__*/_react.default.createElement(_resolved.default, {
+        cardState: cardState,
+        extensionKey: extensionKey,
+        flexibleCardProps: flexibleCardProps,
+        isAISummaryEnabled: isAISummaryEnabled,
+        onActionClick: onActionClick,
+        titleBlockProps: titleBlockProps,
+        url: url
+      });
+    }
+    return null;
+  };
+  var cardView = getCardView(cardState);
+  return cardView ? /*#__PURE__*/_react.default.createElement(_ContentContainer.default, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClickStopPropagation,
+    isAIEnabled: isAISummaryEnabled,
+    url: url
+  }, cardView) : null;
+};
+var _default = exports.default = HoverCardContentOld;

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

@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
 var _blocks = require("../../FlexibleCard/components/blocks");
-var _styled = require("../styled");
+var _ImagePreviewOld = _interopRequireDefault(require("./ImagePreviewOld"));
 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; }
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var ImagePreview = function ImagePreview(_ref) {
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ImagePreviewNew = function ImagePreviewNew(_ref) {
   var data = _ref.data,
     fallbackElementHeight = _ref.fallbackElementHeight;
   var transitionStarted = (0, _react.useRef)(false);
@@ -24,21 +26,33 @@ var ImagePreview = function ImagePreview(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showPreview = _useState2[0],
     setShowPreview = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)({}),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    previewCss = _useState4[0],
-    setPreviewCss = _useState4[1];
+    dynamicStyles = _useState4[0],
+    setDynamicStyles = _useState4[1];
 
   // Set Preview to a fixed height to enable transitions
   var onPreviewRender = (0, _react.useCallback)(function () {
-    var _previewBlockRef$curr;
-    previewBlockRef.current && setPreviewCss((0, _styled.getPreviewBlockStyles)((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+    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({
+        borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+        borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+        marginBottom: '0.5rem'
+      }, previewHeight ? {
+        height: "".concat(previewHeight, "px")
+      } : {}));
+    }
   }, []);
 
   // On error set Preview to Fallback height with transition
   var onPreviewError = (0, _react.useCallback)(function () {
     if (transitionStarted.current === false) {
-      setPreviewCss((0, _styled.getTransitionStyles)(fallbackElementHeight));
+      setDynamicStyles({
+        transition: 'height 300ms ease-in-out',
+        height: "".concat(fallbackElementHeight, "px")
+      });
       transitionStarted.current = true;
     }
   }, [fallbackElementHeight]);
@@ -48,10 +62,19 @@ var ImagePreview = function ImagePreview(_ref) {
   return showPreview && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
     onError: onPreviewError,
     ignoreContainerPadding: true,
-    overrideCss: previewCss,
     onTransitionEnd: onPreviewTransitionEnd,
     blockRef: previewBlockRef,
     onRender: onPreviewRender
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: dynamicStyles
   }) : null;
 };
+var ImagePreview = function ImagePreview(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return ImagePreviewNew(props);
+  } else {
+    return (0, _ImagePreviewOld.default)(props);
+  }
+};
 var _default = exports.default = ImagePreview;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
+var _blocks = require("../../FlexibleCard/components/blocks");
+var _styled = require("../styled");
+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; }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var ImagePreviewOld = function ImagePreviewOld(_ref) {
+  var data = _ref.data,
+    fallbackElementHeight = _ref.fallbackElementHeight;
+  var transitionStarted = (0, _react.useRef)(false);
+  var previewBlockRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showPreview = _useState2[0],
+    setShowPreview = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    previewCss = _useState4[0],
+    setPreviewCss = _useState4[1];
+
+  // Set Preview to a fixed height to enable transitions
+  var onPreviewRender = (0, _react.useCallback)(function () {
+    var _previewBlockRef$curr;
+    previewBlockRef.current && setPreviewCss((0, _styled.getPreviewBlockStyles)((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []);
+
+  // On error set Preview to Fallback height with transition
+  var onPreviewError = (0, _react.useCallback)(function () {
+    if (transitionStarted.current === false) {
+      setPreviewCss((0, _styled.getTransitionStyles)(fallbackElementHeight));
+      transitionStarted.current = true;
+    }
+  }, [fallbackElementHeight]);
+  var onPreviewTransitionEnd = (0, _react.useCallback)(function () {
+    setShowPreview(false);
+  }, []);
+  return showPreview && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+    onError: onPreviewError,
+    ignoreContainerPadding: true,
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  }) : null;
+};
+var _default = exports.default = ImagePreviewOld;

package/dist/cjs/view/HoverCard/components/views/forbidden/HoverCardForbiddenViewOld.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _extractAccessContext = require("../../../../../extractors/common/context/extractAccessContext");
+var _extractHostname = _interopRequireDefault(require("../../../../../extractors/common/hostname/extractHostname"));
+var _messages = require("../../../../../messages");
+var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
+var _blocks = require("../../../../FlexibleCard/components/blocks");
+var _styled = require("../../../styled");
+var _styled2 = require("./styled");
+var HoverCardForbiddenViewOld = function HoverCardForbiddenViewOld(_ref) {
+  var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
+  var flexibleCardProps = _ref.flexibleCardProps,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'hover-card-forbidden-view' : _ref$testId;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var cardState = flexibleCardProps.cardState,
+    url = flexibleCardProps.url;
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
+  var product = (_extractProvider$text = (_extractProvider = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
+  var hostname = /*#__PURE__*/_react.default.createElement("b", null, (0, _extractHostname.default)(url));
+  var _ref2 = (_extractRequestAccess = (0, _extractAccessContext.extractRequestAccessContextImproved)({
+      jsonLd: meta,
+      url: url,
+      product: product,
+      createAnalyticsEvent: createAnalyticsEvent
+    })) !== null && _extractRequestAccess !== void 0 ? _extractRequestAccess : {},
+    action = _ref2.action,
+    descriptiveMessageKey = _ref2.descriptiveMessageKey,
+    titleMessageKey = _ref2.titleMessageKey,
+    buttonDisabled = _ref2.buttonDisabled;
+  if (!titleMessageKey || !descriptiveMessageKey) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, (0, _extends2.default)({}, flexibleCardProps, {
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+    ignoreContainerPadding: true,
+    overrideCss: (0, _styled.getPreviewBlockStyles)(),
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: _styled2.titleBlockStyles,
+    testId: "".concat(testId, "-title")
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[titleMessageKey], {
+    values: {
+      product: product
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: _styled2.mainTextStyles,
+    testId: "".concat(testId, "-content")
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {
+    values: {
+      product: product,
+      hostname: hostname
+    }
+  }))), action && /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: _styled2.connectButtonStyles
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    testId: "".concat(testId, "-button"),
+    onClick: action === null || action === void 0 ? void 0 : action.promise,
+    appearance: "primary",
+    isDisabled: buttonDisabled
+  }, action === null || action === void 0 ? void 0 : action.text)));
+};
+var _default = exports.default = HoverCardForbiddenViewOld;

package/dist/cjs/view/HoverCard/components/views/forbidden/index.compiled.css

@@ -0,0 +1,10 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._13lipd34{border-top-left-radius:var(--ds-border-radius-200,8px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1nu9{display:inline}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._otyrcxkx{margin-bottom:var(--ds-space-100,.5rem)}
+._qrwqpd34{border-top-right-radius:var(--ds-border-radius-200,8px)}
+._y3gn1h6o{text-align:center}

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

@@ -1,24 +1,35 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../../../../../constants");
 var _extractAccessContext = require("../../../../../extractors/common/context/extractAccessContext");
 var _extractHostname = _interopRequireDefault(require("../../../../../extractors/common/hostname/extractHostname"));
 var _messages = require("../../../../../messages");
 var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 var _blocks = require("../../../../FlexibleCard/components/blocks");
-var _styled = require("../../../styled");
-var _styled2 = require("./styled");
-var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
+var _HoverCardForbiddenViewOld = _interopRequireDefault(require("./HoverCardForbiddenViewOld"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var titleBlockStyles = null;
+var mainTextStyles = null;
+var connectButtonStyles = null;
+var basePreviewStyles = null;
+var HoverCardForbiddenViewNew = function HoverCardForbiddenViewNew(_ref) {
   var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
   var flexibleCardProps = _ref.flexibleCardProps,
     _ref$testId = _ref.testId,
@@ -30,7 +41,7 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   var product = (_extractProvider$text = (_extractProvider = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  var hostname = /*#__PURE__*/_react.default.createElement("b", null, (0, _extractHostname.default)(url));
+  var hostname = /*#__PURE__*/React.createElement("b", null, (0, _extractHostname.default)(url));
   var _ref2 = (_extractRequestAccess = (0, _extractAccessContext.extractRequestAccessContextImproved)({
       jsonLd: meta,
       url: url,
@@ -44,34 +55,45 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   if (!titleMessageKey || !descriptiveMessageKey) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, (0, _extends2.default)({}, flexibleCardProps, {
+  return /*#__PURE__*/React.createElement(_FlexibleCard.default, (0, _extends2.default)({}, flexibleCardProps, {
     testId: testId
-  }), /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+  }), /*#__PURE__*/React.createElement(_blocks.PreviewBlock, {
     ignoreContainerPadding: true,
-    overrideCss: (0, _styled.getPreviewBlockStyles)(),
-    testId: testId
-  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
-    overrideCss: _styled2.titleBlockStyles,
-    testId: "".concat(testId, "-title")
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[titleMessageKey], {
+    testId: testId,
+    status: _constants.SmartLinkStatus.Forbidden,
+    className: (0, _runtime.ax)(["_13lipd34 _qrwqpd34 _otyrcxkx"])
+  }), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
+    testId: "".concat(testId, "-title"),
+    status: _constants.SmartLinkStatus.Forbidden,
+    className: (0, _runtime.ax)(["_1bah1h6o _k48p1pd9 _19pku2gc"])
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[titleMessageKey], {
     values: {
       product: product
     }
-  }))), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
-    overrideCss: _styled2.mainTextStyles,
-    testId: "".concat(testId, "-content")
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {
+  }))), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
+    testId: "".concat(testId, "-content"),
+    status: _constants.SmartLinkStatus.Forbidden,
+    className: (0, _runtime.ax)(["_11c8qk37 _1e0c1nu9 _1bah1h6o _19pkze3t _y3gn1h6o"])
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {
     values: {
       product: product,
       hostname: hostname
     }
-  }))), action && /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
-    overrideCss: _styled2.connectButtonStyles
-  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }))), action && /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
+    status: _constants.SmartLinkStatus.Forbidden,
+    className: (0, _runtime.ax)(["_1bah1h6o _19pku2gc"])
+  }, /*#__PURE__*/React.createElement(_button.default, {
     testId: "".concat(testId, "-button"),
     onClick: action === null || action === void 0 ? void 0 : action.promise,
     appearance: "primary",
     isDisabled: buttonDisabled
   }, action === null || action === void 0 ? void 0 : action.text)));
 };
+var HoverCardForbiddenView = function HoverCardForbiddenView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(HoverCardForbiddenViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_HoverCardForbiddenViewOld.default, props);
+  }
+};
 var _default = exports.default = HoverCardForbiddenView;

package/dist/cjs/view/HoverCard/components/views/forbidden/styled.js

@@ -7,6 +7,9 @@ exports.titleBlockStyles = exports.mainTextStyles = exports.connectButtonStyles
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)({
   justifyContent: 'center',
@@ -14,6 +17,9 @@ var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)({
   marginTop: "var(--ds-space-100, 8px)"
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var mainTextStyles = exports.mainTextStyles = (0, _react.css)({
   display: 'inline',
@@ -23,6 +29,9 @@ var mainTextStyles = exports.mainTextStyles = (0, _react.css)({
   textAlign: 'center'
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var connectButtonStyles = exports.connectButtonStyles = (0, _react.css)({
   justifyContent: 'center',