@atlaskit/smart-card 17.7.2 → 17.7.5

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -5,17 +5,17 @@ import { Frame } from '../components/Frame';
 import { Thumbnail } from '../components/Thumbnail';
 import { Provider } from '../components/Provider';
 import { Name } from '../components/Name';
-import { Byline } from '../components/Byline';
+import { Byline } from '../../common/Byline';
 import { ActionList } from '../components/ActionList';
 import { CollaboratorList } from '../components/CollaboratorList';
 import { Emoji } from '../components/Emoji';
-import { Icon } from '../components/Icon';
+import { Icon } from '../../common/Icon';
 import { Content } from '../components/Content';
-import { MetadataList } from '../components/MetadataList';
+import { MetadataList } from '../../common/MetadataList';
 import { LozengeBlockWrapper } from '../../InlineCard/IconAndTitleLayout/styled';
 import { ContentHeader } from '../components/ContentHeader';
 import { ContentFooter } from '../components/ContentFooter';
-import { gs } from '../utils';
+import { gs } from '../../common/utils';
 import { handleClickCommon } from '../utils/handlers';
 export var blockCardResolvedViewClassName = 'block-card-resolved-view';
 export var blockCardResolvedViewByClassName = 'block-card-resolved-view-by';

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -4,7 +4,7 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { Frame } from '../components/Frame';
-import { gs } from '../utils';
+import { gs } from '../../common/utils';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
 export var blockCardResolvingViewClassName = 'block-card-resolving-view';

package/dist/esm/view/BlockCard/views/UnauthorizedView.js

@@ -10,7 +10,7 @@ import { jsx } from '@emotion/core';
 import { FormattedMessage } from 'react-intl-next';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
-import { Byline } from '../components/Byline';
+import { Byline } from '../../common/Byline';
 import { ActionList } from '../components/ActionList';
 import { Content } from '../components/Content';
 import { messages } from '@atlaskit/media-ui/messages';

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

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
 import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { gs as gridSize } from '../../BlockCard/utils';
+import { gs as gridSize } from '../../common/utils';
 export var className = 'media-card-frame';
 export var cardShadow = "";
 

package/dist/esm/view/EmbedCard/views/ErroredView.js

@@ -7,7 +7,7 @@ import { R300 } from '@atlaskit/theme/colors';
 import { Frame } from '../../BlockCard/components/Frame';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
-import { gs } from '../../BlockCard/utils';
+import { gs } from '../../common/utils';
 export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
   var onRetry = _ref.onRetry,
       _ref$isSelected = _ref.isSelected,

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -6,7 +6,7 @@ import Button from '@atlaskit/button/custom-theme-button';
 import { fontSize } from '@atlaskit/theme/constants';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
-import { gs as gridSize } from '../../BlockCard/utils';
+import { gs as gridSize } from '../../common/utils';
 export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
   var image = _ref.image,
       title = _ref.title,

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

