@sanity/ui 4.0.0-static.31 → 4.0.0-static.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.31",
+  "version": "4.0.0-static.32",
   "keywords": [
     "react",
     "ui",
@@ -130,9 +130,9 @@
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.35.0",
+    "@eslint/js": "^9.36.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^8.1.14",
+    "@sanity/pkg-utils": "^8.1.16",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "4.0.0-static.11",
@@ -156,16 +156,16 @@
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.35.0",
+    "eslint": "^9.36.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-66f09bd0-20250806",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "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-83c88ad4-20250923",
+    "eslint-plugin-react-refresh": "^0.4.21",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^9.1.7",
     "globals": "^16.3.0",
@@ -183,10 +183,9 @@
     "rimraf": "^5.0.10",
     "semantic-release": "24.2.7",
     "start-server-and-test": "^2.1.1",
-    "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
-    "typescript-eslint": "^8.44.0",
+    "typescript-eslint": "^8.44.1",
     "vite": "^7.1.6",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",

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

@@ -16,6 +16,7 @@ import {
   useMemo,
   useReducer,
   useRef,
+  useState,
 } from 'react'
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
@@ -177,6 +178,8 @@ export function Autocomplete<
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLUListElement | null>(null)
+  // Element refs that need to be accessed during render
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
@@ -184,10 +187,17 @@ export function Autocomplete<
   const valuePropRef = useRef(valueProp)
   const popoverMouseWithinRef = useRef(false)
 
-  // Forward ref to parent
+  // Forward inputElement state to inputElementRef
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    inputElementRef,
+    () => inputElement,
+    [inputElement],
+  )
+  // Forward inputElement to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElementRef.current,
+    () => inputElement,
+    [inputElement],
   )
 
   const listBoxId = `${id}-listbox`
@@ -525,41 +535,6 @@ export function Autocomplete<
     return query
   }, [currentOption, query, renderValue, value])
 
-  const input = (
-    <TextInput
-      {...rest}
-      aria-activedescendant={activeItemId}
-      aria-autocomplete="list"
-      aria-expanded={expanded}
-      aria-owns={listBoxId}
-      autoCapitalize="off"
-      autoComplete="off"
-      autoCorrect="off"
-      as={as}
-      border={border}
-      clearButton={clearButton}
-      customValidity={customValidity}
-      disabled={disabled}
-      fontSize={fontSize}
-      icon={icon}
-      iconRight={loading && AnimatedSpinnerIcon}
-      id={id}
-      inputMode="search"
-      onChange={handleInputChange}
-      onClear={handleClearButtonClick}
-      onFocus={handleInputFocus}
-      padding={padding}
-      prefix={prefix}
-      radius={radius}
-      readOnly={readOnly}
-      ref={inputElementRef}
-      role="combobox"
-      spellCheck={false}
-      suffix={suffix || openButtonNode}
-      value={inputValue}
-    />
-  )
-
   const handleListBoxKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
@@ -629,15 +604,16 @@ export function Autocomplete<
 
   const results = useMemo(() => {
     if (renderPopover) {
-      return renderPopover(
-        {
-          content,
-          hidden: !expanded,
-          inputElement: inputElementRef.current,
-          onMouseEnter: handlePopoverMouseEnter,
-          onMouseLeave: handlePopoverMouseLeave,
-        },
-        resultsPopoverElementRef,
+      return (
+        <RenderPopover
+          content={content}
+          hidden={!expanded}
+          inputElement={inputElement}
+          onMouseEnter={handlePopoverMouseEnter}
+          onMouseLeave={handlePopoverMouseLeave}
+          resultsPopoverElementRef={resultsPopoverElementRef}
+          renderPopover={renderPopover}
+        />
       )
     }
 
@@ -660,7 +636,7 @@ export function Autocomplete<
         portal
         radius={3}
         ref={resultsPopoverElementRef}
-        referenceElement={inputElementRef.current}
+        referenceElement={inputElement}
         {...popover}
       />
     )
@@ -670,6 +646,7 @@ export function Autocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
+    inputElement,
     popover,
     renderPopover,
   ])
@@ -683,8 +660,63 @@ export function Autocomplete<
       onKeyDown={handleRootKeyDown}
       ref={rootElementRef}
     >
-      {input}
+      <TextInput
+        {...rest}
+        aria-activedescendant={activeItemId}
+        aria-autocomplete="list"
+        aria-expanded={expanded}
+        aria-owns={listBoxId}
+        autoCapitalize="off"
+        autoComplete="off"
+        autoCorrect="off"
+        as={as}
+        border={border}
+        clearButton={clearButton}
+        customValidity={customValidity}
+        disabled={disabled}
+        fontSize={fontSize}
+        icon={icon}
+        iconRight={loading && AnimatedSpinnerIcon}
+        id={id}
+        inputMode="search"
+        onChange={handleInputChange}
+        onClear={handleClearButtonClick}
+        onFocus={handleInputFocus}
+        padding={padding}
+        prefix={prefix}
+        radius={radius}
+        readOnly={readOnly}
+        ref={setInputElement}
+        role="combobox"
+        spellCheck={false}
+        suffix={suffix || openButtonNode}
+        value={inputValue}
+      />
       {results}
     </div>
   )
 }
