@atlaskit/smart-card 44.3.1 → 44.3.2

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

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development"
+  packageVersion: "44.3.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/CardWithUrl/card-error-boundary/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { LoadingCardLink } from '../component-lazy/LoadingCardLink';
+const CardErrorBoundary = ({
+  children,
+  ...props
+}) => {
+  // TODO: NAVX-4682: Add feature parity to CardWithURLRenderer
+  const ErrorFallbackComponent = props.fallbackComponent;
+  const errorBoundaryFallbackComponent = () => {
+    if (ErrorFallbackComponent) {
+      return /*#__PURE__*/React.createElement(ErrorFallbackComponent, null);
+    }
+    return /*#__PURE__*/React.createElement(LoadingCardLink, props);
+  };
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: errorBoundaryFallbackComponent
+  }, children);
+};
+export default CardErrorBoundary;

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
+import { isIntersectionObserverSupported } from '../../../utils';
+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 ref = useIntersectionObserver({
+    onIntersecting
+  });
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: props.appearance,
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    isIntersected: isIntersected
+  })));
+};
+const withCardIntersectionObserverFallback = Component => props => /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+  appearance: props.appearance
+}, /*#__PURE__*/React.createElement(Component, props));
+export default (Component => isIntersectionObserverSupported() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component));

package/dist/es2019/view/CardWithUrl/card-loader-wrapper/index.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+const CardLoaderWrapper = /*#__PURE__*/forwardRef(({
+  appearance,
+  children
+}, ref) => {
+  const Component = appearance === 'inline' ? 'span' : 'div';
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement(Component, {
+      className: "loader-wrapper",
+      ref: ref
+    }, children)
+  );
+});
+export default CardLoaderWrapper;

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

@@ -1,7 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+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 { shouldSample } from '../../../utils/shouldSample';
+import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
 
@@ -10,7 +14,7 @@ import { LoadingCardLink } from './LoadingCardLink';
 // 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.
 const ROOT_MARGIN_VERTICAL = '360px';
-export function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   const ref = useRef(null);
   const [isIntersecting, setIsIntersecting] = useState(false);
   const [shouldSendRenderedUFOEvent] = useState(shouldSample());
@@ -52,4 +56,37 @@ export function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+const LazyIntersectionObserverCardNew = props => {
+  const [isIntersected, setIsIntersected] = useState(false);
+  const [shouldSendRenderedUFOEvent] = useState(shouldSample());
+  const {
+    appearance,
+    url,
+    id
+  } = props;
+  const prefetch = usePrefetch(url);
+  const ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  const onIntersection = useCallback(isIntersecting => {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        startUfoExperience('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  const ref = useIntersectionObserver({
+    onIntersection
+  });
+  const content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/React.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: appearance
+  }, content);
+};
+export const LazyIntersectionObserverCard = componentWithFG('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -22,6 +22,7 @@ import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
+import withCardIntersectionObserver from './card-intersection-observer';
 const thirdPartyARIPrefix = 'ari:third-party';
 const EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component({
@@ -29,6 +30,7 @@ function Component({
   url,
   isSelected,
   isHovered,
+  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -59,6 +61,7 @@ function Component({
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -207,6 +210,19 @@ function Component({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  useEffect(() => {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -329,6 +345,7 @@ function ComponentUpdated({
   url,
   isSelected,
   isHovered,
+  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -359,6 +376,7 @@ function ComponentUpdated({
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -507,6 +525,19 @@ function ComponentUpdated({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  useEffect(() => {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -651,4 +682,5 @@ export const CardWithUrlContent = props => {
     id: props.id,
     display: display
   }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
-};
+};
+export const CardWithUrl = withCardIntersectionObserver(CardWithUrlContent);

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

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development",
+  packageVersion: "44.3.1",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');