@atlaskit/smart-card 44.9.9 → 44.9.11

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

@@ -11,8 +11,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _reactErrorBoundary = require("react-error-boundary");
 var _reactIntl = require("react-intl");
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
-var _linkExtractors = require("@atlaskit/link-extractors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../../../state/helpers");
 var _useResolveHyperlink2 = _interopRequireDefault(require("../../../state/hooks/use-resolve-hyperlink"));
@@ -21,7 +19,6 @@ var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnal
 var _intlProvider = _interopRequireDefault(require("../../common/intl-provider"));
 var _useSmartLinkEvents = require("../../SmartLinkEvents/useSmartLinkEvents");
 var _Hyperlink = _interopRequireDefault(require("../Hyperlink"));
-var _unauthorizeView = _interopRequireDefault(require("./unauthorize-view"));
 var _excluded = ["onClick"];
 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 HyperlinkFallbackComponent = function HyperlinkFallbackComponent() {
@@ -42,9 +39,7 @@ var HyperlinkWithSmartLinkResolverInner = function HyperlinkWithSmartLinkResolve
   var _useResolveHyperlink = (0, _useResolveHyperlink2.default)({
       href: props.href || ''
     }),
-    actions = _useResolveHyperlink.actions,
     state = _useResolveHyperlink.state;
-  var services = (0, _helpers.getServices)(state === null || state === void 0 ? void 0 : state.details);
   var thirdPartyARI = (0, _helpers.getThirdPartyARI)(state === null || state === void 0 ? void 0 : state.details);
   var firstPartyIdentifier = (0, _helpers.getFirstPartyIdentifier)();
   var fire3PClickEvent = (0, _platformFeatureFlags.fg)('platform_smartlink_3pclick_analytics') ?
@@ -59,42 +54,6 @@ var HyperlinkWithSmartLinkResolverInner = function HyperlinkWithSmartLinkResolve
     }
     onClickCallback === null || onClickCallback === void 0 || onClickCallback(e);
   }, [onClickCallback, fire3PClickEvent, state === null || state === void 0 ? void 0 : state.status]);
