@atlaskit/smart-card 26.50.8 → 26.50.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 26.50.10
+
+### Patch Changes
+
+- [#83297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83297) [`6b1707c169e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1707c169e0) - The internal composition of this component has changed. There is no expected change in behaviour.
+
+## 26.50.9
+
+### Patch Changes
+
+- [#82969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82969) [`cae58d4129ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cae58d4129ff) - Display the AI Summary component only when there is summary content available
+- [#83188](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83188) [`cd5d06cd3329`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd5d06cd3329) - Minor adjustments to improve compatibility with React 18
+
 ## 26.50.8
 
 ### Patch Changes

package/dist/cjs/state/hooks/use-ai-summary/index.js

@@ -34,10 +34,9 @@ var useAISummary = exports.useAISummary = function useAISummary(props) {
     fireEvent('operational.summary.success', {});
     (0, _analytics.succeedUfoExperience)(EXPERIENCE_NAME, id);
   }, [fireEvent]);
-  var onError = (0, _react.useCallback)(function (id) {
-    var reason = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var onError = (0, _react.useCallback)(function (id, reason) {
     fireEvent('operational.summary.failed', {
-      reason: reason
+      reason: reason || null
     });
     (0, _analytics.failUfoExperience)(EXPERIENCE_NAME, id);
   }, [fireEvent]);

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.50.8"
+  packageVersion: "26.50.10"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -86,7 +86,7 @@ var Wrapper = exports.Wrapper = _styled.default.div(function (props) {
 }, {
   // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
   // to be thoroughly checked with a designer so that we do not miss an unintended visual change
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginTop: '10px'
 });
 var embedHeaderHeight = exports.embedHeaderHeight = 32;

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

@@ -31,7 +31,7 @@ var styles = (0, _react2.css)({
   '> div': {
     alignItems: 'center',
     'button:focus-visible': {
-      outlineOffset: '-2px'
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
     }
   }
 });

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -49,7 +49,9 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     _useAISummary$state = _useAISummary.state,
     content = _useAISummary$state.content,
     status = _useAISummary$state.status;
-  var showAISummary = status !== 'ready' && status !== 'error';
+  var showAISummary = status === 'done' ||
+  // We want to display the AI Summary component only when there is content available during the loading process.
+  status === 'loading' && !!content;
   var isSummarisedOnMountRef = (0, _react.useRef)(status === 'done');
   var isErroredOnMountRef = (0, _react.useRef)(status === 'error');
   var _useState = (0, _react.useState)(false),
@@ -95,6 +97,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   }), status === 'done' && /*#__PURE__*/_react.default.createElement(_aiEventSummaryViewed.default, {
     fromCache: isSummarisedOnMountRef.current
   }), showAISummary && /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
+    testId: "".concat(testId, "-ai-summary"),
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -18,7 +18,7 @@ var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)(
 });
 var sharedBlockStyles = (0, _react.css)({
   display: 'flex',
-  gap: '0.5rem',
+  gap: "var(--ds-space-100, 0.5rem)",
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden',

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -162,7 +162,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     actionOptions: actionOptions,
     ui: _styled.flexibleUiOptions,
     url: url,
-    children: {},
+    children: null,
     analytics: analytics
   };
   var onClickStopPropagation = (0, _react2.useCallback)(function (e) {

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -64,12 +64,17 @@ var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   var bottomPrimary = _ref.bottomPrimary,
     imagePreview = _ref.imagePreview,
     url = _ref.url;
-  var aiSummary = (0, _useAiSummary.useAISummary)({
-    url: url
-  });
-  var aiStatus = aiSummary.state.status;
-  var showData = aiStatus === 'ready' || aiStatus === 'error';
+  var _useAISummary = (0, _useAiSummary.useAISummary)({
+      url: url
+    }),
+    _useAISummary$state = _useAISummary.state,
+    status = _useAISummary$state.status,
+    content = _useAISummary$state.content;
+  var showData = status === 'ready' || status === 'error' ||
+  // Description & bottom metadata should only disappear when we start getting summary content
+  !content && status === 'loading';
   return showData ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    testId: 'connected-AI',
     status: _constants.SmartLinkStatus.Resolved
   }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: bottomPrimary,

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.50.8",
+  packageVersion: "26.50.10",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/state/hooks/use-ai-summary/index.js

@@ -26,9 +26,9 @@ export const useAISummary = props => {
     fireEvent('operational.summary.success', {});
     succeedUfoExperience(EXPERIENCE_NAME, id);
   }, [fireEvent]);
-  const onError = useCallback((id, reason = null) => {
+  const onError = useCallback((id, reason) => {
     fireEvent('operational.summary.failed', {
-      reason
+      reason: reason || null
     });
     failUfoExperience(EXPERIENCE_NAME, id);
   }, [fireEvent]);

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

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -146,7 +146,7 @@ export const LinkWrapper = styled.div`
 export const Wrapper = styled.div(props => wrapperStyles(props), {
   // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
   // to be thoroughly checked with a designer so that we do not miss an unintended visual change
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginTop: '10px'
 });
 export const embedHeaderHeight = 32;

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
@@ -21,7 +22,7 @@ const styles = css({
   '> div': {
     alignItems: 'center',
     'button:focus-visible': {
-      outlineOffset: '-2px'
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
     }
   }
 });

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -40,7 +40,9 @@ const AISummaryBlockResolvedView = props => {
   } = useAISummary({
     url
   });
-  const showAISummary = status !== 'ready' && status !== 'error';
+  const showAISummary = status === 'done' ||
+  // We want to display the AI Summary component only when there is content available during the loading process.
+  status === 'loading' && !!content;
   const isSummarisedOnMountRef = useRef(status === 'done');
   let isErroredOnMountRef = useRef(status === 'error');
   const [showAISummaryErrorMessage, setShowAISummaryErrorMessage] = useState(false);
@@ -83,6 +85,7 @@ const AISummaryBlockResolvedView = props => {
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
+    testId: `${testId}-ai-summary`,
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -12,7 +12,7 @@ export const dropdownItemGroupStyles = css({
 });
 const sharedBlockStyles = css({
   display: 'flex',
-  gap: '0.5rem',
+  gap: "var(--ds-space-100, 0.5rem)",
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden',

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -126,7 +126,7 @@ const HoverCardContent = ({
     actionOptions,
     ui: flexibleUiOptions,
     url: url,
-    children: {},
+    children: null,
     analytics
   };
   const onClickStopPropagation = useCallback(e => e.stopPropagation(), []);

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -55,12 +55,19 @@ const ConnectedAIBlock = ({
   imagePreview,
   url
 }) => {
-  const aiSummary = useAISummary({
+  const {
+    state: {
+      status,
+      content
+    }
+  } = useAISummary({
     url
   });
-  const aiStatus = aiSummary.state.status;
-  const showData = aiStatus === 'ready' || aiStatus === 'error';
+  const showData = status === 'ready' || status === 'error' ||
+  // Description & bottom metadata should only disappear when we start getting summary content
+  !content && status === 'loading';
   return showData ? /*#__PURE__*/React.createElement(React.Fragment, null, !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: 'connected-AI',
     status: SmartLinkStatus.Resolved
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomPrimary,

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.50.8",
+  packageVersion: "26.50.10",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/state/hooks/use-ai-summary/index.js

@@ -27,10 +27,9 @@ export var useAISummary = function useAISummary(props) {
     fireEvent('operational.summary.success', {});
     succeedUfoExperience(EXPERIENCE_NAME, id);
   }, [fireEvent]);
-  var onError = useCallback(function (id) {
-    var reason = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var onError = useCallback(function (id, reason) {
     fireEvent('operational.summary.failed', {
-      reason: reason
+      reason: reason || null
     });
     failUfoExperience(EXPERIENCE_NAME, id);
   }, [fireEvent]);

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

package/dist/esm/view/EmbedCard/components/styled.js

@@ -76,7 +76,7 @@ export var Wrapper = styled.div(function (props) {
 }, {
   // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
   // to be thoroughly checked with a designer so that we do not miss an unintended visual change
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginTop: '10px'
 });
 export var embedHeaderHeight = 32;

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

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["triggerRef"];
 /** @jsx jsx */
+
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
@@ -24,7 +25,7 @@ var styles = css({
   '> div': {
     alignItems: 'center',
     'button:focus-visible': {
-      outlineOffset: '-2px'
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
     }
   }
 });

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -39,7 +39,9 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     _useAISummary$state = _useAISummary.state,
     content = _useAISummary$state.content,
     status = _useAISummary$state.status;
-  var showAISummary = status !== 'ready' && status !== 'error';
+  var showAISummary = status === 'done' ||
+  // We want to display the AI Summary component only when there is content available during the loading process.
+  status === 'loading' && !!content;
   var isSummarisedOnMountRef = useRef(status === 'done');
   var isErroredOnMountRef = useRef(status === 'error');
   var _useState = useState(false),
@@ -85,6 +87,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
+    testId: "".concat(testId, "-ai-summary"),
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -12,7 +12,7 @@ export var dropdownItemGroupStyles = css({
 });
 var sharedBlockStyles = css({
   display: 'flex',
-  gap: '0.5rem',
+  gap: "var(--ds-space-100, 0.5rem)",
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden',

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -151,7 +151,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     actionOptions: actionOptions,
     ui: flexibleUiOptions,
     url: url,
-    children: {},
+    children: null,
     analytics: analytics
   };
   var onClickStopPropagation = useCallback(function (e) {

package/dist/esm/view/HoverCard/components/views/resolved/index.js

@@ -55,12 +55,17 @@ var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   var bottomPrimary = _ref.bottomPrimary,
     imagePreview = _ref.imagePreview,
     url = _ref.url;
-  var aiSummary = useAISummary({
-    url: url
-  });
-  var aiStatus = aiSummary.state.status;
-  var showData = aiStatus === 'ready' || aiStatus === 'error';
+  var _useAISummary = useAISummary({
+      url: url
+    }),
+    _useAISummary$state = _useAISummary.state,
+    status = _useAISummary$state.status,
+    content = _useAISummary$state.content;
+  var showData = status === 'ready' || status === 'error' ||
+  // Description & bottom metadata should only disappear when we start getting summary content
+  !content && status === 'loading';
   return showData ? /*#__PURE__*/React.createElement(React.Fragment, null, !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: 'connected-AI',
     status: SmartLinkStatus.Resolved
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomPrimary,

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.50.8",
+  packageVersion: "26.50.10",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/HoverCard/components/HoverCardContent.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ActionItem } from '../../FlexibleCard/components/blocks/types';
 import { HoverCardContentProps } from '../types';
 export declare const hoverCardClassName = "smart-links-hover-preview";
 export declare const getCopyAction: (url: string) => ActionItem;
-declare const HoverCardContent: React.FC<HoverCardContentProps>;
+declare const HoverCardContent: ({ id, analytics: _analytics, cardActions, cardState, onActionClick, onResolve, renderers, url, onMouseEnter, onMouseLeave, actionOptions, }: HoverCardContentProps) => jsx.JSX.Element | null;
 export default HoverCardContent;

package/dist/types-ts4.5/view/HoverCard/components/HoverCardContent.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ActionItem } from '../../FlexibleCard/components/blocks/types';
 import { HoverCardContentProps } from '../types';
 export declare const hoverCardClassName = "smart-links-hover-preview";
 export declare const getCopyAction: (url: string) => ActionItem;
-declare const HoverCardContent: React.FC<HoverCardContentProps>;
+declare const HoverCardContent: ({ id, analytics: _analytics, cardActions, cardState, onActionClick, onResolve, renderers, url, onMouseEnter, onMouseLeave, actionOptions, }: HoverCardContentProps) => jsx.JSX.Element | null;
 export default HoverCardContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.50.8",
+  "version": "26.50.10",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"