@atlaskit/media-card 74.1.9 → 74.3.0

package/dist/types/card/getCardPreview/helpers.d.ts

@@ -1,4 +1,5 @@
 import { MediaClient, FilePreview, MediaStoreGetFileImageParams, MediaType } from '@atlaskit/media-client';
+import { MediaTraceContext } from '@atlaskit/media-common';
 import { CardPreview } from '../../types';
 /**
  * This method tells the support for the media
@@ -6,4 +7,4 @@ import { CardPreview } from '../../types';
  */
 export declare const isSupportedLocalPreview: (mediaType?: MediaType | undefined) => boolean;
 export declare const getCardPreviewFromFilePreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<CardPreview>;
-export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams) => Promise<CardPreview>;
+export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceContext?: MediaTraceContext | undefined) => Promise<CardPreview>;

package/dist/types/card/getCardPreview/index.d.ts

@@ -1,5 +1,5 @@
 import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs, FileIdentifier } from '@atlaskit/media-client';
-import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
+import { MediaFeatureFlags, SSR, MediaTraceContext } from '@atlaskit/media-common';
 import { ImageResizeMode } from '@atlaskit/media-client';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions } from '../../types';
@@ -25,6 +25,7 @@ export declare type CardPreviewParams = {
     mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     featureFlags?: MediaFeatureFlags;
+    traceContext?: MediaTraceContext;
 };
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
@@ -36,7 +37,7 @@ export declare type CardPreviewParams = {
  * In that case, we still want to report the local preview error to the caller, for feature realiability track.
  * hence the use of the optional callback onLocalPreviewError
  */
-export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceContext, }: CardPreviewParams) => Promise<CardPreview>;
 export declare const shouldResolvePreview: ({ status, fileState, prevDimensions, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;
@@ -54,4 +55,4 @@ export declare const isSSRPreview: (preview: CardPreview) => boolean;
 export declare const isSSRServerPreview: (preview: CardPreview) => boolean;
 export declare const isSSRClientPreview: (preview: CardPreview) => boolean;
 export declare const isSSRDataPreview: (preview: CardPreview) => boolean;
-export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined) => Promise<CardPreview>;
+export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined, traceContext?: MediaTraceContext | undefined) => Promise<CardPreview>;

package/dist/types/card/styles/index.d.ts

@@ -4,6 +4,6 @@ export type { WithAppearanceProps } from './mixins';
 export { easeOutCubic, easeOutExpo } from './easing';
 export { spin } from './animations';
 export declare const rootStyles: () => import("@emotion/react").SerializedStyles;
-export declare const cardShadow = "\n  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);\n";
+export declare const cardShadow: string;
 export declare const fadeinImageStyles: () => import("@emotion/react").SerializedStyles;
 export default rootStyles;

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

