@atlaskit/smart-card 44.9.10 → 44.9.11

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

@@ -1,14 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
-import { isIntersectionObserverSupported } from '../../../utils';
+import { useSmartLinkSeenEvent } from '../../../state/hooks/use-smart-link-seen-event';
 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 {
+    appearance,
+    children,
+    id,
+    onError: onErrorCallback,
+    ui,
+    url = ''
+  } = props;
+  const {
+    onIntersecting,
+    onStatusSettled
+  } = useSmartLinkSeenEvent({
+    appearance,
+    children,
+    id,
+    ui,
+    url
+  });
+  const onError = useCallback(data => {
+    if (data !== null && data !== void 0 && data.status) {
+      onStatusSettled(data.status);
+    }
+    onErrorCallback === null || onErrorCallback === void 0 ? void 0 : onErrorCallback(data);
+  }, [onStatusSettled, onErrorCallback]);
   const ref = useIntersectionObserver({
     onIntersecting
   });
@@ -16,10 +36,7 @@ const withCardIntersectionObserver = Component => props => {
     appearance: props.appearance,
     ref: ref
   }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    isIntersected: isIntersected
+    onError: onError
   })));
 };
-const withCardIntersectionObserverFallback = Component => props => /*#__PURE__*/React.createElement(CardLoaderWrapper, {
-  appearance: props.appearance
-}, /*#__PURE__*/React.createElement(Component, props));
-export default (Component => isIntersectionObserverSupported() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component));
+export default withCardIntersectionObserver;

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

@@ -4,6 +4,7 @@ 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 { useSmartLinkSeenEvent } from '../../../state/hooks/use-smart-link-seen-event';
 import { shouldSample } from '../../../utils/shouldSample';
 import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