@@ -21,19 +21,27 @@ var ActionGroup = function ActionGroup(_ref) {
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
-      appearance = _ref.appearance;
-  var isMoreThenTwoItems = items.length > 2;
-  var firstActions = isMoreThenTwoItems ? items.slice(0, 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(1) : [];
+      appearance = _ref.appearance,
+      _ref$visibleButtonsNu = _ref.visibleButtonsNum,
+      visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
+      onDropdownOpenChange = _ref.onDropdownOpenChange;
+  var isMoreThenTwoItems = items.length > visibleButtonsNum;
+  var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
+  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
   return jsx("div", {
     css: styles
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
-    trigger: function trigger(_ref2) {
-      var triggerRef = _ref2.triggerRef,
-          props = _objectWithoutProperties(_ref2, _excluded);
+    onOpenChange: function onOpenChange(_ref2) {
+      var isOpen = _ref2.isOpen;
+      return onDropdownOpenChange && onDropdownOpenChange(isOpen);
+    },
+    trigger: function trigger(_ref3) {
+      var triggerRef = _ref3.triggerRef,
+          props = _objectWithoutProperties(_ref3, _excluded);
 
       return jsx(Button, _extends({}, props, {
         spacing: sizeToSpacing[size],
+        className: "action-group-more-button",
         testId: "action-group-more-button",
         iconBefore: jsx(MoreIcon, {
           label: "more"

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -19,9 +19,10 @@ var Block = function Block(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId,
+      extraCss = _ref.extraCss;
   return jsx("div", {
-    css: getBlockStyles(direction, size),
+    css: [getBlockStyles(direction, size), extraCss],
     "data-smart-block": true,
     "data-testid": testId
   }, renderChildren(children, size));

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

@@ -1,13 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "text"];
-import React from 'react';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "text", "showActionOnHover"];
+
+var _templateObject;
+
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import { LinkIcon, Title } from '../../../elements';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
 import { renderElementItems } from '../../utils';
 import ActionGroup from '../../action-group';
+var actionOnHoverOnlyStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .action-group-more-button {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .action-group-more-button {\n      visibility: visible;\n    }\n  }\n"])));
 
 var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   var maxLines = _ref.maxLines,
@@ -21,30 +29,42 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
       testId = _ref.testId,
       theme = _ref.theme,
       text = _ref.text,
+      showActionOnHover = _ref.showActionOnHover,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
   var metadataElements = renderElementItems(metadata);
   var subtitleElements = renderElementItems(subtitle);
   var overrideText = !!text ? {
     text: text
   } : {};
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/React.createElement(LinkIcon, {
+  var extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view"),
+    extraCss: extraCss
+  }), jsx(LinkIcon, {
     position: position
-  }), /*#__PURE__*/React.createElement(ElementGroup, {
+  }), jsx(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible
-  }, /*#__PURE__*/React.createElement(Title, _extends({
+  }, jsx(Title, _extends({
     maxLines: maxLines,
     theme: theme
-  }, overrideText)), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, overrideText)), subtitleElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, subtitleElements)), metadataElements && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
-  }, metadataElements), actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
-    items: actions
+  }, metadataElements), actions.length > 0 && jsx(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
   }));
 };
 

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
+import { Card } from '../Card';
+import { HoverCardContainer } from './styled';
+export var HoverCard = function HoverCard(_ref) {
+  var children = _ref.children,
+      url = _ref.url;
+  var cardComponent = /*#__PURE__*/React.createElement(Card, {
+    appearance: "block",
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null));
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: cardComponent,
+    component: HoverCardContainer,
+    testId: "hover-card",
+    tag: "span"
+  }, children);
+};

package/dist/esm/view/HoverCard/styled.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import styled from '@emotion/styled';
+import { TooltipPrimitive } from '@atlaskit/tooltip';
+export var HoverCardContainer = styled(TooltipPrimitive)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: content-box; /* do not set this to border-box or it will break the overflow handling */\n  max-width: 500px;\n  padding: 0;\n"])));

package/dist/esm/view/HoverCard/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -13,6 +13,7 @@ import { Frame } from '../Frame';
 import Lozenge from '@atlaskit/lozenge';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { HoverCard } from '../../../view/HoverCard/index';
 export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardResolvedView, _React$Component);
 
@@ -51,8 +52,10 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
           _this$props$testId = _this$props.testId,
           testId = _this$props$testId === void 0 ? 'inline-card-resolved-view' : _this$props$testId,
           titleTextColor = _this$props.titleTextColor,
-          titlePrefix = _this$props.titlePrefix;
-      return /*#__PURE__*/React.createElement(Frame, {
+          titlePrefix = _this$props.titlePrefix,
+          _this$props$showHover = _this$props.showHoverPreview,
+          showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover;
+      var inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         link: link,
         isSelected: isSelected,
@@ -63,6 +66,14 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         title: title,
         titleTextColor: titleTextColor
       }), this.renderLozenge());
+
+      if (showHoverPreview && link) {
+        return /*#__PURE__*/React.createElement(HoverCard, {
+          url: link
+        }, inlineCardResolvedView);
+      }
+
+      return inlineCardResolvedView;
     }
   }]);
 

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

