@sanity/ui 2.6.7-canary.0 → 2.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.6.7-canary.0",
+  "version": "2.6.7",
   "keywords": [
     "sanity",
     "ui",
@@ -51,6 +51,32 @@
     "src",
     "theme.js"
   ],
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "prepare": "husky install",
+    "prepublishOnly": "pnpm build",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -61,7 +87,6 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "prettier": "@sanity/prettier-config",
   "release": {
     "branches": [
       "+([0-9])?(.{+([0-9]),x}).x",
@@ -84,8 +109,7 @@
     "@sanity/icons": "^3.3.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
-    "react-refractor": "^2.2.0",
-    "use-effect-event": "^1.0.2"
+    "react-refractor": "^2.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -96,25 +120,24 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^6.10.3",
-    "@sanity/prettier-config": "^1.0.2",
-    "@sanity/semantic-release-preset": "^5.0.0",
+    "@sanity/semantic-release-preset": "^4.1.8",
     "@sanity/ui-workshop": "^2.0.15",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-docs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-mdx-gfm": "^8.2.1",
-    "@storybook/addon-storysource": "^8.2.1",
-    "@storybook/addon-themes": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
-    "@storybook/manager-api": "^8.2.1",
-    "@storybook/react": "^8.2.1",
-    "@storybook/react-vite": "^8.2.1",
-    "@storybook/test": "^8.2.1",
-    "@storybook/theming": "^8.2.1",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-docs": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-storysource": "^8.0.8",
+    "@storybook/addon-themes": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^10.3.1",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
@@ -123,6 +146,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "commitizen": "^4.3.0",
@@ -148,6 +172,7 @@
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.2",
+    "prettier-plugin-packagejson": "^2.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
@@ -155,7 +180,7 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.4",
-    "storybook": "^8.2.1",
+    "storybook": "^8.0.8",
     "styled-components": "^6.1.11",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.5.3",
@@ -168,6 +193,7 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.5.0",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -177,28 +203,9 @@
   "esm.sh": {
     "bundle": false
   },
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
   }
-}
+}

package/src/core/__workshop__/constants.ts

@@ -44,9 +44,9 @@ export const WORKSHOP_BUTTON_MODE_OPTIONS: {[key: string]: ButtonMode} = {
 
 export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign | ''} = {
   '(none)': '',
-  'Left': 'left',
-  'Right': 'right',
-  'Center': 'center',
+  Left: 'left',
+  Right: 'right',
+  Center: 'center',
 }
 
 export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
@@ -61,11 +61,11 @@ export const WORKSHOP_CARD_AS_OPTIONS: {
   [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
 } = {
   'DIV (default)': 'div',
-  'BUTTON': 'button',
-  'SPAN': 'span',
-  'OL': 'ol',
-  'PRE': 'pre',
-  'UL': 'ul',
+  BUTTON: 'button',
+  SPAN: 'span',
+  OL: 'ol',
+  PRE: 'pre',
+  UL: 'ul',
 }
 
 export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
@@ -92,7 +92,7 @@ export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: number | 'auto'}
   '3': 3,
   '4': 4,
   '5': 5,
-  'auto': 'auto',
+  auto: 'auto',
 }
 
 export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} = {
@@ -106,15 +106,15 @@ export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'}
 }
 
 export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
-  'baseline': 'baseline',
-  'center': 'center',
+  baseline: 'baseline',
+  center: 'center',
   'flex-end': 'flex-end',
   'flex-start': 'flex-start',
-  'stretch': 'stretch',
+  stretch: 'stretch',
 }
 
 export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
-  'center': 'center',
+  center: 'center',
   'flex-end': 'flex-end',
   'flex-start': 'flex-start',
   'space-around': 'space-around',
@@ -157,16 +157,16 @@ export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {
 }
 
 export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
-  'top': 'top',
+  top: 'top',
   'top-start': 'top-start',
   'top-end': 'top-end',
-  'right': 'right',
+  right: 'right',
   'right-start': 'right-start',
   'right-end': 'right-end',
-  'left': 'left',
+  left: 'left',
   'left-start': 'left-start',
   'left-end': 'left-end',
-  'bottom': 'bottom',
+  bottom: 'bottom',
   'bottom-start': 'bottom-start',
   'bottom-end': 'bottom-end',
 }
@@ -217,11 +217,11 @@ export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorSpotKey} = {
 
 export const WORKSHOP_TEXT_ALIGN_OPTIONS: {[key: string]: TextAlign | ''} = {
   '(none)': '',
-  'Initial': 'initial',
-  'Left': 'left',
-  'Right': 'right',
-  'Center': 'center',
-  'Justify': 'justify',
+  Initial: 'initial',
+  Left: 'left',
+  Right: 'right',
+  Center: 'center',
+  Justify: 'justify',
 }
 
 export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
@@ -233,17 +233,17 @@ export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
 }
 
 export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} = {
-  'date': 'date',
+  date: 'date',
   'datetime-local': 'datetime-local',
-  'email': 'email',
-  'month': 'month',
-  'number': 'number',
-  'password': 'password',
-  'tel': 'tel',
-  'time': 'time',
-  'text': 'text',
-  'week': 'week',
-  'color': 'color',
+  email: 'email',
+  month: 'month',
+  number: 'number',
+  password: 'password',
+  tel: 'tel',
+  time: 'time',
+  text: 'text',
+  week: 'week',
+  color: 'color',
 }
 
 export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
