sanity-plugin-media 2.4.2 → 3.0.1

package/src/components/SearchFacetSelect/index.tsx

@@ -6,7 +6,7 @@ import type {
   SearchFacetOperatorType,
   WithId
 } from '../../types'
-import React from 'react'
+
 import {useDispatch} from 'react-redux'
 
 import {operators} from '../../config/searchFacets'

package/src/components/SearchFacetTags/index.tsx

@@ -105,7 +105,7 @@ const SearchFacetTags = ({facet}: Props) => {
             isSearchable
             name="tags"
             noOptionsMessage={() => 'No tags'}
-            onChange={value => handleChange(value as TagSelectOption)}
+            onChange={(value: any) => handleChange(value as TagSelectOption)}
             options={allTagOptions}
             placeholder={tagsFetching ? 'Loading...' : 'Select...'}
             styles={reactSelectStyles(scheme)}

package/src/components/SearchFacets/index.tsx

@@ -1,5 +1,5 @@
 import {Box, Flex, Inline, rem, type Theme} from '@sanity/ui'
-import React from 'react'
+
 import {styled, css} from 'styled-components'
 
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/SearchFacetsControl/index.tsx

@@ -1,7 +1,7 @@
 import {AddIcon} from '@sanity/icons'
 import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
 import type {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '../../types'
-import React from 'react'
+
 import {useDispatch} from 'react-redux'
 import {FACETS} from '../../constants'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'

package/src/components/TableHeader/index.tsx

@@ -11,14 +11,13 @@ import {useColorSchemeValue} from 'sanity'
 import {getSchemeColor} from '../../utils/getSchemeColor'
 
 // TODO: DRY
-const ContextActionContainer = styled(Flex)(
-  // @ts-expect-error - fix typings later
-  ({scheme}: {scheme: ThemeColorSchemeKey}) => {
+const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
+  ({$scheme}) => {
     return css`
       cursor: pointer;
       @media (hover: hover) and (pointer: fine) {
         &:hover {
-          background: ${getSchemeColor(scheme, 'bg')};
+          background: ${getSchemeColor($scheme, 'bg')};
         }
       }
     `
@@ -78,8 +77,7 @@ const TableHeader = () => {
           align="center"
           justify="center"
           onClick={handleContextActionClick}
-          // @ts-expect-error - fix typings later
-          scheme={scheme}
+          $scheme={scheme}
           style={{
             height: '100%',
             position: 'relative'

package/src/components/TableHeaderItem/index.tsx

@@ -1,6 +1,6 @@
 import {ChevronDownIcon, ChevronUpIcon} from '@sanity/icons'
 import {Box, Label} from '@sanity/ui'
-import React from 'react'
+
 import {useDispatch} from 'react-redux'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions} from '../../modules/assets'

package/src/components/TableRowAsset/index.tsx

@@ -47,49 +47,42 @@ type Props = {
   selected: boolean
 }
 
-const ContainerGrid = styled(Grid)(
-  // @ts-expect-error - fix typings later
-  ({
-    scheme,
-    selected,
-    updating
-  }: {
-    selected?: boolean
-    scheme: ThemeColorSchemeKey
-    updating?: boolean
-  }) => {
+const ContainerGrid = styled<
+  typeof Grid,
+  {$selected?: boolean; $scheme: ThemeColorSchemeKey; $updating?: boolean}
+>(Grid)(({$scheme, $selected, $updating}) => {
+  return css`
+    align-items: center;
+    cursor: ${$selected ? 'default' : 'pointer'};
+    height: 100%;
+    pointer-events: ${$updating ? 'none' : 'auto'};
+    user-select: none;
+    white-space: nowrap;
+
+    ${!$updating &&
+    css`
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: ${getSchemeColor($scheme, 'bg')};
+        }
+      }
+    `}
+  `
+})
+
+const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
+  ({$scheme}) => {
     return css`
-      align-items: center;
-      cursor: ${selected ? 'default' : 'pointer'};
-      height: 100%;
-      pointer-events: ${updating ? 'none' : 'auto'};
-      user-select: none;
-      white-space: nowrap;
-
-      ${!updating &&
-      css`
-        @media (hover: hover) and (pointer: fine) {
-          &:hover {
-            background: ${getSchemeColor(scheme, 'bg')};
-          }
+      cursor: pointer;
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: ${getSchemeColor($scheme, 'bg2')};
         }
-      `}
+      }
     `
   }
 )
 
-// @ts-expect-error - fix typings later
-const ContextActionContainer = styled(Flex)(({scheme}: {scheme: ThemeColorSchemeKey}) => {
-  return css`
-    cursor: pointer;
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: ${getSchemeColor(scheme, 'bg2')};
-      }
-    }
-  `
-})
-
 const StyledWarningIcon = styled(WarningFilledIcon)(({theme}) => {
   return {
     color: theme.sanity.color.spot.red
@@ -105,7 +98,7 @@ const TableRowAsset = (props: Props) => {
   const shiftPressed: RefObject<boolean> = useKeyPress('shift')
 
   const [referenceCountVisible, setReferenceCountVisible] = useState(false)
-  const refCountVisibleTimeout = useRef<ReturnType<typeof window.setTimeout>>()
+  const refCountVisibleTimeout = useRef<ReturnType<typeof window.setTimeout>>(null)
 
   const dispatch = useDispatch()
   const lastPicked = useTypedSelector(state => state.assets.lastPicked)
@@ -181,9 +174,8 @@ const TableRowAsset = (props: Props) => {
   return (
     <ContainerGrid
       onClick={selected ? undefined : handleClick}
-      // @ts-expect-error - fix typings later
-      scheme={scheme}
-      selected={selected}
+      $scheme={scheme}
+      $selected={selected}
       style={{
         gridColumnGap: mediaIndex < 3 ? 0 : '16px',
         gridRowGap: 0,
@@ -191,13 +183,12 @@ const TableRowAsset = (props: Props) => {
           mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE,
         gridTemplateRows: mediaIndex < 3 ? 'auto' : '1fr'
       }}
-      updating={item.updating}
+      $updating={item.updating}
     >
       {/* Picked checkbox */}
       <ContextActionContainer
         onClick={handleContextActionClick}
-        // @ts-expect-error - fix typings later
-        scheme={scheme}
+        $scheme={scheme}
         style={{
           alignItems: 'center',
           gridColumn: 1,
@@ -247,8 +238,8 @@ const TableRowAsset = (props: Props) => {
             {isImageAsset(asset) && (
               <Image
                 draggable={false}
-                scheme={scheme}
-                showCheckerboard={!isOpaque}
+                $scheme={scheme}
+                $showCheckerboard={!isOpaque}
                 src={imageDprUrl(asset, {height: 100, width: 100})}
               />
             )}
@@ -405,6 +396,7 @@ const TableRowAsset = (props: Props) => {
         {error && (
           <Box padding={2}>
             <Tooltip
+              animate
               content={
                 <Container padding={2} width={0}>
                   <Text size={1}>{error}</Text>

package/src/components/TableRowUpload/index.tsx

@@ -93,7 +93,12 @@ const TableRowUpload = (props: Props) => {
       >
         <Box style={{height: '100%', position: 'relative'}}>
           {item.assetType === 'image' && item?.objectUrl && (
-            <Image draggable={false} scheme={scheme} src={item.objectUrl} style={{opacity: 0.25}} />
+            <Image
+              draggable={false}
+              $scheme={scheme}
+              src={item.objectUrl}
+              style={{opacity: 0.25}}
+            />
           )}
 
           {item.assetType === 'file' && (

package/src/components/Tag/index.tsx

@@ -46,6 +46,7 @@ const TagButton = (props: TagButtonProps) => {
 
   return (
     <Tooltip
+      animate
       content={
         <Container padding={2} width={0}>
           <Text muted size={1}>

package/src/components/TagIcon/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const TagIcon = () => (
   <svg
     data-sanity-icon="media__tag" // For icon usage with @sanity/ui <Button />

package/src/components/TagView/index.tsx

@@ -1,5 +1,5 @@
 import {Box, Flex, Text} from '@sanity/ui'
-import React from 'react'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectAssetsPickedLength} from '../../modules/assets'
 import {selectTags} from '../../modules/tags'

package/src/components/TagsPanel/index.tsx

@@ -1,5 +1,5 @@
 import {Box} from '@sanity/ui'
-import React from 'react'
+
 import {TAGS_PANEL_WIDTH} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import TagView from '../TagView'

package/src/components/Tool/index.tsx

@@ -1,5 +1,5 @@
 import {Flex} from '@sanity/ui'
-import React from 'react'
+
 import Browser from '../Browser'
 
 const Tool = () => {

package/src/hooks/usePortalPopoverProps.ts

@@ -4,6 +4,7 @@ export function usePortalPopoverProps(): PopoverProps {
   const portal = usePortal()
 
   return {
+    animate: true,
     constrainSize: true,
     floatingBoundary: portal.element,
     portal: true,

package/src/plugin.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {type AssetSource, type Tool as SanityTool, definePlugin} from 'sanity'
 import {ImageIcon} from '@sanity/icons'
 import FormBuilderTool from './components/FormBuilderTool'

package/src/styled/react-select/creatable.tsx

@@ -8,7 +8,6 @@ const {radius: themeRadius, space: themeSpace} = studioTheme
 
 export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
   return {
-    // @ts-expect-error - fix typings later
     control: (styles, {isFocused}) => {
       let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
       if (isFocused) {
@@ -34,12 +33,10 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
         }
       }
     },
-    // @ts-expect-error - fix typings later
     indicatorsContainer: (styles, {isDisabled}) => ({
       ...styles,
       opacity: isDisabled ? 0.25 : 1
     }),
-    // @ts-expect-error - fix typings later
     input: styles => ({
       ...styles,
       color: 'var(--card-fg-color)',
@@ -49,7 +46,6 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
     menuList: styles => ({
       ...styles
     }),
-    // @ts-expect-error - fix typings later
     multiValue: (styles, {isDisabled}) => ({
       ...styles,
       backgroundColor: getSchemeColor(scheme, 'mutedHoveredBg'),
@@ -61,7 +57,6 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
       fontSize: 'inherit',
       padding: 0
     }),
-    // @ts-expect-error - fix typings later
     multiValueRemove: styles => ({
       ...styles,
       borderTopLeftRadius: 0,
@@ -71,13 +66,11 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
         backgroundColor: getSchemeColor(scheme, 'mutedSelectedBg')
       }
     }),
-    // @ts-expect-error - fix typings later
     noOptionsMessage: styles => ({
       ...styles,
       fontFamily: studioTheme.fonts.text.family,
       lineHeight: '1em'
     }),
-    // @ts-expect-error - fix typings later
     option: (styles, {isFocused}) => ({
       ...styles,
       backgroundColor: isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
@@ -89,12 +82,10 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
         color: getSchemeColor(scheme, 'bg')
       }
     }),
-    // @ts-expect-error - fix typings later
     placeholder: styles => ({
       ...styles,
       marginLeft: rem(themeSpace[2])
     }),
-    // @ts-expect-error - fix typings later
     valueContainer: styles => ({
       ...styles,
       margin: 0,

package/src/styled/react-select/single.tsx

@@ -14,7 +14,6 @@ const {
 
 export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
   return {
-    // @ts-expect-error - fix typings later
     control: (styles, {isDisabled, isFocused}) => {
       let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
       if (isFocused) {
@@ -40,7 +39,6 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
         }
       }
     },
-    // @ts-expect-error - fix typings later
     input: styles => ({
       ...styles,
       color: 'var(--card-fg-color)',
@@ -48,19 +46,16 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
       fontSize: themeTextSizes[1].fontSize,
       marginLeft: rem(themeSpace[2])
     }),
-    // @ts-expect-error - fix typings later
     menuList: styles => ({
       ...styles,
       padding: 0
     }),
-    // @ts-expect-error - fix typings later
     noOptionsMessage: styles => ({
       ...styles,
       fontFamily: studioTheme.fonts.text.family,
       fontSize: themeTextSizes[1].fontSize,
       lineHeight: '1em'
     }),
-    // @ts-expect-error - fix typings later
     option: (styles, {isFocused}) => ({
       ...styles,
       backgroundColor: isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
@@ -75,14 +70,12 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
         color: getSchemeColor(scheme, 'bg')
       }
     }),
-    // @ts-expect-error - fix typings later
     placeholder: styles => ({
       ...styles,
       fontSize: themeTextSizes[1].fontSize,
       marginLeft: rem(themeSpace[2]),
       paddingLeft: 0
     }),
-    // @ts-expect-error - fix typings later
     singleValue: styles => ({
       ...styles,
       alignItems: 'center',
@@ -90,7 +83,6 @@ export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig =>
       height: '100%',
       marginLeft: rem(themeSpace[2])
     }),
-    // @ts-expect-error - fix typings later
     valueContainer: styles => ({
       ...styles,
       margin: 0,