@atlaskit/smart-card 44.3.0 → 44.3.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 44.3.2
+
+### Patch Changes
+
+- [`dee5bdcb8345a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dee5bdcb8345a) -
+  Fire analytics event when SL intesects into viewport
+- Updated dependencies
+
+## 44.3.1
+
+### Patch Changes
+
+- [`3c09c35ca21ce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3c09c35ca21ce) -
+  NAVX-2971: Remove platform_navx_send_context_to_ugs_for_rel_links feature flag (cleanup state:
+  true) — always send X-Query-Context header
+- Updated dependencies
+
 ## 44.3.0
 
 ### Minor Changes

package/analytics.spec.yaml

@@ -851,6 +851,15 @@ events:
           required: false
           type: string
           description: The unique ID for this Smart Link
+  - smartLink seen:
+      type: ui
+      description: fires an event that represents when a rendered Smart Link is visible in the viewport for the first time
+      attributes:
+        <<: [*PackageMetaDataContext, *CommonContext, *ResolvedContext]
+        display:
+          required: true
+          type: ['inline', 'block', 'embed', 'flexible']
+          description: Whether the card was an Inline, Block, Embed or Flexible UI
   - smartLink clicked (smartlinkClickAnalyticsWorkflows):
       type: ui
       description:

package/dist/cjs/ssr.js

@@ -12,7 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactErrorBoundary = require("react-error-boundary");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("./utils/analytics/analytics");
+var _cardErrorBoundary = _interopRequireDefault(require("./view/CardWithUrl/card-error-boundary"));
 var _component = require("./view/CardWithUrl/component");
 var _LoadingCardLink = require("./view/CardWithUrl/component-lazy/LoadingCardLink");
 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); }
