@atlaskit/smart-card 40.7.3 → 40.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 40.8.0
+
+### Minor Changes
+
+- [#198611](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/198611)
+  [`a608f23cb3d4e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a608f23cb3d4e) -
+  [https://product-fabric.atlassian.net/browse/ED-28628](ED-28628) - add SSR support for smart cards
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 40.7.3
 
 ### Patch Changes

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

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.7.2"
+  packageVersion: "40.7.3"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _state = require("../../../state");
 var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
+var _store = require("../../../state/store");
 var _shouldSample = require("../../../utils/shouldSample");
 var _component = require("../component");
 var _LoadingCardLink = require("./LoadingCardLink");
@@ -19,18 +20,25 @@ 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';
+// Returns true on SSR and SPA if page was SSR'd
+var isPageSSRd = function isPageSSRd() {
+  return Boolean(process.env.REACT_SSR || window.__SSR_RENDERED__);
+};
 function LazyIntersectionObserverCard(props) {
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
   var ref = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
+  var state = (0, _store.useSmartCardState)(url);
+  // If page was SSR we don't need to enable intersection for already resolved cards,
+  // to avoid flickering.
+  var _useState = (0, _react.useState)(isPageSSRd() && state.status === 'resolved'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isIntersecting = _useState2[0],
     setIsIntersecting = _useState2[1];
   var _useState3 = (0, _react.useState)((0, _shouldSample.shouldSample)()),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
     shouldSendRenderedUFOEvent = _useState4[0];
-  var appearance = props.appearance,
-    url = props.url,
-    id = props.id;
   var prefetch = (0, _state.usePrefetch)(url);
   var Component = appearance === 'inline' ? 'span' : 'div';
   var ComponentObserver = Component;
@@ -39,15 +47,23 @@ function LazyIntersectionObserverCard(props) {
       return entry.isIntersecting;
     });
     if (isVisible) {
-      if (shouldSendRenderedUFOEvent) {
-        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
-      }
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [prefetch]);
+  var isSartUfoExperienceSend = (0, _react.useRef)(false);
+  // We need to use `useLayoutEffect` here to ensure that the UFO start event is sent
+  // before another component is rendered.
+  (0, _react.useLayoutEffect)(function () {
+    if (isIntersecting && !isSartUfoExperienceSend.current) {
+      isSartUfoExperienceSend.current = true;
+      if (shouldSendRenderedUFOEvent) {
+        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+      }
+    }
+  }, [id, isIntersecting, shouldSendRenderedUFOEvent]);
   (0, _react.useEffect)(function () {
     if (!ref.current) {
       return;

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

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

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: "40.7.2"
+  packageVersion: "40.7.3"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { usePrefetch } from '../../../state';
 import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
+import { useSmartCardState } from '../../../state/store';
 import { shouldSample } from '../../../utils/shouldSample';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
@@ -10,30 +11,45 @@ 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';
+// Returns true on SSR and SPA if page was SSR'd
+const isPageSSRd = () => {
+  return Boolean(process.env.REACT_SSR || window.__SSR_RENDERED__);
+};
 export function LazyIntersectionObserverCard(props) {
-  const ref = useRef(null);
-  const [isIntersecting, setIsIntersecting] = useState(false);
-  const [shouldSendRenderedUFOEvent] = useState(shouldSample());
   const {
     appearance,
     url,
     id
   } = props;
+  const ref = useRef(null);
+  const state = useSmartCardState(url);
+  // If page was SSR we don't need to enable intersection for already resolved cards,
+  // to avoid flickering.
+  const [isIntersecting, setIsIntersecting] = useState(isPageSSRd() && state.status === 'resolved');
+  const [shouldSendRenderedUFOEvent] = useState(shouldSample());
   const prefetch = usePrefetch(url);
   const Component = appearance === 'inline' ? 'span' : 'div';
   const ComponentObserver = Component;
   const onIntersection = useCallback((entries, observer) => {
     const isVisible = entries.some(entry => entry.isIntersecting);
     if (isVisible) {
-      if (shouldSendRenderedUFOEvent) {
-        startUfoExperience('smart-link-rendered', id);
-      }
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [prefetch]);
+  const isSartUfoExperienceSend = useRef(false);
+  // We need to use `useLayoutEffect` here to ensure that the UFO start event is sent
+  // before another component is rendered.
+  useLayoutEffect(() => {
+    if (isIntersecting && !isSartUfoExperienceSend.current) {
+      isSartUfoExperienceSend.current = true;
+      if (shouldSendRenderedUFOEvent) {
+        startUfoExperience('smart-link-rendered', id);
+      }
+    }
+  }, [id, isIntersecting, shouldSendRenderedUFOEvent]);
   useEffect(() => {
     if (!ref.current) {
       return;

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

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

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "40.7.2"
+  packageVersion: "40.7.3"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { usePrefetch } from '../../../state';
 import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
+import { useSmartCardState } from '../../../state/store';
 import { shouldSample } from '../../../utils/shouldSample';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
@@ -11,18 +12,25 @@ 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.
 var ROOT_MARGIN_VERTICAL = '360px';
+// Returns true on SSR and SPA if page was SSR'd
+var isPageSSRd = function isPageSSRd() {
+  return Boolean(process.env.REACT_SSR || window.__SSR_RENDERED__);
+};
 export function LazyIntersectionObserverCard(props) {
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
   var ref = useRef(null);
-  var _useState = useState(false),
+  var state = useSmartCardState(url);
+  // If page was SSR we don't need to enable intersection for already resolved cards,
+  // to avoid flickering.
+  var _useState = useState(isPageSSRd() && state.status === 'resolved'),
     _useState2 = _slicedToArray(_useState, 2),
     isIntersecting = _useState2[0],
     setIsIntersecting = _useState2[1];
   var _useState3 = useState(shouldSample()),
     _useState4 = _slicedToArray(_useState3, 1),
     shouldSendRenderedUFOEvent = _useState4[0];
-  var appearance = props.appearance,
-    url = props.url,
-    id = props.id;
   var prefetch = usePrefetch(url);
   var Component = appearance === 'inline' ? 'span' : 'div';
   var ComponentObserver = Component;
@@ -31,15 +39,23 @@ export function LazyIntersectionObserverCard(props) {
       return entry.isIntersecting;
     });
     if (isVisible) {
-      if (shouldSendRenderedUFOEvent) {
-        startUfoExperience('smart-link-rendered', id);
-      }
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [prefetch]);
+  var isSartUfoExperienceSend = useRef(false);
+  // We need to use `useLayoutEffect` here to ensure that the UFO start event is sent
+  // before another component is rendered.
+  useLayoutEffect(function () {
+    if (isIntersecting && !isSartUfoExperienceSend.current) {
+      isSartUfoExperienceSend.current = true;
+      if (shouldSendRenderedUFOEvent) {
+        startUfoExperience('smart-link-rendered', id);
+      }
+    }
+  }, [id, isIntersecting, shouldSendRenderedUFOEvent]);
   useEffect(function () {
     if (!ref.current) {
       return;

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

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

package/dist/types/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { type CardWithUrlContentProps } from '../types';
+declare global {
+    interface Window {
+        __SSR_RENDERED__?: boolean;
+    }
+}
 export declare function LazyIntersectionObserverCard(props: CardWithUrlContentProps): React.JSX.Element;

package/dist/types-ts4.5/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { type CardWithUrlContentProps } from '../types';
+declare global {
+    interface Window {
+        __SSR_RENDERED__?: boolean;
+    }
+}
 export declare function LazyIntersectionObserverCard(props: CardWithUrlContentProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "40.7.3",
+	"version": "40.8.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/avatar": "^25.1.0",
-		"@atlaskit/avatar-group": "^12.1.0",
+		"@atlaskit/avatar-group": "^12.2.0",
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/checkbox": "^17.1.0",