@atlaskit/smart-card 44.3.0 → 44.3.2

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
+import { isIntersectionObserverSupported } from '../../../utils';
+import CardLoaderWrapper from '../card-loader-wrapper';
+const withCardIntersectionObserver = Component => props => {
+  // TODO: NAVX-4682: Add feature parity to LazyIntersectionObserverCard for no lazy loading
+  const [isIntersected, setIsIntersected] = useState(false);
+  const onIntersecting = useCallback(() => {
+    setIsIntersected(true);
+  }, []);
+  const ref = useIntersectionObserver({
+    onIntersecting
+  });
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: props.appearance,
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    isIntersected: isIntersected
+  })));
+};
+const withCardIntersectionObserverFallback = Component => props => /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+  appearance: props.appearance
+}, /*#__PURE__*/React.createElement(Component, props));
+export default (Component => isIntersectionObserverSupported() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component));

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

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+const CardLoaderWrapper = /*#__PURE__*/forwardRef(({
+  appearance,
+  children
+}, ref) => {
+  const Component = appearance === 'inline' ? 'span' : 'div';
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement(Component, {
+      className: "loader-wrapper",
+      ref: ref
+    }, children)
+  );
+});
+export default CardLoaderWrapper;

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

@@ -1,7 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { usePrefetch } from '../../../state';
 import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
 import { shouldSample } from '../../../utils/shouldSample';
+import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
 
@@ -10,7 +14,7 @@ import { LoadingCardLink } from './LoadingCardLink';
 // 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';
-export function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   const ref = useRef(null);
   const [isIntersecting, setIsIntersecting] = useState(false);
   const [shouldSendRenderedUFOEvent] = useState(shouldSample());
