sanity-plugin-media 4.3.0 → 4.3.2

package/src/components/TableRowAsset/index.tsx

@@ -9,9 +9,9 @@ import {
   Text,
   type ThemeColorSchemeKey,
   Tooltip,
-  useMediaIndex
+  useMediaIndex,
 } from '@sanity/ui'
-import { formatRelative } from 'date-fns'
+import {formatRelative} from 'date-fns'
 import filesize from 'filesize'
 import {
   memo,
@@ -20,11 +20,12 @@ import {
   useCallback,
   useEffect,
   useRef,
-  useState
+  useState,
 } from 'react'
 import {useDispatch} from 'react-redux'
 import {WithReferringDocuments, useColorSchemeValue} from 'sanity'
 import {styled, css} from 'styled-components'
+
 import {GRID_TEMPLATE_COLUMNS} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import useKeyPress from '../../hooks/useKeyPress'
@@ -32,12 +33,12 @@ import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetById} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import getAssetResolution from '../../utils/getAssetResolution'
+import {getSchemeColor} from '../../utils/getSchemeColor'
+import {getUniqueDocuments} from '../../utils/getUniqueDocuments'
 import imageDprUrl from '../../utils/imageDprUrl'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
-import {getUniqueDocuments} from '../../utils/getUniqueDocuments'
-import {getSchemeColor} from '../../utils/getSchemeColor'
 
 // Duration (ms) to wait before reference counts (and associated listeners) are rendered
 const REFERENCE_COUNT_VISIBILITY_DELAY = 750
@@ -70,22 +71,22 @@ const ContainerGrid = styled<
   `
 })
 
-const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
-  ({$scheme}) => {
-    return css`
-      cursor: pointer;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: ${getSchemeColor($scheme, 'bg2')};
-        }
+const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(({
+  $scheme,
+}) => {
+  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
+    color: theme.sanity.color.spot.red,
   }
 })
 
@@ -101,8 +102,8 @@ const TableRowAsset = (props: Props) => {
   const refCountVisibleTimeout = useRef<ReturnType<typeof window.setTimeout>>(null)
 
   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 mediaIndex = useMediaIndex()
 
@@ -127,7 +128,7 @@ const TableRowAsset = (props: Props) => {
         dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
       }
     },
-    [asset, dispatch, lastPicked, onSelect, picked, shiftPressed]
+    [asset, dispatch, lastPicked, onSelect, picked, shiftPressed],
   )
 
   const handleClick = useCallback(
@@ -147,7 +148,7 @@ const TableRowAsset = (props: Props) => {
         dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
       }
     },
-    [asset, dispatch, lastPicked, onSelect, picked, shiftPressed]
+    [asset, dispatch, lastPicked, onSelect, picked, shiftPressed],
   )
 
   const opacityCell = updating ? 0.5 : 1
