@atlaskit/smart-card 20.1.1 → 20.1.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 20.1.4
+
+### Patch Changes
+
+- [`8df009f4313`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8df009f4313) - fix metadata status for prefetching
+
+## 20.1.3
+
+### Patch Changes
+
+- [`7c0644e5daf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c0644e5daf) - fix on mouse hover functionality for hover cards
+
+## 20.1.2
+
+### Patch Changes
+
+- [`0fb4cccede9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fb4cccede9) - add on mouse hover to hover card
+
 ## 20.1.1
 
 ### Patch Changes

package/dist/cjs/state/hooks/usePrefetch.js

@@ -15,6 +15,8 @@ var _react = require("react");
 
 var _linkProvider = require("@atlaskit/link-provider");
 
+var _linkingCommon = require("@atlaskit/linking-common");
+
 function usePrefetch(url) {
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
       store = _useSmartLinkContext.store,
@@ -70,7 +72,12 @@ function usePrefetch(url) {
                 type: 'resolved',
                 url: url,
                 payload: response
-              });
+              }); // Put the metadata in resolved state, theres no need for a pending or errored state as
+              // we are following the same render flow as described by the comments above and below.
+
+              dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_UPDATE_METADATA_STATUS, {
+                url: url
+              }, undefined, undefined, 'resolved'));
             }
 
             _context.next = 14;

package/dist/cjs/version.json

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

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

@@ -54,6 +54,12 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeOutTimeoutId = (0, _react.useRef)();
   var fadeInTimeoutId = (0, _react.useRef)();
   var cardOpenTime = (0, _react.useRef)();
+  var mousePos = (0, _react.useRef)({
+    x: 0,
+    y: 0
+  });
+  var popupOffset = (0, _react.useRef)();
+  var parentSpan = (0, _react.useRef)(null);
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var hoverDisplay = 'card';
@@ -88,6 +94,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
         analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
       }
 
+      if (parentSpan.current) {
+        var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
+            bottom = _parentSpan$current$g.bottom,
+            left = _parentSpan$current$g.left;
+
+        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + _styled.CARD_GAP_PX];
+      }
+
       setIsOpen(true);
     }, delay);
   }, [delay, isOpen, analytics.ui]);