+
+function RenderPopover({
+  renderPopover,
+  content,
+  hidden,
+  inputElement,
+  onMouseEnter,
+  onMouseLeave,
+  resultsPopoverElementRef,
+}: {
+  renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>
+  resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]
+} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {
+  return renderPopover(
+    {
+      content,
+      hidden,
+      inputElement,
+      onMouseEnter,
+      onMouseLeave,
+    },
+    resultsPopoverElementRef,
+  )
+}

package/src/core/components/breadcrumbs/Breadcrumbs.tsx

@@ -48,8 +48,8 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
     className,
     expandButton: expandButtonProps,
     gap = 2,
-    gapX,
-    gapY,
+    gapX = gap,
+    gapY = gap,
     maxLength,
     separator,
     ...rest
@@ -66,45 +66,17 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
 
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
-  const items = useMemo(() => {
-    const len = rawItems.length
-
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2)
-      const afterLength = Math.floor(maxLength / 2)
-
-      return [
-        ...rawItems.slice(0, beforeLength - 1),
-        <Popover
-          constrainSize
-          content={
-            <Stack as="ol" gap={gapY} overflow="auto">
-              {rawItems.slice(beforeLength - 1, len - afterLength)}
-            </Stack>
-          }
-          key="button"
-          open={open}
-          padding={2}
-          placement="top"
-          portal
-          ref={popoverElementRef}
-        >
-          <Button
-            mode="bleed"
-            padding={0}
-            text="…"
-            {...expandButtonProps}
-            onClick={open ? collapse : expand}
-            ref={expandElementRef}
-            selected={open}
-          />
-        </Popover>,
-        ...rawItems.slice(len - afterLength),
-      ]
-    }
-
-    return rawItems
-  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
+  const items = useItems({
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    gapY,
+    expandButtonProps,
+  })
 
   return (
     <Flex
@@ -129,3 +101,64 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
     </Flex>
   )
 }
+
+function useItems({
+  collapse,
+  expand,
+  expandElementRef,
+  maxLength,
+  open,
+  popoverElementRef,
+  rawItems,
+  gapY,
+  expandButtonProps,
+}: {
+  collapse: () => void
+  expand: () => void
+  expandElementRef: React.RefObject<HTMLButtonElement | null>
+  maxLength: number | undefined
+  open: boolean
+  popoverElementRef: React.RefObject<HTMLDivElement | null>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]
+  gapY: NonNullable<GapStyleProps['gapY']>
+  expandButtonProps: BreadcrumbsOwnProps['expandButton']
+}): React.JSX.Element[] {
+  const len = rawItems.length
+
+  if (maxLength && len > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2)
+    const afterLength = Math.floor(maxLength / 2)
+
+    return [
+      ...rawItems.slice(0, beforeLength - 1),
+      <Popover
+        constrainSize
+        content={
+          <Stack as="ol" gap={gapY} overflow="auto">
+            {rawItems.slice(beforeLength - 1, len - afterLength)}
+          </Stack>
+        }
+        key="button"
+        open={open}
+        padding={2}
+        placement="top"
+        portal
+        ref={popoverElementRef}
+      >
+        <Button
+          mode="bleed"
+          padding={0}
+          text="…"
+          {...expandButtonProps}
+          onClick={open ? collapse : expand}
+          ref={expandElementRef}
+          selected={open}
+        />
+      </Popover>,
+      ...rawItems.slice(len - afterLength),
+    ]
+  }
+
+  return rawItems
+}

package/src/core/components/dialog/DialogContext.ts

