@atlaskit/smart-card 18.0.0 → 18.0.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 18.0.3
+
+### Patch Changes
+
+- [`7dc2fb8eb8b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7dc2fb8eb8b) - Handle exceptions coming from client
+
+## 18.0.2
+
+### Patch Changes
+
+- [`cff21812950`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cff21812950) - add smart link actions to footer of hover card, plus small styling changes
+
+## 18.0.1
+
+### Patch Changes
+
+- [`75c16ae4964`](https://bitbucket.org/atlassian/atlassian-frontend/commits/75c16ae4964) - refactor code to use atlaskit/popup instead of atlaskit/tooltip as a base component
+
 ## 18.0.0
 
 ### Major Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.0",
+	"version": "18.0.3",
 	"sideEffects": false
 }

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

@@ -29,6 +29,8 @@ var _flexible = require("../../utils/flexible");
 
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 
+var _ = require("../..");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -107,15 +109,14 @@ function CardWithUrlContent(_ref) {
     if ((0, _helpers.isFinalState)(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
-
-  if (error) {
-    throw error;
-  }
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
+    var cardState = (error === null || error === void 0 ? void 0 : error.constructor) === _.APIError ? {
+      status: 'errored'
+    } : state;
     return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-      cardState: state,
+      cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       renderers: renderers,
@@ -123,6 +124,11 @@ function CardWithUrlContent(_ref) {
       url: url,
       testId: testId
     }, children);
+  } // We have to keep this last to prevent hook order from being violated
+
+
+  if (error) {
+    throw error;
   }
 
   switch (appearance) {

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

@@ -2,36 +2,121 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HoverCard = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _core = require("@emotion/core");
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _blocks = require("../FlexibleCard/components/blocks");
 
 var _Card = require("../Card");
 
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+
+var _constants = require("../../constants");
+
+var _useSmartLinkActions = require("../../state/hooks-external/useSmartLinkActions");
+
 var _styled = require("./styled");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
 var HoverCard = function HoverCard(_ref) {
   var children = _ref.children,
       url = _ref.url;
+  var delay = 300;
 
-  var cardComponent = /*#__PURE__*/_react.default.createElement(_Card.Card, {
-    appearance: "block",
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, null));
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    content: cardComponent,
-    component: _styled.HoverCardContainer,
+  var fadeOutTimeoutId = (0, _react.useRef)();
+  var fadeInTimeoutId = (0, _react.useRef)();
+  var initHideCard = (0, _react.useCallback)(function () {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(function () {
+      setIsOpen(false);
+    }, delay);
+  }, [delay]);
+  var initShowCard = (0, _react.useCallback)(function () {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(function () {
+      setIsOpen(true);
+    }, delay);
+  }, [delay]); //TODO: EDM-2905: Add analytics events
+
+  var analyticsHandler = (0, _react.useCallback)(function () {}, []);
+  var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
+    url: url,
+    appearance: 'block',
+    analyticsHandler: analyticsHandler
+  });
+  var actions = (0, _react.useMemo)(function () {
+    return linkActions.map(function (action) {
+      return {
+        content: action.text,
+        name: _constants.ActionName.CustomAction,
+        onClick: function onClick() {
+          return action.invoke();
+        },
+        testId: action.id
+      };
+    });
+  }, [linkActions]);
+
+  var cardComponent = function cardComponent() {
+    return (0, _core.jsx)("div", {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      css: _styled.HoverCardContainer
+    }, (0, _core.jsx)(_Card.Card, {
+      appearance: "block",
+      url: url,
+      ui: {
+        hideElevation: true,
+        size: _constants.SmartLinkSize.Large
+      }
+    }, (0, _core.jsx)(_blocks.TitleBlock, null), (0, _core.jsx)(_blocks.SnippetBlock, null), (0, _core.jsx)(_blocks.FooterBlock, {
+      actions: actions
+    })));
+  };
+
+  var onClose = (0, _react.useCallback)(function () {
+    return setIsOpen(false);
+  }, []);
+  return (0, _core.jsx)(_popup.default, {
     testId: "hover-card",
-    tag: "span"
-  }, children);
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom",
+    content: cardComponent,
+    trigger: function trigger(triggerProps) {
+      return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard
+      }), children);
+    }
+  });
 };
 
 exports.HoverCard = HoverCard;

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

@@ -9,11 +9,9 @@ exports.HoverCardContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _tooltip = require("@atlaskit/tooltip");
+var _core = require("@emotion/core");
 
 var _templateObject;
 
-var HoverCardContainer = (0, _styled.default)(_tooltip.TooltipPrimitive)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 500px;\n  padding: 0;\n"])));
 exports.HoverCardContainer = HoverCardContainer;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.0",
+	"version": "18.0.3",
 	"sideEffects": false
 }

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

@@ -8,6 +8,7 @@ import { InlineCard } from '../InlineCard';
 import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
+import { APIError } from '../..';
 export function CardWithUrlContent({
   id,
   url,
@@ -76,15 +77,14 @@ export function CardWithUrlContent({
     if (isFinalState(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
-
-  if (error) {
-    throw error;
-  }
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
+    let cardState = (error === null || error === void 0 ? void 0 : error.constructor) === APIError ? {
+      status: 'errored'
+    } : state;
     return /*#__PURE__*/React.createElement(FlexibleCard, {
-      cardState: state,
+      cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       renderers: renderers,
@@ -92,6 +92,11 @@ export function CardWithUrlContent({
       url: url,
       testId: testId
     }, children);
+  } // We have to keep this last to prevent hook order from being violated
+
+
+  if (error) {
+    throw error;
   }
 
   switch (appearance) {

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

@@ -1,20 +1,79 @@
-import React from 'react';
-import Tooltip from '@atlaskit/tooltip';
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useCallback, useRef, useMemo } from 'react';
 import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
+import Popup from '@atlaskit/popup';
+import { SmartLinkSize, ActionName } from '../../constants';
+import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
 export const HoverCard = ({
   children,
   url
 }) => {
-  const cardComponent = /*#__PURE__*/React.createElement(Card, {
+  const delay = 300;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const fadeOutTimeoutId = useRef();
+  const fadeInTimeoutId = useRef();
+  const initHideCard = useCallback(() => {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(() => {
+      setIsOpen(false);
+    }, delay);
+  }, [delay]);
+  const initShowCard = useCallback(() => {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(() => {
+      setIsOpen(true);
+    }, delay);
+  }, [delay]); //TODO: EDM-2905: Add analytics events
+
+  const analyticsHandler = useCallback(() => {}, []);
+  const linkActions = useSmartLinkActions({
+    url,
+    appearance: 'block',
+    analyticsHandler
+  });
+  const actions = useMemo(() => linkActions.map(action => ({
+    content: action.text,
+    name: ActionName.CustomAction,
+    onClick: () => action.invoke(),
+    testId: action.id
+  })), [linkActions]);
+
+  const cardComponent = () => jsx("div", {
+    onMouseEnter: initShowCard,
+    onMouseLeave: initHideCard,
+    css: HoverCardContainer
+  }, jsx(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,
+    url: url,
+    ui: {
+      hideElevation: true,
+      size: SmartLinkSize.Large
+    }
+  }, jsx(TitleBlock, null), jsx(SnippetBlock, null), jsx(FooterBlock, {
+    actions: actions
+  })));
+
+  const onClose = useCallback(() => setIsOpen(false), []);
+  return jsx(Popup, {
     testId: "hover-card",
-    tag: "span"
-  }, children);
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom",
+    content: cardComponent,
+    trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard
+    }), children)
+  });
 };

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

@@ -1,9 +1,7 @@
-import styled from '@emotion/styled';
-import { TooltipPrimitive } from '@atlaskit/tooltip';
-export const HoverCardContainer = styled(TooltipPrimitive)`
+import { css } from '@emotion/core';
+export const HoverCardContainer = css`
   background: none;
   border-width: 0;
-  box-sizing: content-box; /* do not set this to border-box or it will break the overflow handling */
   max-width: 500px;
   padding: 0;
 `;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.0",
+	"version": "18.0.3",
 	"sideEffects": false
 }

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