@@ -157,7 +158,7 @@ const TableRowAsset = (props: Props) => {
   useEffect(() => {
     refCountVisibleTimeout.current = setTimeout(
       () => setReferenceCountVisible(true),
-      REFERENCE_COUNT_VISIBILITY_DELAY
+      REFERENCE_COUNT_VISIBILITY_DELAY,
     )
     return () => {
       if (refCountVisibleTimeout.current) {
@@ -181,7 +182,7 @@ const TableRowAsset = (props: Props) => {
         gridRowGap: 0,
         gridTemplateColumns:
           mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE,
-        gridTemplateRows: mediaIndex < 3 ? 'auto' : '1fr'
+        gridTemplateRows: mediaIndex < 3 ? 'auto' : '1fr',
       }}
       $updating={item.updating}
     >
@@ -197,14 +198,14 @@ const TableRowAsset = (props: Props) => {
           height: '100%',
           justifyContent: 'center',
           opacity: opacityCell,
-          position: 'relative'
+          position: 'relative',
         }}
       >
         {onSelect ? (
           <EditIcon
             style={{
               flexShrink: 0,
-              opacity: 0.5
+              opacity: 0.5,
             }}
           />
         ) : (
@@ -213,7 +214,7 @@ const TableRowAsset = (props: Props) => {
             readOnly
             style={{
               pointerEvents: 'none', // TODO: consider alternative for usability
-              transform: 'scale(0.8)'
+              transform: 'scale(0.8)',
             }}
           />
         )}
@@ -226,7 +227,7 @@ const TableRowAsset = (props: Props) => {
           gridRowStart: 1,
           gridRowEnd: 'span 5',
           height: '90px',
-          width: '100px'
+          width: '100px',
         }}
       >
         <Flex align="center" justify="center" style={{height: '100%', position: 'relative'}}>
@@ -255,7 +256,7 @@ const TableRowAsset = (props: Props) => {
                 left: 0,
                 position: 'absolute',
                 top: 0,
-                width: '100%'
+                width: '100%',
               }}
             >
               <Spinner />
@@ -272,7 +273,7 @@ const TableRowAsset = (props: Props) => {
                 left: 0,
                 position: 'absolute',
                 top: 0,
-                width: '100%'
+                width: '100%',
               }}
             >
               <Text size={2}>
@@ -289,7 +290,7 @@ const TableRowAsset = (props: Props) => {
         style={{
           gridColumn: 3,
           gridRow: mediaIndex < 3 ? 2 : 'auto',
-          opacity: opacityCell
+          opacity: opacityCell,
         }}
       >
         <Text muted size={1} style={{lineHeight: '2em'}} textOverflow="ellipsis">
@@ -303,7 +304,7 @@ const TableRowAsset = (props: Props) => {
         style={{
           gridColumn: mediaIndex < 3 ? 3 : 4,
           gridRow: mediaIndex < 3 ? 3 : 'auto',
-          opacity: opacityCell
+          opacity: opacityCell,
         }}
       >
         <Text muted size={1} style={{lineHeight: '2em'}} textOverflow="ellipsis">
@@ -317,7 +318,7 @@ const TableRowAsset = (props: Props) => {
           display: mediaIndex < 3 ? 'none' : 'block',
           gridColumn: 5,
           gridRow: 'auto',
-          opacity: opacityCell
+          opacity: opacityCell,
         }}
       >
         <Text muted size={1} style={{lineHeight: '2em'}} textOverflow="ellipsis">
@@ -331,7 +332,7 @@ const TableRowAsset = (props: Props) => {
           display: mediaIndex < 3 ? 'none' : 'block',
           gridColumn: 6,
           gridRow: 'auto',
-          opacity: opacityCell
+          opacity: opacityCell,
         }}
       >
         <Text muted size={1} style={{lineHeight: '2em'}} textOverflow="ellipsis">
@@ -345,7 +346,7 @@ const TableRowAsset = (props: Props) => {
         style={{
           gridColumn: mediaIndex < 3 ? 3 : 7,
           gridRow: mediaIndex < 3 ? 4 : 'auto',
-          opacity: opacityCell
+          opacity: opacityCell,
         }}
       >
         <Text muted size={1} style={{lineHeight: '2em'}} textOverflow="ellipsis">
@@ -359,7 +360,7 @@ const TableRowAsset = (props: Props) => {
           display: mediaIndex < 3 ? 'none' : 'block',
           gridColumn: 8,
           gridRow: 'auto',
-          opacity: opacityCell
+          opacity: opacityCell,
         }}
       >
         <Text muted size={1} style={{lineHeight: '2em'}} textOverflow="ellipsis">
@@ -388,7 +389,7 @@ const TableRowAsset = (props: Props) => {
           gridColumn: mediaIndex < 3 ? 4 : 9,
           gridRowStart: '1',
           gridRowEnd: mediaIndex < 3 ? 'span 5' : 'auto',
-          opacity: opacityCell
+          opacity: opacityCell,
         }}
       >
         {/* TODO: DRY */}

