sanity-plugin-media 4.3.1 → 4.3.2

package/src/components/DialogTagEdit/DialogTagEdit.test.tsx

@@ -1,14 +1,15 @@
-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 DialogTagEdit from './index'
+import {describe, expect, it, vi} from 'vitest'
+
 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 {tagsActions} from '../../modules/tags'
 import type {Tag} from '../../types'
+import DialogTagEdit from './index'
 
 const tag: Tag = {
   _id: 't1',
@@ -16,25 +17,25 @@ const tag: Tag = {
   _createdAt: '',
   _updatedAt: '',
   _rev: 'r1',
-  name: {_type: 'slug', current: 'alpha'}
+  name: {_type: 'slug', current: 'alpha'},
 }
 
 const tagsPreloaded = {
   allIds: ['t1'],
   byIds: {
-    t1: {_type: 'tag' as const, tag, picked: false, updating: false}
+    t1: {_type: 'tag' as const, tag, picked: false, updating: false},
   },
   creating: false,
   fetchCount: -1,
   fetching: false,
-  panelVisible: true
+  panelVisible: true,
 }
 
 vi.mock('../../hooks/useVersionedClient', () => ({
   default: () =>
     createMockSanityClient({
-      listen: vi.fn(() => new Subject())
-    })
+      listen: vi.fn(() => new Subject()),
+    }),
 }))
 
 describe('DialogTagEdit', () => {
@@ -46,9 +47,9 @@ describe('DialogTagEdit', () => {
       </DialogTagEdit>,
       {
         preloaded: {
-          tags: tagsPreloaded
-        }
-      }
+          tags: tagsPreloaded,
+        },
+      },
     )
 
     const dlg = withinDialog(/edit tag/i, screen)
@@ -68,9 +69,9 @@ describe('DialogTagEdit', () => {
       </DialogTagEdit>,
       {
         preloaded: {
-          tags: tagsPreloaded
-        }
-      }
+          tags: tagsPreloaded,
+        },
+      },
     )
     const dispatchSpy = vi.spyOn(store, 'dispatch')
     const dlg = withinDialog(/edit tag/i, screen)
@@ -93,9 +94,9 @@ describe('DialogTagEdit', () => {
       expect(updateAction?.payload).toMatchObject({
         closeDialogId: 't1',
         formData: {
-          name: {_type: 'slug', current: 'gamma'}
+          name: {_type: 'slug', current: 'gamma'},
         },
-        tag
+        tag,
       })
     })
   })
@@ -107,9 +108,9 @@ describe('DialogTagEdit', () => {
       </DialogTagEdit>,
       {
         preloaded: {
-          tags: tagsPreloaded
-        }
-      }
+          tags: tagsPreloaded,
+        },
+      },
     )
 
     const dlg = withinDialog(/edit tag/i, screen)
@@ -122,17 +123,17 @@ describe('DialogTagEdit', () => {
       dialog: {
         items: [
           {id: 'dlg-1', type: 'tagEdit', tagId: 't1'},
-          {id: 'tags', type: 'tags'}
-        ]
+          {id: 'tags', type: 'tags'},
+        ],
       },
-      tags: tagsPreloaded
+      tags: tagsPreloaded,
     })
 
     const {store} = renderWithProviders(
       <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
         <span />
       </DialogTagEdit>,
-      {preloaded: base}
+      {preloaded: base},
     )
 
     const dlg = withinDialog(/edit tag/i, screen)
@@ -148,15 +149,15 @@ describe('DialogTagEdit', () => {
       </DialogTagEdit>,
       {
         preloaded: {
-          tags: tagsPreloaded
-        }
-      }
+          tags: tagsPreloaded,
+        },
+      },
     )
 
     const dlg = withinDialog(/edit tag/i, screen)
     fireEvent.click(dlg.getByRole('button', {name: /^delete$/i}))
 
-    const confirm = store.getState().dialog.items.find(d => d.type === 'confirm')
+    const confirm = store.getState().dialog.items.find((d) => d.type === 'confirm')
     expect(confirm).toBeDefined()
     expect(confirm?.title).toMatch(/permanently delete/i)
     expect(confirm?.headerTitle).toBe('Confirm deletion')

package/src/components/DialogTagEdit/index.tsx

@@ -1,17 +1,18 @@
-import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
 import {Box, Button, Card, Flex, Text} from '@sanity/ui'
