@sanity/ui 2.16.13 → 2.16.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.16.13",
+  "version": "2.16.15",
   "keywords": [
     "sanity",
     "ui",
@@ -70,7 +70,7 @@
     "dev": "run-p storybook:dev workshop:dev",
     "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint .",
+    "lint": "eslint --cache .",
     "prepack": "pnpm build",
     "pkg:build": "pkg build --strict",
     "pkg:check": "pkg --strict",
@@ -106,7 +106,7 @@
       },
       "main",
       {
-        "name": "static",
+        "name": "v4",
         "channel": "static",
         "prerelease": true
       }
@@ -119,8 +119,8 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.12",
-    "react-compiler-runtime": "19.1.0-rc.2",
+    "framer-motion": "^12.23.15",
+    "react-compiler-runtime": "19.1.0-rc.3",
     "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.34.0",
-    "@sanity/pkg-utils": "^8.1.0",
+    "@sanity/pkg-utils": "^8.1.5",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.1.6",
@@ -156,12 +156,12 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^22.18.0",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.8",
+    "@types/node": "^22.18.1",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/react-is": "^19.0.0",
-    "@vitejs/plugin-react": "^5.0.1",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "@vitejs/plugin-react": "^5.0.3",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -169,22 +169,22 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-formatter-compact": "^8.40.0",
+    "eslint-formatter-gha": "^1.6.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-edac0dde-20250723",
+    "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-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.3.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^30.0.5",
+    "jest": "^30.1.3",
     "jest-axe": "^10.0.0",
-    "jest-environment-jsdom": "^30.0.5",
+    "jest-environment-jsdom": "^30.1.2",
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
@@ -195,12 +195,12 @@
     "refractor": "^4.9.0",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.7",
-    "start-server-and-test": "^2.0.13",
+    "start-server-and-test": "^2.1.0",
     "storybook": "^8.6.14",
     "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
-    "typescript-eslint": "^8.41.0",
+    "typescript-eslint": "^8.42.0",
     "vite": "^5.4.19",
     "vite-tsconfig-paths": "^5.1.4"
   },
@@ -225,7 +225,8 @@
       "conventional-changelog-conventionalcommits": ">= 8.0.0",
       "react": "$react",
       "react-dom": "$react-dom",
