@sanity/ui 3.0.0-static.30 → 3.0.0-static.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.30",
+  "version": "3.0.0-static.32",
   "keywords": [
     "react",
     "ui",
@@ -99,45 +99,45 @@
     "extends": "@sanity/semantic-release-preset"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.2",
+    "@floating-ui/react-dom": "^2.1.3",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
-    "@vanilla-extract/css": "^1.17.2",
-    "@vanilla-extract/dynamic": "^2.1.3",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.9.7",
+    "framer-motion": "^12.18.1",
     "gzip-size": "^7.0.0",
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/preset-env": "^7.27.1",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "19.5.0",
     "@commitlint/config-conventional": "19.5.0",
-    "@eslint/js": "^9.26.0",
+    "@eslint/js": "^9.29.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.2.2",
-    "@sanity/prettier-config": "^1.0.3",
+    "@sanity/pkg-utils": "^7.2.6",
+    "@sanity/prettier-config": "^1.0.4",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^3.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.15.29",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
-    "@vanilla-extract/rollup-plugin": "^1.3.15",
-    "@vanilla-extract/vite-plugin": "^5.0.3",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/browser": "^3.1.4",
+    "@vanilla-extract/rollup-plugin": "^1.3.17",
+    "@vanilla-extract/vite-plugin": "^5.0.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/browser": "^3.2.3",
     "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
@@ -147,8 +147,8 @@
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.2",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.31.0",
@@ -157,15 +157,15 @@
     "eslint-plugin-react-hooks": "0.0.0-experimental-4448b187-20250515",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.0.5",
-    "globals": "^16.0.0",
+    "eslint-plugin-storybook": "^9.0.11",
+    "globals": "^16.2.0",
     "husky": "^8.0.3",
     "lightningcss": "^1.30.1",
     "lint-staged": "^14.0.1",
     "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
-    "postcss": "^8.5.3",
-    "postcss-preset-env": "^10.2.0",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^10.2.3",
     "prettier": "^3.5.3",
     "prettier-plugin-packagejson": "^2.5.15",
     "react": "^19.1.0",
@@ -178,10 +178,10 @@
     "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.32.0",
+    "typescript-eslint": "^8.34.1",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.2",
+    "vitest": "^3.2.3",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {

package/src/core/{primitives/root/Root.tsx → Root.tsx}

@@ -1,9 +1,9 @@
 import {box, root, type RootStyleProps} from '@sanity/ui/css'
 import {useCallback, useImperativeHandle, useRef, useState} from 'react'
 
-import type {Props} from '../../types/props'
-import {Box, type BoxOwnProps} from '../box/box'
+import {Box, type BoxOwnProps} from './primitives/box/box'
 import {RootProvider} from './RootProvider'
+import type {Props} from './types/props'
 
 /** @public */
 export const DEFAULT_ROOT_ELEMENT = 'html'
@@ -27,7 +27,8 @@ export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(pr
     as: as = DEFAULT_ROOT_ELEMENT,
     children,
     className,
-    height = 'fill',
+    height, // = 'fill',
+    overflow = 'hidden',
     ref: forwardedRef,
     scheme = 'light',
     tone = 'transparent',
@@ -76,6 +77,7 @@ export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(pr
         scheme,
         tone,
       })}
+      overflow={overflow}
       ref={handleRef}
     >
       {node}

package/src/core/{primitives/root/RootProvider.tsx → RootProvider.tsx}

@@ -1,11 +1,11 @@
 import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import type {ReactNode} from 'react'
 
-import {ToastProvider} from '../../components/toast/toastProvider'
-import {BoundaryElementProvider} from '../../utils/boundaryElement/boundaryElementProvider'
-import {PortalProvider} from '../../utils/portal/portalProvider'
-import {CardProvider} from '../card/cardProvider'
-import {LayerProvider} from '../layer/layerProvider'
+import {ToastProvider} from './components/toast/toastProvider'
+import {CardProvider} from './primitives/card/cardProvider'
+import {LayerProvider} from './primitives/layer/layerProvider'
+import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
+import {PortalProvider} from './utils/portal/portalProvider'
 
 /** @public */
 export interface RootProviderProps {

package/src/core/__DEV__.ts

@@ -1,5 +1,4 @@
 declare global {
-  // eslint-disable-next-line no-var
   var __DEV__: boolean
 }
 

package/src/core/__workshop__/boundary.tsx

@@ -0,0 +1,28 @@
+import {Box, Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
+
+export default function BoundaryStory() {
+  const {scheme} = useCard()
+
+  return (
+    <Box padding={5}>
+      <Root as="div" padding={5} radius={4} scheme={scheme}>
+        <Layout />
+      </Root>
+    </Box>
+  )
+}
+
+function Layout() {
+  const toast = useToast()
+
+  return (
+    <Stack gap={4}>
+      <Text size={1}>
+        Testing the root component. Toast messages will be rendered here, and should be contained
+        within the root element.
+      </Text>
+
+      <Button onClick={() => toast.push({title: 'Hello!'})} text="Push toast message" width="min" />
+    </Stack>
+  )
+}

package/src/core/__workshop__/index.ts

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'root',
+  title: 'Root',
+  stories: [
+    {
+      name: 'boundary',
+      title: 'Boundary',
+      component: lazy(() => import('./boundary')),
+    },
+  ],
+})

package/src/core/_compat/theme/theme.test.tsx

@@ -55,10 +55,11 @@ describe('theme', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <ThemeContext.Provider value={value as any}>
+          <ThemeContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </ThemeContext.Provider>
         )

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

@@ -96,6 +96,8 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton
   const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const scrollBottom = scrollHeight - scrollTop
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
@@ -156,8 +158,8 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
     if (!el) return
 
     const handleScroll = () => {
-      // console.log('scroll', el.scrollTop)
       setScrollTop(el.scrollTop)
+      setScrollHeight(el.scrollHeight - el.offsetHeight)
     }
 
     el.addEventListener('scroll', handleScroll, {passive: true})
@@ -213,7 +215,12 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
           {children}
         </Box>
 
-        {footer && <div className={dialogScrollerShadowBottom()} />}
+        {footer && (
+          <div
+            className={dialogScrollerShadowBottom()}
+            style={{opacity: Math.min(scrollBottom, 32) / 32}}
+          />
+        )}
       </Box>
 
       {footer && (

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

@@ -79,10 +79,11 @@ describe('components/menu', () => {
       }
 
       function Root() {
-        const value: any = undefined
-
         return (
-          <MenuContext.Provider value={value}>
+          <MenuContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </MenuContext.Provider>
         )
@@ -108,12 +109,12 @@ describe('components/menu', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value: any = () => {
-          return {version: 1}
-        }
 
         return (
-          <MenuContext.Provider value={value}>
+          <MenuContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </MenuContext.Provider>
         )

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

@@ -51,10 +51,11 @@ describe('components/toast', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <ToastContext.Provider value={value as any}>
+          <ToastContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </ToastContext.Provider>
         )
@@ -80,12 +81,12 @@ describe('components/toast', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <ToastContext.Provider value={value as any}>
+          <ToastContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </ToastContext.Provider>
         )

package/src/core/hooks/usePrefersDark.hydration.test.tsx

@@ -23,7 +23,7 @@ describe('usePrefersDark SSR hydration', () => {
         addEventListener: vi.fn(),
         removeEventListener: vi.fn(),
         matches: true,
-      }) as any
+      }) as unknown as MediaQueryList
   })
 
   afterAll(() => {

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -23,7 +23,7 @@ describe('usePrefersReducedMotion SSR hydration', () => {
         addEventListener: vi.fn(),
         removeEventListener: vi.fn(),
         matches: true,
-      }) as any
+      }) as unknown as MediaQueryList
   })
 
   afterAll(() => {

package/src/core/index.ts

@@ -96,8 +96,6 @@ export * from './primitives/layer/useLayer'
 export * from './primitives/popover/popover'
 export * from './primitives/popover/types'
 export * from './primitives/radio/radio'
-export * from './primitives/root/Root'
-export * from './primitives/root/RootProvider'
 export * from './primitives/select/select'
 export * from './primitives/selectable/selectable'
 export * from './primitives/selectable/types'
@@ -128,6 +126,10 @@ export * from './utils/portal/portalProvider'
 export * from './utils/portal/types'
 export * from './utils/portal/usePortal'
 
+// root
+export * from './Root'
+export * from './RootProvider'
+
 // types
 export * from './types/gridItem'
 export * from './types/placement'

package/src/core/lib/createGlobalScopedContext.ts

@@ -28,7 +28,10 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
     return createContext<ContextType>(defaultValue)
   }
 
-  globalScope[symbol] = globalScope[symbol] || createContext<T>(defaultValue)
+  // Use the global scope as a map of symbols to contexts
+  const symbolMap = globalScope as Record<symbol, Context<ContextType>>
 
-  return globalScope[symbol]
+  symbolMap[symbol] = symbolMap[symbol] || createContext<T>(defaultValue)
+
+  return symbolMap[symbol]
 }

