@atlaskit/smart-card 28.2.1 → 28.3.1

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

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

@@ -41,7 +41,8 @@ function Component(_ref) {
     analyticsEvents = _ref.analyticsEvents,
     useLegacyBlockCard = _ref.useLegacyBlockCard,
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
-    resolvingPlaceholder = _ref.resolvingPlaceholder;
+    resolvingPlaceholder = _ref.resolvingPlaceholder,
+    truncateInline = _ref.truncateInline;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
 
@@ -226,7 +227,8 @@ function Component(_ref) {
         showAuthTooltip: showAuthTooltip,
         actionOptions: actionOptions,
         removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
-        resolvingPlaceholder: resolvingPlaceholder
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline
       });
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {

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

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

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

@@ -60,11 +60,13 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         _this$props$testId = _this$props.testId,
         testId = _this$props$testId === void 0 ? 'inline-card-errored-view' : _this$props$testId,
         icon = _this$props.icon,
-        message = _this$props.message;
+        message = _this$props.message,
+        truncateInline = _this$props.truncateInline;
       var content = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected,
-        ref: this.frameRef
+        ref: this.frameRef,
+        truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
           label: "error",

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

@@ -107,11 +107,13 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         onClick = _this$props4.onClick,
         isSelected = _this$props4.isSelected,
         _this$props4$testId = _this$props4.testId,
-        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
+        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId,
+        truncateInline = _this$props4.truncateInline;
       var content = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected,
-        ref: this.frameRef
+        ref: this.frameRef,
+        truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
         link: url,

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

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

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

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { B50, B100, B200, B400, N40 } from '@atlaskit/theme/colors';
+var lineHeight = 22;
 var selectedStyles = {
   cursor: 'pointer',
   boxShadow: "0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B100, ")")),
@@ -67,7 +68,7 @@ var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 var baseWrapperStyles = function baseWrapperStyles(props) {
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    lineHeight: '22px',
+    lineHeight: "".concat(lineHeight, "px"),
     padding: "var(--ds-space-025, 2px)".concat(" 0px")
   }, props.withoutBackground ? {
     paddingLeft: 0,
@@ -88,15 +89,41 @@ var baseWrapperStyles = function baseWrapperStyles(props) {
     MozUserSelect: 'none'
   }, props.isHovered ? hoveredWihBorderStyles(props) : undefined);
 };
+var truncateStyles = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-all',
+  // The height of a truncated card is 1px higher than that of a non-truncated card, so we subtract 1px from the line height.
+  lineHeight: "".concat(lineHeight - 1, "px"),
+  display: '-webkit-inline-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  // We need to remove the padding because display: -webkit-inline-box will cause any padding to be
+  // added to the total height, causing truncated cards to have greater height than non-truncated cards which use display: inline.
+  padding: 0,
+  '@supports not (-webkit-line-clamp: 1)': {
+    display: 'inline-block',
+    maxHeight: "".concat(lineHeight, "px"),
+    // If the browser does not support webkit, we don't need to remove the padding
+    padding: "var(--ds-space-025, 2px)".concat(" 0px")
+  }
+};
+var isTruncated = function isTruncated(_ref3) {
+  var truncateInline = _ref3.truncateInline;
+  if (truncateInline) {
+    return truncateStyles;
+  }
+  return undefined;
+};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export var WrapperAnchor = styled.a(function (props) {
-  return _objectSpread(_objectSpread({}, baseWrapperStyles(props)), isInteractive(props));
+  return _objectSpread(_objectSpread(_objectSpread({}, baseWrapperStyles(props)), isInteractive(props)), isTruncated(props));
 });
 WrapperAnchor.displayName = 'WrapperAnchor';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export var WrapperSpan = styled.span(function (props) {
-  return _objectSpread({}, baseWrapperStyles(props));
+  return _objectSpread(_objectSpread({}, baseWrapperStyles(props)), isTruncated(props));
 });
 WrapperSpan.displayName = 'WrapperSpan';

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

@@ -54,13 +54,15 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         _this$props$showHover = _this$props.showHoverPreview,
         showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover,
         hoverPreviewOptions = _this$props.hoverPreviewOptions,
-        actionOptions = _this$props.actionOptions;
+        actionOptions = _this$props.actionOptions,
+        truncateInline = _this$props.truncateInline;
       var inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         link: link,
         isSelected: isSelected,
         isHovered: isHovered,
