@atlaskit/smart-card 20.0.2 → 20.0.5

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

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import Popup from '@atlaskit/popup';
+import { jsx } from '@emotion/core';
+import React, { useCallback, useRef } from 'react';
+import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
+import { useSmartLinkRenderers } from '../../../state/renderers';
+import { useSmartCardState as useLinkState } from '../../../state/store';
+import HoverCardContent from '../components/HoverCardContent';
+import { HoverCardContainer } from '../styled';
+import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+export var hoverCardClassName = 'smart-links-hover-preview';
+export var HoverCardComponent = function HoverCardComponent(_ref) {
+  var children = _ref.children,
+      url = _ref.url,
+      analyticsHandler = _ref.analyticsHandler,
+      analytics = _ref.analytics;
+  var delay = 300;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var fadeOutTimeoutId = useRef();
+  var fadeInTimeoutId = useRef();
+  var cardOpenTime = useRef();
+  var renderers = useSmartLinkRenderers();
+  var linkState = useLinkState(url);
+  var hoverDisplay = 'card';
+  var invokeMethod = 'mouse_hover';
+  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 () {
+      return hideCard();
+    }, delay);
+  }, [hideCard]);
+  var initShowCard = useCallback(function () {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(function () {
+      //Check if its previously closed to avoid firing events when moving between the child and hover card components
+      if (isOpen === false) {
+        cardOpenTime.current = Date.now();
+        analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
+      }
+
+      setIsOpen(true);
+    }, delay);
+  }, [delay, isOpen, analytics.ui]);
+  var linkActions = useSmartLinkActions({
+    url: url,
+    appearance: SMART_CARD_ANALYTICS_DISPLAY,
+    analyticsHandler: analyticsHandler
+  });
+  var onActionClick = useCallback(function (actionId) {
+    if (actionId === 'preview-content') {
+      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,
+    onClose: hideCard,
+    placement: "bottom-start",
+    content: function content(_ref2) {
+      var update = _ref2.update;
+      return jsx("div", {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard,
+        onClick: onClick,
+        css: HoverCardContainer // class name for trello to exclude click events
+        ,
+        className: hoverCardClassName
+      }, jsx(HoverCardContent, {
+        analytics: analytics,
+        cardActions: linkActions,
+        cardState: linkState,
+        onActionClick: onActionClick,
+        onResolve: update,
+        renderers: renderers,
+        url: url
+      }));
+    },
+    trigger: function trigger(triggerProps) {
+      return jsx("span", _extends({}, triggerProps, {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard
+      }), children);
+    },
+    zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
+
+  });
+};

package/dist/esm/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js}

@@ -1,24 +1,16 @@
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { extractMetadata } from '../../../extractors/hover/extractMetadata';
-import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import extractPreview from '../../../extractors/flexible/extract-preview';
-import { ActionName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import { extractMetadata } from '../../../extractors/hover/extractMetadata';
+import { getExtensionKey } from '../../../state/helpers';
+import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
-import { isSpecialEvent } from '../../../utils';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { getExtensionKey } from '../../../state/helpers';
-import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
-import { extractType } from '@atlaskit/linking-common/extractors';
-var flexibleUiOptions = {
-  hideElevation: true,
-  size: SmartLinkSize.Medium,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black,
-  hidePadding: true
-};
-
-var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
+import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
+import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
     icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -37,8 +29,7 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
     testId: 'hover-card-open-button'
   };
 };
