sanity-plugin-media 4.3.1 → 4.3.2

package/src/components/UploadDropzone/index.tsx

@@ -4,12 +4,13 @@ import {type ReactNode} from 'react'
 import {type DropEvent, type DropzoneOptions, useDropzone} from 'react-dropzone'
 import {useDispatch} from 'react-redux'
 import {styled} from 'styled-components'
+
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import {DropzoneDispatchProvider} from '../../contexts/DropzoneDispatchContext'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {notificationsActions} from '../../modules/notifications'
 import {uploadsActions} from '../../modules/uploads'
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
 
 type Props = {
   children: ReactNode
@@ -65,38 +66,38 @@ const UploadDropzone = (props: Props) => {
 
   const {
     dropzone: {maxSize},
-    directUploads
+    directUploads,
   } = useToolOptions()
 
   const {onSelect} = useAssetSourceActions()
 
   // Redux
   const dispatch = useDispatch()
-  const assetTypes = useTypedSelector(state => state.assets.assetTypes)
+  const assetTypes = useTypedSelector((state) => state.assets.assetTypes)
 
   const isImageAssetType = assetTypes.length === 1 && assetTypes[0] === 'image'
 
   // Callbacks
   const handleDrop = async (acceptedFiles: File[]) => {
-    acceptedFiles.forEach(file =>
+    acceptedFiles.forEach((file) =>
       dispatch(
         uploadsActions.uploadRequest({
           file,
-          forceAsAssetType: assetTypes.length === 1 ? assetTypes[0] : undefined
-        })
-      )
+          forceAsAssetType: assetTypes.length === 1 ? assetTypes[0] : undefined,
+        }),
+      ),
     )
   }
 
-  const handleDropRejected: DropzoneOptions['onDropRejected'] = rejections => {
+  const handleDropRejected: DropzoneOptions['onDropRejected'] = (rejections) => {
     const errorCodes = rejections.flatMap(({errors}) => errors.map(({code}) => code))
 
     if (errorCodes.includes('file-too-large')) {
       dispatch(
         notificationsActions.add({
           status: 'error',
-          title: 'One or more files exceed the maximum upload size.'
-        })
+          title: 'One or more files exceed the maximum upload size.',
+        }),
       )
     }
   }
@@ -126,8 +127,8 @@ const UploadDropzone = (props: Props) => {
       dispatch(
         notificationsActions.add({
           status: 'error',
-          title: `Unable to upload some items (folders and packages aren't supported)`
-        })
+          title: `Unable to upload some items (folders and packages aren't supported)`,
+        }),
       )
     }
 
@@ -145,7 +146,7 @@ const UploadDropzone = (props: Props) => {
     onDrop: handleDrop,
     maxSize,
     onDropRejected: handleDropRejected,
-    disabled: !directUploads
+    disabled: !directUploads,
   })
 
   return (

package/src/config/orders.ts

@@ -3,24 +3,24 @@ import type {OrderDirection} from '../types'
 const ORDER_DICTIONARY: Record<string, {asc: string; desc: string}> = {
   _createdAt: {
     asc: 'Last created: Oldest first',
-    desc: 'Last created: Newest first'
+    desc: 'Last created: Newest first',
   },
   _updatedAt: {
     asc: 'Last updated: Oldest first',
-    desc: 'Last updated: Newest first'
+    desc: 'Last updated: Newest first',
   },
   mimeType: {
     asc: 'MIME type: A to Z',
-    desc: 'MIME type: Z to A'
+    desc: 'MIME type: Z to A',
   },
   originalFilename: {
     asc: 'File name: A to Z',
-    desc: 'File name: Z to A'
+    desc: 'File name: Z to A',
   },
   size: {
     asc: 'File size: Smallest first',
-    desc: 'File size: Largest first'
-  }
+    desc: 'File size: Largest first',
+  },
 }
 
 export const getOrderTitle = (field: string, direction: OrderDirection): string => {

package/src/config/searchFacets.ts

@@ -1,10 +1,11 @@
+import groq from 'groq'
+
 import type {
   SearchFacetDivider,
   SearchFacetInputProps,
   SearchFacetName,
-  SearchFacetOperators
+  SearchFacetOperators,
 } from '../types'
-import groq from 'groq'
 
 export const divider: SearchFacetDivider = {type: 'divider'}
 
@@ -17,7 +18,7 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
     operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
     title: 'Alt text',
     type: 'string',
-    value: ''
+    value: '',
   },
   creditLine: {
     assetTypes: ['file', 'image'],
@@ -27,7 +28,7 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
     operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
     title: 'Credit',
     type: 'string',
-    value: ''
+    value: '',
   },
   description: {
     assetTypes: ['file', 'image'],
@@ -37,7 +38,7 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
     operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
     title: 'Description',
     type: 'string',
-    value: ''
+    value: '',
   },
   fileName: {
     assetTypes: ['file', 'image'],
@@ -47,7 +48,7 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
     operatorTypes: ['includes', 'doesNotInclude'],
     title: 'File name',
     type: 'string',
-    value: ''
+    value: '',
   },
   height: {
     assetTypes: ['image'],
@@ -60,11 +61,11 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       'lessThan',
       'lessThanOrEqualTo',
       null,
-      'equalTo'
+      'equalTo',
     ],
     title: 'Height',
     type: 'number',
