@atlaskit/media-card 77.11.2 → 77.12.0

package/dist/esm/card/v2/cardviews/cardViewWrapper.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef"];
+var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef", "overriddenCreationDate"];
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
-import { Wrapper } from '../../ui/wrapper';
+import { ImageContainer, Wrapper } from '../../ui/wrapper';
 import { attachDetailsToActions } from '../../actions';
-import { cardImageContainerStyles } from '../../ui/styles';
 import { TitleBox } from '../../ui/titleBox/titleBox';
 import { TickBox } from '../../ui/tickBox/tickBox';
 import { Blanket } from '../../ui/blanket/blanket';
@@ -39,6 +38,7 @@ export var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
     openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    overriddenCreationDate = _ref.overriddenCreationDate,
     props = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = metadata || {},
     name = _ref2.name,
@@ -48,17 +48,16 @@ export var CardViewWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var defaultBlanket = !disableOverlay && jsx(Blanket, null);
   var defaultTitleBox = !disableOverlay && !!name && jsx(TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
-  var contents = jsx(React.Fragment, null, jsx("div", _extends({
-    css: cardImageContainerStyles,
-    className: fileCardImageViewSelector,
-    "data-testid": fileCardImageViewSelector,
-    "data-test-media-name": name,
-    "data-test-selected": selected ? true : undefined
+  var contents = jsx(React.Fragment, null, jsx(ImageContainer, _extends({
+    testId: fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    selected: selected ? true : undefined
   }, props), children, customBlanket ? customBlanket() : defaultBlanket, customTitleBox ? customTitleBox() : defaultTitleBox, !disableOverlay && !!selectable && jsx(TickBox, {
     selected: selected
   }), progressBar && progressBar()), !disableOverlay && actions && actions.length !== 0 && jsx(ActionsBar, {

package/dist/esm/card/v2/cardviews/index.js

@@ -42,7 +42,8 @@ export var CardViewsBase = function CardViewsBase(_ref) {
     error = _ref.error,
     disableAnimation = _ref.disableAnimation,
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
-    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef;
+    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef,
+    overriddenCreationDate = _ref.overriddenCreationDate;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     didImageRender = _useState2[0],
@@ -101,7 +102,8 @@ export var CardViewsBase = function CardViewsBase(_ref) {
       mediaCardCursor: mediaCardCursor,
       innerRef: innerRef,
       shouldOpenMediaViewer: shouldOpenMediaViewer,
-      openMediaViewerButtonRef: openMediaViewerButtonRef
+      openMediaViewerButtonRef: openMediaViewerButtonRef,
+      overriddenCreationDate: overriddenCreationDate
     };
     switch (status) {
       case 'uploading':

package/dist/esm/card/v2/fileCard.js

@@ -29,6 +29,9 @@ import { CardViews } from './cardviews';
 import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
 import { useFilePreview } from '@atlaskit/media-file-preview';
 import { performanceNow } from './performance';
+import { useContext } from 'react';
+import { DateOverrideContext } from '../../dateOverrideContext';
+import { SvgView } from './svgView';
 var LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardViewV2;
 export var FileCard = function FileCard(_ref) {
   var _ref$appearance = _ref.appearance,
@@ -103,6 +106,8 @@ export var FileCard = function FileCard(_ref) {
     return prevFileState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileState]);
+  var dateOverrides = useContext(DateOverrideContext);
+  var overridenDate = dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id];
 
   //----------------------------------------------------------------//
   //------------ State, Refs & Initial Values ----------------------//
@@ -136,12 +141,16 @@ export var FileCard = function FileCard(_ref) {
     setIsPlayingFile = _useState8[1];
   var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    shouldAutoplay = _useState10[0],
-    setShouldAutoplay = _useState10[1];
+    shouldRenderSVG = _useState10[0],
+    setShouldRenderSVG = _useState10[1];
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    previewDidRender = _useState12[0],
-    setPreviewDidRender = _useState12[1];
+    shouldAutoplay = _useState12[0],
+    setShouldAutoplay = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    previewDidRender = _useState14[0],
+    setPreviewDidRender = _useState14[1];
   var mediaBlobUrlAttrs = useMemo(function () {
     var id = identifier.id,
       collection = identifier.collectionName;
@@ -177,18 +186,18 @@ export var FileCard = function FileCard(_ref) {
     onImageErrorBase = _useFilePreview.onImageError,
     onImageLoadBase = _useFilePreview.onImageLoad,
     getSsrScriptProps = _useFilePreview.getSsrScriptProps;
-  var _useState13 = useState(),
-    _useState14 = _slicedToArray(_useState13, 2),
-    error = _useState14[0],
-    setError = _useState14[1];
+  var _useState15 = useState(),
+    _useState16 = _slicedToArray(_useState15, 2),
+    error = _useState16[0],
+    setError = _useState16[1];
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
   var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' ? previewError : undefined);
   var finalStatus = finalError ? 'error' : status;
-  var _useState15 = useState(null),
-    _useState16 = _slicedToArray(_useState15, 2),
-    mediaViewerSelectedItem = _useState16[0],
-    setMediaViewerSelectedItem = _useState16[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    mediaViewerSelectedItem = _useState18[0],
+    setMediaViewerSelectedItem = _useState18[1];
   var uploadProgressRef = useRef();
   var metadata = useMemo(function () {
     var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
@@ -426,6 +435,23 @@ export var FileCard = function FileCard(_ref) {
     }
   }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isPlayingFile, finalStatus, useInlinePlayer]);
 
+  //----------------------------------------------------------------//
+  // Switch to SVG
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    if (getBooleanFF('platform.media-svg-rendering') &&
+    /**
+     * We need to check that the card is visible before switching to SVG
+     * in order to avoid race conditions of the ViewportDector being unmounted before
+     * it is able to set isCardVisible to true.
+     */
+    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay // SVG won't be supported when overlay is on
+    ) {
+      setShouldRenderSVG(true);
+    }
+  }, [isCardVisible, disableOverlay, metadata]);
+
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
   //----------------------------------------------------------------//
@@ -493,6 +519,18 @@ export var FileCard = function FileCard(_ref) {
     updateFileStateRef.current();
   }, [fileState, preview, previewStatus, updateFileStateRef]);
 
+  //----------------------------------------------------------------//
+  // Shared Card View & SVG View resources
+  //----------------------------------------------------------------//
+
+  var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
+  var onImageMouseEnter = function onImageMouseEnter(event) {
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
+      event: event,
+      mediaItemDetails: metadata
+    });
+  };
+
   //----------------------------------------------------------------//
   //---------------------- Render Card Function --------------------//
   //----------------------------------------------------------------//
@@ -512,7 +550,6 @@ export var FileCard = function FileCard(_ref) {
     var nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && isSSRPreview(preview);
     // Force Media Image to always display img for SSR
     var forceSyncDisplay = !!ssr;
-    var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
     var card = /*#__PURE__*/React.createElement(LoadedCardView, {
       status: cardStatusOverride || finalStatus,
       error: finalError,
@@ -528,12 +565,7 @@ export var FileCard = function FileCard(_ref) {
       shouldOpenMediaViewer: shouldOpenMediaViewer,
       openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
-      onMouseEnter: withCallbacks ? function (event) {
-        onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
-          event: event,
-          mediaItemDetails: metadata
-        });
-      } : undefined,
+      onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
       disableOverlay: disableOverlay,
       progress: uploadProgressRef.current,
       onDisplayImage: withCallbacks ? function () {
@@ -554,7 +586,8 @@ export var FileCard = function FileCard(_ref) {
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
       mediaCardCursor: mediaCardCursor,
-      shouldHideTooltip: shouldHideTooltip
+      shouldHideTooltip: shouldHideTooltip,
+      overriddenCreationDate: overridenDate
     });
     return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
       cardEl: cardElement,
@@ -589,7 +622,25 @@ export var FileCard = function FileCard(_ref) {
     testId: testId,
     cardPreview: preview,
     videoControlsWrapperRef: videoControlsWrapperRef
-  })) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+  })) : shouldRenderSVG ? /*#__PURE__*/React.createElement(SvgView, {
+    testId: testId,
+    identifier: identifier,
+    status: finalStatus,
+    fileName: metadata.name,
+    cardPreview: preview,
+    alt: alt,
+    resizeMode: resizeMode,
+    dimensions: cardDimensions,
+    selected: selected,
+    onClick: onCardViewClick,
+    onMouseEnter: onImageMouseEnter,
+    progress: uploadProgressRef.current,
+    onImageError: onImageError,
+    onImageLoad: onImageLoad,
+    mediaCardCursor: mediaCardCursor,
+    shouldOpenMediaViewer: shouldOpenMediaViewer,
+    openMediaViewerButtonRef: mediaViewerButtonRef
+  }) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
     collectionName: collectionName,
     items: mediaViewerItems || [],
     mediaClientConfig: mediaClient.config,

package/dist/esm/card/v2/svgView/helpers.js

@@ -0,0 +1,10 @@
+export var calculateSvgDimensions = function calculateSvgDimensions(img, resizeMode) {
+  var naturalWidth = img.naturalWidth,
+    naturalHeight = img.naturalHeight;
+  var isLadscape = naturalWidth / naturalHeight > 1;
+  return resizeMode === 'crop' ? isLadscape ? {
+    height: '100%'
+  } : {
+    width: '100%'
+  } : {};
+};

package/dist/esm/card/v2/svgView/index.js

@@ -0,0 +1 @@
+export { SvgView } from './svgView';

package/dist/esm/card/v2/svgView/svgView.js

@@ -0,0 +1,123 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { useState, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { ImageRenderer } from '../../ui/imageRenderer/imageRenderer';
+import { ProgressBar } from '../../ui/progressBar/progressBar';
+import { Blanket } from '../../ui/blanket/blanket';
+import { Wrapper, ImageContainer } from '../../ui/wrapper';
+import { fileCardImageViewSelector } from '../../classnames';
+import { useBreakpoint } from '../../useBreakpoint';
+import MediaSvg from '@atlaskit/media-svg';
+import { calculateSvgDimensions } from './helpers';
+import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
+export var convertResizeMode = function convertResizeMode(resizeMode) {
+  switch (resizeMode) {
+    case 'crop':
+      return 'cover';
+    case 'fit':
+    case 'full-fit':
+      return 'scale-down';
+    case 'stretchy-fit':
+      return 'contain';
+    default:
+      return;
+  }
+};
+export var SvgViewBase = function SvgViewBase(_ref) {
+  var identifier = _ref.identifier,
+    dimensions = _ref.dimensions,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    testId = _ref.testId,
+    status = _ref.status,
+    selected = _ref.selected,
+    fileName = _ref.fileName,
+    cardPreview = _ref.cardPreview,
+    mediaCardCursor = _ref.mediaCardCursor,
+    progress = _ref.progress,
+    alt = _ref.alt,
+    resizeMode = _ref.resizeMode,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    didSvgRender = _useState2[0],
+    setDidSvgRender = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    didPreviewRender = _useState4[0],
+    setDidPreviewRender = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    svgDimensions = _useState6[0],
+    setSvgDimensions = _useState6[1];
+  var divRef = useRef(null);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var onSvgLoad = function onSvgLoad(evt) {
+    setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
+    setDidSvgRender(true);
+  };
+  var onPreviewLoad = function onPreviewLoad() {
+    setDidPreviewRender(true);
+  };
+  return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
+    fileName: fileName !== null && fileName !== void 0 ? fileName : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), jsx(Wrapper, {
+    testId: testId || 'media-card-svg-wrapper',
+    dimensions: dimensions,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    innerRef: divRef,
+    mediaCardCursor: mediaCardCursor,
+    selected: !!selected,
+    breakpoint: breakpoint,
+    disableOverlay: true,
+    displayBackground: !didSvgRender && !didPreviewRender,
+    isTickBoxSelectable: false,
+    shouldDisplayTooltip: false,
+    isPlayButtonClickable: false
+  }, jsx(ImageContainer, {
+    centerElements: true,
+    testId: fileCardImageViewSelector,
+    mediaName: fileName,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+  }, jsx(MediaSvg, {
+    testId: "media-card-svg",
+    identifier: identifier,
+    dimensions: svgDimensions,
+    onLoad: onSvgLoad,
+    style: {
+      visibility: didSvgRender ? 'visible' : 'hidden',
+      objectFit: convertResizeMode(resizeMode)
+    }
+  }), !!cardPreview && !didSvgRender && jsx(ImageRenderer, {
+    cardPreview: cardPreview,
+    onImageLoad: onPreviewLoad,
+    mediaType: 'image',
+    alt: alt,
+    resizeMode: resizeMode
+  }), status === 'uploading' && jsx(Blanket, {
+    isFixed: true
+  }), status === 'uploading' && jsx(ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: true
+  }))));
+};
+export var SvgView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(SvgViewBase);

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.11.2",
+        packageName: "77.12.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -53,13 +53,17 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   }, isSelected ? _objectSpread({}, selectedStyle) : {
     userSelect: 'text'
   });
-  return /*#__PURE__*/React.createElement("span", {
-    style: style
-  }, /*#__PURE__*/React.createElement(WarningIcon, {
-    label: "error",
-    size: "small",
-    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
-  }), message);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    React.createElement("span", {
+      style: style
+    }, /*#__PURE__*/React.createElement(WarningIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
+    }), message)
+  );
 };
 var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(WrappedMediaInlineAnalyticsErrorBoundary, _React$Component);

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.2";
+var packageVersion = "77.12.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

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