package/src/core/lib/globalScope.ts

@@ -16,4 +16,4 @@ function getGlobalScope() {
   throw new Error('@sanity/ui: could not locate global scope')
 }
 
-export const globalScope = getGlobalScope() as any
+export const globalScope = getGlobalScope()

package/src/core/primitives/card/card.tsx

@@ -1,9 +1,10 @@
 import {card, type CardStyleProps} from '@sanity/ui/css'
+import {useContext} from 'react'
 
 import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {CardContext} from './cardContext'
 import {CardProvider} from './cardProvider'
-import {useCard} from './useCard'
 
 /** @public */
 export const DEFAULT_CARD_ELEMENT = 'div'
@@ -54,7 +55,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     ...rest
   } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
-  const parent = useCard()
+  const parent = useContext(CardContext)
   const tone = toneProp === 'inherit' ? parent?.tone : toneProp
   const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
@@ -96,7 +97,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     const CompatProvider = parent.unstable_CompatProvider
 
     return (
-      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent?.tone ?? 'default'}>
+      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent.tone}>
         {node}
       </CompatProvider>
     )

package/src/core/primitives/card/useCard.ts

@@ -4,6 +4,12 @@ import {CardContext} from './cardContext'
 import type {CardContextValue} from './types'
 
 /** @public */
