@atlaskit/smart-card 26.42.12 → 26.43.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.43.0
+
+### Minor Changes
+
+- [#58979](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58979) [`5fda0e961b2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5fda0e961b2c) - [ux] Added a new prop isHovering and styles for the border around inline smart card when the prop is true
+
 ## 26.42.12
 
 ### Patch 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.42.12"
+  packageVersion: "26.43.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/CardWithUrl/component.js

@@ -27,6 +27,7 @@ function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
     isSelected = _ref.isSelected,
+    isHovered = _ref.isHovered,
     isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
@@ -216,6 +217,7 @@ function Component(_ref) {
         handleAuthorize: services.length && handleAuthorize || undefined,
         handleFrameClick: handleClickWrapper,
         isSelected: isSelected,
+        isHovered: isHovered,
         onResolve: onResolve,
         onError: onError,
         testId: testId,

package/dist/cjs/view/CardWithUrl/loader.js

@@ -40,6 +40,7 @@ function CardWithURLRenderer(props) {
   var url = props.url,
     appearance = props.appearance,
     isSelected = props.isSelected,
+    isHovered = props.isHovered,
     isFrameVisible = props.isFrameVisible,
     frameStyle = props.frameStyle,
     onClick = props.onClick,
@@ -109,6 +110,7 @@ function CardWithURLRenderer(props) {
     appearance: appearance,
     onClick: onClick,
     isSelected: isSelected,
+    isHovered: isHovered,
     isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
     container: container,

package/dist/cjs/view/InlineCard/Frame/index.js

@@ -18,7 +18,8 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     link = props.link,
     withoutBackground = props.withoutBackground,
     testId = props.testId,
-    className = props.className;
+    className = props.className,
+    isHovered = props.isHovered;
   var handleClick = (0, _react.useCallback)(function (event) {
     if (onClick) {
       event.preventDefault();
@@ -57,6 +58,7 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className,
-    ref: ref
+    ref: ref,
+    isHovered: isHovered
   }, children);
 });

package/dist/cjs/view/InlineCard/Frame/styled.js

@@ -34,6 +34,18 @@ var isSelected = function isSelected(_ref2) {
     return 'user-select: text';
   }
 };
+var hoveredStyles = function hoveredStyles(props) {
+  return "\n  ".concat((0, _components.themed)({
+    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";"),
+    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";")
+  })(props), ";\n");
+};
+var activeHoveredFocusedStyles = function activeHoveredFocusedStyles(props) {
+  return "\n  ".concat(props.withoutBackground ? '' : 'text-decoration: none;', ";\n");
+};
+var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
+  return "\n    ".concat(hoveredStyles(props), ";\n    ").concat(activeHoveredFocusedStyles(props), ";\n");
+};
 
 /*
   Inline smart cards should have the following layout:
@@ -57,10 +69,7 @@ var baseWrapperStyle = function baseWrapperStyle(props) {
   })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : (0, _components.themed)({
     light: "border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), ";"),
     dark: "border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N500, ")"), ";")
-  })(props), "\n  &:hover {\n    ").concat((0, _components.themed)({
-    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";"),
-    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";")
-  })(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(props.withoutBackground ? '' : 'text-decoration: none;', "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
+  })(props), "\n  &:hover {\n    ").concat(hoveredStyles(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(activeHoveredFocusedStyles(props), "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  ").concat(props.isHovered && hoveredWihBorderStyles(props), ";\n");
 };
 var WrapperAnchor = exports.WrapperAnchor = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
 WrapperAnchor.displayName = 'WrapperAnchor';

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

@@ -46,6 +46,7 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         _this$props$title = _this$props.title,
         title = _this$props$title === void 0 ? '' : _this$props$title,
         isSelected = _this$props.isSelected,
+        isHovered = _this$props.isHovered,
         onClick = _this$props.onClick,
         icon = _this$props.icon,
         link = _this$props.link,
@@ -61,6 +62,7 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         testId: testId,
         link: link,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: onClick
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         emoji: titlePrefix,

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

@@ -65,6 +65,7 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
     handleAuthorize = _ref.handleAuthorize,
     handleFrameClick = _ref.handleFrameClick,
     isSelected = _ref.isSelected,
+    isHovered = _ref.isHovered,
     renderers = _ref.renderers,
     onResolve = _ref.onResolve,
     onError = _ref.onError,
@@ -124,6 +125,7 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         showServerActions: showServerActions,
         link: url,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus
       }));

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -17,6 +17,7 @@ function Component({
   id,
   url,
   isSelected,
+  isHovered,
   isFrameVisible,
   frameStyle,
   platform,
@@ -203,6 +204,7 @@ function Component({
         handleAuthorize: services.length && handleAuthorize || undefined,
         handleFrameClick: handleClickWrapper,
         isSelected: isSelected,
+        isHovered: isHovered,
         onResolve: onResolve,
         onError: onError,
         testId: testId,

package/dist/es2019/view/CardWithUrl/loader.js

@@ -20,6 +20,7 @@ export function CardWithURLRenderer(props) {
     url,
     appearance,
     isSelected,
+    isHovered,
     isFrameVisible,
     frameStyle,
     onClick,
@@ -88,6 +89,7 @@ export function CardWithURLRenderer(props) {
     appearance,
     onClick,
     isSelected,
+    isHovered,
     isFrameVisible,
     frameStyle,
     container,

package/dist/es2019/view/InlineCard/Frame/index.js

@@ -10,7 +10,8 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
     link,
     withoutBackground,
     testId,
-    className
+    className,
+    isHovered
   } = props;
   const handleClick = useCallback(event => {
     if (onClick) {
@@ -50,6 +51,7 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className,
-    ref: ref
+    ref: ref,
+    isHovered: isHovered
   }, children);
 });

package/dist/es2019/view/InlineCard/Frame/styled.js

@@ -48,6 +48,19 @@ const isSelected = ({
     return 'user-select: text';
   }
 };
+const hoveredStyles = props => `
+  ${themed({
+  light: `border-color: ${`var(--ds-border-accent-blue, ${B200})`};`,
+  dark: `border-color:  ${`var(--ds-border-accent-blue, ${B200})`};`
+})(props)};
+`;
+const activeHoveredFocusedStyles = props => `
+  ${props.withoutBackground ? '' : 'text-decoration: none;'};
+`;
+const hoveredWihBorderStyles = props => `
+    ${hoveredStyles(props)};
+    ${activeHoveredFocusedStyles(props)};
+`;
 
 /*
   Inline smart cards should have the following layout:
@@ -85,16 +98,15 @@ const baseWrapperStyle = props => `
   dark: `border: 1px solid ${`var(--ds-border, ${N500})`};`
 })(props)}
   &:hover {
-    ${themed({
-  light: `border-color: ${`var(--ds-border-accent-blue, ${B200})`};`,
-  dark: `border-color:  ${`var(--ds-border-accent-blue, ${B200})`};`
-})(props)}
+    ${hoveredStyles(props)}
   }
   &, :hover, :focus, :active {
-    ${props.withoutBackground ? '' : 'text-decoration: none;'}
+    ${activeHoveredFocusedStyles(props)}
   }
   transition: 0.1s all ease-in-out;
   -moz-user-select: none;
+
+  ${props.isHovered && hoveredWihBorderStyles(props)};
 `;
 export const WrapperAnchor = styled.a`
   ${baseWrapperStyle}

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

@@ -23,6 +23,7 @@ export class InlineCardResolvedView extends React.Component {
       id,
       title = '',
       isSelected,
+      isHovered,
       onClick,
       icon,
       link,
@@ -36,6 +37,7 @@ export class InlineCardResolvedView extends React.Component {
       testId: testId,
       link: link,
       isSelected: isSelected,
+      isHovered: isHovered,
       onClick: onClick
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       emoji: titlePrefix,

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

@@ -25,6 +25,7 @@ export const InlineCard = ({
   handleAuthorize,
   handleFrameClick,
   isSelected,
+  isHovered,
   renderers,
   onResolve,
   onError,
@@ -89,6 +90,7 @@ export const InlineCard = ({
         showServerActions: showServerActions,
         link: url,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus
       }));

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

package/dist/esm/view/CardWithUrl/component.js

@@ -17,6 +17,7 @@ function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
     isSelected = _ref.isSelected,
+    isHovered = _ref.isHovered,
     isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
@@ -206,6 +207,7 @@ function Component(_ref) {
         handleAuthorize: services.length && handleAuthorize || undefined,
         handleFrameClick: handleClickWrapper,
         isSelected: isSelected,
+        isHovered: isHovered,
         onResolve: onResolve,
         onError: onError,
         testId: testId,

package/dist/esm/view/CardWithUrl/loader.js

@@ -28,6 +28,7 @@ export function CardWithURLRenderer(props) {
   var url = props.url,
     appearance = props.appearance,
     isSelected = props.isSelected,
+    isHovered = props.isHovered,
     isFrameVisible = props.isFrameVisible,
     frameStyle = props.frameStyle,
     onClick = props.onClick,
@@ -97,6 +98,7 @@ export function CardWithURLRenderer(props) {
     appearance: appearance,
     onClick: onClick,
     isSelected: isSelected,
+    isHovered: isHovered,
     isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
     container: container,

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

@@ -9,7 +9,8 @@ export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
     link = props.link,
     withoutBackground = props.withoutBackground,
     testId = props.testId,
-    className = props.className;
+    className = props.className,
+    isHovered = props.isHovered;
   var handleClick = useCallback(function (event) {
     if (onClick) {
       event.preventDefault();
@@ -48,6 +49,7 @@ export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className,
-    ref: ref
+    ref: ref,
+    isHovered: isHovered
   }, children);
 });

package/dist/esm/view/InlineCard/Frame/styled.js

@@ -27,6 +27,18 @@ var isSelected = function isSelected(_ref2) {
     return 'user-select: text';
   }
 };
+var hoveredStyles = function hoveredStyles(props) {
+  return "\n  ".concat(themed({
+    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";"),
+    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";")
+  })(props), ";\n");
+};
+var activeHoveredFocusedStyles = function activeHoveredFocusedStyles(props) {
+  return "\n  ".concat(props.withoutBackground ? '' : 'text-decoration: none;', ";\n");
+};
+var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
+  return "\n    ".concat(hoveredStyles(props), ";\n    ").concat(activeHoveredFocusedStyles(props), ";\n");
+};
 
 /*
   Inline smart cards should have the following layout:
@@ -50,10 +62,7 @@ var baseWrapperStyle = function baseWrapperStyle(props) {
   })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : themed({
     light: "border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";"),
     dark: "border: 1px solid ".concat("var(--ds-border, ".concat(N500, ")"), ";")
-  })(props), "\n  &:hover {\n    ").concat(themed({
-    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";"),
-    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";")
-  })(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(props.withoutBackground ? '' : 'text-decoration: none;', "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
+  })(props), "\n  &:hover {\n    ").concat(hoveredStyles(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(activeHoveredFocusedStyles(props), "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  ").concat(props.isHovered && hoveredWihBorderStyles(props), ";\n");
 };
 export var WrapperAnchor = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
 WrapperAnchor.displayName = 'WrapperAnchor';

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

@@ -39,6 +39,7 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         _this$props$title = _this$props.title,
         title = _this$props$title === void 0 ? '' : _this$props$title,
         isSelected = _this$props.isSelected,
+        isHovered = _this$props.isHovered,
         onClick = _this$props.onClick,
         icon = _this$props.icon,
         link = _this$props.link,
@@ -54,6 +55,7 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         testId: testId,
         link: link,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: onClick
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         emoji: titlePrefix,

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

@@ -26,6 +26,7 @@ export var InlineCard = function InlineCard(_ref) {
     handleAuthorize = _ref.handleAuthorize,
     handleFrameClick = _ref.handleFrameClick,
     isSelected = _ref.isSelected,
+    isHovered = _ref.isHovered,
     renderers = _ref.renderers,
     onResolve = _ref.onResolve,
     onError = _ref.onError,
@@ -85,6 +86,7 @@ export var InlineCard = function InlineCard(_ref) {
         showServerActions: showServerActions,
         link: url,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus
       }));

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

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

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

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

@@ -19,6 +19,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
     id?: string;
     platform?: CardPlatform;
     isSelected?: boolean;
+    /** A flag that determines whether a card is in a hover state in edit mode. Currently used for inline links only */
+    isHovered?: boolean;
     /**
      * @deprecated please use 'frameStyle' prop instead. Current usages will be converted in the following manner:
      * isFrameVisible: true => frameStyle: 'show', isFrameVisible: false => frameStyle: 'showOnHover'

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

@@ -12,6 +12,7 @@ export type CardWithUrlContentProps = {
     platform?: CardPlatform;
     onClick?: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     isFrameVisible?: boolean;
     frameStyle?: FrameStyle;
     container?: HTMLElement;

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

@@ -11,5 +11,7 @@ export interface FrameViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     className?: string;
+    /** A flag that determines whether a card is in hover state in edit mode. */
+    isHovered?: boolean;
 }
 export declare const Frame: React.ForwardRefExoticComponent<FrameViewProps & React.RefAttributes<never>>;

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

