sanity-plugin-media 4.3.1 → 4.3.2

package/src/components/DialogAssetEdit/DialogAssetEdit.test.tsx

@@ -1,7 +1,8 @@
-import userEvent from '@testing-library/user-event'
 import {fireEvent, screen, waitFor} from '@testing-library/react'
-import {describe, expect, it, vi} from 'vitest'
+import userEvent from '@testing-library/user-event'
 import {Subject} from 'rxjs'
+import {describe, expect, it, vi} from 'vitest'
+
 import DialogAssetEdit from './index'
 
 vi.mock('../Image', () => ({default: () => null}))
@@ -12,8 +13,8 @@ import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
 import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
 import {createTestRootState} from '../../__tests__/fixtures/rootState'
 import {inputByName, withinDialog} from '../../__tests__/fixtures/withinDialog'
-import type {RootReducerState} from '../../modules/types'
 import {assetsActions, initialState as assetsInitialState} from '../../modules/assets'
+import type {RootReducerState} from '../../modules/types'
 import type {AssetType, ImageAsset, MediaToolOptions} from '../../types'
 
 const asset = {
@@ -26,7 +27,7 @@ const asset = {
   size: 1,
   mimeType: 'image/png',
   url: 'https://example.com/x.png',
-  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true}
+  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true},
 } as ImageAsset
 
 const assetsPreloaded = {
@@ -34,25 +35,25 @@ const assetsPreloaded = {
   assetTypes: ['image'] as AssetType[],
   allIds: ['a1'],
   byIds: {
-    a1: {_type: 'asset' as const, asset, picked: false, updating: false}
-  }
+    a1: {_type: 'asset' as const, asset, picked: false, updating: false},
+  },
 }
 
-vi.mock('sanity', async importOriginal => {
+vi.mock('sanity', async (importOriginal) => {
   const actual = await importOriginal<typeof import('sanity')>()
   return {
     ...actual,
     WithReferringDocuments: ({children}: {children: (args: unknown) => unknown}) =>
       children({isLoading: false, referringDocuments: []}),
-    useDocumentStore: () => ({})
+    useDocumentStore: () => ({}),
   }
 })
 
 vi.mock('../../hooks/useVersionedClient', () => ({
   default: () =>
     createMockSanityClient({
-      listen: vi.fn(() => new Subject())
-    })
+      listen: vi.fn(() => new Subject()),
+    }),
 }))
 
 function renderAssetDialog(
@@ -60,7 +61,7 @@ function renderAssetDialog(
   opts: {
     preloaded?: Partial<RootReducerState>
     toolOptions?: Partial<MediaToolOptions>
-  } = {}
+  } = {},
 ) {
   const {preloaded: extraPreloaded, toolOptions} = opts
   return renderWithProviders(
@@ -70,10 +71,10 @@ function renderAssetDialog(
     {
       preloaded: {
         assets: assetsPreloaded,
-        ...extraPreloaded
+        ...extraPreloaded,
       },
-      toolOptions: {creditLine: {enabled: true}, ...toolOptions}
-    }
+      toolOptions: {creditLine: {enabled: true}, ...toolOptions},
+    },
   )
 }
 
@@ -82,7 +83,7 @@ describe('DialogAssetEdit', () => {
     renderAssetDialog({
       id: 'dlg-1',
       type: 'assetEdit',
-      assetId: 'a1'
+      assetId: 'a1',
     })
 
     const dlg = withinDialog(/asset details/i, screen)
@@ -94,7 +95,7 @@ describe('DialogAssetEdit', () => {
     renderAssetDialog({
       id: 'dlg-1',
       type: 'assetEdit',
-      assetId: 'a1'
+      assetId: 'a1',
     })
 
     const dlg = withinDialog(/asset details/i, screen)
@@ -106,7 +107,7 @@ describe('DialogAssetEdit', () => {
     const {store} = renderAssetDialog({
       id: 'dlg-1',
       type: 'assetEdit',
-      assetId: 'a1'
+      assetId: 'a1',
     })
     const dispatchSpy = vi.spyOn(store, 'dispatch')
     const dlg = withinDialog(/asset details/i, screen)
@@ -131,8 +132,8 @@ describe('DialogAssetEdit', () => {
         closeDialogId: 'a1',
         formData: expect.objectContaining({
           title: 'Hero image',
-          originalFilename: 'x.png'
-        })
+          originalFilename: 'x.png',
+        }),
       })
     })
   })
