@atlaskit/media-card 77.7.7 → 77.9.0

package/dist/types/card/cardView.d.ts

@@ -14,12 +14,14 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly shouldOpenMediaViewer: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: CardPreview;
     readonly progress?: number;
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
     readonly onImageLoad: (cardPreview: CardPreview) => void;
     readonly onImageError: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;

package/dist/types/card/ui/openMediaViewerButton/openMediaViewerButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+export declare const visuallyHiddenStyles: import("@emotion/react").SerializedStyles;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
+    fileName: string;
+    innerRef: React.Ref<HTMLButtonElement>;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<{
+        fileName: string;
+        innerRef: React.Ref<HTMLButtonElement>;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/card/v2/cardViewV2.d.ts

@@ -24,7 +24,9 @@ export interface CardViewV2Props {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
@@ -52,5 +54,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2BaseProps) => jsx.JSX.Element;
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, }: CardViewV2BaseProps) => jsx.JSX.Element;
 export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2BaseProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/card/v2/cardviews/cardViewWrapper.d.ts

@@ -9,7 +9,9 @@ export type SharedCardViewProps = {
     readonly cardPreview?: MediaFilePreview;
     readonly testId?: string;
     readonly dimensions?: CardDimensions;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly appearance?: CardAppearance;
     readonly disableOverlay?: boolean;

package/dist/types/card/v2/cardviews/index.d.ts

@@ -13,7 +13,7 @@ export interface CardViewsOwnProps extends SharedCardProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
@@ -25,6 +25,8 @@ export interface CardViewsOwnProps extends SharedCardProps {
     readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
 }
 export type CardViewV2Props = CardViewsOwnProps & WithAnalyticsEventsProps;
 export interface RenderConfigByStatusV2 {
@@ -41,5 +43,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2Props) => jsx.JSX.Element;
+export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, shouldOpenMediaViewer, openMediaViewerButtonRef, }: CardViewV2Props) => jsx.JSX.Element;
 export declare const CardViews: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/index.d.ts

@@ -6,7 +6,8 @@ export type { NumericalCardDimensions } from '@atlaskit/media-common';
 export type { CardAction, CardEventHandler } from './card/actions';
 export type { CardStatus, CardAppearance, CardDimensionValue, CardPreview, TitleBoxIcon, CardEvent, InlineCardEvent, SharedCardProps, CardOnClickCallback, InlineCardOnClickCallback, CardProps, CardState, CardDimensions, } from './types';
 export { Card } from './card';
-export { MediaInlineCard } from './inline';
+export { MediaInlineCard, fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, } from './inline';
+export { MediaCardError } from './errors';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';

package/dist/types/inline/index.d.ts

@@ -1 +1,2 @@
 export { default as MediaInlineCard } from './loader';
+export { fireFailedOperationalEvent as fireFailedMediaInlineEvent, fireSucceededOperationalEvent as fireSucceededMediaInlineEvent, } from './mediaInlineCardAnalytics';

package/dist/types/inline/mediaInlineCardAnalytics.d.ts

