@sanity/ui 2.16.20 → 2.16.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.16.20",
+  "version": "2.16.22",
   "keywords": [
     "sanity",
     "ui",
@@ -119,8 +119,8 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.24",
-    "react-compiler-runtime": "19.1.0-rc.3",
+    "motion": "^12.23.24",
+    "react-compiler-runtime": "1.0.0",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^2.0.3"
   },
@@ -132,7 +132,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.37.0",
-    "@sanity/pkg-utils": "^8.1.19",
+    "@sanity/pkg-utils": "^8.1.24",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.1.6",
@@ -161,7 +161,7 @@
     "@types/react-dom": "^19.2.1",
     "@types/react-is": "^19.2.0",
     "@vitejs/plugin-react": "^5.0.4",
-    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "babel-plugin-react-compiler": "1.0.0",
     "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -174,8 +174,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "6.0.0-rc.2",
-    "eslint-plugin-react-hooks-with-use-effect-event": "npm:eslint-plugin-react-hooks@0.0.0-experimental-3302d1f7-20250903",
+    "eslint-plugin-react-hooks": "7.0.0",
     "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",

package/src/core/components/toast/toast.tsx

@@ -1,5 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import {motion, type Variant, type Variants} from 'framer-motion'
+import {motion, type Variant, type Variants} from 'motion/react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box, Button, Flex, Stack, Text} from '../../primitives'

package/src/core/components/toast/toastProvider.tsx

@@ -1,4 +1,4 @@
-import {AnimatePresence} from 'framer-motion'
+import {AnimatePresence} from 'motion/react'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'

package/src/core/components/tree/tree.tsx

@@ -213,7 +213,6 @@ export const Tree = memo(
         ref.current.querySelectorAll('[data-ui="TreeItem"]'),
       ) as HTMLElement[]
 
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setItemElements(_itemElements)
     }, [children])
 

package/src/core/constants.ts

@@ -1,4 +1,4 @@
-import type {Transition, Variant} from 'framer-motion'
+import type {Transition, Variant} from 'motion/react'
 
 /**
  * @internal
@@ -13,7 +13,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 const POPOVER_MOTION_DURATION = 0.2
 
 /**
- * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
+ * Shared `motion` variants used by `Popover` and `Tooltip` components.
  * @internal
  */
 export const POPOVER_MOTION_PROPS: {

package/src/core/hooks/useClickOutside.test.tsx

@@ -441,7 +441,7 @@ describe('useClickOutside', () => {
     const useBoundaryElementFromRef = (ref: React.MutableRefObject<HTMLElement | null>) => {
       const [element, setElement] = useState(() => ref.current)
 
-      // eslint-disable-next-line react-hooks-with-use-effect-event/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       useEffect(() => {
         // If the ref has mutated since the last render, update the state and schedule a re-render
         if (ref.current !== element) {

package/src/core/primitives/popover/popover.tsx

@@ -11,7 +11,7 @@ import {
   useFloating,
 } from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {AnimatePresence} from 'framer-motion'
+import {AnimatePresence} from 'motion/react'
 import {
   cloneElement,
   forwardRef,

package/src/core/primitives/popover/popoverCard.tsx

@@ -1,6 +1,6 @@
 import {Strategy} from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {motion, type MotionProps} from 'framer-motion'
+import {motion, type MotionProps} from 'motion/react'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
 

package/src/core/primitives/tooltip/tooltip.tsx

@@ -9,7 +9,7 @@ import {
   useFloating,
 } from '@floating-ui/react-dom'
 import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {AnimatePresence} from 'framer-motion'
+import {AnimatePresence} from 'motion/react'
 import {
   cloneElement,
   forwardRef,

package/src/core/primitives/tooltip/tooltipCard.tsx

@@ -1,5 +1,5 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {motion, type MotionProps} from 'framer-motion'
+import {motion, type MotionProps} from 'motion/react'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
 

package/src/core/utils/virtualList/virtualList.tsx

@@ -66,7 +66,6 @@ export const VirtualList = forwardRef(function VirtualList(
     const firstElement = wrapperRef.current.firstChild
 
     if (firstElement instanceof HTMLElement) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setItemHeight(firstElement.offsetHeight)
     }
   }, [renderItem])