@@ -4,6 +4,7 @@ export interface WrapperProps {
     isSelected?: boolean;
     isInteractive?: boolean;
     withoutBackground?: boolean;
+    isHovered?: boolean;
 }
 export declare const WrapperAnchor: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -11,6 +11,8 @@ export interface InlineCardResolvedViewProps {
     lozenge?: LozengeProps;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
+    /** A flag that determines whether a card is in hover state in edit mode. Currently used for inline only */
+    isHovered?: boolean;
     /** The optional url */
     link?: string;
     /** The optional click handler */

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

@@ -10,6 +10,7 @@ export type InlineCardProps = {
     handleAuthorize: (() => void) | undefined;
     handleFrameClick: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     testId?: string;
     onResolve?: (data: {
         url?: string;

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

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

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

@@ -19,6 +19,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
     id?: string;
     platform?: CardPlatform;
     isSelected?: boolean;
+    /** A flag that determines whether a card is in a hover state in edit mode. Currently used for inline links only */
+    isHovered?: boolean;
     /**
      * @deprecated please use 'frameStyle' prop instead. Current usages will be converted in the following manner:
      * isFrameVisible: true => frameStyle: 'show', isFrameVisible: false => frameStyle: 'showOnHover'

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

@@ -12,6 +12,7 @@ export type CardWithUrlContentProps = {
     platform?: CardPlatform;
     onClick?: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     isFrameVisible?: boolean;
     frameStyle?: FrameStyle;
     container?: HTMLElement;

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

@@ -11,5 +11,7 @@ export interface FrameViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     className?: string;
+    /** A flag that determines whether a card is in hover state in edit mode. */
+    isHovered?: boolean;
 }
 export declare const Frame: React.ForwardRefExoticComponent<FrameViewProps & React.RefAttributes<never>>;

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

@@ -4,6 +4,7 @@ export interface WrapperProps {
     isSelected?: boolean;
     isInteractive?: boolean;
     withoutBackground?: boolean;
+    isHovered?: boolean;
 }
 export declare const WrapperAnchor: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -11,6 +11,8 @@ export interface InlineCardResolvedViewProps {
     lozenge?: LozengeProps;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
+    /** A flag that determines whether a card is in hover state in edit mode. Currently used for inline only */
+    isHovered?: boolean;
     /** The optional url */
     link?: string;
     /** The optional click handler */

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

@@ -10,6 +10,7 @@ export type InlineCardProps = {
     handleAuthorize: (() => void) | undefined;
     handleFrameClick: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     testId?: string;
     onResolve?: (data: {
         url?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.42.12",
+  "version": "26.43.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/avatar-group": "^9.4.0",
     "@atlaskit/badge": "^15.2.0",
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^16.18.0",
     "@atlaskit/dropdown-menu": "^12.1.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^22.0.0",