-        onClick: onClick
+        onClick: onClick,
+        truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         emoji: titlePrefix,
         icon: icon,

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

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

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

@@ -80,11 +80,13 @@ export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component)
         _this$props3$testId = _this$props3.testId,
         testId = _this$props3$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props3$testId,
         _this$props3$showAuth = _this$props3.showAuthTooltip,
-        showAuthTooltip = _this$props3$showAuth === void 0 ? false : _this$props3$showAuth;
+        showAuthTooltip = _this$props3$showAuth === void 0 ? false : _this$props3$showAuth,
+        truncateInline = _this$props3.truncateInline;
       var inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected,
-        ref: this.frameRef
+        ref: this.frameRef,
+        truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon ? icon : FallbackUnauthorizedIcon,
         title: url,

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

@@ -35,7 +35,8 @@ export var InlineCard = function InlineCard(_ref) {
     showAuthTooltip = _ref.showAuthTooltip,
     actionOptions = _ref.actionOptions,
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
-    resolvingPlaceholder = _ref.resolvingPlaceholder;
+    resolvingPlaceholder = _ref.resolvingPlaceholder,
+    truncateInline = _ref.truncateInline;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -79,7 +80,8 @@ export var InlineCard = function InlineCard(_ref) {
         onClick: handleFrameClick,
         testId: testIdWithStatus,
         inlinePreloaderStyle: inlinePreloaderStyle,
-        resolvingPlaceholder: resolvingPlaceholder
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline
       });
     case 'resolved':
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
@@ -91,7 +93,8 @@ export var InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         isHovered: isHovered,
         onClick: handleFrameClick,
-        testId: testIdWithStatus
+        testId: testIdWithStatus,
+        truncateInline: truncateInline
       }));
     case 'unauthorized':
       var provider = extractProvider(cardDetails);
@@ -106,7 +109,8 @@ export var InlineCard = function InlineCard(_ref) {
         showAuthTooltip: showAuthTooltip,
         id: id,
         analytics: analytics,
-        extensionKey: extensionKey
+        extensionKey: extensionKey,
+        truncateInline: truncateInline
       });
     case 'forbidden':
       var providerForbidden = extractProvider(cardDetails);
@@ -126,7 +130,8 @@ export var InlineCard = function InlineCard(_ref) {
         onAuthorise: handleAuthorize,
         testId: testIdWithStatus,
         requestAccessContext: requestAccessContext,
-        showHoverPreview: showHoverPreview
+        showHoverPreview: showHoverPreview,
+        truncateInline: truncateInline
       });
     case 'not_found':
       var providerNotFound = extractProvider(cardDetails);
@@ -137,7 +142,8 @@ export var InlineCard = function InlineCard(_ref) {
         message: "Can't find link",
         onClick: handleFrameClick,
         testId: testIdWithStatus || 'inline-card-not-found-view',
-        showHoverPreview: showHoverPreview
+        showHoverPreview: showHoverPreview,
+        truncateInline: truncateInline
       });
     case 'fallback':
     case 'errored':
@@ -146,7 +152,8 @@ export var InlineCard = function InlineCard(_ref) {
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-errored-view'
+        testId: testIdWithStatus || 'inline-card-errored-view',
+        truncateInline: truncateInline
       });
   }
 };

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

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

@@ -124,4 +124,6 @@ export interface CardProps extends WithAnalyticsEventsProps {
      * When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.
      */
     resolvingPlaceholder?: string;
+    /** When set to true, inline cards will be truncated to one line. */
+    truncateInline?: boolean;
 }

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

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

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

