@atlaskit/media-card 73.8.0 → 74.0.0

package/dist/types/root/ui/iconMessage/types.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
+export declare type InternalIconMessageProps = {
+    messageDescriptor: MessageDescriptor;
+    animated?: boolean;
+    reducedFont?: boolean;
+};
+export declare type CreatingPreviewProps = {
+    disableAnimation?: boolean;
+};
+export declare type StyledTextProps = {
+    animated?: boolean;
+    reducedFont?: boolean;
+};
+export declare type IconMessageWrapperProps = {
+    animated?: boolean;
+    reducedFont?: boolean;
+    children?: ReactNode;
+};

package/dist/types/root/ui/iconWrapper/iconWrapper.d.ts

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

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

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

package/dist/types/root/ui/iconWrapper/types.d.ts

@@ -0,0 +1,6 @@
+import { Breakpoint } from '../common';
+export declare type IconWrapperProps = {
+    hasTitleBox: boolean;
+    breakpoint: Breakpoint;
+    children?: any;
+};

package/dist/types/root/ui/loadingRateLimited/styles.d.ts

@@ -0,0 +1,13 @@
+import { Breakpoint } from '../common';
+export declare const loadingRateLimitedContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const warningIconWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare type StyledTextProps = {
+    breakpoint: Breakpoint;
+    positionBottom: boolean;
+};
+export declare const loadingRateLimitedTextWrapperStyles: {
+    ({ breakpoint, positionBottom, }: StyledTextProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};
+export declare const couldntLoadWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const errorWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types/root/ui/newFileExperience/newFileExperienceWrapper.d.ts

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

package/dist/types/root/ui/newFileExperience/styles.d.ts

@@ -0,0 +1,5 @@
+import { NewFileExperienceWrapperProps } from './types';
+export declare const newFileExperienceWrapperStyles: {
+    ({ breakpoint, dimensions, appearance, disableOverlay, displayBackground, selected, isPlayButtonClickable, isTickBoxSelectable, shouldDisplayTooltip, mediaCardCursor, }: NewFileExperienceWrapperProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};

package/dist/types/root/ui/newFileExperience/types.d.ts

@@ -0,0 +1,23 @@
+import React, { MouseEvent, RefObject } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { CardDimensions, CardAppearance } from '../../..';
+import { Breakpoint } from '.././common';
+import { MediaCardCursor } from '../../../types';
+export interface NewFileExperienceWrapperProps {
+    testId?: string;
+    breakpoint: Breakpoint;
+    mediaCardCursor?: MediaCardCursor;
+    dimensions?: CardDimensions;
+    appearance?: CardAppearance;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    mediaType?: string;
+    disableOverlay: boolean;
+    displayBackground: boolean;
+    selected: boolean;
+    isPlayButtonClickable: boolean;
+    isTickBoxSelectable: boolean;
+    shouldDisplayTooltip: boolean;
+    innerRef?: RefObject<HTMLDivElement>;
+    children?: JSX.Element;
+}

package/dist/types/root/ui/playButton/playButtonBackground.d.ts

@@ -0,0 +1,3 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const PlayButtonBackground: () => jsx.JSX.Element;

package/dist/types/root/ui/playButton/playButtonWrapper.d.ts

@@ -0,0 +1,3 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const PlayButtonWrapper: (props: any) => jsx.JSX.Element;

package/dist/types/root/ui/playButton/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const playButtonClassName = "media-card-play-button";
+export declare const bkgClassName = "play-icon-background";
+export declare const fixedPlayButtonStyles: string;
+export declare const playButtonWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const backgroundStyles: import("@emotion/react").SerializedStyles;

package/dist/types/root/ui/progressBar/progressBar.d.ts

@@ -6,4 +6,5 @@ export declare type ProgressBarProps = {
     positionBottom?: boolean;
     showOnTop?: boolean;
 };
+export declare const getNormalizedProgress: (progress?: number | undefined) => number;
 export declare const ProgressBar: ({ progress, breakpoint, positionBottom, showOnTop, }: ProgressBarProps) => JSX.Element;

package/dist/types/root/ui/progressBar/styledBar.d.ts

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

package/dist/types/root/ui/progressBar/styles.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from '../common';
+import { StyledBarProps } from './types';
+export declare function generateResponsiveStyles(breakpoint: Breakpoint, positionBottom: boolean, showOnTop: boolean, multiplier?: number): string;
+export declare const styledBarStyles: {
+    (props: StyledBarProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};

package/dist/types/root/ui/progressBar/types.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from '../common';
+export declare type StyledBarProps = {
+    progress?: number;
+    breakpoint: Breakpoint;
+    positionBottom: boolean;
+    showOnTop: boolean;
+};

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

@@ -0,0 +1,11 @@
+import { CardDimensions, CardAppearance } from '../..';
+import { Breakpoint } from './common';
+import { MediaCardCursor } from '../../types';
+export declare const calcBreakpointSize: (wrapperWidth?: number) => Breakpoint;
+export declare const generateResponsiveStyles: (breakpoint?: Breakpoint) => string;
+export declare const getWrapperDimensions: (dimensions?: CardDimensions | undefined, appearance?: CardAppearance | undefined) => string;
+export declare const getWrapperShadow: (disableOverlay: boolean, selected: boolean) => string;
+export declare const getCursorStyle: (cursor: MediaCardCursor | undefined) => string;
+export declare const getClickablePlayButtonStyles: (isPlayButtonClickable: boolean) => string;
+export declare const getSelectableTickBoxStyles: (isTickBoxSelectable: boolean) => string;
+export declare const cardImageContainerStyles: import("@emotion/react").SerializedStyles;

package/dist/types/root/ui/tickBox/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const tickBoxClassName = "media-card-tickbox";
+export declare const tickboxFixedStyles: string;
+export declare const getSelectedStyles: (selected?: boolean | undefined) => string;
+export declare const wrapperStyles: {
+    (selected?: boolean | undefined): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};

package/dist/types/root/ui/tickBox/tickBox.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-export declare type TickBoxProps = {
-    selected?: boolean;
-};
+import { TickBoxProps } from './types';
 export declare const TickBox: ({ selected }: TickBoxProps) => JSX.Element;

package/dist/types/root/ui/tickBox/tickBoxWrapper.d.ts

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

package/dist/types/root/ui/tickBox/types.d.ts

@@ -0,0 +1,4 @@
+export declare type TickBoxProps = {
+    selected?: boolean;
+    children?: any;
+};

package/dist/types/root/ui/titleBox/failedTitleBox.d.ts

@@ -1,9 +1,3 @@
 import React from 'react';
-import { Breakpoint } from '../common';
-import { MessageDescriptor } from 'react-intl-next';
-export declare type OnRetryFunction = () => void;
-export declare type FailedTitleBoxProps = {
-    breakpoint: Breakpoint;
-    customMessage?: MessageDescriptor;
-};
+import { FailedTitleBoxProps } from './types';
 export declare const FailedTitleBox: React.FC<FailedTitleBoxProps>;

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

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

package/dist/types/root/ui/titleBox/titleBox.d.ts

@@ -1,16 +1,4 @@
 import React from 'react';
-import { TitleBoxIcon as TitleBoxIconType } from '../../../index';
-import { Breakpoint } from '../common';
-export declare type TitleBoxProps = {
-    name: string;
-    breakpoint: Breakpoint;
-    createdAt?: number;
-    titleBoxBgColor?: string;
-    titleBoxIcon?: TitleBoxIconType;
-};
-declare type FormattedDateProps = {
-    timestamp: number;
-};
+import { FormattedDateProps, TitleBoxProps } from './types';
 export declare const FormattedDate: React.ComponentType<FormattedDateProps>;
 export declare const TitleBox: ({ name, createdAt, breakpoint, titleBoxBgColor, titleBoxIcon, }: TitleBoxProps) => JSX.Element;
-export {};

package/dist/types/root/ui/titleBox/titleBoxComponents.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { TitleBoxFooterProps, TitleBoxHeaderProps, TitleBoxWrapperProps } from './types';
+export declare const TitleBoxWrapper: (props: TitleBoxWrapperProps) => jsx.JSX.Element;
+export declare const TitleBoxHeader: (props: TitleBoxHeaderProps) => jsx.JSX.Element;
+export declare const TitleBoxFooter: (props: TitleBoxFooterProps) => jsx.JSX.Element;
+export declare const TitleBoxIcon: (props: any) => jsx.JSX.Element;
+export declare const ErrorMessageWrapper: (props: any) => jsx.JSX.Element;

package/dist/types/root/ui/titleBox/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { MessageDescriptor } from 'react-intl-next';
+import { Breakpoint } from '../common';
+import { TitleBoxIcon as TitleBoxIconType } from '../../../index';
+export declare type TitleBoxProps = {
+    name: string;
+    breakpoint: Breakpoint;
+    createdAt?: number;
+    titleBoxBgColor?: string;
+    titleBoxIcon?: TitleBoxIconType;
+};
+export declare type FormattedDateProps = {
+    timestamp: number;
+};
+export declare type TitleBoxWrapperProps = {
+    breakpoint: Breakpoint;
+    titleBoxBgColor?: string;
+    children?: JSX.Element | JSX.Element[] | any;
+};
+export declare type TitleBoxFooterProps = {
+    hasIconOverlap: boolean;
+    children?: JSX.Element;
+};
+export declare type TitleBoxHeaderProps = {
+    hasIconOverlap: boolean;
+    children?: JSX.Element;
+};
+export declare type OnRetryFunction = () => void;
+export declare type FailedTitleBoxProps = {
+    breakpoint: Breakpoint;
+    customMessage?: MessageDescriptor;
+};

package/dist/types/styles/animations.d.ts

@@ -1 +1 @@
-export declare const spin: string;
+export declare const spin: import("@emotion/react").Keyframes;

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

@@ -1,10 +1,9 @@
-import { HTMLAttributes, ComponentClass } from 'react';
 export { defaultTransitionDuration } from './config';
 export { antialiased, borderRadiusLeft, capitalize, centerSelf, centerSelfX, centerSelfY, centerX, hexToRgb, rgba, spaceAround, transition, withAppearance, } from './mixins';
 export type { WithAppearanceProps } from './mixins';
 export { easeOutCubic, easeOutExpo } from './easing';
 export { spin } from './animations';
-export declare const Root: ComponentClass<HTMLAttributes<{}>>;
+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 FadeinImage: ComponentClass<HTMLAttributes<{}>>;
-export default Root;
+export declare const fadeinImageStyles: () => import("@emotion/react").SerializedStyles;
+export default rootStyles;

package/dist/types/styles/mixins.d.ts

@@ -14,8 +14,8 @@ export interface WithAppearanceProps {
     appearance?: CardAppearance;
 }
 export declare const withAppearance: (styleMap: {
-    auto?: string | undefined;
     image?: string | undefined;
-    square?: string | undefined;
+    auto?: string | undefined;
     horizontal?: string | undefined;
+    square?: string | undefined;
 }) => ({ appearance }: WithAppearanceProps) => string;

package/dist/types/types.d.ts

@@ -1,3 +1,4 @@
+import { CardDimensions } from './utils';
 export declare type CardStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';
 export declare type FilePreviewStatus = {
     hasFilesize: boolean;
@@ -15,6 +16,7 @@ export declare type CardPreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr
 export interface CardPreview {
     dataURI: string;
     orientation?: number;
+    dimensions?: CardDimensions;
     source: CardPreviewSource;
 }
 export declare enum MediaCardCursor {

package/dist/types/utils/cardActions/cardActionButton.d.ts

@@ -0,0 +1,4 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { CardActionButtonOwnProps } from './styles';
+export declare const CardActionButton: (props: CardActionButtonOwnProps) => jsx.JSX.Element;

package/dist/types/utils/cardActions/cardActionIconButton.d.ts

@@ -1,5 +1,5 @@
 import { Component, ReactNode, MouseEvent } from 'react';
-import { CardActionIconButtonVariant } from './styled';
+import { CardActionIconButtonVariant } from './styles';
 export declare type CardActionIconButtonProps = {
     readonly icon: ReactNode;
     readonly variant?: CardActionIconButtonVariant;

package/dist/types/utils/cardActions/cardActionsDropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { CardAction } from '../../actions';
-import { CardActionIconButtonVariant } from './styled';
+import { CardActionIconButtonVariant } from './styles';
 export declare type CardActionsDropdownMenuProps = {
     readonly actions: CardAction[];
     readonly triggerColor?: string;

package/dist/types/utils/cardActions/cardActionsView.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { CardAction } from '../../actions';
-import { CardActionIconButtonVariant } from './styled';
+import { CardActionIconButtonVariant } from './styles';
 export interface CardActionsViewProps {
     readonly actions: CardAction[];
     readonly onToggle?: (attrs: {

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

@@ -4,4 +4,4 @@ export { CardActionIconButton } from './cardActionIconButton';
 export type { CardActionIconButtonProps } from './cardActionIconButton';
 export { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
 export type { CardActionsDropdownMenuProps } from './cardActionsDropdownMenu';
-export { CardActionIconButtonVariant } from './styled';
+export { CardActionIconButtonVariant } from './styles';

package/dist/types/utils/cardActions/styles.d.ts

@@ -0,0 +1,18 @@
+import React, { MouseEvent, HTMLAttributes } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export declare const wrapperStyles: import("@emotion/react").SerializedStyles;
+export declare enum CardActionIconButtonVariant {
+    default = "default",
+    filled = "filled"
+}
+export declare type CardActionButtonOwnProps = {
+    variant?: CardActionIconButtonVariant;
+    style?: {
+        color: string | undefined;
+    };
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+    children?: React.ReactNode;
+};
+export declare type CardActionButtonProps = CardActionButtonOwnProps & HTMLAttributes<HTMLDivElement>;
+export declare const cardActionButtonStyles: ({ variant, }: CardActionButtonProps) => import("@emotion/react").SerializedStyles;

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

@@ -1,3 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 export interface ErrorIconProps {
     readonly size: 'small' | 'medium' | 'large' | 'xlarge';
@@ -6,5 +8,5 @@ export declare class ErrorIcon extends Component<ErrorIconProps, {}> {
     static defaultProps: {
         size: string;
     };
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

package/dist/types/utils/errorIcon/styles.d.ts

@@ -0,0 +1 @@
+export declare const errorIconWrapperStyles: import("@emotion/react").SerializedStyles;

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

@@ -1,3 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { MediaType } from '@atlaskit/media-client';
 export interface FileIconProps {
@@ -6,5 +8,5 @@ export interface FileIconProps {
     iconUrl?: string;
 }
 export declare class FileIcon extends Component<FileIconProps, {}> {
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

package/dist/types/utils/fileIcon/styles.d.ts

@@ -0,0 +1 @@
+export declare const fileTypeIconStyles: import("@emotion/react").SerializedStyles;

package/dist/types/utils/lightCards/lightCardWrappers.d.ts

@@ -0,0 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { WrapperProps } from './types';
+export declare const Wrapper: (props: WrapperProps) => jsx.JSX.Element;
+export declare const AnimatedWrapper: (props: WrapperProps) => jsx.JSX.Element;

package/dist/types/utils/lightCards/styles.d.ts

@@ -0,0 +1,4 @@
+import { WrapperProps } from './types';
+export declare const blinkLoadingAnimation: import("@emotion/react").Keyframes;
+export declare const wrapperStyles: ({ dimensions, theme }: WrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const animatedWrapperStyles: (props: WrapperProps) => import("@emotion/react").SerializedStyles;

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

@@ -1,7 +1,15 @@
+/// <reference types="react" />
 import { CardDimensions } from '../../utils/cardDimensions';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export interface StaticCardProps {
     dimensions?: CardDimensions;
     testId?: string;
     featureFlags?: MediaFeatureFlags;
 }
+export interface WrapperProps {
+    dimensions: CardDimensions;
+    testId?: string;
+    children?: JSX.Element;
+    theme?: GlobalThemeTokens;
+}

package/dist/types/utils/mediaTypeIcon/iconWrapper.d.ts

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

package/dist/types/utils/mediaTypeIcon/styles.d.ts

@@ -0,0 +1,2 @@
+import { IconWrapperProps } from './types';
+export declare const iconWrapperStyles: (props: IconWrapperProps) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { MediaType } from '@atlaskit/media-client';
+export interface IconWrapperProps {
+    type: MediaType;
+    children?: JSX.Element;
+}

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

@@ -1,7 +1,9 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 export interface ProgressBarProps {
     progress?: number;
 }
 export declare class ProgressBar extends Component<ProgressBarProps, {}> {
-    render(): JSX.Element | null;
+    render(): jsx.JSX.Element | null;
 }

package/dist/types/utils/progressBar/styles.d.ts

@@ -0,0 +1 @@
+export declare const progressWrapperStyles: import("@emotion/react").SerializedStyles;

package/example-helpers/cardViewWrapper.tsx

@@ -0,0 +1,26 @@
+/**@jsx jsx */
+import { css, jsx } from '@emotion/react';
+
+type CardViewWrapperProps = {
+  wrapperDimensions: { width: string; height: string };
+  displayInline?: boolean;
+  children?: JSX.Element;
+};
+
+const displayInlineStyles = (displayInline?: boolean) => {
+  return displayInline ? 'display: inline-block;' : '';
+};
+
+const cardWrapperStyles = ({
+  wrapperDimensions,
+  displayInline,
+}: CardViewWrapperProps) => css`
+  ${displayInlineStyles(displayInline)}
+  width: ${wrapperDimensions.width};
+  height: ${wrapperDimensions.height};
+  margin: 15px 20px;
+`;
+
+export const CardViewWrapper = (props: CardViewWrapperProps) => {
+  return <div css={cardWrapperStyles(props)}>{props.children}</div>;
+};