@@ -21,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
-var CardSSR = exports.CardSSR = function CardSSR(props) {
+var CardSSROld = function CardSSROld(props) {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var _useState = (0, _react.useState)(function () {
       var _props$id;
@@ -47,4 +49,29 @@ var CardSSR = exports.CardSSR = function CardSSR(props) {
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: "loader-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, cardProps))));
+};
+
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+var CardSSRNew = function CardSSRNew(props) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  var _useState3 = (0, _react.useState)(function () {
+      var _props$id2;
+      return (_props$id2 = props.id) !== null && _props$id2 !== void 0 ? _props$id2 : (0, _uuid.default)();
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    id = _useState4[0];
+  var propsWithId = _objectSpread(_objectSpread({}, props), {}, {
+    id: id
+  });
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: _analytics.context
+  }, /*#__PURE__*/_react.default.createElement(_cardErrorBoundary.default, propsWithId, /*#__PURE__*/_react.default.createElement(_component.CardWithUrl, propsWithId)));
+};
+var CardSSR = exports.CardSSR = function CardSSR(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+    return /*#__PURE__*/_react.default.createElement(CardSSRNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(CardSSROld, props);
 };

package/dist/cjs/state/hooks/use-incoming-outgoing-links/index.js

@@ -9,7 +9,6 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _linkingCommon = require("@atlaskit/linking-common");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _query = require("./query");
 /**
  * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
@@ -107,8 +106,8 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
       var _response$data$graphS, _response$data, _response$data$graphS2, _response$data2;
       var firstIncoming,
         firstOutgoing,
-        headers,
         siteId,
+        headers,
         response,
         incomingAris,
         outgoingAris,
@@ -118,28 +117,23 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
           case 0:
             firstIncoming = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 50;
             firstOutgoing = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : 50;
-            if (!(0, _platformFeatureFlags.fg)('platform_navx_send_context_to_ugs_for_rel_links')) {
-              _context4.next = 9;
-              break;
-            }
-            _context4.next = 5;
+            _context4.next = 4;
             return getSiteId(ari);
-          case 5:
+          case 4:
             siteId = _context4.sent;
             if (siteId) {
-              _context4.next = 8;
+              _context4.next = 7;
               break;
             }
             return _context4.abrupt("return", {
               incomingAris: [],
               outgoingAris: []
             });
-          case 8:
+          case 7:
             headers = {
               'X-Query-Context': "ari:cloud:platform::site/".concat(siteId)
             };
-          case 9:
-            _context4.next = 11;
+            _context4.next = 10;
             return aggRequestCall({
               variables: {
                 id: ari,
@@ -148,7 +142,7 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
               },
               query: _query.queryIncomingOutgoingLinks
             }, headers);
-          case 11:
+          case 10:
             response = _context4.sent;
             incomingAris = (_response$data$graphS = response === null || response === void 0 || (_response$data = response.data) === null || _response$data === void 0 || (_response$data = _response$data.graphStore) === null || _response$data === void 0 || (_response$data = _response$data.incoming) === null || _response$data === void 0 || (_response$data = _response$data.aris) === null || _response$data === void 0 || (_response$data = _response$data.map(function (node) {
               return node === null || node === void 0 ? void 0 : node.id;
@@ -164,7 +158,7 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
               incomingAris: incomingAris,
               outgoingAris: outgoingAris
             });
-          case 15:
+          case 14:
           case "end":
             return _context4.stop();
         }

package/dist/cjs/state/hooks/use-intersection-observer/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+// This property enables the intersection observer to be run once the
+// HTML element being observed is within `X` px of the target container it is
+// being compared to. Since the default container is the `document`, we set this
+// up to check once a Smart Link is within `X` px from the bottom of the viewport.
+var ROOT_MARGIN_VERTICAL = '360px';
+var useIntersectionObserver = function useIntersectionObserver(_ref) {
+  var onIntersectingCallback = _ref.onIntersecting,
+    onIntersectionCallback = _ref.onIntersection;
+  var ref = (0, _react.useRef)(null);
+  var onIntersectingCallbackRef = (0, _react.useRef)(onIntersectingCallback);
+  var onIntersectionCallbackRef = (0, _react.useRef)(onIntersectionCallback);
+  (0, _react.useEffect)(function () {
+    onIntersectingCallbackRef.current = onIntersectingCallback;
+    onIntersectionCallbackRef.current = onIntersectionCallback;
+  }, [onIntersectingCallback, onIntersectionCallback]);
+  var onIntersection = (0, _react.useCallback)(function (entries, observer) {
+    var _onIntersectionCallba;
+    var isIntersecting = entries.some(function (entry) {
+      return entry.isIntersecting;
+    });
+    (_onIntersectionCallba = onIntersectionCallbackRef.current) === null || _onIntersectionCallba === void 0 || _onIntersectionCallba.call(onIntersectionCallbackRef, isIntersecting);
+    if (isIntersecting) {
+      var _onIntersectingCallba;
+      (_onIntersectingCallba = onIntersectingCallbackRef.current) === null || _onIntersectingCallba === void 0 || _onIntersectingCallba.call(onIntersectingCallbackRef);
+      observer.disconnect();
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!ref.current) {
+      return;
+    }
+    var intersectionObserver = new IntersectionObserver(onIntersection, {
+      rootMargin: "".concat(ROOT_MARGIN_VERTICAL, " 0px ").concat(ROOT_MARGIN_VERTICAL, " 0px")
+    });
+    intersectionObserver.observe(ref.current);
+    return function () {
+      return intersectionObserver.disconnect();
+    };
+  }, [ref, onIntersection]);
+  return ref;
+};
+var _default = exports.default = useIntersectionObserver;

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

package/dist/cjs/view/CardWithUrl/card-error-boundary/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactErrorBoundary = require("react-error-boundary");
+var _LoadingCardLink = require("../component-lazy/LoadingCardLink");
+var _excluded = ["children"];
+var CardErrorBoundary = function CardErrorBoundary(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // TODO: NAVX-4682: Add feature parity to CardWithURLRenderer
+  var ErrorFallbackComponent = props.fallbackComponent;
+  var errorBoundaryFallbackComponent = function errorBoundaryFallbackComponent() {
+    if (ErrorFallbackComponent) {
+      return /*#__PURE__*/_react.default.createElement(ErrorFallbackComponent, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props);
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+    FallbackComponent: errorBoundaryFallbackComponent
+  }, children);
+};
+var _default = exports.default = CardErrorBoundary;

package/dist/cjs/view/CardWithUrl/card-intersection-observer/index.js

@@ -0,0 +1,46 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useIntersectionObserver = _interopRequireDefault(require("../../../state/hooks/use-intersection-observer"));
+var _utils = require("../../../utils");
+var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
+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 withCardIntersectionObserver = function withCardIntersectionObserver(Component) {
+  return function (props) {
+    // TODO: NAVX-4682: Add feature parity to LazyIntersectionObserverCard for no lazy loading
+    var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isIntersected = _useState2[0],
+      setIsIntersected = _useState2[1];
+    var onIntersecting = (0, _react.useCallback)(function () {
+      setIsIntersected(true);
+    }, []);
+    var ref = (0, _useIntersectionObserver.default)({
+      onIntersecting: onIntersecting
+    });
+    return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
+      appearance: props.appearance,
+      ref: ref
+    }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+      isIntersected: isIntersected
+    })));
+  };
+};
+var withCardIntersectionObserverFallback = function withCardIntersectionObserverFallback(Component) {
+  return function (props) {
+    return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
+      appearance: props.appearance
+    }, /*#__PURE__*/_react.default.createElement(Component, props));
+  };
+};
+var _default = exports.default = function _default(Component) {
+  return (0, _utils.isIntersectionObserverSupported)() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component);
+};

