@atlaskit/smart-card 26.9.7 → 26.9.9

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 26.9.9
+
+### Patch Changes
+
+- [`4e254433494`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e254433494) - [ux] Remove 'open in new tab' button in Hover Cards
+
+## 26.9.8
+
+### Patch Changes
+
+- [`4d66cb26fcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d66cb26fcb) - Bump jsdom to ^17.0.0
+- [`2a6ebbbfdf1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2a6ebbbfdf1) - [ux] Hover Preview: Hide hover preview on scrolling (wheel event)
+- Updated dependencies
+
 ## 26.9.7
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -185,6 +185,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     var hoverCardContentProps = {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
+      onWheel: initHideCard,
       cardActions: filteredActions,
       cardState: linkState,
       onActionClick: onActionClick,

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

@@ -5,12 +5,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hoverCardClassName = exports.getOpenAction = exports.getCopyAction = exports.default = void 0;
+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 _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
 var _react2 = _interopRequireWildcard(require("react"));
 var _constants = require("../../../constants");
@@ -34,28 +33,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var hoverCardClassName = 'smart-links-hover-preview';
 exports.hoverCardClassName = hoverCardClassName;
-var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
-  return {
-    name: _constants.ActionName.CustomAction,
-    icon: (0, _react.jsx)(_shortcut.default, {
-      label: "open in new tab",
-      size: "medium"
-    }),
-    iconPosition: 'before',
-    onClick: function onClick() {
-      if (onActionClick) {
-        onActionClick('open-content');
-      }
-      window.open(url, '_blank');
-      analytics.ui.hoverCardOpenLinkClickedEvent({
-        previewDisplay: 'card'
-      });
-    },
-    tooltipMessage: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.open_link_in_a_new_tab),
-    testId: 'hover-card-open-button'
-  };
-};
-exports.getOpenAction = getOpenAction;
 var getCopyAction = function getCopyAction(url) {
   return {
     name: _constants.ActionName.CustomAction,
@@ -103,6 +80,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
+    onWheel = _ref.onWheel,
     showServerActions = _ref.showServerActions;
   var useLozengeAction = (0, _linkProvider.useFeatureFlag)('useLozengeAction');
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
@@ -116,6 +94,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   var statusRef = (0, _react2.useRef)(linkStatus);
   var analyticsRef = (0, _react2.useRef)(analytics);
+  var wrapperRef = (0, _react2.useRef)(null);
   (0, _react2.useEffect)(function () {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -147,6 +126,22 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     };
   }, []);
+  (0, _react2.useEffect)(function () {
+    var wrapperRefValue = null;
+    if (wrapperRef.current && onWheel) {
+      // Detect wheel even on hover card content to close hover card
+      // Add event listener through ref because we want it to execute only once.
+      wrapperRef.current.addEventListener('wheel', onWheel, {
+        once: true
+      });
+      wrapperRefValue = wrapperRef.current;
+    }
+    return function () {
+      if (wrapperRefValue && onWheel) {
+        wrapperRefValue.removeEventListener('wheel', onWheel);
+      }
+    };
+  }, [onWheel]);
   var onClick = (0, _react2.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
     analytics.ui.cardClickedEvent({
@@ -159,8 +154,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
   }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
   var titleActions = (0, _react2.useMemo)(function () {
-    return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
-  }, [url, analytics, onActionClick]);
+    return [getCopyAction(url)];
+  }, [url]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, data)),
     subtitle = _extractMetadata.subtitle;
@@ -222,11 +217,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
   };
   var cardView = getCardView(cardState);
   return cardView ? (0, _react.jsx)("div", {
+    "data-testid": "hover-card-content",
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     className: hoverCardClassName,
-    css: _styled.HoverCardContainer
+    css: _styled.HoverCardContainer,
+    ref: wrapperRef
   }, cardView) : null;
 };
 var _default = HoverCardContent;

package/dist/es2019/version.json

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

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

