@atlaskit/media-card 77.11.2 → 77.12.0

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

@@ -1,5 +1,5 @@
-import { NumericalCardDimensions } from '@atlaskit/media-common';
-import { MediaCardErrorInfo } from '../../utils/analytics';
+import { type NumericalCardDimensions } from '@atlaskit/media-common';
+import { type MediaCardErrorInfo } from '../../utils/analytics';
 export type MediaCardSsrData = {
     dataURI?: string;
     dimensions?: Partial<NumericalCardDimensions>;

package/dist/types-ts4.5/utils/lightCards/cardError.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { StaticCardProps } from './types';
+import { type StaticCardProps } from './types';
 export interface ErrorCardProps extends StaticCardProps {
     readonly size: 'small' | 'medium' | 'large' | 'xlarge';
 }

package/dist/types-ts4.5/utils/lightCards/cardLoading.d.ts

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

package/dist/types-ts4.5/utils/lightCards/getDimensionsWithDefault.d.ts

@@ -1,2 +1,2 @@
-import { CardDimensions } from '../../types';
+import { type CardDimensions } from '../../types';
 export declare const getDimensionsWithDefault: (dimensions?: CardDimensions) => CardDimensions;

package/dist/types-ts4.5/utils/lightCards/lightCardWrappers.d.ts

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

package/dist/types-ts4.5/utils/lightCards/styles.d.ts

@@ -1,2 +1,2 @@
-import { WrapperProps } from './types';
+import { type WrapperProps } from './types';
 export declare const wrapperStyles: ({ dimensions }: WrapperProps) => import("@emotion/react").SerializedStyles;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CardDimensions } from '../../types';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { type CardDimensions } from '../../types';