package/dist/cjs/view/CardWithUrl/card-loader-wrapper/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 CardLoaderWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var appearance = _ref.appearance,
+    children = _ref.children;
+  var Component = appearance === 'inline' ? 'span' : 'div';
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    _react.default.createElement(Component, {
+      className: "loader-wrapper",
+      ref: ref
+    }, children)
+  );
+});
+var _default = exports.default = CardLoaderWrapper;

package/dist/cjs/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -5,12 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LazyIntersectionObserverCard = LazyIntersectionObserverCard;
+exports.LazyIntersectionObserverCard = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _state = require("../../../state");
 var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
+var _useIntersectionObserver = _interopRequireDefault(require("../../../state/hooks/use-intersection-observer"));
 var _shouldSample = require("../../../utils/shouldSample");
+var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
 var _component = require("../component");
 var _LoadingCardLink = require("./LoadingCardLink");
 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); }
@@ -19,7 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // being compared to. Since the default container is the `document`, we set this
 // up to check once a Smart Link is within `X` px from the bottom of the viewport.
 var ROOT_MARGIN_VERTICAL = '360px';
-function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -68,4 +72,40 @@ function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(props) {
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isIntersected = _useState6[0],
+    setIsIntersected = _useState6[1];
+  var _useState7 = (0, _react.useState)((0, _shouldSample.shouldSample)()),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 1),
+    shouldSendRenderedUFOEvent = _useState8[0];
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
+  var prefetch = (0, _state.usePrefetch)(url);
+  var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var onIntersection = (0, _react.useCallback)(function (isIntersecting) {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  var ref = (0, _useIntersectionObserver.default)({
+    onIntersection: onIntersection
+  });
+  var content = isIntersected ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, (0, _extends2.default)({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));
+  return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
+    appearance: appearance
+  }, content);
+};
+var LazyIntersectionObserverCard = exports.LazyIntersectionObserverCard = (0, _platformFeatureFlagsReact.componentWithFG)('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardWithUrlContent = void 0;
+exports.CardWithUrlContent = exports.CardWithUrl = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
@@ -30,6 +30,7 @@ var _EmbedCard = require("../EmbedCard");
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 var _InlineCard = require("../InlineCard");
 var _useSmartLinkEvents = require("../SmartLinkEvents/useSmartLinkEvents");
+var _cardIntersectionObserver = _interopRequireDefault(require("./card-intersection-observer"));
 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 EmbedCardComponent = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', _EmbedCard.EmbedCardUpdated, _EmbedCard.EmbedCard);
@@ -38,6 +39,7 @@ function Component(_ref) {
     url = _ref.url,
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
+    isIntersected = _ref.isIntersected,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
@@ -65,6 +67,7 @@ function Component(_ref) {
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents3.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var hasFiredSeenRef = (0, _react.useRef)(false);
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children, ui);
   }, [children, ui]);
