@atlaskit/smart-card 22.0.0 → 22.1.2

package/dist/types/view/BlockCard/actions/PreviewAction.d.ts

@@ -1,9 +1,11 @@
 import React, { ErrorInfo } from 'react';
 import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
+import { AnalyticsFacade } from '../../../state/analytics';
 import { EmbedModalWithExperimentProps } from '../../EmbedModal/types';
 import { ActionProps } from '../components/Action';
 import { IconProps } from '../../common/Icon';
 import { MetadataProps } from '../../common/Metadata';
+import { AnalyticsOrigin } from '../../../utils/types';
 export interface PreviewFunctionArg extends EmbedModalWithExperimentProps {
     popupMountPointId: string;
 }
@@ -23,6 +25,8 @@ declare type PreviewInfo = {
     onOpen?: () => void;
     onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
     featureFlags?: Partial<LinkingPlatformFeatureFlags>;
+    analytics: AnalyticsFacade;
+    origin?: AnalyticsOrigin;
 };
 declare const _default: ({ details, ...rest }: PreviewInfo) => ActionProps;
 export default _default;

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

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 import { BlockCardProps } from './types';
-export { default as PreviewAction } from './actions/PreviewAction';
 import { AuthorizeAction } from './actions/AuthorizeAction';
 import { ForbiddenAction } from './actions/ForbiddenAction';
 import { ResolvedView as BlockCardResolvedView } from './views/ResolvedView';
-export type { ResolvedViewProps as BlockCardResolvedViewProps } from './views/ResolvedView';
 import { NotFoundView as BlockCardNotFoundView } from './views/NotFoundView';
 import { ResolvingView as BlockCardResolvingView } from './views/ResolvingView';
 import { UnauthorizedView as BlockCardUnauthorisedView } from './views/UnauthorizedView';
 import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
 import { ErroredView as BlockCardErroredView } from './views/ErroredView';
+export { default as PreviewAction } from './actions/PreviewAction';
+export type { ResolvedViewProps as BlockCardResolvedViewProps } from './views/ResolvedView';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView, };
 export declare const BlockCard: FC<BlockCardProps>;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { CardProviderRenderers, CardAuthFlowOpts } from '@atlaskit/link-provider';
+import { CardAuthFlowOpts, CardProviderRenderers } from '@atlaskit/link-provider';
 import { CardState } from '../../state/types';
 import { InvokeHandler } from '../../model/invoke-handler';
-import { AnalyticsHandler } from '../../utils/types';
-import { OnResolveCallback, CardPlatform } from '../Card/types';
+import { CardPlatform, OnResolveCallback } from '../Card/types';
 import { OnErrorCallback } from '../types';