-import type {DialogTagEditProps, Tag, TagFormData} from '../../types'
 import groq from 'groq'
 import {type ReactNode, useCallback, useEffect, useState} 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 useVersionedClient from '../../hooks/useVersionedClient'
 import {dialogActions} from '../../modules/dialog'
 import {selectTagById, tagsActions} from '../../modules/tags'
+import type {DialogTagEditProps, Tag, 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'
@@ -24,20 +25,20 @@ type Props = {
 const DialogTagEdit = (props: Props) => {
   const {
     children,
-    dialog: {id, tagId}
+    dialog: {id, tagId},
   } = props
 
   const client = useVersionedClient()
 
   const dispatch = useDispatch()
-  const tagItem = useTypedSelector(state => selectTagById(state, String(tagId))) // TODO: double check string cast
+  const tagItem = useTypedSelector((state) => selectTagById(state, String(tagId))) // TODO: double check string cast
 
   // - Generate a snapshot of the current tag
   const [tagSnapshot, setTagSnapshot] = useState(tagItem?.tag)
 
   const currentTag = tagItem ? tagItem?.tag : tagSnapshot
   const generateDefaultValues = (tag?: Tag) => ({
-    name: tag?.name?.current || ''
+    name: tag?.name?.current || '',
   })
 
   const {
@@ -46,11 +47,11 @@ const DialogTagEdit = (props: Props) => {
     handleSubmit,
     register,
     reset,
-    setError
+    setError,
   } = useForm<TagFormData>({
     defaultValues: generateDefaultValues(tagItem?.tag),
     mode: 'onChange',
-    resolver: zodResolver(tagFormSchema)
+    resolver: zodFormResolver<TagFormData>(tagFormSchema),
   })
 
   const formUpdating = !tagItem || tagItem?.updating
@@ -60,7 +61,7 @@ const DialogTagEdit = (props: Props) => {
   }
 
   // Submit react-hook-form
-  const onSubmit: SubmitHandler<TagFormData> = formData => {
+  const onSubmit: SubmitHandler<TagFormData> = (formData) => {
     if (!tagItem?.tag) {
       return
     }
@@ -71,11 +72,11 @@ const DialogTagEdit = (props: Props) => {
         formData: {
           name: {
             _type: 'slug',
-            current: sanitizedFormData.name
-          }
+            current: sanitizedFormData.name,
+          },
         },
-        tag: tagItem?.tag
-      })
+        tag: tagItem?.tag,
+      }),
     )
   }
 
@@ -87,8 +88,8 @@ const DialogTagEdit = (props: Props) => {
     dispatch(
       dialogActions.showConfirmDeleteTag({
         closeDialogId: tagItem?.tag?._id,
-        tag: tagItem?.tag
-      })
+        tag: tagItem?.tag,
+      }),
     )
   }
 
@@ -102,13 +103,13 @@ const DialogTagEdit = (props: Props) => {
         reset(generateDefaultValues(result as Tag))
       }
     },
-    [reset]
+    [reset],
   )
 
   useEffect(() => {
     if (tagItem?.error) {
       setError('name', {
-        message: tagItem.error?.message
+        message: tagItem.error?.message,
       })
     }
   }, [setError, tagItem.error])

package/src/components/DialogTags/index.tsx

@@ -1,8 +1,9 @@
 import {Box} from '@sanity/ui'
-import type {DialogTagsProps} from '../../types'
 import {type ReactNode, useCallback} from 'react'
 import {useDispatch} from 'react-redux'
+
 import {dialogActions} from '../../modules/dialog'
+import type {DialogTagsProps} from '../../types'
 import Dialog from '../Dialog'
 import TagView from '../TagView'
 