@@ -8,6 +8,7 @@ import { InlineCard } from '../InlineCard';
 import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
+import { APIError } from '../..';
 export function CardWithUrlContent(_ref) {
   var id = _ref.id,
       url = _ref.url,
@@ -82,15 +83,14 @@ export function CardWithUrlContent(_ref) {
     if (isFinalState(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
-
-  if (error) {
-    throw error;
-  }
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
+    var cardState = (error === null || error === void 0 ? void 0 : error.constructor) === APIError ? {
+      status: 'errored'
+    } : state;
     return /*#__PURE__*/React.createElement(FlexibleCard, {
-      cardState: state,
+      cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       renderers: renderers,
@@ -98,6 +98,11 @@ export function CardWithUrlContent(_ref) {
       url: url,
       testId: testId
     }, children);
+  } // We have to keep this last to prevent hook order from being violated
+
+
+  if (error) {
+    throw error;
   }
 
   switch (appearance) {

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

@@ -1,19 +1,96 @@
-import React from 'react';
-import Tooltip from '@atlaskit/tooltip';
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useCallback, useRef, useMemo } from 'react';
 import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
+import Popup from '@atlaskit/popup';
+import { SmartLinkSize, ActionName } from '../../constants';
+import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 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,
+  var delay = 300;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var fadeOutTimeoutId = useRef();
+  var fadeInTimeoutId = useRef();
+  var initHideCard = useCallback(function () {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(function () {
+      setIsOpen(false);
+    }, delay);
+  }, [delay]);
+  var initShowCard = useCallback(function () {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(function () {
+      setIsOpen(true);
+    }, delay);
+  }, [delay]); //TODO: EDM-2905: Add analytics events
+
+  var analyticsHandler = useCallback(function () {}, []);
+  var linkActions = useSmartLinkActions({
+    url: url,
+    appearance: 'block',
+    analyticsHandler: analyticsHandler
+  });
+  var actions = useMemo(function () {
+    return linkActions.map(function (action) {
+      return {
+        content: action.text,
+        name: ActionName.CustomAction,
+        onClick: function onClick() {
+          return action.invoke();
+        },
+        testId: action.id
+      };
+    });
+  }, [linkActions]);
+
+  var cardComponent = function cardComponent() {
+    return jsx("div", {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      css: HoverCardContainer
+    }, jsx(Card, {
+      appearance: "block",
+      url: url,
+      ui: {
+        hideElevation: true,
+        size: SmartLinkSize.Large
+      }
+    }, jsx(TitleBlock, null), jsx(SnippetBlock, null), jsx(FooterBlock, {
+      actions: actions
+    })));
+  };
+
+  var onClose = useCallback(function () {
+    return setIsOpen(false);
+  }, []);
+  return jsx(Popup, {
     testId: "hover-card",
-    tag: "span"
-  }, children);
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom",
+    content: cardComponent,
+    trigger: function trigger(triggerProps) {
+      return jsx("span", _extends({}, triggerProps, {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard
+      }), children);
+    }
+  });
 };

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

@@ -2,6 +2,5 @@ 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"])));
+import { css } from '@emotion/core';
+export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  max-width: 500px;\n  padding: 0;\n"])));

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -34,5 +34,5 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         };
     };
     renderers: import("../context/types").CardProviderRenderers | undefined;
-    error: null;
+    error: Error | null;
 };

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

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

@@ -1,2 +1 @@
-/// <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>;
+export declare const HoverCardContainer: import("@emotion/utils").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "18.0.0",
+  "version": "18.0.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,6 +39,7 @@
     "@atlaskit/media-ui": "^21.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
+    "@atlaskit/popup": "^1.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.8.0",