@sanity/ui 2.10.0-corel.0 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.0-corel.0",
+  "version": "2.10.1",
   "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",
+    "prepack": "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"
@@ -81,9 +107,10 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
     "@sanity/color": "^3.0.6",
-    "@sanity/icons": "^3.4.0",
+    "@sanity/icons": "^3.5.0",
     "csstype": "^3.1.3",
-    "framer-motion": "11.0.8",
+    "framer-motion": "^11.13.1",
+    "react-compiler-runtime": "19.0.0-beta-df7b47d-20241124",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -95,53 +122,53 @@
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.11.7",
-    "@sanity/prettier-config": "^1.0.2",
+    "@sanity/pkg-utils": "^6.11.14",
+    "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.16",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-storysource": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-is": "^18.3.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "babel-plugin-react-compiler": "beta",
+    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "commitizen": "^4.3.0",
     "cypress": "^13.13.2",
     "cypress-real-events": "^1.13.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-boundaries": "^4.2.2",
+    "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-compiler": "beta",
+    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.11.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
@@ -151,58 +178,45 @@
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-compiler-runtime": "beta",
-    "react-dom": "^18.3.1",
-    "react-is": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.5",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.7",
     "styled-components": "^6.1.13",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.5.3",
-    "vite": "^5.4.2",
-    "vite-tsconfig-paths": "^5.0.1"
+    "typescript": "5.6.3",
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "react-is": "^18",
+    "react": "^18 || >=19.0.0-0",
+    "react-dom": "^18 || >=19.0.0-0",
+    "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.15.0",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "$@types/react",
+      "@types/react-dom": "$@types/react-dom",
+      "@types/react-is": "$@types/react-is",
+      "conventional-changelog-conventionalcommits": ">= 8.0.0",
+      "react": "$react",
+      "react-dom": "$react-dom",
+      "react-is": "$react-is"
+    }
+  },
   "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"
   }
-}
+}

package/src/core/__workshop__/constants.ts

@@ -14,7 +14,7 @@ import {
   TextAlign,
   TextInputType,
 } from '@sanity/ui'
-import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0': 0,
@@ -31,6 +31,7 @@ export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {
 export const WORKSHOP_BADGE_TONE_OPTIONS: {[key: string]: BadgeTone} = {
   Default: 'default',
   Primary: 'primary',
+  Suggest: 'suggest',
   Positive: 'positive',
   Caution: 'caution',
   Critical: 'critical',
@@ -51,7 +52,9 @@ export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign
 
 export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
   Default: 'default',
+  Neutral: 'neutral',
   Primary: 'primary',
+  Suggest: 'suggest',
   Positive: 'positive',
   Caution: 'caution',
   Critical: 'critical',
@@ -69,13 +72,15 @@ export const WORKSHOP_CARD_AS_OPTIONS: {
 }
 
 export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
-  Default: 'default',
-  Inherit: 'inherit',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
+  'Inherit': 'inherit',
+  'Transparent': 'transparent',
+  'Default': 'default',
+  'Neutral': 'neutral',
+  'Primary (deprecated)': 'primary',
+  'Suggest': 'suggest',
+  'Positive': 'positive',
+  'Caution': 'caution',
+  'Critical': 'critical',
 }
 
 export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
@@ -203,7 +208,7 @@ export const WORKSHOP_SPACE_OPTIONS = {
   '9': 9,
 }
 
-export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorSpotKey} = {
+export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorAvatarColorKey} = {
   Gray: 'gray',
   Blue: 'blue',
   Purple: 'purple',
@@ -260,21 +265,12 @@ export const WORKSHOP_TEXT_SIZE_OPTIONS = {
 }
 
 export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
-  Regular: 'regular',
+  Regular: '',
   Medium: 'medium',
   Semibold: 'semibold',
   Bold: 'bold',
 }
 
