@atlaskit/smart-card 26.42.11 → 26.43.0

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js

@@ -8,12 +8,14 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _styled = require("../styled");
 var _featureDiscovery = _interopRequireDefault(require("../feature-discovery"));
 var _excluded = ["appearance", "isOpen", "showFeatureDiscovery", "testId", "text", "triggerRef"];
+/** @jsx jsx */
 var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
   var appearance = _ref.appearance,
     isOpen = _ref.isOpen,
@@ -22,28 +24,28 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     text = _ref.text,
     triggerRef = _ref.triggerRef,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isBold = _useState2[0],
     setIsBold = _useState2[1];
-  var onMouseEnter = (0, _react.useCallback)(function () {
+  var onMouseEnter = (0, _react2.useCallback)(function () {
     return setIsBold(true);
   }, []);
-  var onMouseLeave = (0, _react.useCallback)(function () {
+  var onMouseLeave = (0, _react2.useCallback)(function () {
     return setIsBold(false);
   }, []);
-  var lozenge = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/React.createElement(_lozenge.default, {
+  var lozenge = (0, _react2.useMemo)(function () {
+    return (0, _react.jsx)(_lozenge.default, {
       appearance: appearance,
       isBold: isBold
-    }, /*#__PURE__*/React.createElement("span", {
+    }, (0, _react.jsx)("span", {
       css: _styled.triggerLozengeStyles
-    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(_chevronDown.default, {
+    }, (0, _react.jsx)("span", null, text), (0, _react.jsx)(_chevronDown.default, {
       label: "options",
       size: "medium"
     })));
   }, [appearance, isBold, text]);
-  return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
+  return (0, _react.jsx)("button", (0, _extends2.default)({
     type: "button"
   }, props, {
     css: _styled.triggerButtonStyles,
@@ -52,7 +54,7 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     ref: triggerRef
-  }), showFeatureDiscovery ? /*#__PURE__*/React.createElement(_featureDiscovery.default, {
+  }), showFeatureDiscovery ? (0, _react.jsx)(_featureDiscovery.default, {
     appearance: appearance,
     testId: testId
   }, lozenge) : lozenge);

package/dist/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 var _templateObject;
+/** @jsx jsx */
 /**
  * Media: Image
  * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
@@ -40,12 +41,12 @@ var Media = function Media(_ref) {
   if (!type || !url) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
     "data-smart-element-media": type,
     "data-testid": testId
-  }, /*#__PURE__*/_react.default.createElement(_imageIcon.default, {
+  }, (0, _react2.jsx)(_imageIcon.default, {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,

package/dist/cjs/view/FlexibleCard/components/elements/preview/index.js

@@ -9,10 +9,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _constants = require("../../../../../constants");
 var _media = _interopRequireDefault(require("../media"));
 var _excluded = ["overrideUrl"];
+/** @jsx jsx */
 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; }
 var Preview = function Preview(props) {
@@ -27,6 +29,6 @@ var Preview = function Preview(props) {
   if (!data) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_media.default, (0, _extends2.default)({}, rest, data));
+  return (0, _react2.jsx)(_media.default, (0, _extends2.default)({}, rest, data));
 };
 var _default = exports.default = Preview;

package/dist/cjs/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -15,6 +15,7 @@ var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _text = _interopRequireDefault(require("../text"));
 var _excluded = ["content", "maxLines", "overrideCss"];
 var _templateObject;
+/** @jsx jsx */
 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; }
 var SNIPPET_DEFAULT_MAX_LINES = 3;
@@ -29,7 +30,7 @@ var SnippetElement = function SnippetElement() {
     overrideCss = _ref.overrideCss,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var context = (0, _react2.useContext)(_flexibleUiContext.FlexibleUiContext);
-  return /*#__PURE__*/_react2.default.createElement(_text.default, (0, _extends2.default)({
+  return (0, _react.jsx)(_text.default, (0, _extends2.default)({
     content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
     maxLines: maxLines,
     overrideCss: getSnippetStyles(overrideCss)

package/dist/cjs/view/FlexibleCard/components/elements/text/index.js

@@ -11,6 +11,7 @@ var _react2 = require("@emotion/react");
 var _utils = require("../../utils");
 var _token = require("../../../../../utils/token");
 var _templateObject;
+/** @jsx jsx */
 var getStyles = function getStyles(maxLines) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(maxLines));
 };
@@ -33,7 +34,7 @@ var Text = function Text(_ref) {
   if (!message && !content) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.jsx)("span", {
     css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element": name,

package/dist/cjs/view/HoverCard/components/CustomPopupContainer.js

@@ -9,11 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("../styled");
+var _react2 = require("@emotion/react");
 var _excluded = ["children"];
+/** @jsx jsx */
 var CustomPopupContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: _styled.popupContainerStyles
   }, props, {
     ref: ref

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -9,7 +9,8 @@ exports.HoverCardComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _useSmartLinkActions = require("../../../state/hooks-external/useSmartLinkActions");
 var _renderers = require("../../../state/renderers");
 var _store = require("../../../state/store");
@@ -23,6 +24,8 @@ var _analytics = require("../../../state/analytics");
 var _linkProvider = require("@atlaskit/link-provider");
 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 HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 var FADE_IN_DELAY = 500;
 var FADE_OUT_DELAY = 300;
@@ -47,23 +50,23 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
     zIndex = _ref$zIndex === void 0 ? _styled.HOVER_CARD_Z_INDEX : _ref$zIndex,
     _ref$noFadeDelay = _ref.noFadeDelay,
     noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay;
-  var _React$useState = _react.default.useState(false),
+  var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
-  var fadeOutTimeoutId = (0, _react.useRef)();
-  var fadeInTimeoutId = (0, _react.useRef)();
-  var resolveTimeOutId = (0, _react.useRef)();
-  var mousePos = (0, _react.useRef)();
-  var popupOffset = (0, _react.useRef)();
-  var parentSpan = (0, _react.useRef)(null);
+  var fadeOutTimeoutId = (0, _react2.useRef)();
+  var fadeInTimeoutId = (0, _react2.useRef)();
+  var resolveTimeOutId = (0, _react2.useRef)();
+  var mousePos = (0, _react2.useRef)();
+  var popupOffset = (0, _react2.useRef)();
+  var parentSpan = (0, _react2.useRef)(null);
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var analytics = (0, _analytics.useSmartLinkAnalytics)(url, undefined, id);
   var _useSmartCardActions = (0, _actions.useSmartCardActions)(id, url, analytics),
     loadMetadata = _useSmartCardActions.loadMetadata;
   var enableHoverCardResolutionTracking = (0, _linkProvider.useFeatureFlag)('enableHoverCardResolutionTracking');
-  var setMousePosition = (0, _react.useCallback)(function (event) {
+  var setMousePosition = (0, _react2.useCallback)(function (event) {
     if (isOpen && canOpen) {
       return;
     }
@@ -80,10 +83,10 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       popupOffset.current = [mousePos.current.x - left + _styled.CARD_GAP_PX, mousePos.current.y - bottom + _styled.CARD_GAP_PX];
     }
   }, [canOpen, isOpen]);
-  var hideCard = (0, _react.useCallback)(function () {
+  var hideCard = (0, _react2.useCallback)(function () {
     setIsOpen(false);
   }, []);
-  var initHideCard = (0, _react.useCallback)(function () {
+  var initHideCard = (0, _react2.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
       // because fadeInTimeoutId.current is set by mouseOver which triggers multiple times in a hover,
@@ -107,7 +110,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
 
   // clearing out the timeouts in order to avoid memory leaks
   // in case the component unmounts before they execute
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     return function () {
       if (fadeOutTimeoutId.current) {
         clearTimeout(fadeOutTimeoutId.current);
@@ -129,7 +132,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
 
   // we want to initiate resolve a bit earlier for standalone cards
   // to minimize the loading state
-  var initResolve = (0, _react.useCallback)(function () {
+  var initResolve = (0, _react2.useCallback)(function () {
     // this check covers both non-SSR (status) & SSR case (metadataStatus)
     var isLinkUnresolved = linkState.status === 'pending' || !linkState.metadataStatus;
     if (!resolveTimeOutId.current && isLinkUnresolved) {
@@ -141,7 +144,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       }, RESOLVE_DELAY);
     }
   }, [analytics.track, enableHoverCardResolutionTracking, linkState.metadataStatus, linkState.status, loadMetadata]);
-  var initShowCard = (0, _react.useCallback)(function (event) {
+  var initShowCard = (0, _react2.useCallback)(function (event) {
     // clearing out fadeOutTimeoutId in case it's already counting down to hide the card
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -169,19 +172,19 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
     analyticsHandler: analyticsHandler,
     origin: HOVER_CARD_SOURCE
   });
-  var filteredActions = (0, _react.useMemo)(function () {
+  var filteredActions = (0, _react2.useMemo)(function () {
     return hidePreviewButton ? linkActions.filter(function (action) {
       return action.id !== 'preview-content';
     }) : linkActions;
   }, [hidePreviewButton, linkActions]);
-  var onActionClick = (0, _react.useCallback)(function (actionId) {
+  var onActionClick = (0, _react2.useCallback)(function (actionId) {
     if (actionId === 'preview-content') {
       hideCard();
     }
   }, [hideCard]);
 
   // Stop hover preview content to propagate event to parent.
-  var handleChildClick = (0, _react.useCallback)(function (e, closeOnClick) {
+  var handleChildClick = (0, _react2.useCallback)(function (e, closeOnClick) {
     if (!allowEventPropagation) {
       e.stopPropagation();
     }
@@ -189,13 +192,13 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       hideCard();
     }
   }, [allowEventPropagation, hideCard]);
-  var onContextMenuClick = (0, _react.useCallback)(function (e) {
+  var onContextMenuClick = (0, _react2.useCallback)(function (e) {
     return handleChildClick(e, true);
   }, [handleChildClick]);
-  var onChildClick = (0, _react.useCallback)(function (e) {
+  var onChildClick = (0, _react2.useCallback)(function (e) {
     return handleChildClick(e, closeOnChildClick);
   }, [closeOnChildClick, handleChildClick]);
-  var content = (0, _react.useCallback)(function (_ref2) {
+  var content = (0, _react2.useCallback)(function (_ref2) {
     var update = _ref2.update;
     var hoverCardContentProps = {
       onMouseEnter: initShowCard,
@@ -209,17 +212,17 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       url: url,
       id: id
     };
-    return /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
+    return (0, _react.jsx)(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
       url: url,
       display: _constants.CardDisplay.HoverCardPreview,
       id: id,
       source: HOVER_CARD_SOURCE
-    }, /*#__PURE__*/_react.default.createElement(_HoverCardContent.default, hoverCardContentProps));
+    }, (0, _react.jsx)(_HoverCardContent.default, hoverCardContentProps));
   }, [initShowCard, initHideCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
-  var trigger = (0, _react.useCallback)(function (triggerProps) {
-    return /*#__PURE__*/_react.default.createElement("span", {
+  var trigger = (0, _react2.useCallback)(function (triggerProps) {
+    return (0, _react.jsx)("span", {
       ref: parentSpan
-    }, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, triggerProps, {
+    }, (0, _react.jsx)("span", (0, _extends2.default)({}, triggerProps, {
       onMouseOver: initShowCard,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
@@ -228,7 +231,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       "data-testid": "hover-card-trigger-wrapper"
     }), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return /*#__PURE__*/_react.default.createElement(_popup.default, {
+  return (0, _react.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -8,9 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.hoverCardClassName = exports.getCopyAction = exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 var _constants = require("../../../constants");
 var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
 var _analytics2 = require("../../../state/analytics");
@@ -29,11 +30,13 @@ var _forbidden = _interopRequireDefault(require("./views/forbidden"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 hoverCardClassName = exports.hoverCardClassName = 'smart-links-hover-preview';
 var getCopyAction = exports.getCopyAction = function getCopyAction(url) {
   return {
     name: _constants.ActionName.CustomAction,
-    icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
+    icon: (0, _react.jsx)(_copy.default, {
       label: "copy url",
       size: "medium"
     }),
@@ -58,7 +61,7 @@ var getCopyAction = exports.getCopyAction = function getCopyAction(url) {
       }
       return onClick;
     }(),
-    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.copy_url_to_clipboard),
+    tooltipMessage: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.copy_url_to_clipboard),
     testId: 'hover-card-copy-button'
   };
 };
@@ -81,15 +84,15 @@ var HoverCardContent = function HoverCardContent(_ref) {
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var defaultAnalytics = (0, _analytics2.useSmartLinkAnalytics)(url, undefined, id);
   var analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
-  var extensionKey = (0, _react.useMemo)(function () {
+  var extensionKey = (0, _react2.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
   var linkState = (0, _store.useSmartCardState)(url);
   var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   var services = (0, _helpers.getServices)(linkState.details);
-  var statusRef = (0, _react.useRef)(linkStatus);
-  var analyticsRef = (0, _react.useRef)(analytics);
-  (0, _react.useEffect)(function () {
+  var statusRef = (0, _react2.useRef)(linkStatus);
+  var analyticsRef = (0, _react2.useRef)(analytics);
+  (0, _react2.useEffect)(function () {
     /**
      * Must access current analytics object value via ref because its not stable
      * and it can trigger useEffect to re-run below
@@ -101,7 +104,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       statusRef.current = linkStatus;
     }
   }, [analytics, linkStatus]);
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     var previewDisplay = 'card';
     var previewInvokeMethod = 'mouse_hover';
     var cardOpenTime = Date.now();
@@ -120,7 +123,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     };
   }, []);
-  var onClick = (0, _react.useCallback)(function (event) {
+  var onClick = (0, _react2.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
     analytics.ui.cardClickedEvent({
       id: id,
@@ -131,7 +134,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     });
     (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
   }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
-  var titleActions = (0, _react.useMemo)(function () {
+  var titleActions = (0, _react2.useMemo)(function () {
     return [getCopyAction(url)];
   }, [url]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
@@ -160,18 +163,18 @@ var HoverCardContent = function HoverCardContent(_ref) {
     children: {},
     analytics: analytics
   };
-  var onClickStopPropagation = (0, _react.useCallback)(function (e) {
+  var onClickStopPropagation = (0, _react2.useCallback)(function (e) {
     return e.stopPropagation();
   }, []);
   var getCardView = function getCardView(cardState) {
     if (cardState.metadataStatus === 'pending') {
-      return /*#__PURE__*/_react.default.createElement(_resolving.default, {
+      return (0, _react.jsx)(_resolving.default, {
         flexibleCardProps: flexibleCardProps,
         titleBlockProps: titleBlockProps
       });
     }
     if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
-      return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
+      return (0, _react.jsx)(_unauthorised.default, {
         analytics: analytics,
         extensionKey: extensionKey,
         id: id,
@@ -181,13 +184,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
     }
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.cross-join')) {
       if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
-        return /*#__PURE__*/_react.default.createElement(_forbidden.default, {
+        return (0, _react.jsx)(_forbidden.default, {
           flexibleCardProps: flexibleCardProps
         });
       }
     }
     if (cardState.status === 'resolved') {
-      return /*#__PURE__*/_react.default.createElement(_resolved.default, {
+      return (0, _react.jsx)(_resolved.default, {
         id: id,
         url: url,
         extensionKey: extensionKey,
@@ -202,7 +205,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return null;
   };
   var cardView = getCardView(cardState);
-  return cardView ? /*#__PURE__*/_react.default.createElement("div", {
+  return cardView ? (0, _react.jsx)("div", {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,

package/dist/cjs/view/HoverCard/components/views/resolving/index.js

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _loadingSkeleton = _interopRequireDefault(require("../../../../FlexibleCard/components/common/loading-skeleton"));
 var _styled = require("../../../styled");
 var _styled2 = require("./styled");
 var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
 var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _icon = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon"));
+/** @jsx jsx */
+
 var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   var titleBlockProps = _ref.titleBlockProps;
   var testId = 'hover-card-loading-view';
@@ -20,35 +23,35 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
   var size = titleBlockProps.size,
     actions = titleBlockProps.actions;
-  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (0, _react.jsx)(_actionGroup.default, {
     items: actions,
     visibleButtonsNum: 2
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: _styled2.loadingViewContainer,
     "data-testid": testId
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react.jsx)("div", {
     css: _styled2.skeletonContainer
-  }, /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
+  }, (0, _react.jsx)(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
     overrideCss: _styled2.titleBlockStyles,
     testId: "".concat(testId, "-title-block")
-  }), /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }), (0, _react.jsx)(_icon.default, {
     render: function render() {
-      return /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, null);
+      return (0, _react.jsx)(_loadingSkeleton.default, null);
     },
     size: size
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), (0, _react.jsx)("span", {
     css: (0, _styled2.getTitleStyles)(lineHeightRem),
     "data-testid": "".concat(testId, "-title")
-  }, /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, {
+  }, (0, _react.jsx)(_loadingSkeleton.default, {
     height: lineHeightRem
-  })), actionGroup), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, {
+  })), actionGroup), (0, _react.jsx)(_loadingSkeleton.default, {
     width: skeletonWidth,
     height: lineHeightRem
-  }), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, {
+  }), (0, _react.jsx)(_loadingSkeleton.default, {
     width: skeletonWidth,
     height: lineHeightRem * 3
-  }), /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, {
+  }), (0, _react.jsx)(_loadingSkeleton.default, {
     width: skeletonWidth,
     height: lineHeightRem
   })));

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

@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StandaloneHoverCard = exports.HoverCard = void 0;
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _react = require("react");
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _reactErrorBoundary = require("react-error-boundary");
 var _analytics = require("../../state/analytics");
 var _HoverCardComponent = require("./components/HoverCardComponent");
 var _constants = require("../../constants");
+/** @jsx jsx */
+
 var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   var url = props.url,
     id = props.id,
     children = props.children;
   var analytics = (0, _analytics.useSmartLinkAnalytics)(url, undefined, id);
-  var onError = (0, _react.useCallback)(function (error, info) {
+  var onError = (0, _react2.useCallback)(function (error, info) {
     analytics.ui.renderFailedEvent({
       display: _constants.CardDisplay.HoverCardPreview,
       id: id,
@@ -23,10 +26,10 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
       errorInfo: info
     });
   }, [analytics.ui, id]);
-  return /*#__PURE__*/React.createElement(_reactErrorBoundary.ErrorBoundary, {
+  return (0, _react.jsx)(_reactErrorBoundary.ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, /*#__PURE__*/React.createElement(_HoverCardComponent.HoverCardComponent, props, children));
+  }, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, props, children));
 };
 var HoverCardWithoutAnalyticsContext = (0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary);
 
@@ -38,12 +41,12 @@ var HoverCardWithoutAnalyticsContext = (0, _analyticsNext.withAnalyticsEvents)()
  * use to configure hover preview behaviour.
  */
 var HoverCard = exports.HoverCard = function HoverCard(props) {
-  return /*#__PURE__*/React.createElement(HoverCardWithoutAnalyticsContext, props);
+  return (0, _react.jsx)(HoverCardWithoutAnalyticsContext, props);
 };
 
 /**
  * A standalone hover preview component
  */
 var StandaloneHoverCard = exports.StandaloneHoverCard = function StandaloneHoverCard(props) {
-  return /*#__PURE__*/React.createElement(HoverCard, props);
+  return (0, _react.jsx)(HoverCard, props);
 };

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

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

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

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

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

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