@@ -143,10 +144,10 @@ describe('DialogAssetEdit', () => {
       dialog: {
         items: [
           {id: 'dlg-1', type: 'assetEdit', assetId: 'a1'},
-          {id: 'tags', type: 'tags'}
-        ]
+          {id: 'tags', type: 'tags'},
+        ],
       },
-      assets: assetsPreloaded
+      assets: assetsPreloaded,
     })
 
     const {store} = renderWithProviders(
@@ -154,15 +155,15 @@ describe('DialogAssetEdit', () => {
         dialog={{
           id: 'dlg-1',
           type: 'assetEdit',
-          assetId: 'a1'
+          assetId: 'a1',
         }}
       >
         <span />
       </DialogAssetEdit>,
       {
         preloaded: base,
-        toolOptions: {creditLine: {enabled: true}}
-      }
+        toolOptions: {creditLine: {enabled: true}},
+      },
     )
 
     const dlg = withinDialog(/asset details/i, screen)
@@ -175,7 +176,7 @@ describe('DialogAssetEdit', () => {
     const {store} = renderAssetDialog({
       id: 'dlg-1',
       type: 'assetEdit',
-      assetId: 'a1'
+      assetId: 'a1',
     })
 
     const dlg = withinDialog(/asset details/i, screen)
@@ -200,7 +201,7 @@ describe('DialogAssetEdit', () => {
     renderAssetDialog({
       id: 'dlg-1',
       type: 'assetEdit',
-      assetId: 'a1'
+      assetId: 'a1',
     })
 
     const dlg = withinDialog(/asset details/i, screen)

package/src/components/DialogAssetEdit/index.tsx

@@ -1,30 +1,31 @@
-import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
 import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import type {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '../../types'
 import groq from 'groq'
 import {type ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {type SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
 import {WithReferringDocuments, useColorSchemeValue, useDocumentStore} from 'sanity'
+
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 import {getAssetFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
 import {assetsActions, selectAssetById} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import {selectTags, selectTagSelectOptions, tagsActions} from '../../modules/tags'
+import type {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '../../types'
 import getTagSelectOptions from '../../utils/getTagSelectOptions'
 import {getUniqueDocuments} from '../../utils/getUniqueDocuments'
 import imageDprUrl from '../../utils/imageDprUrl'
 import sanitizeFormData from '../../utils/sanitizeFormData'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
+import zodFormResolver from '../../utils/zodFormResolver'
 import AssetMetadata from '../AssetMetadata'
 import Dialog from '../Dialog'
 import DocumentList from '../DocumentList'
 import FileAssetPreview from '../FileAssetPreview'
 import FormSubmitButton from '../FormSubmitButton'
 import Image from '../Image'
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
 import Details, {type DetailsProps} from './Details'
 
 function renderDefaultDetails(props: DetailsProps) {
@@ -39,7 +40,7 @@ type Props = {
 const DialogAssetEdit = (props: Props) => {
   const {
     children,
-    dialog: {assetId, id, lastCreatedTag, lastRemovedTagIds}
+    dialog: {assetId, id, lastCreatedTag, lastRemovedTagIds},
   } = props
 
   const client = useVersionedClient()
@@ -48,7 +49,7 @@ const DialogAssetEdit = (props: Props) => {
   const documentStore = useDocumentStore()
 
   const dispatch = useDispatch()
-  const assetItem = useTypedSelector(state => selectAssetById(state, String(assetId))) // TODO: check casting
+  const assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))) // TODO: check casting
   const tags = useTypedSelector(selectTags)
 
   const assetUpdatedPrev = useRef<string | undefined>(undefined)
@@ -90,7 +91,7 @@ const DialogAssetEdit = (props: Props) => {
           description: makeLocaleObj(asset?.description),
           originalFilename: asset?.originalFilename || '',
           opt: {media: {tags: assetTagOptions}},
-          title: makeLocaleObj(asset?.title)
+          title: makeLocaleObj(asset?.title),
         }
       }
       // Normalize: if a field is a localized object but locales are disabled, pick first non-empty value
@@ -98,7 +99,7 @@ const DialogAssetEdit = (props: Props) => {
         if (typeof field === 'string') return field
         if (typeof field === 'object' && field !== null) {
           const values = Object.values(field as Record<string, string>)
-          return values.find(v => v) || ''
+          return values.find((v) => v) || ''
         }
         return ''
       }
@@ -108,10 +109,10 @@ const DialogAssetEdit = (props: Props) => {
         description: flattenField(asset?.description),
         originalFilename: asset?.originalFilename || '',
         opt: {media: {tags: assetTagOptions}},
-        title: flattenField(asset?.title)
+        title: flattenField(asset?.title),
       }
     },
-    [assetTagOptions, locales]
+    [assetTagOptions, locales],
   )
 
   const {
@@ -122,11 +123,11 @@ const DialogAssetEdit = (props: Props) => {
     handleSubmit,
     register,
     reset,
-    setValue
+    setValue,
   } = useForm<AssetFormData>({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: 'onChange',
-    resolver: zodResolver(getAssetFormSchema(locales))
+    resolver: zodFormResolver<AssetFormData>(getAssetFormSchema(locales)),
   })
 
   const formUpdating = !assetItem || assetItem?.updating
@@ -143,8 +144,8 @@ const DialogAssetEdit = (props: Props) => {
     dispatch(
       dialogActions.showConfirmDeleteAssets({
         assets: [assetItem],
-        closeDialogId: assetItem?.asset._id
-      })
+        closeDialogId: assetItem?.asset._id,
+      }),
     )
   }, [assetItem, dispatch])
 
@@ -162,31 +163,30 @@ const DialogAssetEdit = (props: Props) => {
       dispatch(
         tagsActions.createRequest({
           assetId: currentAsset?._id,
-          name: tagName
-        })
+          name: tagName,
+        }),
       )
     },
-    [currentAsset?._id, dispatch]
+    [currentAsset?._id, dispatch],
   )
 
   // Detect if asset has localized fields (objects) with keys not in the configured locales
   const hasOrphanedLocales = useMemo(() => {
     if (!currentAsset) return false
-    const isLocaleObj = (v: unknown) =>
-      typeof v === 'object' && v !== null && !Array.isArray(v)
+    const isLocaleObj = (v: unknown) => typeof v === 'object' && v !== null && !Array.isArray(v)
     const fields = [
       currentAsset.title,
       currentAsset.altText,
       currentAsset.description,
-      ...(currentAsset._type === 'sanity.imageAsset' ? [currentAsset.creditLine] : [])
+      ...(currentAsset._type === 'sanity.imageAsset' ? [currentAsset.creditLine] : []),
     ]
-    const anyLocalized = fields.some(f => isLocaleObj(f))
+    const anyLocalized = fields.some((f) => isLocaleObj(f))
     if (!anyLocalized) return false
     if (!locales || locales.length === 0) return true
-    const configuredIds = new Set(locales.map(l => l.id))
-    return fields.some(f => {
+    const configuredIds = new Set(locales.map((l) => l.id))
+    return fields.some((f) => {
       if (!isLocaleObj(f)) return false
-      return Object.keys(f as object).some(k => !configuredIds.has(k))
+      return Object.keys(f as object).some((k) => !configuredIds.has(k))
     })
   }, [currentAsset, locales])
 
@@ -199,9 +199,9 @@ const DialogAssetEdit = (props: Props) => {
       if (!locales || locales.length === 0) {
         // Pick the first non-empty value sorted by key for determinism
         const sorted = Object.keys(obj).sort()
-        return sorted.map(k => obj[k]).find(v => v) || ''
+        return sorted.map((k) => obj[k]).find((v) => v) || ''
       }
-      const configuredIds = new Set(locales.map(l => l.id))
+      const configuredIds = new Set(locales.map((l) => l.id))
       const cleaned: Record<string, string> = {}
       for (const [key, val] of Object.entries(obj)) {
         if (configuredIds.has(key)) cleaned[key] = val
@@ -216,15 +216,15 @@ const DialogAssetEdit = (props: Props) => {
         altText: cleanField(currentAsset.altText),
         description: cleanField(currentAsset.description),
         ...(currentAsset._type === 'sanity.imageAsset' && {
-          creditLine: cleanField(currentAsset.creditLine)
-        })
+          creditLine: cleanField(currentAsset.creditLine),
+        }),
       })
       .commit()
   }, [client, currentAsset, locales])
 
   // Submit react-hook-form
   const onSubmit: SubmitHandler<AssetFormData> = useCallback(
-    formData => {
+    (formData) => {
       if (!assetItem?.asset) {
         return
       }
@@ -245,15 +245,15 @@ const DialogAssetEdit = (props: Props) => {
                   sanitizedFormData.opt.media.tags?.map((tag: TagSelectOption) => ({
                     _ref: tag.value,
                     _type: 'reference',
-                    _weak: true
-                  })) || null
-              }
-            }
-          }
-        })
+                    _weak: true,
+                  })) || null,
+              },
+            },
+          },
+        }),
       )
     },