-export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
-  Default: 'default',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
 export const WORKSHOP_TOAST_STATUS_OPTIONS: {
   [key: string]: 'error' | 'success' | 'warning' | 'info' | ''
 } = {

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

@@ -81,7 +81,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
     (
       popoverProps: {
-        content: React.ReactElement | null
+        content: React.ReactElement<any> | null
         hidden: boolean
         inputElement: HTMLInputElement | null
         onMouseEnter: () => void

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

@@ -73,11 +73,11 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => ReactElement
+  renderOption?: (option: Option) => ReactElement<any>
   /** @beta */
   renderPopover?: (
     props: {
-      content: ReactElement | null
+      content: ReactElement<any> | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
@@ -663,6 +663,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         radius={radius}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
+        // @ts-expect-error fix later
         {...popover}
       />
     )
@@ -724,4 +725,4 @@ export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocomplet
     > & {
       ref?: Ref<HTMLInputElement>
     },
-) => ReactElement
+) => ReactElement<any>

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

@@ -9,7 +9,7 @@ export interface AutocompleteOptionProps {
   value: string
 }
 
-export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactElement {
+export function AutocompleteOption(props: AutocompleteOptionProps): React.ReactElement<any> {
   const {children, id, onSelect, selected, value} = props
 
   const handleClick = useCallback(() => {

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

@@ -19,15 +19,13 @@ export default function Example() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Breadcrumbs
-        gapX={1}
-        gapY={3}
         maxLength={maxLength}
         separator={
           <Text muted size={1}>
             /
           </Text>
         }
-        // space={2}
+        space={2}
       >
         <Text size={1}>
           <a href="#">Root</a>

package/src/core/components/breadcrumbs/__workshop__/index.ts

@@ -10,10 +10,5 @@ export default defineScope({
       title: 'Example',
       component: lazy(() => import('./example')),
     },
-    {
-      name: 'buttons',
-      title: 'Buttons',
-      component: lazy(() => import('./buttons')),
-    },
   ],
 })

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

@@ -1,5 +1,17 @@
 import {styled} from 'styled-components'
+import {Button} from '../../primitives'
 
-export const Root = styled.nav`
+export const Root = styled.ol`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  white-space: nowrap;
   line-height: 0;
 `
+
+export const ExpandButton = styled(Button)`
+  appearance: none;
+  margin: -4px;
+`

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

@@ -1,19 +1,23 @@
-import {Children, forwardRef, isValidElement, useCallback, useMemo, useRef, useState} from 'react'
-import {useClickOutsideEvent} from '../../hooks'
-import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
-import {Root} from './breadcrumbs.styles'
+import {
+  Children,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {useArrayProp, useClickOutsideEvent} from '../../hooks'
+import {Box, Popover, Stack, Text} from '../../primitives'
+import {ExpandButton, Root} from './breadcrumbs.styles'
 
 /**
  * @beta
  */
 export interface BreadcrumbsProps {
-  expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
   maxLength?: number
   separator?: React.ReactNode
-  /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
   space?: number | number[]
 }
 
@@ -24,19 +28,8 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
-  const {
-    children,
-    expandButton: expandButtonProps,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    gap: _gapProp,
-    gapX = props.gap ?? props.space ?? 2,
-    gapY = props.gap ?? props.space ?? 2,
-    maxLength,
-    separator,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    space: _spaceProp,
-    ...restProps
-  } = props
+  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)
@@ -60,25 +53,24 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
         <Popover
           constrainSize
           content={
-            <Stack as="ol" overflow="auto" space={gapY}>
+            <Stack as="ol" overflow="auto" padding={space} space={space}>
               {rawItems.slice(beforeLength - 1, len - afterLength)}
             </Stack>
           }
           key="button"
           open={open}
-          padding={2}
           placement="top"
           portal
           ref={popoverElementRef}
         >
-          <Button
+          <ExpandButton
+            fontSize={1}
             mode="bleed"
-            padding={0}
-            text="…"
-            {...expandButtonProps}
             onClick={open ? collapse : expand}
+            padding={1}
             ref={expandElementRef}
             selected={open}
+            text="…"
           />
         </Popover>,
         ...rawItems.slice(len - afterLength),
@@ -86,20 +78,20 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
     }
 
     return rawItems
-  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
-
-  const len = items.length
+  }, [collapse, expand, maxLength, open, rawItems, space])
 
   return (
     <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
-      <Flex align="flex-start" as="ol" gapX={gapX} gapY={gapY} wrap="wrap">
-        {items.map((item, itemIndex) => (
-          <Flex align="flex-start" as="li" gapX={gapX} gapY={gapY} key={itemIndex}>
-            <Box>{item}</Box>
-            {itemIndex < len - 1 && <Box aria-hidden>{separator || <Text muted>/</Text>}</Box>}
-          </Flex>
-        ))}
-      </Flex>
+      {items.map((item, itemIndex) => (
+        <Fragment key={itemIndex}>
+          {itemIndex > 0 && (
+            <Box aria-hidden as="li" paddingX={space}>
+              {separator || <Text muted>/</Text>}
+            </Box>
+          )}
+          <Box as="li">{item}</Box>
+        </Fragment>
+      ))}
     </Root>
   )
 })

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

@@ -305,13 +305,15 @@ export const Dialog = forwardRef(function Dialog(
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || 'fixed',
+    position: _positionProp,
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: _zOffsetProp,
     animate: _animate = false,
     ...restProps
   } = props
+  const positionProp = _positionProp ?? (dialog.position || 'fixed')
+  const zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
@@ -355,7 +357,7 @@ export const Dialog = forwardRef(function Dialog(
 
   const labelId = `${id}_label`
 
-  const rootClickTimeoutRef = useRef<NodeJS.Timeout>()
+  const rootClickTimeoutRef = useRef<NodeJS.Timeout>(undefined)
 
   // If the resulting active element (a.k.a. focused element) is not withing scope when clicking
   // within the dialog, then we want to focus the previously interactive element in the dialog instead.

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

@@ -16,7 +16,7 @@ export interface DialogProviderProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function DialogProvider(props: DialogProviderProps): React.ReactElement {
+export function DialogProvider(props: DialogProviderProps): React.ReactElement<any> {
   const {children, position, zOffset} = props
 
   const contextValue: DialogContextValue = useMemo(

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

@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement {
+): React.ReactElement<any> {
   const {children, req, ...restProps} = props
 
   return (

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

@@ -1,5 +1,6 @@
-import {SearchIcon} from '@sanity/icons'
+import {CubeIcon} from '@sanity/icons'
 import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -12,11 +13,9 @@ export default function TonesStory() {
       <Box padding={[4, 5, 6]}>
         <Card radius={3} shadow={3} tone={parentTone}>
           <Menu>
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Default" tone="default" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Primary" tone="primary" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Positive" tone="positive" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Caution" tone="caution" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Critical" tone="critical" />
+            {THEME_COLOR_STATE_TONES.map((tone) => (
+              <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />
+            ))}
           </Menu>
         </Card>
       </Box>

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

@@ -79,7 +79,6 @@ describe('components/menu', () => {
       }
 
       function Root() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const value: any = undefined
 
         return (
@@ -109,7 +108,6 @@ describe('components/menu', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const value: any = () => {
           return {version: 1}
         }

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

@@ -14,19 +14,21 @@ export interface MenuProps extends ResponsivePaddingProps {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
-  focusFirst?: boolean
+  'focusFirst'?: boolean
   /**
    * @deprecated Use `shouldFocus="last"` instead.
    */
-  focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
-  onEscape?: () => void
-  onItemClick?: () => void
-  onItemSelect?: (index: number) => void
-  originElement?: HTMLElement | null
-  registerElement?: (el: HTMLElement) => () => void
-  shouldFocus?: 'first' | 'last' | null
-  space?: number | number[]
+  'focusLast'?: boolean
+  'onClickOutside'?: (event: MouseEvent) => void
+  'onEscape'?: () => void
+  'onItemClick'?: () => void
+  'onItemSelect'?: (index: number) => void
+  'originElement'?: HTMLElement | null
+  'registerElement'?: (el: HTMLElement) => () => void
+  'shouldFocus'?: 'first' | 'last' | null
+  'space'?: number | number[]
+  'aria-labelledby'?: string
+  'onBlurCapture'?: (event: FocusEvent) => void
 }
 
 const Root = styled(Box)`
@@ -57,10 +59,12 @@ export const Menu = forwardRef(function Menu(
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
+    shouldFocus: _shouldFocus,
     space = 1,
     ...restProps
   } = props
+  const shouldFocus =
+    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)