@sanity/ui 4.0.0-static.4 → 4.0.0-static.40

package/exports/css/index.css

@@ -0,0 +1 @@
+/* this file is used to support importing `@sanity/ui/css/index.css` in dev mode */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.4",
+  "version": "4.0.0-static.40",
   "keywords": [
     "react",
     "ui",
@@ -20,32 +20,27 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "type": "module",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./css": {
       "source": "./exports/css.ts",
-      "import": "./dist/css/index.js",
-      "require": "./dist/css/index.cjs",
       "default": "./dist/css/index.js"
     },
     "./css/index.css": "./dist/css/index.css",
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
-      "import": "./dist/theme.js",
-      "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
     }
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -110,93 +105,87 @@
       },
       "main",
       {
-        "name": "static",
+        "name": "v4",
         "channel": "static",
-        "prerelease": true
+        "prerelease": "static"
       }
     ],
     "extends": "@sanity/semantic-release-preset"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.5",
+    "@floating-ui/react-dom": "^2.1.6",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
-    "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.12",
-    "react-compiler-runtime": "19.1.0-rc.2",
+    "framer-motion": "^12.23.24",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.32.0",
+    "@eslint/js": "^9.37.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.9.17",
+    "@sanity/pkg-utils": "^8.1.19",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^3.1.2",
+    "@sanity/ui-workshop": "4.0.0-static.11",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.0.3",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "@types/react-is": "^19.0.0",
-    "@vanilla-extract/rollup-plugin": "^1.4.0",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@types/react-is": "^19.2.0",
+    "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.4",
     "@vitest/browser": "^3.2.4",
-    "autoprefixer": "^10.4.21",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "1.0.0",
+    "browserslist-config-baseline": "^0.5.0",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
-    "cssnano": "^7.1.0",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-formatter-compact": "^8.40.0",
-    "eslint-plugin-boundaries": "^5.0.1",
+    "eslint-formatter-gha": "^1.6.0",
+    "eslint-plugin-boundaries": "^5.0.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-edac0dde-20250723",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react-hooks": "7.0.0",
+    "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.0.18",
+    "eslint-plugin-storybook": "^9.1.10",
     "globals": "^16.3.0",
     "husky": "^8.0.3",
-    "lightningcss": "^1.30.1",
+    "jsdom": "^26.1.0",
     "lint-staged": "^14.0.1",
     "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
-    "postcss": "^8.5.6",
-    "postcss-preset-env": "^10.2.4",
     "prettier": "^3.6.2",
     "prettier-plugin-packagejson": "^2.5.19",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-is": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-is": "^19.2.0",
     "refractor": "^5.0.0",
     "rimraf": "^5.0.10",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "^2.0.12",
-    "styled-components": "^6.1.19",
+    "start-server-and-test": "^2.1.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.8.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^6.3.5",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.46.0",
+    "vite": "^7.1.9",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
     "vitest-axe": "1.0.0-pre.5"
@@ -206,9 +195,9 @@
     "react-dom": "^19",
     "react-is": "^19"
   },
-  "packageManager": "pnpm@10.13.1",
+  "packageManager": "pnpm@10.18.2",
   "engines": {
-    "node": ">=20.19"
+    "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"
@@ -218,7 +207,6 @@
       "cypress"
     ],
     "overrides": {
-      "@sanity/ui-workshop": "file:registry/sanity-ui-workshop-3.0.0-local.12.tgz",
       "@types/react": "$@types/react",
       "@types/react-dom": "$@types/react-dom",
       "@types/react-is": "$@types/react-is",

package/src/core/Root.tsx

@@ -1,7 +1,7 @@
 import {box, root, type RootStyleProps} from '@sanity/ui/css'
 import {useCallback, useImperativeHandle, useRef, useState} from 'react'
 
-import {Box, type BoxOwnProps} from './primitives/box/box'
+import {Box, type BoxOwnProps} from './primitives/box/Box'
 import {RootProvider} from './RootProvider'
 import type {Props} from './types'
 

package/src/core/RootProvider.tsx

@@ -1,11 +1,11 @@
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import type {ReactNode} from 'react'
 
-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'
+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/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'boundary',
       title: 'Boundary',
-      component: lazy(() => import('./boundary')),
+      component: lazy(() => import('./Boundary')),
     },
   ],
 }

package/src/core/components/autocomplete/{autocomplete.tsx → Autocomplete.tsx}

@@ -16,22 +16,23 @@ import {
   useMemo,
   useReducer,
   useRef,
+  useState,
 } from 'react'
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_raf} from '../../helpers/animation'
 import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {Box, type BoxOwnProps} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
-import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/textInput'
+import {Box, type BoxOwnProps} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Popover, type PopoverProps} from '../../primitives/popover/Popover'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {AnimatedSpinnerIcon} from '../../primitives/spinner/AnimatedSpinnerIcon'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
+import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/TextInput'
 import type {ComponentType, Props} from '../../types'
-import {AutocompleteOption} from './autocompleteOption'
+import {AutocompleteOption} from './AutocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
   AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,
@@ -63,7 +64,7 @@ export type AutocompleteOwnProps<O extends BaseAutocompleteOption = BaseAutocomp
     /** The options to render. */
     options?: O[]
     padding?: ResponsiveProp<Space>
-    popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
+    popover?: Omit<PopoverProps<'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
     prefix?: ReactNode
     radius?: Radius | Radius[]
     /** @beta */
@@ -177,6 +178,8 @@ export function Autocomplete<
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLUListElement | null>(null)
+  // Element refs that need to be accessed during render
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
@@ -184,10 +187,17 @@ export function Autocomplete<
   const valuePropRef = useRef(valueProp)
   const popoverMouseWithinRef = useRef(false)
 
-  // Forward ref to parent
+  // Forward inputElement state to inputElementRef
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    inputElementRef,
+    () => inputElement,
+    [inputElement],
+  )
+  // Forward inputElement to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElementRef.current,
+    () => inputElement,
+    [inputElement],
   )
 
   const listBoxId = `${id}-listbox`
@@ -525,41 +535,6 @@ export function Autocomplete<
     return query
   }, [currentOption, query, renderValue, value])
 
-  const input = (
-    <TextInput
-      {...rest}
-      aria-activedescendant={activeItemId}
-      aria-autocomplete="list"
-      aria-expanded={expanded}
-      aria-owns={listBoxId}
-      autoCapitalize="off"
-      autoComplete="off"
-      autoCorrect="off"
-      as={as}
-      border={border}
-      clearButton={clearButton}
-      customValidity={customValidity}
-      disabled={disabled}
-      fontSize={fontSize}
-      icon={icon}
-      iconRight={loading && AnimatedSpinnerIcon}
-      id={id}
-      inputMode="search"
-      onChange={handleInputChange}
-      onClear={handleClearButtonClick}
-      onFocus={handleInputFocus}
-      padding={padding}
-      prefix={prefix}
-      radius={radius}
-      readOnly={readOnly}
-      ref={inputElementRef}
-      role="combobox"
-      spellCheck={false}
-      suffix={suffix || openButtonNode}
-      value={inputValue}
-    />
-  )
-
   const handleListBoxKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
@@ -629,15 +604,16 @@ export function Autocomplete<
 
   const results = useMemo(() => {
     if (renderPopover) {
-      return renderPopover(
-        {
-          content,
-          hidden: !expanded,
-          inputElement: inputElementRef.current,
-          onMouseEnter: handlePopoverMouseEnter,
-          onMouseLeave: handlePopoverMouseLeave,
-        },
-        resultsPopoverElementRef,
+      return (
+        <RenderPopover
+          content={content}
+          hidden={!expanded}
+          inputElement={inputElement}
+          onMouseEnter={handlePopoverMouseEnter}
+          onMouseLeave={handlePopoverMouseLeave}
+          resultsPopoverElementRef={resultsPopoverElementRef}
+          renderPopover={renderPopover}
+        />
       )
     }
 
@@ -660,7 +636,7 @@ export function Autocomplete<
         portal
         radius={3}
         ref={resultsPopoverElementRef}
-        referenceElement={inputElementRef.current}
+        referenceElement={inputElement}
         {...popover}
       />
     )
@@ -670,6 +646,7 @@ export function Autocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
+    inputElement,
     popover,
     renderPopover,
   ])
@@ -683,8 +660,63 @@ export function Autocomplete<
       onKeyDown={handleRootKeyDown}
       ref={rootElementRef}
     >
-      {input}
+      <TextInput
+        {...rest}
+        aria-activedescendant={activeItemId}
+        aria-autocomplete="list"
+        aria-expanded={expanded}
+        aria-owns={listBoxId}
+        autoCapitalize="off"
+        autoComplete="off"
+        autoCorrect="off"
+        as={as}
+        border={border}
+        clearButton={clearButton}
+        customValidity={customValidity}
+        disabled={disabled}
+        fontSize={fontSize}
+        icon={icon}
+        iconRight={loading && AnimatedSpinnerIcon}
+        id={id}
+        inputMode="search"
+        onChange={handleInputChange}
+        onClear={handleClearButtonClick}
+        onFocus={handleInputFocus}
+        padding={padding}
+        prefix={prefix}
+        radius={radius}
+        readOnly={readOnly}
+        ref={setInputElement}
+        role="combobox"
+        spellCheck={false}
+        suffix={suffix || openButtonNode}
+        value={inputValue}
+      />
       {results}
     </div>
   )
 }
