@atlaskit/smart-card 20.0.0 → 20.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 20.0.1
+
+### Patch Changes
+
+- [`3e4f8e1490a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e4f8e1490a) - Hover Preview: Fix Hover Preview shows on top of Preview modal
+
 ## 20.0.0
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/HoverCard/components/hover-card-content.js

@@ -45,7 +45,7 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 
-var getOpenAction = function getOpenAction(url, analytics) {
+var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: _constants.ActionName.CustomAction,
     icon: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
@@ -54,6 +54,10 @@ var getOpenAction = function getOpenAction(url, analytics) {
     }),
     iconPosition: 'before',
     onClick: function onClick() {
+      if (onActionClick) {
+        onActionClick('open-content');
+      }
+
       window.open(url, '_blank');
       analytics.ui.hoverCardOpenLinkClickedEvent('card');
     },
@@ -61,12 +65,16 @@ var getOpenAction = function getOpenAction(url, analytics) {
   };
 };
 
-var toFooterActions = function toFooterActions(cardActions) {
+var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   return cardActions.map(function (action) {
     return {
       content: action.text,
       name: _constants.ActionName.CustomAction,
       onClick: function onClick() {
+        if (onActionClick) {
+          onActionClick(action.id);
+        }
+
         return action.invoke();
       },
       testId: action.id
@@ -81,6 +89,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       _ref$cardActions = _ref.cardActions,
       cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
       cardState = _ref.cardState,
+      onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
@@ -97,11 +106,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
     analytics.ui.cardClickedEvent(undefined, _utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = (0, _react.useMemo)(function () {
-    return [getOpenAction(url, analytics)];
-  }, [url, analytics]);
+    return [getOpenAction(url, analytics, onActionClick)];
+  }, [url, analytics, onActionClick]);
   var footerActions = (0, _react.useMemo)(function () {
-    return toFooterActions(cardActions);
-  }, [cardActions]);
+    return toFooterActions(cardActions, onActionClick);
+  }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 

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

@@ -63,21 +63,24 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var analytics = (0, _analytics2.useSmartLinkAnalytics)(url, analyticsHandler, id);
+  var hideCard = (0, _react.useCallback)(function () {
+    //Check its previously open to avoid firing events when moving between the child and hover card components
+    if (isOpen === true && cardOpenTime.current) {
+      var hoverTime = Date.now() - cardOpenTime.current;
+      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+    }
+
+    setIsOpen(false);
+  }, [analytics.ui, isOpen]);
   var initHideCard = (0, _react.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(function () {
-      //Check its previously open to avoid firing events when moving between the child and hover card components
-      if (isOpen === true && cardOpenTime.current) {
-        var hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
-      }
-
-      setIsOpen(false);
+      return hideCard();
     }, delay);
-  }, [delay, isOpen, analytics.ui]);
+  }, [hideCard]);
   var initShowCard = (0, _react.useCallback)(function () {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -98,13 +101,15 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     appearance: _utils.HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler: analyticsHandler
   });
-  var onClose = (0, _react.useCallback)(function () {
-    return setIsOpen(false);
-  }, []);
+  var onActionClick = (0, _react.useCallback)(function (actionId) {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]);
   return (0, _core.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen,
-    onClose: onClose,
+    onClose: hideCard,
     placement: "bottom-start",
     content: function content(_ref2) {
       var update = _ref2.update;
@@ -116,6 +121,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
         analytics: analytics,
         cardActions: linkActions,
         cardState: linkState,
+        onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
         url: url

package/dist/cjs/view/common/Modal.js

@@ -72,7 +72,8 @@ var Modal = function Modal(_ref) {
   var onClose = _ref.onClose,
       onOpen = _ref.onOpen,
       src = _ref.src,
-      testId = _ref.testId,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
       showModal = _ref.showModal,
       providerName = _ref.providerName,
       metadata = _ref.metadata,

package/dist/es2019/version.json

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

package/dist/es2019/view/HoverCard/components/hover-card-content.js

@@ -18,7 +18,7 @@ const flexibleUiOptions = {
   hidePadding: true
 };
 
-const getOpenAction = (url, analytics) => ({
+const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
     label: "open in new tab",
@@ -26,16 +26,26 @@ const getOpenAction = (url, analytics) => ({
   }),
   iconPosition: 'before',
   onClick: () => {
+    if (onActionClick) {
+      onActionClick('open-content');
+    }
+
     window.open(url, '_blank');
     analytics.ui.hoverCardOpenLinkClickedEvent('card');
   },
   testId: 'hover-card-open-button'
 });
 
-const toFooterActions = cardActions => cardActions.map(action => ({
+const toFooterActions = (cardActions, onActionClick) => cardActions.map(action => ({
   content: action.text,
   name: ActionName.CustomAction,
-  onClick: () => action.invoke(),
+  onClick: () => {
+    if (onActionClick) {
+      onActionClick(action.id);
+    }
+
+    return action.invoke();
+  },
   testId: action.id
 }));
 
@@ -43,6 +53,7 @@ const HoverCardContent = ({
   analytics,
   cardActions = [],
   cardState,
+  onActionClick,
   onResolve,
   renderers,
   url
@@ -59,8 +70,8 @@ const HoverCardContent = ({
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
-  const titleActions = useMemo(() => [getOpenAction(url, analytics)], [url, analytics]);
-  const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]);
+  const titleActions = useMemo(() => [getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
+  const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 

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

@@ -30,21 +30,22 @@ export const HoverCardComponent = ({
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
+  const hideCard = useCallback(() => {
+    //Check its previously open to avoid firing events when moving between the child and hover card components
+    if (isOpen === true && cardOpenTime.current) {
+      const hoverTime = Date.now() - cardOpenTime.current;
+      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+    }
+
+    setIsOpen(false);
+  }, [analytics.ui, isOpen]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
-    fadeOutTimeoutId.current = setTimeout(() => {
-      //Check its previously open to avoid firing events when moving between the child and hover card components
-      if (isOpen === true && cardOpenTime.current) {
-        const hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
-      }
-
-      setIsOpen(false);
-    }, delay);
-  }, [delay, isOpen, analytics.ui]);
+    fadeOutTimeoutId.current = setTimeout(() => hideCard(), delay);
+  }, [hideCard]);
   const initShowCard = useCallback(() => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -65,11 +66,15 @@ export const HoverCardComponent = ({
     appearance: HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler
   });
-  const onClose = useCallback(() => setIsOpen(false), []);
+  const onActionClick = useCallback(actionId => {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]);
   return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen,
-    onClose: onClose,
+    onClose: hideCard,
     placement: "bottom-start",
     content: ({
       update
@@ -81,6 +86,7 @@ export const HoverCardComponent = ({
       analytics: analytics,
       cardActions: linkActions,
       cardState: linkState,
+      onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
       url: url

package/dist/es2019/view/common/Modal.js

@@ -40,7 +40,7 @@ const Modal = ({
   onClose,
   onOpen,
   src,
-  testId,
+  testId = 'smart-links-preview-modal',
   showModal,
   providerName,
   metadata,

package/dist/esm/version.json

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

package/dist/esm/view/HoverCard/components/hover-card-content.js

@@ -18,7 +18,7 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 
-var getOpenAction = function getOpenAction(url, analytics) {
+var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
     icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -27,6 +27,10 @@ var getOpenAction = function getOpenAction(url, analytics) {
     }),
     iconPosition: 'before',
     onClick: function onClick() {
+      if (onActionClick) {
+        onActionClick('open-content');
+      }
+
       window.open(url, '_blank');
       analytics.ui.hoverCardOpenLinkClickedEvent('card');
     },
@@ -34,12 +38,16 @@ var getOpenAction = function getOpenAction(url, analytics) {
   };
 };
 
-var toFooterActions = function toFooterActions(cardActions) {
+var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   return cardActions.map(function (action) {
     return {
       content: action.text,
       name: ActionName.CustomAction,
       onClick: function onClick() {
+        if (onActionClick) {
+          onActionClick(action.id);
+        }
+
         return action.invoke();
       },
       testId: action.id
@@ -54,6 +62,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       _ref$cardActions = _ref.cardActions,
       cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
       cardState = _ref.cardState,
+      onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
@@ -70,11 +79,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
     analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = useMemo(function () {
-    return [getOpenAction(url, analytics)];
-  }, [url, analytics]);
+    return [getOpenAction(url, analytics, onActionClick)];
+  }, [url, analytics, onActionClick]);
   var footerActions = useMemo(function () {
-    return toFooterActions(cardActions);
-  }, [cardActions]);
+    return toFooterActions(cardActions, onActionClick);
+  }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 

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

@@ -35,21 +35,24 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
+  var hideCard = useCallback(function () {
+    //Check its previously open to avoid firing events when moving between the child and hover card components
+    if (isOpen === true && cardOpenTime.current) {
+      var hoverTime = Date.now() - cardOpenTime.current;
+      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+    }
+
+    setIsOpen(false);
+  }, [analytics.ui, isOpen]);
   var initHideCard = useCallback(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(function () {
-      //Check its previously open to avoid firing events when moving between the child and hover card components
-      if (isOpen === true && cardOpenTime.current) {
-        var hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
-      }
-
-      setIsOpen(false);
+      return hideCard();
     }, delay);
-  }, [delay, isOpen, analytics.ui]);
+  }, [hideCard]);
   var initShowCard = useCallback(function () {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -70,13 +73,15 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     appearance: HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler: analyticsHandler
   });
-  var onClose = useCallback(function () {
-    return setIsOpen(false);
-  }, []);
+  var onActionClick = useCallback(function (actionId) {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]);
   return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen,
-    onClose: onClose,
+    onClose: hideCard,
     placement: "bottom-start",
     content: function content(_ref2) {
       var update = _ref2.update;
@@ -88,6 +93,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         analytics: analytics,
         cardActions: linkActions,
         cardState: linkState,
+        onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
         url: url

package/dist/esm/view/common/Modal.js

@@ -66,7 +66,8 @@ var Modal = function Modal(_ref) {
   var onClose = _ref.onClose,
       onOpen = _ref.onOpen,
       src = _ref.src,
-      testId = _ref.testId,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
       showModal = _ref.showModal,
       providerName = _ref.providerName,
       metadata = _ref.metadata,

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

@@ -20,6 +20,7 @@ export declare type HoverCardContentProps = {
     cardActions?: LinkAction[];
     cardState: CardState;
     renderers?: CardProviderRenderers;
+    onActionClick: (actionId: string) => void;
     onResolve: () => void;
     url: string;
 };

package/package.json

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