@atlaskit/smart-card 26.9.0 → 26.9.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 26.9.2
+
+### Patch Changes
+
+- [`99643bdd534`](https://bitbucket.org/atlassian/atlassian-frontend/commits/99643bdd534) - Fix flexible smart links onclick event not bubble up when hover preview is enabled
+
+## 26.9.1
+
+### Patch Changes
+
+- [`88cc5a0088c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/88cc5a0088c) - [ux] Flexible Smart Links: Hover preview to follow mouse position
+- Updated dependencies
+
 ## 26.9.0
 
 ### Minor Changes

package/dist/cjs/hoverCard.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "HoverCard", {
   enumerable: true,
   get: function get() {
-    return _HoverCard.HoverCard;
+    return _HoverCard.StandaloneHoverCard;
   }
 });
 var _HoverCard = require("./view/HoverCard");

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -200,6 +200,7 @@ var Container = function Container(_ref3) {
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return (0, _react2.jsx)(_HoverCard.HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
+      allowEventPropagation: true,
       canOpen: hoverCardCanOpen,
       closeOnChildClick: true,
       hidePreviewButton: hideHoverCardPreviewButton

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

@@ -41,7 +41,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$hidePreviewButto = _ref.hidePreviewButton,
     hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto,
     _ref$showServerAction = _ref.showServerActions,
-    showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction;
+    showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction,
+    _ref$allowEventPropag = _ref.allowEventPropagation,
+    allowEventPropagation = _ref$allowEventPropag === void 0 ? false : _ref$allowEventPropag;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isOpen = _React$useState2[0],
@@ -58,14 +60,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var _useSmartCardActions = (0, _actions.useSmartCardActions)(id, url, analytics),
     loadMetadata = _useSmartCardActions.loadMetadata;
   var setMousePosition = (0, _react2.useCallback)(function (event) {
-    if (isOpen) {
+    if (isOpen && canOpen) {
       return;
     }
     mousePos.current = {
       x: event.clientX,
       y: event.clientY
     };
-  }, [isOpen]);
+  }, [canOpen, isOpen]);
   var hideCard = (0, _react2.useCallback)(function () {
     setIsOpen(false);
   }, []);
@@ -131,20 +133,21 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
 
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
+
+    //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
+    if ((!isOpen || !canOpen) && parentSpan.current && mousePos.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];
+    }
     if (!isOpen && !fadeInTimeoutId.current) {
       // setting a timeout to show a Hover Card after delay runs out
       fadeInTimeoutId.current = setTimeout(function () {
-        //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
-        if (parentSpan.current && mousePos.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);
       }, FADE_IN_DELAY);
     }
-  }, [initResolve, isOpen, setMousePosition]);
+  }, [canOpen, initResolve, isOpen, setMousePosition]);
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: _constants.CardDisplay.HoverCardPreview,
@@ -163,13 +166,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   }, [hideCard]);
 
   // Stop hover preview content to propagate event to parent.
-
   var onChildClick = (0, _react2.useCallback)(function (e) {
-    e.stopPropagation();
+    if (!allowEventPropagation) {
+      e.stopPropagation();
+    }
     if (closeOnChildClick) {
       hideCard();
     }
-  }, [closeOnChildClick, hideCard]);
+  }, [allowEventPropagation, closeOnChildClick, hideCard]);
   var content = (0, _react2.useCallback)(function (_ref2) {
     var update = _ref2.update;
     var hoverCardContentProps = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoverCard = void 0;
+exports.StandaloneHoverCard = exports.HoverCard = void 0;
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _react = require("@emotion/react");
 var _react2 = require("react");
@@ -32,7 +32,23 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   }, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, props, children));
 };
 var HoverCardWithoutAnalyticsContext = (0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary);
+
+/**
+ * A hover preview component using within smart links,
+ * e.g. inline card's hover preview and auth tooltip, flexible card's hover preview.
+ *
+ * This component contains additional props that smart-card internal components
+ * use to configure hover preview behaviour.
+ */
 var HoverCard = function HoverCard(props) {
   return (0, _react.jsx)(HoverCardWithoutAnalyticsContext, props);
 };
-exports.HoverCard = HoverCard;
+
+/**
+ * A standalone hover preview component
+ */
+exports.HoverCard = HoverCard;
+var StandaloneHoverCard = function StandaloneHoverCard(props) {
+  return (0, _react.jsx)(HoverCard, props);
+};
+exports.StandaloneHoverCard = StandaloneHoverCard;

package/dist/es2019/hoverCard.js

@@ -1 +1 @@
-export { HoverCard } from './view/HoverCard';
+export { StandaloneHoverCard as HoverCard } from './view/HoverCard';

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/container/index.js

@@ -217,6 +217,7 @@ const Container = ({
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
+      allowEventPropagation: true,
       canOpen: hoverCardCanOpen,
       closeOnChildClick: true,
       hidePreviewButton: hideHoverCardPreviewButton

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

@@ -24,7 +24,8 @@ export const HoverCardComponent = ({
   canOpen = true,
   closeOnChildClick = false,
   hidePreviewButton = false,
-  showServerActions = false
+  showServerActions = false,
+  allowEventPropagation = false
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const fadeOutTimeoutId = useRef();
@@ -40,14 +41,14 @@ export const HoverCardComponent = ({
     loadMetadata
   } = useSmartCardActions(id, url, analytics);
   const setMousePosition = useCallback(event => {
-    if (isOpen) {
+    if (isOpen && canOpen) {
       return;
     }
     mousePos.current = {
       x: event.clientX,
       y: event.clientY
     };
-  }, [isOpen]);
+  }, [canOpen, isOpen]);
   const hideCard = useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -111,21 +112,22 @@ export const HoverCardComponent = ({
 
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
+
+    //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
+    if ((!isOpen || !canOpen) && parentSpan.current && mousePos.current) {
+      const {
+        bottom,
+        left
+      } = parentSpan.current.getBoundingClientRect();
+      popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
+    }
     if (!isOpen && !fadeInTimeoutId.current) {
       // setting a timeout to show a Hover Card after delay runs out
       fadeInTimeoutId.current = setTimeout(() => {
-        //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
-        if (parentSpan.current && mousePos.current) {
-          const {
-            bottom,
-            left
-          } = parentSpan.current.getBoundingClientRect();
-          popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
-        }
         setIsOpen(true);
       }, FADE_IN_DELAY);
     }
-  }, [initResolve, isOpen, setMousePosition]);
+  }, [canOpen, initResolve, isOpen, setMousePosition]);
   const linkActions = useSmartLinkActions({
     url,
     appearance: CardDisplay.HoverCardPreview,
@@ -142,13 +144,14 @@ export const HoverCardComponent = ({
   }, [hideCard]);
 
   // Stop hover preview content to propagate event to parent.
-
   const onChildClick = useCallback(e => {
-    e.stopPropagation();
+    if (!allowEventPropagation) {
+      e.stopPropagation();
+    }
     if (closeOnChildClick) {
       hideCard();
     }
-  }, [closeOnChildClick, hideCard]);
+  }, [allowEventPropagation, closeOnChildClick, hideCard]);
   const content = useCallback(({
     update
   }) => {

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

@@ -27,6 +27,19 @@ const HoverCardWithErrorBoundary = props => {
   }, jsx(HoverCardComponent, props, children));
 };
 const HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
+
+/**
+ * A hover preview component using within smart links,
+ * e.g. inline card's hover preview and auth tooltip, flexible card's hover preview.
+ *
+ * This component contains additional props that smart-card internal components
+ * use to configure hover preview behaviour.
+ */
 export const HoverCard = props => {
   return jsx(HoverCardWithoutAnalyticsContext, props);
-};
+};
+
+/**
+ * A standalone hover preview component
+ */
+export const StandaloneHoverCard = props => jsx(HoverCard, props);

package/dist/esm/hoverCard.js

@@ -1 +1 @@
-export { HoverCard } from './view/HoverCard';
+export { StandaloneHoverCard as HoverCard } from './view/HoverCard';

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -189,6 +189,7 @@ var Container = function Container(_ref3) {
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
+      allowEventPropagation: true,
       canOpen: hoverCardCanOpen,
       closeOnChildClick: true,
       hidePreviewButton: hideHoverCardPreviewButton

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

@@ -30,7 +30,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$hidePreviewButto = _ref.hidePreviewButton,
     hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto,
     _ref$showServerAction = _ref.showServerActions,
-    showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction;
+    showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction,
+    _ref$allowEventPropag = _ref.allowEventPropagation,
+    allowEventPropagation = _ref$allowEventPropag === void 0 ? false : _ref$allowEventPropag;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
@@ -47,14 +49,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var _useSmartCardActions = useSmartCardActions(id, url, analytics),
     loadMetadata = _useSmartCardActions.loadMetadata;
   var setMousePosition = useCallback(function (event) {
-    if (isOpen) {
+    if (isOpen && canOpen) {
       return;
     }
     mousePos.current = {
       x: event.clientX,
       y: event.clientY
     };
-  }, [isOpen]);
+  }, [canOpen, isOpen]);
   var hideCard = useCallback(function () {
     setIsOpen(false);
   }, []);
@@ -120,20 +122,21 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
 
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
+
+    //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
+    if ((!isOpen || !canOpen) && parentSpan.current && mousePos.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];
+    }
     if (!isOpen && !fadeInTimeoutId.current) {
       // setting a timeout to show a Hover Card after delay runs out
       fadeInTimeoutId.current = setTimeout(function () {
-        //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
-        if (parentSpan.current && mousePos.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);
       }, FADE_IN_DELAY);
     }
-  }, [initResolve, isOpen, setMousePosition]);
+  }, [canOpen, initResolve, isOpen, setMousePosition]);
   var linkActions = useSmartLinkActions({
     url: url,
     appearance: CardDisplay.HoverCardPreview,
@@ -152,13 +155,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   }, [hideCard]);
 
   // Stop hover preview content to propagate event to parent.
-
   var onChildClick = useCallback(function (e) {
-    e.stopPropagation();
+    if (!allowEventPropagation) {
+      e.stopPropagation();
+    }
     if (closeOnChildClick) {
       hideCard();
     }
-  }, [closeOnChildClick, hideCard]);
+  }, [allowEventPropagation, closeOnChildClick, hideCard]);
   var content = useCallback(function (_ref2) {
     var update = _ref2.update;
     var hoverCardContentProps = {

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

@@ -25,6 +25,21 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   }, jsx(HoverCardComponent, props, children));
 };
 var HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
+
+/**
+ * A hover preview component using within smart links,
+ * e.g. inline card's hover preview and auth tooltip, flexible card's hover preview.
+ *
+ * This component contains additional props that smart-card internal components
+ * use to configure hover preview behaviour.
+ */
 export var HoverCard = function HoverCard(props) {
   return jsx(HoverCardWithoutAnalyticsContext, props);
+};
+
+/**
+ * A standalone hover preview component
+ */
+export var StandaloneHoverCard = function StandaloneHoverCard(props) {
+  return jsx(HoverCard, props);
 };

package/dist/types/hoverCard.d.ts

@@ -1,2 +1,2 @@
-export { HoverCard } from './view/HoverCard';
+export { StandaloneHoverCard as HoverCard } from './view/HoverCard';
 export type { HoverCardProps } from './view/HoverCard/types';

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

@@ -1,3 +1,14 @@
 import { jsx } from '@emotion/react';
-import { HoverCardProps } from './types';
-export declare const HoverCard: (props: HoverCardProps) => jsx.JSX.Element;
+import { HoverCardInternalProps, HoverCardProps } from './types';
+/**
+ * A hover preview component using within smart links,
+ * e.g. inline card's hover preview and auth tooltip, flexible card's hover preview.
+ *
+ * This component contains additional props that smart-card internal components
+ * use to configure hover preview behaviour.
+ */
+export declare const HoverCard: (props: HoverCardProps & HoverCardInternalProps) => jsx.JSX.Element;
+/**
+ * A standalone hover preview component
+ */
+export declare const StandaloneHoverCard: (props: HoverCardProps) => jsx.JSX.Element;

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

@@ -43,7 +43,20 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      */
     showServerActions?: boolean;
 }
-export interface HoverCardComponentProps extends HoverCardProps {
+/**
+ * An internal props that internal smart-card components can use to configure
+ * hover preview behaviour. The prop contains here are suitable for unsafe
+ * or experiment props that will not be or are yet ready to be available on
+ * standalone hover card.
+ */
+export interface HoverCardInternalProps {
+    /**
+     * Allow click event to bubble up from hover preview trigger component.
+     * @see EDM-7187 for further details
+     */
+    allowEventPropagation?: boolean;
+}
+export interface HoverCardComponentProps extends HoverCardProps, HoverCardInternalProps {
     analyticsHandler?: AnalyticsHandler;
     analytics?: AnalyticsFacade;
     canOpen?: boolean;

package/dist/types-ts4.5/hoverCard.d.ts

@@ -1,2 +1,2 @@
-export { HoverCard } from './view/HoverCard';
+export { StandaloneHoverCard as HoverCard } from './view/HoverCard';
 export type { HoverCardProps } from './view/HoverCard/types';

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

@@ -1,3 +1,14 @@
 import { jsx } from '@emotion/react';
-import { HoverCardProps } from './types';
-export declare const HoverCard: (props: HoverCardProps) => jsx.JSX.Element;
+import { HoverCardInternalProps, HoverCardProps } from './types';
+/**
+ * A hover preview component using within smart links,
+ * e.g. inline card's hover preview and auth tooltip, flexible card's hover preview.
+ *
+ * This component contains additional props that smart-card internal components
+ * use to configure hover preview behaviour.
+ */
+export declare const HoverCard: (props: HoverCardProps & HoverCardInternalProps) => jsx.JSX.Element;
+/**
+ * A standalone hover preview component
+ */
+export declare const StandaloneHoverCard: (props: HoverCardProps) => jsx.JSX.Element;

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

@@ -43,7 +43,20 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      */
     showServerActions?: boolean;
 }
-export interface HoverCardComponentProps extends HoverCardProps {
+/**
+ * An internal props that internal smart-card components can use to configure
+ * hover preview behaviour. The prop contains here are suitable for unsafe
+ * or experiment props that will not be or are yet ready to be available on
+ * standalone hover card.
+ */
+export interface HoverCardInternalProps {
+    /**
+     * Allow click event to bubble up from hover preview trigger component.
+     * @see EDM-7187 for further details
+     */
+    allowEventPropagation?: boolean;
+}
+export interface HoverCardComponentProps extends HoverCardProps, HoverCardInternalProps {
     analyticsHandler?: AnalyticsHandler;
     analytics?: AnalyticsFacade;
     canOpen?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.9.0",
+  "version": "26.9.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,9 +42,9 @@
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
-    "@atlaskit/link-analytics": "^8.1.0",
+    "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-client-extension": "^1.5.0",
-    "@atlaskit/linking-common": "^3.1.0",
+    "@atlaskit/linking-common": "^3.2.0",
     "@atlaskit/linking-types": "^8.1.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
@@ -79,25 +79,11 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/checkbox": "^12.6.0",
-    "@atlaskit/code": "^14.6.0",
     "@atlaskit/css-reset": "^6.5.0",
-    "@atlaskit/docs": "*",
-    "@atlaskit/form": "^8.11.0",
-    "@atlaskit/inline-message": "^11.5.0",
     "@atlaskit/link-test-helpers": "^4.1.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/page": "^12.3.0",
-    "@atlaskit/radio": "^5.6.0",
-    "@atlaskit/range": "^7.1.0",
-    "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.5.0",
-    "@atlaskit/table-tree": "^9.6.0",
-    "@atlaskit/tabs": "^13.4.0",
-    "@atlaskit/textfield": "^5.5.0",
-    "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.1.1",