sanity-plugin-media 4.3.5 → 4.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "4.3.5",
+  "version": "4.3.6",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "asset",
@@ -34,7 +34,6 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
@@ -42,50 +41,53 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.1.1",
-    "@reduxjs/toolkit": "^2.6.0",
+    "@hookform/resolvers": "^4.1.3",
+    "@reduxjs/toolkit": "^2.12.0",
     "@sanity/client": "^7.23.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
     "@sanity/incompatible-plugin": "^1.0.5",
     "@sanity/ui": "^3.2.0",
-    "@sanity/uuid": "^3.0.1",
-    "@tanem/react-nprogress": "^5.0.55",
-    "copy-to-clipboard": "^3.3.1",
+    "@sanity/uuid": "^3.0.3",
+    "@tanem/react-nprogress": "^5.0.63",
+    "copy-to-clipboard": "^3.3.3",
     "date-fns": "^4.0.0",
-    "filesize": "^9.0.0",
+    "filesize": "^9.0.11",
     "groq": "^6.1.0",
     "is-hotkey-esm": "^1.0.0",
-    "nanoid": "^3.3.8",
+    "nanoid": "^3.3.12",
     "pluralize": "^8.0.0",
-    "react-dropzone": "^11.3.1",
+    "react-dropzone": "^11.7.1",
     "react-file-icon": "^1.6.0",
-    "react-hook-form": "^7.54.2",
-    "react-redux": "^9.2.0",
-    "react-select": "^5.10.1",
-    "react-virtuoso": "^4.12.5",
+    "react-hook-form": "^7.79.0",
+    "react-redux": "^9.3.0",
+    "react-select": "^5.10.2",
+    "react-virtuoso": "^4.18.7",
     "redux": "^5.0.1",
     "redux-observable": "3.0.0-rc.2",
     "rxjs": "^7.8.2",
-    "zod": "^3.21.4"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@sanity/pkg-utils": "^10.5.7",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/pluralize": "^0.0.33",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-file-icon": "^1.0.4",
-    "jsdom": "^25.0.1",
+    "babel-plugin-styled-components": "^2.3.0",
+    "jsdom": "^29.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-is": "^19.0.0",
+    "react-is": "^19.2.7",
     "sanity": "^6.1.0",
     "styled-components": "^6.4.2",
-    "typescript": "5.8.2",
-    "@sanity/plugin-kit": "5.0.1"
+    "typescript": "5.9.3",
+    "@repo/package.config": "0.0.0",
+    "@repo/tsconfig": "0.0.0",
+    "@sanity/plugin-kit": "5.0.2"
   },
   "peerDependencies": {
     "react": "^18.3 || ^19",
@@ -99,12 +101,13 @@
   },
   "sanityPlugin": {
     "verifyPackage": {
+      "tsconfig": false,
+      "tsc": false,
       "eslintImports": false,
       "scripts": false
     }
   },
   "scripts": {
-    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
-    "watch": "pkg-utils watch --strict"
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean"
   }
 }

package/src/__tests__/fixtures/mockSanityClient.ts

@@ -35,10 +35,10 @@ export function createMockSanityClient(
 
   const observable: MockSanityClient['observable'] = {
     ...observableBase,
-    ...(observableOverrides ?? {}),
+    ...observableOverrides,
     assets: {
       ...observableBase.assets,
-      ...(observableOverrides?.assets ?? {}),
+      ...observableOverrides?.assets,
     },
   }
 
@@ -70,7 +70,7 @@ export function mockPatchChain(result: unknown): {
   return chain
 }
 
-export function mockTransactionCommit(resolved: unknown = undefined): {
+export function mockTransactionCommit(resolved?: unknown): {
   patch: ReturnType<typeof vi.fn>
   delete: ReturnType<typeof vi.fn>
   commit: ReturnType<typeof vi.fn>

package/src/components/AssetGridVirtualized/index.tsx

@@ -72,7 +72,7 @@ const AssetGridVirtualized = (props: Props) => {
       className="media__custom-scrollbar"
       computeItemKey={(index) => {
         const item = items[index]
-        return item?.id
+        return item?.id ?? index
       }}
       components={{
         Item: ItemContainer,
@@ -80,8 +80,8 @@ const AssetGridVirtualized = (props: Props) => {
       }}
       endReached={onLoadMore}
       itemContent={(index) => {
-        const item = items[index]
-        const selected = selectedIds.includes(item?.id)
+        const item = items[index]!
+        const selected = selectedIds.includes(item.id)
         return <VirtualCell item={item} selected={selected} />
       }}
       overscan={48}

package/src/components/AssetMetadata/index.tsx

@@ -59,7 +59,7 @@ const AssetMetadata = (props: Props) => {
         <Stack space={3}>
           <Row label="Size" value={filesize(asset?.size, {base: 10, round: 0})} />
           <Row label="MIME type" value={asset?.mimeType} />
-          <Row label="Extension" value={(asset?.extension).toUpperCase()} />
+          <Row label="Extension" value={asset?.extension?.toUpperCase()} />
           {isImageAsset(asset) && <Row label="Dimensions" value={getAssetResolution(asset)} />}
         </Stack>
       </Box>

package/src/components/AssetTableVirtualized/index.tsx

@@ -62,8 +62,8 @@ const AssetTableVirtualized = (props: Props) => {
       }}
       itemContent={(index) => {
         const item = items[index]
-        const selected = selectedIds.includes(item?.id)
-        return <VirtualRow item={item} selected={selected} />
+        const selected = selectedIds.includes(item?.id || '')
+        return <VirtualRow item={item!} selected={selected} />
       }}
       style={{overflowX: 'hidden'}}
     />

package/src/components/AutoTagInputWrapper/index.tsx

@@ -79,9 +79,7 @@ export function AutoTagInput(props: AutoTagInputProps) {
         title: `Failed to apply the media ${label} ${mediaTags.join(', ')}`,
       })
     })
-  }, [currentAssetRef, mediaTags, client, createTagsOnUpload])
+  }, [currentAssetRef, mediaTags, client, createTagsOnUpload, toast])
 
   return renderDefault(props as InputProps)
 }
