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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.30",
+  "version": "3.0.0-static.31",
   "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/__DEV__.ts

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

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/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/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/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)
@@ -423,31 +426,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/types.ts

@@ -23,7 +23,7 @@ import type {BoxDisplay} from './box/types'
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveBorderProps {
   border?: boolean | boolean[]
@@ -35,7 +35,7 @@ export interface ResponsiveBorderProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveBoxProps {
   display?: BoxDisplay | BoxDisplay[]
@@ -46,7 +46,7 @@ export interface ResponsiveBoxProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveFlexProps {
   align?: AlignItems | AlignItems[]
@@ -57,7 +57,7 @@ export interface ResponsiveFlexProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
@@ -66,7 +66,7 @@ export interface ResponsiveFlexItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
@@ -78,7 +78,7 @@ export interface ResponsiveGridProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveGridItemProps {
   column?: GridItemColumn | GridItemColumn[]
@@ -91,7 +91,7 @@ export interface ResponsiveGridItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveMarginProps {
   /** Applies margins to all sides. The property is responsive. */
@@ -108,7 +108,7 @@ export interface ResponsiveMarginProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsivePaddingProps {
   padding?: number | number[]
@@ -122,7 +122,7 @@ export interface ResponsivePaddingProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveRadiusProps {
   radius?: Radius | Radius[]
@@ -130,7 +130,7 @@ export interface ResponsiveRadiusProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveShadowProps {
   shadow?: number | number[]
@@ -138,7 +138,7 @@ export interface ResponsiveShadowProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]

package/src/core/types/props.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
 

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

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

package/src/core/utils/getElementRef.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /** @internal */
 // Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
 // Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`

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

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

package/src/core/utils/portal/portalContext.ts

@@ -5,7 +5,10 @@ import type {PortalContextValue} from './types'
 const key = '@sanity/ui/context/portal'
 const elementKey = Symbol.for(`${key}/element`)
 
-globalScope[elementKey] = null
+// Use the global scope as a map of symbols to elements
+const elementMap = globalScope as Record<symbol, HTMLDivElement | null>
+
+elementMap[elementKey] = null
 
 export const defaultContextValue: PortalContextValue = {
   version: 0.0,
@@ -15,16 +18,16 @@ export const defaultContextValue: PortalContextValue = {
       return null
     }
 
-    if (globalScope[elementKey]) {
-      return globalScope[elementKey]
+    if (elementMap[elementKey]) {
+      return elementMap[elementKey]
     }
 
-    globalScope[elementKey] = document.createElement('div')
-    globalScope[elementKey].setAttribute('data-portal', '')
+    elementMap[elementKey] = document.createElement('div')
+    elementMap[elementKey].setAttribute('data-portal', '')
 
-    document.body.appendChild(globalScope[elementKey])
+    document.body.appendChild(elementMap[elementKey])
 
-    return globalScope[elementKey]
+    return elementMap[elementKey]
   },
 }
 

package/src/css/components/dialog/dialog.css.ts

@@ -75,7 +75,7 @@ export const scrollerShadowTop = _style(layers.components, {
   top: 0,
   left: 0,
   right: 0,
-  height: 8,
+  height: 4,
   background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
   boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
   pointerEvents: 'none',
@@ -86,7 +86,7 @@ export const scrollerShadowBottom = _style(layers.components, {
   bottom: 0,
   left: 0,
   right: 0,
-  height: 8,
+  height: 4,
   background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
   boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
   pointerEvents: 'none',

package/src/css/primitives/button/button.css.ts

@@ -63,8 +63,6 @@ export const loadingBox = _style(layers.primitives, {
   opacity: 0.8,
 })
 
-// todo
-
 export const tones = {
   ..._fromEntries(
     THEME_COLOR_STATE_TONES.map((t) => {

package/src/theme/v0/css.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import type {StyledObject} from 'styled-components'
 
 /**

package/src/theme/v2/build/merge.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import {isRecord} from './lib/isRecord'
 
 export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {

package/src/theme/v3/merge.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
   return (records.filter(Boolean) as T[]).reduce(_merge, {} as T)
 }