@@ -160,6 +160,7 @@ export const HoverCardComponent = ({
     const hoverCardContentProps = {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
+      onWheel: initHideCard,
       cardActions: filteredActions,
       cardState: linkState,
       onActionClick,

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
@@ -20,25 +19,6 @@ import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 import { useSmartCardState } from '../../../state/store';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 export const hoverCardClassName = 'smart-links-hover-preview';
-export const getOpenAction = (url, analytics, onActionClick) => ({
-  name: ActionName.CustomAction,
-  icon: jsx(ShortcutIcon, {
-    label: "open in new tab",
-    size: "medium"
-  }),
-  iconPosition: 'before',
-  onClick: () => {
-    if (onActionClick) {
-      onActionClick('open-content');
-    }
-    window.open(url, '_blank');
-    analytics.ui.hoverCardOpenLinkClickedEvent({
-      previewDisplay: 'card'
-    });
-  },
-  tooltipMessage: jsx(FormattedMessage, messages.open_link_in_a_new_tab),
-  testId: 'hover-card-open-button'
-});
 export const getCopyAction = url => ({
   name: ActionName.CustomAction,
   icon: jsx(CopyIcon, {
@@ -61,6 +41,7 @@ const HoverCardContent = ({
   url,
   onMouseEnter,
   onMouseLeave,
+  onWheel,
   showServerActions
 }) => {
   var _linkState$status, _cardState$details;
@@ -75,6 +56,7 @@ const HoverCardContent = ({
   const linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   const statusRef = useRef(linkStatus);
   const analyticsRef = useRef(analytics);
+  const wrapperRef = useRef(null);
   useEffect(() => {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -106,6 +88,22 @@ const HoverCardContent = ({
       });
     };
   }, []);
+  useEffect(() => {
+    let wrapperRefValue = null;
+    if (wrapperRef.current && onWheel) {
+      // Detect wheel even on hover card content to close hover card
+      // Add event listener through ref because we want it to execute only once.
+      wrapperRef.current.addEventListener('wheel', onWheel, {
+        once: true
+      });
+      wrapperRefValue = wrapperRef.current;
+    }
+    return () => {
+      if (wrapperRefValue && onWheel) {
+        wrapperRefValue.removeEventListener('wheel', onWheel);
+      }
+    };
+  }, [onWheel]);
   const onClick = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
@@ -117,7 +115,7 @@ const HoverCardContent = ({
     });
     fireLinkClickedEvent(createAnalyticsEvent)(event);
   }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
-  const titleActions = useMemo(() => [getCopyAction(url), getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
+  const titleActions = useMemo(() => [getCopyAction(url)], [url]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const {
     subtitle
@@ -178,11 +176,13 @@ const HoverCardContent = ({
   };
   const cardView = getCardView(cardState);
   return cardView ? jsx("div", {
+    "data-testid": "hover-card-content",
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     className: hoverCardClassName,
-    css: HoverCardContainer
+    css: HoverCardContainer,
+    ref: wrapperRef
   }, cardView) : null;
 };
 export default HoverCardContent;

package/dist/esm/version.json

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

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

@@ -174,6 +174,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     var hoverCardContentProps = {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
+      onWheel: initHideCard,
       cardActions: filteredActions,
       cardState: linkState,
       onActionClick: onActionClick,

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

@@ -3,7 +3,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
@@ -22,27 +21,6 @@ import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 import { useSmartCardState } from '../../../state/store';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 export var hoverCardClassName = 'smart-links-hover-preview';
-export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
-  return {
-    name: ActionName.CustomAction,
-    icon: jsx(ShortcutIcon, {
-      label: "open in new tab",
-      size: "medium"
-    }),
-    iconPosition: 'before',
-    onClick: function onClick() {
-      if (onActionClick) {
-        onActionClick('open-content');
-      }
-      window.open(url, '_blank');
-      analytics.ui.hoverCardOpenLinkClickedEvent({
-        previewDisplay: 'card'
-      });
-    },
-    tooltipMessage: jsx(FormattedMessage, messages.open_link_in_a_new_tab),
-    testId: 'hover-card-open-button'
-  };
-};
 export var getCopyAction = function getCopyAction(url) {
   return {
     name: ActionName.CustomAction,
@@ -89,6 +67,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
+    onWheel = _ref.onWheel,
     showServerActions = _ref.showServerActions;
   var useLozengeAction = useFeatureFlag('useLozengeAction');
   var _useAnalyticsEvents = useAnalyticsEvents(),
@@ -102,6 +81,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   var statusRef = useRef(linkStatus);
   var analyticsRef = useRef(analytics);
+  var wrapperRef = useRef(null);
   useEffect(function () {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -133,6 +113,22 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     };
   }, []);
+  useEffect(function () {
+    var wrapperRefValue = null;
+    if (wrapperRef.current && onWheel) {
+      // Detect wheel even on hover card content to close hover card
+      // Add event listener through ref because we want it to execute only once.
+      wrapperRef.current.addEventListener('wheel', onWheel, {
+        once: true
+      });
+      wrapperRefValue = wrapperRef.current;
+    }
+    return function () {
+      if (wrapperRefValue && onWheel) {
+        wrapperRefValue.removeEventListener('wheel', onWheel);
+      }
+    };
+  }, [onWheel]);
   var onClick = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
@@ -145,8 +141,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     fireLinkClickedEvent(createAnalyticsEvent)(event);
   }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
   var titleActions = useMemo(function () {
-    return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
-  }, [url, analytics, onActionClick]);
+    return [getCopyAction(url)];
+  }, [url]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var _extractMetadata = extractMetadata(getSimulatedMetadata(extensionKey, data)),
     subtitle = _extractMetadata.subtitle;
@@ -208,11 +204,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
   };
   var cardView = getCardView(cardState);
   return cardView ? jsx("div", {
+    "data-testid": "hover-card-content",
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     className: hoverCardClassName,
-    css: HoverCardContainer
+    css: HoverCardContainer,
+    ref: wrapperRef
   }, cardView) : null;
 };
 export default HoverCardContent;

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { AnalyticsFacade } from '../../../state/analytics';
 import { ActionItem } from '../../FlexibleCard/components/blocks/types';
 import { HoverCardContentProps } from '../types';
 export declare const hoverCardClassName = "smart-links-hover-preview";
-export declare const getOpenAction: (url: string, analytics: AnalyticsFacade, onActionClick?: ((actionId: string) => void) | undefined) => ActionItem;
 export declare const getCopyAction: (url: string) => ActionItem;
 declare const HoverCardContent: React.FC<HoverCardContentProps>;
 export default HoverCardContent;

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

@@ -5,7 +5,7 @@ import { LinkAction } from '../../state/hooks-external/useSmartLinkActions';
 import { CardState } from '@atlaskit/linking-common';
 import { AnalyticsHandler } from '../../utils/types';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
-import { ReactElement, MouseEventHandler } from 'react';
+import { MouseEventHandler, ReactElement } from 'react';
 import { JsonLd } from 'json-ld-types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     /**
@@ -80,6 +80,7 @@ export type HoverCardContentProps = {
     url: string;
     onMouseEnter?: MouseEventHandler;
     onMouseLeave?: MouseEventHandler;
+    onWheel?: EventListenerOrEventListenerObject;
     showServerActions?: boolean;
 };
 export type SnippetOrPreviewProps = {

package/dist/types-ts4.5/view/HoverCard/components/HoverCardContent.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import { AnalyticsFacade } from '../../../state/analytics';
 import { ActionItem } from '../../FlexibleCard/components/blocks/types';
 import { HoverCardContentProps } from '../types';
 export declare const hoverCardClassName = "smart-links-hover-preview";
-export declare const getOpenAction: (url: string, analytics: AnalyticsFacade, onActionClick?: ((actionId: string) => void) | undefined) => ActionItem;
 export declare const getCopyAction: (url: string) => ActionItem;
 declare const HoverCardContent: React.FC<HoverCardContentProps>;
 export default HoverCardContent;

package/dist/types-ts4.5/view/HoverCard/types.d.ts

@@ -5,7 +5,7 @@ import { LinkAction } from '../../state/hooks-external/useSmartLinkActions';
 import { CardState } from '@atlaskit/linking-common';
 import { AnalyticsHandler } from '../../utils/types';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
-import { ReactElement, MouseEventHandler } from 'react';
+import { MouseEventHandler, ReactElement } from 'react';
 import { JsonLd } from 'json-ld-types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     /**
@@ -80,6 +80,7 @@ export type HoverCardContentProps = {
     url: string;
     onMouseEnter?: MouseEventHandler;
     onMouseLeave?: MouseEventHandler;
+    onWheel?: EventListenerOrEventListenerObject;
     showServerActions?: boolean;
 };
 export type SnippetOrPreviewProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.9.7",
+  "version": "26.9.9",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/popup": "^1.8.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.12.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -95,7 +95,7 @@
     "fetch-mock": "^8.0.0",
     "jest-emotion": "^10.0.32",
     "jest-extended": "^0.11.2",
-    "jsdom": "^16.2.2",
+    "jsdom": "^17.0.0",
     "lorem-ipsum": "^1.0.6",
     "react": "^16.8.0",
     "react-ace": "^6.1.0",