@atlaskit/smart-card 26.48.0 → 26.48.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.48.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.48.1
+
+### Patch Changes
+
+- [#75710](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75710) [`48a473f02139`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48a473f02139) - Fixes intersection observer not being disconnected when component not intersecting, behind ff platform.linking-platform.smart-card.fix-intersection-observer
+
 ## 26.48.0
 
 ### Minor Changes

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

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

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

@@ -5,9 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LazyIntersectionObserverCard = LazyIntersectionObserverCard;
+exports.LazyIntersectionObserverCard = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _state = require("../../../state");
 var _component = require("../component");
 var _LoadingCardLink = require("./LoadingCardLink");
@@ -19,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // 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 LazyIntersectionObserverCardLegacy(props) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isIntersecting = _useState2[0],
@@ -60,4 +61,51 @@ function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+function LazyIntersectionObserverCardNext(props) {
+  var ref = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isIntersecting = _useState4[0],
+    setIsIntersecting = _useState4[1];
+  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;
+  var onIntersection = (0, _react.useCallback)(function (entries, observer) {
+    var isVisible = entries.some(function (entry) {
+      return entry.isIntersecting;
+    });
+    if (isVisible) {
+      (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+      setIsIntersecting(true);
+      observer.disconnect();
+    } else {
+      prefetch();
+    }
+  }, [prefetch, id]);
+  (0, _react.useEffect)(function () {
+    if (!ref.current) {
+      return;
+    }
+    var intersectionObserver = new IntersectionObserver(onIntersection, {
+      rootMargin: "".concat(ROOT_MARGIN_VERTICAL, " 0px ").concat(ROOT_MARGIN_VERTICAL, " 0px")
+    });
+    intersectionObserver.observe(ref.current);
+    return function () {
+      return intersectionObserver.disconnect();
+    };
+  }, [ref, onIntersection]);
+  var content = isIntersecting ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, props) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    className: "loader-wrapper"
+  }, content);
+}
+var LazyIntersectionObserverCard = exports.LazyIntersectionObserverCard = function LazyIntersectionObserverCard(props) {
+  var Component = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.fix-intersection-observer') ? LazyIntersectionObserverCardNext : LazyIntersectionObserverCardLegacy;
+  return /*#__PURE__*/_react.default.createElement(Component, props);
+};

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
@@ -25,9 +24,17 @@ var _actionGroupItem = _interopRequireDefault(require("./action-group-item"));
 var _utils2 = require("../utils");
 var _reactMagneticDi = require("react-magnetic-di");
 var _excluded = ["triggerRef"];
-var _templateObject;
 /** @jsx jsx */
-var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus-visible {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      outline-offset: -2px;\n    }\n  }\n"])));
+var styles = (0, _react2.css)({
+  display: 'inline-flex',
+  lineHeight: '1rem',
+  '> div': {
+    alignItems: 'center',
+    'button:focus-visible': {
+      outlineOffset: '-2px'
+    }
+  }
+});
 var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.SmartLinkSize.Medium;

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/index.js

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
@@ -20,12 +19,18 @@ var _resolving = _interopRequireDefault(require("./resolving"));
 var _actionGroup = _interopRequireDefault(require("../action-group"));
 var _elements = require("../../elements");
 var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition", "hideIcon"];
-var _templateObject, _templateObject2;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var getActionStyles = function getActionStyles(showOnHover, isOpen) {
   if (showOnHover && !isOpen) {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      .actions-button-group {\n        opacity: 0;\n      }\n\n      &:hover .actions-button-group,\n      .actions-button-group:focus-within {\n        opacity: 1;\n      }\n    "])));
+    return (0, _react2.css)({
+      '.actions-button-group': {
+        opacity: 0
+      },
+      '&:hover .actions-button-group, .actions-button-group:focus-within': {
+        opacity: 1
+      }
+    });
   }
 };
 var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
@@ -99,7 +104,7 @@ var TitleBlock = function TitleBlock(_ref) {
     onDropdownOpenChange: onDropdownOpenChange
   });
   var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
