@sanity/ui 3.1.2 → 3.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "keywords": [
     "sanity",
     "ui",
@@ -119,7 +119,7 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.15",
+    "framer-motion": "^12.23.16",
     "react-compiler-runtime": "19.1.0-rc.3",
     "react-refractor": "^4.0.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.35.0",
-    "@sanity/pkg-utils": "^8.1.12",
+    "@sanity/pkg-utils": "^8.1.13",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^3.3.2",

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

@@ -10,6 +10,7 @@ import {
   MouseEvent,
   ReactNode,
   Ref,
+  startTransition,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -191,7 +192,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
   // Element refs that need to be accessed during render
-  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
+  const [inputElement, _setInputElement] = useState<HTMLInputElement | null>(null)
+  /**
+   * The startTransition wrapper here is to avoid an issue when on React 18 where this error can happen:
+   * >Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
+   * This doesn't happen on React 19 due to automatic batching of all state updates, the startTransition wrapper here gives a type of batching for 18 users in a way that still works with 19.
+   * NOTE: The startTransition wrapper is not needed in UI v4, since the baseline there is React 19.
+   */
+  const setInputElement = useCallback((node: HTMLInputElement | null) => {
+    startTransition(() => _setInputElement(node))
+  }, [])
 
   // Value refs
   const listFocusedRef = useRef(false)

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

@@ -1,6 +1,6 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
+import {startTransition, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {Box, BoxProps, Flex, Text} from '../../primitives'
@@ -65,7 +65,17 @@ export function TreeItem(
     weight,
     ...restProps
   } = props
-  const [rootElement, setRootElement] = useState<HTMLLIElement | null>(null)
+  const [rootElement, _setRootElement] = useState<HTMLLIElement | null>(null)
+  /**
+   * The startTransition wrapper here is to avoid an issue when on React 18 where this error can happen:
+   * >Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
+   * This doesn't happen on React 19 due to automatic batching of all state updates, the startTransition wrapper here gives a type of batching for 18 users in a way that still works with 19.
+   * NOTE: The startTransition wrapper is not needed in UI v4, since the baseline there is React 19.
+   */
+  const setRootElement = useCallback((node: HTMLLIElement | null) => {
+    startTransition(() => _setRootElement(node))
+  }, [])
+
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree