@sanity/ui 2.10.18 → 2.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.18",
+  "version": "2.11.1",
   "keywords": [
     "sanity",
     "ui",
@@ -109,7 +109,7 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.5.7",
     "csstype": "^3.1.3",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^11.16.0",
     "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -122,10 +122,10 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.13.0",
+    "@sanity/pkg-utils": "^6.13.1",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.20",
+    "@sanity/ui-workshop": "^2.0.21",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-docs": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
@@ -147,14 +147,14 @@
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.3",
     "@types/react-dom": "^19.0.2",
     "@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.4",
-    "babel-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
+    "babel-plugin-react-compiler": "19.0.0-beta-63e3235-20250105",
     "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -166,7 +166,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.3",
-    "eslint-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
+    "eslint-plugin-react-compiler": "19.0.0-beta-63e3235-20250105",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "^0.11.2",
     "http-server": "^14.1.1",
@@ -186,7 +186,7 @@
     "semantic-release": "^24.2.1",
     "start-server-and-test": "^2.0.9",
     "storybook": "^8.4.7",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.14",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.7.2",
     "vite": "^5.4.11",
@@ -198,7 +198,7 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.2",
+  "packageManager": "pnpm@9.15.3",
   "engines": {
     "node": ">=14.0.0"
   },

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<any> | null
+        content: React.JSX.Element | null
         hidden: boolean
         inputElement: HTMLInputElement | null
         onMouseEnter: () => void

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

@@ -6,7 +6,6 @@ import {
   HTMLProps,
   KeyboardEvent,
   MouseEvent,
-  ReactElement,
   ReactNode,
   Ref,
   cloneElement,
@@ -73,11 +72,11 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => ReactElement<any>
+  renderOption?: (option: Option) => React.JSX.Element
   /** @beta */
   renderPopover?: (
     props: {
-      content: ReactElement<any> | null
+      content: React.JSX.Element | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
@@ -726,4 +725,4 @@ export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocomplet
     > & {
       ref?: Ref<HTMLInputElement>
     },
-) => ReactElement<any>
+) => React.JSX.Element

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

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

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<any> {
+export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
   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<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (

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

@@ -25,9 +25,9 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: React.ReactElement<any>
+  button: React.JSX.Element
   id: string
-  menu?: React.ReactElement<any>
+  menu?: React.JSX.Element
   onClose?: () => void
   onOpen?: () => void
   /**

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

@@ -6,7 +6,7 @@ import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
-import {Menu} from './menu'
+import {Menu, MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
 /**
@@ -16,6 +16,17 @@ export interface MenuGroupProps {
   as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   icon?: React.ElementType | React.ReactNode
+  menu?: Omit<
+    MenuProps,
+    | 'onClickOutside'
+    | 'onEscape'
+    | 'onItemClick'
+    | 'onKeyDown'
+    | 'onMouseEnter'
+    | 'registerElement'
+    | 'shouldFocus'
+    | 'onBlurCapture'
+  >
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
@@ -30,12 +41,13 @@ export interface MenuGroupProps {
 export function MenuGroup(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
     MenuGroupProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     as = 'button',
     children,
     fontSize = 1,
     icon: IconComponent,
+    menu: menuProps,
     onClick,
     padding = 3,
     popover,
@@ -129,6 +141,7 @@ export function MenuGroup(
 
   const childMenu = (
     <Menu
+      {...menuProps}
       onClickOutside={onClickOutside}
       onEscape={onEscape}
       onItemClick={handleChildItemClick}

package/src/core/components/tab/tabList.tsx

@@ -6,7 +6,7 @@ import {Inline, InlineProps} from '../../primitives'
  * @public
  */
 export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement<any> | null | undefined | false>
+  children: Array<React.JSX.Element | null | undefined | false>
 }
 
 //Limits the width of tabs in tablist
@@ -29,7 +29,7 @@ export const TabList = forwardRef(function TabList(
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {

package/src/core/components/toast/toast.tsx

@@ -53,7 +53,7 @@ const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneK
  */
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'

package/src/core/components/toast/toastProvider.tsx

@@ -49,7 +49,7 @@ const ToastContainer = styled.div`
 /**
  * @public
  */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement<any> {
+export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
   const [state, _setState] = useState<ToastState>([])
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})

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

@@ -30,7 +30,7 @@ export const Tree = memo(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {children, space = 1, onFocus, ...restProps} = props
     const ref = useRef<HTMLDivElement | null>(null)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)

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

@@ -9,7 +9,7 @@ export interface TreeGroupProps {
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()
 

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

@@ -46,7 +46,7 @@ const ToggleArrowText = styled(Text)`
  */
 export const TreeItem = memo(function TreeItem(
   props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {
     children,
     expanded: expandedProp = false,

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

@@ -68,7 +68,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children: React.ReactElement<any>[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

package/src/core/primitives/card/__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<any> {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -1,5 +1,5 @@
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useRef, useState} from 'react'
+import {useRef, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -12,7 +12,7 @@ import {Text} from '../../text'
 import {Popover} from '../popover'
 import {PopoverUpdateCallback} from '../types'
 
-export default function TestStory(): ReactElement<any> {
+export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 

package/src/core/primitives/popover/popover.tsx

@@ -59,7 +59,7 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   /**
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
@@ -117,7 +117,7 @@ export const Popover = memo(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement<any> {
+  ): React.JSX.Element {
     const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
@@ -449,7 +449,7 @@ Popover.displayName = 'Memo(ForwardRef(Popover))'
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-function getElementRef(element: React.ReactElement<any>) {
+function getElementRef(element: React.JSX.Element) {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

package/src/core/primitives/tooltip/tooltip.tsx

@@ -47,7 +47,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement<any>
+  children?: React.JSX.Element
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -28,7 +28,7 @@ export interface TooltipDelayGroupProviderProps {
  */
 export function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {children, delay} = props
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)

package/src/core/theme/__workshop__/build/story.tsx

@@ -13,7 +13,6 @@ import {
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
 import {buildTheme} from '@sanity/ui/theme'
-import {ReactElement} from 'react'
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
@@ -21,7 +20,7 @@ import {Root} from './Root'
 
 const theme = buildTheme()
 
-export default function BuildStory(): ReactElement<any> {
+export default function BuildStory(): React.JSX.Element {
   return (
     <Root>
       <div

package/src/core/theme/themeColorProvider.tsx

@@ -14,7 +14,7 @@ export interface ThemeColorProviderProps {
 /**
  * @public
  */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement<any> {
+export function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element {
   const {children, scheme, tone} = props
   const root = useRootTheme()
 

package/src/core/theme/themeProvider.tsx

@@ -23,7 +23,7 @@ export interface ThemeProviderProps {
 /**
  * @public
  */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement<any> {
+export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {
   const parentTheme = useContext(ThemeContext)
   const {children} = props
   const scheme = props.scheme ?? (parentTheme?.scheme || 'light')

package/src/core/utils/arrow/arrow.tsx

@@ -1,4 +1,4 @@
-import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
+import {ForwardedRef, HTMLProps, forwardRef} from 'react'
 import {styled, css} from 'styled-components'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
@@ -68,7 +68,7 @@ export const Arrow = forwardRef(function Arrow(
     'width' | 'height'
   >,
   ref: ForwardedRef<HTMLDivElement>,
-): ReactElement<any> {
+): React.JSX.Element {
   const {width: w, height: h, radius = 0, ...restProps} = props
   const {card} = useTheme_v2()
   const strokeWidth = card.shadow.outline

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -13,9 +13,7 @@ export interface BoundaryElementProviderProps {
 /**
  * @public
  */
-export function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.ReactElement<any> {
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 

package/src/core/utils/layer/layerProvider.tsx

@@ -15,7 +15,7 @@ export interface LayerProviderProps {
 /**
  * @public
  */
-export function LayerProvider(props: LayerProviderProps): React.ReactElement<any> {
+export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values

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

@@ -21,7 +21,7 @@ export interface PortalProviderProps {
 /**
  * @public
  */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement<any> {
+export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(

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

@@ -47,7 +47,7 @@ export const VirtualList = forwardRef(function VirtualList(
     StackProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.ReactElement<any> {
+): React.JSX.Element {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const {space} = useTheme_v2()
   const ref = useRef<HTMLDivElement | null>(null)