@atlaskit/smart-card 20.0.1 → 20.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 20.0.2
+
+### Patch Changes
+
+- [`12950ccea1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12950ccea1b) - Hover Preview: Stop hover preview from propagating click event to parent element
+
 ## 20.0.1
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -13,6 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _react = require("react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _core = require("@emotion/core");
@@ -62,10 +64,15 @@ var ActionGroup = function ActionGroup(_ref) {
       testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+
+  var onClick = (0, _react.useCallback)(function (e) {
+    return e.stopPropagation();
+  }, []);
   return (0, _core.jsx)("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    onClick: onClick
   }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(firstActions, size, appearance), restActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
     onOpenChange: function onOpenChange(_ref2) {
       var isOpen = _ref2.isOpen;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoverCardComponent = exports.HoverCard = void 0;
+exports.hoverCardClassName = exports.HoverCardComponent = exports.HoverCard = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -42,6 +42,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 = 'smart-links-hover-preview';
+exports.hoverCardClassName = hoverCardClassName;
+
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       id = _ref.id,
@@ -105,7 +108,11 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]);
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  var onClick = (0, _react.useCallback)(function (e) {
+    return e.stopPropagation();
+  }, []);
   return (0, _core.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen,
@@ -116,7 +123,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       return (0, _core.jsx)("div", {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
-        css: _styled.HoverCardContainer
+        className: hoverCardClassName,
+        css: _styled.HoverCardContainer,
+        onClick: onClick
       }, (0, _core.jsx)(_hoverCardContent.default, {
         analytics: analytics,
         cardActions: linkActions,

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
@@ -47,10 +48,13 @@ const ActionGroup = ({
 }) => {
   const isMoreThenTwoItems = items.length > visibleButtonsNum;
   const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  const restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+  const restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+
+  const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    onClick: onClick
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
     onOpenChange: ({
       isOpen

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

@@ -13,6 +13,7 @@ import { useSmartLinkAnalytics } from '../../state/analytics';
 import { useSmartLinkRenderers } from '../../state/renderers';
 import HoverCardContent from './components/hover-card-content';
 import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
+export const hoverCardClassName = 'smart-links-hover-preview';
 export const HoverCardComponent = ({
   children,
   id,
@@ -70,7 +71,9 @@ export const HoverCardComponent = ({
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]);
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen,
@@ -81,7 +84,9 @@ export const HoverCardComponent = ({
     }) => jsx("div", {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
-      css: HoverCardContainer
+      className: hoverCardClassName,
+      css: HoverCardContainer,
+      onClick: onClick
     }, jsx(HoverCardContent, {
       analytics: analytics,
       cardActions: linkActions,

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -6,6 +6,7 @@ var _excluded = ["triggerRef"];
 var _templateObject;
 
 /** @jsx jsx */
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
@@ -39,10 +40,15 @@ var ActionGroup = function ActionGroup(_ref) {
       testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+
+  var onClick = useCallback(function (e) {
+    return e.stopPropagation();
+  }, []);
   return jsx("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    onClick: onClick
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
     onOpenChange: function onOpenChange(_ref2) {
       var isOpen = _ref2.isOpen;

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

@@ -14,6 +14,7 @@ import { useSmartLinkAnalytics } from '../../state/analytics';
 import { useSmartLinkRenderers } from '../../state/renderers';
 import HoverCardContent from './components/hover-card-content';
 import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
+export var hoverCardClassName = 'smart-links-hover-preview';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       id = _ref.id,
@@ -77,7 +78,11 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]);
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  var onClick = useCallback(function (e) {
+    return e.stopPropagation();
+  }, []);
   return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen,
@@ -88,7 +93,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       return jsx("div", {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
-        css: HoverCardContainer
+        className: hoverCardClassName,
+        css: HoverCardContainer,
+        onClick: onClick
       }, jsx(HoverCardContent, {
         analytics: analytics,
         cardActions: linkActions,

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

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
 import { HoverCardProps } from './types';
+export declare const hoverCardClassName = "smart-links-hover-preview";
 export declare const HoverCardComponent: FC<HoverCardProps>;
 export declare const HoverCard: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "id" | "analyticsContext" | "key" | "url"> & React.RefAttributes<any>>;

package/package.json

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