-  var onAuthorize = (0, _react.useCallback)(function () {
-    return actions.authorize('url');
-  }, [actions]);
-  var shouldRenderConnectBtn = function shouldRenderConnectBtn() {
-    if (!props.children || !Array.isArray(props.children) || props.children.length === 0) {
-      return false;
-    }
-    var 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
-  _featureGateJsClient.default.getExperimentValue('platform_linking_bluelink_connect_confluence', 'isEnabled', false) ||
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils -- Statsig migration pending for Bluelink connect experiments
-  _featureGateJsClient.default.getExperimentValue('platform_linking_bluelink_connect_jira', 'isEnabled', false))) {
-    var provider = (0, _linkExtractors.extractSmartLinkProvider)(state === null || state === void 0 ? void 0 : state.details);
-    return /*#__PURE__*/_react.default.createElement(_unauthorizeView.default, (0, _extends2.default)({}, 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.default.createElement(_Hyperlink.default, (0, _extends2.default)({}, props, {
     onClick: onClick
   }));

package/dist/es2019/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
@@ -27,7 +28,7 @@ const useIntersectionObserver = ({
     }
   }, []);
   useEffect(() => {
-    if (!ref.current) {
+    if (!isIntersectionObserverSupported() || !ref.current) {
       return;
     }
     const intersectionObserver = new IntersectionObserver(onIntersection, {

package/dist/es2019/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({
+  appearance,
+  children,
+  id,
+  ui,
+  url = ''
+}) {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const {
+    getByUrl
+  } = useSmartLinkAnalyticsUtils();
+  const getAnalyticsProps = useCallback(() => {
+    const isFlexibleUi = isFlexibleUiCard(children, ui);
+    const display = isFlexibleUi ? 'flexible' : appearance;
+    return {
+      display,
+      id
+    };
+  }, [appearance, children, id, ui]);
+  const statusRef = useRef();
+  const analyticsPropsRef = useRef(null);
+  const hasIntersectedRef = useRef(false);
+  const hasFiredSeenRef = useRef(false);
+  useEffect(() => {
+    analyticsPropsRef.current = getAnalyticsProps();
+  }, [getAnalyticsProps]);
+  const maybeFireSeenEvent = useCallback(() => {
+    if (!hasFiredSeenRef.current && hasIntersectedRef.current && statusRef.current === 'unauthorized') {
+      const payload = getByUrl(url, analyticsPropsRef.current);
+      fireEvent('ui.smartLink.seen', payload === null || payload === void 0 ? void 0 : payload.attributes);
+      hasFiredSeenRef.current = true;
+    }
+  }, [fireEvent, getByUrl, url]);
+  const onIntersecting = useCallback(() => {
+    if (hasIntersectedRef.current) {
+      return;
+    }
+    hasIntersectedRef.current = true;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  const onStatusSettled = useCallback(status => {
+    statusRef.current = status;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  return useMemo(() => ({
+    onIntersecting,
+    onStatusSettled
+  }), [onIntersecting, onStatusSettled]);
+}

package/dist/es2019/state/hooks/use-social-proof-experiment/index.js

@@ -1,42 +1,7 @@
 import { useMemo } from 'react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { getCurrentSiteCloudIdSync } from '../../services/current-site-cloud-id';
-import { getProviderPctMapSync, SOCIAL_PROOF_TRAIT_NAME } from '../../services/personalization';
 import useSocialProof from '../use-social-proof';
-export const SOCIAL_PROOF_3P_UNAUTH_BLOCK_EXPERIMENT_KEY = 'social_proof_3p_unauth_block_exp';
-export const INLINE_SOCIAL_PROOF_EXPERIMENT_KEY = 'platform_sl_3p_preauth_social_proof_inline_cta';
-export const SOCIAL_PROOF_TIER_THRESHOLD = 30;
-export const getSocialProofTier = connectedPct => {
-  if (connectedPct === undefined) {
-    return undefined;
-  }
-  return connectedPct >= SOCIAL_PROOF_TIER_THRESHOLD ? 'not-low' : 'low';
-};
-const getSocialProofExperimentMetadata = ({
-  extensionKey,
-  baseUriWithNoTrailingSlash = ''
-}) => {
-  if (!extensionKey) {
-    return {
-      isEligible: false
-    };
-  }
-  const cloudId = getCurrentSiteCloudIdSync(baseUriWithNoTrailingSlash);
-  const providerPctMap = getProviderPctMapSync(cloudId, SOCIAL_PROOF_TRAIT_NAME);
-  const tier = getSocialProofTier(providerPctMap === null || providerPctMap === void 0 ? void 0 : providerPctMap[extensionKey]);
-  return {
-    isEligible: tier !== undefined,
-    ...(tier ? {
-      tier
-    } : {})
-  };
-};
-export const getSocialProofExperimentMeta = params => ({
-  [SOCIAL_PROOF_3P_UNAUTH_BLOCK_EXPERIMENT_KEY]: getSocialProofExperimentMetadata(params)
-});
-export const getInlineSocialProofExperimentMeta = params => ({
-  [INLINE_SOCIAL_PROOF_EXPERIMENT_KEY]: getSocialProofExperimentMetadata(params)
-});
+const TIER_THRESHOLD = 30;
 
 /**
  * Returns enrollment and treatment state for the social proof unauth block card experiment.
@@ -60,12 +25,11 @@ const useSocialProofExperiment = (extensionKey, baseUriWithNoTrailingSlash = '')
     isLoading
   } = useSocialProof(extensionKey, true, baseUriWithNoTrailingSlash);
   return useMemo(() => {
-    var _getSocialProofTier;
     const hasSocialProofData = connectedPct !== undefined;
 
     // Only fire exposure when data has loaded (prevents exposure inflation)
     const isTreatment = isEnabled && !isLoading && hasSocialProofData ? editorExperiment('social_proof_3p_unauth_block_exp', true) : false;
-    const tier = (_getSocialProofTier = getSocialProofTier(connectedPct)) !== null && _getSocialProofTier !== void 0 ? _getSocialProofTier : 'low';
+    const tier = connectedPct !== undefined && connectedPct >= TIER_THRESHOLD ? 'not-low' : 'low';
     return {
       isTreatment,
       tier,

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

@@ -1,6 +1,5 @@
-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';
@@ -24,12 +23,9 @@ const getSmartLinkAnalyticsContext = ({
   url,
   error
 }) => {
-  const isHyperlinkConnectExperimentEnabled = FeatureGates.getExperimentValue('platform_linking_bluelink_connect_confluence', 'isEnabled', false) || FeatureGates.getExperimentValue('platform_linking_bluelink_connect_jira', 'isEnabled', false);
-  const resolvedAttributes = isHyperlinkConnectExperimentEnabled ? getExtendedResolvedAttributes({
+  const resolvedAttributes = getExtendedResolvedAttributes({
     url,
     displayCategory: display === 'url' ? 'link' : 'smartLink'
-  }, response, status, error) : getExtendedResolvedAttributes({
-    url
   }, response, status, error);
   return {
     source,
@@ -45,6 +41,32 @@ const getSmartLinkAnalyticsContext = ({
  * Provides an analytics context data to supply attributes to events based on a URL
  * and the link state in the store
  */
+export const useSmartLinkAnalyticsUtils = () => {
+  const {
+    store
+  } = useSmartLinkContext();
+  const getByUrl = useCallback((url, props) => {
+    const 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,
+      error: state === null || state === void 0 ? void 0 : state.error
+    });
+  }, [store]);
+  return useMemo(() => ({
+    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 const useSmartLinkAnalyticsContext = ({
   display,
   id,

package/dist/es2019/view/BlockCard/views/UnauthorisedView.js

@@ -16,7 +16,7 @@ import { ElementName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '
 import { messages } from '../../../messages';
 import { useFlexibleCardContext } from '../../../state/flexible-ui-context';
 import { hasAuthScopeOverrides } from '../../../state/helpers';
-import useSocialProofExperiment, { getSocialProofExperimentMeta } from '../../../state/hooks/use-social-proof-experiment';
+import useSocialProofExperiment from '../../../state/hooks/use-social-proof-experiment';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 import FlexibleCard from '../../FlexibleCard';
 import ActionGroup from '../../FlexibleCard/components/blocks/action-group';
@@ -251,28 +251,19 @@ const UnauthorisedViewWithExperiment = ({
     tier,
     connectedPct
   } = useSocialProofExperiment(providerName ? extensionKey : undefined, connections.client.baseUrlOverride);
-  const socialProofExperimentMeta = getSocialProofExperimentMeta({
-    extensionKey,
-    baseUriWithNoTrailingSlash: connections.client.baseUrlOverride
-  });
-  const analyticsContextData = {
-    attributes: {
-      experiment: 'social_proof_3p_unauth_block_exp',
-      cohort: isTreatment ? 'treatment' : 'control',
-      tier,
-      experimentMeta: socialProofExperimentMeta
-    }
-  };
   if (!isTreatment || !providerName) {
-    const fallbackView = /*#__PURE__*/React.createElement(UnauthorisedViewBase, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(UnauthorisedViewBase, _extends({}, props, {
       testId: testId
     }));
-    return connectedPct !== undefined ? /*#__PURE__*/React.createElement(AnalyticsContext, {
-      data: analyticsContextData
-    }, fallbackView) : fallbackView;
   }
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
-    data: analyticsContextData
+    data: {
+      attributes: {
+        experiment: 'social_proof_3p_unauth_block_exp',
+        cohort: 'treatment',
+        tier
+      }
+    }
   }, /*#__PURE__*/React.createElement(UnauthorisedViewFrame, _extends({}, props, {
     content: /*#__PURE__*/React.createElement(SocialProofMessage, {
       tier: tier,

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';
@@ -24,7 +24,6 @@ import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 import withCardIntersectionObserver from './card-intersection-observer';
-import useExperimentMetaEventAttributes from './experiment-meta-event-attributes';
 const thirdPartyARIPrefix = 'ari:third-party';
 const EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component({
@@ -32,7 +31,6 @@ function Component({
   url,
   isSelected,
   isHovered,
-  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -63,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.
@@ -167,10 +164,6 @@ function Component({
     actions.reload();
   }, [actions]);
   const handleInvoke = useCallback(opts => actions.invoke(opts, appearance), [actions, appearance]);
-  const experimentMetaEventAttributes = useExperimentMetaEventAttributes({
-    appearance,
-    state
-  });
 
   // NB: for each status change in a Smart Link, a performance mark is created.
   // Measures are sent relative to the first mark, matching what a user sees.
@@ -218,26 +211,10 @@ function Component({
         display: isFlexibleUi ? 'flexible' : appearance,
         ...(appearance === 'inline' && {
           rovoActionsCtaShown
-        }),
-        ...(experimentMetaEventAttributes && {
-          experimentMeta: experimentMetaEventAttributes
         })
       });
     }
-  }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, state.status, experimentMetaEventAttributes]);
-
-  // 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]);
+  }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, state.status]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -360,7 +337,6 @@ function ComponentUpdated({
   url,
   isSelected,
   isHovered,
-  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -391,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.
@@ -495,10 +470,6 @@ function ComponentUpdated({
     actions.reload();
   }, [actions]);
   const handleInvoke = useCallback(opts => actions.invoke(opts, appearance), [actions, appearance]);
-  const experimentMetaEventAttributes = useExperimentMetaEventAttributes({
-    appearance,
-    state
-  });
 
   // NB: for each status change in a Smart Link, a performance mark is created.
   // Measures are sent relative to the first mark, matching what a user sees.
@@ -546,26 +517,10 @@ function ComponentUpdated({
         display: isFlexibleUi ? 'flexible' : appearance,
         ...(appearance === 'inline' && {
           rovoActionsCtaShown
-        }),
-        ...(experimentMetaEventAttributes && {
-          experimentMeta: experimentMetaEventAttributes
         })
       });
     }
-  }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, state.status, experimentMetaEventAttributes]);
-
-  // 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]);
+  }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, state.status]);
   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, {