@atlaskit/smart-card 44.9.10 → 44.9.11

package/CHANGELOG.md

@@ -1,9 +1,21 @@
 # @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

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/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/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

@@ -43,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,
@@ -71,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]);
@@ -229,19 +227,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
-  (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]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -364,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,
@@ -392,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]);
@@ -550,19 +533,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
-  (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]);
   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,

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/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,