@@ -14,7 +15,7 @@ type Props = {
 const DialogTags = (props: Props) => {
   const {
     children,
-    dialog: {id}
+    dialog: {id},
   } = props
 
   // Redux
@@ -30,7 +31,7 @@ const DialogTags = (props: Props) => {
       <Box
         style={{
           height: '100%',
-          minHeight: '420px' // explicit height required as <TagView> is virtualized
+          minHeight: '420px', // explicit height required as <TagView> is virtualized
         }}
       >
         <TagView />

package/src/components/Dialogs/index.tsx

@@ -1,6 +1,5 @@
-import type {Dialog} from '../../types'
-
 import useTypedSelector from '../../hooks/useTypedSelector'
+import type {Dialog} from '../../types'
 import DialogAssetEdit from '../DialogAssetEdit'
 import DialogConfirm from '../DialogConfirm'
 import DialogSearchFacets from '../DialogSearchFacets'
@@ -10,7 +9,7 @@ import DialogTags from '../DialogTags'
 
 const Dialogs = () => {
   // Redux
-  const currentDialogs = useTypedSelector(state => state.dialog.items)
+  const currentDialogs = useTypedSelector((state) => state.dialog.items)
 
   const renderDialogs = (dialogs: Dialog[], index: number) => {
     if (dialogs.length === 0 || index >= dialogs.length) {

package/src/components/DocumentList/index.tsx

@@ -1,6 +1,5 @@
 import type {SanityDocument} from '@sanity/client'
 import {Box, Button, Card, Stack, Text} from '@sanity/ui'
-
 import {Preview, type SchemaType, useSchema} from 'sanity'
 import {useIntentLink} from 'sanity/router'
 
@@ -31,7 +30,7 @@ const DocumentList = ({documents, isLoading}: Props) => {
   return (
     <Card flex={1} marginBottom={2} padding={2} radius={2} shadow={1}>
       <Stack space={2}>
-        {documents?.map(doc => (
+        {documents?.map((doc) => (
           <ReferringDocument doc={doc} key={doc._id} schemaType={schema.get(doc._type)} />
         ))}
       </Stack>
@@ -44,7 +43,7 @@ const ReferringDocument = (props: {doc: SanityDocument; schemaType?: SchemaType}
 
   const {onClick} = useIntentLink({
     intent: 'edit',
-    params: {id: doc._id}
+    params: {id: doc._id},
   })
 
   return schemaType ? (

package/src/components/FileAssetPreview/index.tsx

@@ -1,6 +1,6 @@
 import {Flex} from '@sanity/ui'
-import type {Asset} from '../../types'
 
+import type {Asset} from '../../types'
 import FileIcon from '../FileIcon'
 
 type Props = {
@@ -25,7 +25,7 @@ const FileAssetPreview = (props: Props) => {
         src={asset.url}
         style={{
           height: '100%',
-          width: '100%'
+          width: '100%',
         }}
       />
     )

package/src/components/FormBuilderTool/FormBuilderTool.test.tsx

@@ -1,23 +1,24 @@
-import {describe, expect, it, vi, beforeEach} from 'vitest'
-import {render, screen, waitFor} from '@testing-library/react'
 import {LayerProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
-import {ColorSchemeProvider} from 'sanity'
+import {render, screen, waitFor} from '@testing-library/react'
 import {of} from 'rxjs'
-import FormBuilderTool from './index'
+import {ColorSchemeProvider} from 'sanity'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
 import {createListenMock} from '../../__tests__/fixtures/listenMock'
 import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
 import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
+import FormBuilderTool from './index'
 
 vi.mock('../../hooks/useVersionedClient', () => ({
-  default: vi.fn()
+  default: vi.fn(),
 }))
 
-vi.mock('sanity', async importOriginal => {
+vi.mock('sanity', async (importOriginal) => {
   const mod = await importOriginal<typeof import('sanity')>()
   return {
     ...mod,
-    useFormValue: () => ({_id: 'doc-1', _type: 'article'})
+    useFormValue: () => ({_id: 'doc-1', _type: 'article'}),
   }
 })
 
@@ -27,8 +28,8 @@ describe('FormBuilderTool', () => {
     vi.mocked(useVersionedClient).mockReturnValue(
       createMockSanityClient({
         listen: createListenMock(),
-        observable: {fetch}
-      })
+        observable: {fetch},
+      }),
     )
   })
 
@@ -45,14 +46,14 @@ describe('FormBuilderTool', () => {
                     onClose: vi.fn(),
                     onSelect: vi.fn(),
                     schemaType: {},
-                    selectedAssets: undefined
+                    selectedAssets: undefined,
                   } as any)}
                 />
               </ToolOptionsProvider>
             </LayerProvider>
           </ToastProvider>
         </ThemeProvider>
-      </ColorSchemeProvider>
+      </ColorSchemeProvider>,
     )
 
     await waitFor(() => {

package/src/components/FormBuilderTool/index.tsx

@@ -1,6 +1,7 @@
 import {Box, Portal, PortalProvider, useLayer} from '@sanity/ui'
 import {type SyntheticEvent, useEffect, useState} from 'react'
 import {type AssetSourceComponentProps, type SanityDocument, useFormValue} from 'sanity'
+
 import useKeyPress from '../../hooks/useKeyPress'
 import Browser from '../Browser'
 
@@ -41,7 +42,7 @@ const FormBuilderTool = (props: AssetSourceComponentProps) => {
             position: 'fixed',
             top: 0,
             width: '100%',
-            zIndex
+            zIndex,
           }}
         >
           <Browser document={currentDocument} schemaType={props.schemaType} {...props} />

package/src/components/FormFieldInputLabel/index.tsx

@@ -1,6 +1,5 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Inline, Text, Tooltip} from '@sanity/ui'
-
 import {styled} from 'styled-components'
 
 type Props = {
@@ -12,7 +11,7 @@ type Props = {
 
 const StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(({theme}) => {
   return {
-    color: theme.sanity.color.spot.red
+    color: theme.sanity.color.spot.red,
   }
 })
 

package/src/components/FormFieldInputTags/index.tsx

@@ -2,6 +2,7 @@ import {Box} from '@sanity/ui'
 import {Controller} from 'react-hook-form'
 import CreatableSelect from 'react-select/creatable'
 import {useColorSchemeValue} from 'sanity'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/creatable'
 import type {TagSelectOption} from '../../types'
@@ -34,14 +35,14 @@ const FormFieldInputTags = (props: Props) => {
     onCreateTag,
     options,
     placeholder,
-    value
+    value,
   } = props
 
   const scheme = useColorSchemeValue()
 
   // Redux
-  const creating = useTypedSelector(state => state.tags.creating)
-  const tagsFetching = useTypedSelector(state => state.tags.fetching)
+  const creating = useTypedSelector((state) => state.tags.creating)
+  const tagsFetching = useTypedSelector((state) => state.tags.fetching)
 
   return (
     <Box

package/src/components/FormSubmitButton/index.tsx

@@ -1,5 +1,5 @@
 import {Box, Button, Text, Tooltip} from '@sanity/ui'
-import { format } from 'date-fns'
+import {format} from 'date-fns'
 import {type ReactNode} from 'react'
 
 type Props = {

package/src/components/Header/index.tsx

@@ -4,8 +4,8 @@ import pluralize from 'pluralize'
 
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import {useDropzoneActions} from '../../contexts/DropzoneDispatchContext'
-import useTypedSelector from '../../hooks/useTypedSelector'
 import {useToolOptions} from '../../contexts/ToolOptionsContext'
+import useTypedSelector from '../../hooks/useTypedSelector'
 
 type Props = {
   onClose?: () => void
@@ -18,8 +18,8 @@ const Header = (props: Props) => {
   const {onSelect} = useAssetSourceActions()
 
   // Redux
-  const assetTypes = useTypedSelector(state => state.assets.assetTypes)
-  const selectedDocument = useTypedSelector(state => state.selected.document)
+  const assetTypes = useTypedSelector((state) => state.assets.assetTypes)
+  const selectedDocument = useTypedSelector((state) => state.selected.document)
 
   const {directUploads} = useToolOptions()
 

package/src/components/Image/index.tsx

@@ -1,6 +1,7 @@
 import type {ThemeColorSchemeKey} from '@sanity/ui'
 import type {MouseEvent} from 'react'
 import {styled, css} from 'styled-components'
+
 import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
@@ -12,7 +13,7 @@ type Props = {
 }
 
 const Image = styled.img<Props>`
-  --checkerboard-color: ${props =>
+  --checkerboard-color: ${(props) =>
     props.$scheme ? getSchemeColor(props.$scheme, 'bg2') : 'inherit'};
 
   display: block;
@@ -20,15 +21,20 @@ const Image = styled.img<Props>`
   height: 100%;
   object-fit: contain;
 
-  ${props =>
+  ${(props) =>
     props.$showCheckerboard &&
     css`
-      background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
+      background-image:
+        linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
         linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, var(--checkerboard-color) 75%),
         linear-gradient(-45deg, transparent 75%, var(--checkerboard-color) 75%);
       background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+      background-position:
+        0 0,
+        0 10px,
+        10px -10px,
+        -10px 0;
     `}
 `
 

package/src/components/Items/index.tsx

@@ -1,6 +1,7 @@
 import {Box, Text} from '@sanity/ui'
 import {useEffect} from 'react'
 import {useDispatch} from 'react-redux'
+
 import useBreakpointIndex from '../../hooks/useBreakpointIndex'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions} from '../../modules/assets'
@@ -12,10 +13,10 @@ import AssetTableVirtualized from '../AssetTableVirtualized'
 const Items = () => {
   // Redux
   const dispatch = useDispatch()
-  const fetchCount = useTypedSelector(state => state.assets.fetchCount)
-  const fetching = useTypedSelector(state => state.assets.fetching)
-  const tagsPanelVisible = useTypedSelector(state => state.tags.panelVisible)
-  const view = useTypedSelector(state => state.assets.view)
+  const fetchCount = useTypedSelector((state) => state.assets.fetchCount)
+  const fetching = useTypedSelector((state) => state.assets.fetching)
+  const tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible)
+  const view = useTypedSelector((state) => state.assets.view)
   const combinedItems = useTypedSelector(selectCombinedItems)
 
   const breakpointIndex = useBreakpointIndex()

package/src/components/Notifications/index.tsx

@@ -1,9 +1,10 @@
 import {useToast} from '@sanity/ui'
 import {useEffect} from 'react'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 
 const Notifications = () => {
-  const items = useTypedSelector(state => state.notifications.items)
+  const items = useTypedSelector((state) => state.notifications.items)
   const toast = useToast()
 
   useEffect(() => {
@@ -12,7 +13,7 @@ const Notifications = () => {
       toast.push({
         closable: true,
         status: lastItem.status,
-        title: lastItem.title
+        title: lastItem.title,
       })
     }
   }, [items.length])

package/src/components/OrderSelect/index.tsx

@@ -1,6 +1,7 @@
 import {SortIcon} from '@sanity/icons'
 import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import {useDispatch} from 'react-redux'
+
 import {getOrderTitle} from '../../config/orders'
 import {ORDER_OPTIONS} from '../../constants'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
@@ -10,7 +11,7 @@ import {assetsActions} from '../../modules/assets'
 const OrderSelect = () => {
   // Redux
   const dispatch = useDispatch()
-  const order = useTypedSelector(state => state.assets.order)
+  const order = useTypedSelector((state) => state.assets.order)
 
   const popoverProps = usePortalPopoverProps()
 
@@ -40,8 +41,8 @@ const OrderSelect = () => {
                   onClick={() =>
                     dispatch(
                       assetsActions.orderSet({
-                        order: {direction: item.direction, field: item.field}
-                      })
+                        order: {direction: item.direction, field: item.field},
+                      }),
                     )
                   }
                   padding={2}

package/src/components/PickedBar/index.tsx

@@ -2,6 +2,7 @@ import {Box, Button, Flex, Label} from '@sanity/ui'
 import pluralize from 'pluralize'
 import {useDispatch} from 'react-redux'
 import {useColorSchemeValue} from 'sanity'
+
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetsPicked} from '../../modules/assets'
@@ -37,7 +38,7 @@ const PickedBar = () => {
         borderBottom: '1px solid var(--card-border-color)',
         height: `${PANEL_HEIGHT}px`,
         position: 'relative',
-        width: '100%'
+        width: '100%',
       }}
     >
       <Flex align="center" paddingX={3}>

package/src/components/Progress/index.tsx

@@ -10,14 +10,14 @@ const Progress = (props: Props) => {
 
   const {animationDuration, isFinished, progress} = useNProgress({
     animationDuration: 300,
-    isAnimating: loading
+    isAnimating: loading,
   })
 
   return (
     <Box
       style={{
         opacity: isFinished ? 0 : 1,
-        transition: `opacity ${animationDuration}ms linear`
+        transition: `opacity ${animationDuration}ms linear`,
       }}
     >
       <Box
@@ -28,7 +28,7 @@ const Progress = (props: Props) => {
           left: 0,
           top: 0,
           transition: `width ${animationDuration}ms linear`,
-          width: `${progress * 100}%`
+          width: `${progress * 100}%`,
         }}
       />
     </Box>