Cast mediaRef types

WordPress · Sep 8, 2022 · f709d34 · f709d34
1 parent d354a6a
commit f709d34
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/components/src/focal-point-picker/media.tsx b/packages/components/src/focal-point-picker/media.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { Ref } from 'react';
+
 /**
  * Internal dependencies
  */
@@ -20,7 +25,7 @@ export default function Media( {
 		return (
 			<MediaPlaceholder
 				className="components-focal-point-picker__media components-focal-point-picker__media--placeholder"
-				ref={ mediaRef }
+				ref={ mediaRef as Ref< HTMLDivElement > }
 				{ ...props }
 			/>
 		);
@@ -36,7 +41,7 @@ export default function Media( {
 			loop
 			muted={ muted }
 			onLoadedData={ onLoad }
-			ref={ mediaRef }
+			ref={ mediaRef as Ref< HTMLVideoElement > }
 			src={ src }
 		/>
 	) : (
@@ -45,7 +50,7 @@ export default function Media( {
 			alt={ alt }
 			className="components-focal-point-picker__media components-focal-point-picker__media--image"
 			onLoad={ onLoad }
-			ref={ mediaRef }
+			ref={ mediaRef as Ref< HTMLImageElement > }
 			src={ src }
 		/>
 	);

diff --git a/packages/components/src/focal-point-picker/types.ts b/packages/components/src/focal-point-picker/types.ts
@@ -69,7 +69,7 @@ export type FocalPointPickerMediaProps = Pick<
 	'autoPlay' | 'muted'
 > & {
 	alt: string;
-	mediaRef?: Ref< any >;
+	mediaRef?: Ref< HTMLDivElement | HTMLVideoElement | HTMLImageElement >;
 	onLoad?: ReactEventHandler< HTMLVideoElement | HTMLImageElement >;
 	src: string;
 };