@@ -15,6 +15,8 @@ export interface InlineCardErroredViewProps {
     icon?: React.ReactNode;
     /** Enables showing a custom preview on hover of link */
     showHoverPreview?: boolean;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardErroredView extends React.Component<InlineCardErroredViewProps> {
     private frameRef;

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

@@ -18,6 +18,8 @@ export interface InlineCardForbiddenViewProps {
     requestAccessContext?: RequestAccessContextProps;
     /** Enables showing a custom preview on hover of link */
     showHoverPreview?: boolean;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardForbiddenView extends React.Component<InlineCardForbiddenViewProps> {
     private frameRef;

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

@@ -13,5 +13,7 @@ export interface FrameViewProps {
     className?: string;
     /** A flag that determines whether a card is in hover state in edit mode. */
     isHovered?: boolean;
+    /** A flag that determines whether a card is truncated to 1 line */
+    truncateInline?: boolean;
 }
 export declare const Frame: React.ForwardRefExoticComponent<FrameViewProps & React.RefAttributes<never>>;

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

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

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

@@ -30,6 +30,8 @@ export interface InlineCardResolvedViewProps {
     hoverPreviewOptions?: HoverPreviewOptions;
     /** Configure visibility of server and client actions */
     actionOptions?: CardActionOptions;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardResolvedView extends React.Component<InlineCardResolvedViewProps> {
     renderLozenge(): JSX.Element | null;

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

@@ -13,6 +13,8 @@ export interface InlineCardResolvingViewProps {
     titleTextColor?: string;
     /** An optional placeholder displayed while the smart card is resolving. */
     resolvingPlaceholder?: string;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardResolvingView extends React.Component<InlineCardResolvingViewProps> {
     render(): JSX.Element;

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

@@ -23,6 +23,8 @@ export interface InlineCardUnauthorizedViewProps {
     analytics: AnalyticsFacade;
     /** An identifier of the provider which will be executing the action. */
     extensionKey?: string;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardUnauthorizedView extends React.Component<InlineCardUnauthorizedViewProps> {
     private frameRef;

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, resolvingPlaceholder, }: 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, truncateInline, }: InlineCardProps) => JSX.Element;

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

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

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" | "resolvingPlaceholder" | "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" | "truncateInline" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -124,4 +124,6 @@ export interface CardProps extends WithAnalyticsEventsProps {
      * When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.
      */
     resolvingPlaceholder?: string;
+    /** When set to true, inline cards will be truncated to one line. */
+    truncateInline?: boolean;
 }

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

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

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

@@ -15,6 +15,8 @@ export interface InlineCardErroredViewProps {
     icon?: React.ReactNode;
     /** Enables showing a custom preview on hover of link */
     showHoverPreview?: boolean;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardErroredView extends React.Component<InlineCardErroredViewProps> {
     private frameRef;

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

@@ -18,6 +18,8 @@ export interface InlineCardForbiddenViewProps {
     requestAccessContext?: RequestAccessContextProps;
     /** Enables showing a custom preview on hover of link */
     showHoverPreview?: boolean;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardForbiddenView extends React.Component<InlineCardForbiddenViewProps> {
     private frameRef;

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

@@ -13,5 +13,7 @@ export interface FrameViewProps {
     className?: string;
     /** A flag that determines whether a card is in hover state in edit mode. */
     isHovered?: boolean;
+    /** A flag that determines whether a card is truncated to 1 line */
+    truncateInline?: boolean;
 }
 export declare const Frame: React.ForwardRefExoticComponent<FrameViewProps & React.RefAttributes<never>>;

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

@@ -5,6 +5,7 @@ export interface WrapperProps {
     isInteractive?: boolean;
     withoutBackground?: boolean;
     isHovered?: boolean;
+    truncateInline?: 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

@@ -30,6 +30,8 @@ export interface InlineCardResolvedViewProps {
     hoverPreviewOptions?: HoverPreviewOptions;
     /** Configure visibility of server and client actions */
     actionOptions?: CardActionOptions;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardResolvedView extends React.Component<InlineCardResolvedViewProps> {
     renderLozenge(): JSX.Element | null;

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

@@ -13,6 +13,8 @@ export interface InlineCardResolvingViewProps {
     titleTextColor?: string;
     /** An optional placeholder displayed while the smart card is resolving. */
     resolvingPlaceholder?: string;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardResolvingView extends React.Component<InlineCardResolvingViewProps> {
     render(): JSX.Element;

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

@@ -23,6 +23,8 @@ export interface InlineCardUnauthorizedViewProps {
     analytics: AnalyticsFacade;
     /** An identifier of the provider which will be executing the action. */
     extensionKey?: string;
+    /** Truncates the card to one line */
+    truncateInline?: boolean;
 }
 export declare class InlineCardUnauthorizedView extends React.Component<InlineCardUnauthorizedViewProps> {
     private frameRef;

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, resolvingPlaceholder, }: 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, truncateInline, }: InlineCardProps) => JSX.Element;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "28.2.1",
+	"version": "28.3.1",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -59,7 +59,7 @@
 		"@atlaskit/textarea": "^5.6.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.61.0",
+		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@babel/runtime": "^7.0.0",