sanity-plugin-media 4.3.1 → 4.3.3

package/src/components/CardAsset/CardAsset.test.tsx

@@ -1,11 +1,12 @@
-import type {RefObject} from 'react'
-import userEvent from '@testing-library/user-event'
 import {screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type {RefObject} from 'react'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
-import CardAsset from './index'
+
 import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
 import {initialState as assetsInitialState} from '../../modules/assets'
 import type {AssetItem, AssetType, FileAsset, ImageAsset} from '../../types'
+import CardAsset from './index'
 
 const SHIFT_FLAG = '__CARD_ASSET_TEST_SHIFT__'
 
@@ -23,25 +24,25 @@ vi.mock('../../hooks/useKeyPress', () => ({
     ({
       get current() {
         return Boolean((globalThis as unknown as Record<string, unknown>)[SHIFT_FLAG])
-      }
-    } as RefObject<boolean>)
+      },
+    }) as RefObject<boolean>,
 }))
 
 vi.mock('../Image', () => ({
-  default: () => <div data-testid="card-image" />
+  default: () => <div data-testid="card-image" />,
 }))
 
 vi.mock('../FileIcon', () => ({
   default: ({extension}: {extension?: string}) => (
     <div data-testid="card-file-icon" data-extension={extension ?? ''} />
-  )
+  ),
 }))
 
-vi.mock('sanity', async importOriginal => {
+vi.mock('sanity', async (importOriginal) => {
   const actual = await importOriginal<typeof import('sanity')>()
   return {
     ...actual,
-    useColorSchemeValue: () => 'light'
+    useColorSchemeValue: () => 'light',
   }
 })
 
@@ -55,7 +56,7 @@ const imageAsset = {
   size: 1,
   mimeType: 'image/png',
   url: 'https://example.com/photo.png',
-  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true}
+  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true},
 } as ImageAsset
 
 const fileAsset = {
@@ -68,7 +69,7 @@ const fileAsset = {
   extension: 'pdf',
   size: 1,
   mimeType: 'application/pdf',
-  url: 'https://example.com/doc.pdf'
+  url: 'https://example.com/doc.pdf',
 } as FileAsset
 
 function assetItem(asset: ImageAsset | FileAsset, partial?: Partial<AssetItem>): AssetItem {
@@ -77,7 +78,7 @@ function assetItem(asset: ImageAsset | FileAsset, partial?: Partial<AssetItem>):
     asset,
     picked: false,
     updating: false,
-    ...partial
+    ...partial,
   }
 }
 
@@ -87,7 +88,7 @@ function assetsState(byIds: Record<string, AssetItem>, extra?: Partial<typeof as
     assetTypes: ['file', 'image'] as AssetType[],
     allIds: Object.keys(byIds),
     byIds,
-    ...extra
+    ...extra,
   }
 }
 
@@ -121,8 +122,8 @@ describe('CardAsset', () => {
   it('renders nothing when the asset id is not in the store', () => {
     renderWithProviders(<CardAsset id="missing" selected={false} />, {
       preloaded: {
-        assets: assetsState({})
-      }
+        assets: assetsState({}),
+      },
     })
     expect(screen.queryAllByTestId('card-image')).toHaveLength(0)
     expect(screen.queryAllByTestId('card-file-icon')).toHaveLength(0)
@@ -131,8 +132,8 @@ describe('CardAsset', () => {
   it('renders image preview and original filename for an image asset', () => {
     renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset)}),
+      },
     })
     expect(screen.getAllByTestId('card-image').length).toBeGreaterThan(0)
     expect(screen.getAllByText('photo.png').length).toBeGreaterThan(0)
@@ -141,8 +142,8 @@ describe('CardAsset', () => {
   it('renders file icon with extension for a file asset', () => {
     renderWithProviders(<CardAsset id="file-1" selected={false} />, {
       preloaded: {
-        assets: assetsState({'file-1': assetItem(fileAsset)})
-      }
+        assets: assetsState({'file-1': assetItem(fileAsset)}),
+      },
     })
     const icon = screen.getAllByTestId('card-file-icon').at(-1)!
     expect(icon).toHaveAttribute('data-extension', 'pdf')
@@ -153,14 +154,14 @@ describe('CardAsset', () => {
     const user = userEvent.setup()
     const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset)}),
+      },
     })
 
     await user.click(clickPreview())
 
     expect(
-      store.getState().dialog.items.some(d => d.type === 'assetEdit' && d.assetId === 'img-1')
+      store.getState().dialog.items.some((d) => d.type === 'assetEdit' && d.assetId === 'img-1'),
     ).toBe(true)
   })
 