@@ -1,6 +1,9 @@
 import { FileState } from '@atlaskit/media-client';
 import { RenderInlineCardFailedEventPayload, RenderInlineCardSucceededEventPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 export declare const getSucceededStatusPayload: (fileState?: FileState) => RenderInlineCardSucceededEventPayload;
 export declare const getErrorStatusPayload: (error: MediaCardError, fileState?: FileState) => RenderInlineCardFailedEventPayload;
 export declare const getFailedProcessingStatusPayload: (fileState?: FileState) => RenderInlineCardFailedEventPayload;
+export declare const fireFailedOperationalEvent: (fileState: FileState, error?: MediaCardError, failReason?: 'failed-processing', createAnalyticsEvent?: CreateUIAnalyticsEvent) => void;
+export declare const fireSucceededOperationalEvent: (fileState: FileState, createAnalyticsEvent?: CreateUIAnalyticsEvent) => void;

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

@@ -10,6 +10,7 @@ export type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<Wrapp
 export declare class CardBase extends Component<CardBaseProps, CardState> {
     private internalOccurrenceKey;
     private hasBeenMounted;
+    private mediaViewerButtonRef;
     private fileStateFlags;
     private ssrReliability;
     private timeElapsedTillCommenced;
@@ -49,9 +50,10 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private safeSetState;
     unsubscribe: () => void;
     get actions(): CardAction[];
-    onCardViewClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onCardViewClick: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     onInlinePlayerError: (e: Error) => void;
     setRef: (cardRef: HTMLDivElement | null) => void;
+    setMediaViewerButtonRef: (buttonRef: HTMLButtonElement | null) => void;
     renderInlinePlayer: () => JSX.Element;
     onMediaViewerClose: () => void;
     private onDisplayImage;
@@ -60,7 +62,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private storeSSRData;
     render(): JSX.Element;
     private onCardInViewport;
-    onClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onClick: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 export declare const Card: React.ComponentType<CardBaseProps>;

package/dist/types-ts4.5/card/cardView.d.ts

@@ -14,12 +14,14 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly shouldOpenMediaViewer: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: CardPreview;
     readonly progress?: number;
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
     readonly onImageLoad: (cardPreview: CardPreview) => void;
     readonly onImageError: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;

package/dist/types-ts4.5/card/ui/openMediaViewerButton/openMediaViewerButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+export declare const visuallyHiddenStyles: import("@emotion/react").SerializedStyles;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
+    fileName: string;
+    innerRef: React.Ref<HTMLButtonElement>;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<{
+        fileName: string;
+        innerRef: React.Ref<HTMLButtonElement>;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.5/card/v2/cardViewV2.d.ts

@@ -24,7 +24,9 @@ export interface CardViewV2Props {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
@@ -52,5 +54,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2BaseProps) => jsx.JSX.Element;
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, }: CardViewV2BaseProps) => jsx.JSX.Element;
 export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2BaseProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardviews/cardViewWrapper.d.ts

@@ -9,7 +9,9 @@ export type SharedCardViewProps = {
     readonly cardPreview?: MediaFilePreview;
     readonly testId?: string;
     readonly dimensions?: CardDimensions;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly appearance?: CardAppearance;
     readonly disableOverlay?: boolean;

package/dist/types-ts4.5/card/v2/cardviews/index.d.ts

@@ -13,7 +13,7 @@ export interface CardViewsOwnProps extends SharedCardProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
-    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
@@ -25,6 +25,8 @@ export interface CardViewsOwnProps extends SharedCardProps {
     readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+    readonly shouldOpenMediaViewer?: boolean;
 }
 export type CardViewV2Props = CardViewsOwnProps & WithAnalyticsEventsProps;
 export interface RenderConfigByStatusV2 {
@@ -41,5 +43,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2Props) => jsx.JSX.Element;
+export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, shouldOpenMediaViewer, openMediaViewerButtonRef, }: CardViewV2Props) => jsx.JSX.Element;
 export declare const CardViews: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -6,7 +6,8 @@ export type { NumericalCardDimensions } from '@atlaskit/media-common';
 export type { CardAction, CardEventHandler } from './card/actions';
 export type { CardStatus, CardAppearance, CardDimensionValue, CardPreview, TitleBoxIcon, CardEvent, InlineCardEvent, SharedCardProps, CardOnClickCallback, InlineCardOnClickCallback, CardProps, CardState, CardDimensions, } from './types';
 export { Card } from './card';
-export { MediaInlineCard } from './inline';
+export { MediaInlineCard, fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, } from './inline';
+export { MediaCardError } from './errors';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';

package/dist/types-ts4.5/inline/index.d.ts

@@ -1 +1,2 @@
 export { default as MediaInlineCard } from './loader';
+export { fireFailedOperationalEvent as fireFailedMediaInlineEvent, fireSucceededOperationalEvent as fireSucceededMediaInlineEvent, } from './mediaInlineCardAnalytics';

package/dist/types-ts4.5/inline/mediaInlineCardAnalytics.d.ts

@@ -1,6 +1,9 @@
 import { FileState } from '@atlaskit/media-client';
 import { RenderInlineCardFailedEventPayload, RenderInlineCardSucceededEventPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 export declare const getSucceededStatusPayload: (fileState?: FileState) => RenderInlineCardSucceededEventPayload;
 export declare const getErrorStatusPayload: (error: MediaCardError, fileState?: FileState) => RenderInlineCardFailedEventPayload;
 export declare const getFailedProcessingStatusPayload: (fileState?: FileState) => RenderInlineCardFailedEventPayload;
+export declare const fireFailedOperationalEvent: (fileState: FileState, error?: MediaCardError, failReason?: 'failed-processing', createAnalyticsEvent?: CreateUIAnalyticsEvent) => void;
+export declare const fireSucceededOperationalEvent: (fileState: FileState, createAnalyticsEvent?: CreateUIAnalyticsEvent) => void;

package/example-helpers/styles.ts

@@ -115,8 +115,6 @@ export const mediaViewerExampleColumnStyles = css`
   flex: 1;
 
   > div {
-    width: initial;
-    height: initial;
   }
 `;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.7.7",
+  "version": "77.9.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,19 +37,19 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/dropdown-menu": "^12.4.0",
+    "@atlaskit/dropdown-menu": "^12.5.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/media-client": "^26.1.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-file-preview": "^0.4.0",
-    "@atlaskit/media-ui": "^25.0.0",
+    "@atlaskit/media-ui": "^25.1.0",
     "@atlaskit/media-viewer": "^48.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.35.0",
+    "@atlaskit/tokens": "^1.36.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",