@atlaskit/media-card 77.12.0 → 77.12.1

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

@@ -3,28 +3,22 @@ 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 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>
+	<div
+		style={{
+			display: 'flex',
+			flexWrap: 'wrap',
+			gap: '10px',
+			marginBottom: '10px',
+		}}
+	>
+		{children}
+	</div>
 );

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

@@ -4,18 +4,18 @@ 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%',
-  },
+	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>
+	<Box xcss={controlsBoxStyles}>{children}</Box>
 );

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

@@ -17,108 +17,100 @@ type OnValue = (value: string | undefined) => void;
 const defaultVlue = 500;
 
 export const DimensionPicker = ({
-  targetName,
-  dimensionName,
-  onChange,
-  initialValue,
-  initialUnit,
+	targetName,
+	dimensionName,
+	onChange,
+	initialValue,
+	initialUnit,
 }: {
-  initialValue?: number;
-  initialUnit?: '%' | 'px';
-  targetName: string;
-  dimensionName: string;
-  onChange: OnValue;
+	initialValue?: number;
+	initialUnit?: '%' | 'px';
+	targetName: string;
+	dimensionName: string;
+	onChange: OnValue;
 }) => {
-  const rangeId = `range-${targetName}-${dimensionName}`;
+	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 [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]);
+	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]);
+	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>
-  );
+	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,
+	onContainerHeight,
+	onImageWidth,
+	onImageHeight,
 }: {
-  onContainerWidth: OnValue;
-  onContainerHeight: OnValue;
-  onImageWidth: OnValue;
-  onImageHeight: OnValue;
+	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>
-  );
+	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/svgContainer.tsx

@@ -6,27 +6,27 @@ 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',
+	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,
+	width,
+	height,
 }: {
-  children: React.ReactNode;
-  width?: string;
-  height?: string;
+	children: React.ReactNode;
+	width?: string;
+	height?: string;
 }) => {
-  return (
-    <Box xcss={containerStyles} style={{ width, height }}>
-      {children}
-    </Box>
-  );
+	return (
+		<Box xcss={containerStyles} style={{ width, height }}>
+			{children}
+		</Box>
+	);
 };

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

@@ -5,39 +5,38 @@ 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;
+	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
+	label,
+	onChange,
+	...props
 }: Omit<React.ComponentProps<typeof Toggle>, 'onChange'> & {
-  label: string;
-  onChange: (val: boolean) => void;
+	label: string;
+	onChange: (val: boolean) => void;
 }) => {
-  const [id] = useState(makeid());
+	const [id] = useState(makeid());
 
-  return (
-    <Box>
-      <Label htmlFor={id}>{label}</Label>
-      <Toggle
-        onChange={evt => {
-          const { checked } = evt.target;
-          onChange(checked);
-        }}
-        {...props}
-        id={id}
-      />
-    </Box>
-  );
+	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

@@ -4,41 +4,41 @@ 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 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 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,
-    };
+		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');
-      },
-    });
-  };
+		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 };
+	return { status, identifier, uploadFn };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.12.0",
+  "version": "77.12.1",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/dropdown-menu": "^12.10.0",
+    "@atlaskit/dropdown-menu": "^12.11.0",
     "@atlaskit/editor-shared-styles": "^2.12.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/media-client": "^27.2.0",
@@ -49,7 +49,7 @@
     "@atlaskit/media-viewer": "^48.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/spinner": "^16.1.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/ufo": "^0.2.0",
@@ -77,7 +77,7 @@
     "@atlaskit/media-state": "^1.1.0",
     "@atlaskit/media-test-data": "^2.3.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/primitives": "^6.5.0",
+    "@atlaskit/primitives": "^7.0.0",
     "@atlaskit/range": "^7.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^13.1.0",
@@ -106,7 +106,7 @@
     "platform.media-experience.card-views-refactor_b91lr": {
       "type": "boolean"
     },
-    "platform.media-svg-rendering": {
+    "platform.media-card-svg-rendering_6tdbv": {
       "type": "boolean"
     }
   },