@@ -170,8 +171,8 @@ describe('CardAsset', () => {
     renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       onSelect,
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset)}),
+      },
     })
 
     await user.click(clickPreview())
@@ -179,8 +180,8 @@ describe('CardAsset', () => {
     expect(onSelect).toHaveBeenCalledWith([
       {
         kind: 'assetDocumentId',
-        value: 'img-1'
-      }
+        value: 'img-1',
+      },
     ])
   })
 
@@ -188,8 +189,8 @@ describe('CardAsset', () => {
     const user = userEvent.setup()
     const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {picked: false})})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset, {picked: false})}),
+      },
     })
 
     await user.click(clickFooterFilename('photo.png'))
@@ -203,15 +204,15 @@ describe('CardAsset', () => {
     const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       onSelect,
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset)}),
+      },
     })
 
     await user.click(clickFooterFilename('photo.png'))
 
     expect(onSelect).not.toHaveBeenCalled()
     expect(
-      store.getState().dialog.items.some(d => d.type === 'assetEdit' && d.assetId === 'img-1')
+      store.getState().dialog.items.some((d) => d.type === 'assetEdit' && d.assetId === 'img-1'),
     ).toBe(true)
   })
 
@@ -219,8 +220,8 @@ describe('CardAsset', () => {
     const user = userEvent.setup()
     const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {picked: true})})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset, {picked: true})}),
+      },
     })
 
     setShiftPressed(true)
@@ -238,11 +239,11 @@ describe('CardAsset', () => {
         assets: assetsState(
           {
             'prev-1': assetItem(prevAsset),
-            'img-1': assetItem(imageAsset, {picked: false})
+            'img-1': assetItem(imageAsset, {picked: false}),
           },
-          {lastPicked: 'prev-1'}
-        )
-      }
+          {lastPicked: 'prev-1'},
+        ),
+      },
     })
 
     setShiftPressed(true)
@@ -258,18 +259,18 @@ describe('CardAsset', () => {
     const anchorAsset = {
       ...imageAsset,
       _id: 'anchor-9',
-      originalFilename: 'anchor.png'
+      originalFilename: 'anchor.png',
     } as ImageAsset
     const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       preloaded: {
         assets: assetsState(
           {
             'anchor-9': assetItem(anchorAsset),
-            'img-1': assetItem(imageAsset, {picked: false})
+            'img-1': assetItem(imageAsset, {picked: false}),
           },
-          {lastPicked: 'anchor-9'}
-        )
-      }
+          {lastPicked: 'anchor-9'},
+        ),
+      },
     })
 
     setShiftPressed(true)
@@ -283,19 +284,19 @@ describe('CardAsset', () => {
   it('shows the selection checkmark when selected and not updating', () => {
     const {container} = renderWithProviders(<CardAsset id="img-1" selected />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {updating: false})})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset, {updating: false})}),
+      },
     })
     expect(
-      container.querySelectorAll('[data-sanity-icon="checkmark-circle"]').length
+      container.querySelectorAll('[data-sanity-icon="checkmark-circle"]').length,
     ).toBeGreaterThan(0)
   })
 
   it('does not show the checkmark overlay while updating even if selected', () => {
     const {container} = renderWithProviders(<CardAsset id="img-1" selected />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})}),
+      },
     })
     expect(container.querySelectorAll('[data-sanity-icon="checkmark-circle"]')).toHaveLength(0)
   })
@@ -303,8 +304,8 @@ describe('CardAsset', () => {
   it('shows a spinner while updating', () => {
     renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})}),