-    value: 400
+    value: 400,
   },
   inCurrentDocument: {
     assetTypes: ['file', 'image'],
@@ -74,18 +75,18 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       {
         name: 'true',
         title: 'True',
-        value: groq`_id in $documentAssetIds`
+        value: groq`_id in $documentAssetIds`,
       },
       {
         name: 'false',
         title: 'False',
-        value: groq`!(_id in $documentAssetIds)`
-      }
+        value: groq`!(_id in $documentAssetIds)`,
+      },
     ],
     selectOnly: true,
     title: 'In use in current document',
     type: 'select',
-    value: 'true'
+    value: 'true',
   },
   inUse: {
     assetTypes: ['file', 'image'],
@@ -95,17 +96,17 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       {
         name: 'true',
         title: 'True',
-        value: groq`count(*[references(^._id)]) > 0`
+        value: groq`count(*[references(^._id)]) > 0`,
       },
       {
         name: 'false',
         title: 'False',
-        value: groq`count(*[references(^._id)]) == 0`
-      }
+        value: groq`count(*[references(^._id)]) == 0`,
+      },
     ],
     title: 'In use',
     type: 'select',
-    value: 'true'
+    value: 'true',
   },
   isOpaque: {
     assetTypes: ['image'],
@@ -116,17 +117,17 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       {
         name: 'true',
         title: 'True',
-        value: `false`
+        value: `false`,
       },
       {
         name: 'false',
         title: 'False',
-        value: `true`
-      }
+        value: `true`,
+      },
     ],
     title: 'Has transparency',
     type: 'select',
-    value: 'true'
+    value: 'true',
   },
   orientation: {
     assetTypes: ['image'],
@@ -137,22 +138,22 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       {
         name: 'portrait',
         title: 'Portrait',
-        value: 'metadata.dimensions.aspectRatio < 1'
+        value: 'metadata.dimensions.aspectRatio < 1',
       },
       {
         name: 'landscape',
         title: 'Landscape',
-        value: 'metadata.dimensions.aspectRatio > 1'
+        value: 'metadata.dimensions.aspectRatio > 1',
       },
       {
         name: 'square',
         title: 'Square',
-        value: 'metadata.dimensions.aspectRatio == 1'
-      }
+        value: 'metadata.dimensions.aspectRatio == 1',
+      },
     ],
     title: 'Orientation',
     type: 'select',
-    value: 'portrait'
+    value: 'portrait',
   },
   size: {
     assetTypes: ['file', 'image'],
@@ -162,13 +163,13 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       {
         name: 'kb',
         title: 'KB',
-        fieldModifier: fieldName => `round(${fieldName} / 1000)`
+        fieldModifier: (fieldName) => `round(${fieldName} / 1000)`,
       },
       {
         name: 'mb',
         title: 'MB',
-        fieldModifier: fieldName => `round(${fieldName} / 1000000)`
-      }
+        fieldModifier: (fieldName) => `round(${fieldName} / 1000000)`,
+      },
     ],
     name: 'size',
     operatorType: 'greaterThan',
