@atlaskit/smart-card 44.9.9 → 44.9.11

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 44.9.11
+
+### Patch Changes
+
+- [`657813a2d7397`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/657813a2d7397) -
+  Use useRef to prevent CardSSR to re-render on intersecting into viewport
+
+## 44.9.10
+
+### Patch Changes
+
+- [`ebab8f80bfc40`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ebab8f80bfc40) -
+  Clean up the platform_linking_bluelink_connect_CONFLUENCE and
+  platform_linking_bluelink_connect_jira no ship code
+- [`ebab8f80bfc40`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ebab8f80bfc40) -
+  NAVX-3611 Fixing the role for inline card when it's an anchor
+- Updated dependencies
+
 ## 44.9.9
 
 ### Patch Changes

package/analytics.spec.yaml

@@ -847,14 +847,6 @@ events:
           required: false
           type: boolean
           description: Whether the Rovo Actions CTA (inline nudge) was shown for this Smart Link
-        experimentMeta:
-          required: false
-          type: object
-          description: |
-            Optional experiment metadata attached to the Smart Link render success event. Root keys
-            should be Statsig experiment keys. Each experiment entry can contain metadata specific
-            to that experiment, derived from no-exposure eligibility data only unless explicitly
-            documented otherwise.
   - smartLink renderFailed:
       type: ui
       description: fires an event that represents when a Smart Link renders unsuccessfully.

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _utils = require("../../../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
 // being compared to. Since the default container is the `document`, we set this
@@ -33,7 +34,7 @@ var useIntersectionObserver = function useIntersectionObserver(_ref) {
     }
   }, []);
   (0, _react.useEffect)(function () {
-    if (!ref.current) {
+    if (!(0, _utils.isIntersectionObserverSupported)() || !ref.current) {
       return;
     }
     var intersectionObserver = new IntersectionObserver(onIntersection, {

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkSeenEvent = useSmartLinkSeenEvent;
+var _react = require("react");
+var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
+var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
+var _flexible = require("../../../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.
+ */
+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 = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var _useSmartLinkAnalytic = (0, _SmartLinkAnalyticsContext.useSmartLinkAnalyticsUtils)(),
+    getByUrl = _useSmartLinkAnalytic.getByUrl;
+  var getAnalyticsProps = (0, _react.useCallback)(function () {
+    var isFlexibleUi = (0, _flexible.isFlexibleUiCard)(children, ui);
+    var display = isFlexibleUi ? 'flexible' : appearance;
+    return {
+      display: display,
+      id: id
+    };
+  }, [appearance, children, id, ui]);
+  var statusRef = (0, _react.useRef)();
+  var analyticsPropsRef = (0, _react.useRef)(null);
+  var hasIntersectedRef = (0, _react.useRef)(false);
+  var hasFiredSeenRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    analyticsPropsRef.current = getAnalyticsProps();
+  }, [getAnalyticsProps]);
+  var maybeFireSeenEvent = (0, _react.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 = (0, _react.useCallback)(function () {
+    if (hasIntersectedRef.current) {
+      return;
+    }
+    hasIntersectedRef.current = true;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  var onStatusSettled = (0, _react.useCallback)(function (status) {
+    statusRef.current = status;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  return (0, _react.useMemo)(function () {
+    return {
+      onIntersecting: onIntersecting,
+      onStatusSettled: onStatusSettled
+    };
+  }, [onIntersecting, onStatusSettled]);
+}

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

@@ -4,48 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSocialProofTier = exports.getSocialProofExperimentMeta = exports.getInlineSocialProofExperimentMeta = exports.default = exports.SOCIAL_PROOF_TIER_THRESHOLD = exports.SOCIAL_PROOF_3P_UNAUTH_BLOCK_EXPERIMENT_KEY = exports.INLINE_SOCIAL_PROOF_EXPERIMENT_KEY = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = void 0;
 var _react = require("react");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _currentSiteCloudId = require("../../services/current-site-cloud-id");
-var _personalization = require("../../services/personalization");
 var _useSocialProof2 = _interopRequireDefault(require("../use-social-proof"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SOCIAL_PROOF_3P_UNAUTH_BLOCK_EXPERIMENT_KEY = exports.SOCIAL_PROOF_3P_UNAUTH_BLOCK_EXPERIMENT_KEY = 'social_proof_3p_unauth_block_exp';
-var INLINE_SOCIAL_PROOF_EXPERIMENT_KEY = exports.INLINE_SOCIAL_PROOF_EXPERIMENT_KEY = 'platform_sl_3p_preauth_social_proof_inline_cta';
-var SOCIAL_PROOF_TIER_THRESHOLD = exports.SOCIAL_PROOF_TIER_THRESHOLD = 30;
-var getSocialProofTier = exports.getSocialProofTier = function getSocialProofTier(connectedPct) {
-  if (connectedPct === undefined) {
-    return undefined;
-  }
-  return connectedPct >= SOCIAL_PROOF_TIER_THRESHOLD ? 'not-low' : 'low';
-};
-var getSocialProofExperimentMetadata = function getSocialProofExperimentMetadata(_ref) {
-  var extensionKey = _ref.extensionKey,
-    _ref$baseUriWithNoTra = _ref.baseUriWithNoTrailingSlash,
-    baseUriWithNoTrailingSlash = _ref$baseUriWithNoTra === void 0 ? '' : _ref$baseUriWithNoTra;
-  if (!extensionKey) {
-    return {
-      isEligible: false
-    };
-  }
-  var cloudId = (0, _currentSiteCloudId.getCurrentSiteCloudIdSync)(baseUriWithNoTrailingSlash);
-  var providerPctMap = (0, _personalization.getProviderPctMapSync)(cloudId, _personalization.SOCIAL_PROOF_TRAIT_NAME);
-  var tier = getSocialProofTier(providerPctMap === null || providerPctMap === void 0 ? void 0 : providerPctMap[extensionKey]);
-  return _objectSpread({
-    isEligible: tier !== undefined
-  }, tier ? {
-    tier: tier
-  } : {});
-};
-var getSocialProofExperimentMeta = exports.getSocialProofExperimentMeta = function getSocialProofExperimentMeta(params) {
-  return (0, _defineProperty2.default)({}, SOCIAL_PROOF_3P_UNAUTH_BLOCK_EXPERIMENT_KEY, getSocialProofExperimentMetadata(params));
-};
-var getInlineSocialProofExperimentMeta = exports.getInlineSocialProofExperimentMeta = function getInlineSocialProofExperimentMeta(params) {
-  return (0, _defineProperty2.default)({}, INLINE_SOCIAL_PROOF_EXPERIMENT_KEY, getSocialProofExperimentMetadata(params));
-};
+var TIER_THRESHOLD = 30;
 
 /**
  * Returns enrollment and treatment state for the social proof unauth block card experiment.
@@ -69,12 +32,11 @@ var useSocialProofExperiment = function useSocialProofExperiment(extensionKey) {
     isEnabled = _useSocialProof.isEnabled,
     isLoading = _useSocialProof.isLoading;
   return (0, _react.useMemo)(function () {
-    var _getSocialProofTier;
     var hasSocialProofData = connectedPct !== undefined;
 
     // Only fire exposure when data has loaded (prevents exposure inflation)
     var isTreatment = isEnabled && !isLoading && hasSocialProofData ? (0, _experiments.editorExperiment)('social_proof_3p_unauth_block_exp', true) : false;
-    var tier = (_getSocialProofTier = getSocialProofTier(connectedPct)) !== null && _getSocialProofTier !== void 0 ? _getSocialProofTier : 'low';
+    var tier = connectedPct !== undefined && connectedPct >= TIER_THRESHOLD ? 'not-low' : 'low';
     return {
       isTreatment: isTreatment,
       tier: tier,

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

@@ -5,11 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSmartLinkAnalyticsContext = exports.SmartLinkAnalyticsContext = void 0;
+exports.useSmartLinkAnalyticsUtils = exports.useSmartLinkAnalyticsContext = exports.SmartLinkAnalyticsContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
 var _linkProvider = require("@atlaskit/link-provider");
 var _linkingCommon = require("@atlaskit/linking-common");
@@ -34,12 +33,9 @@ var getSmartLinkAnalyticsContext = function getSmartLinkAnalyticsContext(_ref) {
     status = _ref.status,
     url = _ref.url,
     error = _ref.error;
-  var isHyperlinkConnectExperimentEnabled = _featureGateJsClient.default.getExperimentValue('platform_linking_bluelink_connect_confluence', 'isEnabled', false) || _featureGateJsClient.default.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,
@@ -53,13 +49,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
  */
+var useSmartLinkAnalyticsUtils = exports.useSmartLinkAnalyticsUtils = function useSmartLinkAnalyticsUtils() {
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    store = _useSmartLinkContext.store;
+  var getByUrl = (0, _react.useCallback)(function (url, props) {
+    var state = store ? (0, _linkingCommon.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 (0, _react.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
+ */
 var useSmartLinkAnalyticsContext = exports.useSmartLinkAnalyticsContext = function useSmartLinkAnalyticsContext(_ref2) {
   var display = _ref2.display,
     id = _ref2.id,
     source = _ref2.source,
     url = _ref2.url;
-  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
-    store = _useSmartLinkContext.store;
+  var _useSmartLinkContext2 = (0, _linkProvider.useSmartLinkContext)(),
+    store = _useSmartLinkContext2.store;
   var state = store ? (0, _linkingCommon.getUrl)(store, url) : undefined;
   return (0, _react.useMemo)(function () {
     return getSmartLinkAnalyticsContext({

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

@@ -25,7 +25,7 @@ var _constants = require("../../../constants");
 var _messages = require("../../../messages");
 var _flexibleUiContext = require("../../../state/flexible-ui-context");
 var _helpers = require("../../../state/helpers");
-var _useSocialProofExperiment = _interopRequireWildcard(require("../../../state/hooks/use-social-proof-experiment"));
+var _useSocialProofExperiment = _interopRequireDefault(require("../../../state/hooks/use-social-proof-experiment"));
 var _UnauthorisedViewContent = _interopRequireDefault(require("../../common/UnauthorisedViewContent"));
 var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
 var _actionGroup = _interopRequireDefault(require("../../FlexibleCard/components/blocks/action-group"));
@@ -256,28 +256,19 @@ var UnauthorisedViewWithExperiment = function UnauthorisedViewWithExperiment(_re
     isTreatment = _useSocialProofExperi.isTreatment,
     tier = _useSocialProofExperi.tier,
     connectedPct = _useSocialProofExperi.connectedPct;
-  var socialProofExperimentMeta = (0, _useSocialProofExperiment.getSocialProofExperimentMeta)({
-    extensionKey: extensionKey,
-    baseUriWithNoTrailingSlash: connections.client.baseUrlOverride
-  });
-  var analyticsContextData = {
-    attributes: {
-      experiment: 'social_proof_3p_unauth_block_exp',
-      cohort: isTreatment ? 'treatment' : 'control',
-      tier: tier,
-      experimentMeta: socialProofExperimentMeta
-    }
-  };
   if (!isTreatment || !providerName) {
-    var fallbackView = /*#__PURE__*/React.createElement(UnauthorisedViewBase, (0, _extends2.default)({}, props, {
+    return /*#__PURE__*/React.createElement(UnauthorisedViewBase, (0, _extends2.default)({}, props, {
       testId: testId
     }));
-    return connectedPct !== undefined ? /*#__PURE__*/React.createElement(_analyticsNext.AnalyticsContext, {
-      data: analyticsContextData
-    }, fallbackView) : fallbackView;
   }
   return /*#__PURE__*/React.createElement(_analyticsNext.AnalyticsContext, {
-    data: analyticsContextData
+    data: {
+      attributes: {
+        experiment: 'social_proof_3p_unauth_block_exp',
+        cohort: 'treatment',
+        tier: tier
+      }
+    }
   }, /*#__PURE__*/React.createElement(UnauthorisedViewFrame, (0, _extends2.default)({}, props, {
     content: /*#__PURE__*/React.createElement(_SocialProofMessage.default, {
       tier: tier,

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

@@ -7,22 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _useSmartLinkSeenEvent = require("../../../state/hooks/use-smart-link-seen-event");
 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 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 = (0, _useSmartLinkSeenEvent.useSmartLinkSeenEvent)({
+        appearance: appearance,
+        children: children,
+        id: id,
+        ui: ui,
+        url: url
+      }),
+      onIntersecting = _useSmartLinkSeenEven.onIntersecting,
+      onStatusSettled = _useSmartLinkSeenEven.onStatusSettled;
+    var onError = (0, _react.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 = (0, _useIntersectionObserver.default)({
       onIntersecting: onIntersecting
     });
@@ -30,17 +44,8 @@ var withCardIntersectionObserver = function withCardIntersectionObserver(Compone
       appearance: props.appearance,
       ref: ref
     }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-      isIntersected: isIntersected
+      onError: onError
     })));
   };
 };
-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);
-};
+var _default = exports.default = withCardIntersectionObserver;

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

@@ -13,6 +13,7 @@ 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 _useSmartLinkSeenEvent = require("../../../state/hooks/use-smart-link-seen-event");
 var _shouldSample = require("../../../utils/shouldSample");
 var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
 var _component = require("../component");
@@ -82,25 +83,44 @@ var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(p
     _useState8 = (0, _slicedToArray2.default)(_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 = (0, _state.usePrefetch)(url);
   var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var _useSmartLinkSeenEven = (0, _useSmartLinkSeenEvent.useSmartLinkSeenEvent)({
+      appearance: appearance,
+      children: children,
+      id: id,
+      ui: ui,
+      url: url
+    }),
+    onSeenIntersecting = _useSmartLinkSeenEven.onIntersecting,
+    onStatusSettled = _useSmartLinkSeenEven.onStatusSettled;
+  var onError = (0, _react.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 = (0, _react.useCallback)(function (isIntersecting) {
     if (isIntersecting) {
       if (shouldSendRenderedUFOEvent) {
         (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
       }
+      onSeenIntersecting();
       setIsIntersected(true);
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [id, onSeenIntersecting, prefetch, shouldSendRenderedUFOEvent]);
   var ref = (0, _useIntersectionObserver.default)({
     onIntersection: onIntersection
   });
   var content = isIntersected ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, (0, _extends2.default)({}, props, {
-    isIntersected: true
+    onError: onError
   })) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));

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

@@ -33,7 +33,6 @@ var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 var _InlineCard = require("../InlineCard");
 var _useSmartLinkEvents = require("../SmartLinkEvents/useSmartLinkEvents");
 var _cardIntersectionObserver = _interopRequireDefault(require("./card-intersection-observer"));
-var _experimentMetaEventAttributes = _interopRequireDefault(require("./experiment-meta-event-attributes"));
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -44,7 +43,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,
@@ -72,7 +70,6 @@ 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]);
@@ -180,10 +177,6 @@ function Component(_ref) {
   var handleInvoke = (0, _react.useCallback)(function (opts) {
     return actions.invoke(opts, appearance);
   }, [actions, appearance]);
-  var experimentMetaEventAttributes = (0, _experimentMetaEventAttributes.default)({
-    appearance: appearance,
-    state: 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.
@@ -227,28 +220,13 @@ function Component(_ref) {
       (0, _analytics.succeedUfoExperience)('smart-link-authenticated', id || 'NULL', {
         display: isFlexibleUi ? 'flexible' : appearance
       });
-      fireEvent('ui.smartLink.renderSuccess', _objectSpread(_objectSpread({
+      fireEvent('ui.smartLink.renderSuccess', _objectSpread({
         display: isFlexibleUi ? 'flexible' : appearance
       }, appearance === 'inline' && {
         rovoActionsCtaShown: 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
-  (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.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]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -371,7 +349,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,
@@ -399,7 +376,6 @@ 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]);
@@ -507,10 +483,6 @@ function ComponentUpdated(_ref2) {
   var handleInvoke = (0, _react.useCallback)(function (opts) {
     return actions.invoke(opts, appearance);
   }, [actions, appearance]);
-  var experimentMetaEventAttributes = (0, _experimentMetaEventAttributes.default)({
-    appearance: appearance,
-    state: 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.
@@ -554,28 +526,13 @@ function ComponentUpdated(_ref2) {
       (0, _analytics.succeedUfoExperience)('smart-link-authenticated', id || 'NULL', {
         display: isFlexibleUi ? 'flexible' : appearance
       });
-      fireEvent('ui.smartLink.renderSuccess', _objectSpread(_objectSpread({
+      fireEvent('ui.smartLink.renderSuccess', _objectSpread({
         display: isFlexibleUi ? 'flexible' : appearance
       }, appearance === 'inline' && {
         rovoActionsCtaShown: 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
-  (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.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]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Frame = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 var _styled = require("./styled");
 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); }
@@ -48,8 +49,8 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     withoutBackground: withoutBackground,
     isSelected: isSelected,
     isInteractive: isInteractive,
-    tabIndex: isInteractive ? 0 : undefined,
-    role: isInteractive ? 'button' : undefined,
+    tabIndex: isInteractive && ((0, _platformFeatureFlags.fg)('navx-3611-inline-card-a11y-role-fix') ? !link : true) ? 0 : undefined,
+    role: isInteractive && ((0, _platformFeatureFlags.fg)('navx-3611-inline-card-a11y-role-fix') ? !link : true) ? 'button' : undefined,
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,