@@ -18,4 +18,4 @@ export interface DialogContextValue {
  * @internal
  */
 export const DialogContext: Context<DialogContextValue> =
-  createGlobalScopedContext<DialogContextValue>('@sanity/ui/v3/dialog', {version: 0.0})
+  createGlobalScopedContext<DialogContextValue>('@sanity/ui/v4/dialog', {version: 0.0})

package/src/core/components/dialog/__workshop__/Panes.tsx

@@ -11,7 +11,8 @@ import {
   PortalProvider,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
-import {styled} from 'styled-components'
+
+import {panePortal, paneRoot} from './styles.css'
 
 export default function PanesStory(): React.JSX.Element {
   return (
@@ -22,23 +23,6 @@ export default function PanesStory(): React.JSX.Element {
   )
 }
 
-const PaneRoot = styled(Card)`
-  position: relative;
-`
-
-const PanePortal = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-`
-
 function Pane(props: {borderLeft?: boolean; id: string}) {
   const {borderLeft, id} = props
   const [element, setElement] = useState<HTMLDivElement | null>(null)
@@ -52,13 +36,13 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
   return (
     <BoundaryElementProvider element={element}>
       <PortalProvider element={portalElement}>
-        <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
+        <Card className={paneRoot} borderLeft={borderLeft} flex={1} ref={setElement}>
           <Box padding={4}>
             <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
           </Box>
 
-          <PanePortal ref={setPortalElement} />
-        </PaneRoot>
+          <div className={panePortal} ref={setPortalElement} />
+        </Card>
 
         {dialogOpen && (
           <Dialog

package/src/core/components/dialog/__workshop__/styles.css.ts

@@ -0,0 +1,18 @@
+import {globalStyle, style} from '@vanilla-extract/css'
+
+export const paneRoot: string = style({
+  position: 'relative',
+})
+
+export const panePortal: string = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  pointerEvents: 'none',
+})
+
+globalStyle(`${panePortal} > *`, {
+  pointerEvents: 'auto',
+})

package/src/core/components/menu/Menu.test.tsx

@@ -34,15 +34,12 @@ describe('components/menu', () => {
 
         const value: MenuContextValue = useMemo(
           () => ({
-            version: 0.0,
+            version: 2,
             activeElement: null,
-            activeIndex: 0,
             mount: (element: HTMLElement | null) => () => console.log(element),
             onItemClick: () => undefined,
             onItemMouseEnter: handleItemMouseEnter,
             onItemMouseLeave: handleItemMouseLeave,
-            onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: handleItemMouseLeave,
           }),
           [handleItemMouseEnter, handleItemMouseLeave],
         )
@@ -58,8 +55,7 @@ describe('components/menu', () => {
 
       const contextValue = log.mock.calls[0][0]
 
-      expect(contextValue.version).toBe(0.0)
-      expect(contextValue.activeIndex).toBe(0)
+      expect(contextValue.version).toBe(2)
       expect(typeof contextValue.mount).toBe('function')
       expect(typeof contextValue.onItemClick).toBe('function')
       expect(typeof contextValue.onItemMouseEnter).toBe('function')

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

@@ -127,22 +127,21 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
     ),
   )
 
-  const value: MenuContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      activeElement,
-      activeIndex,
-      mount,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      onItemMouseEnter: handleItemMouseEnter,
-      onItemMouseLeave: handleItemMouseLeave,
-      registerElement,
-    }),
+  const value = useMemo(
+    () =>
+      ({
+        version: 2,
+        activeElement,
+        mount,
+        onClickOutside,
+        onEscape,
+        onItemClick,
+        onItemMouseEnter: handleItemMouseEnter,
+        onItemMouseLeave: handleItemMouseLeave,
+        registerElement,
+      }) satisfies MenuContextValue,
     [
       activeElement,
-      activeIndex,
       mount,
       handleItemMouseEnter,
       handleItemMouseLeave,

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

@@ -3,9 +3,8 @@ import {type Context, type MouseEvent as ReactMouseEvent} from 'react'
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 
 export interface MenuContextValue {
-  version: 0.0
+  version: 2
   activeElement: HTMLElement | null
-  activeIndex: number
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
@@ -16,4 +15,4 @@ export interface MenuContextValue {
 }
 
 export const MenuContext: Context<MenuContextValue | null> =
-  createGlobalScopedContext<MenuContextValue | null>('@sanity/ui/v3/menu', null)
+  createGlobalScopedContext<MenuContextValue | null>('@sanity/ui/v4/menu', null)

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

@@ -142,11 +142,13 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
 
   // 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/useMenu.ts

@@ -12,8 +12,8 @@ export function useMenu(): MenuContextValue {
 
   // NOTE: This check is for future-compatiblity
   // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
+  // - If the value is an object, but doesn’t have `version: 2`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 2) {
     throw new Error('useMenu(): the context value is not compatible')
   }
 

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

@@ -5,7 +5,6 @@ import {
   type MutableRefObject,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -39,12 +38,13 @@ export function useMenuController(props: {
   const elementsRef = useRef<HTMLElement[]>([])
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  const mounted = Boolean(rootElementRef.current)
+  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
     activeIndexRef.current = nextActiveIndex
+
+    setActiveElement(elementsRef.current[nextActiveIndex] || null)
   }, [])
 
   const mount = useCallback(
@@ -193,7 +193,7 @@ export function useMenuController(props: {
 
   // Set focus on the currently active element
   useEffect(() => {
-    if (!mounted) return
+    if (!rootElementRef.current) return
 
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
@@ -228,7 +228,7 @@ export function useMenuController(props: {
     })
 
     return () => cancelAnimationFrame(rafId)
-  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
+  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
 
   return {
     activeElement,

package/src/core/components/toast/ToastContext.ts

@@ -4,4 +4,4 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {ToastContextValue} from './types'
 
 export const ToastContext: Context<ToastContextValue | null> =
-  createGlobalScopedContext<ToastContextValue | null>('@sanity/ui/v3/toast', null)
+  createGlobalScopedContext<ToastContextValue | null>('@sanity/ui/v4/toast', null)

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

@@ -226,6 +226,7 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
       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/TreeContext.ts

@@ -7,4 +7,4 @@ import type {TreeContextValue} from './types'
  * @internal
  */
 export const TreeContext: Context<TreeContextValue | null> =
-  createGlobalScopedContext<TreeContextValue | null>('@sanity/ui/v3/tree', null)
+  createGlobalScopedContext<TreeContextValue | null>('@sanity/ui/v4/tree', null)