refactor(sanity): remove duplicate PreviewCard component

packages/sanity/src/core/components/PreviewCard.tsx

@@ -2,8 +2,12 @@ import {Card, CardProps} from '@sanity/ui'
 import React, {createContext, forwardRef, useContext} from 'react'
 import styled, {css} from 'styled-components'
 
-export const StyledCard = styled(Card)(() => {
+const StyledCard = styled(Card)(() => {
   return css`
+    /* this is a hack to avoid layout jumps while previews are loading
+    there's probably better ways of solving this */
+    min-height: 35px;
+
     /* TextWithTone uses its own logic to set color, and we therefore need */
     /* to override this logic in order to set the correct color in different states */
     &[data-selected],
@@ -36,10 +40,10 @@ export const PreviewCard = forwardRef(function PreviewCard(
   props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  const {children, selected, as, ...rest} = props
+  const {children, selected, as, ...restProps} = props
 
   return (
-    <StyledCard data-ui="PreviewCard" {...rest} forwardedAs={as} selected={selected} ref={ref}>
+    <StyledCard data-ui="PreviewCard" {...restProps} forwardedAs={as} ref={ref} selected={selected}>
       <PreviewCardContext.Provider value={{selected}}>{children}</PreviewCardContext.Provider>
     </StyledCard>
   )

packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx

@@ -26,13 +26,12 @@ import {AlertStrip} from '../../components/AlertStrip'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {FIXME} from '../../../FIXME'
-import {ChangeIndicator} from '../../../components'
+import {ChangeIndicator, PreviewCard} from '../../../components'
 import {CrossDatasetReferenceInfo, CrossDatasetSearchHit, SearchState} from './types'
 import {OptionPreview} from './OptionPreview'
 import {GetReferenceInfoFn, useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'
 import {ReferenceAutocomplete} from './ReferenceAutocomplete'
-import {PreviewCard} from './PreviewCard'
 
 const INITIAL_SEARCH_STATE: SearchState = {
   hits: [],
@@ -234,7 +233,7 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
   const renderOption = useCallback(
     (option: any) => {
       return (
-        <PreviewCard forwardedAs="button" type="button" radius={2}>
+        <PreviewCard as="button" type="button" radius={2}>
           <Box paddingX={3} paddingY={1}>
             <OptionPreview
               referenceType={schemaType}
@@ -315,7 +314,7 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
             <Flex align="center" padding={1}>
               {studioUrl ? (
                 <PreviewCard
-                  forwardedAs="a"
+                  as="a"
                   target="_blank"
                   rel="noopener noreferrer"
                   href={studioUrl}