@@ -52,4 +56,37 @@ export function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+const LazyIntersectionObserverCardNew = props => {
+  const [isIntersected, setIsIntersected] = useState(false);
+  const [shouldSendRenderedUFOEvent] = useState(shouldSample());
+  const {
+    appearance,
+    url,
+    id
+  } = props;
+  const prefetch = usePrefetch(url);
+  const ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  const onIntersection = useCallback(isIntersecting => {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        startUfoExperience('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  const ref = useIntersectionObserver({
+    onIntersection
+  });
+  const content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/React.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: appearance
+  }, content);
+};
+export const LazyIntersectionObserverCard = componentWithFG('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -22,6 +22,7 @@ import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
+import withCardIntersectionObserver from './card-intersection-observer';
 const thirdPartyARIPrefix = 'ari:third-party';
 const EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component({
@@ -29,6 +30,7 @@ function Component({
   url,
   isSelected,
   isHovered,
+  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -59,6 +61,7 @@ function Component({
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -207,6 +210,19 @@ function Component({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  useEffect(() => {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -329,6 +345,7 @@ function ComponentUpdated({
   url,
   isSelected,
   isHovered,
+  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -359,6 +376,7 @@ function ComponentUpdated({
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -507,6 +525,19 @@ function ComponentUpdated({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  useEffect(() => {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -651,4 +682,5 @@ export const CardWithUrlContent = props => {
     id: props.id,
     display: display
   }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
-};
+};
+export const CardWithUrl = withCardIntersectionObserver(CardWithUrlContent);

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

package/dist/esm/ssr.js

@@ -7,13 +7,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 var 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 = useState(function () {
       var _props$id;
@@ -39,4 +41,29 @@ export var CardSSR = function 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
+var CardSSRNew = function CardSSRNew(props) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  var _useState3 = useState(function () {
+      var _props$id2;
+      return (_props$id2 = props.id) !== null && _props$id2 !== void 0 ? _props$id2 : uuid();
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    id = _useState4[0];
+  var propsWithId = _objectSpread(_objectSpread({}, props), {}, {
+    id: id
+  });
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: context
+  }, /*#__PURE__*/React.createElement(CardErrorBoundary, propsWithId, /*#__PURE__*/React.createElement(CardWithUrl, propsWithId)));
+};
+export var CardSSR = function CardSSR(props) {
+  if (fg('platform_sl_event_ui_seen')) {
+    return /*#__PURE__*/React.createElement(CardSSRNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CardSSROld, props);
 };

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

@@ -2,7 +2,6 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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
@@ -100,8 +99,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,
@@ -111,28 +110,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 (!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,
@@ -141,7 +135,7 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
               },
               query: queryIncomingOutgoingAris
             }, 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;
@@ -157,7 +151,7 @@ var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
               incomingAris: incomingAris,
               outgoingAris: outgoingAris
             });
-          case 15:
+          case 14:
           case "end":
             return _context4.stop();
         }

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

@@ -0,0 +1,44 @@
+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.
+var ROOT_MARGIN_VERTICAL = '360px';
+var useIntersectionObserver = function useIntersectionObserver(_ref) {
+  var onIntersectingCallback = _ref.onIntersecting,
+    onIntersectionCallback = _ref.onIntersection;
+  var ref = useRef(null);
+  var onIntersectingCallbackRef = useRef(onIntersectingCallback);
+  var onIntersectionCallbackRef = useRef(onIntersectionCallback);
+  useEffect(function () {
+    onIntersectingCallbackRef.current = onIntersectingCallback;
+    onIntersectionCallbackRef.current = onIntersectionCallback;
+  }, [onIntersectingCallback, onIntersectionCallback]);
+  var onIntersection = 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();
+    }
+  }, []);
+  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;
+};
+export default useIntersectionObserver;

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

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

@@ -0,0 +1,21 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { LoadingCardLink } from '../component-lazy/LoadingCardLink';
+var CardErrorBoundary = function CardErrorBoundary(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // TODO: NAVX-4682: Add feature parity to CardWithURLRenderer
+  var ErrorFallbackComponent = props.fallbackComponent;
+  var errorBoundaryFallbackComponent = function 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;

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

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
+import { isIntersectionObserverSupported } from '../../../utils';
+import CardLoaderWrapper from '../card-loader-wrapper';
+var withCardIntersectionObserver = function withCardIntersectionObserver(Component) {
+  return function (props) {
+    // TODO: NAVX-4682: Add feature parity to LazyIntersectionObserverCard for no lazy loading
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIntersected = _useState2[0],
+      setIsIntersected = _useState2[1];
+    var onIntersecting = useCallback(function () {
+      setIsIntersected(true);
+    }, []);
+    var ref = useIntersectionObserver({
+      onIntersecting: onIntersecting
+    });
+    return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+      appearance: props.appearance,
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      isIntersected: isIntersected
+    })));
+  };
+};
+var withCardIntersectionObserverFallback = function withCardIntersectionObserverFallback(Component) {
+  return function (props) {
+    return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+      appearance: props.appearance
+    }, /*#__PURE__*/React.createElement(Component, props));
+  };
+};
+export default (function (Component) {
+  return isIntersectionObserverSupported() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component);
+});

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

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+var CardLoaderWrapper = /*#__PURE__*/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.createElement(Component, {
+      className: "loader-wrapper",
+      ref: ref
+    }, children)
+  );
+});
+export default CardLoaderWrapper;

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

@@ -1,8 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { usePrefetch } from '../../../state';
 import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
 import { shouldSample } from '../../../utils/shouldSample';
+import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
 
@@ -11,7 +15,7 @@ import { LoadingCardLink } from './LoadingCardLink';
 // 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';
-export function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -60,4 +64,40 @@ export function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(props) {
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isIntersected = _useState6[0],
+    setIsIntersected = _useState6[1];
+  var _useState7 = useState(shouldSample()),
+    _useState8 = _slicedToArray(_useState7, 1),
+    shouldSendRenderedUFOEvent = _useState8[0];
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
+  var prefetch = usePrefetch(url);
+  var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var onIntersection = useCallback(function (isIntersecting) {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        startUfoExperience('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  var ref = useIntersectionObserver({
+    onIntersection: onIntersection
+  });
+  var content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/React.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: appearance
+  }, content);
+};
+export var LazyIntersectionObserverCard = componentWithFG('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -22,6 +22,7 @@ import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
+import withCardIntersectionObserver from './card-intersection-observer';
 var thirdPartyARIPrefix = 'ari:third-party';
 var EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component(_ref) {
@@ -29,6 +30,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,
@@ -56,6 +58,7 @@ function Component(_ref) {
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var hasFiredSeenRef = useRef(false);
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children, ui);
   }, [children, ui]);
@@ -209,6 +212,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
+  useEffect(function () {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -331,6 +347,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,
@@ -358,6 +375,7 @@ function ComponentUpdated(_ref2) {
     createAnalyticsEvent = _useAnalyticsEventsNe2.createAnalyticsEvent;
   var _useAnalyticsEvents2 = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents2.fireEvent;
+  var hasFiredSeenRef = useRef(false);
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children, ui);
   }, [children, ui]);
@@ -511,6 +529,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
+  useEffect(function () {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -655,4 +686,5 @@ export var CardWithUrlContent = function CardWithUrlContent(props) {
     id: props.id,
     display: display
   }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
-};
+};
+export var CardWithUrl = withCardIntersectionObserver(CardWithUrlContent);

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

package/dist/types/common/analytics/generated/analytics.types.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::1c5f802d8b5609627e5ffbebf73bad6e>>
+ * @codegen <<SignedSource::4d978bf4946aee0ad737d8305df7a6a0>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen smart-card
  */
 export type PackageMetaDataContextType = {
@@ -263,6 +263,9 @@ export type SmartLinkRenderFailedAttributesType = {
     id: string | null;
 };
 export type ButtonClickedDismissAttributesType = {};
+export type SmartLinkSeenAttributesType = {
+    display: 'inline' | 'block' | 'embed' | 'flexible';
+};
 export type SmartLinkClickedSmartlinkClickAnalyticsWorkflowsAttributesType = {
     thirdPartyARI: string;
     eventName: string;
@@ -439,6 +442,9 @@ export type AnalyticsEventAttributes = {
     /**
      * fires an event that represents when a Smart Link renders unsuccessfully. */
     'ui.smartLink.renderFailed': SmartLinkRenderFailedAttributesType;
+    /**
+     * fires an event that represents when a rendered Smart Link is visible in the viewport for the first time */
+    'ui.smartLink.seen': SmartLinkSeenAttributesType;
     /**
      * fires an event that represents when a user clicks on a Smart Link to track analytics for the 3P Workflows team */
     'ui.smartLink.clicked.smartlinkClickAnalyticsWorkflows': SmartLinkClickedSmartlinkClickAnalyticsWorkflowsAttributesType;

package/dist/types/state/hooks/use-intersection-observer/index.d.ts

@@ -0,0 +1,6 @@
+type UseIntersectionObserverProps = {
+    onIntersecting?: () => void;
+    onIntersection?: (isIntersecting: boolean) => void;
+};
+declare const useIntersectionObserver: ({ onIntersecting: onIntersectingCallback, onIntersection: onIntersectionCallback, }: UseIntersectionObserverProps) => import("react").MutableRefObject<HTMLDivElement | null>;
+export default useIntersectionObserver;

package/dist/types/view/CardWithUrl/card-error-boundary/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CardProps } from '../../Card';
+type CardErrorBoundaryProps = CardProps & Required<Pick<CardProps, 'id' | 'url'>>;
+declare const CardErrorBoundary: ({ children, ...props }: React.PropsWithChildren<CardErrorBoundaryProps>) => React.JSX.Element;
+export default CardErrorBoundary;