@atlaskit/smart-card 27.20.2 → 28.0.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlaskit/smart-card
 
+## 28.0.0
+
+### Major Changes
+
+- [#138322](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138322)
+  [`578855218c959`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/578855218c959) - ####
+  What
+
+  Linking Platform are updating block smart cards to use flexible UI internally by default, and
+  deprecating the `enableFlexibleBlockCard` provider feature flag.
+
+  When upgrading you'll see some visual and minor content changes to the block cards where the
+  legacy block card was being used.
+
+  #### Why
+
+  A majority of adopters using block smart cards are already using flexible UI by using the
+  `enableFlexibleBlockCard` feature flag within `SmartCardProvider`. There are very few use cases
+  where using the legacy block card is still required and our goal is to completely remove the
+  legacy block card.
+
+  #### How to upgrade
+
+  Upgrade the smart-card dependency to the latest major version. If breaking changes are introduced,
+  there is a `useLegacyBlockCard` prop to allow existing usages of the standalone block card to
+  persist the legacy version. Linking Platform discourage the use of the prop, please reach out to
+  #help-linking-platform for further help if its use is required.
+
+## 27.21.0
+
+### Minor Changes
+
+- [#137752](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137752)
+  [`4f651813d3319`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f651813d3319) -
+  Added resolvingPlaceholder prop to allow for truncation of titles when smart cards are resolving
+
 ## 27.20.2
 
 ### 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: "27.20.2"
+  packageVersion: "28.0.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.CardWithUrlContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _linkProvider = require("@atlaskit/link-provider");
 var _modal = require("../../state/modal");
 var _utils = require("../../utils");
 var measure = _interopRequireWildcard(require("../../utils/performance"));
@@ -53,7 +52,8 @@ function Component(_ref) {
     showAuthTooltip = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents,
     useLegacyBlockCard = _ref.useLegacyBlockCard,
-    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle;
+    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = _ref.resolvingPlaceholder;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
 
@@ -76,7 +76,6 @@ function Component(_ref) {
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children);
   }, [children]);
-  var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard'));
   var actionOptions = (0, _combineActionOptions.combineActionOptions)(actionOptionsProp, showServerActions, showActions, platform);
   var frameStyle = (0, _utils.combineFrameStyle)(frameStyleProp, isFrameVisible);
 
@@ -235,7 +234,8 @@ function Component(_ref) {
         hoverPreviewOptions: hoverPreviewOptions,
         showAuthTooltip: showAuthTooltip,
         actionOptions: actionOptions,
-        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle
+        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
+        resolvingPlaceholder: resolvingPlaceholder
       });
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {
@@ -255,7 +255,7 @@ function Component(_ref) {
         testId: testId,
         actionOptions: actionOptions,
         platform: platform,
-        enableFlexibleBlockCard: enableFlexibleBlockCardFlag && useLegacyBlockCard !== true
+        enableFlexibleBlockCard: useLegacyBlockCard !== true
       });
     case 'embed':
       return /*#__PURE__*/_react.default.createElement(_EmbedCard.EmbedCard, {

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

@@ -67,7 +67,8 @@ function CardWithURLRenderer(props) {
     placeholder = props.placeholder,
     fallbackComponent = props.fallbackComponent,
     useLegacyBlockCard = props.useLegacyBlockCard,
-    removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle;
+    removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = props.resolvingPlaceholder;
   var analytics = (0, _analytics.useSmartLinkAnalytics)(url !== null && url !== void 0 ? url : '', undefined, id);
   var isFlexibleUi = (0, _flexible.isFlexibleUiCard)(children);
   var errorHandler = (0, _react.useCallback)(function (error, info) {
@@ -138,7 +139,8 @@ function CardWithURLRenderer(props) {
     analyticsEvents: analyticsEvents,
     placeholder: placeholder,
     useLegacyBlockCard: useLegacyBlockCard,
-    removeTextHighlightingFromTitle: removeTextHighlightingFromTitle
+    removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
+    resolvingPlaceholder: resolvingPlaceholder
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -35,7 +35,8 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = /*#__PURE__*/fun
         inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
         _this$props$testId = _this$props.testId,
         testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
-        titleTextColor = _this$props.titleTextColor;
+        titleTextColor = _this$props.titleTextColor,
+        resolvingPlaceholder = _this$props.resolvingPlaceholder;
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
         return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
           withoutBackground: true,
@@ -54,7 +55,7 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = /*#__PURE__*/fun
           isSelected: isSelected,
           link: url
         }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
-          title: url,
+          title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
           titleTextColor: titleTextColor
         }, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, {
           className: "inline-resolving-spinner"

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

@@ -73,7 +73,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
     hoverPreviewOptions = _ref.hoverPreviewOptions,
     showAuthTooltip = _ref.showAuthTooltip,
     actionOptions = _ref.actionOptions,
-    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle;
+    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = _ref.resolvingPlaceholder;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -116,7 +117,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         onClick: handleFrameClick,
         testId: testIdWithStatus,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        resolvingPlaceholder: resolvingPlaceholder
       });
     case 'resolved':
       return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedProps, {

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

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { useFeatureFlag } from '@atlaskit/link-provider';
 import { SmartLinkModalProvider } from '../../state/modal';
 import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
@@ -43,7 +42,8 @@ function Component({
   showAuthTooltip,
   analyticsEvents,
   useLegacyBlockCard,
-  removeTextHighlightingFromTitle
+  removeTextHighlightingFromTitle,
+  resolvingPlaceholder
 }) {
   const {
     createAnalyticsEvent
@@ -67,7 +67,6 @@ function Component({
   const services = getServices(state.details);
   const canBeDatasource = getCanBeDatasource(state.details);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
-  const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   const actionOptions = combineActionOptions(actionOptionsProp, showServerActions, showActions, platform);
   const frameStyle = combineFrameStyle(frameStyleProp, isFrameVisible);
 
@@ -222,7 +221,8 @@ function Component({
         hoverPreviewOptions: hoverPreviewOptions,
         showAuthTooltip: showAuthTooltip,
         actionOptions: actionOptions,
-        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle
+        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
+        resolvingPlaceholder: resolvingPlaceholder
       });
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {
@@ -242,7 +242,7 @@ function Component({
         testId: testId,
         actionOptions: actionOptions,
         platform: platform,
-        enableFlexibleBlockCard: enableFlexibleBlockCardFlag && useLegacyBlockCard !== true
+        enableFlexibleBlockCard: useLegacyBlockCard !== true
       });
     case 'embed':
       return /*#__PURE__*/React.createElement(EmbedCard, {

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

@@ -46,7 +46,8 @@ export function CardWithURLRenderer(props) {
     placeholder,
     fallbackComponent,
     useLegacyBlockCard,
-    removeTextHighlightingFromTitle
+    removeTextHighlightingFromTitle,
+    resolvingPlaceholder
   } = props;
   const analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', undefined, id);
   const isFlexibleUi = isFlexibleUiCard(children);
@@ -116,7 +117,8 @@ export function CardWithURLRenderer(props) {
     analyticsEvents,
     placeholder,
     useLegacyBlockCard,
-    removeTextHighlightingFromTitle
+    removeTextHighlightingFromTitle,
+    resolvingPlaceholder
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -12,7 +12,8 @@ export class InlineCardResolvingView extends React.Component {
       isSelected,
       inlinePreloaderStyle,
       testId = 'inline-card-resolving-view',
-      titleTextColor
+      titleTextColor,
+      resolvingPlaceholder
     } = this.props;
     if (inlinePreloaderStyle === 'on-right-without-skeleton') {
       return /*#__PURE__*/React.createElement(Frame, {
@@ -32,7 +33,7 @@ export class InlineCardResolvingView extends React.Component {
         isSelected: isSelected,
         link: url
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        title: url,
+        title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
         titleTextColor: titleTextColor
       }, /*#__PURE__*/React.createElement(SpinnerWrapper, {
         className: "inline-resolving-spinner"

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

@@ -33,7 +33,8 @@ export const InlineCard = ({
   hoverPreviewOptions,
   showAuthTooltip,
   actionOptions,
-  removeTextHighlightingFromTitle
+  removeTextHighlightingFromTitle,
+  resolvingPlaceholder
 }) => {
   var _details$meta, _providerForbidden$te;
   const {
@@ -81,7 +82,8 @@ export const InlineCard = ({
         isSelected: isSelected,
         onClick: handleFrameClick,
         testId: testIdWithStatus,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        resolvingPlaceholder: resolvingPlaceholder
       });
     case 'resolved':
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {

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

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { useFeatureFlag } from '@atlaskit/link-provider';
 import { SmartLinkModalProvider } from '../../state/modal';
 import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
@@ -43,7 +42,8 @@ function Component(_ref) {
     showAuthTooltip = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents,
     useLegacyBlockCard = _ref.useLegacyBlockCard,
-    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle;
+    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = _ref.resolvingPlaceholder;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
 
@@ -66,7 +66,6 @@ function Component(_ref) {
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children);
   }, [children]);
-  var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   var actionOptions = combineActionOptions(actionOptionsProp, showServerActions, showActions, platform);
   var frameStyle = combineFrameStyle(frameStyleProp, isFrameVisible);
 
@@ -225,7 +224,8 @@ function Component(_ref) {
         hoverPreviewOptions: hoverPreviewOptions,
         showAuthTooltip: showAuthTooltip,
         actionOptions: actionOptions,
-        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle
+        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
+        resolvingPlaceholder: resolvingPlaceholder
       });
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {
@@ -245,7 +245,7 @@ function Component(_ref) {
         testId: testId,
         actionOptions: actionOptions,
         platform: platform,
-        enableFlexibleBlockCard: enableFlexibleBlockCardFlag && useLegacyBlockCard !== true
+        enableFlexibleBlockCard: useLegacyBlockCard !== true
       });
     case 'embed':
       return /*#__PURE__*/React.createElement(EmbedCard, {

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

@@ -54,7 +54,8 @@ export function CardWithURLRenderer(props) {
     placeholder = props.placeholder,
     fallbackComponent = props.fallbackComponent,
     useLegacyBlockCard = props.useLegacyBlockCard,
-    removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle;
+    removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = props.resolvingPlaceholder;
   var analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', undefined, id);
   var isFlexibleUi = isFlexibleUiCard(children);
   var errorHandler = useCallback(function (error, info) {
@@ -125,7 +126,8 @@ export function CardWithURLRenderer(props) {
     analyticsEvents: analyticsEvents,
     placeholder: placeholder,
     useLegacyBlockCard: useLegacyBlockCard,
-    removeTextHighlightingFromTitle: removeTextHighlightingFromTitle
+    removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
+    resolvingPlaceholder: resolvingPlaceholder
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -28,7 +28,8 @@ export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
         inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
         _this$props$testId = _this$props.testId,
         testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
-        titleTextColor = _this$props.titleTextColor;
+        titleTextColor = _this$props.titleTextColor,
+        resolvingPlaceholder = _this$props.resolvingPlaceholder;
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
         return /*#__PURE__*/React.createElement(Frame, {
           withoutBackground: true,
@@ -47,7 +48,7 @@ export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
           isSelected: isSelected,
           link: url
         }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-          title: url,
+          title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
           titleTextColor: titleTextColor
         }, /*#__PURE__*/React.createElement(SpinnerWrapper, {
           className: "inline-resolving-spinner"

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

@@ -34,7 +34,8 @@ export var InlineCard = function InlineCard(_ref) {
     hoverPreviewOptions = _ref.hoverPreviewOptions,
     showAuthTooltip = _ref.showAuthTooltip,
     actionOptions = _ref.actionOptions,
-    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle;
+    removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = _ref.resolvingPlaceholder;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -77,7 +78,8 @@ export var InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         onClick: handleFrameClick,
         testId: testIdWithStatus,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        resolvingPlaceholder: resolvingPlaceholder
       });
     case 'resolved':
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {

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.20.2",
+  packageVersion: "28.0.0",
   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" | "hoverPreviewOptions" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "showServerActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "useLegacyBlockCard" | "removeTextHighlightingFromTitle" | "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" | "removeTextHighlightingFromTitle" | "resolvingPlaceholder" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -119,4 +119,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
      * For example, when set to true: "my name | :~:text=highlight this" will be displayed as "my name"
      */
     removeTextHighlightingFromTitle?: boolean;
+    /**
+     * When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.
+     */
+    resolvingPlaceholder?: string;
 }

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

@@ -51,4 +51,5 @@ export type CardWithUrlContentProps = {
     placeholder?: string;
     useLegacyBlockCard?: boolean;
     removeTextHighlightingFromTitle?: boolean;
+    resolvingPlaceholder?: string;
 };

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

@@ -11,6 +11,8 @@ export interface InlineCardResolvingViewProps {
     /** 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;
     titleTextColor?: string;
+    /** An optional placeholder displayed while the smart card is resolving. */
+    resolvingPlaceholder?: string;
 }
 export declare class InlineCardResolvingView extends React.Component<InlineCardResolvingViewProps> {
     render(): JSX.Element;

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

@@ -6,4 +6,4 @@ import { InlineCardResolvedView } from './ResolvedView';
 import { InlineCardResolvingView } from './ResolvingView';
 import { InlineCardUnauthorizedView } from './UnauthorisedView';
 export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView, };
-export declare const InlineCard: ({ analytics, id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, showAuthTooltip, actionOptions, removeTextHighlightingFromTitle, }: InlineCardProps) => JSX.Element;
+export declare const InlineCard: ({ analytics, id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, showAuthTooltip, actionOptions, removeTextHighlightingFromTitle, resolvingPlaceholder, }: InlineCardProps) => JSX.Element;

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

@@ -27,4 +27,5 @@ export type InlineCardProps = {
     actionOptions?: CardActionOptions;
     analytics: AnalyticsFacade;
     removeTextHighlightingFromTitle?: boolean;
+    resolvingPlaceholder?: string;
 };

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" | "hoverPreviewOptions" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "showServerActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "useLegacyBlockCard" | "removeTextHighlightingFromTitle" | "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" | "removeTextHighlightingFromTitle" | "resolvingPlaceholder" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -119,4 +119,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
      * For example, when set to true: "my name | :~:text=highlight this" will be displayed as "my name"
      */
     removeTextHighlightingFromTitle?: boolean;
+    /**
+     * When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.
+     */
+    resolvingPlaceholder?: string;
 }

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

@@ -51,4 +51,5 @@ export type CardWithUrlContentProps = {
     placeholder?: string;
     useLegacyBlockCard?: boolean;
     removeTextHighlightingFromTitle?: boolean;
+    resolvingPlaceholder?: string;
 };

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

@@ -11,6 +11,8 @@ export interface InlineCardResolvingViewProps {
     /** 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;
     titleTextColor?: string;
+    /** An optional placeholder displayed while the smart card is resolving. */
+    resolvingPlaceholder?: string;
 }
 export declare class InlineCardResolvingView extends React.Component<InlineCardResolvingViewProps> {
     render(): JSX.Element;

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

@@ -6,4 +6,4 @@ import { InlineCardResolvedView } from './ResolvedView';
 import { InlineCardResolvingView } from './ResolvingView';
 import { InlineCardUnauthorizedView } from './UnauthorisedView';
 export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView, };
-export declare const InlineCard: ({ analytics, id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, showAuthTooltip, actionOptions, removeTextHighlightingFromTitle, }: InlineCardProps) => JSX.Element;
+export declare const InlineCard: ({ analytics, id, url, cardState, handleAuthorize, handleFrameClick, isSelected, isHovered, renderers, onResolve, onError, testId, inlinePreloaderStyle, showHoverPreview, hoverPreviewOptions, showAuthTooltip, actionOptions, removeTextHighlightingFromTitle, resolvingPlaceholder, }: InlineCardProps) => JSX.Element;

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

@@ -27,4 +27,5 @@ export type InlineCardProps = {
     actionOptions?: CardActionOptions;
     analytics: AnalyticsFacade;
     removeTextHighlightingFromTitle?: boolean;
+    resolvingPlaceholder?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "27.20.2",
+	"version": "28.0.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/icon-file-type": "^6.5.0",
 		"@atlaskit/icon-object": "^6.5.0",
 		"@atlaskit/icon-priority": "^6.3.0",