+      },
     })
     expect(document.body.querySelectorAll('[data-ui="Spinner"]').length).toBeGreaterThan(0)
   })
@@ -312,11 +313,11 @@ describe('CardAsset', () => {
   it('shows a warning icon when the asset item has an error', () => {
     const {container} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
       preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {error: 'Upload failed'})})
-      }
+        assets: assetsState({'img-1': assetItem(imageAsset, {error: 'Upload failed'})}),
+      },
     })
     expect(
-      container.querySelectorAll('[data-sanity-icon="warning-filled"]').length
+      container.querySelectorAll('[data-sanity-icon="warning-filled"]').length,
     ).toBeGreaterThan(0)
   })
 })

package/src/components/CardAsset/index.tsx

@@ -8,23 +8,24 @@ import {
   Text,
   type Theme,
   type ThemeColorSchemeKey,
-  Tooltip
+  Tooltip,
 } from '@sanity/ui'
 import {memo, type MouseEvent, type RefObject} from 'react'
 import {useDispatch} from 'react-redux'
 import {useColorSchemeValue} from 'sanity'
 import {styled, css} from 'styled-components'
+
 import {PANEL_HEIGHT} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import useKeyPress from '../../hooks/useKeyPress'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetById} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 import imageDprUrl from '../../utils/imageDprUrl'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
-import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   id: string
@@ -39,51 +40,53 @@ const CardWrapper = styled(Flex)`
   width: 100%;
 `
 
-const CardContainer = styled(Flex)<{$picked?: boolean; theme: Theme; $updating?: boolean}>(
-  ({$picked, theme, $updating}) => {
-    return css`
-      border: 1px solid transparent;
-      height: 100%;
-      pointer-events: ${$updating ? 'none' : 'auto'};
-      position: relative;
-      transition: all 300ms;
-      user-select: none;
-      width: 100%;
+const CardContainer = styled(Flex)<{$picked?: boolean; theme: Theme; $updating?: boolean}>(({
+  $picked,
+  theme,
+  $updating,
+}) => {
+  return css`
+    border: 1px solid transparent;
+    height: 100%;
+    pointer-events: ${$updating ? 'none' : 'auto'};
+    position: relative;
+    transition: all 300ms;
+    user-select: none;
+    width: 100%;
 
-      border: ${$picked
-        ? `1px solid ${theme.sanity.color.spot.orange} !important`
-        : '1px solid inherit'};
+    border: ${$picked
+      ? `1px solid ${theme.sanity.color.spot.orange} !important`
+      : '1px solid inherit'};
 
-      ${!$updating &&
-      css`
-        @media (hover: hover) and (pointer: fine) {
-          &:hover {
-            border: 1px solid var(--card-border-color);
-          }
-        }
-      `}
-    `
-  }
-)
-
-const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
-  ({$scheme}) => {
-    return css`
-      cursor: pointer;
-      height: ${PANEL_HEIGHT}px;
-      transition: all 300ms;
+    ${!$updating &&
+    css`
       @media (hover: hover) and (pointer: fine) {
         &:hover {
-          background: ${getSchemeColor($scheme, 'bg')};
+          border: 1px solid var(--card-border-color);
         }
       }
-    `
-  }
-)
+    `}
+  `
+})
+
+const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(({
+  $scheme,
+}) => {
+  return css`
+    cursor: pointer;
+    height: ${PANEL_HEIGHT}px;
+    transition: all 300ms;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${getSchemeColor($scheme, 'bg')};
+      }
+    }
+  `
+})
 
 const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
   return {
-    color: theme.sanity.color.spot.red
+    color: theme.sanity.color.spot.red,
   }
 })
 