+import { type MediaFeatureFlags } from '@atlaskit/media-common';
 export interface StaticCardProps {
     dimensions?: CardDimensions;
     testId?: string;

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

@@ -1,2 +1,2 @@
-import { FileState, FileDetails, Identifier } from '@atlaskit/media-client';
+import { type FileState, type FileDetails, type Identifier } from '@atlaskit/media-client';
 export declare const getFileDetails: (identifier: Identifier, fileState?: FileState) => FileDetails;

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

@@ -1,4 +1,4 @@
-import { CardPreview } from '../types';
+import { type CardPreview } from '../types';
 export declare const PREVIEW_CACHE_LRU_SIZE = 50;
 export declare class ObjectURLCache {
     private readonly cache;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type PreventClickThroughProps = {
     readonly children?: ReactNode;
 };

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

@@ -1,8 +1,8 @@
-import { CardStatus } from '../types';
-import { FileAttributes } from '@atlaskit/media-common';
-import { SSRStatus } from './analytics';
+import { type CardStatus } from '../types';
+import { type FileAttributes } from '@atlaskit/media-common';
+import { type SSRStatus } from './analytics';
 import { MediaCardError } from '../errors';
-import { FileStateFlags } from '../types';
+import { type FileStateFlags } from '../types';
 type SucceedUfoPayload = {
     fileAttributes: FileAttributes;
     ssrReliability: SSRStatus;

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

@@ -1,2 +1,2 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 export declare function useCurrentValueRef<T>(value: T): MutableRefObject<T>;

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

@@ -1,2 +1,2 @@
-import { FileState } from '@atlaskit/media-client';
+import { type FileState } from '@atlaskit/media-client';
 export declare const videoIsPlayable: (isBannedLocalPreview: boolean, fileState?: FileState, mimeType?: string) => boolean;

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;

package/example-helpers/cards.tsx

@@ -12,7 +12,7 @@ import {
   wideImageFileId,
   largeImageFileId,
 } from '@atlaskit/media-test-helpers';
-import { FileIdentifier } from '@atlaskit/media-client';
+import { type FileIdentifier } from '@atlaskit/media-client';
 
 import { createApiCards, actions } from '.';
 import { CardLoading, CardError, Card } from '../src';
@@ -207,6 +207,7 @@ export const lightDefaultCards = [
   {
     title: 'Medium Loading',
     content: (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       <div style={divStyle}>
         <CardLoading />
       </div>
@@ -215,6 +216,7 @@ export const lightDefaultCards = [
   {
     title: 'Medium Error',
     content: (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       <div style={divStyle}>
         <CardError />
       </div>

package/example-helpers/developmentUseMessage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import InlineMessage from '@atlaskit/inline-message';
 
 const DevelopmentUseMessage: React.FC = () => (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   <div style={{ textAlign: 'center' }}>
     <InlineMessage appearance="warning" title="Development use only">
       The purpose of this example is to explore on edge cases for this

package/example-helpers/index.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-line no-console
 
-import React, { PropsWithChildren } from 'react';
-import { FileItem, Identifier } from '@atlaskit/media-client';
+import React, { type PropsWithChildren } from 'react';
+import { type FileItem, type Identifier } from '@atlaskit/media-client';
 import {
   createPollingMaxAttemptsError,
   createRateLimitedError,
@@ -11,13 +11,13 @@ import {
 } from '@atlaskit/media-test-helpers';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import FabricAnalyticsListeners, {
-  AnalyticsWebClient,
+  type AnalyticsWebClient,
 } from '@atlaskit/analytics-listeners';
 import { payloadPublisher } from '@atlassian/ufo';
 
 import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
 import { SelectableCard } from './selectableCard';
-import { Card, CardAppearance, CardEvent, CardAction } from '../src';
+import { Card, type CardAppearance, type CardEvent, type CardAction } from '../src';
 import { MediaCardError } from '../src/errors';
 import DevelopmentUseMessage from './developmentUseMessage';
 

package/example-helpers/selectableCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { Identifier } from '@atlaskit/media-client';
+import { type MediaClientConfig } from '@atlaskit/media-core';
+import { type Identifier } from '@atlaskit/media-client';
 import { Card } from '../src';
 
 export interface SelectableCardProps {

package/example-helpers/svg-helpers/cardContainer.tsx

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import React from 'react';
+
+import { jsx } from '@emotion/react';
+
+export const CardBox = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <div style={{ marginBottom: '10px' }}>
+    <h3 style={{ textAlign: 'center' }}>{title}</h3>
+    {children}
+  </div>
+);
+
+export const CardRow = ({ children }: { children: React.ReactNode }) => (
+  <div
+    style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '10px',
+      marginBottom: '10px',
+    }}
+  >
+    {children}
+  </div>
+);

package/example-helpers/svg-helpers/controls.tsx

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+
+import { Box, xcss } from '@atlaskit/primitives';
+import { media } from '@atlaskit/primitives/responsive';
+
+const controlsBoxStyles = xcss({
+  maxWidth: '1500px',
+  width: '90%',
+  margin: 'auto',
+  padding: 'space.100',
+  [media.above.sm]: {
+    width: '70%',
+  },
+  [media.above.lg]: {
+    width: '50%',
+  },
+});
+
+export const ControlsBox = ({ children }: { children: ReactNode }) => (
+  <Box xcss={controlsBoxStyles}>{children}</Box>
+);

package/example-helpers/svg-helpers/delayApiResponses.ts

@@ -0,0 +1,31 @@
+import { type MediaApi } from '@atlaskit/media-client';
+import { sleep } from '@atlaskit/media-test-helpers';
+
+type Endpoints = {
+	getImage: number;
+	getItems: number;
+	getFileBinary: number;
+};
+
+export const delayApiResponses = (
+	mediaApi: MediaApi,
+	{ getImage, getItems, getFileBinary }: Endpoints,
+) => {
+	const baseGetImage = mediaApi.getImage;
+	mediaApi.getImage = async (...params) => {
+		await sleep(getImage);
+		return baseGetImage(...params);
+	};
+
+	const baseGetItems = mediaApi.getItems;
+	mediaApi.getItems = async (...params) => {
+		await sleep(getItems);
+		return baseGetItems(...params);
+	};
+
+	const baseGetFileBinary = mediaApi.getFileBinary;
+	mediaApi.getFileBinary = async (...params) => {
+		await sleep(getFileBinary);
+		return baseGetFileBinary(...params);
+	};
+};

package/example-helpers/svg-helpers/dimensionPicker.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Label } from '@atlaskit/form';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import Range from '@atlaskit/range';
+
+import { ToggleBox } from './toggle';
+
+const boxStyles = xcss({ width: '25%', padding: 'space.025' });
+const wrapperStyles = xcss({ padding: 'space.025' });
+
+const pixelRange = [1, 1600];
+const percentRange = [1, 100];
+
+type OnValue = (value: string | undefined) => void;
+
+const defaultVlue = 500;
+
+export const DimensionPicker = ({
+  targetName,
+  dimensionName,
+  onChange,
+  initialValue,
+  initialUnit,
+}: {
+  initialValue?: number;
+  initialUnit?: '%' | 'px';
+  targetName: string;
+  dimensionName: string;
+  onChange: OnValue;
+}) => {
+  const rangeId = `range-${targetName}-${dimensionName}`;
+
+  const [isPercent, setIsPercent] = useState(initialUnit === '%');
+  const [rawValue, setRawValue] = useState<number | undefined>(initialValue);
+  const rangeValues = useMemo(
+    () => (isPercent ? percentRange : pixelRange),
+    [isPercent],
+  );
+
+  const value = useMemo(
+    () => (isPercent && !!rawValue && rawValue > 100 ? 100 : rawValue),
+    [isPercent, rawValue],
+  );
+  const unit = useMemo(() => (isPercent ? '%' : 'px'), [isPercent]);
+
+  useEffect(() => {
+    onChange(value === undefined ? value : `${value}${unit}`);
+  }, [value, unit, onChange]);
+
+  return (
+    <Box xcss={boxStyles}>
+      <Label htmlFor={rangeId}>
+        {targetName} {dimensionName}:{' '}
+        {value ? `${value} ${isPercent ? '%' : 'px'}` : 'Not set'}
+      </Label>
+      <ToggleBox
+        label="Use %"
+        defaultChecked={initialUnit === '%'}
+        onChange={setIsPercent}
+      />
+      <ToggleBox
+        label="Unset"
+        defaultChecked={!initialValue}
+        onChange={(value) => {
+          value ? setRawValue(undefined) : setRawValue(defaultVlue);
+        }}
+      />
+      {rawValue && (
+        <Range
+          id={rangeId}
+          step={1}
+          min={rangeValues[0]}
+          max={rangeValues[1]}
+          onChange={setRawValue}
+          value={value}
+        />
+      )}
+    </Box>
+  );
+};
+
+export const DimensionsPicker = ({
+  onContainerWidth,
+  onContainerHeight,
+  onImageWidth,
+  onImageHeight,
+}: {
+  onContainerWidth: OnValue;
+  onContainerHeight: OnValue;
+  onImageWidth: OnValue;
+  onImageHeight: OnValue;
+}) => {
+  return (
+    <Flex alignItems="stretch" direction="row" xcss={wrapperStyles}>
+      <DimensionPicker
+        targetName="Container"
+        dimensionName="width"
+        onChange={onContainerWidth}
+        initialValue={defaultVlue}
+      />
+      <DimensionPicker
+        targetName="Container"
+        dimensionName="height"
+        onChange={onContainerHeight}
+        initialValue={defaultVlue}
+      />
+      <DimensionPicker
+        targetName="Image"
+        dimensionName="width"
+        onChange={onImageWidth}
+        initialValue={80}
+        initialUnit="%"
+      />
+      <DimensionPicker
+        targetName="Image"
+        dimensionName="height"
+        onChange={onImageHeight}
+        initialValue={80}
+        initialUnit="%"
+      />
+    </Flex>
+  );
+};

package/example-helpers/svg-helpers/index.ts

@@ -0,0 +1,7 @@
+export { ControlsBox } from './controls';
+export { DimensionsPicker } from './dimensionPicker';
+export { ToggleBox } from './toggle';
+export { SvgContainer } from './svgContainer';
+export { useSvgUploader } from './uploader';
+export { CardBox, CardRow } from './cardContainer';
+export { delayApiResponses } from './delayApiResponses';

package/example-helpers/svg-helpers/svgContainer.tsx

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import React from 'react';
+
+import { jsx } from '@emotion/react';
+
+import { Box, xcss } from '@atlaskit/primitives';
+
+const containerStyles = xcss({
+  boxSizing: 'border-box',
+  borderColor: 'color.border.accent.orange',
+  borderStyle: 'solid',
+  borderWidth: 'border.width.indicator',
+  margin: 'auto',
+  marginTop: 'space.100',
+  backgroundColor: 'color.background.accent.green.subtler',
+});
+
+export const SvgContainer = ({
+  children,
+  width,
+  height,
+}: {
+  children: React.ReactNode;
+  width?: string;
+  height?: string;
+}) => {
+  return (
+    <Box xcss={containerStyles} style={{ width, height }}>
+      {children}
+    </Box>
+  );
+};

package/example-helpers/svg-helpers/toggle.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+import { Label } from '@atlaskit/form';
+import { Box } from '@atlaskit/primitives';
+import Toggle from '@atlaskit/toggle';
+
+function makeid(length = 12) {
+  let result = '';
+  const characters =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return result;
+}
+
+export const ToggleBox = ({
+  label,
+  onChange,
+  ...props
+}: Omit<React.ComponentProps<typeof Toggle>, 'onChange'> & {
+  label: string;
+  onChange: (val: boolean) => void;
+}) => {
+  const [id] = useState(makeid());
+
+  return (
+    <Box>
+      <Label htmlFor={id}>{label}</Label>
+      <Toggle
+        onChange={evt => {
+          const { checked } = evt.target;
+          onChange(checked);
+        }}
+        {...props}
+        id={id}
+      />
+    </Box>
+  );
+};

package/example-helpers/svg-helpers/uploader.ts

@@ -0,0 +1,44 @@
+import { type SyntheticEvent, useState } from 'react';
+
+import { type FileIdentifier } from '@atlaskit/media-client';
+import { useMediaClient } from '@atlaskit/media-client-react';
+
+export const useSvgUploader = (collectionName?: string) => {
+  const mediaClient = useMediaClient();
+  const [identifier, setIdentifier] = useState<FileIdentifier>();
+  const [status, setStatus] = useState<string>('');
+
+  const uploadFn = async (event: SyntheticEvent<HTMLInputElement>) => {
+    if (!event.currentTarget.files || !event.currentTarget.files.length) {
+      return;
+    }
+    setStatus('Uploading');
+
+    const file = event.currentTarget.files[0];
+    const uplodableFile = {
+      content: file,
+      name: file.name,
+      collection: collectionName,
+    };
+
+    mediaClient.file.upload(uplodableFile).subscribe({
+      next: ({ status, id }) => {
+        if (status === 'error') {
+          setStatus('Error while uploading');
+          return;
+        }
+        setStatus(status);
+        setIdentifier({
+          id,
+          mediaItemType: 'file' as const,
+          collectionName,
+        });
+      },
+      error: () => {
+        setStatus('Error while uploading');
+      },
+    });
+  };
+
+  return { status, identifier, uploadFn };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.11.2",
+  "version": "77.12.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,19 +38,20 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/dropdown-menu": "^12.10.0",
-    "@atlaskit/editor-shared-styles": "^2.10.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/media-client": "^27.0.0",
+    "@atlaskit/editor-shared-styles": "^2.12.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/media-client": "^27.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.2.0",
     "@atlaskit/media-file-preview": "^0.5.0",
+    "@atlaskit/media-svg": "^0.1.3",
     "@atlaskit/media-ui": "^25.10.0",
-    "@atlaskit/media-viewer": "^48.5.0",
+    "@atlaskit/media-viewer": "^48.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/spinner": "^16.1.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/ufo-interaction-ignore": "^1.1.0",
     "@babel/runtime": "^7.0.0",
@@ -69,16 +70,19 @@
     "@af/integration-testing": "*",
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
+    "@atlaskit/form": "^10.2.0",
     "@atlaskit/inline-message": "^12.1.0",
     "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-picker": "^66.4.0",
-    "@atlaskit/media-state": "^1.0.0",
-    "@atlaskit/media-test-data": "^2.1.0",
+    "@atlaskit/media-state": "^1.1.0",
+    "@atlaskit/media-test-data": "^2.3.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/primitives": "^6.1.0",
+    "@atlaskit/primitives": "^6.5.0",
+    "@atlaskit/range": "^7.2.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "^0.2.0",
     "@atlassian/ufo": "^0.2.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
@@ -101,6 +105,9 @@
     },
     "platform.media-experience.card-views-refactor_b91lr": {
       "type": "boolean"
+    },
+    "platform.media-svg-rendering": {
+      "type": "boolean"
     }
   },
   "techstack": {
@@ -110,6 +117,5 @@
         "spacing"
       ]
     }
-  },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  }
 }