-  var combinedCss = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
+  var combinedCss = (0, _react2.css)(actionStyles, overrideCss);
   var overrideText = !!text ? {
     text: text
   } : {};

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

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

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

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

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

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { usePrefetch } from '../../../state';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
@@ -9,7 +10,7 @@ import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
 // 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 LazyIntersectionObserverCardLegacy(props) {
   const [isIntersecting, setIsIntersecting] = useState(false);
   const {
     appearance,
@@ -45,4 +46,46 @@ export function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+function LazyIntersectionObserverCardNext(props) {
+  const ref = useRef(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const {
+    appearance,
+    url,
+    id
+  } = props;
+  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) {
+      startUfoExperience('smart-link-rendered', id);
+      setIsIntersecting(true);
+      observer.disconnect();
+    } else {
+      prefetch();
+    }
+  }, [prefetch, id]);
+  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]);
+  const content = isIntersecting ? /*#__PURE__*/React.createElement(CardWithUrlContent, props) : /*#__PURE__*/React.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+  return /*#__PURE__*/React.createElement(Component, {
+    className: "loader-wrapper"
+  }, content);
+}
+export const LazyIntersectionObserverCard = props => {
+  const Component = getBooleanFF('platform.linking-platform.smart-card.fix-intersection-observer') ? LazyIntersectionObserverCardNext : LazyIntersectionObserverCardLegacy;
+  return /*#__PURE__*/React.createElement(Component, props);
+};

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -15,22 +15,16 @@ import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../..
 import ActionGroupItem from './action-group-item';
 import { filterActionItems } from '../utils';
 import { di } from 'react-magnetic-di';
-const styles = css`
-  display: inline-flex;
-  line-height: 1rem;
-  > div {
-    align-items: center;
-    button:focus-visible {
-      // AK button removes the default browser outline on focus and apply
-      // box-shadow styling to create the outline appearance.
-      // Due to our container elements (Container/Block/ElementGroup) has
-      // overflow hidden to prevent the metadata element from leaking outside
-      // of its container, the box-shadow doesn't show properly.
-      // Invert the AK box-shadow styling.
-      outline-offset: -2px;
+const styles = css({
+  display: 'inline-flex',
+  lineHeight: '1rem',
+  '> div': {
+    alignItems: 'center',
+    'button:focus-visible': {
+      outlineOffset: '-2px'
     }
   }
-`;
+});
 const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => jsx(ActionGroupItem, {
   item: item,
   key: idx,

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.js

@@ -10,16 +10,14 @@ import ActionGroup from '../action-group';
 import { Title } from '../../elements';
 const getActionStyles = (showOnHover, isOpen) => {
   if (showOnHover && !isOpen) {
-    return css`
-      .actions-button-group {
-        opacity: 0;
+    return css({
+      '.actions-button-group': {
+        opacity: 0
+      },
+      '&:hover .actions-button-group, .actions-button-group:focus-within': {
+        opacity: 1
       }
-
-      &:hover .actions-button-group,
-      .actions-button-group:focus-within {
-        opacity: 1;
-      }
-    `;
+    });
   }
 };
 const getTitleBlockViewComponent = status => {
@@ -87,9 +85,7 @@ const TitleBlock = ({
     onDropdownOpenChange: onDropdownOpenChange
   });
   const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
-  const combinedCss = css`
-    ${actionStyles} ${overrideCss}
-  `;
+  const combinedCss = css(actionStyles, overrideCss);
   const overrideText = !!text ? {
     text
   } : {};

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.48.0",
+  packageVersion: "26.48.2",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

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

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

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { usePrefetch } from '../../../state';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
@@ -10,7 +11,7 @@ import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
 // 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';
-export function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardLegacy(props) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isIntersecting = _useState2[0],
@@ -51,4 +52,51 @@ export function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+function LazyIntersectionObserverCardNext(props) {
+  var ref = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isIntersecting = _useState4[0],
+    setIsIntersecting = _useState4[1];
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
+  var prefetch = usePrefetch(url);
+  var Component = appearance === 'inline' ? 'span' : 'div';
+  var ComponentObserver = Component;
+  var onIntersection = useCallback(function (entries, observer) {
+    var isVisible = entries.some(function (entry) {
+      return entry.isIntersecting;
+    });
+    if (isVisible) {
+      startUfoExperience('smart-link-rendered', id);
+      setIsIntersecting(true);
+      observer.disconnect();
+    } else {
+      prefetch();
+    }
+  }, [prefetch, id]);
+  useEffect(function () {
+    if (!ref.current) {
+      return;
+    }
+    var intersectionObserver = new IntersectionObserver(onIntersection, {
+      rootMargin: "".concat(ROOT_MARGIN_VERTICAL, " 0px ").concat(ROOT_MARGIN_VERTICAL, " 0px")
+    });
+    intersectionObserver.observe(ref.current);
+    return function () {
+      return intersectionObserver.disconnect();
+    };
+  }, [ref, onIntersection]);
+  var content = isIntersecting ? /*#__PURE__*/React.createElement(CardWithUrlContent, props) : /*#__PURE__*/React.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+  return /*#__PURE__*/React.createElement(Component, {
+    className: "loader-wrapper"
+  }, content);
+}
+export var LazyIntersectionObserverCard = function LazyIntersectionObserverCard(props) {
+  var Component = getBooleanFF('platform.linking-platform.smart-card.fix-intersection-observer') ? LazyIntersectionObserverCardNext : LazyIntersectionObserverCardLegacy;
+  return /*#__PURE__*/React.createElement(Component, props);
+};

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["triggerRef"];
-var _templateObject;
 /** @jsx jsx */
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
@@ -20,7 +18,16 @@ import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../..
 import ActionGroupItem from './action-group-item';
 import { filterActionItems } from '../utils';
 import { di } from 'react-magnetic-di';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus-visible {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      outline-offset: -2px;\n    }\n  }\n"])));