-    [assetItem?.asset, dispatch]
+    [assetItem?.asset, dispatch],
   )
 
   // Listen for asset mutations and update snapshot
@@ -285,7 +285,7 @@ const DialogAssetEdit = (props: Props) => {
   useEffect(() => {
     if (lastRemovedTagIds) {
       const existingTags = (getValues('opt.media.tags') as TagSelectOption[]) || []
-      const updatedTags = existingTags.filter(tag => {
+      const updatedTags = existingTags.filter((tag) => {
         return !lastRemovedTagIds.includes(tag.value)
       })
 
@@ -359,7 +359,7 @@ const DialogAssetEdit = (props: Props) => {
     handleCreateTag,
     currentAsset,
     creditLine,
-    locales
+    locales,
   }
 
   return (

package/src/components/DialogConfirm/index.tsx

@@ -1,9 +1,10 @@
 import {WarningOutlineIcon} from '@sanity/icons'
 import {Box, Button, Flex, Stack, Text} from '@sanity/ui'
-import type {DialogConfirmProps} from '../../types'
 import {type ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
+
 import {dialogActions} from '../../modules/dialog'
+import type {DialogConfirmProps} from '../../types'
 import Dialog from '../Dialog'
 
 type Props = {

package/src/components/DialogSearchFacets/index.tsx

@@ -1,8 +1,9 @@
 import {Box} from '@sanity/ui'
-import type {DialogSearchFacetsProps} from '../../types'
 import {type ReactNode, useCallback} from 'react'
 import {useDispatch} from 'react-redux'
+
 import {dialogActions} from '../../modules/dialog'
+import type {DialogSearchFacetsProps} from '../../types'
 import Dialog from '../Dialog'
 import SearchFacets from '../SearchFacets'
 import SearchFacetsControl from '../SearchFacetsControl'
@@ -15,7 +16,7 @@ type Props = {
 const DialogSearchFacets = (props: Props) => {
   const {
     children,
-    dialog: {id}
+    dialog: {id},
   } = props
 
   // Redux

package/src/components/DialogTagCreate/DialogTagCreate.test.tsx

@@ -1,11 +1,12 @@
-import userEvent from '@testing-library/user-event'
 import {screen, waitFor} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
-import DialogTagCreate from './index'
+
 import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
 import {createTestRootState} from '../../__tests__/fixtures/rootState'
 import {getDialogRoot, inputByName, withinDialog} from '../../__tests__/fixtures/withinDialog'
 import {tagsActions} from '../../modules/tags'
+import DialogTagCreate from './index'
 
 describe('DialogTagCreate', () => {
   it('dispatches tag create flow when form is valid', async () => {
@@ -13,7 +14,7 @@ describe('DialogTagCreate', () => {
     const {store} = renderWithProviders(
       <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
         <span />
-      </DialogTagCreate>
+      </DialogTagCreate>,
     )
 
     const dlg = withinDialog(/create tag/i, screen)
@@ -28,7 +29,7 @@ describe('DialogTagCreate', () => {
     const {store} = renderWithProviders(
       <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
         <span />
-      </DialogTagCreate>
+      </DialogTagCreate>,
     )
     const dispatchSpy = vi.spyOn(store, 'dispatch')
     const dlg = withinDialog(/create tag/i, screen)
@@ -55,11 +56,11 @@ describe('DialogTagCreate', () => {
     renderWithProviders(
       <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
         <span />
-      </DialogTagCreate>
+      </DialogTagCreate>,
     )
 
     expect(
-      withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i})
+      withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i}),
     ).toBeDisabled()
 
     const nameInput = inputByName(/create tag/i, screen, 'name')
@@ -67,7 +68,7 @@ describe('DialogTagCreate', () => {
     await user.tab()
     await waitFor(() => {
       expect(
-        withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i})
+        withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i}),
       ).not.toBeDisabled()
     })
   })
@@ -78,16 +79,16 @@ describe('DialogTagCreate', () => {
       dialog: {
         items: [
           {id: 'dlg-1', type: 'tagCreate'},
-          {id: 'tags', type: 'tags'}
-        ]
-      }
+          {id: 'tags', type: 'tags'},
+        ],
+      },
     })
 
     const {store} = renderWithProviders(
       <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
         <span />
       </DialogTagCreate>,
-      {preloaded: base}
+      {preloaded: base},
     )
 
     const dlg = withinDialog(/create tag/i, screen)
@@ -100,20 +101,20 @@ describe('DialogTagCreate', () => {
     const base = createTestRootState({
       tags: {
         ...createTestRootState().tags,
-        creatingError: {message: 'Tag already exists', statusCode: 409}
-      }
+        creatingError: {message: 'Tag already exists', statusCode: 409},
+      },
     })
 
     renderWithProviders(
       <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
         <span />
       </DialogTagCreate>,
-      {preloaded: base}
+      {preloaded: base},
     )
 
     await waitFor(() => {
       expect(
-        getDialogRoot(/create tag/i, screen).querySelector('[data-sanity-icon="error-outline"]')
+        getDialogRoot(/create tag/i, screen).querySelector('[data-sanity-icon="error-outline"]'),
       ).toBeTruthy()
     })
   })

package/src/components/DialogTagCreate/index.tsx

@@ -1,14 +1,15 @@
-import {zodResolver} from '@hookform/resolvers/zod'
 import {Box, Flex} from '@sanity/ui'
-import type {DialogTagCreateProps, TagFormData} from '../../types'
 import {type ReactNode, useEffect} from 'react'
 import {type SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
+
 import {tagFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {dialogActions} from '../../modules/dialog'
 import {tagsActions} from '../../modules/tags'
+import type {DialogTagCreateProps, TagFormData} from '../../types'
 import sanitizeFormData from '../../utils/sanitizeFormData'
+import zodFormResolver from '../../utils/zodFormResolver'
 import Dialog from '../Dialog'
 import FormFieldInputText from '../FormFieldInputText'
 import FormSubmitButton from '../FormSubmitButton'
@@ -21,26 +22,26 @@ type Props = {
 const DialogTagCreate = (props: Props) => {
   const {
     children,
-    dialog: {id}
+    dialog: {id},
   } = props
 
   const dispatch = useDispatch()
 
-  const creating = useTypedSelector(state => state.tags.creating)
-  const creatingError = useTypedSelector(state => state.tags.creatingError)
+  const creating = useTypedSelector((state) => state.tags.creating)
+  const creatingError = useTypedSelector((state) => state.tags.creatingError)
 
   const {
     // Read the formState before render to subscribe the form state through Proxy
     formState: {errors, isDirty, isValid},
     handleSubmit,
     register,
-    setError
+    setError,
   } = useForm<TagFormData>({
     defaultValues: {
-      name: ''
+      name: '',
     },
     mode: 'onChange',
-    resolver: zodResolver(tagFormSchema)
+    resolver: zodFormResolver<TagFormData>(tagFormSchema),
   })
 
   const formUpdating = creating
@@ -50,7 +51,7 @@ const DialogTagCreate = (props: Props) => {
   }
 
   // - submit react-hook-form
-  const onSubmit: SubmitHandler<TagFormData> = formData => {
+  const onSubmit: SubmitHandler<TagFormData> = (formData) => {
     const sanitizedFormData = sanitizeFormData(formData)
 
     dispatch(tagsActions.createRequest({name: sanitizedFormData.name}))
@@ -59,7 +60,7 @@ const DialogTagCreate = (props: Props) => {
   useEffect(() => {
     if (creatingError) {
       setError('name', {
-        message: creatingError?.message
+        message: creatingError?.message,
       })
     }
   }, [creatingError, setError])