-
-var toFooterActions = function toFooterActions(cardActions, onActionClick) {
+export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   return cardActions.map(function (action) {
     return {
       content: action.text,
@@ -69,14 +60,14 @@ var HoverCardContent = function HoverCardContent(_ref) {
   useEffect(function () {
     // Since hover preview only render on resolved status,
     // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent(HOVER_CARD_ANALYTICS_DISPLAY, cardState.status);
+    analytics.ui.renderSuccessEvent(SMART_CARD_ANALYTICS_DISPLAY, cardState.status);
   }, [analytics.ui, cardState.status]);
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
   var onClick = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
+    analytics.ui.cardClickedEvent(undefined, SMART_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = useMemo(function () {
     return [getOpenAction(url, analytics, onActionClick)];

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

@@ -1,121 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useCallback, useRef } from 'react';
-import Popup from '@atlaskit/popup';
-import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
-import { HoverCardContainer } from './styled';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireSmartLinkEvent } from '../../utils/analytics';
-import { useSmartCardState as useLinkState } from '../../state/store';
+import { jsx } from '@emotion/core';
+import { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 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,
-      url = _ref.url,
-      createAnalyticsEvent = _ref.createAnalyticsEvent;
+import { fireSmartLinkEvent } from '../../utils/analytics';
+import { HoverCardComponent } from './components/HoverCardComponent';
+import { SMART_CARD_ANALYTICS_DISPLAY } from './utils';
+
+var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
+  var url = props.url,
+      id = props.id,
+      children = props.children,
+      createAnalyticsEvent = props.createAnalyticsEvent;
   var analyticsHandler = useCallback(function (analyticsPayload) {
     fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
   }, [createAnalyticsEvent]);
-  var delay = 300;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  var fadeOutTimeoutId = useRef();
-  var fadeInTimeoutId = useRef();
-  var cardOpenTime = useRef();
-  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 () {
-      return hideCard();
-    }, delay);
-  }, [hideCard]);
-  var initShowCard = useCallback(function () {
-    if (fadeOutTimeoutId.current) {
-      clearTimeout(fadeOutTimeoutId.current);
-    }
-
-    fadeInTimeoutId.current = setTimeout(function () {
-      //Check if its previously closed to avoid firing events when moving between the child and hover card components
-      if (isOpen === false) {
-        cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent('card', 'mouse_hover');
-      }
-
-      setIsOpen(true);
-    }, delay);
-  }, [delay, isOpen, analytics.ui]);
-  var linkActions = useSmartLinkActions({
-    url: url,
-    appearance: HOVER_CARD_ANALYTICS_DISPLAY,
-    analyticsHandler: analyticsHandler
-  });
-  var onActionClick = useCallback(function (actionId) {
-    if (actionId === 'preview-content') {
-      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,
-    onClose: hideCard,
-    placement: "bottom-start",
-    content: function content(_ref2) {
-      var update = _ref2.update;
-      return jsx("div", {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard,
-        className: hoverCardClassName,
-        css: HoverCardContainer,
-        onClick: onClick
-      }, jsx(HoverCardContent, {
-        analytics: analytics,
-        cardActions: linkActions,
-        cardState: linkState,
-        onActionClick: onActionClick,
-        onResolve: update,
-        renderers: renderers,
-        url: url
-      }));
-    },
-    trigger: function trigger(triggerProps) {
-      return jsx("span", _extends({}, triggerProps, {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
-    },
-    zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
-
-  });
+  var onError = useCallback(function (error, info) {
+    analytics.ui.renderFailedEvent(SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
+  }, [analytics.ui, id]);
+  return jsx(ErrorBoundary, {
+    fallback: children,
+    onError: onError
+  }, jsx(HoverCardComponent, _extends({}, props, {
+    analyticsHandler: analyticsHandler,
+    analytics: analytics
+  }), children));
 };
+
 export var HoverCard = withAnalyticsContext({
   source: 'smartLinkPreviewHoverCard'
-})(withAnalyticsEvents()(HoverCardComponent));
+})(withAnalyticsEvents()(HoverCardWithErrorBoundary));

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

@@ -4,6 +4,14 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
+import { SmartLinkSize, SmartLinkTheme } from '../../constants';
+export var flexibleUiOptions = {
+  hideElevation: true,
+  size: SmartLinkSize.Medium,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
+};
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);

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

@@ -1,5 +1,5 @@
 import { ElementName } from '../../constants';
-export var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
+export var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -1,3 +1,4 @@
+import { ErrorInfo } from 'react';
 import { CardType, APIError } from '@atlaskit/linking-common';
 import { AnalyticsHandler } from '../../utils/types';
 import { CardInnerAppearance } from '../../view/Card/types';
@@ -83,6 +84,14 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          */
         renderSuccessEvent: (display: CardInnerAppearance, status: CardType, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        /**
+         * This fires an event that represents when a Smart Link renders unsuccessfuly.
+         * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+         * @param id The unique ID for this Smart Link.
+         * @param error: An error representing why the Smart Link render failed.
+         * @param errorInfo: Additional details about the error including the stack trace.
+         */
+        renderFailedEvent: (display: CardInnerAppearance, id: string | undefined, error: Error, errorInfo: ErrorInfo) => void;
         /**
          * This fires an event that represents a hover preview being opened.
          * @param hoverDisplay Whether the hover preview was displayed as a card or embed.

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AnalyticsHandler } from '../../utils/types';
 export declare function useSmartLink(id: string, url: string, dispatchAnalytics: AnalyticsHandler): {
     state: import("@atlaskit/linking-common").CardState;
@@ -17,6 +18,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
             hoverCardOpenLinkClickedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
             closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             renderSuccessEvent: (display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+            renderFailedEvent: (display: import("../../view/Card/types").CardInnerAppearance, id: string | undefined, error: Error, errorInfo: import("react").ErrorInfo) => void;
             hoverCardViewedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             hoverCardDismissedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, hoverTime: number, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
         };

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { HoverCardComponentProps } from '../types';
+export declare const hoverCardClassName = "smart-links-hover-preview";
+export declare const HoverCardComponent: FC<HoverCardComponentProps>;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AnalyticsFacade } from '../../../state/analytics';
+import { LinkAction } from '../../../state/hooks-external/useSmartLinkActions';
+import { ActionItem } from '../../FlexibleCard/components/blocks/types';
+import { HoverCardContentProps } from '../types';
+export declare const getOpenAction: (url: string, analytics: AnalyticsFacade, onActionClick?: ((actionId: string) => void) | undefined) => ActionItem;
+export declare const toFooterActions: (cardActions: LinkAction[], onActionClick?: ((actionId: string) => void) | undefined) => ActionItem[];
+declare const HoverCardContent: React.FC<HoverCardContentProps>;
+export default HoverCardContent;

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

@@ -1,5 +1,3 @@
-import React, { FC } from 'react';
+/// <reference types="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>>;
+export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "id" | "analyticsContext" | "key" | "url"> & import("react").RefAttributes<any>>;

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

@@ -1,3 +1,5 @@
+import { FlexibleUiOptions } from '../FlexibleCard/types';
+export declare const flexibleUiOptions: FlexibleUiOptions;
 export declare const HoverCardContainer: import("@emotion/utils").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const metadataBlockCss: import("@emotion/utils").SerializedStyles;

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

@@ -4,9 +4,16 @@ import { AnalyticsFacade } from '../../state/analytics';
 import { LinkAction } from '../../state/hooks-external/useSmartLinkActions';
 import { CardState } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
+import { AnalyticsHandler } from '../../utils/types';
+import { ReactElement } from 'react';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     id?: string;
     url: string;
+    children: ReactElement;
+}
+export interface HoverCardComponentProps extends HoverCardProps {
+    analyticsHandler: AnalyticsHandler;
+    analytics: AnalyticsFacade;
 }
 export declare type PreviewDisplay = 'card' | 'embed';
 export declare type PreviewInvokeMethod = 'keyboard' | 'mouse_hover' | 'mouse_click';

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

@@ -1,3 +1,3 @@
 import { JsonLd } from 'json-ld-types';
-export declare const HOVER_CARD_ANALYTICS_DISPLAY = "flexible";
+export declare const SMART_CARD_ANALYTICS_DISPLAY = "flexible";
 export declare const getSimulatedMetadata: (extensionKey?: string, types?: JsonLd.Primitives.ObjectType[]) => JsonLd.Primitives.Property<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "20.0.2",
+  "version": "20.0.5",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/linking-common": "^1.2.0",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-common": "^2.15.0",
     "@atlaskit/modal-dialog": "^12.2.0",
@@ -58,7 +58,7 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/link-provider": "^1.1.0",
+    "@atlaskit/link-provider": "^1.1.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"