@@ -178,11 +179,11 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       'lessThan',
       'lessThanOrEqualTo',
       null,
-      'equalTo'
+      'equalTo',
     ],
     title: 'File size',
     type: 'number',
-    value: 0
+    value: 0,
   },
   tag: {
     assetTypes: ['file', 'image'],
@@ -191,7 +192,7 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
     operatorType: 'references',
     operatorTypes: ['references', 'doesNotReference', null, 'empty', 'notEmpty'],
     title: 'Tags',
-    type: 'searchable'
+    type: 'searchable',
   },
   title: {
     assetTypes: ['file', 'image'],
@@ -201,7 +202,7 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
     operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
     title: 'Title',
     type: 'string',
-    value: ''
+    value: '',
   },
   type: {
     assetTypes: ['file', 'image'],
@@ -212,27 +213,27 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       {
         name: 'image',
         title: 'Image',
-        value: 'mimeType match "image*"'
+        value: 'mimeType match "image*"',
       },
       {
         name: 'video',
         title: 'Video',
-        value: 'mimeType match "video*"'
+        value: 'mimeType match "video*"',
       },
       {
         name: 'audio',
         title: 'Audio',
-        value: 'mimeType match "audio*"'
+        value: 'mimeType match "audio*"',
       },
       {
         name: 'pdf',
         title: 'PDF',
-        value: 'mimeType == "application/pdf"'
-      }
+        value: 'mimeType == "application/pdf"',
+      },
     ],
     title: 'File type',
     type: 'select',
-    value: 'image'
+    value: 'image',
   },
   width: {
     assetTypes: ['image'],
@@ -245,67 +246,67 @@ export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
       'lessThan',
       'lessThanOrEqualTo',
       null,
-      'equalTo'
+      'equalTo',
     ],
     title: 'Width',
     type: 'number',
-    value: 400
-  }
+    value: 400,
+  },
 }
 
 export const operators: SearchFacetOperators = {
   doesNotInclude: {
     fn: (value, field) => (value ? `!(${field} match '*${value}*')` : undefined),
-    label: 'does not include'
+    label: 'does not include',
   },
   doesNotReference: {
     fn: (value, _field) => (value ? `!references('${value}')` : undefined),
-    label: 'does not include'
+    label: 'does not include',
   },
   empty: {
     fn: (_value, field) => `!defined(${field})`,
     hideInput: true,
-    label: 'is empty'
+    label: 'is empty',
   },
   equalTo: {
     fn: (value, field) => (value ? `${field} == ${value}` : undefined),
-    label: 'is equal to'
+    label: 'is equal to',
   },
   greaterThan: {
     fn: (value, field) => (value ? `${field} > ${value}` : undefined),
-    label: 'is greater than'
+    label: 'is greater than',
   },
   greaterThanOrEqualTo: {
     fn: (value, field) => (value ? `${field} >= ${value}` : undefined),
-    label: 'is greater than or equal to'
+    label: 'is greater than or equal to',
   },
   includes: {
     fn: (value, field) => (value ? `${field} match '*${value}*'` : undefined),
-    label: 'includes'
+    label: 'includes',
   },
   is: {
     fn: (value, _field) => `${value}`,
-    label: 'is'
+    label: 'is',
   },
   isNot: {
     fn: (value, _field) => `!(${value})`,
-    label: 'is not'
+    label: 'is not',
   },
   lessThan: {
     fn: (value, field) => (value ? `${field} < ${value}` : undefined),
-    label: 'is less than'
+    label: 'is less than',
   },
   lessThanOrEqualTo: {
     fn: (value, field) => (value ? `${field} <= ${value}` : undefined),
-    label: 'is less than or equal to'
+    label: 'is less than or equal to',
   },
   notEmpty: {
     fn: (_value, field) => `defined(${field})`,
     hideInput: true,
-    label: 'is not empty'
+    label: 'is not empty',
   },
   references: {
     fn: (value, _field) => (value ? `references('${value}')` : undefined),
-    label: 'includes'
-  }
+    label: 'includes',
+  },
 }

