@atlaskit/media-card 74.0.0 → 74.1.0

package/dist/esm/utils/viewportDetector.js

@@ -4,30 +4,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import React, { useEffect, forwardRef } from 'react';
-/**
- * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
- * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
- */
-
-export var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
-
-export var ViewportAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
-  if (typeof IntersectionObserver === 'undefined') {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "media-card-viewport-anchor",
-    style: {
-      position: 'absolute',
-      top: "".concat(props.offsetTop, "px"),
-      maxHeight: 0,
-      pointerEvents: 'none'
-    }
-  });
-});
+import React, { useEffect } from 'react';
+import getDocument from './document';
+var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
@@ -55,26 +34,22 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
 var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
       cardEl = _ref.cardEl,
-      children = _ref.children,
-      preAnchorRef = _ref.preAnchorRef,
-      postAnchorRef = _ref.postAnchorRef;
+      children = _ref.children;
   useEffect(function () {
-    // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
-    var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
-    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      root: getDocument(),
+      rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
+    });
     cardEl && intersectionObserver.observe(cardEl);
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
+  }, [cardEl, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
 export var ViewportDetector = function ViewportDetector(_ref2) {
   var cardEl = _ref2.cardEl,
-      preAnchorRef = _ref2.preAnchorRef,
-      postAnchorRef = _ref2.postAnchorRef,
       onVisible = _ref2.onVisible,
       children = _ref2.children;
 
@@ -84,8 +59,6 @@ export var ViewportDetector = function ViewportDetector(_ref2) {
 
   return /*#__PURE__*/React.createElement(ViewportObserver, {
     cardEl: cardEl,
-    preAnchorRef: preAnchorRef,
-    postAnchorRef: postAnchorRef,
     onVisible: onVisible
   }, children);
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.0.0",
+	"version": "74.1.0",
 	"sideEffects": false
 }

package/dist/types/errors.d.ts

@@ -1,5 +1,9 @@
 import { CardPreview } from '.';
-export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'preview-fetch';
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
+export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
 export declare type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
 export declare type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready';
 export declare type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';

package/dist/types/root/card/cardAnalytics.d.ts

@@ -3,7 +3,7 @@ import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../../utils/analytics';
 import { CardStatus } from '../..';
 import { MediaCardError } from './../../errors';
-export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
+export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;
 export declare const fireScreenEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes) => void;

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

@@ -1,6 +1,7 @@
 import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs, FileIdentifier } from '@atlaskit/media-client';
 import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
 import { ImageResizeMode } from '@atlaskit/media-client';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions } from '../../../utils/cardDimensions';
 import { MediaCardError } from '../../../errors';
 import { CardStatus, CardPreview } from '../../../types';
@@ -22,6 +23,8 @@ export declare type CardPreviewParams = {
     isRemotePreviewReady: boolean;
     imageUrlParams: MediaStoreGetFileImageParams;
     mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    featureFlags?: MediaFeatureFlags;
 };
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
@@ -33,7 +36,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, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, }: CardPreviewParams) => Promise<CardPreview>;
 export declare const shouldResolvePreview: ({ status, fileState, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;

package/dist/types/root/card/imageRefetchingAnalytics.d.ts

@@ -0,0 +1,10 @@
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { CardDimensions } from '../../utils';
+import { CardPreviewAttributes } from '../../utils/analytics';
+declare type cardAction = 'cache-hit' | 'remote-success';
+export declare const fireImageFetchingOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, action: cardAction, cardPreviewAttributes: CardPreviewAttributes) => void;
+export declare const calculatePercentageDifference: (prevDimensions: CardDimensions | undefined, currentDimensions: CardDimensions | undefined) => {
+    width: string;
+    height: string;
+} | undefined;
+export {};

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

@@ -8,8 +8,6 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private internalOccurrenceKey;
     private hasBeenMounted;
     private fileStateFlags;
-    private viewportPreAnchorRef;
-    private viewportPostAnchorRef;
     private ssrReliability;
     private timeElapsedTillCommenced;
     subscription?: MediaSubscription;

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

@@ -2,6 +2,18 @@ import { FileDetails, MediaClientErrorReason, RequestMetadata } from '@atlaskit/
 import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
+import { CardDimensions } from './cardDimensions';
+import { CardPreviewSource } from '../types';
+export declare type CardPreviewAttributes = {
+    fileId: string;
+    prevDimensions: CardDimensions | undefined;
+    currentDimensions: CardDimensions | undefined;
+    dimensionsPercentageDiff?: CardDimensions | undefined;
+    source: CardPreviewSource;
+};
+declare type WithCardPreviewCacheAttributes = {
+    cardPreviewAttributes: CardPreviewAttributes;
+};
 export declare const LOGGED_FEATURE_FLAGS: (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
 export declare const LOGGED_FEATURE_FLAG_KEYS: string[];
 export declare type FileUriFailReason = 'local-uri' | 'remote-uri' | `unknown-uri`;
@@ -33,6 +45,8 @@ export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileA
 }, '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 CacheHitEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'cache-hit', 'mediaCardCache'>;
+export declare type RemoteSuccessEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'Remote-success', 'mediaCardCache'>;
 export declare type CopiedFileEventPayload = UIEventPayload<{}, 'copied', string>;
 export declare type ClickedEventPayload = UIEventPayload<{
     label?: string;
@@ -43,11 +57,13 @@ export declare type RenderScreenEventPayload = Omit<ScreenEventPayload<ScreenAtt
         fileAttributes: FileAttributes;
     };
 };
-export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload;
+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 getCacheHitEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => CacheHitEventPayload;
+export declare const getRemoteSuccessEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => RemoteSuccessEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getRenderErrorFailReason: (error: MediaCardError) => FailedErrorFailReason;
 export declare const getRenderErrorErrorReason: (error: MediaCardError) => MediaClientErrorReason | 'nativeError';

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

@@ -1,2 +1,2 @@
-declare const _default: () => Document;
+declare const _default: () => Document | undefined;
 export default _default;

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

@@ -4,4 +4,4 @@ import { SSRStatus } from './analytics';
 import { MediaCardError } from '../errors';
 import { FileStateFlags } from '../types';
 export declare const startUfoExperience: (id: string) => void;
-export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
+export declare const completeUfoExperience: (id: string, status: CardStatus, fileAttributes: FileAttributes, fileStateFlags: FileStateFlags, ssrReliability: SSRStatus, error?: MediaCardError) => void;

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

@@ -1,16 +1,6 @@
 import React from 'react';
-/**
- * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
- * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
- */
-export declare const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900;
-export declare const ViewportAnchor: React.ForwardRefExoticComponent<{
-    offsetTop: number;
-} & React.RefAttributes<HTMLDivElement>>;
 export declare type ViewportDetectorProps = {
     cardEl: HTMLElement | null;
-    preAnchorRef: React.RefObject<HTMLDivElement>;
-    postAnchorRef: React.RefObject<HTMLDivElement>;
     onVisible: () => void;
 };
 export declare const ViewportDetector: React.FC<ViewportDetectorProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "74.0.0",
+  "version": "74.1.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,12 +30,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^11.2.0",
+    "@atlaskit/dropdown-menu": "^11.3.0",
     "@atlaskit/editor-shared-styles": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/media-client": "^17.1.0",
-    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-common": "^2.16.0",
     "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/media-viewer": "^47.0.0",
     "@atlaskit/spinner": "^15.1.0",
@@ -61,12 +61,13 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-message": "^11.2.0",
+    "@atlaskit/inline-message": "^11.3.0",
     "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-picker": "^63.0.1",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",