@atlaskit/media-card 77.4.6 → 77.4.8

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

@@ -1,21 +1,16 @@
-import React from 'react';
-import { FileIdentifier, MediaClient, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
-import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+/// <reference types="react" />
+import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { MediaTraceContext, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
 import { MediaCardError } from '../../errors';
-import { CardDimensions, CardPreview } from '../../types';
+import { CardPreview } from '../../types';
 import { SSRStatus } from '../../utils/analytics';
-import { NumericalCardDimensions } from '@atlaskit/media-common';
 export interface UseFilePreviewParams {
     /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
-    /** Instance of MediaClient. */
-    readonly mediaClient: MediaClient;
     /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit' */
     readonly resizeMode?: ImageResizeMode;
-    /** Custom media card dimension like width and height. */
-    readonly dimensions?: CardDimensions;
-    /** Dimensions to be requested to the server */
-    readonly requestedDimensions: NumericalCardDimensions;
+    /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
+    readonly dimensions?: Partial<NumericalCardDimensions>;
     /** Server-Side-Rendering modes are "server" and "client" */
     readonly ssr?: SSR;
     /** Attributes to attach to the created Blob Url */
@@ -27,12 +22,12 @@ export interface UseFilePreviewParams {
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, mediaClient, dimensions, requestedDimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
     cardPreview: CardPreview | undefined;
     error: MediaCardError | undefined;
     nonCriticalError: MediaCardError | undefined;
-    ssrReliabilityRef: React.MutableRefObject<SSRStatus>;
+    ssrReliabilityRef: import("react").MutableRefObject<SSRStatus>;
     onImageError: (newCardPreview?: CardPreview) => void;
     onImageLoad: (newCardPreview?: CardPreview) => void;
-    StoreSSRDataScript: () => JSX.Element;
+    getScriptProps: () => import("react").ScriptHTMLAttributes<HTMLScriptElement>;
 };

package/dist/types/utils/getDataURIDimension.d.ts

@@ -1,9 +1,26 @@
 import { CardDimensions } from '../types';
 import { ElementDimension } from './getElementDimension';
 import { NumericalCardDimensions } from '@atlaskit/media-common';
+/**
+ * ************************************************
+ * For Card v1
+ * ************************************************
+ */
 export type getDataURIDimensionOptions = {
     element?: Element | null;
     dimensions?: CardDimensions;
 };
 export declare const getDataURIDimension: (dimension: ElementDimension, options: getDataURIDimensionOptions) => number;
 export declare const getRequestedDimensions: (options: getDataURIDimensionOptions) => NumericalCardDimensions;
+/**
+ * ************************************************
+ * For Card v2
+ * ************************************************
+ */
+type ResolveCardDimensionOptions = {
+    element?: Element | null;
+    dimensions?: CardDimensions;
+};
+export declare const resolveCardPreviewDimension: (dimensionName: ElementDimension, { dimensions, element }: ResolveCardDimensionOptions) => number;
+export declare const resolveCardPreviewDimensions: (options: ResolveCardDimensionOptions) => NumericalCardDimensions;
+export {};

package/dist/types/utils/globalScope/globalScope.d.ts

@@ -11,11 +11,5 @@ export type MediaGlobalScope = {
 export declare function getMediaGlobalScope(globalScope?: any): MediaGlobalScope;
 export declare function getMediaCardSSR(globalScope?: any): MediaCardSsr;
 export declare const getKey: ({ id, collectionName, occurrenceKey }: FileIdentifier) => string;
-export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: NumericalCardDimensions, error?: MediaCardErrorInfo, globalScope?: any) => void;
-export type StoreSSRDataScriptProps = {
-    identifier: FileIdentifier;
-    dataURI?: string;
-    dimensions?: NumericalCardDimensions;
-    error?: MediaCardErrorInfo;
-};
-export declare const StoreSSRDataScript: React.FC<StoreSSRDataScriptProps>;
+export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo, globalScope?: any) => void;
+export declare const generateScriptProps: (identifier: FileIdentifier, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo) => React.ScriptHTMLAttributes<HTMLScriptElement>;

package/dist/types/utils/globalScope/index.d.ts

@@ -1,4 +1,4 @@
-export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey, } from './globalScope';
+export { GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, generateScriptProps, getKey, } from './globalScope';
 export { getSSRData } from './getSSRData';
 export type { MediaCardSsrData, MediaCardSsr } from './types';
 export type { MediaGlobalScope } from './globalScope';

package/dist/types/utils/globalScope/types.d.ts

@@ -2,7 +2,7 @@ import { NumericalCardDimensions } from '@atlaskit/media-common';
 import { MediaCardErrorInfo } from '../../utils/analytics';
 export type MediaCardSsrData = {
     dataURI?: string;
-    dimensions?: NumericalCardDimensions;
+    dimensions?: Partial<NumericalCardDimensions>;
     error?: MediaCardErrorInfo;
 };
 export type MediaCardSsr = Record<string, MediaCardSsrData>;

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

@@ -2,11 +2,22 @@
 import { jsx } from '@emotion/react';
 import React, { MouseEvent } from 'react';
 import { MessageDescriptor } from 'react-intl-next';
-import { MediaItemType, FileDetails } from '@atlaskit/media-client';
+import { MediaItemType, FileDetails, ImageResizeMode } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { SharedCardProps, CardStatus, CardPreview, MediaCardCursor } from '../../types';
+import { CardStatus, CardPreview, MediaCardCursor, CardDimensions, TitleBoxIcon } from '../../types';
+import { CardAction } from '../actions';
 import { MediaCardError } from '../../errors';
-export interface CardViewV2OwnProps extends SharedCardProps {
+export interface CardViewV2Props {
+    readonly disableOverlay?: boolean;
+    readonly resizeMode?: ImageResizeMode;
+    readonly dimensions: CardDimensions;
+    readonly actions?: Array<CardAction>;
+    readonly selectable?: boolean;
+    readonly selected?: boolean;
+    readonly alt?: string;
+    readonly testId?: string;
+    readonly titleBoxBgColor?: string;
+    readonly titleBoxIcon?: TitleBoxIcon;
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
     readonly mediaCardCursor?: MediaCardCursor;
@@ -25,7 +36,7 @@ export interface CardViewV2OwnProps extends SharedCardProps {
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
 }
-export type CardViewV2Props = CardViewV2OwnProps & WithAnalyticsEventsProps;
+export type CardViewV2BaseProps = CardViewV2Props & WithAnalyticsEventsProps;
 export interface RenderConfigByStatusV2 {
     renderTypeIcon?: boolean;
     iconMessage?: JSX.Element;
@@ -40,5 +51,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewV2Base: ({ 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 CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+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 CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2BaseProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -1,19 +1,53 @@
 /// <reference types="react" />
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { FileIdentifier, Identifier, MediaClient } from '@atlaskit/media-client';
-import { SSR } from '@atlaskit/media-common';
-import { CardEventProps, SharedCardProps } from '../../types';
-export interface FileCardProps extends SharedCardProps, CardEventProps {
-    readonly mediaClient: MediaClient;
+import { FileIdentifier, Identifier, ImageResizeMode } from '@atlaskit/media-client';
+import { MediaFeatureFlags, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
+import { CardAppearance, CardDimensions, CardEventProps, TitleBoxIcon } from '../../types';
+import { CardAction } from '../actions';
+export interface FileCardProps extends CardEventProps {
+    /** Overlay the media file. */
+    readonly disableOverlay?: boolean;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit'. */
+    readonly resizeMode?: ImageResizeMode;
+    readonly featureFlags?: MediaFeatureFlags;
+    /** Sets meida card appearance */
+    readonly appearance?: CardAppearance;
+    /** Custom media card dimension like width and height. */
+    readonly dimensions?: CardDimensions;
+    /** Original media card dimension like width and height. */
+    readonly originalDimensions?: NumericalCardDimensions;
+    /** Array of additional media card actions. */
+    readonly actions?: Array<CardAction>;
+    /** Enable media card selectable. */
+    readonly selectable?: boolean;
+    /** Renders media card as selected, if selected is true. */
+    readonly selected?: boolean;
+    /** Alternate text for an media card. */
+    readonly alt?: string;
+    /** ID for testing the media card. */
+    readonly testId?: string;
+    /** Sets the title box background color. */
+    readonly titleBoxBgColor?: string;
+    /** Sets the title box icon. */
+    readonly titleBoxIcon?: TitleBoxIcon;
+    /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
+    /** Lazy loads the media file. */
     readonly isLazy?: boolean;
+    /** Uses the inline player for media file. */
     readonly useInlinePlayer?: boolean;
+    /** Uses media MediaViewer to preview the media file. */
     readonly shouldOpenMediaViewer?: boolean;
+    /** Media file list to display in Media Viewer. */
     readonly mediaViewerItems?: Identifier[];
+    /** Retrieve auth based on a given context. */
     readonly contextId?: string;
+    /** Enables the download button for media file. */
     readonly shouldEnableDownloadButton?: boolean;
+    /** Server-Side-Rendering modes are "server" and "client" */
     readonly ssr?: SSR;
+    /** Disable tooltip for the card */
     readonly shouldHideTooltip?: boolean;
 }
 export type FileCardBaseProps = FileCardProps & WithAnalyticsEventsProps;
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, mediaClient, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, createAnalyticsEvent, }: FileCardBaseProps) => JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, createAnalyticsEvent, }: FileCardBaseProps) => JSX.Element;

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

@@ -1,21 +1,16 @@
-import React from 'react';
-import { FileIdentifier, MediaClient, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
-import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+/// <reference types="react" />
+import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { MediaTraceContext, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
 import { MediaCardError } from '../../errors';
-import { CardDimensions, CardPreview } from '../../types';
+import { CardPreview } from '../../types';
 import { SSRStatus } from '../../utils/analytics';
-import { NumericalCardDimensions } from '@atlaskit/media-common';
 export interface UseFilePreviewParams {
     /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
-    /** Instance of MediaClient. */
-    readonly mediaClient: MediaClient;
     /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit' */
     readonly resizeMode?: ImageResizeMode;
-    /** Custom media card dimension like width and height. */
-    readonly dimensions?: CardDimensions;
-    /** Dimensions to be requested to the server */
-    readonly requestedDimensions: NumericalCardDimensions;
+    /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
+    readonly dimensions?: Partial<NumericalCardDimensions>;
     /** Server-Side-Rendering modes are "server" and "client" */
     readonly ssr?: SSR;
     /** Attributes to attach to the created Blob Url */
@@ -27,12 +22,12 @@ export interface UseFilePreviewParams {
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, mediaClient, dimensions, requestedDimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
     cardPreview: CardPreview | undefined;
     error: MediaCardError | undefined;
     nonCriticalError: MediaCardError | undefined;
-    ssrReliabilityRef: React.MutableRefObject<SSRStatus>;
+    ssrReliabilityRef: import("react").MutableRefObject<SSRStatus>;
     onImageError: (newCardPreview?: CardPreview) => void;
     onImageLoad: (newCardPreview?: CardPreview) => void;
-    StoreSSRDataScript: () => JSX.Element;
+    getScriptProps: () => import("react").ScriptHTMLAttributes<HTMLScriptElement>;
 };

package/dist/types-ts4.5/utils/getDataURIDimension.d.ts

@@ -1,9 +1,26 @@
 import { CardDimensions } from '../types';
 import { ElementDimension } from './getElementDimension';
 import { NumericalCardDimensions } from '@atlaskit/media-common';
+/**
+ * ************************************************
+ * For Card v1
+ * ************************************************
+ */
 export type getDataURIDimensionOptions = {
     element?: Element | null;
     dimensions?: CardDimensions;
 };
 export declare const getDataURIDimension: (dimension: ElementDimension, options: getDataURIDimensionOptions) => number;
 export declare const getRequestedDimensions: (options: getDataURIDimensionOptions) => NumericalCardDimensions;
+/**
+ * ************************************************
+ * For Card v2
+ * ************************************************
+ */
+type ResolveCardDimensionOptions = {
+    element?: Element | null;
+    dimensions?: CardDimensions;
+};
+export declare const resolveCardPreviewDimension: (dimensionName: ElementDimension, { dimensions, element }: ResolveCardDimensionOptions) => number;
+export declare const resolveCardPreviewDimensions: (options: ResolveCardDimensionOptions) => NumericalCardDimensions;
+export {};

package/dist/types-ts4.5/utils/globalScope/globalScope.d.ts

@@ -11,11 +11,5 @@ export type MediaGlobalScope = {
 export declare function getMediaGlobalScope(globalScope?: any): MediaGlobalScope;
 export declare function getMediaCardSSR(globalScope?: any): MediaCardSsr;
 export declare const getKey: ({ id, collectionName, occurrenceKey }: FileIdentifier) => string;
-export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: NumericalCardDimensions, error?: MediaCardErrorInfo, globalScope?: any) => void;
-export type StoreSSRDataScriptProps = {
-    identifier: FileIdentifier;
-    dataURI?: string;
-    dimensions?: NumericalCardDimensions;
-    error?: MediaCardErrorInfo;
-};
-export declare const StoreSSRDataScript: React.FC<StoreSSRDataScriptProps>;
+export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo, globalScope?: any) => void;
+export declare const generateScriptProps: (identifier: FileIdentifier, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo) => React.ScriptHTMLAttributes<HTMLScriptElement>;

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

@@ -1,4 +1,4 @@
-export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey, } from './globalScope';
+export { GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, generateScriptProps, getKey, } from './globalScope';
 export { getSSRData } from './getSSRData';
 export type { MediaCardSsrData, MediaCardSsr } from './types';
 export type { MediaGlobalScope } from './globalScope';

package/dist/types-ts4.5/utils/globalScope/types.d.ts

@@ -2,7 +2,7 @@ import { NumericalCardDimensions } from '@atlaskit/media-common';
 import { MediaCardErrorInfo } from '../../utils/analytics';
 export type MediaCardSsrData = {
     dataURI?: string;
-    dimensions?: NumericalCardDimensions;
+    dimensions?: Partial<NumericalCardDimensions>;
     error?: MediaCardErrorInfo;
 };
 export type MediaCardSsr = Record<string, MediaCardSsrData>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.4.6",
+  "version": "77.4.8",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/editor-shared-styles": "^2.8.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/media-client": "^25.1.0",
-    "@atlaskit/media-client-react": "^1.4.0",
+    "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/media-viewer": "^48.2.0",
@@ -64,16 +64,17 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
+    "@af/integration-testing": "*",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/inline-message": "^12.0.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-picker": "^66.2.0",
     "@atlaskit/media-state": "^1.0.0",
+    "@atlaskit/media-test-data": "^1.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.2.0",
     "@testing-library/dom": "^8.17.1",
@@ -95,6 +96,9 @@
   "platform-feature-flags": {
     "platform.media-experience.cardv2_7zann": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-media_er96o": {
+      "type": "boolean"
     }
   },
   "techstack": {