@@ -1,5 +1,5 @@
-import { FileItem, FileDetails } from '@atlaskit/media-client';
-import { ReactNode } from 'react';
+import { type FileItem, type FileDetails } from '@atlaskit/media-client';
+import { type ReactNode } from 'react';
 export interface CardAction {
     label?: string;
     handler: CardEventHandler;

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

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { FileIdentifier, FileState, MediaSubscription } from '@atlaskit/media-client';
-import { WrappedComponentProps } from 'react-intl-next';
-import { CardAction } from './actions';
-import { CardProps, CardState, CardStatus } from '../types';
+import { type UIAnalyticsEvent, type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type FileIdentifier, type FileState, type MediaSubscription } from '@atlaskit/media-client';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type CardAction } from './actions';
+import { type CardProps, type CardState, type CardStatus } from '../types';
 export type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps> & {
     dateOverride?: number;
 };

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

@@ -1,7 +1,7 @@
-import { FileAttributes, MediaTraceContext, PerformanceAttributes } from '@atlaskit/media-common';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { SSRStatus } from '../utils/analytics';
-import { CardStatus } from '../types';
+import { type FileAttributes, type MediaTraceContext, type PerformanceAttributes } from '@atlaskit/media-common';
+import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type SSRStatus } from '../utils/analytics';
+import { type CardStatus } from '../types';
 import { MediaCardError } from '../errors';
 export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error: MediaCardError | undefined, traceContext: MediaTraceContext, metadataTraceContext?: MediaTraceContext) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => void;

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