package/src/constants.ts

@@ -1,15 +1,16 @@
 import type {AssetSourceComponentProps} from 'sanity'
+
+import {divider, inputs} from './config/searchFacets'
 import type {
   SearchFacetInputProps,
   SearchFacetDivider,
   SearchFacetGroup,
-  OrderDirection
+  OrderDirection,
 } from './types'
-import {divider, inputs} from './config/searchFacets'
 
 export const SUPPORTED_ASSET_TYPES = [
   'file',
-  'image'
+  'image',
 ] as const satisfies AssetSourceComponentProps['assetType'][]
 
 // Sort order dropdown options
@@ -17,42 +18,42 @@ export const SUPPORTED_ASSET_TYPES = [
 export const ORDER_OPTIONS: ({direction: OrderDirection; field: string} | null)[] = [
   {
     direction: 'desc',
-    field: '_createdAt'
+    field: '_createdAt',
   },
   {
     direction: 'asc',
-    field: '_createdAt'
+    field: '_createdAt',
   },
   // Divider
   null,
   {
     direction: 'desc',
-    field: '_updatedAt'
+    field: '_updatedAt',
   },
   {
     direction: 'asc' as OrderDirection,
-    field: '_updatedAt'
+    field: '_updatedAt',
   },
   // Divider
   null,
   {
     direction: 'asc',
-    field: 'originalFilename'
+    field: 'originalFilename',
   },
   {
     direction: 'desc',
-    field: 'originalFilename'
+    field: 'originalFilename',
   },
   // Divider
   null,
   {
     direction: 'desc',
-    field: 'size'
+    field: 'size',
   },
   {
     direction: 'asc',
-    field: 'size'
-  }
+    field: 'size',
+  },
 ]
 
 export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[] = [
@@ -74,12 +75,12 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   divider,
   inputs.orientation,
   inputs.width,
-  inputs.height
+  inputs.height,
 ]
 
 export const GRID_TEMPLATE_COLUMNS = {
   SMALL: '3rem 100px auto 1.5rem',
-  LARGE: '3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem'
+  LARGE: '3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem',
 }
 export const PANEL_HEIGHT = 32 // px
 export const TAG_DOCUMENT_NAME = 'media.tag'

package/src/contexts/AssetSourceDispatchContext.tsx

@@ -16,7 +16,7 @@ export const AssetBrowserDispatchProvider = (props: Props) => {
   const {children, onSelect} = props
 
   const contextValue: ContextProps = {
-    onSelect
+    onSelect,
   }
 
   return (

package/src/contexts/ToolOptionsContext.tsx

@@ -1,7 +1,8 @@
-import type {MediaToolOptions, Locale} from '../types'
 import {type PropsWithChildren, createContext, useContext, useMemo} from 'react'
 import type {DropzoneOptions} from 'react-dropzone'
 
+import type {MediaToolOptions, Locale} from '../types'
+
 type ContextProps = {
   dropzone: Pick<DropzoneOptions, 'maxSize'>
   components: MediaToolOptions['components']
@@ -30,15 +31,15 @@ export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props
     return {
       dropzone: {maxSize: options?.maximumUploadSize},
       components: {
-        details: options?.components?.details
+        details: options?.components?.details,
       },
       createTagsOnUpload: options?.createTagsOnUpload ?? true,
       creditLine: {
         enabled: options?.creditLine?.enabled || false,
-        excludeSources: creditLineExcludeSources
+        excludeSources: creditLineExcludeSources,
       },
       directUploads: options?.directUploads ?? true,
-      locales: options?.locales
+      locales: options?.locales,
     }
   }, [
     options?.creditLine?.enabled,
@@ -47,7 +48,7 @@ export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props
     options?.creditLine?.excludeSources,
     options?.maximumUploadSize,
     options?.directUploads,
-    options?.locales
+    options?.locales,
   ])
 
   return <ToolOptionsContext.Provider value={value}>{children}</ToolOptionsContext.Provider>

package/src/formSchema/index.test.ts

@@ -1,6 +1,7 @@
 // @vitest-environment node
 
 import {describe, expect, it} from 'vitest'
+
 import {assetFormSchema, tagFormSchema, tagOptionSchema} from './index'
 
 describe('tagOptionSchema', () => {
@@ -28,7 +29,7 @@ describe('assetFormSchema', () => {
     description: '',
     opt: {media: {tags: null}},
     originalFilename: 'file.png',
-    title: ''
+    title: '',
   }
 
   it('accepts valid asset form payload', () => {
@@ -39,8 +40,8 @@ describe('assetFormSchema', () => {
     expect(
       assetFormSchema.safeParse({
         ...base,
-        originalFilename: '   '
-      }).success
+        originalFilename: '   ',
+      }).success,
     ).toBe(false)
   })
 
@@ -48,8 +49,8 @@ describe('assetFormSchema', () => {
     expect(
       assetFormSchema.safeParse({
         ...base,
-        opt: {media: {tags: [{label: '', value: 'v'}]}}
-      }).success
+        opt: {media: {tags: [{label: '', value: 'v'}]}},
+      }).success,
     ).toBe(false)
   })
 })