-      "react-is": "$react-is"
+      "react-is": "$react-is",
+      "styled-components": "npm:@sanity/styled-components@6.1.22"
     }
   },
   "esm.sh": {

package/src/core/components/autocomplete/autocomplete.tsx

@@ -633,13 +633,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const results = useMemo(() => {
     if (renderPopover) {
       return renderPopover(
+        // eslint-disable-next-line react-hooks/refs
         {
           content,
           hidden: !expanded,
+          // eslint-disable-next-line react-hooks/refs
           inputElement: inputElementRef.current,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
+        // eslint-disable-next-line react-hooks/refs
         resultsPopoverElementRef,
       )
     }
@@ -663,6 +666,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         portal
         radius={radius}
         ref={resultsPopoverElementRef}
+        // eslint-disable-next-line react-hooks/refs
         referenceElement={inputElementRef.current}
         {...popover}
       />

package/src/core/components/menu/menuGroup.tsx

@@ -122,11 +122,13 @@ export function MenuGroup(
 
   // Close child menu when a sibling item becomes active
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (!active) setOpen(false)
   }, [active])
 
   // Update state when child menu is no longer open
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (!open) setWithinMenu(false)
   }, [open])
 

package/src/core/components/menu/useMenuController.ts

@@ -29,7 +29,9 @@ export function useMenuController(props: {
   const elementsRef = useRef<HTMLElement[]>([])
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
+  // eslint-disable-next-line react-hooks/refs
   const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
+  // eslint-disable-next-line react-hooks/refs
   const mounted = Boolean(rootElementRef.current)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
@@ -220,7 +222,9 @@ export function useMenuController(props: {
     return () => cancelAnimationFrame(rafId)
   }, [activeIndex, mounted, setActiveIndex, shouldFocus])
 
+  // eslint-disable-next-line react-hooks/refs
   return {
+    // eslint-disable-next-line react-hooks/refs
     activeElement,
     activeIndex,
     handleItemMouseEnter,

package/src/core/components/skeleton/skeleton.tsx

@@ -32,6 +32,7 @@ export const Skeleton = forwardRef(function Skeleton(
 
   useEffect(() => {
     if (!delay) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       return setVisible(true)
     }
 

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

@@ -213,6 +213,7 @@ 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/components/tree/treeItem.tsx

@@ -74,8 +74,10 @@ export const TreeItem = memo(function TreeItem(
   const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
+  // eslint-disable-next-line react-hooks/refs
   const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
+  // eslint-disable-next-line react-hooks/refs
   const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),

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/exhaustive-deps
+      // eslint-disable-next-line react-hooks-with-use-effect-event/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/hooks/useClickOutside.ts

@@ -58,6 +58,7 @@ export function useClickOutside(
     const nextElements = _getElements(element, elementsArg)
 
     if (prevElements.length !== nextElements.length) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setElements(nextElements)
       elementsRef.current = nextElements
 

package/src/core/primitives/avatar/avatar.tsx

@@ -77,6 +77,7 @@ export const Avatar = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
 
+  // eslint-disable-next-line no-warning-comments
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
   const _sizeRem = avatarSize.size
@@ -101,6 +102,7 @@ export const Avatar = forwardRef(function Avatar(
   }, [arrowPosition, arrowPositionProp])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (src) setImageFailed(false)
   }, [src])
 

package/src/core/primitives/card/card.tsx

@@ -83,6 +83,7 @@ export const Card = forwardRef(function Card(
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
+  // eslint-disable-next-line no-warning-comments
   // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>

package/src/core/primitives/popover/types.ts

@@ -1,6 +1,7 @@
 /** @beta */
 export type PopoverUpdateCallback = () => void
 
-/** @public */
+// eslint-disable-next-line no-warning-comments
 // todo: remove `auto` from PopoverWidth
+/** @public */
 export type PopoverWidth = number | 'auto'

package/src/core/styles/font/responsiveFont.ts

@@ -17,6 +17,7 @@ export function responsiveFont(
   const {family, sizes, weights} = font[fontKey]
   const fontWeight = ($weight && weights[$weight]) || weights.regular
 
+  // eslint-disable-next-line no-warning-comments
   // @todo: make this configurable
   const defaultSize = sizes[2]
 
@@ -48,6 +49,7 @@ export function responsiveFont(
     },
   }
 
+  // eslint-disable-next-line no-warning-comments
   // @TODO fix the real condition that is causing $size to be undefined sometimes
   if (!$size) {
     // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it

package/src/core/theme/__workshop__/canvas.tsx

@@ -124,6 +124,7 @@ function Color(props: {color: ThemeColorCard_v2; tone: CardTone}) {
 
         {/* {features.muted && <ColorMuted color={color.muted} />} */}
 
+        {/* eslint-disable-next-line no-warning-comments */}
         {/* @todo: remove use of `muted` here */}
         {features.selectable && <ColorSelectable color={color.selectable || color.muted} />}
 

package/src/core/utils/portal/portalProvider.tsx

@@ -54,10 +54,13 @@ const emptySubscribe = () => () => {}
 function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
   const valueRef = useRef<ValueType>(value)
 
+  // eslint-disable-next-line react-hooks/refs
   if (!_isEqual(valueRef.current, value)) {
+    // eslint-disable-next-line react-hooks/refs
     valueRef.current = value
   }
 
+  // eslint-disable-next-line react-hooks/refs
   return valueRef.current
 }
 

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

@@ -66,6 +66,7 @@ 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])
@@ -111,6 +112,7 @@ export const VirtualList = forwardRef(function VirtualList(
     window.addEventListener('scroll', handleScroll, {passive: true})
     window.addEventListener('resize', handleResize)
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setScrollHeight(window.innerHeight)
 
     handleScroll()