+
+function RenderPopover({
+  renderPopover,
+  content,
+  hidden,
+  inputElement,
+  onMouseEnter,
+  onMouseLeave,
+  resultsPopoverElementRef,
+}: {
+  renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>
+  resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]
+} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {
+  return renderPopover(
+    {
+      content,
+      hidden,
+      inputElement,
+      onMouseEnter,
+      onMouseLeave,
+    },
+    resultsPopoverElementRef,
+  )
+}

package/src/core/components/autocomplete/__workshop__/{custom.tsx → Custom.tsx}

@@ -16,9 +16,12 @@ export default function CustomStory(): React.JSX.Element {
   const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
   const border = useBoolean('Border', true)
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
   const openButton = useBoolean('Open button', true)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
@@ -31,10 +34,17 @@ export default function CustomStory(): React.JSX.Element {
         href="#"
         key={option.value}
         onClick={(event) => event.preventDefault()}
+        // @ts-expect-error - TODO: fix this
         padding={padding}
+        // @ts-expect-error - TODO: fix this
         radius={Math.max((radius ?? 0) - 1, 0) as Radius}
       >
-        <Text size={fontSize}>{option.title}</Text>
+        <Text
+          // @ts-expect-error - TODO: fix this
+          size={fontSize}
+        >
+          {option.title}
+        </Text>
       </Card>
     ),
     [fontSize, padding, radius],
@@ -63,13 +73,16 @@ export default function CustomStory(): React.JSX.Element {
               border={border}
               disabled={disabled}
               filterOption={filterOption}
+              // @ts-expect-error - TODO: fix this
               fontSize={fontSize}
               id="custom"
               onChange={setValue}
               openButton={openButton}
               options={options}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
               placeholder="Search"
+              // @ts-expect-error - TODO: fix this
               radius={radius}
               readOnly={readOnly}
               renderOption={renderOption}

package/src/core/components/autocomplete/__workshop__/{example.tsx → Example.tsx}

@@ -32,14 +32,18 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
 export default function ExampleStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
+  // @ts-expect-error - TODO: fix this
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)
   const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
   const border = useBoolean('Border', true)
   const customValidity = useText('Custom validity')
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
   const openButton = useBoolean('Open button', false)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
@@ -47,7 +51,11 @@ export default function ExampleStory(): React.JSX.Element {
   const handleChange = useCallback((value: string) => setValue(value), [])
 
   return (
-    <Card height="fill" tone={layoutTone}>
+    <Card
+      height="fill"
+      // @ts-expect-error - TODO: fix this
+      tone={layoutTone}
+    >
       <Container width={1}>
         <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
           <Stack gap={3}>
@@ -59,13 +67,16 @@ export default function ExampleStory(): React.JSX.Element {
                 border={border}
                 customValidity={customValidity}
                 disabled={disabled}
+                // @ts-expect-error - TODO: fix this
                 fontSize={fontSize}
                 onChange={handleChange}
                 id="default"
                 openButton={openButton}
                 options={options}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
                 placeholder="Search"
+                // @ts-expect-error - TODO: fix this
                 radius={radius}
                 readOnly={readOnly}
                 ref={ref}

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

@@ -8,32 +8,32 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
     {
       name: 'custom',
       title: 'Custom',
-      component: lazy(() => import('./custom')),
+      component: lazy(() => import('./Custom')),
     },
     {
       name: 'async',
       title: 'Async',
-      component: lazy(() => import('./async')),
+      component: lazy(() => import('./Async')),
     },
     {
       name: 'constrained-height',
       title: 'Constrained height',
-      component: lazy(() => import('./constrainedHeight')),
+      component: lazy(() => import('./ConstrainedHeight')),
     },
     {
       name: 'focus-and-blur',
       title: 'Focus and blur',
-      component: lazy(() => import('./focusAndBlur')),
+      component: lazy(() => import('./FocusAndBlur')),
     },
     {
       name: 'fullscreen',
       title: 'Fullscreen',
-      component: lazy(() => import('./fullscreen')),
+      component: lazy(() => import('./Fullscreen')),
     },
   ],
 }

package/src/core/components/autocomplete/types.ts

@@ -1,4 +1,4 @@
-import type {ButtonProps} from '../../primitives/button/button'
+import type {ButtonProps} from '../../primitives/button/Button'
 
 /** @public */
 export type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>