package/src/formSchema/index.ts

@@ -14,7 +14,7 @@ export function localizedStringSchema(locales?: {id: string}[]) {
 
 export const tagOptionSchema = z.object({
   label: z.string().trim().min(1, {message: 'Label cannot be empty'}),
-  value: z.string().trim().min(1, {message: 'Value cannot be empty'})
+  value: z.string().trim().min(1, {message: 'Value cannot be empty'}),
 })
 
 export function getAssetFormSchema(locales?: {id: string}[]) {
@@ -24,16 +24,16 @@ export function getAssetFormSchema(locales?: {id: string}[]) {
     description: localizedStringSchema(locales),
     opt: z.object({
       media: z.object({
-        tags: z.array(tagOptionSchema).nullable()
-      })
+        tags: z.array(tagOptionSchema).nullable(),
+      }),
     }),
     originalFilename: z.string().trim().min(1, {message: 'Filename cannot be empty'}),
-    title: localizedStringSchema(locales)
+    title: localizedStringSchema(locales),
   })
 }
 
 export const assetFormSchema = getAssetFormSchema()
 
 export const tagFormSchema = z.object({
-  name: z.string().min(1, {message: 'Name cannot be empty'})
+  name: z.string().min(1, {message: 'Name cannot be empty'}),
 })

package/src/hooks/useBreakpointIndex.ts

@@ -5,11 +5,11 @@ import {useEffect, useState} from 'react'
 // - create MediaQueryLists from every breakpoint defined in our sanity studio theme
 // - for each MQL, listen to change events and return the selected breakpoint index
 const useBreakpointIndex = (): number => {
-  const mediaQueryLists = studioTheme?.container?.map(width =>
-    window.matchMedia(`(max-width: ${width}px)`)
+  const mediaQueryLists = studioTheme?.container?.map((width) =>
+    window.matchMedia(`(max-width: ${width}px)`),
   )
 
-  const getBreakpointIndex = () => mediaQueryLists.findIndex(mql => mql.matches)
+  const getBreakpointIndex = () => mediaQueryLists.findIndex((mql) => mql.matches)
 
   const [value, setValue] = useState(getBreakpointIndex())
 
@@ -19,7 +19,7 @@ const useBreakpointIndex = (): number => {
     }
 
     // NOTE: older versions of Safari use the older `addListener` and `removeListener` methods
-    mediaQueryLists.forEach(mql => {
+    mediaQueryLists.forEach((mql) => {
       try {
         mql.addEventListener('change', handleBreakpoint)
       } catch (err) {
@@ -32,10 +32,10 @@ const useBreakpointIndex = (): number => {
     })
     return () => {
       try {
-        mediaQueryLists.forEach(mql => mql.removeEventListener('change', handleBreakpoint))
+        mediaQueryLists.forEach((mql) => mql.removeEventListener('change', handleBreakpoint))
       } catch (err) {
         try {
-          mediaQueryLists.forEach(mql => mql.removeListener(handleBreakpoint))
+          mediaQueryLists.forEach((mql) => mql.removeListener(handleBreakpoint))
         } catch (_err) {
           // Do nothing
         }