sanity-plugin-media 3.0.0 → 3.0.1

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
@@ -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'