-export function useCard(): CardContextValue | null {
-  return useContext(CardContext)
+export function useCard(): CardContextValue {
+  const card = useContext(CardContext)
+
+  if (!card) {
+    throw new Error('useCard(): missing context value')
+  }
+
+  return card
 }

package/src/core/primitives/code/refractor.tsx

@@ -7,7 +7,7 @@ export default function LazyRefractor(
 ) {
   const {language: languageProp, value} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
-  const registered = language ? Refractor.hasLanguage(language as any) : false
+  const registered = language ? Refractor.hasLanguage(language) : false
 
   return (
     <>

package/src/core/primitives/grid/types.ts

@@ -1,7 +1,7 @@
 export {
   /**
    * @public
-   * @deprecated Use `GridAutoCols` from `@sanity/ui/css` instead.
+   * @deprecated Use `GridAutoColumns` from `@sanity/ui/css` instead.
    */
   type GridAutoCols,
   /**

package/src/core/primitives/layer/layer.test.tsx

@@ -58,10 +58,11 @@ describe('primitives/layer', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <LayerContext.Provider value={value as any}>
+          <LayerContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </LayerContext.Provider>
         )
@@ -87,12 +88,12 @@ describe('primitives/layer', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <LayerContext.Provider value={value as any}>
+          <LayerContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </LayerContext.Provider>
         )

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

@@ -31,6 +31,7 @@ import {origin} from '../../middleware/origin'
 import type {Placement} from '../../types/placement'
 import type {ComponentType, Props} from '../../types/props'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/portal'
 import {CardProvider} from '../card/cardProvider'
 import {useCard} from '../card/useCard'
@@ -327,7 +328,9 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     (node: HTMLElement | null) => {
       refs.setReference(node)
 
-      const childRef = getElementRef(childProp as any)
+      if (!childProp) return
+
+      const childRef = getElementRef(childProp)
 
       if (typeof childRef === 'function') {
         childRef(node)
@@ -402,10 +405,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     open &&
     (portal ? (
       <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-        <CardProvider
-          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
-          scheme={scheme ?? 'light'}
-        >
+        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>
@@ -423,31 +423,3 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     </>
   )
 }
-
-// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
-// After React 19 accessing `element.ref` does the opposite.
-// https://github.com/facebook/react/pull/28348
-//
-// Access the ref using the method that doesn't yield a warning.
-function getElementRef(
-  element: ReactElement<{ref: ForwardedRef<HTMLElement>}>,
-): ForwardedRef<HTMLElement> {
-  // React <=18 in DEV
-  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
-  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return (element as any).ref
-  }
-
-  // React 19 in DEV
-  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
-  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return element.props.ref
-  }
-
-  // Not DEV
-  return element.props.ref || (element as any).ref
-}

package/src/core/primitives/textArea/textArea.tsx

@@ -43,8 +43,6 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
   props: TextAreaProps<E>,
 ) {
   const {
-    // TODO: fix this
-
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,

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

@@ -419,10 +419,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        <CardProvider
-          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
-          scheme={scheme ?? 'light'}
-        >
+        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>