-
-export default AutoTagInput

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

@@ -195,7 +195,7 @@ describe('CardAsset', () => {
 
     await user.click(clickFooterFilename('photo.png'))
 
-    expect(store.getState().assets.byIds['img-1'].picked).toBe(true)
+    expect(store.getState().assets.byIds['img-1']!.picked).toBe(true)
   })
 
   it('opens asset edit from the footer when in picker mode', async () => {
@@ -228,7 +228,7 @@ describe('CardAsset', () => {
     await user.click(clickPreview())
     setShiftPressed(false)
 
-    expect(store.getState().assets.byIds['img-1'].picked).toBe(false)
+    expect(store.getState().assets.byIds['img-1']!.picked).toBe(false)
   })
 
   it('shift-clicks on preview to pick a range when not picked and lastPicked is set', async () => {
@@ -250,8 +250,8 @@ describe('CardAsset', () => {
     await user.click(clickPreview())
     setShiftPressed(false)
 
-    expect(store.getState().assets.byIds['img-1'].picked).toBe(true)
-    expect(store.getState().assets.byIds['prev-1'].picked).toBe(true)
+    expect(store.getState().assets.byIds['img-1']!.picked).toBe(true)
+    expect(store.getState().assets.byIds['prev-1']!.picked).toBe(true)
   })
 
   it('shift-clicks on footer to pick a range when not picked', async () => {
@@ -277,8 +277,8 @@ describe('CardAsset', () => {
     await user.click(clickFooterFilename('photo.png'))
     setShiftPressed(false)
 
-    expect(store.getState().assets.byIds['img-1'].picked).toBe(true)
-    expect(store.getState().assets.byIds['anchor-9'].picked).toBe(true)
+    expect(store.getState().assets.byIds['img-1']!.picked).toBe(true)
+    expect(store.getState().assets.byIds['anchor-9']!.picked).toBe(true)
   })
 
   it('shows the selection checkmark when selected and not updating', () => {

package/src/components/DialogAssetEdit/Details.tsx

@@ -126,7 +126,7 @@ export default function Details({
                       name={`creditLine.${locale.id}`}
                       disabled={
                         formUpdating ||
-                        creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+                        creditLine?.excludeSources?.includes(currentAsset?.['source']?.name)
                       }
                     />
                   )}
@@ -170,7 +170,7 @@ export default function Details({
               name="creditLine"
               value={toStringField(currentAsset?.creditLine)}
               disabled={
-                formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+                formUpdating || creditLine?.excludeSources?.includes(currentAsset?.['source']?.name)
               }
             />
           )}

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

@@ -115,7 +115,7 @@ describe('DialogAssetEdit', () => {
     await user.type(inputByName(/asset details/i, screen, 'title'), 'Hero image')
     await user.click(dlg.getByRole('button', {name: /save and close/i}))
 
-    expect(store.getState().assets.byIds.a1.updating).toBe(true)
+    expect(store.getState().assets.byIds['a1']!.updating).toBe(true)
 
     await waitFor(() => {
       let updateAction

package/src/components/DialogAssetEdit/index.tsx

@@ -72,9 +72,9 @@ const DialogAssetEdit = (props: Props) => {
         const makeLocaleObj = (field?: Record<string, string> | string) => {
           const obj: Record<string, string> = {}
           for (let i = 0; i < locales.length; i++) {
-            const locale = locales[i]
+            const locale = locales[i]!
             if (typeof field === 'object' && field && field[locale.id]) {
-              obj[locale.id] = field[locale.id]
+              obj[locale.id] = field[locale.id]!
             } else if (typeof field === 'string') {
               // Only populate the first locale to avoid spreading a legacy value
               // across all languages; the user should fill in other translations manually
@@ -240,9 +240,9 @@ const DialogAssetEdit = (props: Props) => {
             // Map tags to sanity references
             opt: {
               media: {
-                ...sanitizedFormData.opt.media,
+                ...sanitizedFormData['opt'].media,
                 tags:
-                  sanitizedFormData.opt.media.tags?.map((tag: TagSelectOption) => ({
+                  sanitizedFormData['opt'].media.tags?.map((tag: TagSelectOption) => ({
                     _ref: tag.value,
                     _type: 'reference',
                     _weak: true,
@@ -365,6 +365,7 @@ const DialogAssetEdit = (props: Props) => {
   return (
     <Dialog
       animate
+      // oxlint-disable-next-line react/react-compiler
       footer={<Footer />}
       header="Asset details"
       id={id}

package/src/components/DialogConfirm/index.tsx

@@ -63,7 +63,9 @@ const DialogConfirm = (props: Props) => {
   return (
     <Dialog
       animate
+      // oxlint-disable-next-line react/react-compiler
       footer={<Footer />}
+      // oxlint-disable-next-line react/react-compiler
       header={<Header />}
       id="confirm"
       onClose={handleClose}

package/src/components/DialogSearchFacets/index.tsx

@@ -25,7 +25,7 @@ const DialogSearchFacets = (props: Props) => {
   // Callbacks
   const handleClose = useCallback(() => {
     dispatch(dialogActions.clear())
-  }, [])
+  }, [dispatch])
 
   return (
     <Dialog animate header="Filters" id={id} onClose={handleClose} width={1}>

package/src/components/DialogTagCreate/index.tsx

@@ -54,7 +54,7 @@ const DialogTagCreate = (props: Props) => {
   const onSubmit: SubmitHandler<TagFormData> = (formData) => {
     const sanitizedFormData = sanitizeFormData(formData)
 
-    dispatch(tagsActions.createRequest({name: sanitizedFormData.name}))
+    dispatch(tagsActions.createRequest({name: sanitizedFormData['name']}))
   }
 
   useEffect(() => {
@@ -79,7 +79,15 @@ const DialogTagCreate = (props: Props) => {
   )
 
   return (
-    <Dialog animate footer={<Footer />} header="Create Tag" id={id} onClose={handleClose} width={1}>
+    <Dialog
+      animate
+      // oxlint-disable-next-line react/react-compiler
+      footer={<Footer />}
+      header="Create Tag"
+      id={id}
+      onClose={handleClose}
+      width={1}
+    >
       {/* Form fields */}
       <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
         {/* Hidden button to enable enter key submissions */}

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

@@ -58,7 +58,7 @@ describe('DialogTagEdit', () => {
     await user.type(input, 'beta')
     await user.click(dlg.getByRole('button', {name: /save and close/i}))
 
-    expect(store.getState().tags.byIds.t1.updating).toBe(true)
+    expect(store.getState().tags.byIds['t1']!.updating).toBe(true)
   })
 
   it('dispatches updateRequest with slug-shaped form data', async () => {

package/src/components/DialogTagEdit/index.tsx

@@ -37,9 +37,12 @@ const DialogTagEdit = (props: Props) => {
   const [tagSnapshot, setTagSnapshot] = useState(tagItem?.tag)
 
   const currentTag = tagItem ? tagItem?.tag : tagSnapshot
-  const generateDefaultValues = (tag?: Tag) => ({
-    name: tag?.name?.current || '',
-  })
+  const generateDefaultValues = useCallback(
+    (tag?: Tag) => ({
+      name: tag?.name?.current || '',
+    }),
+    [],
+  )
 
   const {
     // Read the formState before render to subscribe the form state through Proxy
@@ -72,7 +75,7 @@ const DialogTagEdit = (props: Props) => {
         formData: {
           name: {
             _type: 'slug',
-            current: sanitizedFormData.name,
+            current: sanitizedFormData['name'],
           },
         },
         tag: tagItem?.tag,
@@ -103,7 +106,7 @@ const DialogTagEdit = (props: Props) => {
         reset(generateDefaultValues(result as Tag))
       }
     },
-    [reset],
+    [reset, generateDefaultValues],
   )
 
   useEffect(() => {
@@ -112,7 +115,7 @@ const DialogTagEdit = (props: Props) => {
         message: tagItem.error?.message,
       })
     }
-  }, [setError, tagItem.error])
+  }, [setError, tagItem?.error])
 
   // - Listen for asset mutations and update snapshot
   useEffect(() => {
@@ -159,7 +162,15 @@ const DialogTagEdit = (props: Props) => {
   }
 
   return (
-    <Dialog animate footer={<Footer />} header="Edit Tag" id={id} onClose={handleClose} width={1}>
+    <Dialog
+      animate
+      // oxlint-disable-next-line react/react-compiler
+      footer={<Footer />}
+      header="Edit Tag"
+      id={id}
+      onClose={handleClose}
+      width={1}
+    >
       {/* Form fields */}
       <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
         {/* Deleted notification */}

package/src/components/DialogTags/index.tsx

@@ -24,7 +24,7 @@ const DialogTags = (props: Props) => {
   // Callbacks
   const handleClose = useCallback(() => {
     dispatch(dialogActions.clear())
-  }, [])
+  }, [dispatch])
 
   return (
     <Dialog animate header="All Tags" id={id} onClose={handleClose} width={1}>

package/src/components/Dialogs/index.tsx

@@ -16,7 +16,7 @@ const Dialogs = () => {
       return null
     }
 
-    const dialog = dialogs[index]
+    const dialog = dialogs[index]!
     const childDialogs = renderDialogs(dialogs, index + 1)
 
     if (dialog.type === 'assetEdit') {

package/src/components/Header/index.tsx

@@ -55,7 +55,7 @@ const Header = (props: Props) => {
               icon={UploadIcon}
               mode="bleed"
               onClick={open}
-              text={`Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : 'assets'}`}
+              text={`Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]!) : 'assets'}`}
             />
           )}
 

package/src/components/Items/index.tsx

@@ -38,7 +38,7 @@ const Items = () => {
     if (breakpointIndex <= 1 && tagsPanelVisible) {
       dispatch(tagsActions.panelVisibleSet({panelVisible: false}))
     }
-  }, [breakpointIndex])
+  }, [breakpointIndex, dispatch, tagsPanelVisible])
 
   const isEmpty = !hasItems && hasFetchedOnce && !fetching
 

package/src/components/Notifications/index.tsx

@@ -9,14 +9,14 @@ const Notifications = () => {
 
   useEffect(() => {
     if (items.length > 0) {
-      const lastItem = items[items.length - 1]
+      const lastItem = items[items.length - 1]!
       toast.push({
         closable: true,
         status: lastItem.status,
         title: lastItem.title,
       })
     }
-  }, [items.length])
+  }, [items, toast])
 
   return null
 }

package/src/components/SearchFacet/index.tsx

@@ -17,7 +17,7 @@ type Props = {
 const Container = styled<typeof Box, {$scheme: ThemeColorSchemeKey}>(Box)(({$scheme, theme}) => {
   return css`
     background: ${getSchemeColor($scheme, 'bg')};
-    border-radius: ${rem(theme.sanity.radius[2])};
+    border-radius: ${rem(theme.sanity.radius[2]!)};
   `
 })
 

package/src/components/SearchFacetSelect/index.tsx

@@ -86,14 +86,14 @@ const SearchFacetSelect = ({facet}: Props) => {
         id="list"
         menu={
           <Menu>
-            {options?.map((item, index) => {
+            {options?.map((item) => {
               const selected = item.name === selectedItem?.name
               return (
                 <MenuItem
                   disabled={selected}
                   fontSize={1}
                   key={item.name}
-                  onClick={() => handleListItemClick(options[index])}
+                  onClick={() => handleListItemClick(item)}
                   padding={2}
                   text={item.title}
                 />

package/src/components/SearchFacets/index.tsx

@@ -14,7 +14,7 @@ type Props = {
 const StackContainer = styled(Flex)(({theme}: {theme: Theme}) => {
   return css`
     > * {
-      margin-bottom: ${rem(theme.sanity.space[2])};
+      margin-bottom: ${rem(theme.sanity.space[2]!)};
     }
   `
 })

package/src/components/TableRowAsset/index.tsx

@@ -90,7 +90,6 @@ const StyledWarningIcon = styled(WarningFilledIcon)(({theme}) => {
   }
 })
 
-// eslint-disable-next-line complexity
 const TableRowAsset = (props: Props) => {
   const {id, selected} = props
 

package/src/components/TagsVirtualized/index.tsx

@@ -145,11 +145,11 @@ const TagsVirtualized = () => {
         if (typeof item === 'string') {
           return item
         }
-        return item.tag._id
+        return item!.tag._id
       }}
       isScrolling={setIsScrolling}
       itemContent={(index) => {
-        return <VirtualRow isScrolling={isScrolling} item={items[index]} />
+        return <VirtualRow isScrolling={isScrolling} item={items[index]!} />
       }}
       style={{flex: 1, overflowX: 'hidden'}}
       totalCount={items.length}

package/src/components/UploadDropzone/index.tsx

@@ -53,7 +53,7 @@ async function filterFiles(fileList: FileList) {
     try {
       await file.slice(0, 1).arrayBuffer()
       filteredFiles.push(file)
-    } catch (err) {
+    } catch {
       // do nothing: file is a package or folder
     }
   }

package/src/config/orders.ts

@@ -24,5 +24,5 @@ const ORDER_DICTIONARY: Record<string, {asc: string; desc: string}> = {
 }
 
 export const getOrderTitle = (field: string, direction: OrderDirection): string => {
-  return ORDER_DICTIONARY[field][direction]
+  return ORDER_DICTIONARY[field]![direction]
 }

package/src/contexts/AssetSourceDispatchContext.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, createContext, useContext} from 'react'
+import {type ReactNode, createContext, useContext, useMemo} from 'react'
 import type {AssetSourceComponentProps} from 'sanity'
 
 type ContextProps = {
@@ -15,9 +15,12 @@ const AssetSourceDispatchContext = createContext<ContextProps | undefined>(undef
 export const AssetBrowserDispatchProvider = (props: Props) => {
   const {children, onSelect} = props
 
-  const contextValue: ContextProps = {
-    onSelect,
-  }
+  const contextValue: ContextProps = useMemo(
+    () => ({
+      onSelect,
+    }),
+    [onSelect],
+  )
 
   return (
     <AssetSourceDispatchContext.Provider value={contextValue}>
@@ -33,5 +36,3 @@ export const useAssetSourceActions = () => {
   }
   return context
 }
-
-export default AssetSourceDispatchContext

package/src/contexts/DropzoneDispatchContext.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, createContext, useContext} from 'react'
+import {type ReactNode, createContext, useContext, useMemo} from 'react'
 
 type ContextProps = {
   open: () => void
@@ -14,7 +14,7 @@ const DropzoneDispatchContext = createContext<ContextProps | undefined>(undefine
 export const DropzoneDispatchProvider = (props: Props) => {
   const {children, open} = props
 
-  const contextValue: ContextProps = {open}
+  const contextValue: ContextProps = useMemo(() => ({open}), [open])
 
   return (
     <DropzoneDispatchContext.Provider value={contextValue}>
@@ -30,5 +30,3 @@ export const useDropzoneActions = () => {
   }
   return context
 }
-
-export default DropzoneDispatchContext

package/src/contexts/ToolOptionsContext.tsx

@@ -19,6 +19,7 @@ type Props = {
 }
 
 export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props>) => {
+  // oxlint-disable-next-line react-compiler
   const value = useMemo<ContextProps>(() => {
     let creditLineExcludeSources
 

package/src/formSchema/index.ts

@@ -1,7 +1,7 @@
 import * as z from 'zod'
 
 // Helper to generate localized string schema
-export function localizedStringSchema(locales?: {id: string}[]) {
+function localizedStringSchema(locales?: {id: string}[]) {
   if (!locales || locales.length === 0) {
     return z.string().trim().optional()
   }

package/src/hooks/useBreakpointIndex.ts

@@ -22,10 +22,10 @@ const useBreakpointIndex = (): number => {
     mediaQueryLists.forEach((mql) => {
       try {
         mql.addEventListener('change', handleBreakpoint)
-      } catch (err) {
+      } catch {
         try {
           mql.addListener(handleBreakpoint)
-        } catch (_err) {
+        } catch {
           // Do nothing
         }
       }
@@ -33,14 +33,15 @@ const useBreakpointIndex = (): number => {
     return () => {
       try {
         mediaQueryLists.forEach((mql) => mql.removeEventListener('change', handleBreakpoint))
-      } catch (err) {
+      } catch {
         try {
           mediaQueryLists.forEach((mql) => mql.removeListener(handleBreakpoint))
-        } catch (_err) {
+        } catch {
           // Do nothing
         }
       }
     }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps - use the hook from `@sanity/ui` instead of this home-rolled one
   }, [])
 
   return value