@atlaskit/smart-card 44.3.1 → 44.3.2

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

@@ -5,12 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LazyIntersectionObserverCard = LazyIntersectionObserverCard;
+exports.LazyIntersectionObserverCard = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+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 _shouldSample = require("../../../utils/shouldSample");
+var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
 var _component = require("../component");
 var _LoadingCardLink = require("./LoadingCardLink");
 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); }
@@ -19,7 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // being compared to. Since the default container is the `document`, we set this
 // up to check once a Smart Link is within `X` px from the bottom of the viewport.
 var ROOT_MARGIN_VERTICAL = '360px';
-function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -68,4 +72,40 @@ function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(props) {
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isIntersected = _useState6[0],
+    setIsIntersected = _useState6[1];
+  var _useState7 = (0, _react.useState)((0, _shouldSample.shouldSample)()),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 1),
+    shouldSendRenderedUFOEvent = _useState8[0];
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
+  var prefetch = (0, _state.usePrefetch)(url);
+  var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var onIntersection = (0, _react.useCallback)(function (isIntersecting) {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  var ref = (0, _useIntersectionObserver.default)({
+    onIntersection: onIntersection
+  });
+  var content = isIntersected ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, (0, _extends2.default)({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));
+  return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
+    appearance: appearance
+  }, content);
+};
+var LazyIntersectionObserverCard = exports.LazyIntersectionObserverCard = (0, _platformFeatureFlagsReact.componentWithFG)('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardWithUrlContent = void 0;
+exports.CardWithUrlContent = exports.CardWithUrl = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
@@ -30,6 +30,7 @@ var _EmbedCard = require("../EmbedCard");
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 var _InlineCard = require("../InlineCard");
 var _useSmartLinkEvents = require("../SmartLinkEvents/useSmartLinkEvents");
+var _cardIntersectionObserver = _interopRequireDefault(require("./card-intersection-observer"));
 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 thirdPartyARIPrefix = 'ari:third-party';
 var EmbedCardComponent = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', _EmbedCard.EmbedCardUpdated, _EmbedCard.EmbedCard);
@@ -38,6 +39,7 @@ function Component(_ref) {
     url = _ref.url,
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
+    isIntersected = _ref.isIntersected,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
@@ -65,6 +67,7 @@ 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]);
@@ -218,6 +221,19 @@ function Component(_ref) {
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+      if (!(0, _helpers.isFinalState)(state.status)) 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,
@@ -340,6 +356,7 @@ function ComponentUpdated(_ref2) {
     url = _ref2.url,
     isSelected = _ref2.isSelected,
     isHovered = _ref2.isHovered,
+    isIntersected = _ref2.isIntersected,
     frameStyle = _ref2.frameStyle,
     platform = _ref2.platform,
     onClick = _ref2.onClick,
@@ -367,6 +384,7 @@ 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]);
@@ -520,6 +538,19 @@ function ComponentUpdated(_ref2) {
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+      if (!(0, _helpers.isFinalState)(state.status)) 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,
@@ -664,4 +695,5 @@ var CardWithUrlContent = exports.CardWithUrlContent = function CardWithUrlConten
     id: props.id,
     display: display
   }, /*#__PURE__*/_react.default.createElement(CardWithUrlContentComponent, props)));
-};
+};
+var CardWithUrl = exports.CardWithUrl = (0, _cardIntersectionObserver.default)(CardWithUrlContent);

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

@@ -22,7 +22,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development",
+  packageVersion: "44.3.1",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');