@atlaskit/smart-card 44.3.1 → 44.3.2

package/dist/es2019/ssr.js

@@ -3,13 +3,15 @@ import { ErrorBoundary } from 'react-error-boundary';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { context } from './utils/analytics/analytics';
-import { CardWithUrlContent } from './view/CardWithUrl/component';
+import CardErrorBoundary from './view/CardWithUrl/card-error-boundary';
+import { CardWithUrl, CardWithUrlContent } from './view/CardWithUrl/component';
 import { LoadingCardLink } from './view/CardWithUrl/component-lazy/LoadingCardLink';
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
-export const CardSSR = props => {
+const CardSSROld = props => {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const [id] = useState(() => {
     var _props$id;
@@ -34,4 +36,28 @@ export const CardSSR = props => {
   }, /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps))));
+};
+
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+const CardSSRNew = props => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  const [id] = useState(() => {
+    var _props$id2;
+    return (_props$id2 = props.id) !== null && _props$id2 !== void 0 ? _props$id2 : uuid();
+  });
+  const propsWithId = {
+    ...props,
+    id
+  };
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: context
+  }, /*#__PURE__*/React.createElement(CardErrorBoundary, propsWithId, /*#__PURE__*/React.createElement(CardWithUrl, propsWithId)));
+};
+export const CardSSR = props => {
+  if (fg('platform_sl_event_ui_seen')) {
+    return /*#__PURE__*/React.createElement(CardSSRNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CardSSROld, props);
 };

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

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+// 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
+// up to check once a Smart Link is within `X` px from the bottom of the viewport.
+const ROOT_MARGIN_VERTICAL = '360px';
+const useIntersectionObserver = ({
+  onIntersecting: onIntersectingCallback,
+  onIntersection: onIntersectionCallback
+}) => {
+  const ref = useRef(null);
+  const onIntersectingCallbackRef = useRef(onIntersectingCallback);
+  const onIntersectionCallbackRef = useRef(onIntersectionCallback);
+  useEffect(() => {
+    onIntersectingCallbackRef.current = onIntersectingCallback;
+    onIntersectionCallbackRef.current = onIntersectionCallback;
+  }, [onIntersectingCallback, onIntersectionCallback]);
+  const onIntersection = useCallback((entries, observer) => {
+    var _onIntersectionCallba;
+    const isIntersecting = entries.some(entry => entry.isIntersecting);
+    (_onIntersectionCallba = onIntersectionCallbackRef.current) === null || _onIntersectionCallba === void 0 ? void 0 : _onIntersectionCallba.call(onIntersectionCallbackRef, isIntersecting);
+    if (isIntersecting) {
+      var _onIntersectingCallba;
+      (_onIntersectingCallba = onIntersectingCallbackRef.current) === null || _onIntersectingCallba === void 0 ? void 0 : _onIntersectingCallba.call(onIntersectingCallbackRef);
+      observer.disconnect();
+    }
+  }, []);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const intersectionObserver = new IntersectionObserver(onIntersection, {
+      rootMargin: `${ROOT_MARGIN_VERTICAL} 0px ${ROOT_MARGIN_VERTICAL} 0px`
+    });
+    intersectionObserver.observe(ref.current);
+    return () => intersectionObserver.disconnect();
+  }, [ref, onIntersection]);
+  return ref;
+};
+export default useIntersectionObserver;