@atlaskit/smart-card 26.9.7 → 26.9.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/smart-card
 
+## 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.8",
 	"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

@@ -103,6 +103,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 +117,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 +149,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({
@@ -222,11 +240,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.8",
 	"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

@@ -61,6 +61,7 @@ const HoverCardContent = ({
   url,
   onMouseEnter,
   onMouseLeave,
+  onWheel,
   showServerActions
 }) => {
   var _linkState$status, _cardState$details;
@@ -75,6 +76,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 +108,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({
@@ -178,11 +196,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.8",
 	"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

@@ -89,6 +89,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 +103,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 +135,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({
@@ -208,11 +226,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/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/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.8",
   "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",