@@ -97,8 +100,8 @@ const CardAsset = (props: Props) => {
 
   // Redux
   const dispatch = useDispatch()
-  const lastPicked = useTypedSelector(state => state.assets.lastPicked)
-  const item = useTypedSelector(state => selectAssetById(state, id))
+  const lastPicked = useTypedSelector((state) => state.assets.lastPicked)
+  const item = useTypedSelector((state) => selectAssetById(state, id))
 
   const asset = item?.asset
   const error = item?.error
@@ -121,8 +124,8 @@ const CardAsset = (props: Props) => {
       onSelect([
         {
           kind: 'assetDocumentId',
-          value: asset._id
-        }
+          value: asset._id,
+        },
       ])
     } else if (shiftPressed.current) {
       if (picked) {
@@ -158,7 +161,7 @@ const CardAsset = (props: Props) => {
           flex={1}
           style={{
             cursor: selected ? 'default' : 'pointer',
-            position: 'relative'
+            position: 'relative',
           }}
         >
           <div onClick={handleAssetClick} style={{height: '100%', opacity: opacityPreview}}>
@@ -174,7 +177,7 @@ const CardAsset = (props: Props) => {
                 src={imageDprUrl(asset, {height: 250, width: 250})}
                 style={{
                   draggable: false,
-                  transition: 'opacity 1000ms'
+                  transition: 'opacity 1000ms',
                 }}
               />
             )}
@@ -191,7 +194,7 @@ const CardAsset = (props: Props) => {
                 opacity: opacityContainer,
                 position: 'absolute',
                 top: 0,
-                width: '100%'
+                width: '100%',
               }}
             >
               <Text size={2}>
@@ -210,7 +213,7 @@ const CardAsset = (props: Props) => {
                 left: 0,
                 position: 'absolute',
                 top: 0,
-                width: '100%'
+                width: '100%',
               }}
             >
               <Spinner />
@@ -230,7 +233,7 @@ const CardAsset = (props: Props) => {
             <EditIcon
               style={{
                 flexShrink: 0,
-                opacity: 0.5
+                opacity: 0.5,
               }}
             />
           ) : (
@@ -240,7 +243,7 @@ const CardAsset = (props: Props) => {
               style={{
                 flexShrink: 0,
                 pointerEvents: 'none',
-                transform: 'scale(0.8)'
+                transform: 'scale(0.8)',
               }}
             />
           )}
@@ -260,7 +263,7 @@ const CardAsset = (props: Props) => {
             style={{
               position: 'absolute',
               right: 0,
-              top: 0
+              top: 0,
             }}
           >
             <Tooltip

package/src/components/CardUpload/index.tsx

@@ -4,12 +4,13 @@ import filesize from 'filesize'
 import {useDispatch} from 'react-redux'
 import {useColorSchemeValue} from 'sanity'
 import {styled} from 'styled-components'
+
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectUploadById, uploadsActions} from '../../modules/uploads'
+import {getSchemeColor} from '../../utils/getSchemeColor'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
-import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   id: string
@@ -30,7 +31,7 @@ const CardUpload = (props: Props) => {
 
   // Redux
   const dispatch = useDispatch()
-  const item = useTypedSelector(state => selectUploadById(state, id))
+  const item = useTypedSelector((state) => selectUploadById(state, id))
 
   if (!item) {
     return null
@@ -68,7 +69,7 @@ const CardUpload = (props: Props) => {
           background: getSchemeColor(scheme, 'bg'),
           border: '1px solid transparent',
           height: '100%',
-          position: 'relative'
+          position: 'relative',
         }}
       >
         {/* Progress bar */}
@@ -82,7 +83,7 @@ const CardUpload = (props: Props) => {
             width: '100%',
             transform: `scaleX(${percentLoaded * 0.01})`,
             transformOrigin: 'bottom left',
-            transition: 'all 1000ms ease-out'
+            transition: 'all 1000ms ease-out',
           }}
         />
 
@@ -93,7 +94,7 @@ const CardUpload = (props: Props) => {
               $scheme={scheme}
               src={item.objectUrl}
               style={{
-                opacity: 0.4
+                opacity: 0.4,
               }}
             />
           )}
@@ -120,7 +121,7 @@ const CardUpload = (props: Props) => {
                 left: 0,
                 position: 'absolute',
                 top: 0,
-                width: '100%'
+                width: '100%',
               }}
             >
               <Button

package/src/components/Controls/index.tsx