@@ -21,7 +21,8 @@ export var InlineCard = function InlineCard(_ref) {
       renderers = _ref.renderers,
       onResolve = _ref.onResolve,
       testId = _ref.testId,
-      inlinePreloaderStyle = _ref.inlinePreloaderStyle;
+      inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+      showHoverPreview = _ref.showHoverPreview;
   var status = cardState.status,
       details = cardState.details;
   var cardDetails = details && details.data || getEmptyJsonLd();
@@ -49,6 +50,7 @@ export var InlineCard = function InlineCard(_ref) {
       }
 
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
+        showHoverPreview: showHoverPreview,
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/esm/view/{BlockCard/components → common}/Byline.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { N300 } from '@atlaskit/theme/colors';
-import { gs, mq } from '../utils';
+import { gs, mq } from './utils';
 export var Byline = function Byline(_ref) {
   var text = _ref.text,
       children = _ref.children,

package/dist/esm/view/{BlockCard/components → common}/Icon.js

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/core';
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { gs } from '../utils';
+import { gs } from './utils';
 export var blockCardIconImageClassName = 'block-card-icon-image';
 export var Icon = function Icon(_ref) {
   var url = _ref.url,

package/dist/esm/view/{BlockCard/components → common}/Metadata.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import { gs } from '../utils';
+import { gs } from './utils';
 import { N300 } from '@atlaskit/theme/colors';
 export var Metadata = function Metadata(_ref) {
   var text = _ref.text,

package/dist/esm/view/{BlockCard/components → common}/MetadataList.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { Metadata } from './Metadata';
-import { gs } from '../utils';
+import { gs } from './utils';
 export var metadataListClassName = 'smart-link-metadata-list';
 export var MetadataList = function MetadataList(_ref) {
   var items = _ref.items,

package/dist/esm/view/{BlockCard/components → common}/Modal.js

@@ -28,7 +28,7 @@ https://atlassian.design/components/modal-dialog/examples#customizing-modal-dial
 import React, { useState } from 'react';
 import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
 import { Header } from './ModalHeader';
-import { getIframeSandboxAttribute } from '../../../utils';
+import { getIframeSandboxAttribute } from '../../utils';
 var iframeStyles = {
   width: "100%",
   height: 'calc(100vh - 248px)'

package/dist/esm/view/{BlockCard/components → common}/ModalHeader.js

@@ -7,7 +7,7 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N100, N30A } from '@atlaskit/theme/colors';
 import { FormattedMessage } from 'react-intl-next';
-import { gs } from '../utils';
+import { gs } from './utils';
 import { Icon } from './Icon';
 import { MetadataList } from './MetadataList';
 import { Byline } from './Byline';

package/dist/types/classNames.d.ts

@@ -1,9 +1,9 @@
 export { contentFooterClassName } from './view/BlockCard/components/ContentFooter';
-export { metadataListClassName } from './view/BlockCard/components/MetadataList';
+export { metadataListClassName } from './view/common/MetadataList';
 export { blockCardResolvingViewClassName } from './view/BlockCard/views/ResolvingView';
 export { blockCardResolvedViewClassName, blockCardResolvedViewByClassName, } from './view/BlockCard/views/ResolvedView';
 export { blockCardForbiddenViewClassName, blockCardForbiddenViewLinkClassName, } from './view/BlockCard/views/ForbiddenView';
-export { blockCardIconImageClassName } from './view/BlockCard/components/Icon';
+export { blockCardIconImageClassName } from './view/common/Icon';
 export { blockCardContentClassName } from './view/BlockCard/components/Content';
 export { blockCardContentHeaderClassName } from './view/BlockCard/components/ContentHeader';
 export { blockCardContentHeaderNameClassName } from './view/BlockCard/components/Name';

package/dist/types/view/BlockCard/actions/PreviewAction.d.ts

@@ -1,8 +1,8 @@
 import React, { ErrorInfo } from 'react';
-import { ModalProps } from '../components/Modal';
+import { ModalProps } from '../../common/Modal';
 import { ActionProps } from '../components/Action';
-import { IconProps } from '../components/Icon';
-import { MetadataProps } from '../components/Metadata';
+import { IconProps } from '../../common/Icon';
+import { MetadataProps } from '../../common/Metadata';
 export interface PreviewFunctionArg extends ModalProps {
     popupMountPointId: string;
 }

package/dist/types/view/BlockCard/views/ForbiddenView.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ActionProps } from '../components/Action';
-import { IconProps } from '../components/Icon';
+import { IconProps } from '../../common/Icon';
 import { RequestAccessContextProps } from '../../types';
 export interface PermissionDeniedProps {
     actions?: Array<ActionProps>;

package/dist/types/view/BlockCard/views/NotFoundView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../components/Icon';
+import { IconProps } from '../../common/Icon';
 export interface NotFoundProps {
     context?: {
         icon?: React.ReactNode;

package/dist/types/view/BlockCard/views/ResolvedView.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { AvatarClickEventHandler } from '@atlaskit/avatar';
 import { Collaborator } from '../components/CollaboratorList';
-import { IconProps } from '../components/Icon';
+import { IconProps } from '../../common/Icon';
 import { ActionProps } from '../components/Action';
-import { MetadataProps } from '../components/Metadata';
+import { MetadataProps } from '../../common/Metadata';
 import { ContextViewModel } from '../../types';
 import { LozengeProps } from '../../../types';
 export interface ResolvedViewProps {

package/dist/types/view/BlockCard/views/UnauthorizedView.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ActionProps } from '../components/Action';
-import { IconProps } from '../components/Icon';
+import { IconProps } from '../../common/Icon';
 export interface UnauthorizedViewProps {
     actions: ActionProps[];
     context?: {

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<Pick<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "embedIframeRef" | "forwardedRef"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "embedIframeRef" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Pick<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "url" | "forwardedRef" | "platform" | "isFrameVisible" | "importer" | "container" | "showActions" | "onResolve" | "embedIframeRef" | "inlinePreloaderStyle" | "ui"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "onClick" | "analyticsContext" | "key" | "url" | "forwardedRef" | "platform" | "isFrameVisible" | "importer" | "container" | "showActions" | "onResolve" | "embedIframeRef" | "inlinePreloaderStyle" | "ui"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts

@@ -7,4 +7,6 @@ export declare type ActionGroupProps = {
     direction?: SmartLinkDirection;
     testId?: string;
     appearance?: Appearance;
+    visibleButtonsNum?: number;
+    onDropdownOpenChange?: (isOpen: boolean) => void;
 };

package/dist/types/view/FlexibleCard/components/blocks/title-block/resolved/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { TitleBlockProps } from '../types';
 declare const TitleBlockResolvedView: React.FC<TitleBlockProps>;

package/dist/types/view/FlexibleCard/components/blocks/title-block/types.d.ts

@@ -10,4 +10,5 @@ export declare type TitleBlockProps = BlockProps & {
     actions?: ActionItem[];
     theme?: SmartLinkTheme;
     text?: string;
+    showActionOnHover?: boolean;
 };

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

@@ -1,10 +1,12 @@
 import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize, SmartLinkStatus } from '../../../../constants';
+import { SerializedStyles } from '@emotion/core';
 import { ActionProps } from '../actions/action/types';
 export declare type BlockProps = {
     direction?: SmartLinkDirection;
     size?: SmartLinkSize;
     status?: SmartLinkStatus;
     testId?: string;
+    extraCss?: SerializedStyles;
 };
 export declare type ElementItem = {
     name: ElementName;

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { HoverCardProps } from './types';
+export declare const HoverCard: FC<HoverCardProps>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HoverCardContainer: import("@emotion/styled-base").StyledComponent<Pick<import("@atlaskit/tooltip").TooltipPrimitiveProps, "children" | "style" | "testId" | "className" | "id" | "onMouseOut" | "onMouseOver" | "placement" | "truncate"> & import("react").RefAttributes<HTMLDivElement> & import("react").Attributes, Pick<Pick<import("@atlaskit/tooltip").TooltipPrimitiveProps, "children" | "style" | "testId" | "className" | "id" | "onMouseOut" | "onMouseOver" | "placement" | "truncate"> & import("react").RefAttributes<HTMLDivElement> & import("react").Attributes, "children" | "style" | "testId" | "className" | "id" | "onMouseOut" | "onMouseOver" | "placement" | "truncate">, any>;

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

@@ -0,0 +1,3 @@
+export declare type HoverCardProps = {
+    url: string;
+};

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

@@ -19,6 +19,8 @@ export interface InlineCardResolvedViewProps {
     titleTextColor?: string;
     /** The Emoji icon prefix that was added to the title text via Add emoji button */
     titlePrefix?: React.ReactNode;
+    /** Enables showing a custom preview on hover of link */
+    showHoverPreview?: boolean;
 }
 export declare class InlineCardResolvedView extends React.Component<InlineCardResolvedViewProps> {
     renderLozenge(): JSX.Element | null;

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

@@ -15,4 +15,5 @@ export declare type InlineCardProps = {
     }) => void;
     inlinePreloaderStyle?: InlinePreloaderStyle;
     renderers?: CardProviderRenderers;
+    showHoverPreview?: boolean;
 };

package/package.json

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