From 16ad2f2c10eb81fe73967acada14bb0c83222a3a Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Mon, 30 Oct 2023 17:24:28 +0000
Subject: [PATCH] refactor: use transient props in various styled components

---
 .../core/changeIndicators/ChangeIndicator.tsx |  1 -
 .../ElementWithChangeBar.styled.tsx           | 74 +++++++++----------
 .../changeIndicators/ElementWithChangeBar.tsx | 36 +++------
 .../__workshop__/ChangeBarStory.tsx           | 10 +--
 .../field/diff/components/DiffTooltip.tsx     |  8 +-
 .../ReferenceInput/ReferenceLinkCard.tsx      | 11 ++-
 .../files/ImageInput/ImagePreview.styled.tsx  | 16 ++--
 .../inputs/files/ImageInput/ImagePreview.tsx  |  2 +-
 .../header/DocumentHeaderTabs.tsx             |  4 +-
 9 files changed, 70 insertions(+), 92 deletions(-)

diff --git a/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx b/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
index 608375325ab..1d23c7f6099 100644
--- a/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
+++ b/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
@@ -68,7 +68,6 @@ const ChangeBarWrapper = memo(function ChangeBarWrapper(
   return (
     <div {...restProps} ref={ref} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <ElementWithChangeBar
-        hasFocus={hasFocus}
         isChanged={isChanged}
         disabled={disabled}
         withHoverEffect={withHoverEffect}
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
index caf699f0bdb..06a16baeb7a 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
@@ -6,54 +6,54 @@ interface ThemeContext {
 }
 
 interface RootProps {
-  focus: boolean
-  hover: boolean
-  changed?: boolean
-  isReviewChangeOpen: boolean
-  disabled?: boolean
+  $changed?: boolean
+  $disabled?: boolean
+  $isReviewChangeOpen: boolean
   $withHoverEffect?: boolean
 }
 
 const animationSpeed = 250
 
-export const ChangeBarWrapper = styled.div<RootProps>(({changed, disabled, isReviewChangeOpen}) => {
-  if (disabled)
-    return css`
-      ${ChangeBar} {
-        display: none;
-      }
-    `
+export const ChangeBarWrapper = styled.div<RootProps>(
+  ({$changed, $disabled, $isReviewChangeOpen}) => {
+    if ($disabled)
+      return css`
+        ${ChangeBar} {
+          display: none;
+        }
+      `
 
-  return css`
-    --change-bar-offset: 2px;
+    return css`
+      --change-bar-offset: 2px;
 
-    display: flex;
-    position: relative;
+      display: flex;
+      position: relative;
 
-    @media (hover: hover) {
-      &:hover {
-        z-index: 10;
+      @media (hover: hover) {
+        &:hover {
+          z-index: 10;
+        }
       }
-    }
 
-    /* hide when field is not changed */
-    ${!changed &&
-    css`
-      ${ChangeBar} {
-        opacity: 0;
-        pointer-events: none;
-      }
-    `}
+      /* hide when field is not changed */
+      ${!$changed &&
+      css`
+        ${ChangeBar} {
+          opacity: 0;
+          pointer-events: none;
+        }
+      `}
 
-    /* hide hover effect when review changes is open */
-    ${isReviewChangeOpen &&
-    css`
-      ${ChangeBarButton} {
-        opacity: 0;
-      }
-    `}
-  `
-})
+      /* hide hover effect when review changes is open */
+      ${$isReviewChangeOpen &&
+      css`
+        ${ChangeBarButton} {
+          opacity: 0;
+        }
+      `}
+    `
+  },
+)
 
 export const FieldWrapper = styled.div`
   flex-grow: 1;
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
index 71772b49201..f9d3acd889b 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
@@ -1,30 +1,25 @@
 import {useLayer} from '@sanity/ui'
-import React, {useCallback, useMemo, useState} from 'react'
+import React, {useMemo} from 'react'
 import {ConnectorContext} from './ConnectorContext'
 import {
-  ChangeBarWrapper,
-  FieldWrapper,
   ChangeBar,
-  ChangeBarMarker,
   ChangeBarButton,
+  ChangeBarMarker,
+  ChangeBarWrapper,
+  FieldWrapper,
 } from './ElementWithChangeBar.styled'
 
 export function ElementWithChangeBar(props: {
   children: React.ReactNode
   disabled?: boolean
-  hasFocus: boolean
   isChanged?: boolean
   withHoverEffect?: boolean
 }) {
-  const {children, disabled, hasFocus, isChanged, withHoverEffect = true} = props
+  const {children, disabled, isChanged, withHoverEffect = true} = props
 
-  const [hover, setHover] = useState(false)
   const {onOpenReviewChanges, isReviewChangesOpen} = React.useContext(ConnectorContext)
   const {zIndex} = useLayer()
 
-  const handleMouseEnter = useCallback(() => setHover(true), [])
-  const handleMouseLeave = useCallback(() => setHover(false), [])
-
   const changeBar = useMemo(
     () =>
       disabled || !isChanged ? null : (
@@ -35,34 +30,21 @@ export function ElementWithChangeBar(props: {
             aria-label="Review changes"
             data-testid="change-bar__button"
             onClick={isReviewChangesOpen ? undefined : onOpenReviewChanges}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
             tabIndex={-1}
             type="button"
             $withHoverEffect={withHoverEffect}
           />
         </ChangeBar>
       ),
-    [
-      disabled,
-      isChanged,
-      zIndex,
-      isReviewChangesOpen,
-      onOpenReviewChanges,
-      handleMouseEnter,
-      handleMouseLeave,
-      withHoverEffect,
-    ],
+    [disabled, isChanged, zIndex, isReviewChangesOpen, onOpenReviewChanges, withHoverEffect],
   )
 
   return (
     <ChangeBarWrapper
-      changed={isChanged}
       data-testid="change-bar-wrapper"
-      disabled={disabled}
-      focus={hasFocus}
-      hover={hover}
-      isReviewChangeOpen={isReviewChangesOpen}
+      $changed={isChanged}
+      $disabled={disabled}
+      $isReviewChangeOpen={isReviewChangesOpen}
     >
       <FieldWrapper data-testid="change-bar__field-wrapper">{children}</FieldWrapper>
       {changeBar}
diff --git a/packages/sanity/src/core/changeIndicators/__workshop__/ChangeBarStory.tsx b/packages/sanity/src/core/changeIndicators/__workshop__/ChangeBarStory.tsx
index dd7826efc03..7de87170663 100644
--- a/packages/sanity/src/core/changeIndicators/__workshop__/ChangeBarStory.tsx
+++ b/packages/sanity/src/core/changeIndicators/__workshop__/ChangeBarStory.tsx
@@ -1,20 +1,16 @@
 import {Container, Flex, TextArea} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import React from 'react'
 import {ElementWithChangeBar} from '../ElementWithChangeBar'
 
 export default function ChangeBarStory() {
   const isChanged = useBoolean('Changed', true, 'Props')
-  const [focused, setFocused] = useState(false)
-
-  const handleBlur = useCallback(() => setFocused(false), [])
-  const handleFocus = useCallback(() => setFocused(true), [])
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container width={0}>
-        <ElementWithChangeBar isChanged={isChanged} hasFocus={focused}>
-          <TextArea onBlur={handleBlur} onFocus={handleFocus} rows={5} />
+        <ElementWithChangeBar isChanged={isChanged}>
+          <TextArea rows={5} />
         </ElementWithChangeBar>
       </Container>
     </Flex>
diff --git a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
index c6cbe958a8e..a97ae628fdb 100644
--- a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
@@ -56,13 +56,7 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
 
   return (
     <LegacyLayerProvider zOffset="paneFooter">
-      <Tooltip
-        content={content}
-        // data-placement={restProps.placement}
-        portal
-        allowedAutoPlacements={['top', 'bottom']}
-        {...restProps}
-      >
+      <Tooltip content={content} portal {...restProps}>
         {children}
       </Tooltip>
     </LegacyLayerProvider>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
index 7a8785df6df..af3f579daea 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
@@ -29,7 +29,14 @@ export const ReferenceLinkCard = forwardRef(function ReferenceLinkCard(
   props: ReferenceLinkCardProps & React.HTMLProps<HTMLElement>,
   ref: React.ForwardedRef<HTMLElement>,
 ) {
-  const {documentType, as: asProp, ...restProps} = props
+  const {
+    as: asProp,
+    // We exclude `documentId` from spread props to avoid passing it to the Card component
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    documentId,
+    documentType,
+    ...cardProps
+  } = props
   const dataAs = documentType ? 'a' : undefined
 
   // If the child link is clicked without a document type, an error will be thrown.
@@ -39,7 +46,7 @@ export const ReferenceLinkCard = forwardRef(function ReferenceLinkCard(
 
   return (
     <StyledCard
-      {...restProps}
+      {...cardProps}
       data-as={dataAs}
       documentType={documentType}
       forwardedAs={as}
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 7a10facf7f1..271d5b718cd 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
@@ -32,11 +32,11 @@ export const SpinnerWrapper = styled(Spinner)`
 `
 
 export const Overlay = styled(Flex)<{
-  tone: Exclude<CardTone, 'inherit'>
-  drag: boolean
-}>(({tone, drag}) => {
-  const textColor = studioTheme.color.light[tone].card.enabled.fg
-  const backgroundColor = rgba(studioTheme.color.light[tone].card.enabled.bg, 0.8)
+  $drag: boolean
+  $tone: Exclude<CardTone, 'inherit'>
+}>(({$drag, $tone}) => {
+  const textColor = studioTheme.color.light[$tone].card.enabled.fg
+  const backgroundColor = rgba(studioTheme.color.light[$tone].card.enabled.bg, 0.8)
 
   return css`
     position: absolute;
@@ -44,9 +44,9 @@ export const Overlay = styled(Flex)<{
     left: 0;
     right: 0;
     bottom: 0;
-    backdrop-filter: ${drag ? 'blur(10px)' : ''};
-    color: ${tone ? textColor : ''};
-    background-color: ${drag ? backgroundColor : 'transparent'};
+    backdrop-filter: ${$drag ? 'blur(10px)' : ''};
+    color: ${$tone ? textColor : ''};
+    background-color: ${$drag ? backgroundColor : 'transparent'};
   `
 })
 
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 9c8934737c3..a191df0e5c3 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -132,7 +132,7 @@ function OverlayComponent({
   content: React.ReactNode
 }) {
   return (
-    <Overlay justify="flex-end" padding={3} tone={cardTone} drag={drag}>
+    <Overlay justify="flex-end" padding={3} $drag={drag} $tone={cardTone}>
       <FlexOverlay direction="column" align="center" justify="center">
         {content}
       </FlexOverlay>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
index 8cfe3ca5ef5..4d8ecdd0598 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
@@ -32,14 +32,14 @@ function DocumentHeaderTab(props: {
   tabPanelId: string
   viewId: string | null
 }) {
-  const {isActive, tabPanelId, viewId} = props
+  const {isActive, tabPanelId, viewId, ...rest} = props
   const {ready} = useDocumentPane()
   const {setView} = usePaneRouter()
   const handleClick = useCallback(() => setView(viewId), [setView, viewId])
 
   return (
     <Tab
-      {...props} // required to enable <TabList> keyboard navigation
+      {...rest} // required to enable <TabList> keyboard navigation
       aria-controls={tabPanelId}
       disabled={!ready}
       fontSize={1}