@@ -218,6 +221,19 @@ function Component(_ref) {
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+      if (!(0, _helpers.isFinalState)(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -340,6 +356,7 @@ function ComponentUpdated(_ref2) {
     url = _ref2.url,
     isSelected = _ref2.isSelected,
     isHovered = _ref2.isHovered,
+    isIntersected = _ref2.isIntersected,
     frameStyle = _ref2.frameStyle,
     platform = _ref2.platform,
     onClick = _ref2.onClick,
@@ -367,6 +384,7 @@ function ComponentUpdated(_ref2) {
     createAnalyticsEvent = _useAnalyticsEventsNe2.createAnalyticsEvent;
   var _useAnalyticsEvents2 = (0, _useAnalyticsEvents3.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents2.fireEvent;
+  var hasFiredSeenRef = (0, _react.useRef)(false);
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children, ui);
   }, [children, ui]);
@@ -520,6 +538,19 @@ function ComponentUpdated(_ref2) {
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+      if (!(0, _helpers.isFinalState)(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -664,4 +695,5 @@ var CardWithUrlContent = exports.CardWithUrlContent = function CardWithUrlConten
     id: props.id,
     display: display
   }, /*#__PURE__*/_react.default.createElement(CardWithUrlContentComponent, props)));
-};
+};
+var CardWithUrl = exports.CardWithUrl = (0, _cardIntersectionObserver.default)(CardWithUrlContent);

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

package/dist/es2019/ssr.js

@@ -3,13 +3,15 @@ import { ErrorBoundary } from 'react-error-boundary';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { context } from './utils/analytics/analytics';
-import { CardWithUrlContent } from './view/CardWithUrl/component';
+import CardErrorBoundary from './view/CardWithUrl/card-error-boundary';
+import { CardWithUrl, CardWithUrlContent } from './view/CardWithUrl/component';
 import { LoadingCardLink } from './view/CardWithUrl/component-lazy/LoadingCardLink';
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
-export const CardSSR = props => {
+const CardSSROld = props => {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const [id] = useState(() => {
     var _props$id;
@@ -34,4 +36,28 @@ export const CardSSR = props => {
   }, /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps))));
+};
+
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+const CardSSRNew = props => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  const [id] = useState(() => {
+    var _props$id2;
+    return (_props$id2 = props.id) !== null && _props$id2 !== void 0 ? _props$id2 : uuid();
+  });
+  const propsWithId = {
+    ...props,
+    id
+  };
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: context
+  }, /*#__PURE__*/React.createElement(CardErrorBoundary, propsWithId, /*#__PURE__*/React.createElement(CardWithUrl, propsWithId)));
+};
+export const CardSSR = props => {
+  if (fg('platform_sl_event_ui_seen')) {
+    return /*#__PURE__*/React.createElement(CardSSRNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CardSSROld, props);
 };

package/dist/es2019/state/hooks/use-incoming-outgoing-links/index.js

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
 import { request } from '@atlaskit/linking-common';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { queryIncomingOutgoingLinks as queryIncomingOutgoingAris } from './query';
 /**
  * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
@@ -45,19 +44,16 @@ const useIncomingOutgoingAri = (baseUriWithNoTrailingSlash = '') => {
    */
   async (ari, firstIncoming = 50, firstOutgoing = 50) => {
     var _response$data$graphS, _response$data, _response$data$graphS2, _response$data$graphS3, _response$data$graphS4, _response$data$graphS5, _response$data$graphS6, _response$data2, _response$data2$graph, _response$data2$graph2, _response$data2$graph3, _response$data2$graph4;
-    let headers;
-    if (fg('platform_navx_send_context_to_ugs_for_rel_links')) {
-      const siteId = await getSiteId(ari);
-      if (!siteId) {
-        return {
-          incomingAris: [],
-          outgoingAris: []
-        };
-      }
-      headers = {
-        'X-Query-Context': `ari:cloud:platform::site/${siteId}`
+    const siteId = await getSiteId(ari);
+    if (!siteId) {
+      return {
+        incomingAris: [],
+        outgoingAris: []
       };
     }
+    const headers = {
+      'X-Query-Context': `ari:cloud:platform::site/${siteId}`
+    };
     const response = await aggRequestCall({
       variables: {
         id: ari,

package/dist/es2019/state/hooks/use-intersection-observer/index.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+// This property enables the intersection observer to be run once the
+// HTML element being observed is within `X` px of the target container it is
+// being compared to. Since the default container is the `document`, we set this
+// up to check once a Smart Link is within `X` px from the bottom of the viewport.
+const ROOT_MARGIN_VERTICAL = '360px';
+const useIntersectionObserver = ({
+  onIntersecting: onIntersectingCallback,
+  onIntersection: onIntersectionCallback
+}) => {
+  const ref = useRef(null);
+  const onIntersectingCallbackRef = useRef(onIntersectingCallback);
+  const onIntersectionCallbackRef = useRef(onIntersectionCallback);
+  useEffect(() => {
+    onIntersectingCallbackRef.current = onIntersectingCallback;
+    onIntersectionCallbackRef.current = onIntersectionCallback;
+  }, [onIntersectingCallback, onIntersectionCallback]);
+  const onIntersection = useCallback((entries, observer) => {
+    var _onIntersectionCallba;
+    const isIntersecting = entries.some(entry => entry.isIntersecting);
+    (_onIntersectionCallba = onIntersectionCallbackRef.current) === null || _onIntersectionCallba === void 0 ? void 0 : _onIntersectionCallba.call(onIntersectionCallbackRef, isIntersecting);
+    if (isIntersecting) {
+      var _onIntersectingCallba;
+      (_onIntersectingCallba = onIntersectingCallbackRef.current) === null || _onIntersectingCallba === void 0 ? void 0 : _onIntersectingCallba.call(onIntersectingCallbackRef);
+      observer.disconnect();
+    }
+  }, []);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const intersectionObserver = new IntersectionObserver(onIntersection, {
+      rootMargin: `${ROOT_MARGIN_VERTICAL} 0px ${ROOT_MARGIN_VERTICAL} 0px`
+    });
+    intersectionObserver.observe(ref.current);
+    return () => intersectionObserver.disconnect();
+  }, [ref, onIntersection]);
+  return ref;
+};
+export default useIntersectionObserver;

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

package/dist/es2019/view/CardWithUrl/card-error-boundary/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { LoadingCardLink } from '../component-lazy/LoadingCardLink';
+const CardErrorBoundary = ({
+  children,
+  ...props
+}) => {
+  // TODO: NAVX-4682: Add feature parity to CardWithURLRenderer
+  const ErrorFallbackComponent = props.fallbackComponent;
+  const errorBoundaryFallbackComponent = () => {
+    if (ErrorFallbackComponent) {
+      return /*#__PURE__*/React.createElement(ErrorFallbackComponent, null);
+    }
+    return /*#__PURE__*/React.createElement(LoadingCardLink, props);
+  };
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: errorBoundaryFallbackComponent
+  }, children);
+};
+export default CardErrorBoundary;