@atlaskit/smart-card 26.4.1 → 26.5.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 26.5.1
+
+### Patch Changes
+
+- [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing unused dependencies and dev dependencies
+- Updated dependencies
+
+## 26.5.0
+
+### Minor Changes
+
+- [`ce79111f98f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ce79111f98f) - Card component will stop throwing any uncaught errors. Any existing consumer relying on this behaviour should start using `fallbackComponent` to provide fallback ui and `onError` to act on such errors. See CardProps type for more docs.
+  Reason this is a minor bump and not a major version is because the previous behaviour of error propagation was actually a bug and was not a public contract with clients. This minor version fixes this bug and requires the client to update their code.
+
 ## 26.4.1
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/loader.js

@@ -61,7 +61,8 @@ function CardWithURLRenderer(props) {
     showHoverPreview = props.showHoverPreview,
     showAuthTooltip = props.showAuthTooltip,
     analyticsEvents = props.analyticsEvents,
-    placeholder = props.placeholder;
+    placeholder = props.placeholder,
+    fallbackComponent = props.fallbackComponent;
 
   // Wrapper around analytics.
   var dispatchAnalytics = (0, _react.useMemo)(function () {
@@ -89,7 +90,7 @@ function CardWithURLRenderer(props) {
     };
   }, [appearance, createAnalyticsEvent]);
   var analytics = (0, _analytics2.useSmartLinkAnalytics)(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
-  var logError = (0, _react.useCallback)(function (error, info) {
+  var errorHandler = (0, _react.useCallback)(function (error, info) {
     var componentStack = info.componentStack;
     var errorInfo = {
       componentStack: componentStack
@@ -113,14 +114,22 @@ function CardWithURLRenderer(props) {
         errorInfo: errorInfo
       });
     }
-
-    // Rethrow to hand control to the consumer of Smart-card.
-    // In the case of editor this allows the Smart Link to fallback to a blue link.
-    throw error;
-  }, [analytics.operational, analytics.ui, appearance, id]);
+    onError && onError({
+      status: 'errored',
+      url: url !== null && url !== void 0 ? url : '',
+      err: error
+    });
+  }, [analytics.operational, analytics.ui, appearance, id, onError, url]);
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
   }
+  var defaultFallBackComponent = function defaultFallBackComponent() {
+    return null;
+  };
+  var FallbackComponent = fallbackComponent !== null && fallbackComponent !== void 0 ? fallbackComponent : defaultFallBackComponent;
+  var ErrorFallback = function ErrorFallback() {
+    return /*#__PURE__*/_react.default.createElement(FallbackComponent, null);
+  };
   var cardWithUrlProps = {
     id: id,
     url: url,
@@ -149,11 +158,8 @@ function CardWithURLRenderer(props) {
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,
-    onError: logError
+    onError: errorHandler
   }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement(_LazyFallback.LoadingCardLink, cardWithUrlProps)
   }, /*#__PURE__*/_react.default.createElement(LazyCardWithUrlContent, cardWithUrlProps, children)));
-}
-var ErrorFallback = function ErrorFallback() {
-  return null;
-};
+}

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/loader.js

@@ -41,7 +41,8 @@ export function CardWithURLRenderer(props) {
     showHoverPreview,
     showAuthTooltip,
     analyticsEvents,
-    placeholder
+    placeholder,
+    fallbackComponent
   } = props;
 
   // Wrapper around analytics.
@@ -70,7 +71,7 @@ export function CardWithURLRenderer(props) {
     };
   }, [appearance, createAnalyticsEvent]);
   const analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
-  const logError = useCallback((error, info) => {
+  const errorHandler = useCallback((error, info) => {
     const {
       componentStack
     } = info;
@@ -96,14 +97,18 @@ export function CardWithURLRenderer(props) {
         errorInfo
       });
     }
-
-    // Rethrow to hand control to the consumer of Smart-card.
-    // In the case of editor this allows the Smart Link to fallback to a blue link.
-    throw error;
-  }, [analytics.operational, analytics.ui, appearance, id]);
+    onError && onError({
+      status: 'errored',
+      url: url !== null && url !== void 0 ? url : '',
+      err: error
+    });
+  }, [analytics.operational, analytics.ui, appearance, id, onError, url]);
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
   }
+  const defaultFallBackComponent = () => null;
+  const FallbackComponent = fallbackComponent !== null && fallbackComponent !== void 0 ? fallbackComponent : defaultFallBackComponent;
+  const ErrorFallback = () => /*#__PURE__*/React.createElement(FallbackComponent, null);
   const cardWithUrlProps = {
     id,
     url,
@@ -132,11 +137,8 @@ export function CardWithURLRenderer(props) {
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,
-    onError: logError
+    onError: errorHandler
   }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement(LoadingCardLink, cardWithUrlProps)
   }, /*#__PURE__*/React.createElement(LazyCardWithUrlContent, cardWithUrlProps, children)));
-}
-const ErrorFallback = () => {
-  return null;
-};
+}

package/dist/esm/version.json

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

package/dist/esm/view/CardWithUrl/loader.js

@@ -49,7 +49,8 @@ export function CardWithURLRenderer(props) {
     showHoverPreview = props.showHoverPreview,
     showAuthTooltip = props.showAuthTooltip,
     analyticsEvents = props.analyticsEvents,
-    placeholder = props.placeholder;
+    placeholder = props.placeholder,
+    fallbackComponent = props.fallbackComponent;
 
   // Wrapper around analytics.
   var dispatchAnalytics = useMemo(function () {
@@ -77,7 +78,7 @@ export function CardWithURLRenderer(props) {
     };
   }, [appearance, createAnalyticsEvent]);
   var analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
-  var logError = useCallback(function (error, info) {
+  var errorHandler = useCallback(function (error, info) {
     var componentStack = info.componentStack;
     var errorInfo = {
       componentStack: componentStack
@@ -101,14 +102,22 @@ export function CardWithURLRenderer(props) {
         errorInfo: errorInfo
       });
     }
-
-    // Rethrow to hand control to the consumer of Smart-card.
-    // In the case of editor this allows the Smart Link to fallback to a blue link.
-    throw error;
-  }, [analytics.operational, analytics.ui, appearance, id]);
+    onError && onError({
+      status: 'errored',
+      url: url !== null && url !== void 0 ? url : '',
+      err: error
+    });
+  }, [analytics.operational, analytics.ui, appearance, id, onError, url]);
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
   }
+  var defaultFallBackComponent = function defaultFallBackComponent() {
+    return null;
+  };
+  var FallbackComponent = fallbackComponent !== null && fallbackComponent !== void 0 ? fallbackComponent : defaultFallBackComponent;
+  var ErrorFallback = function ErrorFallback() {
+    return /*#__PURE__*/React.createElement(FallbackComponent, null);
+  };
   var cardWithUrlProps = {
     id: id,
     url: url,
@@ -137,11 +146,8 @@ export function CardWithURLRenderer(props) {
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,
-    onError: logError
+    onError: errorHandler
   }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement(LoadingCardLink, cardWithUrlProps)
   }, /*#__PURE__*/React.createElement(LazyCardWithUrlContent, cardWithUrlProps, children)));
-}
-var ErrorFallback = function ErrorFallback() {
-  return null;
-};
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "onResolve" | "showAuthTooltip" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "onResolve" | "showAuthTooltip" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "fallbackComponent" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -28,6 +28,11 @@ export interface CardProps extends WithAnalyticsEventsProps {
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     importer?: (target: any) => void;
     container?: HTMLElement;
+    /**
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-3226 Internal documentation for deprecation (no external access)}
+     * Likely here for legacy reason where editor would store data in ADF instead of resolving it everytime
+     * https://product-fabric.atlassian.net/browse/EDM-6813
+     */
     data?: any;
     url?: string;
     testId?: string;
@@ -41,7 +46,22 @@ export interface CardProps extends WithAnalyticsEventsProps {
      */
     showServerActions?: boolean;
     onResolve?: OnResolveCallback;
+    /**
+     * A callback function currently invoked in two cases
+     * 1. When the {@link CardState.status} is one of {@link ErrorCardType}. "err" property in argument will be undefined in this case
+     *    This does not mean that smart card failed to render.
+     * 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card succesfully.
+     *    "err" property in argument will be provided in this case.
+     *    Presence of an err property indicates that the client should either render their own fallback
+     *    or provide a fallbackComponent prop which will be rendered instead smart card component.
+     *    If fallbackComponent is not provided, smart card will render null
+     */
     onError?: OnErrorCallback;
+    /**
+     * A component that will be rendered when smart card fails to render
+     * because of uncaught errors
+     */
+    fallbackComponent?: React.ComponentType;
     /** This props determines if dimensions of an embed card are to be inherited from the parent.
      * The parent container needs to override a style '.loader-wrapper' and set the desirable height there. (for instance, 'height: 100%')
      */

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "onResolve" | "showAuthTooltip" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "onResolve" | "showAuthTooltip" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "fallbackComponent" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -28,6 +28,11 @@ export interface CardProps extends WithAnalyticsEventsProps {
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     importer?: (target: any) => void;
     container?: HTMLElement;
+    /**
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-3226 Internal documentation for deprecation (no external access)}
+     * Likely here for legacy reason where editor would store data in ADF instead of resolving it everytime
+     * https://product-fabric.atlassian.net/browse/EDM-6813
+     */
     data?: any;
     url?: string;
     testId?: string;
@@ -41,7 +46,22 @@ export interface CardProps extends WithAnalyticsEventsProps {
      */
     showServerActions?: boolean;
     onResolve?: OnResolveCallback;
+    /**
+     * A callback function currently invoked in two cases
+     * 1. When the {@link CardState.status} is one of {@link ErrorCardType}. "err" property in argument will be undefined in this case
+     *    This does not mean that smart card failed to render.
+     * 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card succesfully.
+     *    "err" property in argument will be provided in this case.
+     *    Presence of an err property indicates that the client should either render their own fallback
+     *    or provide a fallbackComponent prop which will be rendered instead smart card component.
+     *    If fallbackComponent is not provided, smart card will render null
+     */
     onError?: OnErrorCallback;
+    /**
+     * A component that will be rendered when smart card fails to render
+     * because of uncaught errors
+     */
+    fallbackComponent?: React.ComponentType;
     /** This props determines if dimensions of an embed card are to be inherited from the parent.
      * The parent container needs to override a style '.loader-wrapper' and set the desirable height there. (for instance, 'height: 100%')
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.4.1",
+  "version": "26.5.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
     "@atlaskit/popup": "^1.6.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -71,7 +71,7 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/link-provider": "^1.6.3",
+    "@atlaskit/link-provider": "^1.6.4",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
@@ -82,21 +82,19 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/css-reset": "^6.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/field-base": "^15.2.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/inline-message": "^11.5.0",
     "@atlaskit/link-test-helpers": "^4.0.0",
     "@atlaskit/lozenge": "^11.4.0",
-    "@atlaskit/media-integration-test-helpers": "^2.6.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.4.0",
+    "@atlaskit/select": "^16.5.0",
     "@atlaskit/table-tree": "^9.4.0",
     "@atlaskit/tabs": "^13.4.0",
-    "@atlaskit/textarea": "^4.7.0",
     "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -246,6 +246,7 @@ export const Card: React_2.ForwardRefExoticComponent<
     | 'data'
     | 'embedIframeRef'
     | 'embedIframeUrlType'
+    | 'fallbackComponent'
     | 'forwardedRef'
     | 'frameStyle'
     | 'id'
@@ -296,12 +297,13 @@ export interface CardProps extends WithAnalyticsEventsProps {
   children?: React.ReactNode;
   // (undocumented)
   container?: HTMLElement;
-  // (undocumented)
+  // @deprecated (undocumented)
   data?: any;
   // (undocumented)
   embedIframeRef?: React.Ref<HTMLIFrameElement>;
   // (undocumented)
   embedIframeUrlType?: EmbedIframeUrlType;
+  fallbackComponent?: React.ComponentType;
   frameStyle?: FrameStyle;
   // (undocumented)
   id?: string;
@@ -316,7 +318,6 @@ export interface CardProps extends WithAnalyticsEventsProps {
   isSelected?: boolean;
   // (undocumented)
   onClick?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
-  // (undocumented)
   onError?: OnErrorCallback;
   // (undocumented)
   onResolve?: OnResolveCallback;
@@ -1284,7 +1285,7 @@ type VoteCount = {
 
 ```json
 {
-  "@atlaskit/link-provider": "^1.6.3",
+  "@atlaskit/link-provider": "^1.6.4",
   "react": "^16.8.0",
   "react-dom": "^16.8.0",
   "react-intl-next": "npm:react-intl@^5.18.1"

package/tmp/api-report-tmp.d.ts

@@ -179,7 +179,7 @@ type BlockProps = {
 };
 
 // @public (undocumented)
-export const Card: React_2.ForwardRefExoticComponent<Pick<Omit<React_2.PropsWithChildren<WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "analyticsEvents" | "appearance" | "children" | "container" | "data" | "embedIframeRef" | "embedIframeUrlType" | "forwardedRef" | "frameStyle" | "id" | "importer" | "inheritDimensions" | "inlinePreloaderStyle" | "isFrameVisible" | "isSelected" | "key" | "onClick" | "onError" | "onResolve" | "placeholder" | "platform" | "showActions" | "showAuthTooltip" | "showHoverPreview" | "showServerActions" | "testId" | "ui" | "url"> & React_2.RefAttributes<any>>;
+export const Card: React_2.ForwardRefExoticComponent<Pick<Omit<React_2.PropsWithChildren<WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "analyticsEvents" | "appearance" | "children" | "container" | "data" | "embedIframeRef" | "embedIframeUrlType" | "fallbackComponent" | "forwardedRef" | "frameStyle" | "id" | "importer" | "inheritDimensions" | "inlinePreloaderStyle" | "isFrameVisible" | "isSelected" | "key" | "onClick" | "onError" | "onResolve" | "placeholder" | "platform" | "showActions" | "showAuthTooltip" | "showHoverPreview" | "showServerActions" | "testId" | "ui" | "url"> & React_2.RefAttributes<any>>;
 
 export { CardAdf }
 
@@ -202,12 +202,13 @@ export interface CardProps extends WithAnalyticsEventsProps {
     children?: React.ReactNode;
     // (undocumented)
     container?: HTMLElement;
-    // (undocumented)
+    // @deprecated (undocumented)
     data?: any;
     // (undocumented)
     embedIframeRef?: React.Ref<HTMLIFrameElement>;
     // (undocumented)
     embedIframeUrlType?: EmbedIframeUrlType;
+    fallbackComponent?: React.ComponentType;
     frameStyle?: FrameStyle;
     // (undocumented)
     id?: string;
@@ -222,7 +223,6 @@ export interface CardProps extends WithAnalyticsEventsProps {
     isSelected?: boolean;
     // (undocumented)
     onClick?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
-    // (undocumented)
     onError?: OnErrorCallback;
     // (undocumented)
     onResolve?: OnResolveCallback;