feat!: add strict ESM support

.eslintrc

@@ -8,16 +8,15 @@
     "sanity",
     "sanity/typescript",
     "sanity/react",
-    "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
-    "plugin:react/jsx-runtime",
     "prettier"
   ],
   "plugins": ["simple-import-sort"],
   "rules": {
     "react/prop-types": "off",
     "react/require-default-props": "off",
     "simple-import-sort/imports": "error",
-    "simple-import-sort/exports": "error"
+    "simple-import-sort/exports": "error",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }

package.config.ts

@@ -5,9 +5,6 @@ export default defineConfig({
   dist: 'dist',
   tsconfig: 'tsconfig.dist.json',
 
-  // Avoid ttyl, os and other node specific deps
-  external: ['@sanity/mutator'],
-
   // Remove this block to enable strict export validation
   extract: {
     rules: {

package.json

@@ -16,17 +16,13 @@
   },
   "license": "MIT",
   "author": "Sanity.io <[email protected]>",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.js",
-      "node": {
-        "module": "./dist/index.esm.js",
-        "import": "./dist/index.cjs.mjs"
-      },
-      "import": "./dist/index.esm.js",
-      "default": "./dist/index.esm.js"
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -41,7 +37,7 @@
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "build": "run-s clean && pkg-utils build --strict && pkg-utils --strict",
     "clean": "rimraf dist",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
@@ -51,49 +47,49 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@sanity/icons": "^2.2.2",
+    "@sanity/icons": "^2.11.7",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.2.2",
+    "@sanity/ui": "^2.1.0",
     "@sanity/uuid": "^3.0.2",
-    "sanity-plugin-internationalized-array": "^1.10.3",
-    "sanity-plugin-utils": "^1.6.2"
+    "sanity-plugin-internationalized-array": "^2.0.0",
+    "sanity-plugin-utils": "^1.6.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.2.0",
-    "@commitlint/config-conventional": "^18.1.0",
-    "@sanity/pkg-utils": "2.4.10",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@sanity/pkg-utils": "6.1.0",
     "@sanity/plugin-kit": "^3.1.10",
     "@sanity/semantic-release-preset": "^4.1.7",
-    "@types/react": "^18.0.27",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
+    "@types/react": "^18.2.75",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "eslint": "^8.33.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-sanity": "^7.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
-    "prettier-plugin-packagejson": "^2.4.2",
+    "prettier": "^3.2.5",
+    "prettier-plugin-packagejson": "^2.4.14",
     "react": "^18",
     "react-dom": "^18",
     "react-is": "^18",
     "rimraf": "^4.1.2",
-    "sanity": "3.19.0",
+    "sanity": "^3.37.0",
     "semantic-release": "^23.0.7",
-    "typescript": "4.9.5"
+    "typescript": "5.4.2"
   },
   "peerDependencies": {
-    "@sanity/ui": "^1.0 || ^2.0",
+    "@sanity/mutator": "^3.37.0",
+    "@sanity/ui": "^2.1",
     "react": "^18",
     "react-dom": "^18",
-    "sanity": "^3.0.0",
-    "styled-components": "^5.0 || ^6.0"
+    "sanity": "^3.37.0",
+    "styled-components": "^6.1"
   },
   "engines": {
     "node": ">=14"

src/actions/DeleteMetadataAction.tsx

@@ -1,11 +1,11 @@
 import {TrashIcon} from '@sanity/icons'
-import {ButtonTone, useToast} from '@sanity/ui'
+import {type ButtonTone, useToast} from '@sanity/ui'
 import {useCallback, useMemo, useState} from 'react'
 import {
-  DocumentActionComponent,
-  KeyedObject,
-  Reference,
-  TypedObject,
+  type DocumentActionComponent,
+  type KeyedObject,
+  type Reference,
+  type TypedObject,
   useClient,
 } from 'sanity'
 

src/actions/DeleteTranslationAction.tsx

@@ -1,7 +1,11 @@
 import {TrashIcon} from '@sanity/icons'
-import {ButtonTone, useToast} from '@sanity/ui'
+import {type ButtonTone, useToast} from '@sanity/ui'
 import {useCallback, useState} from 'react'
-import {DocumentActionComponent, SanityDocument, useClient} from 'sanity'
+import {
+  type DocumentActionComponent,
+  type SanityDocument,
+  useClient,
+} from 'sanity'
 
 import DeleteTranslationDialog from '../components/DeleteTranslationDialog'
 import DeleteTranslationFooter from '../components/DeleteTranslationFooter'

src/badges/index.tsx

@@ -1,4 +1,4 @@
-import {DocumentBadgeDescription, DocumentBadgeProps} from 'sanity'
+import type {DocumentBadgeDescription, DocumentBadgeProps} from 'sanity'
 
 import {useDocumentInternationalizationContext} from '../components/DocumentInternationalizationContext'
 

src/components/BulkPublish/DocumentCheck.tsx

@@ -1,5 +1,5 @@
 import {Card, Spinner} from '@sanity/ui'
-import React, {useEffect, useMemo} from 'react'
+import {useEffect, useMemo} from 'react'
 import {Preview, useEditState, useSchema, useValidationStatus} from 'sanity'
 
 type DocumentCheckProps = {

src/components/BulkPublish/InfoIcon.tsx

@@ -1,9 +1,9 @@
-import {Box, ButtonTone, Text, Tooltip} from '@sanity/ui'
-import React, {PropsWithChildren} from 'react'
+import {Box, type ButtonTone, Text, Tooltip} from '@sanity/ui'
+import type {ComponentType, PropsWithChildren} from 'react'
 import {TextWithTone} from 'sanity'
 
 type InfoIconProps = PropsWithChildren & {
-  icon: React.ComponentType
+  icon: ComponentType
   tone: ButtonTone
   text?: string
 }
@@ -14,6 +14,7 @@ export default function InfoIcon(props: InfoIconProps) {
 
   return (
     <Tooltip
+      animate
       portal
       content={
         children ? (

src/components/BulkPublish/index.tsx

@@ -1,9 +1,9 @@
 import {Button, Card, Dialog, Inline, Stack, Text, useToast} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {TextWithTone, useClient, useWorkspace} from 'sanity'
 
 import {API_VERSION} from '../../constants'
-import {TranslationReference} from '../../types'
+import type {TranslationReference} from '../../types'
 import DocumentCheck from './DocumentCheck'
 import Info from './Info'
 
@@ -102,6 +102,7 @@ export default function BulkPublish(props: BulkPublishProps) {
 
         {open && (
           <Dialog
+            animate
             header="Bulk publishing"
             id="bulk-publish-dialog"
             onClose={onClose}

src/components/ConstrainedBox.tsx

@@ -1,5 +1,5 @@
 import {Box} from '@sanity/ui'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 export default styled(Box)`
   max-width: 280px;

src/components/DeleteTranslationDialog/index.tsx

@@ -1,6 +1,6 @@
 import {Card, Flex, Spinner, Stack, Text} from '@sanity/ui'
 import {useEffect, useMemo} from 'react'
-import {SanityDocument} from 'sanity'
+import type {SanityDocument} from 'sanity'
 import {useListeningQuery} from 'sanity-plugin-utils'
 
 import DocumentPreview from './DocumentPreview'

src/components/DeleteTranslationDialog/separateReferences.ts

@@ -1,4 +1,4 @@
-import {SanityDocument} from 'sanity'
+import type {SanityDocument} from 'sanity'
 
 import {METADATA_SCHEMA_NAME} from '../../constants'
 

src/components/DocumentInternationalizationContext.tsx

@@ -1,10 +1,10 @@
 import {useContext} from 'react'
 import {createContext} from 'react'
-import {LayoutProps, useClient, useWorkspace} from 'sanity'
+import {type LayoutProps, useClient, useWorkspace} from 'sanity'
 import {suspend} from 'suspend-react'
 
 import {DEFAULT_CONFIG} from '../constants'
-import {PluginConfig, PluginConfigContext} from '../types'
+import type {PluginConfig, PluginConfigContext} from '../types'
 
 const DocumentInternationalizationContext =
   createContext<PluginConfigContext>(DEFAULT_CONFIG)

src/components/DocumentInternationalizationMenu.tsx

@@ -10,11 +10,11 @@ import {
   useClickOutside,
 } from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
-import {FormEvent, useCallback, useMemo, useState} from 'react'
+import {type FormEvent, useCallback, useMemo, useState} from 'react'
 import {useEditState} from 'sanity'
 
 import {useTranslationMetadata} from '../hooks/useLanguageMetadata'
-import {DocumentInternationalizationMenuProps} from '../types'
+import type {DocumentInternationalizationMenuProps} from '../types'
 import {useDocumentInternationalizationContext} from './DocumentInternationalizationContext'
 import LanguageManage from './LanguageManage'
 import LanguageOption from './LanguageOption'
@@ -203,6 +203,7 @@ export function DocumentInternationalizationMenu(
 
   return (
     <Popover
+      animate
       constrainSize
       content={content}
       open={open}

src/components/LanguageManage.tsx

@@ -14,6 +14,7 @@ export default function LanguageManage(props: LanguageManageProps) {
 
   return (
     <Tooltip
+      animate
       content={
         id ? null : (
           <Box padding={2}>

src/components/LanguageOption.tsx

@@ -11,11 +11,11 @@ import {
 } from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import {useCallback} from 'react'
-import {ObjectSchemaType, SanityDocument, useClient} from 'sanity'
+import {type ObjectSchemaType, type SanityDocument, useClient} from 'sanity'
 
 import {METADATA_SCHEMA_NAME} from '../constants'
 import {useOpenInNewPane} from '../hooks/useOpenInNewPane'
-import {Language, Metadata, TranslationReference} from '../types'
+import type {Language, Metadata, TranslationReference} from '../types'
 import {createReference} from '../utils/createReference'
 import {removeExcludedPaths} from '../utils/excludePaths'
 import {useDocumentInternationalizationContext} from './DocumentInternationalizationContext'
@@ -156,6 +156,7 @@ export default function LanguageOption(props: LanguageOptionProps) {
     source,
     sourceLanguageId,
     toast,
+    weakReferences,
   ])
 
   let message
@@ -170,6 +171,7 @@ export default function LanguageOption(props: LanguageOptionProps) {
 
   return (
     <Tooltip
+      animate
       content={
         <Box padding={2}>
           <Text muted size={1}>

src/components/LanguagePatch.tsx

@@ -1,9 +1,9 @@
 import {EditIcon} from '@sanity/icons'
 import {Badge, Box, Button, Flex, Text, useToast} from '@sanity/ui'
 import {useCallback} from 'react'
-import {SanityDocument, useClient} from 'sanity'
+import {type SanityDocument, useClient} from 'sanity'
 
-import {Language} from '../types'
+import type {Language} from '../types'
 import {useDocumentInternationalizationContext} from './DocumentInternationalizationContext'
 
 type LanguagePatchProps = {

src/components/OptimisticallyStrengthen/ReferencePatcher.tsx

@@ -1,9 +1,9 @@
 import {useEffect} from 'react'
 import {PatchEvent, unset, useClient, useEditState} from 'sanity'
-import {useDocumentPane} from 'sanity/desk'
+import {useDocumentPane} from 'sanity/structure'
 
 import {API_VERSION} from '../../constants'
-import {TranslationReference} from '../../types'
+import type {TranslationReference} from '../../types'
 
 type ReferencePatcherProps = {
   translation: TranslationReference

src/components/OptimisticallyStrengthen/index.tsx

@@ -1,4 +1,4 @@
-import {TranslationReference} from '../../types'
+import type {TranslationReference} from '../../types'
 import ReferencePatcher from './ReferencePatcher'
 
 type OptimisticallyStrengthenProps = {

src/components/Warning.tsx

@@ -1,5 +1,5 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import {PropsWithChildren} from 'react'
+import type {PropsWithChildren} from 'react'
 
 import ConstrainedBox from './ConstrainedBox'
 

src/constants.ts

@@ -1,4 +1,4 @@
-import {PluginConfigContext} from './types'
+import type {PluginConfigContext} from './types'
 
 export const METADATA_SCHEMA_NAME = `translation.metadata`
 export const TRANSLATIONS_ARRAY_NAME = `translations`

src/hooks/useLanguageMetadata.tsx

@@ -1,7 +1,7 @@
 import {useListeningQuery} from 'sanity-plugin-utils'
 
 import {METADATA_SCHEMA_NAME} from '../constants'
-import {Metadata} from '../types'
+import type {Metadata} from '../types'
 
 // Using references() seemed less reliable for updating the listener
 // results than querying raw values in the array

src/hooks/useOpenInNewPane.tsx

@@ -1,6 +1,6 @@
 import {useCallback, useContext} from 'react'
-import {usePaneRouter} from 'sanity/desk'
 import {RouterContext} from 'sanity/router'
+import {usePaneRouter} from 'sanity/structure'
 
 export function useOpenInNewPane(id?: string, type?: string) {
   const routerContext = useContext(RouterContext)
@@ -11,7 +11,7 @@ export function useOpenInNewPane(id?: string, type?: string) {
       return
     }
 
-    // No panes open, function might be called outside Desk
+    // No panes open, function might be called outside Structure
     if (!routerPanesState.length) {
       routerContext.navigateIntent('edit', {id, type})
       return