package/src/components/TableRowUpload/index.tsx

@@ -3,6 +3,7 @@ import {Box, Button, Flex, Grid, Stack, Text, useMediaIndex} from '@sanity/ui'
 import filesize from 'filesize'
 import {useDispatch} from 'react-redux'
 import {useColorSchemeValue} from 'sanity'
+
 import {GRID_TEMPLATE_COLUMNS} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectUploadById, uploadsActions} from '../../modules/uploads'
@@ -21,7 +22,7 @@ const TableRowUpload = (props: Props) => {
 
   // Redux
   const dispatch = useDispatch()
-  const item = useTypedSelector(state => selectUploadById(state, id))
+  const item = useTypedSelector((state) => selectUploadById(state, id))
 
   const mediaIndex = useMediaIndex()
 
@@ -63,7 +64,7 @@ const TableRowUpload = (props: Props) => {
           mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE,
         gridTemplateRows: mediaIndex < 3 ? 'auto' : '1fr',
         height: '100%',
-        position: 'relative'
+        position: 'relative',
       }}
     >
       {/* Progress bar */}
@@ -77,7 +78,7 @@ const TableRowUpload = (props: Props) => {
           width: '100%',
           transform: `scaleX(${percentLoaded * 0.01})`,
           transformOrigin: 'bottom left',
-          transition: 'all 1000ms ease-out'
+          transition: 'all 1000ms ease-out',
         }}
       />
 
@@ -88,7 +89,7 @@ const TableRowUpload = (props: Props) => {
           gridRowStart: mediaIndex < 3 ? 1 : 'auto',
           gridRowEnd: mediaIndex < 3 ? 'span 4' : 'auto',
           height: '90px',
-          width: '100px'
+          width: '100px',
         }}
       >
         <Box style={{height: '100%', position: 'relative'}}>
@@ -122,7 +123,7 @@ const TableRowUpload = (props: Props) => {
                 height: '100%',
                 left: 0,
                 top: 0,
-                width: '100%'
+                width: '100%',
               }}
             >
               <Button