@@ -100,7 +114,17 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  var setMousePosition = (0, _react.useCallback)(function (event) {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   var onClick = (0, _react.useCallback)(function (e) {
     return e.stopPropagation();
@@ -110,6 +134,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: hideCard,
     placement: "bottom-start",
+    offset: popupOffset.current,
     content: function content(_ref2) {
       var update = _ref2.update;
       return (0, _core.jsx)("div", {
@@ -130,10 +155,13 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+      return (0, _core.jsx)("span", {
+        ref: parentSpan
+      }, (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
+        onMouseLeave: initHideCard,
+        onMouseMove: setMousePosition
+      }), children));
     },
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = void 0;
+exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -25,8 +25,11 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 exports.flexibleUiOptions = flexibleUiOptions;
-var CARD_WIDTH_REM = 24;
+var CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
+
 exports.CARD_WIDTH_REM = CARD_WIDTH_REM;
+var CARD_GAP_PX = 10;
+exports.CARD_GAP_PX = CARD_GAP_PX;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);

package/dist/es2019/state/hooks/usePrefetch.js

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { ACTION_UPDATE_METADATA_STATUS, cardAction } from '@atlaskit/linking-common';
 export function usePrefetch(url) {
   const {
     store,
@@ -45,7 +46,12 @@ export function usePrefetch(url) {
             type: 'resolved',
             url,
             payload: response
-          });
+          }); // Put the metadata in resolved state, theres no need for a pending or errored state as
+          // we are following the same render flow as described by the comments above and below.
+
+          dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
+            url
+          }, undefined, undefined, 'resolved'));
         }
       } catch (_err) {// Do nothing, link will be retried under the hood with exponential backoff.
         // If it does not succeed even after those retries, the normal resolve flow

package/dist/es2019/version.json

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

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

@@ -8,7 +8,7 @@ import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkA
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
-import { HoverCardContainer } from '../styled';
+import { HoverCardContainer, CARD_GAP_PX } from '../styled';
 import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 export const hoverCardClassName = 'smart-links-hover-preview';
 export const HoverCardComponent = ({
@@ -22,6 +22,12 @@ export const HoverCardComponent = ({
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
+  const mousePos = useRef({
+    x: 0,
+    y: 0
+  });
+  const popupOffset = useRef();
+  const parentSpan = useRef(null);
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const hoverDisplay = 'card';
@@ -54,6 +60,14 @@ export const HoverCardComponent = ({
         analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
       }
 
+      if (parentSpan.current) {
+        const {
+          bottom,
+          left
+        } = parentSpan.current.getBoundingClientRect();
+        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
+      }
+
       setIsOpen(true);
     }, delay);
   }, [delay, isOpen, analytics.ui]);
@@ -66,7 +80,17 @@ export const HoverCardComponent = ({
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  const setMousePosition = useCallback(event => {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx(Popup, {
@@ -74,6 +98,7 @@ export const HoverCardComponent = ({
     isOpen: isOpen,
     onClose: hideCard,
     placement: "bottom-start",
+    offset: popupOffset.current,
     content: ({
       update
     }) => jsx("div", {
@@ -92,10 +117,13 @@ export const HoverCardComponent = ({
       renderers: renderers,
       url: url
     })),
-    trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
+    trigger: triggerProps => jsx("span", {
+      ref: parentSpan
+    }, jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard
-    }), children),
+      onMouseLeave: initHideCard,
+      onMouseMove: setMousePosition
+    }), children)),
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 
   });

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

@@ -8,7 +8,9 @@ export const flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
-export const CARD_WIDTH_REM = 24;
+export const CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
+
+export const CARD_GAP_PX = 10;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';
 const separatorCss = css`

package/dist/esm/state/hooks/usePrefetch.js

@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { ACTION_UPDATE_METADATA_STATUS, cardAction } from '@atlaskit/linking-common';
 export function usePrefetch(url) {
   var _useSmartLinkContext = useSmartLinkContext(),
       store = _useSmartLinkContext.store,
@@ -57,7 +58,12 @@ export function usePrefetch(url) {
                 type: 'resolved',
                 url: url,
                 payload: response
-              });
+              }); // Put the metadata in resolved state, theres no need for a pending or errored state as
+              // we are following the same render flow as described by the comments above and below.
+
+              dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
+                url: url
+              }, undefined, undefined, 'resolved'));
             }
 
             _context.next = 14;

package/dist/esm/version.json

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

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

@@ -9,7 +9,7 @@ import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkA
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
-import { HoverCardContainer } from '../styled';
+import { HoverCardContainer, CARD_GAP_PX } from '../styled';
 import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 export var hoverCardClassName = 'smart-links-hover-preview';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
@@ -27,6 +27,12 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
   var cardOpenTime = useRef();
+  var mousePos = useRef({
+    x: 0,
+    y: 0
+  });
+  var popupOffset = useRef();
+  var parentSpan = useRef(null);
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var hoverDisplay = 'card';
@@ -61,6 +67,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
       }
 
+      if (parentSpan.current) {
+        var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
+            bottom = _parentSpan$current$g.bottom,
+            left = _parentSpan$current$g.left;
+
+        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
+      }
+
       setIsOpen(true);
     }, delay);
   }, [delay, isOpen, analytics.ui]);
@@ -73,7 +87,17 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  var setMousePosition = useCallback(function (event) {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   var onClick = useCallback(function (e) {
     return e.stopPropagation();
@@ -83,6 +107,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: hideCard,
     placement: "bottom-start",
+    offset: popupOffset.current,
     content: function content(_ref2) {
       var update = _ref2.update;
       return jsx("div", {
@@ -103,10 +128,13 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return jsx("span", _extends({}, triggerProps, {
+      return jsx("span", {
+        ref: parentSpan
+      }, jsx("span", _extends({}, triggerProps, {
         onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
+        onMouseLeave: initHideCard,
+        onMouseMove: setMousePosition
+      }), children));
     },
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 

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

@@ -12,7 +12,9 @@ export var flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
-export var CARD_WIDTH_REM = 24;
+export var CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
+
+export var CARD_GAP_PX = 10;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);

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

@@ -1,6 +1,7 @@
 import { FlexibleUiOptions } from '../FlexibleCard/types';
 export declare const flexibleUiOptions: FlexibleUiOptions;
 export declare const CARD_WIDTH_REM = 24;
+export declare const CARD_GAP_PX = 10;
 export declare const HoverCardContainer: import("@emotion/utils").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const metadataBlockCss: import("@emotion/utils").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "20.1.1",
+  "version": "20.1.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.6",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/inline-message": "^11.2.0",
+    "@atlaskit/inline-message": "^11.3.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.0.0",