From b97d4783fc6da1f67f0c4eb341030462051bb77f Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Sun, 22 Sep 2024 13:09:24 +0100
Subject: [PATCH] refactor(sanity): remove redundant drag-related props

---
 .../form/inputs/files/ImageInput/ImagePreview.styled.tsx | 7 +++----
 .../core/form/inputs/files/ImageInput/ImagePreview.tsx   | 9 ++-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
index 2da95dbc28a..5a2acdb2190 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -18,9 +18,8 @@ export const RatioBox = styled(Card)`
 `
 
 export const Overlay = styled(Flex)<{
-  $drag: boolean
   $tone: Exclude<CardTone, 'inherit'>
-}>(({$drag, $tone}) => {
+}>(({$tone}) => {
   const textColor = studioTheme.color.light[$tone].card.enabled.fg
   const backgroundColor = rgba(studioTheme.color.light[$tone].card.enabled.bg, 0.8)
 
@@ -30,9 +29,9 @@ export const Overlay = styled(Flex)<{
     left: 0;
     right: 0;
     bottom: 0;
-    backdrop-filter: ${$drag ? 'blur(10px)' : ''};
+    backdrop-filter: blur(10px);
     color: ${$tone ? textColor : ''};
-    background-color: ${$drag ? backgroundColor : 'transparent'};
+    background-color: ${backgroundColor};
   `
 })
 
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index 11bb9b06eb1..b1a5070453d 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -34,9 +34,7 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
 
   return (
     <RatioBox {...rest} tone="transparent">
-      {!isLoaded && (
-        <OverlayComponent cardTone="transparent" drag content={<LoadingBlock showText />} />
-      )}
+      {!isLoaded && <OverlayComponent cardTone="transparent" content={<LoadingBlock showText />} />}
       <img
         src={src}
         data-testid="hotspot-image-input"
@@ -47,7 +45,6 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
       {drag && (
         <OverlayComponent
           cardTone={tone}
-          drag={drag}
           content={
             <>
               <Box marginBottom={3}>
@@ -91,15 +88,13 @@ function getHoverTextTranslationKey({
 
 function OverlayComponent({
   cardTone,
-  drag,
   content,
 }: {
   cardTone: Exclude<CardTone, 'inherit'>
-  drag: boolean
   content: ReactNode
 }) {
   return (
-    <Overlay justify="flex-end" padding={3} $drag={drag} $tone={cardTone}>
+    <Overlay justify="flex-end" padding={3} $tone={cardTone}>
       <FlexOverlay direction="column" align="center" justify="center">
         {content}
       </FlexOverlay>