@@ -1,5 +1,5 @@
 import { FileDetails, MediaClientErrorReason, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
 import { CardPreviewSource, CardDimensions } from '../types';
@@ -37,13 +37,13 @@ export declare type SSRStatus = {
 export declare type WithSSRReliability = {
     ssrReliability?: SSRStatus;
 };
-export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & FailureAttributes & {
+export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & WithTraceContext & FailureAttributes & {
     failReason: FailedErrorFailReason | 'failed-processing';
     error?: MediaClientErrorReason | 'nativeError';
     request?: RequestMetadata;
 }, 'failed', 'mediaCardRender'>;
-export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes, 'succeeded', 'mediaCardRender'>;
-export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, 'commenced', 'mediaCardRender'>;
+export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes & WithTraceContext, 'succeeded', 'mediaCardRender'>;
+export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithTraceContext, 'commenced', 'mediaCardRender'>;
 export declare type CacheHitEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'cache-hit', 'mediaCardCache'>;
 export declare type RemoteSuccessEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'Remote-success', 'mediaCardCache'>;
 export declare type CopiedFileEventPayload = UIEventPayload<{}, 'copied', string>;
@@ -59,8 +59,8 @@ export declare type RenderScreenEventPayload = Omit<ScreenEventPayload<ScreenAtt
 export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload | CacheHitEventPayload | RemoteSuccessEventPayload;
 export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: import("@atlaskit/media-common").FileStatus | undefined) => FileAttributes;
 export declare const getRenderPreviewableCardPayload: (fileAttributes: FileAttributes) => RenderScreenEventPayload;
-export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderCommencedEventPayload;
-export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderSucceededEventPayload;
+export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => RenderCommencedEventPayload;
+export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderSucceededEventPayload;
 export declare const getCacheHitEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => CacheHitEventPayload;
 export declare const getRemoteSuccessEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => RemoteSuccessEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
@@ -69,8 +69,8 @@ export declare const getRenderErrorErrorReason: (error: MediaCardError) => Media
 export declare const getRenderErrorErrorDetail: (error: MediaCardError) => string;
 export declare const getRenderErrorRequestMetadata: (error: MediaCardError) => RequestMetadata | undefined;
 export declare const extractErrorInfo: (error: MediaCardError) => MediaCardErrorInfo;
-export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus) => RenderFailedEventPayload;
-export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderFailedEventPayload;
+export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
+export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
 export declare const getCopiedFilePayload: (fileId: string) => CopiedFileEventPayload;
 export declare function fireMediaCardEvent(payload: MediaCardAnalyticsEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
 export declare const createAndFireMediaCardEvent: (payload: MediaCardAnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

package/example-helpers/styles.ts

@@ -1,8 +1,9 @@
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 
 export const editableCardOptionsStyles = css`
   padding: 20px;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid ${token('color.border', '#ccc')};
   max-width: 700px;
 `;
 
@@ -22,7 +23,10 @@ export const editableCardContentStyles = css`
   border: 2px dashed;
   margin: 0 10px 50px 10px;
   overflow: hidden;
-  background: antiquewhite;
+  background: ${token(
+    'color.background.accent.orange.subtlest',
+    'antiquewhite',
+  )};
   box-sizing: border-box;
 `;
 
@@ -40,7 +44,7 @@ export const cardDimensionsWrapperStyles = css`
   display: flex;
 
   > div {
-    border: 1px solid;
+    border: 1px solid ${token('color.border.bold', 'black')};
     margin: 5px;
     padding: 5px;
     border-radius: 3px;
@@ -55,7 +59,7 @@ export const cardPreviewWrapperStyles = css`
 `;
 
 export const cardWrapperStyles = css`
-  border: 1px solid;
+  border: 1px solid ${token('color.border.bold', 'black')};
   padding: 10px;
   margin: 5px;
   flex-direction: column;
@@ -82,7 +86,7 @@ export const externalIdentifierWrapperStyles = css`
 
 export const inlineCardVideoWrapperItemStyles = css`
   padding: 10px;
-  border: 1px solid;
+  border: 1px solid ${token('color.border.bold', 'black')};
   margin: 10px;
 `;
 
@@ -110,6 +114,6 @@ export const mediaInlineTableStyles = css`
   width: 800px;
   tr,
   td {
-    border: 1px solid #ddd;
+    border: 1px solid ${token('color.border', '#ddd')};
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "74.1.9",
+  "version": "74.3.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "af:exports": {
@@ -40,20 +32,20 @@
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^18.0.0",
-    "@atlaskit/media-common": "^2.16.0",
-    "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^47.1.0",
-    "@atlaskit/spinner": "^15.1.0",
+    "@atlaskit/media-client": "^19.0.0",
+    "@atlaskit/media-common": "^2.17.0",
+    "@atlaskit/media-ui": "^22.2.0",
+    "@atlaskit/media-viewer": "^47.2.0",
+    "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/tokens": "^0.11.1",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "eventemitter2": "^4.1.0",
     "lru_map": "^0.4.1",
-    "react-loadable": "^5.1.0",
-    "video-snapshot": "^1.0.11"
+    "react-loadable": "^5.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
@@ -64,7 +56,7 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.4.0",
@@ -72,8 +64,8 @@
     "@atlaskit/media-picker": "^64.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/range": "^6.1.0",
-    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/range": "^7.0.0",
+    "@atlaskit/select": "^16.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
@@ -94,5 +86,10 @@
     "uuid": "^3.1.0",
     "wait-for-expect": "^1.2.0"
   },
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }