@atlaskit/media-card 77.11.3 → 77.12.1

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -26,17 +26,17 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   };
 
   /* Note:
-   - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
-   - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
-     color: `${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600),
-    })}`,
-    backgroundColor: `${themed({
-      light: token('color.background.neutral', N30A),
-      dark: token('color.background.neutral', DN80),
-    })}`,
-   */
+    - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
+    - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
+      color: `${themed({
+       light: token('color.text', N900),
+       dark: token('color.text', DN600),
+     })}`,
+     backgroundColor: `${themed({
+       light: token('color.background.neutral', N30A),
+       dark: token('color.background.neutral', DN80),
+     })}`,
+    */
 
   var style = _objectSpread({
     lineHeight: '16px',

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.3";
+var packageVersion = "77.12.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/ui/iconWrapper/styles.d.ts

@@ -2,6 +2,6 @@ import { type Breakpoint } from '../common';
 import { type IconWrapperProps } from './types';
 export declare function titleBoxHeight(hasTitleBox: boolean, breakpoint: Breakpoint): string;
 export declare const iconWrapperStyles: {
-    ({ hasTitleBox, breakpoint, }: IconWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ hasTitleBox, breakpoint }: IconWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };

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

@@ -8,6 +8,5 @@ export declare const getWrapperShadow: (disableOverlay: boolean, selected: boole
 export declare const getCursorStyle: (cursor: MediaCardCursor | undefined) => string;
 export declare const getClickablePlayButtonStyles: (isPlayButtonClickable: boolean) => "" | "\n    &:hover .media-card-play-button {\n      \n  .play-icon-background {\n    width: 56px;\n    height: 56px;\n  }\n\n    }\n  ";
 export declare const getSelectableTickBoxStyles: (isTickBoxSelectable: boolean) => string;
-export declare const cardImageContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const transition: (propertyName?: string) => string;
 export declare const rgba: (hex: any, opacity: any) => string;

package/dist/types/card/ui/titleBox/styles.d.ts

@@ -1,6 +1,6 @@
 import { type TitleBoxFooterProps, type TitleBoxHeaderProps, type TitleBoxWrapperProps } from './types';
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, titleBoxBgColor, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, titleBoxBgColor }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/dist/types/card/ui/wrapper/imageContainer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+type ImageContainerProps = {
+    children: React.ReactNode;
+    centerElements?: boolean;
+    testId: string;
+    mediaName?: string;
+    status?: string;
+    progress?: number;
+    selected?: boolean;
+    source?: string;
+};
+export declare const ImageContainer: ({ children, testId, mediaName, status, progress, selected, source, centerElements, }: ImageContainerProps) => jsx.JSX.Element;
+export {};

package/dist/types/card/ui/wrapper/index.d.ts

@@ -1 +1,2 @@
 export { Wrapper } from './wrapper';
+export { ImageContainer } from './imageContainer';

package/dist/types/card/v2/svgView/helpers.d.ts

@@ -0,0 +1,3 @@
+import { type ImageResizeMode } from '@atlaskit/media-client';
+import { type MediaSvgProps } from '@atlaskit/media-svg';
+export declare const calculateSvgDimensions: (img: HTMLImageElement, resizeMode?: ImageResizeMode) => MediaSvgProps['dimensions'];

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

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

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { type MouseEvent } from 'react';
+import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-client';
+import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../../types';
+import { type MediaFilePreview } from '@atlaskit/media-file-preview';
+export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
+export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+export interface SvgViewBaseOwnProps {
+    readonly testId?: string;
+    identifier: FileIdentifier;
+    readonly status: CardStatus;
+    readonly dimensions: CardDimensions;
+    readonly onClick?: OnClickFn;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly selected?: boolean;
+    readonly fileName?: string;
+    readonly cardPreview?: MediaFilePreview;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly progress?: number;
+    readonly alt?: string;
+    readonly resizeMode?: ImageResizeMode;
+    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
+    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    readonly shouldOpenMediaViewer?: boolean;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+}
+export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
+export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -3,6 +3,6 @@ import { type ReactNode } from 'react';
 export type PreventClickThroughProps = {
     readonly children?: ReactNode;
 };
-export declare function PreventClickThrough({ children, }: PreventClickThroughProps): JSX.Element;
+export declare function PreventClickThrough({ children }: PreventClickThroughProps): JSX.Element;
 export type CreatePreventClickThrough = <T>(onClick: () => void) => (event: React.MouseEvent<T, MouseEvent>) => void;
 export declare const createPreventClickThrough: CreatePreventClickThrough;

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

@@ -3,4 +3,4 @@ export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
 }>;
-export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => JSX.Element;
+export declare const ViewportDetector: ({ cardEl, onVisible, children }: ViewportDetectorProps) => JSX.Element;

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

@@ -2,6 +2,6 @@ import { type Breakpoint } from '../common';
 import { type IconWrapperProps } from './types';
 export declare function titleBoxHeight(hasTitleBox: boolean, breakpoint: Breakpoint): string;
 export declare const iconWrapperStyles: {
-    ({ hasTitleBox, breakpoint, }: IconWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ hasTitleBox, breakpoint }: IconWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };

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

@@ -8,6 +8,5 @@ export declare const getWrapperShadow: (disableOverlay: boolean, selected: boole
 export declare const getCursorStyle: (cursor: MediaCardCursor | undefined) => string;
 export declare const getClickablePlayButtonStyles: (isPlayButtonClickable: boolean) => "" | "\n    &:hover .media-card-play-button {\n      \n  .play-icon-background {\n    width: 56px;\n    height: 56px;\n  }\n\n    }\n  ";
 export declare const getSelectableTickBoxStyles: (isTickBoxSelectable: boolean) => string;
-export declare const cardImageContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const transition: (propertyName?: string) => string;
 export declare const rgba: (hex: any, opacity: any) => string;

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

@@ -1,6 +1,6 @@
 import { type TitleBoxFooterProps, type TitleBoxHeaderProps, type TitleBoxWrapperProps } from './types';
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, titleBoxBgColor, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, titleBoxBgColor }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+type ImageContainerProps = {
+    children: React.ReactNode;
+    centerElements?: boolean;
+    testId: string;
+    mediaName?: string;
+    status?: string;
+    progress?: number;
+    selected?: boolean;
+    source?: string;
+};
+export declare const ImageContainer: ({ children, testId, mediaName, status, progress, selected, source, centerElements, }: ImageContainerProps) => jsx.JSX.Element;
+export {};

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

@@ -1 +1,2 @@
 export { Wrapper } from './wrapper';
+export { ImageContainer } from './imageContainer';

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

@@ -0,0 +1,3 @@
+import { type ImageResizeMode } from '@atlaskit/media-client';
+import { type MediaSvgProps } from '@atlaskit/media-svg';
+export declare const calculateSvgDimensions: (img: HTMLImageElement, resizeMode?: ImageResizeMode) => MediaSvgProps['dimensions'];

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

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

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { type MouseEvent } from 'react';
+import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-client';
+import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../../types';
+import { type MediaFilePreview } from '@atlaskit/media-file-preview';
+export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
+export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+export interface SvgViewBaseOwnProps {
+    readonly testId?: string;
+    identifier: FileIdentifier;
+    readonly status: CardStatus;
+    readonly dimensions: CardDimensions;
+    readonly onClick?: OnClickFn;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly selected?: boolean;
+    readonly fileName?: string;
+    readonly cardPreview?: MediaFilePreview;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly progress?: number;
+    readonly alt?: string;
+    readonly resizeMode?: ImageResizeMode;
+    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
+    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    readonly shouldOpenMediaViewer?: boolean;
+    readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
+}
+export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
+export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -3,6 +3,6 @@ import { type ReactNode } from 'react';
 export type PreventClickThroughProps = {
     readonly children?: ReactNode;
 };
-export declare function PreventClickThrough({ children, }: PreventClickThroughProps): JSX.Element;
+export declare function PreventClickThrough({ children }: PreventClickThroughProps): JSX.Element;
 export type CreatePreventClickThrough = <T>(onClick: () => void) => (event: React.MouseEvent<T, MouseEvent>) => void;
 export declare const createPreventClickThrough: CreatePreventClickThrough;

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

@@ -3,4 +3,4 @@ export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
 }>;
-export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => JSX.Element;
+export declare const ViewportDetector: ({ cardEl, onVisible, children }: ViewportDetectorProps) => JSX.Element;

package/example-helpers/DelayedRender.tsx

@@ -1,31 +1,31 @@
 import React, { Component } from 'react';
 
 interface Props {
-  timeout: number;
-  component: React.ElementType;
-  componentProps: { [key: string]: any };
+	timeout: number;
+	component: React.ElementType;
+	componentProps: { [key: string]: any };
 }
 
 interface State {
-  hidden: boolean;
+	hidden: boolean;
 }
 
 export class DelayedRender extends Component<Props, State> {
-  state: State = {
-    hidden: true,
-  };
+	state: State = {
+		hidden: true,
+	};
 
-  componentDidMount() {
-    window.setTimeout(() => {
-      this.setState({ hidden: false });
-    }, this.props.timeout);
-  }
+	componentDidMount() {
+		window.setTimeout(() => {
+			this.setState({ hidden: false });
+		}, this.props.timeout);
+	}
 
-  render() {
-    if (this.state.hidden) {
-      return null;
-    }
-    const { component: Component, componentProps } = this.props;
-    return <Component {...componentProps} />;
-  }
+	render() {
+		if (this.state.hidden) {
+			return null;
+		}
+		const { component: Component, componentProps } = this.props;
+		return <Component {...componentProps} />;
+	}
 }

package/example-helpers/cardViewWrapper.tsx

@@ -3,42 +3,38 @@ import { jsx } from '@emotion/react';
 import { Box, xcss } from '@atlaskit/primitives';
 
 type CardViewWrapperProps = {
-  small?: boolean;
-  displayInline?: boolean;
-  children?: JSX.Element;
+	small?: boolean;
+	displayInline?: boolean;
+	children?: JSX.Element;
 };
 
 const displayInlineStyles = (displayInline?: boolean) => {
-  return displayInline ? 'inline-block;' : '';
+	return displayInline ? 'inline-block;' : '';
 };
 
 // Minimum supported dimensions
 const smallStyles = xcss({
-  width: '156px',
-  height: '108px',
+	width: '156px',
+	height: '108px',
 });
 
 // Maximum supported dimensions
 const largeStyles = xcss({
-  width: '600px',
-  height: '450px',
+	width: '600px',
+	height: '450px',
 });
 
 const cardWrapperStyles = ({ small, displayInline }: CardViewWrapperProps) =>
-  xcss({
-    display: displayInlineStyles(displayInline),
-    marginBlock: 'space.200',
-    marginInline: 'space.250',
-  });
+	xcss({
+		display: displayInlineStyles(displayInline),
+		marginBlock: 'space.200',
+		marginInline: 'space.250',
+	});
 
 export const CardViewWrapper = (props: CardViewWrapperProps) => {
-  if (props.small) {
-    return (
-      <Box xcss={[cardWrapperStyles(props), smallStyles]}>{props.children}</Box>
-    );
-  } else {
-    return (
-      <Box xcss={[cardWrapperStyles(props), largeStyles]}>{props.children}</Box>
-    );
-  }
+	if (props.small) {
+		return <Box xcss={[cardWrapperStyles(props), smallStyles]}>{props.children}</Box>;
+	} else {
+		return <Box xcss={[cardWrapperStyles(props), largeStyles]}>{props.children}</Box>;
+	}
 };