@@ -62,26 +63,46 @@ const LazyIntersectionObserverCardNew = props => {
   const [shouldSendRenderedUFOEvent] = useState(shouldSample());
   const {
     appearance,
-    url,
-    id
+    children,
+    id,
+    onError: onErrorCallback,
+    ui,
+    url
   } = props;
   const prefetch = usePrefetch(url);
   const ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  const {
+    onIntersecting: onSeenIntersecting,
+    onStatusSettled
+  } = useSmartLinkSeenEvent({
+    appearance,
+    children,
+    id,
+    ui,
+    url
+  });
+  const onError = useCallback(data => {
+    if (data !== null && data !== void 0 && data.status) {
+      onStatusSettled(data.status);
+    }
+    onErrorCallback === null || onErrorCallback === void 0 ? void 0 : onErrorCallback(data);
+  }, [onStatusSettled, onErrorCallback]);
   const onIntersection = useCallback(isIntersecting => {
     if (isIntersecting) {
       if (shouldSendRenderedUFOEvent) {
         startUfoExperience('smart-link-rendered', id);
       }
+      onSeenIntersecting();
       setIsIntersected(true);
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [id, onSeenIntersecting, prefetch, shouldSendRenderedUFOEvent]);
   const ref = useIntersectionObserver({
     onIntersection
   });
   const content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
-    isIntersected: true
+    onError: onError
   })) : /*#__PURE__*/React.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/React.createElement(LoadingCardLink, props));

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -31,7 +31,6 @@ function Component({
   url,
   isSelected,
   isHovered,
-  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -62,7 +61,6 @@ function Component({
   const {
     fireEvent
   } = useAnalyticsEvents();
-  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -217,19 +215,6 @@ function Component({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, 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 (state.status !== 'unauthorized') 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,
@@ -352,7 +337,6 @@ function ComponentUpdated({
   url,
   isSelected,
   isHovered,
-  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -383,7 +367,6 @@ function ComponentUpdated({
   const {
     fireEvent
   } = useAnalyticsEvents();
-  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -538,19 +521,6 @@ function ComponentUpdated({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, 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 (state.status !== 'unauthorized') 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,

package/dist/es2019/view/InlineCard/Frame/index.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { WrapperAnchor, WrapperSpan } from './styled';
 export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
@@ -42,8 +43,8 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
     withoutBackground: withoutBackground,
     isSelected: isSelected,
     isInteractive: isInteractive,
-    tabIndex: isInteractive ? 0 : undefined,
-    role: isInteractive ? 'button' : undefined,
+    tabIndex: isInteractive && (fg('navx-3611-inline-card-a11y-role-fix') ? !link : true) ? 0 : undefined,
+    role: isInteractive && (fg('navx-3611-inline-card-a11y-role-fix') ? !link : true) ? 'button' : undefined,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,

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

@@ -2,17 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { withErrorBoundary as withReactErrorBoundary } from 'react-error-boundary';
 import { injectIntl } from 'react-intl';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
-import { extractSmartLinkProvider } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getFirstPartyIdentifier, getServices, getThirdPartyARI } from '../../../state/helpers';
+import { getFirstPartyIdentifier, getThirdPartyARI } from '../../../state/helpers';
 import useResolveHyperlink from '../../../state/hooks/use-resolve-hyperlink';
 import useResolveHyperlinkValidator from '../../../state/hooks/use-resolve-hyperlink/useResolveHyperlinkValidator';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 import withIntlProvider from '../../common/intl-provider';
 import { useFire3PWorkflowsClickEvent } from '../../SmartLinkEvents/useSmartLinkEvents';
 import Hyperlink from '../Hyperlink';
-import HyperlinkUnauthorizedView from './unauthorize-view';
 const HyperlinkFallbackComponent = () => null;
 const withValidator = (Component, DefaultComponent) => props => {
   const shouldResolveHyperlink = useResolveHyperlinkValidator(props === null || props === void 0 ? void 0 : props.href);
@@ -26,12 +23,10 @@ const HyperlinkWithSmartLinkResolverInner = ({
   ...props
 }) => {
   const {
-    actions,
     state
   } = useResolveHyperlink({
     href: props.href || ''
   });
-  const services = getServices(state === null || state === void 0 ? void 0 : state.details);
   const thirdPartyARI = getThirdPartyARI(state === null || state === void 0 ? void 0 : state.details);
   const firstPartyIdentifier = getFirstPartyIdentifier();
   const fire3PClickEvent = fg('platform_smartlink_3pclick_analytics') ?
@@ -46,40 +41,6 @@ const HyperlinkWithSmartLinkResolverInner = ({
     }
     onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback(e);
   }, [onClickCallback, fire3PClickEvent, state === null || state === void 0 ? void 0 : state.status]);
-  const onAuthorize = useCallback(() => actions.authorize('url'), [actions]);
-  const shouldRenderConnectBtn = () => {
-    if (!props.children || !Array.isArray(props.children) || props.children.length === 0) {
-      return false;
-    }
-    const firstChild = props.children[0];
-    try {
-      var _firstChild$props;
-      // Check if first child has a string matching href
-      if (typeof firstChild === 'string') {
-        return props.href === firstChild;
-      }
-
-      // Check if first child has another child object containing matching href. This aligns with the behavior of the TextWrapper component used by editor to render link nodes
-      if (firstChild !== null && firstChild !== void 0 && (_firstChild$props = firstChild.props) !== null && _firstChild$props !== void 0 && _firstChild$props.children && typeof firstChild.props.children === 'string') {
-        return props.href === firstChild.props.children;
-      }
-    } catch (_) {
-      return false;
-    }
-  };
-  if ((state === null || state === void 0 ? void 0 : state.status) === 'unauthorized' && shouldRenderConnectBtn() && (
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils -- Statsig migration pending for Bluelink connect experiments
-  FeatureGates.getExperimentValue('platform_linking_bluelink_connect_confluence', 'isEnabled', false) ||
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils -- Statsig migration pending for Bluelink connect experiments
-  FeatureGates.getExperimentValue('platform_linking_bluelink_connect_jira', 'isEnabled', false))) {
-    const provider = extractSmartLinkProvider(state === null || state === void 0 ? void 0 : state.details);
-    return /*#__PURE__*/React.createElement(HyperlinkUnauthorizedView, _extends({}, props, {
-      onAuthorize: services !== null && services !== void 0 && services.length ? onAuthorize : undefined,
-      onClick: onClick,
-      showConnectBtn: (services === null || services === void 0 ? void 0 : services.length) > 0,
-      provider: provider
-    }));
-  }
   return /*#__PURE__*/React.createElement(Hyperlink, _extends({}, props, {
     onClick: onClick
   }));

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

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { isIntersectionObserverSupported } from '../../../utils';
 
 // 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
@@ -28,7 +29,7 @@ var useIntersectionObserver = function useIntersectionObserver(_ref) {
     }
   }, []);
   useEffect(function () {
-    if (!ref.current) {
+    if (!isIntersectionObserverSupported() || !ref.current) {
       return;
     }
     var intersectionObserver = new IntersectionObserver(onIntersection, {

package/dist/esm/state/hooks/use-smart-link-seen-event/index.js

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
+import { useSmartLinkAnalyticsUtils } from '../../../utils/analytics/SmartLinkAnalyticsContext';
+import { isFlexibleUiCard } from '../../../utils/flexible';
+/**
+ * Fires `ui.smartLink.seen` once when a smart link with status `unauthorized`
+ * enters the viewport. Uses refs internally so it never causes re-renders,
+ * which is important for SSR.
+ */
+export function useSmartLinkSeenEvent(_ref) {
+  var appearance = _ref.appearance,
+    children = _ref.children,
+    id = _ref.id,
+    ui = _ref.ui,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? '' : _ref$url;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var _useSmartLinkAnalytic = useSmartLinkAnalyticsUtils(),
+    getByUrl = _useSmartLinkAnalytic.getByUrl;
+  var getAnalyticsProps = useCallback(function () {
+    var isFlexibleUi = isFlexibleUiCard(children, ui);
+    var display = isFlexibleUi ? 'flexible' : appearance;
+    return {
+      display: display,
+      id: id
+    };
+  }, [appearance, children, id, ui]);
+  var statusRef = useRef();
+  var analyticsPropsRef = useRef(null);
+  var hasIntersectedRef = useRef(false);
+  var hasFiredSeenRef = useRef(false);
+  useEffect(function () {
+    analyticsPropsRef.current = getAnalyticsProps();
+  }, [getAnalyticsProps]);
+  var maybeFireSeenEvent = useCallback(function () {
+    if (!hasFiredSeenRef.current && hasIntersectedRef.current && statusRef.current === 'unauthorized') {
+      var payload = getByUrl(url, analyticsPropsRef.current);
+      fireEvent('ui.smartLink.seen', payload === null || payload === void 0 ? void 0 : payload.attributes);
+      hasFiredSeenRef.current = true;
+    }
+  }, [fireEvent, getByUrl, url]);
+  var onIntersecting = useCallback(function () {
+    if (hasIntersectedRef.current) {
+      return;
+    }
+    hasIntersectedRef.current = true;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  var onStatusSettled = useCallback(function (status) {
+    statusRef.current = status;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  return useMemo(function () {
+    return {
+      onIntersecting: onIntersecting,
+      onStatusSettled: onStatusSettled
+    };
+  }, [onIntersecting, onStatusSettled]);
+}

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

@@ -1,9 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { getResolvedAttributes } from '@atlaskit/link-analytics/resolved-attributes';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { getUrl } from '@atlaskit/linking-common';
@@ -25,12 +24,9 @@ var getSmartLinkAnalyticsContext = function getSmartLinkAnalyticsContext(_ref) {
     status = _ref.status,
     url = _ref.url,
     error = _ref.error;
-  var isHyperlinkConnectExperimentEnabled = FeatureGates.getExperimentValue('platform_linking_bluelink_connect_confluence', 'isEnabled', false) || FeatureGates.getExperimentValue('platform_linking_bluelink_connect_jira', 'isEnabled', false);
-  var resolvedAttributes = isHyperlinkConnectExperimentEnabled ? getExtendedResolvedAttributes({
+  var resolvedAttributes = getExtendedResolvedAttributes({
     url: url,
     displayCategory: display === 'url' ? 'link' : 'smartLink'
-  }, response, status, error) : getExtendedResolvedAttributes({
-    url: url
   }, response, status, error);
   return {
     source: source,
@@ -44,13 +40,40 @@ var getSmartLinkAnalyticsContext = function getSmartLinkAnalyticsContext(_ref) {
  * Provides an analytics context data to supply attributes to events based on a URL
  * and the link state in the store
  */
+export var useSmartLinkAnalyticsUtils = function useSmartLinkAnalyticsUtils() {
+  var _useSmartLinkContext = useSmartLinkContext(),
+    store = _useSmartLinkContext.store;
+  var getByUrl = useCallback(function (url, props) {
+    var state = store ? getUrl(store, url) : undefined;
+    return getSmartLinkAnalyticsContext({
+      display: props === null || props === void 0 ? void 0 : props.display,
+      id: props === null || props === void 0 ? void 0 : props.id,
+      response: state === null || state === void 0 ? void 0 : state.details,
+      source: props === null || props === void 0 ? void 0 : props.source,
+      status: state === null || state === void 0 ? void 0 : state.status,
+      url: url,
+      error: state === null || state === void 0 ? void 0 : state.error
+    });
+  }, [store]);
+  return useMemo(function () {
+    return {
+      getByUrl: getByUrl
+    };
+  }, [getByUrl]);
+};
+
+/**
+ * Provides an analytics context data to supply attributes to events based on a URL
+ * and the link state in the store
+ * @deprecated Use useSmartLinkAnalyticsUtils instead
+ */
 export var useSmartLinkAnalyticsContext = function useSmartLinkAnalyticsContext(_ref2) {
   var display = _ref2.display,
     id = _ref2.id,
     source = _ref2.source,
     url = _ref2.url;
-  var _useSmartLinkContext = useSmartLinkContext(),
-    store = _useSmartLinkContext.store;
+  var _useSmartLinkContext2 = useSmartLinkContext(),
+    store = _useSmartLinkContext2.store;
   var state = store ? getUrl(store, url) : undefined;
   return useMemo(function () {
     return getSmartLinkAnalyticsContext({

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

@@ -1,19 +1,33 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
-import { isIntersectionObserverSupported } from '../../../utils';
+import { useSmartLinkSeenEvent } from '../../../state/hooks/use-smart-link-seen-event';
 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 appearance = props.appearance,
+      children = props.children,
+      id = props.id,
+      onErrorCallback = props.onError,
+      ui = props.ui,
+      _props$url = props.url,
+      url = _props$url === void 0 ? '' : _props$url;
+    var _useSmartLinkSeenEven = useSmartLinkSeenEvent({
+        appearance: appearance,
+        children: children,
+        id: id,
+        ui: ui,
+        url: url
+      }),
+      onIntersecting = _useSmartLinkSeenEven.onIntersecting,
+      onStatusSettled = _useSmartLinkSeenEven.onStatusSettled;
+    var onError = useCallback(function (data) {
+      if (data !== null && data !== void 0 && data.status) {
+        onStatusSettled(data.status);
+      }
+      onErrorCallback === null || onErrorCallback === void 0 || onErrorCallback(data);
+    }, [onStatusSettled, onErrorCallback]);
     var ref = useIntersectionObserver({
       onIntersecting: onIntersecting
     });
@@ -21,17 +35,8 @@ var withCardIntersectionObserver = function withCardIntersectionObserver(Compone
       appearance: props.appearance,
       ref: ref
     }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      isIntersected: isIntersected
+      onError: onError
     })));
   };
 };
-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);
-});
+export default withCardIntersectionObserver;

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

@@ -5,6 +5,7 @@ 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 { useSmartLinkSeenEvent } from '../../../state/hooks/use-smart-link-seen-event';
 import { shouldSample } from '../../../utils/shouldSample';
 import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
@@ -74,25 +75,44 @@ var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(p
     _useState8 = _slicedToArray(_useState7, 1),
     shouldSendRenderedUFOEvent = _useState8[0];
   var appearance = props.appearance,
-    url = props.url,
-    id = props.id;
+    children = props.children,
+    id = props.id,
+    onErrorCallback = props.onError,
+    ui = props.ui,
+    url = props.url;
   var prefetch = usePrefetch(url);
   var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var _useSmartLinkSeenEven = useSmartLinkSeenEvent({
+      appearance: appearance,
+      children: children,
+      id: id,
+      ui: ui,
+      url: url
+    }),
+    onSeenIntersecting = _useSmartLinkSeenEven.onIntersecting,
+    onStatusSettled = _useSmartLinkSeenEven.onStatusSettled;
+  var onError = useCallback(function (data) {
+    if (data !== null && data !== void 0 && data.status) {
+      onStatusSettled(data.status);
+    }
+    onErrorCallback === null || onErrorCallback === void 0 || onErrorCallback(data);
+  }, [onStatusSettled, onErrorCallback]);
   var onIntersection = useCallback(function (isIntersecting) {
     if (isIntersecting) {
       if (shouldSendRenderedUFOEvent) {
         startUfoExperience('smart-link-rendered', id);
       }
+      onSeenIntersecting();
       setIsIntersected(true);
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [id, onSeenIntersecting, prefetch, shouldSendRenderedUFOEvent]);
   var ref = useIntersectionObserver({
     onIntersection: onIntersection
   });
   var content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
-    isIntersected: true
+    onError: onError
   })) : /*#__PURE__*/React.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/React.createElement(LoadingCardLink, props));

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -34,7 +34,6 @@ function Component(_ref) {
     url = _ref.url,
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
-    isIntersected = _ref.isIntersected,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
@@ -62,7 +61,6 @@ 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]);
@@ -220,19 +218,6 @@ function Component(_ref) {
       }));
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, 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 (state.status !== 'unauthorized') 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,
@@ -355,7 +340,6 @@ function ComponentUpdated(_ref2) {
     url = _ref2.url,
     isSelected = _ref2.isSelected,
     isHovered = _ref2.isHovered,
-    isIntersected = _ref2.isIntersected,
     frameStyle = _ref2.frameStyle,
     platform = _ref2.platform,
     onClick = _ref2.onClick,
@@ -383,7 +367,6 @@ 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]);
@@ -541,19 +524,6 @@ function ComponentUpdated(_ref2) {
       }));
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, 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 (state.status !== 'unauthorized') 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,

package/dist/esm/view/InlineCard/Frame/index.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { WrapperAnchor, WrapperSpan } from './styled';
 export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -40,8 +41,8 @@ export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
     withoutBackground: withoutBackground,
     isSelected: isSelected,
     isInteractive: isInteractive,
-    tabIndex: isInteractive ? 0 : undefined,
-    role: isInteractive ? 'button' : undefined,
+    tabIndex: isInteractive && (fg('navx-3611-inline-card-a11y-role-fix') ? !link : true) ? 0 : undefined,
+    role: isInteractive && (fg('navx-3611-inline-card-a11y-role-fix') ? !link : true) ? 'button' : undefined,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,