@@ -1,5 +1,5 @@
-import { FileState } from '@atlaskit/media-client';
-import { CardState } from '../types';
+import { type FileState } from '@atlaskit/media-client';
+import { type CardState } from '../types';
 import { MediaCardError } from '../errors';
 /**
  * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date.

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { CardWithMediaClientConfigProps } from './types';
+import { type CardWithMediaClientConfigProps } from './types';
 declare function CardSwitcher(props: CardWithMediaClientConfigProps): JSX.Element;
 export default CardSwitcher;

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

@@ -1,13 +1,13 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { MouseEvent } from 'react';
-import { MessageDescriptor } from 'react-intl-next';
-import { MediaItemType, FileDetails } from '@atlaskit/media-client';
-import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { SharedCardProps, CardStatus } from '../types';
-import { MediaCardError } from '../errors';
-import { CardPreview } from '../types';
-import { MediaCardCursor } from '../types';
+import React, { type MouseEvent } from 'react';
+import { type MessageDescriptor } from 'react-intl-next';
+import { type MediaItemType, type FileDetails } from '@atlaskit/media-client';
+import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type SharedCardProps, type CardStatus } from '../types';
+import { type MediaCardError } from '../errors';
+import { type CardPreview } from '../types';
+import { type MediaCardCursor } from '../types';
 export interface CardViewOwnProps extends SharedCardProps {
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;

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

@@ -1,6 +1,6 @@
-import { ImageResizeMode } from '@atlaskit/media-client';
-import { ObjectURLCache } from '../../utils/objectURLCache';
-import { CardPreview } from '../../types';
+import { type ImageResizeMode } from '@atlaskit/media-client';
+import { type ObjectURLCache } from '../../utils/objectURLCache';
+import { type CardPreview } from '../../types';
 type Mode = ImageResizeMode | undefined;
 export declare const getCacheKey: (id: string, mode: Mode) => string;
 export interface CardPreviewCache {

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

@@ -1,4 +1,4 @@
-import { CardStatus, FilePreviewStatus } from '../../types';
-import { FileState } from '@atlaskit/media-client';
+import { type CardStatus, type FilePreviewStatus } from '../../types';
+import { type FileState } from '@atlaskit/media-client';
 export declare const extractFilePreviewStatus: (fileState: FileState, isBannedLocalPreview: boolean) => FilePreviewStatus;
 export declare const isPreviewableStatus: (cardStatus: CardStatus, { isPreviewable, hasPreview, isSupportedByBrowser }: FilePreviewStatus) => boolean;

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

@@ -1,6 +1,6 @@
-import { MediaClient, FilePreview, MediaStoreGetFileImageParams, MediaType } from '@atlaskit/media-client';
-import { MediaTraceContext } from '@atlaskit/media-common';
-import { CardPreview } from '../../types';
+import { type MediaClient, type FilePreview, type MediaStoreGetFileImageParams, type MediaType } from '@atlaskit/media-client';
+import { type MediaTraceContext } from '@atlaskit/media-common';
+import { type CardPreview } from '../../types';
 /**
  * This method tells the support for the media
  * types covered in getCardPreviewFromFilePreview

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

@@ -1,9 +1,9 @@
-import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs } from '@atlaskit/media-client';
-import { SSR, MediaTraceContext } from '@atlaskit/media-common';
-import { ImageResizeMode } from '@atlaskit/media-client';
-import { CardDimensions } from '../../types';
+import { type MediaClient, type FilePreview, type FileState, type MediaStoreGetFileImageParams, type MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { type SSR, type MediaTraceContext } from '@atlaskit/media-common';
+import { type ImageResizeMode } from '@atlaskit/media-client';
+import { type CardDimensions } from '../../types';
 import { MediaCardError } from '../../errors';
-import { CardStatus, CardPreview } from '../../types';
+import { type CardStatus, type CardPreview } from '../../types';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview, } from './helpers';
 export { extractFilePreviewStatus } from './filePreviewStatus';
 export declare const getCardPreviewFromCache: (id: string, mode: ImageResizeMode | undefined) => CardPreview | undefined;

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

@@ -1,4 +1,4 @@
-import { FileStatus } from '@atlaskit/media-client';
-import { CardStatus, FilePreviewStatus } from '../types';
+import { type FileStatus } from '@atlaskit/media-client';
+import { type CardStatus, type FilePreviewStatus } from '../types';
 export declare const isFinalCardStatus: (status: CardStatus) => boolean;
 export declare const getCardStatus: (fileStatus: FileStatus, { isPreviewable, hasPreview }: FilePreviewStatus) => CardStatus;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Component } from 'react';
-import { MediaClient, FileIdentifier, FileState, MediaFileArtifacts, MediaSubscription } from '@atlaskit/media-client';
-import { NumericalCardDimensions } from '@atlaskit/media-common';
-import { CardDimensions } from '../types';
-import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type MediaClient, type FileIdentifier, type FileState, type MediaFileArtifacts, type MediaSubscription } from '@atlaskit/media-client';
+import { type NumericalCardDimensions } from '@atlaskit/media-common';
+import { type CardDimensions } from '../types';
+import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { CardPreview } from '../types';
 export interface InlinePlayerOwnProps {
     identifier: FileIdentifier;

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

@@ -1,4 +1,4 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { InlinePlayerWrapperProps } from './types';
+import { type InlinePlayerWrapperProps } from './types';
 export declare const InlinePlayerWrapper: (props: InlinePlayerWrapperProps) => jsx.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { InlinePlayerWrapperProps } from './types';
+import { type InlinePlayerWrapperProps } from './types';
 export declare const inlinePlayerClassName = "media-card-inline-player";
 export declare const inlinePlayerWrapperStyles: {
     ({ dimensions, selected, }: InlinePlayerWrapperProps): import("@emotion/react").SerializedStyles;

package/dist/types/card/media-card-analytics-error-boundary.d.ts

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { CardDimensions, CardOnClickCallback } from '../types';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import React, { type PropsWithChildren } from 'react';
+import { type MediaFeatureFlags } from '@atlaskit/media-common';
+import { type CardDimensions, type CardOnClickCallback } from '../types';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export type MediaCardAnalyticsErrorBoundaryProps = PropsWithChildren<{
     dimensions?: CardDimensions;
     data?: {

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

@@ -1,8 +1,9 @@
-import React, { ReactElement, RefObject } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type ReactElement, type RefObject } from 'react';
+import type React from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
 import type { CardBaseProps } from './card';
-import { CardDimensions } from '../types';
+import { type CardDimensions } from '../types';
 export type InlinePlayerWrapperProps = {
     testId?: string;
     dimensions?: CardDimensions;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActionsBarProps } from './types';
+import { type ActionsBarProps } from './types';
 export declare class ActionsBar extends React.Component<ActionsBarProps> {
     render(): JSX.Element | null;
 }

package/dist/types/card/ui/actionsBar/actionsBarWrapper.d.ts

@@ -1,4 +1,4 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { ActionBarWrapperProps } from './types';
+import { type ActionBarWrapperProps } from './types';
 export declare const ActionsBarWrapper: (props: ActionBarWrapperProps) => jsx.JSX.Element;

package/dist/types/card/ui/actionsBar/cardActions/cardActionButton.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { CardActionButtonOwnProps } from './styles';
+import { type CardActionButtonOwnProps } from './styles';
 export declare const CardActionButton: import("react").ForwardRefExoticComponent<CardActionButtonOwnProps & import("react").RefAttributes<HTMLButtonElement>>;