@@ -1,5 +1,6 @@
 import {Box, Button, Flex, Inline, useMediaIndex} from '@sanity/ui'
 import {useDispatch} from 'react-redux'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {dialogActions} from '../../modules/dialog'
 import {tagsActions} from '../../modules/tags'
@@ -14,10 +15,10 @@ import TextInputSearch from '../TextInputSearch'
 const Controls = () => {
   // Redux
   const dispatch = useDispatch()
-  const fetching = useTypedSelector(state => state.assets.fetching)
-  const pageIndex = useTypedSelector(state => state.assets.pageIndex)
-  const searchFacets = useTypedSelector(state => state.search.facets)
-  const tagsPanelVisible = useTypedSelector(state => state.tags.panelVisible)
+  const fetching = useTypedSelector((state) => state.assets.fetching)
+  const pageIndex = useTypedSelector((state) => state.assets.pageIndex)
+  const searchFacets = useTypedSelector((state) => state.search.facets)
+  const tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible)
 
   const mediaIndex = useMediaIndex()
 
@@ -39,7 +40,7 @@ const Controls = () => {
       paddingY={2}
       style={{
         borderBottom: '1px solid var(--card-border-color)',
-        zIndex: 2
+        zIndex: 2,
       }}
     >
       {/* Rows: search / filters / orders  */}
@@ -58,7 +59,7 @@ const Controls = () => {
               height: '100%',
               justifyContent: mediaIndex < 2 ? 'space-between' : 'flex-start',
               position: 'relative',
-              width: '100%'
+              width: '100%',
             }}
           >
             <Box marginX={2} style={{minWidth: '200px'}}>

package/src/components/DebugControls/index.tsx

@@ -2,6 +2,7 @@ import {PlugIcon} from '@sanity/icons'
 import {Box, Flex, Switch, Text, Tooltip} from '@sanity/ui'
 import {type ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
+
 import useKeyPress from '../../hooks/useKeyPress'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {debugActions} from '../../modules/debug'
@@ -9,8 +10,8 @@ import {debugActions} from '../../modules/debug'
 const DebugControls = () => {
   // Redux
   const dispatch = useDispatch()
-  const badConnection = useTypedSelector(state => state.debug.badConnection)
-  const debugEnabled = useTypedSelector(state => state.debug.enabled)
+  const badConnection = useTypedSelector((state) => state.debug.badConnection)
+  const debugEnabled = useTypedSelector((state) => state.debug.enabled)
 
   // Callbacks
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -38,7 +39,7 @@ const DebugControls = () => {
         left: 0,
         pointerEvents: 'none',
         position: 'fixed',
-        width: '100%'
+        width: '100%',
       }}
     >
       {/* Bad connection toggle */}
@@ -67,7 +68,7 @@ const DebugControls = () => {
             checked={badConnection}
             onChange={handleChange}
             style={{
-              pointerEvents: 'auto'
+              pointerEvents: 'auto',
             }}
           />
         </Tooltip>

package/src/components/DialogAssetEdit/Details.tsx

@@ -1,6 +1,7 @@
 import {Card, Stack, Tab, TabList, TabPanel} from '@sanity/ui'
 import {useState} from 'react'
 import {type Control, type FieldErrors, type UseFormRegister} from 'react-hook-form'
+
 import type {Asset, AssetFormData, Locale, TagSelectOption} from '../../types'
 import FormFieldInputTags from '../FormFieldInputTags'
 import FormFieldInputText from '../FormFieldInputText'
@@ -12,7 +13,7 @@ type LocalizedErrors = Record<string, {message?: string} | undefined>
 function toStringField(value: unknown): string | undefined {
   if (typeof value === 'string') return value
   if (typeof value === 'object' && value !== null) {
-    const found = Object.values(value as Record<string, string>).find(v => v)
+    const found = Object.values(value as Record<string, string>).find((v) => v)
     return found || undefined
   }
   return undefined
@@ -44,7 +45,7 @@ export default function Details({
   assetTagOptions,
   currentAsset,
   creditLine,
-  locales
+  locales,
 }: DetailsProps) {
   const hasLocales = locales && locales.length > 0
   const [activeLocaleTab, setActiveLocaleTab] = useState(0)