+import { AnalyticsFacade } from '../../state/analytics';
 export declare type BlockCardProps = {
     id: string;
     url: string;
@@ -12,7 +12,6 @@ export declare type BlockCardProps = {
     authFlow?: CardAuthFlowOpts['authFlow'];
     handleAuthorize: (() => void) | undefined;
     handleErrorRetry: () => void;
-    handleAnalytics: AnalyticsHandler;
     handleInvoke: InvokeHandler;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     isSelected?: boolean;
@@ -22,4 +21,5 @@ export declare type BlockCardProps = {
     showActions?: boolean;
     renderers?: CardProviderRenderers;
     platform?: CardPlatform;
+    analytics: AnalyticsFacade;
 };

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, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "placeholder" | "onError" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showHoverPreview" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "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" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "placeholder" | "onError" | "onClick" | "analyticsContext" | "key" | "ui" | "showActions" | "showHoverPreview" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -1,18 +1,18 @@
 import { CardState } from '../../state/types';
 import { InvokeHandler } from '../../model/invoke-handler';
-import { AnalyticsHandler } from '../../utils/types';
 import { CardPlatform, OnResolveCallback } from '../Card/types';
 import { ReactNode } from 'react';
 import { ActionProps } from '../BlockCard/components/Action';
 import { RequestAccessMessageKey } from '../../messages';
 import { OnErrorCallback } from '../types';
+import { AnalyticsFacade } from '../../state/analytics';
 export declare type EmbedCardProps = {
     url: string;
     cardState: CardState;
     handleAuthorize: (() => void) | undefined;
     handleErrorRetry: () => void;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
-    handleAnalytics: AnalyticsHandler;
+    analytics: AnalyticsFacade;
     handleInvoke: InvokeHandler;
     id?: string;
     isSelected?: boolean;

package/dist/types/view/EmbedModal/components/analytics/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EmbedModalProps } from '../../types';
+import { WithAnalytics } from './types';
+declare const withAnalytics: (Component: React.ComponentType<EmbedModalProps>) => React.FC<EmbedModalProps & WithAnalytics>;
+export default withAnalytics;

package/dist/types/view/EmbedModal/components/analytics/types.d.ts

@@ -0,0 +1,6 @@
+import { AnalyticsFacade } from '../../../../state/analytics';
+import { AnalyticsOrigin } from '../../../../utils/types';
+export declare type WithAnalytics = {
+    analytics: AnalyticsFacade;
+    origin?: AnalyticsOrigin;
+};

package/dist/types/view/EmbedModal/components/size-experiment/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ModalProps } from '../../../common/Modal';
-import { EmbedModalProps } from '../../types';
+import Modal from '../../../common/Modal';
 import { WithSizeExperimentProps } from './types';
-declare const withSizeExperiment: (Component: React.ComponentType<EmbedModalProps>) => React.FC<(EmbedModalProps | ModalProps) & WithSizeExperimentProps>;
+declare const withSizeExperiment: <Props, Component>(Component: React.ComponentType<Props>) => React.FC<Props & import("../../types").EmbedModalProps & import("../analytics/types").WithAnalytics & {
+    children?: React.ReactNode;
+} & WithSizeExperimentProps>;
 export default withSizeExperiment;

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

@@ -1,4 +1,6 @@
 import React from 'react';
 import { EmbedModalProps } from './types';
-declare const _default: React.FC<(import("../common/Modal").ModalProps | EmbedModalProps) & import("./components/size-experiment/types").WithSizeExperimentProps>;
+declare const _default: React.FC<EmbedModalProps & import("./components/analytics/types").WithAnalytics & {
+    children?: React.ReactNode;
+} & import("./components/size-experiment/types").WithSizeExperimentProps>;
 export default _default;

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

@@ -2,23 +2,33 @@ import { ErrorInfo } from 'react';
 import { IconProps } from '../common/Icon';
 import { WithSizeExperimentProps } from './components/size-experiment/types';
 import { ModalProps } from '../common/Modal';
+import { WithAnalytics } from './components/analytics/types';
+export declare enum EmbedModalSize {
+    Large = "large",
+    Small = "small"
+}
+export declare type EmbedModalContext = {
+    duration?: number;
+    size: EmbedModalSize;
+};
 export declare type EmbedModalProps = {
     closeLabel?: string;
     download?: string;
     icon?: IconProps;
     iframeName: string;
     isTrusted?: boolean;
-    onClose: () => any;
+    onClose: (context: EmbedModalContext) => void;
     onDownloadActionClick?: () => void;
-    onOpen?: () => void;
+    onOpen?: (context: EmbedModalContext) => void;
     onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
+    onResize?: (context: EmbedModalContext) => void;
     onViewActionClick?: () => void;
     providerName?: string;
     showModal?: boolean;
-    size?: string;
+    size?: EmbedModalSize;
     src?: string;
     testId?: string;
     title?: string;
     url?: string;
 };
-export declare type EmbedModalWithExperimentProps = EmbedModalProps & ModalProps & WithSizeExperimentProps;
+export declare type EmbedModalWithExperimentProps = EmbedModalProps & ModalProps & WithSizeExperimentProps & WithAnalytics;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { HoverCardProps } from './types';
-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>>;
+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, "url" | "children" | "id" | "analyticsContext" | "key"> & import("react").RefAttributes<any>>;

package/dist/types/view/common/Modal.d.ts

@@ -1,15 +1,16 @@
 import React, { ErrorInfo } from 'react';
 import { IconProps } from './Icon';
 import { MetadataListProps } from './MetadataList';
+import { EmbedModalContext } from '../EmbedModal/types';
 export interface ModalProps {
-    onClose: () => any;
-    onOpen?: () => void;
+    onClose: (context: EmbedModalContext) => void;
+    onOpen?: (context: EmbedModalContext) => void;
     onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
     src?: string;
     showModal?: boolean;
     iframeName: string;
     providerName?: string;
-    closeLabel: string;
+    closeLabel?: string;
     url?: string;
     title?: string;
     metadata?: MetadataListProps;
@@ -21,8 +22,5 @@ export interface ModalProps {
     onDownloadActionClick?: () => void;
     testId?: string;
 }
-declare class ModalWithErrorBoundary extends React.Component<ModalProps> {
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): JSX.Element;
-}
-export default ModalWithErrorBoundary;
+declare const _default: React.FC<import("../EmbedModal/types").EmbedModalProps & import("../EmbedModal/components/analytics/types").WithAnalytics>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "22.0.0",
+  "version": "22.1.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,21 +27,21 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/avatar-group": "^9.0.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/dropdown-menu": "^11.3.0",
+    "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.6.0",
-    "@atlaskit/logo": "^13.8.0",
-    "@atlaskit/lozenge": "^11.1.0",
+    "@atlaskit/linking-common": "^1.8.0",
+    "@atlaskit/logo": "^13.9.0",
+    "@atlaskit/lozenge": "^11.2.0",
     "@atlaskit/media-common": "^2.16.0",
-    "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/modal-dialog": "^12.3.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/popup": "^1.4.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.2",
     "@atlaskit/ufo": "^0.1.0",
@@ -58,7 +58,7 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/link-provider": "^1.2.4",
+    "@atlaskit/link-provider": "^1.2.6",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
@@ -71,26 +71,26 @@
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.6",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/inline-message": "^11.3.0",
-    "@atlaskit/lozenge": "^11.1.0",
+    "@atlaskit/inline-message": "^11.4.0",
+    "@atlaskit/lozenge": "^11.2.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
-    "@atlaskit/page": "^12.1.0",
-    "@atlaskit/radio": "^5.3.0",
+    "@atlaskit/page": "^12.2.0",
+    "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/section-message": "^6.1.5",
-    "@atlaskit/select": "^15.6.0",
-    "@atlaskit/table-tree": "^9.1.0",
-    "@atlaskit/tabs": "^13.2.10",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/table-tree": "^9.2.0",
+    "@atlaskit/tabs": "^13.3.0",
     "@atlaskit/textarea": "^4.3.0",
-    "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^8.0.1",
-    "@testing-library/react-hooks": "^1.0.4",
-    "@testing-library/user-event": "10.4.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^1.1.0",
+    "@testing-library/user-event": "^13.5.0",
     "@types/enzyme": "^3.1.15",
     "@types/lorem-ipsum": "^1.0.2",
     "@types/react": "^16.8.0",

package/report.api.md

@@ -115,12 +115,16 @@ export declare type AnalyticsActionSubject =
   | 'applicationAccount'
   | 'button'
   | 'consentModal'
-  | 'hoverCard';
+  | 'hoverCard'
+  | 'modal'
+  | 'embedPreviewModal';
 
 declare type AnalyticsFacade = ReturnType<typeof useSmartLinkAnalytics>;
 
 export declare type AnalyticsHandler = (event: AnalyticsPayload) => void;
 
+declare type AnalyticsName = 'embedPreviewModal';
+
 export declare type AnalyticsPayload = GasPayload & {
   action?: AnalyticsAction;
   actionSubject: AnalyticsActionSubject;
@@ -264,6 +268,7 @@ export declare const Card: React_2.ForwardRefExoticComponent<
     > &
       React_2.RefAttributes<any> &
       WithContextProps,
+    | 'url'
     | 'children'
     | 'data'
     | 'appearance'
@@ -276,10 +281,9 @@ export declare const Card: React_2.ForwardRefExoticComponent<
     | 'onClick'
     | 'analyticsContext'
     | 'key'
-    | 'url'
     | 'ui'
-    | 'showHoverPreview'
     | 'showActions'
+    | 'showHoverPreview'
     | 'onResolve'
     | 'platform'
     | 'isFrameVisible'
@@ -1129,6 +1133,16 @@ export declare const useSmartLinkAnalytics: (
       destinationSubproduct,
       location,
     }: UiAuthAlternateAccountEventProps) => void;
+    /**
+     * This fires an event that represents when a user
+     * click a button.
+     * @param data A partial analytics event payload
+     */
+    buttonClickedEvent: (
+      data: Partial<AnalyticsPayload> & {
+        actionSubjectId: Required<string>;
+      },
+    ) => void;
     /**
      * This fires an event that represents when a user clicks on a Smart Link.
      * @param id The unique ID for this Smart Link.
@@ -1208,6 +1222,15 @@ export declare const useSmartLinkAnalytics: (
       destinationSubproduct,
       location,
     }: UiClosedAuthEventProps) => void;
+    /**
+     * This fires an event that represents when a user close a modal.
+     * @param data A partial analytics event payload
+     */
+    modalClosedEvent: (
+      data: Partial<AnalyticsPayload> & {
+        actionSubjectId: Required<string>;
+      },
+    ) => void;
     /**
      * This fires an event that represents when a Smart Link was rendered successfully.
      * Note: this fires even if the Smart Link request errored out.
@@ -1410,6 +1433,15 @@ export declare const useSmartLinkAnalytics: (
       destinationSubproduct,
       location,
     }: ScreenAuthPopupEventProps) => void;
+    /**
+     * This fires an event that represents when a user view a modal.
+     * @param data A partial analytics event payload
+     */
+    modalViewedEvent: (
+      data: Partial<AnalyticsPayload> & {
+        name: Extract<AnalyticsName, 'embedPreviewModal'>;
+      },
+    ) => void;
   };
 };