+var styles = css({
+  display: 'inline-flex',
+  lineHeight: '1rem',
+  '> div': {
+    alignItems: 'center',
+    'button:focus-visible': {
+      outlineOffset: '-2px'
+    }
+  }
+});
 var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmartLinkSize.Medium;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition", "hideIcon"];
-var _templateObject, _templateObject2;
 import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/react';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
@@ -15,7 +13,14 @@ import ActionGroup from '../action-group';
 import { Title } from '../../elements';
 var getActionStyles = function getActionStyles(showOnHover, isOpen) {
   if (showOnHover && !isOpen) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .actions-button-group {\n        opacity: 0;\n      }\n\n      &:hover .actions-button-group,\n      .actions-button-group:focus-within {\n        opacity: 1;\n      }\n    "])));
+    return css({
+      '.actions-button-group': {
+        opacity: 0
+      },
+      '&:hover .actions-button-group, .actions-button-group:focus-within': {
+        opacity: 1
+      }
+    });
   }
 };
 var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
@@ -89,7 +94,7 @@ var TitleBlock = function TitleBlock(_ref) {
     onDropdownOpenChange: onDropdownOpenChange
   });
   var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
-  var combinedCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
+  var combinedCss = css(actionStyles, overrideCss);
   var overrideText = !!text ? {
     text: text
   } : {};

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

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.48.0",
+  packageVersion: "26.48.2",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/state/hooks/use-related-urls/index.d.ts

@@ -2,5 +2,5 @@ import { JsonLd } from 'json-ld-types';
 export type RelatedUrlsResponse = {
     resolvedResults?: JsonLd.Response[];
 };
-declare const useRelatedUrls: () => (url: any) => Promise<RelatedUrlsResponse>;
+declare const useRelatedUrls: () => (url: string) => Promise<RelatedUrlsResponse>;
 export default useRelatedUrls;

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { CardWithUrlContentProps } from '../types';
-export declare function LazyIntersectionObserverCard(props: CardWithUrlContentProps): JSX.Element;
+declare function LazyIntersectionObserverCardLegacy(props: CardWithUrlContentProps): JSX.Element;
+declare function LazyIntersectionObserverCardNext(props: CardWithUrlContentProps): JSX.Element;
+export declare const LazyIntersectionObserverCard: typeof LazyIntersectionObserverCardNext | typeof LazyIntersectionObserverCardLegacy;
+export {};

package/dist/types-ts4.5/state/hooks/use-related-urls/index.d.ts

@@ -2,5 +2,5 @@ import { JsonLd } from 'json-ld-types';
 export type RelatedUrlsResponse = {
     resolvedResults?: JsonLd.Response[];
 };
-declare const useRelatedUrls: () => (url: any) => Promise<RelatedUrlsResponse>;
+declare const useRelatedUrls: () => (url: string) => Promise<RelatedUrlsResponse>;
 export default useRelatedUrls;

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { CardWithUrlContentProps } from '../types';
-export declare function LazyIntersectionObserverCard(props: CardWithUrlContentProps): JSX.Element;
+declare function LazyIntersectionObserverCardLegacy(props: CardWithUrlContentProps): JSX.Element;
+declare function LazyIntersectionObserverCardNext(props: CardWithUrlContentProps): JSX.Element;
+export declare const LazyIntersectionObserverCard: typeof LazyIntersectionObserverCardNext | typeof LazyIntersectionObserverCardLegacy;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.48.0",
+  "version": "26.48.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/avatar": "^21.5.0",
     "@atlaskit/avatar-group": "^9.5.0",
     "@atlaskit/badge": "^15.2.0",
-    "@atlaskit/button": "^17.4.0",
+    "@atlaskit/button": "^17.6.0",
     "@atlaskit/dropdown-menu": "^12.5.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-file-type": "^6.4.0",
@@ -48,7 +48,7 @@
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/popup": "^1.12.0",
-    "@atlaskit/primitives": "^2.1.0",
+    "@atlaskit/primitives": "^3.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.38.0",
@@ -77,11 +77,13 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/css-reset": "^6.6.0",
     "@atlaskit/link-test-helpers": "^6.2.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
+    "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.2.0",
@@ -153,6 +155,9 @@
     },
     "platform.linking-platform.smart-card.hover-card-ai-summaries": {
       "type": "boolean"
+    },
+    "platform.linking-platform.smart-card.fix-intersection-observer": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"