@atlaskit/smart-card 27.8.4 → 27.9.1

package/dist/esm/view/EmbedCard/views/unresolved-view/index.js

@@ -79,8 +79,11 @@ var UnresolvedView = function UnresolvedView(_ref) {
       "data-testid": imageTestId
     }, imageUrlOrElement);
   }, [imageUrlOrElement, testId]);
-  return jsx(ExpandedFrame, {
-    allowScrollBar: true
+  return jsx(ExpandedFrame
+  // Scroll bar must be shown for unresolved views to display the connect account button
+  , {
+    allowScrollBar: true,
+    setOverflow: true
     // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
     // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
     // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.

package/dist/esm/view/FlexibleCard/components/container/hover-card-control/index.js

@@ -12,7 +12,8 @@ var HoverCardControl = function HoverCardControl(_ref) {
     testId = _ref.testId,
     url = _ref.url,
     _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY : _ref$delay;
+    delay = _ref$delay === void 0 ? FLEXIBLE_HOVER_CARD_CAN_OPEN_DELAY : _ref$delay,
+    hoverPreviewOptions = _ref.hoverPreviewOptions;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     canOpen = _useState2[0],
@@ -59,7 +60,8 @@ var HoverCardControl = function HoverCardControl(_ref) {
     closeOnChildClick: true,
     hidePreviewButton: hideHoverCardPreviewButton,
     actionOptions: actionOptions,
-    url: url
+    url: url,
+    hoverPreviewOptions: hoverPreviewOptions
   }, /*#__PURE__*/React.createElement("span", {
     onMouseLeave: onMouseLeave,
     onMouseMove: onMouseMove,

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -177,6 +177,7 @@ var Container = function Container(_ref3) {
     showAuthTooltip = _ref3$showAuthTooltip === void 0 ? false : _ref3$showAuthTooltip,
     _ref3$showHoverPrevie = _ref3.showHoverPreview,
     showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
+    hoverPreviewOptions = _ref3.hoverPreviewOptions,
     actionOptions = _ref3.actionOptions,
     _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? SmartLinkSize.Medium : _ref3$size,
@@ -204,7 +205,8 @@ var Container = function Container(_ref3) {
       isAuthTooltip: canShowAuthTooltip,
       actionOptions: actionOptions,
       testId: testId,
-      url: context.url
+      url: context.url,
+      hoverPreviewOptions: hoverPreviewOptions
     }, container);
   }
   return container;

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

@@ -30,6 +30,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     renderers = _ref.renderers,
     showAuthTooltip = _ref.showAuthTooltip,
     showHoverPreview = _ref.showHoverPreview,
+    hoverPreviewOptions = _ref.hoverPreviewOptions,
     actionOptions = _ref.actionOptions,
     testId = _ref.testId,
     ui = _ref.ui,
@@ -95,6 +96,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     onClick: onClick,
     retry: retry,
     showHoverPreview: showHoverPreview,
+    hoverPreviewOptions: hoverPreviewOptions,
     actionOptions: actionOptions,
     showAuthTooltip: showAuthTooltip,
     status: status

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

@@ -21,6 +21,7 @@ var FADE_IN_DELAY = 500;
 var FADE_OUT_DELAY = 300;
 var RESOLVE_DELAY = 100;
 export var HoverCardComponent = function HoverCardComponent(_ref) {
+  var _hoverPreviewOptions$;
   var children = _ref.children,
     url = _ref.url,
     _ref$id = _ref.id,
@@ -39,7 +40,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? HOVER_CARD_Z_INDEX : _ref$zIndex,
     _ref$noFadeDelay = _ref.noFadeDelay,
-    noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay;
+    noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay,
+    hoverPreviewOptions = _ref.hoverPreviewOptions;
+  var fadeInDelay = (_hoverPreviewOptions$ = hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : hoverPreviewOptions.fadeInDelay) !== null && _hoverPreviewOptions$ !== void 0 ? _hoverPreviewOptions$ : FADE_IN_DELAY;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
@@ -149,10 +152,10 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       } else {
         fadeInTimeoutId.current = setTimeout(function () {
           setIsOpen(true);
-        }, FADE_IN_DELAY);
+        }, fadeInDelay);
       }
     }
-  }, [initResolve, isOpen, setMousePosition, noFadeDelay]);
+  }, [initResolve, isOpen, setMousePosition, noFadeDelay, fadeInDelay]);
   var linkActions = useSmartLinkActions({
     url: url,
     appearance: CardDisplay.HoverCardPreview,

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -53,6 +53,7 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         titlePrefix = _this$props.titlePrefix,
         _this$props$showHover = _this$props.showHoverPreview,
         showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover,
+        hoverPreviewOptions = _this$props.hoverPreviewOptions,
         actionOptions = _this$props.actionOptions;
       var inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
@@ -70,7 +71,8 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement(HoverCard, {
           id: id,
           url: link,
-          actionOptions: actionOptions
+          actionOptions: actionOptions,
+          hoverPreviewOptions: hoverPreviewOptions
         }, inlineCardResolvedView);
       }
       return inlineCardResolvedView;

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

@@ -31,6 +31,7 @@ export var InlineCard = function InlineCard(_ref) {
     testId = _ref.testId,
     inlinePreloaderStyle = _ref.inlinePreloaderStyle,
     showHoverPreview = _ref.showHoverPreview,
+    hoverPreviewOptions = _ref.hoverPreviewOptions,
     showAuthTooltip = _ref.showAuthTooltip,
     actionOptions = _ref.actionOptions;
   var _useAnalyticsEvents = useAnalyticsEvents(),
@@ -81,6 +82,7 @@ export var InlineCard = function InlineCard(_ref) {
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
         id: id,
         showHoverPreview: showHoverPreview,
+        hoverPreviewOptions: hoverPreviewOptions,
         actionOptions: actionOptions,
         link: url,
         isSelected: isSelected,

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

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { type CardAppearance, type CardPlatform, type CardProps } from './types';
 import { type WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "actionOptions" | "onResolve" | "ui" | "showHoverPreview" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "showServerActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "useLegacyBlockCard" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "actionOptions" | "onResolve" | "ui" | "showHoverPreview" | "hoverPreviewOptions" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "showServerActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "useLegacyBlockCard" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/Card/types.d.ts

@@ -6,6 +6,7 @@ import { type AnalyticsFacade } from '../../state/analytics';
 import { type FlexibleUiOptions } from '../FlexibleCard/types';
 import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
 import { type FrameStyle } from '../EmbedCard/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type { CardAppearance, CardPlatform };
 export type CardInnerAppearance = CardAppearance | 'embedPreview' | 'flexible' | 'hoverCardPreview';
 export type EmbedIframeUrlType = 'href' | 'interactiveHref';
@@ -96,6 +97,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     showAuthTooltip?: boolean;
     /**
      * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}

package/dist/types/view/CardWithUrl/types.d.ts

@@ -5,6 +5,7 @@ import { type FlexibleUiOptions } from '../FlexibleCard/types';
 import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
 import { type AnalyticsFacade } from '../../state/analytics';
 import { type FrameStyle } from '../EmbedCard/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type CardWithUrlContentProps = {
     id: string;
     url: string;
@@ -44,6 +45,7 @@ export type CardWithUrlContentProps = {
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     showAuthTooltip?: boolean;
     analyticsEvents?: AnalyticsFacade;
     placeholder?: string;

package/dist/types/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -18,7 +18,23 @@ export interface ExpandedFrameProps {
     testId?: string;
     /** If dimensions of the card are to be inherited from the parent */
     inheritDimensions?: boolean;
-    /** To enable scrolling in use cases where the content will not have it's own scrollbar */
+    /**
+     * To enable scrolling in use cases where the content will not have it's own scrollbar.
+     *
+     * Requires `setOverflow` to be set to true.
+     *
+     * Always enable this when when the card is not resolved so the connect account button is not hiddden.
+     */
     allowScrollBar?: boolean;
+    /**
+     * Should the CSS `overflow` property be set to hidden or auto (clipping or
+     * supporting a scroll bar), or left out altogether.
+     *
+     * Set to true when embed is unresolved to prevent account connection button being unreachable.
+     *
+     * Set to false when the card is resolved to mitigate blurry embed card issue (EDM-7188).
+     * @default true
+     */
+    setOverflow?: boolean;
 }
 export declare const ExpandedFrame: FC<ExpandedFrameProps>;

package/dist/types/view/EmbedCard/components/styled.d.ts

@@ -45,7 +45,14 @@ export declare const TooltipWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface ContentProps {
     isInteractive: boolean;
+    /**
+     * Whether to show a scroll bar (use overflow: auto) or hide overflow (overflow:hidden).
+     * Always set to true for unresolved embeds, otherwise the connect account button may be hidden and unreachable.
+     */
     allowScrollBar: boolean;
+    /**
+     * Remove the overflow: ... CSS property altogether.
+     */
     removeOverflow?: boolean;
     frameStyle?: FrameStyle;
 }

package/dist/types/view/FlexibleCard/components/container/hover-card-control/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type HoverCardDelayProps } from './types';
-declare const HoverCardControl: ({ children, hideHoverCardPreviewButton, isHoverPreview, isAuthTooltip, actionOptions, testId, url, delay, }: HoverCardDelayProps) => JSX.Element;
+declare const HoverCardControl: ({ children, hideHoverCardPreviewButton, isHoverPreview, isAuthTooltip, actionOptions, testId, url, delay, hoverPreviewOptions, }: HoverCardDelayProps) => JSX.Element;
 export default HoverCardControl;

package/dist/types/view/FlexibleCard/components/container/hover-card-control/types.d.ts

@@ -1,6 +1,6 @@
 import { type PropsWithChildren } from 'react';
 import { type ContainerProps } from '../types';
-export type HoverCardDelayProps = PropsWithChildren<Pick<ContainerProps, 'hideHoverCardPreviewButton' | 'actionOptions'> & {
+export type HoverCardDelayProps = PropsWithChildren<Pick<ContainerProps, 'hideHoverCardPreviewButton' | 'actionOptions' | 'hoverPreviewOptions'> & {
     isHoverPreview?: boolean;
     isAuthTooltip?: boolean;
     testId?: string;

package/dist/types/view/FlexibleCard/components/container/index.d.ts

@@ -10,5 +10,5 @@ export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: b
  * @internal
  * @see Block
  */
-declare const Container: ({ children, clickableContainer, hideBackground, hideElevation, hideHoverCardPreviewButton, hidePadding, onClick, retry, showAuthTooltip, showHoverPreview, actionOptions, size, status, testId, theme, }: ContainerProps) => jsx.JSX.Element;
+declare const Container: ({ children, clickableContainer, hideBackground, hideElevation, hideHoverCardPreviewButton, hidePadding, onClick, retry, showAuthTooltip, showHoverPreview, hoverPreviewOptions, actionOptions, size, status, testId, theme, }: ContainerProps) => jsx.JSX.Element;
 export default Container;

package/dist/types/view/FlexibleCard/components/container/types.d.ts

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import { type SmartLinkStatus } from '../../../../constants';
 import { type FlexibleCardProps, type FlexibleUiOptions, type RetryOptions } from '../../types';
-export type ContainerProps = PropsWithChildren<Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'actionOptions' | 'showAuthTooltip'> & FlexibleUiOptions & {
+export type ContainerProps = PropsWithChildren<Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'hoverPreviewOptions' | 'actionOptions' | 'showAuthTooltip'> & FlexibleUiOptions & {
     /**
      * The options that determine the retry behaviour when a Smart Link errors.
      */

package/dist/types/view/FlexibleCard/types.d.ts

@@ -8,6 +8,7 @@ import type { CardInnerAppearance, OnResolveCallback, CardActionOptions } from '
 import { type OnErrorCallback } from '../types';
 import { type AnalyticsFacade } from '../../state/analytics';
 import { type AISummaryConfig } from '../../state/hooks/use-ai-summary-config/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type FlexibleCardProps = {
     /**
      * @internal A unique ID for a Smart Link.
@@ -81,6 +82,10 @@ export type FlexibleCardProps = {
      * over the smartlink. Default value is false.
      */
     showHoverPreview?: boolean;
+    /**
+     * Configuration options for hover preview
+     */
+    hoverPreviewOptions?: HoverPreviewOptions;
     /**
      * Determines whether to show an unauthorised view of the hover card
      * when a user hovers over a smartlink.

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

@@ -55,6 +55,7 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      * This is passed to the portal component.
      */
     zIndex?: number;
+    hoverPreviewOptions?: HoverPreviewOptions;
 }
 /**
  * An internal props that internal smart-card components can use to configure
@@ -103,3 +104,9 @@ export type ImagePreviewProps = {
     data: JsonLd.Data.BaseData;
     fallbackElementHeight: number;
 };
+export interface HoverPreviewOptions {
+    /**
+     * Delay (in milliseconds) between hovering over the trigger element and the hover card opening. Defaults to 500ms.
+     */
+    fadeInDelay?: number;
+}

package/dist/types/view/InlineCard/ResolvedView/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type LozengeProps } from '../../../types';
 import type { CardActionOptions } from '../../Card/types';
+import { type HoverPreviewOptions } from '../../HoverCard/types';
 export interface InlineCardResolvedViewProps {
     /** A unique ID for a Smart Link. */
     id?: string;
@@ -26,6 +27,7 @@ export interface InlineCardResolvedViewProps {
     titlePrefix?: React.ReactNode;
     /** Enables showing a custom preview on hover of link */
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     /** Configure visibility of server and client actions */
     actionOptions?: CardActionOptions;
 }

package/dist/types/view/InlineCard/types.d.ts

@@ -4,6 +4,7 @@ import { type CardState } from '../../state/types';
 import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
 import { type AnalyticsFacade } from '../../state/analytics';
 import type { CardActionOptions } from '../Card/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type InlineCardProps = {
     id: string;
     url: string;
@@ -21,6 +22,7 @@ export type InlineCardProps = {
     inlinePreloaderStyle?: InlinePreloaderStyle;
     renderers?: CardProviderRenderers;
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     showAuthTooltip?: boolean;
     actionOptions?: CardActionOptions;
     analytics: AnalyticsFacade;

package/dist/types-ts4.5/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { type CardAppearance, type CardPlatform, type CardProps } from './types';
 import { type WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "actionOptions" | "onResolve" | "ui" | "showHoverPreview" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "showServerActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "useLegacyBlockCard" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "actionOptions" | "onResolve" | "ui" | "showHoverPreview" | "hoverPreviewOptions" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "showServerActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "useLegacyBlockCard" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types-ts4.5/view/Card/types.d.ts

@@ -6,6 +6,7 @@ import { type AnalyticsFacade } from '../../state/analytics';
 import { type FlexibleUiOptions } from '../FlexibleCard/types';
 import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
 import { type FrameStyle } from '../EmbedCard/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type { CardAppearance, CardPlatform };
 export type CardInnerAppearance = CardAppearance | 'embedPreview' | 'flexible' | 'hoverCardPreview';
 export type EmbedIframeUrlType = 'href' | 'interactiveHref';
@@ -96,6 +97,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     showAuthTooltip?: boolean;
     /**
      * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}

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

@@ -5,6 +5,7 @@ import { type FlexibleUiOptions } from '../FlexibleCard/types';
 import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
 import { type AnalyticsFacade } from '../../state/analytics';
 import { type FrameStyle } from '../EmbedCard/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type CardWithUrlContentProps = {
     id: string;
     url: string;
@@ -44,6 +45,7 @@ export type CardWithUrlContentProps = {
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     showAuthTooltip?: boolean;
     analyticsEvents?: AnalyticsFacade;
     placeholder?: string;

package/dist/types-ts4.5/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -18,7 +18,23 @@ export interface ExpandedFrameProps {
     testId?: string;
     /** If dimensions of the card are to be inherited from the parent */
     inheritDimensions?: boolean;
-    /** To enable scrolling in use cases where the content will not have it's own scrollbar */
+    /**
+     * To enable scrolling in use cases where the content will not have it's own scrollbar.
+     *
+     * Requires `setOverflow` to be set to true.
+     *
+     * Always enable this when when the card is not resolved so the connect account button is not hiddden.
+     */
     allowScrollBar?: boolean;
+    /**
+     * Should the CSS `overflow` property be set to hidden or auto (clipping or
+     * supporting a scroll bar), or left out altogether.
+     *
+     * Set to true when embed is unresolved to prevent account connection button being unreachable.
+     *
+     * Set to false when the card is resolved to mitigate blurry embed card issue (EDM-7188).
+     * @default true
+     */
+    setOverflow?: boolean;
 }
 export declare const ExpandedFrame: FC<ExpandedFrameProps>;

package/dist/types-ts4.5/view/EmbedCard/components/styled.d.ts

@@ -45,7 +45,14 @@ export declare const TooltipWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface ContentProps {
     isInteractive: boolean;
+    /**
+     * Whether to show a scroll bar (use overflow: auto) or hide overflow (overflow:hidden).
+     * Always set to true for unresolved embeds, otherwise the connect account button may be hidden and unreachable.
+     */
     allowScrollBar: boolean;
+    /**
+     * Remove the overflow: ... CSS property altogether.
+     */
     removeOverflow?: boolean;
     frameStyle?: FrameStyle;
 }

package/dist/types-ts4.5/view/FlexibleCard/components/container/hover-card-control/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type HoverCardDelayProps } from './types';
-declare const HoverCardControl: ({ children, hideHoverCardPreviewButton, isHoverPreview, isAuthTooltip, actionOptions, testId, url, delay, }: HoverCardDelayProps) => JSX.Element;
+declare const HoverCardControl: ({ children, hideHoverCardPreviewButton, isHoverPreview, isAuthTooltip, actionOptions, testId, url, delay, hoverPreviewOptions, }: HoverCardDelayProps) => JSX.Element;
 export default HoverCardControl;

package/dist/types-ts4.5/view/FlexibleCard/components/container/hover-card-control/types.d.ts

@@ -1,6 +1,6 @@
 import { type PropsWithChildren } from 'react';
 import { type ContainerProps } from '../types';
-export type HoverCardDelayProps = PropsWithChildren<Pick<ContainerProps, 'hideHoverCardPreviewButton' | 'actionOptions'> & {
+export type HoverCardDelayProps = PropsWithChildren<Pick<ContainerProps, 'hideHoverCardPreviewButton' | 'actionOptions' | 'hoverPreviewOptions'> & {
     isHoverPreview?: boolean;
     isAuthTooltip?: boolean;
     testId?: string;

package/dist/types-ts4.5/view/FlexibleCard/components/container/index.d.ts

@@ -10,5 +10,5 @@ export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: b
  * @internal
  * @see Block
  */
-declare const Container: ({ children, clickableContainer, hideBackground, hideElevation, hideHoverCardPreviewButton, hidePadding, onClick, retry, showAuthTooltip, showHoverPreview, actionOptions, size, status, testId, theme, }: ContainerProps) => jsx.JSX.Element;
+declare const Container: ({ children, clickableContainer, hideBackground, hideElevation, hideHoverCardPreviewButton, hidePadding, onClick, retry, showAuthTooltip, showHoverPreview, hoverPreviewOptions, actionOptions, size, status, testId, theme, }: ContainerProps) => jsx.JSX.Element;
 export default Container;

package/dist/types-ts4.5/view/FlexibleCard/components/container/types.d.ts

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import { type SmartLinkStatus } from '../../../../constants';
 import { type FlexibleCardProps, type FlexibleUiOptions, type RetryOptions } from '../../types';
-export type ContainerProps = PropsWithChildren<Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'actionOptions' | 'showAuthTooltip'> & FlexibleUiOptions & {
+export type ContainerProps = PropsWithChildren<Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'hoverPreviewOptions' | 'actionOptions' | 'showAuthTooltip'> & FlexibleUiOptions & {
     /**
      * The options that determine the retry behaviour when a Smart Link errors.
      */

package/dist/types-ts4.5/view/FlexibleCard/types.d.ts

@@ -8,6 +8,7 @@ import type { CardInnerAppearance, OnResolveCallback, CardActionOptions } from '
 import { type OnErrorCallback } from '../types';
 import { type AnalyticsFacade } from '../../state/analytics';
 import { type AISummaryConfig } from '../../state/hooks/use-ai-summary-config/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type FlexibleCardProps = {
     /**
      * @internal A unique ID for a Smart Link.
@@ -81,6 +82,10 @@ export type FlexibleCardProps = {
      * over the smartlink. Default value is false.
      */
     showHoverPreview?: boolean;
+    /**
+     * Configuration options for hover preview
+     */
+    hoverPreviewOptions?: HoverPreviewOptions;
     /**
      * Determines whether to show an unauthorised view of the hover card
      * when a user hovers over a smartlink.

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

@@ -55,6 +55,7 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      * This is passed to the portal component.
      */
     zIndex?: number;
+    hoverPreviewOptions?: HoverPreviewOptions;
 }
 /**
  * An internal props that internal smart-card components can use to configure
@@ -103,3 +104,9 @@ export type ImagePreviewProps = {
     data: JsonLd.Data.BaseData;
     fallbackElementHeight: number;
 };
+export interface HoverPreviewOptions {
+    /**
+     * Delay (in milliseconds) between hovering over the trigger element and the hover card opening. Defaults to 500ms.
+     */
+    fadeInDelay?: number;
+}

package/dist/types-ts4.5/view/InlineCard/ResolvedView/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type LozengeProps } from '../../../types';
 import type { CardActionOptions } from '../../Card/types';
+import { type HoverPreviewOptions } from '../../HoverCard/types';
 export interface InlineCardResolvedViewProps {
     /** A unique ID for a Smart Link. */
     id?: string;
@@ -26,6 +27,7 @@ export interface InlineCardResolvedViewProps {
     titlePrefix?: React.ReactNode;
     /** Enables showing a custom preview on hover of link */
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     /** Configure visibility of server and client actions */
     actionOptions?: CardActionOptions;
 }

package/dist/types-ts4.5/view/InlineCard/types.d.ts

@@ -4,6 +4,7 @@ import { type CardState } from '../../state/types';
 import { type InlinePreloaderStyle, type OnErrorCallback } from '../types';
 import { type AnalyticsFacade } from '../../state/analytics';
 import type { CardActionOptions } from '../Card/types';
+import { type HoverPreviewOptions } from '../HoverCard/types';
 export type InlineCardProps = {
     id: string;
     url: string;
@@ -21,6 +22,7 @@ export type InlineCardProps = {
     inlinePreloaderStyle?: InlinePreloaderStyle;
     renderers?: CardProviderRenderers;
     showHoverPreview?: boolean;
+    hoverPreviewOptions?: HoverPreviewOptions;
     showAuthTooltip?: boolean;
     actionOptions?: CardActionOptions;
     analytics: AnalyticsFacade;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "27.8.4",
+	"version": "27.9.1",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,13 +33,13 @@
 		"@atlaskit/avatar": "^21.11.0",
 		"@atlaskit/avatar-group": "^9.9.0",
 		"@atlaskit/badge": "^16.3.0",
-		"@atlaskit/button": "^18.1.0",
+		"@atlaskit/button": "^18.2.0",
 		"@atlaskit/checkbox": "^13.5.0",
-		"@atlaskit/dropdown-menu": "^12.13.0",
+		"@atlaskit/dropdown-menu": "^12.14.0",
 		"@atlaskit/form": "^10.4.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.5.0",
+		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/icon-file-type": "^6.4.0",
 		"@atlaskit/icon-object": "^6.4.0",
 		"@atlaskit/icon-priority": "^6.3.0",
@@ -50,12 +50,12 @@
 		"@atlaskit/linking-types": "^8.9.0",
 		"@atlaskit/logo": "^14.1.0",
 		"@atlaskit/lozenge": "^11.8.0",
-		"@atlaskit/menu": "^2.6.0",
+		"@atlaskit/menu": "^2.7.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popup": "^1.20.0",
-		"@atlaskit/primitives": "^10.0.0",
+		"@atlaskit/primitives": "^10.1.0",
 		"@atlaskit/section-message": "^6.5.0",
 		"@atlaskit/select": "^17.11.0",
 		"@atlaskit/spinner": "^16.2.0",
@@ -98,7 +98,7 @@
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/analytics-tooling": "*",
 		"@atlassian/feature-flags-test-utils": "^0.2.0",
-		"@testing-library/dom": "^8.17.1",
+		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/react-hooks": "^8.0.1",
@@ -112,9 +112,10 @@
 		"brace": "^0.11.1",
 		"fetch-mock": "^8.0.0",
 		"jest-emotion": "^10.0.32",
-		"jest-extended": "^0.11.2",
+		"jest-extended": "^4.0.2",
 		"jest-fetch-mock": "^3.0.3",
-		"jsdom": "^17.0.0",
+		"jest-mock": "^29.7.0",
+		"jsdom": "^22.0.0",
 		"lorem-ipsum": "^1.0.6",
 		"react": "^16.8.0",
 		"react-ace": "^6.1.0",
@@ -122,7 +123,7 @@
 		"react-dom": "^16.8.0",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"react-test-renderer": "^16.8.0",
-		"ts-jest": "26.5.6",
+		"ts-jest": "29.1.2",
 		"typescript": "~5.4.2",
 		"xhr-mock": "^2.4.0"
 	},