@@ -144,7 +145,7 @@ const TableRowUpload = (props: Props) => {
         style={{
           gridColumn: mediaIndex < 3 ? 3 : '3/8',
           gridRow: mediaIndex < 3 ? '2/4' : 'auto',
-          marginLeft: mediaIndex < 3 ? 3 : 0
+          marginLeft: mediaIndex < 3 ? 3 : 0,
         }}
       >
         <Stack space={3}>

package/src/components/Tag/index.tsx

@@ -1,9 +1,9 @@
 import {ArrowDownIcon, ArrowUpIcon, CloseIcon, EditIcon, SearchIcon, TrashIcon} from '@sanity/icons'
 import {Box, Button, Container, Flex, Text, Tooltip} from '@sanity/ui'
-import type {SearchFacetInputSearchableProps, TagActions, TagItem} from '../../types'
 import {type ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
 import {styled} from 'styled-components'
+
 import {inputs} from '../../config/searchFacets'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
@@ -11,6 +11,7 @@ import {selectAssetsPicked} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
 import {searchActions, selectIsSearchFacetTag} from '../../modules/search'
+import type {SearchFacetInputSearchableProps, TagActions, TagItem} from '../../types'
 
 type Props = {
   actions?: TagActions[]
@@ -77,7 +78,7 @@ const Tag = (props: Props) => {
   // Redux
   const dispatch = useDispatch()
   const assetsPicked = useTypedSelector(selectAssetsPicked)
-  const isSearchFacetTag = useTypedSelector(state => selectIsSearchFacetTag(state, tag?.tag?._id))
+  const isSearchFacetTag = useTypedSelector((state) => selectIsSearchFacetTag(state, tag?.tag?._id))
 
   // Callbacks
   const handleSearchFacetTagRemove = () => {
@@ -105,8 +106,8 @@ const Tag = (props: Props) => {
       ...inputs.tag,
       value: {
         label: tag?.tag?.name?.current,
-        value: tag?.tag?._id
-      }
+        value: tag?.tag?._id,
+      },
     } as SearchFacetInputSearchableProps
 
     if (isSearchFacetTag) {
@@ -114,8 +115,8 @@ const Tag = (props: Props) => {
         searchActions.facetsUpdate({
           name: 'tag',
           operatorType: 'references',
-          value: searchFacet.value
-        })
+          value: searchFacet.value,
+        }),
       )
     } else {
       dispatch(searchActions.facetsAdd({facet: searchFacet}))
@@ -130,7 +131,7 @@ const Tag = (props: Props) => {
           size={1}
           style={{
             opacity: tag?.updating ? 0.5 : 1.0,
-            userSelect: 'none'
+            userSelect: 'none',
           }}
           textOverflow="ellipsis"
         >

package/src/components/TagView/index.tsx

@@ -9,8 +9,8 @@ import TagViewHeader from '../TagViewHeader'
 const TagView = () => {
   const numPickedAssets = useTypedSelector(selectAssetsPickedLength)
   const tags = useTypedSelector(selectTags)
-  const fetching = useTypedSelector(state => state.tags.fetching)
-  const fetchCount = useTypedSelector(state => state.tags.fetchCount)
+  const fetching = useTypedSelector((state) => state.tags.fetching)
+  const fetchCount = useTypedSelector((state) => state.tags.fetchCount)
   const fetchComplete = fetchCount !== -1
   const hasTags = !fetching && tags?.length > 0
   const hasPicked = !!(numPickedAssets > 0)

package/src/components/TagViewHeader/index.tsx

@@ -2,6 +2,7 @@ import {ComposeIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline, Label} from '@sanity/ui'
 import {useDispatch} from 'react-redux'
 import {useColorSchemeValue} from 'sanity'
+
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
@@ -17,8 +18,8 @@ const TagViewHeader = ({allowCreate, light, title}: Props) => {
   const scheme = useColorSchemeValue()
 
   const dispatch = useDispatch()
-  const tagsCreating = useTypedSelector(state => state.tags.creating)
-  const tagsFetching = useTypedSelector(state => state.tags.fetching)
+  const tagsCreating = useTypedSelector((state) => state.tags.creating)
+  const tagsFetching = useTypedSelector((state) => state.tags.fetching)
 
   const handleTagCreate = () => {
     dispatch(DIALOG_ACTIONS.showTagCreate())
@@ -34,7 +35,7 @@ const TagViewHeader = ({allowCreate, light, title}: Props) => {
           background: light ? getSchemeColor(scheme, 'bg') : 'inherit',
           borderBottom: '1px solid var(--card-border-color)',
           flexShrink: 0,
-          height: `${PANEL_HEIGHT}px`
+          height: `${PANEL_HEIGHT}px`,
         }}
       >
         <Inline space={2}>
@@ -56,7 +57,7 @@ const TagViewHeader = ({allowCreate, light, title}: Props) => {
               onClick={handleTagCreate}
               style={{
                 background: 'transparent',
-                boxShadow: 'none'
+                boxShadow: 'none',
               }}
             />
           </Box>

package/src/components/TagsPanel/index.tsx

@@ -5,7 +5,7 @@ import useTypedSelector from '../../hooks/useTypedSelector'
 import TagView from '../TagView'
 
 const TagsPanel = () => {
-  const tagsPanelVisible = useTypedSelector(state => state.tags.panelVisible)
+  const tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible)
 
   if (!tagsPanelVisible) {
     return null
@@ -15,7 +15,7 @@ const TagsPanel = () => {
     <Box
       style={{
         position: 'relative',
-        width: TAGS_PANEL_WIDTH
+        width: TAGS_PANEL_WIDTH,
       }}
     >
       <Box
@@ -28,7 +28,7 @@ const TagsPanel = () => {
           position: 'absolute',
           right: 0,
           top: 0,
-          width: '100%'
+          width: '100%',
         }}
       >
         <TagView />

package/src/components/TagsVirtualized/index.tsx

@@ -1,17 +1,18 @@
 import {Flex, Label} from '@sanity/ui'
-import type {TagActions, TagItem} from '../../types'
 import {memo, useState} from 'react'
 import {Virtuoso} from 'react-virtuoso'
+
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {selectAssetsPicked} from '../../modules/assets'
 import {selectTags} from '../../modules/tags'
+import type {TagActions, TagItem} from '../../types'
 import Tag from '../Tag'
 
 const VirtualRow = memo(
   ({
     isScrolling,
-    item
+    item,
   }: {
     isScrolling?: boolean
     item:
@@ -37,7 +38,7 @@ const VirtualRow = memo(
 
     // Render tag - only display actions if we're not in the process of scrolling
     return <Tag actions={isScrolling ? undefined : item.actions} key={item.tag?._id} tag={item} />
-  }
+  },
 )
 
 const TagsVirtualized = () => {
@@ -51,7 +52,7 @@ const TagsVirtualized = () => {
 
   // Filter out all tag IDS used (across all) and dedupe
   const pickedTagIds = assetsPicked?.reduce((acc: string[], val) => {
-    const assetTagIds = val?.asset?.opt?.media?.tags?.map(tag => tag._ref) || []
+    const assetTagIds = val?.asset?.opt?.media?.tags?.map((tag) => tag._ref) || []
     acc = acc.concat(assetTagIds)
     return acc
   }, [])
@@ -62,9 +63,9 @@ const TagsVirtualized = () => {
   // 2. those which exist in some picked assets ('applied to some')
   const tagIdsSegmented = pickedTagIdsUnique.reduce(
     (acc: {appliedToAll: string[]; appliedToSome: string[]}, tagId) => {
-      const tagIsInEveryAsset = assetsPicked.every(assetItem => {
+      const tagIsInEveryAsset = assetsPicked.every((assetItem) => {
         const tagIndex =
-          assetItem.asset.opt?.media?.tags?.findIndex(tag => tag._ref === tagId) ?? -1
+          assetItem.asset.opt?.media?.tags?.findIndex((tag) => tag._ref === tagId) ?? -1
         return tagIndex >= 0
       })
 
@@ -78,27 +79,27 @@ const TagsVirtualized = () => {
     },
     {
       appliedToAll: [],
-      appliedToSome: []
-    }
+      appliedToSome: [],
+    },
   )
 
   const tagsAppliedToAll = tags
-    .filter(tag => tagIdsSegmented.appliedToAll.includes(tag.tag._id))
-    .map(tagItem => ({
+    .filter((tag) => tagIdsSegmented.appliedToAll.includes(tag.tag._id))
+    .map((tagItem) => ({
       ...tagItem,
-      actions: ['delete', 'edit', 'removeAll', 'search'] as TagActions[]
+      actions: ['delete', 'edit', 'removeAll', 'search'] as TagActions[],
     }))
   const tagsAppliedToSome = tags
-    .filter(tag => tagIdsSegmented.appliedToSome.includes(tag.tag._id))
-    .map(tagItem => ({
+    .filter((tag) => tagIdsSegmented.appliedToSome.includes(tag.tag._id))
+    .map((tagItem) => ({
       ...tagItem,
-      actions: ['applyAll', 'delete', 'edit', 'removeAll', 'search'] as TagActions[]
+      actions: ['applyAll', 'delete', 'edit', 'removeAll', 'search'] as TagActions[],
     }))
   const tagsUnused = tags
-    .filter(tag => !pickedTagIdsUnique.includes(tag.tag._id))
-    .map(tagItem => ({
+    .filter((tag) => !pickedTagIdsUnique.includes(tag.tag._id))
+    .map((tagItem) => ({
       ...tagItem,
-      actions: ['applyAll', 'delete', 'edit', 'search'] as TagActions[]
+      actions: ['applyAll', 'delete', 'edit', 'search'] as TagActions[],
     }))
 
   let items: (
@@ -108,30 +109,30 @@ const TagsVirtualized = () => {
       })
   )[] = []
   if (assetsPicked.length === 0) {
-    items = tags.map(tagItem => ({
+    items = tags.map((tagItem) => ({
       ...tagItem,
-      actions: ['delete', 'edit', 'search'] as TagActions[]
+      actions: ['delete', 'edit', 'search'] as TagActions[],
     }))
   } else {
     if (tagsAppliedToAll?.length > 0) {
       items = [
         ...items, //
         assetsPicked.length === 1 ? 'Used' : 'Used by all',
-        ...tagsAppliedToAll
+        ...tagsAppliedToAll,
       ]
     }
     if (tagsAppliedToSome?.length > 0) {
       items = [
         ...items, //
         'Used by some',
-        ...tagsAppliedToSome
+        ...tagsAppliedToSome,
       ]
     }
     if (tagsUnused?.length > 0) {
       items = [
         ...items, //
         'Unused',
-        ...tagsUnused
+        ...tagsUnused,
       ]
     }
   }
@@ -139,7 +140,7 @@ const TagsVirtualized = () => {
   return (
     <Virtuoso
       className="media__custom-scrollbar"
-      computeItemKey={index => {
+      computeItemKey={(index) => {
         const item = items[index]
         if (typeof item === 'string') {
           return item
@@ -147,7 +148,7 @@ const TagsVirtualized = () => {
         return item.tag._id
       }}
       isScrolling={setIsScrolling}
-      itemContent={index => {
+      itemContent={(index) => {
         return <VirtualRow isScrolling={isScrolling} item={items[index]} />
       }}
       style={{flex: 1, overflowX: 'hidden'}}

package/src/components/TextInputSearch/index.tsx

@@ -2,12 +2,13 @@ import {CloseIcon, SearchIcon} from '@sanity/icons'
 import {Box, Flex, TextInput} from '@sanity/ui'
 import {type ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {searchActions} from '../../modules/search'
 
 const TextInputSearch = () => {
   // Redux
-  const searchQuery = useTypedSelector(state => state.search.query)
+  const searchQuery = useTypedSelector((state) => state.search.query)
 
   // Redux
   const dispatch = useDispatch()
@@ -46,7 +47,7 @@ const TextInputSearch = () => {
             right: 0,
             top: 0,
             width: '2em',
-            zIndex: 1 // force stacking context
+            zIndex: 1, // force stacking context
           }}
         >
           <CloseIcon />

package/src/components/UploadDropzone/UploadDropzone.test.tsx

@@ -1,7 +1,8 @@
 import {describe, expect, it} from 'vitest'
-import UploadDropzone from './index'
+
 import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
 import {initialState as assetsInitialState} from '../../modules/assets'
+import UploadDropzone from './index'
 
 describe('UploadDropzone', () => {
   it('still renders file input when directUploads is false (dropzone in disabled mode)', () => {
@@ -12,9 +13,9 @@ describe('UploadDropzone', () => {
       {
         toolOptions: {creditLine: {enabled: false}, directUploads: false},
         preloaded: {
-          assets: {...assetsInitialState, assetTypes: ['image', 'file']}
-        }
-      }
+          assets: {...assetsInitialState, assetTypes: ['image', 'file']},
+        },
+      },
     )
 
     expect(container.querySelector('input[type="file"]')).toBeTruthy()
@@ -28,9 +29,9 @@ describe('UploadDropzone', () => {
       {
         toolOptions: {creditLine: {enabled: false}, directUploads: true},
         preloaded: {
-          assets: {...assetsInitialState, assetTypes: ['image', 'file']}
-        }
-      }
+          assets: {...assetsInitialState, assetTypes: ['image', 'file']},
+        },
+      },
     )
 
     const input = container.querySelector('input[type="file"]')