@@ -261,9 +261,9 @@ export const WORKSHOP_TEXT_SIZE_OPTIONS = {
 
 export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
   'Regular (default)': '',
-  'Medium': 'medium',
-  'Semibold': 'semibold',
-  'Bold': 'bold',
+  Medium: 'medium',
+  Semibold: 'semibold',
+  Bold: 'bold',
 }
 
 export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
@@ -286,7 +286,7 @@ export const WORKSHOP_TOAST_STATUS_OPTIONS: {
 }
 
 export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
-  'Auto': 'auto',
+  Auto: 'auto',
   '0': 0,
   '1': 1,
   '2': 2,

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

@@ -452,7 +452,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     if (!loading && !disabled && value) {
       return {
         'aria-label': 'Clear',
-        'onFocus': handleClearButtonFocus,
+        onFocus: handleClearButtonFocus,
       }
     }
 

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

@@ -1,13 +1,4 @@
-import {
-  Children,
-  forwardRef,
-  Fragment,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {Children, forwardRef, Fragment, isValidElement, useCallback, useMemo, useState} from 'react'
 import {useArrayProp, useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
@@ -31,13 +22,13 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
   const space = useArrayProp(spaceRaw)
   const [open, setOpen] = useState(false)
-  const expandElementRef = useRef<HTMLButtonElement | null>(null)
-  const popoverElementRef = useRef<HTMLDivElement | null>(null)
+  const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
   const collapse = useCallback(() => setOpen(false), [])
   const expand = useCallback(() => setOpen(true), [])
 
-  useClickOutside(collapse, () => [expandElementRef.current, popoverElementRef.current])
+  useClickOutside(collapse, [expandElement, popoverElement])
 
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
@@ -61,14 +52,14 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
           open={open}
           placement="top"
           portal
-          ref={popoverElementRef}
+          ref={setPopoverElement}
         >
           <ExpandButton
             fontSize={1}
             mode="bleed"
             onClick={open ? collapse : expand}
             padding={1}
-            ref={expandElementRef}
+            ref={setExpandElement}
             selected={open}
             text="…"
           />

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

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
@@ -170,6 +170,7 @@ const DialogCard = forwardRef(function DialogCard(
   const shadow = useArrayProp(shadowProp)
   const width = useArrayProp(widthProp)
   const ref = useRef<HTMLDivElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
   const layer = useLayer()
   const {isTopLayer} = layer
@@ -215,24 +216,32 @@ const DialogCard = forwardRef(function DialogCard(
   )
 
   useClickOutside(
-    (event: MouseEvent | TouchEvent) => {
-      if (!isTopLayer || !onClickOutside) return
+    useCallback(
+      (event: MouseEvent) => {
+        if (!isTopLayer || !onClickOutside) return
 
-      const target = event.target as Node | null
+        const target = event.target as Node | null
 
-      if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
-        // Ignore clicks outside of the scope
-        return
-      }
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
 
-      onClickOutside()
-    },
-    () => [ref.current],
+        onClickOutside()
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement],
+    ),
+    [rootElement],
   )
 
+  const setRef = useCallback((el: HTMLDivElement | null) => {
+    setRootElement(el)
+    ref.current = el
+  }, [])
+
   return (
     <DialogContainer data-ui="DialogCard" width={width}>
-      <DialogCardRoot radius={radius} ref={ref} scheme={scheme} shadow={shadow}>
+      <DialogCardRoot radius={radius} ref={setRef} scheme={scheme} shadow={shadow}>
         <DialogLayout direction="column">
           {showHeader && (
             <DialogHeader>

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

@@ -18,14 +18,14 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
       display: 'flex',
     },
 
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'outline': 'none',
-    'background': color.backdrop,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    background: color.backdrop,
   }
 }
 

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

@@ -19,7 +19,7 @@ export interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -75,18 +75,16 @@ export const Menu = forwardRef(function Menu(
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-  } = useMenuController({onKeyDown, originElement, shouldFocus, rootElementRef: ref})
+    rootElement,
+    setRootElement,
+  } = useMenuController({onKeyDown, originElement, shouldFocus})
 
   const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
+      setRootElement(el)
       ref.current = el
-
-      // Register root element (for nested menus)
-      if (ref.current && registerElement) {
-        registerElement(ref.current)
-      }
     },
-    [registerElement],
+    [setRootElement],
   )
 
   // Trigger `onItemSelect` when active index changes
@@ -96,8 +94,11 @@ export const Menu = forwardRef(function Menu(
 
   // Close menu when clicking outside
   useClickOutside(
-    (event) => isTopLayer && onClickOutside && onClickOutside(event),
-    () => [ref.current],
+    useCallback(
+      (event) => isTopLayer && onClickOutside && onClickOutside(event),
+      [isTopLayer, onClickOutside],
+    ),
+    [rootElement],
   )
 
   // Close menu when pressing Escape
@@ -115,7 +116,13 @@ export const Menu = forwardRef(function Menu(
     ),
   )
 
-  // @TODO split out into separate contexts
+  // Register root element (for nested menus)
+  useEffect(() => {
+    if (!rootElement || !registerElement) return
+
+    return registerElement(rootElement)
+  }, [registerElement, rootElement])
+
   const value: MenuContextValue = useMemo(
     () => ({
       version: 0.0,

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

@@ -140,7 +140,7 @@ export const MenuButton = forwardRef(function MenuButton(
   }, [])
 
   const handleMenuClickOutside = useCallback(
-    (event: MouseEvent | TouchEvent) => {
+    (event: MouseEvent) => {
       const target = event.target
 
       if (!(target instanceof Node)) {
@@ -206,11 +206,11 @@ export const MenuButton = forwardRef(function MenuButton(
   const menuProps: MenuProps = useMemo(
     () => ({
       'aria-labelledby': id,
-      'onBlurCapture': handleBlur,
-      'onClickOutside': handleMenuClickOutside,
-      'onEscape': handleMenuEscape,
-      'onItemClick': handleItemClick,
-      'originElement': buttonElement,
+      onBlurCapture: handleBlur,
+      onClickOutside: handleMenuClickOutside,
+      onEscape: handleMenuEscape,
+      onItemClick: handleItemClick,
+      originElement: buttonElement,
       registerElement,
       shouldFocus,
     }),
@@ -235,13 +235,13 @@ export const MenuButton = forwardRef(function MenuButton(
       cloneElement(buttonProp, {
         'data-ui': 'MenuButton',
         id,
-        'onClick': handleButtonClick,
-        'onKeyDown': handleButtonKeyDown,
-        'onMouseDown': handleMouseDown,
+        onClick: handleButtonClick,
+        onKeyDown: handleButtonKeyDown,
+        onMouseDown: handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        'ref': ref,
-        'selected': buttonProp.props.selected ?? open,
+        ref: ref,
+        selected: buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
   )

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

@@ -5,7 +5,7 @@ export interface MenuContextValue {
   activeElement: HTMLElement | null
   activeIndex: number
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void

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

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {_getFocusableElements, _sortElements} from './helpers'
 
 /**
@@ -11,6 +11,8 @@ export interface MenuController {
   handleItemMouseLeave: () => void
   handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
+  rootElement: HTMLDivElement | null
+  setRootElement: (el: HTMLDivElement | null) => void
 }
 
 /**
@@ -22,14 +24,14 @@ export function useMenuController(props: {
   onKeyDown?: React.KeyboardEventHandler
   originElement?: HTMLElement | null
   shouldFocus: 'first' | 'last' | null
-  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
 }): MenuController {
-  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
+  const {onKeyDown, originElement, shouldFocus} = props
   const elementsRef = useRef<HTMLElement[]>([])
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  const mounted = Boolean(rootElementRef.current)
+  const activeElement = elementsRef.current[activeIndex] || null
+  const mounted = Boolean(rootElement)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
@@ -42,7 +44,7 @@ export function useMenuController(props: {
 
       if (elementsRef.current.indexOf(element) === -1) {
         elementsRef.current.push(element)
-        _sortElements(rootElementRef.current, elementsRef.current)
+        _sortElements(rootElement, elementsRef.current)
       }
 
       if (selected) {
@@ -59,7 +61,7 @@ export function useMenuController(props: {
         }
       }
     },
-    [rootElementRef, setActiveIndex],
+    [rootElement, setActiveIndex],
   )
 
   const handleKeyDown = useCallback(
@@ -177,15 +179,17 @@ export function useMenuController(props: {
     // which would be incorrect when the user hovers over a gap
     // between two menu items or a menu divider.
     setActiveIndex(-2)
-    rootElementRef.current?.focus()
-  }, [rootElementRef, setActiveIndex])
+    rootElement?.focus()
+  }, [setActiveIndex, rootElement])
 
   // Set focus on the currently active element
   useEffect(() => {
     if (!mounted) return
 
     const rafId = window.requestAnimationFrame(() => {
-      if (activeIndex === -1) {
+      const _activeIndex = activeIndexRef.current
+
+      if (_activeIndex === -1) {
         if (shouldFocus === 'first') {
           const focusableElements = _getFocusableElements(elementsRef.current)
           const el = focusableElements[0]
@@ -213,7 +217,7 @@ export function useMenuController(props: {
         return
       }
 
-      const element = elementsRef.current[activeIndex] || null
+      const element = elementsRef.current[_activeIndex] || null
 
       element?.focus()
     })
@@ -230,5 +234,7 @@ export function useMenuController(props: {
     handleItemMouseLeave,
     handleKeyDown,
     mount,
+    rootElement,
+    setRootElement,
   }
 }