@sanity/ui 2.11.5 → 2.11.7-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.11.5",
+  "version": "2.11.7-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -51,32 +51,6 @@
     "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"
@@ -110,63 +84,63 @@
     "@sanity/icons": "^3.5.7",
     "csstype": "^3.1.3",
     "framer-motion": "^11.18.2",
-    "react-compiler-runtime": "19.0.0-beta-decd7b8-20250118",
+    "react-compiler-runtime": "19.0.0-beta-27714ef-20250124",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/core": "^7.26.7",
+    "@babel/preset-env": "^7.26.7",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.13.1",
+    "@sanity/pkg-utils": "^6.13.4",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.21",
-    "@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",
+    "@sanity/ui-workshop": "^2.0.25",
+    "@storybook/addon-a11y": "^8.5.2",
+    "@storybook/addon-docs": "^8.5.2",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-links": "^8.5.2",
+    "@storybook/addon-mdx-gfm": "^8.5.2",
+    "@storybook/addon-storysource": "^8.5.2",
+    "@storybook/addon-themes": "^8.5.2",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/manager-api": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/test": "^8.5.2",
+    "@storybook/theming": "^8.5.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.0.3",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@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-decd7b8-20250118",
+    "babel-plugin-react-compiler": "19.0.0-beta-27714ef-20250124",
     "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
-    "cypress-real-events": "^1.13.0",
+    "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-boundaries": "^5.0.1",
     "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-decd7b8-20250118",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "19.0.0-beta-27714ef-20250124",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "^0.11.2",
     "http-server": "^14.1.1",
@@ -184,12 +158,12 @@
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.1",
-    "start-server-and-test": "^2.0.9",
-    "storybook": "^8.4.7",
+    "start-server-and-test": "^2.0.10",
+    "storybook": "^8.5.2",
     "styled-components": "^6.1.14",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.7.3",
-    "vite": "^5.4.11",
+    "vite": "^5.4.14",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
@@ -198,25 +172,37 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.3",
   "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/primitives/popover/popover.tsx

@@ -28,6 +28,7 @@ import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
+import {getElementRef} from '../../utils/getElementRef'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
   DEFAULT_POPOVER_DISTANCE,
@@ -443,29 +444,3 @@ export const Popover = memo(
   }),
 )
 Popover.displayName = 'Memo(ForwardRef(Popover))'
-
-// 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: React.JSX.Element) {
-  // 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/tooltip/tooltip.tsx

@@ -30,6 +30,7 @@ import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import type {Placement} from '../../types'
 import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import {getElementRef} from '../../utils/getElementRef'
 import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -320,11 +321,6 @@ export const Tooltip = forwardRef(function Tooltip(
     [refs],
   )
 
-  const childRef = useRef<HTMLElement | null>(null)
-
-  // Merge refs so that any ref we are overriding is called as well
-  useImperativeHandle((childProp as any)?.ref, () => childRef.current)
-
   const child = useMemo(() => {
     if (!childProp) return null
 
@@ -335,7 +331,7 @@ export const Tooltip = forwardRef(function Tooltip(
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
-      ref: childRef,
+      ref: setReferenceElement,
     })
   }, [
     childProp,
@@ -349,13 +345,9 @@ export const Tooltip = forwardRef(function Tooltip(
 
   // If there's a child then we need to set the reference element to the cloned child ref
   // and if child changes we make sure to update or remove the reference element.
-  useEffect(() => {
-    if (!child) return undefined
-
-    setReferenceElement(childRef.current)
-
-    return () => setReferenceElement(null)
-  }, [child])
+  useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [
+    referenceElement,
+  ])
 
   if (!child) return <></>
 

package/src/core/utils/getElementRef.ts

@@ -0,0 +1,26 @@
+// 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`
+// 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.
+export function getElementRef(element: React.ReactElement) {
+  // 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 as {ref?: React.Ref<unknown>}).ref
+  }
+
+  // Not DEV
+  return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref
+}

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

@@ -69,18 +69,12 @@ export const VirtualList = forwardRef(function VirtualList(
     }
   }, [renderItem])
 
-  useEffect(() => {
+  useEffect((): (() => void) | undefined => {
     if (!ref.current) return
 
-    let _scrollEl = ref.current.parentNode
-
-    while (_scrollEl && !_isScrollable(_scrollEl)) {
-      _scrollEl = _scrollEl.parentNode
-    }
-
-    if (_scrollEl) {
-      const scrollEl = _scrollEl
+    const scrollEl = findScrollable(ref.current.parentNode)
 
+    if (scrollEl) {
       if (!(scrollEl instanceof HTMLElement)) return
 
       const handleScroll = () => {
@@ -167,3 +161,13 @@ export const VirtualList = forwardRef(function VirtualList(
   )
 })
 VirtualList.displayName = 'ForwardRef(VirtualList)'
+
+function findScrollable(parentNode: ParentNode | null) {
+  let _scrollEl = parentNode
+
+  while (_scrollEl && !_isScrollable(_scrollEl)) {
+    _scrollEl = _scrollEl.parentNode
+  }
+
+  return _scrollEl
+}