@sanity/ui 2.6.8-canary.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.6.8-canary.0",
+  "version": "2.7.0",
   "keywords": [
     "sanity",
     "ui",
@@ -51,6 +51,32 @@
     "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"
@@ -88,32 +114,32 @@
     "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.10.3",
+    "@sanity/pkg-utils": "^6.10.4",
     "@sanity/prettier-config": "^1.0.2",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.15",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-docs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-mdx-gfm": "^8.2.1",
-    "@storybook/addon-storysource": "^8.2.1",
-    "@storybook/addon-themes": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
-    "@storybook/manager-api": "^8.2.1",
-    "@storybook/react": "^8.2.1",
-    "@storybook/react-vite": "^8.2.1",
-    "@storybook/test": "^8.2.1",
-    "@storybook/theming": "^8.2.1",
-    "@testing-library/dom": "^10.3.1",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-docs": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/addon-interactions": "^8.2.4",
+    "@storybook/addon-links": "^8.2.4",
+    "@storybook/addon-mdx-gfm": "^8.2.4",
+    "@storybook/addon-storysource": "^8.2.4",
+    "@storybook/addon-themes": "^8.2.4",
+    "@storybook/blocks": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/react": "^8.2.4",
+    "@storybook/react-vite": "^8.2.4",
+    "@storybook/test": "^8.2.4",
+    "@storybook/theming": "^8.2.4",
+    "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
@@ -123,8 +149,8 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
     "commitizen": "^4.3.0",
     "cypress": "^13.13.0",
     "cypress-real-events": "^1.13.0",
@@ -135,7 +161,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
@@ -147,7 +173,7 @@
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
@@ -155,11 +181,11 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.4",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.4",
     "styled-components": "^6.1.11",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.5.3",
-    "vite": "^5.3.3",
+    "vite": "^5.3.4",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
@@ -168,37 +194,19 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.5.0",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
+  },
   "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/components/dialog/dialogContext.ts

@@ -11,11 +11,10 @@ export interface DialogContextValue {
   zOffset?: number | number[]
 }
 
-const key = Symbol.for('@sanity/ui/context/dialog')
-
 /**
  * @internal
  */
-export const DialogContext = createGlobalScopedContext<DialogContextValue>(key, {
-  version: 0.0,
-})
+export const DialogContext = createGlobalScopedContext<DialogContextValue>(
+  '@sanity/ui/context/dialog',
+  {version: 0.0},
+)

package/src/core/components/menu/menuContext.ts

@@ -23,6 +23,7 @@ export interface MenuContextValue {
   onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
 }
 
-const key = Symbol.for('@sanity/ui/context/menu')
-
-export const MenuContext = createGlobalScopedContext<MenuContextValue | null>(key, null)
+export const MenuContext = createGlobalScopedContext<MenuContextValue | null>(
+  '@sanity/ui/context/menu',
+  null,
+)

package/src/core/components/toast/toastContext.ts

@@ -1,6 +1,7 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {ToastContextValue} from './types'
 
-const key = Symbol.for('@sanity/ui/context/toast')
-
-export const ToastContext = createGlobalScopedContext<ToastContextValue | null>(key, null)
+export const ToastContext = createGlobalScopedContext<ToastContextValue | null>(
+  '@sanity/ui/context/toast',
+  null,
+)

package/src/core/components/tree/treeContext.ts

@@ -1,9 +1,10 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {TreeContextValue} from './types'
 
-const key = Symbol.for('@sanity/ui/context/tree')
-
 /**
  * @internal
  */
-export const TreeContext = createGlobalScopedContext<TreeContextValue | null>(key, null)
+export const TreeContext = createGlobalScopedContext<TreeContextValue | null>(
+  '@sanity/ui/context/tree',
+  null,
+)

package/src/core/hooks/index.ts

@@ -1,10 +1,11 @@
 export * from './useArrayProp'
 export * from './useClickOutside'
+export * from './useCustomValidity'
 export * from './useElementRect'
 export * from './useElementSize'
+export * from './useForwardedRef'
 export * from './useGlobalKeyDown'
+export * from './useMatchMedia'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './usePrefersReducedMotion'
-export * from './useForwardedRef'
-export * from './useCustomValidity'

package/src/core/hooks/useMatchMedia.ts

@@ -0,0 +1,46 @@
+import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
+
+/**
+ * Efficiently subscribes to `window.matchMedia` queries
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * @public
+ */
+export function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean {
+  const {subscribe, getSnapshot} = useMemo(() => {
+    /**
+     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
+     * we don't want to eagerly instantiate it to ensure it's only created when actually used
+     */
+    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
+
+    const getMatchMedia = (): MediaQueryList => {
+      if (!MEDIA_QUERY_CACHE) {
+        // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+        // the `window` global is available and we're in a browser environment
+        MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)
+      }
+
+      return MEDIA_QUERY_CACHE
+    }
+
+    return {
+      subscribe: (onStoreChange: () => void): (() => void) => {
+        const matchMedia = getMatchMedia()
+
+        matchMedia.addEventListener('change', onStoreChange)
+
+        return () => matchMedia.removeEventListener('change', onStoreChange)
+      },
+      getSnapshot: () => getMatchMedia().matches,
+    }
+  }, [mediaQueryString])
+
+  useDebugValue(mediaQueryString)
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,4 +1,4 @@
-import {useSyncExternalStore} from 'react'
+import {useMemo, useSyncExternalStore} from 'react'
 import {useTheme_v2} from '../../theme'
 
 /**
@@ -9,8 +9,6 @@ export interface _MediaStore {
   getSnapshot: () => number
 }
 
-const MEDIA_STORE_CACHE = new WeakMap<number[], _MediaStore>()
-
 type MediaQueryMinWidth = `(min-width: ${number}px)`
 type MediaQueryMaxWidth = `(max-width: ${number}px)`
 type MediaQueryMinMaxWidth = `${MediaQueryMinWidth} and ${MediaQueryMaxWidth}`
@@ -97,13 +95,7 @@ function getServerSnapshot() {
  */
 export function useMediaIndex(): number {
   const {media} = useTheme_v2()
-
-  let store = MEDIA_STORE_CACHE.get(media)
-
-  if (!store) {
-    store = _createMediaStore(media)
-    MEDIA_STORE_CACHE.set(media, store)
-  }
+  const store = useMemo(() => _createMediaStore(media), [media])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/core/hooks/usePrefersDark.ts

@@ -1,61 +1,16 @@
-import {useSyncExternalStore} from 'react'
-
-let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-/**
- * Lazy init the matchMedia instance
- */
-function getMatchMedia(): MediaQueryList {
-  if (!MEDIA_QUERY_CACHE) {
-    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
-    // the `window` global is available and we're in a browser environment
-    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-color-scheme: dark)')
-  }
-
-  return MEDIA_QUERY_CACHE
-}
-
-/**
- * As the query is the same for all instances of this hook, we can cache the matchMedia instance
- * and have cheap `change` event listeners, while getSnapshot always reads from the same
- * matchMedia instance and we don't get any tearing.
- * Tearing in this context means the bad edge case in React concurrent render mdoe
- * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
- * during the same render.
- * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
- * what React.memo boundaries there might be between the layers..
- */
-function subscribe(onStoreChange: () => void): () => void {
-  const matchMedia = getMatchMedia()
-
-  matchMedia.addEventListener('change', onStoreChange)
-
-  return () => matchMedia.removeEventListener('change', onStoreChange)
-}
-
-/**
- * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
- * It's important that this function does not create new objects or arrays when called:
- * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
- */
-function getSnapshot() {
-  return getMatchMedia().matches
-}
+import {useMatchMedia} from './useMatchMedia'
 
 /**
- * Only called during server-side rendering, and hydration if using hydrateRoot
- * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
- * and we assume `(prefers-color-scheme: light)` since it's the most common scheme
+ * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+ * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
+ * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
  *
- * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
- */
-function getServerSnapshot() {
-  return false
-}
-
-/**
  * @public
  */
-export function usePrefersDark(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+export function usePrefersDark(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
 }

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,62 +1,16 @@
-import {useSyncExternalStore} from 'react'
-
-let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-/**
- * Lazy init the matchMedia instance
- */
-function getMatchMedia(): MediaQueryList {
-  if (!MEDIA_QUERY_CACHE) {
-    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
-    // the `window` global is available and we're in a browser environment
-    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-reduced-motion: reduce)')
-  }
-
-  return MEDIA_QUERY_CACHE
-}
-
-/**
- * As the query is the same for all instances of this hook, we can cache the matchMedia instance
- * and have cheap `change` event listeners, while getSnapshot always reads from the same
- * matchMedia instance and we don't get any tearing.
- * Tearing in this context means the bad edge case in React concurrent render mdoe
- * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
- * during the same render.
- * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
- * what React.memo boundaries there might be between the layers..
- */
-function subscribe(onStoreChange: () => void): () => void {
-  const matchMedia = getMatchMedia()
-
-  matchMedia.addEventListener('change', onStoreChange)
-
-  return () => matchMedia.removeEventListener('change', onStoreChange)
-}
-
-/**
- * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
- * It's important that this function does not create new objects or arrays when called:
- * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
- */
-function getSnapshot() {
-  return getMatchMedia().matches
-}
-
-/**
- * Only called during server-side rendering, and hydration if using hydrateRoot
- * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
- * and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme
- *
- * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
- */
-function getServerSnapshot() {
-  return false
-}
+import {useMatchMedia} from './useMatchMedia'
 
 /**
  * Returns true if motion should be reduced
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+ * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
+ * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ *
  * @public
  */
-export function usePrefersReducedMotion(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
 }

package/src/core/lib/createGlobalScopedContext.ts

@@ -1,16 +1,25 @@
 /**
- * To improve performance and DevEx for things such as Hot Module Replacement,
- * we want to preserve created contexts between reloads.
- * It also helps with module duplication and other issues.
+ * As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
+ * it's critical that vital react contexts are shared even when there is a duplicate.
+ * If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
+ * those libraries enforce single instances.
+ * Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
+ * read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
+ * It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.
  */
 
 import {createContext, type Context} from 'react'
 import {globalScope} from './globalScope'
 
 export function createGlobalScopedContext<ContextType, const T extends ContextType = ContextType>(
-  key: symbol,
+  /**
+   * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix
+   */
+  key: `@sanity/ui/context/${string}`,
   defaultValue: T,
 ): Context<ContextType> {
+  const symbol = Symbol.for(key)
+
   /**
    * Prevent errors about re-renders on React SSR on Next.js App Router
    */
@@ -18,7 +27,7 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
     return createContext<ContextType>(defaultValue)
   }
 
-  globalScope[key] = globalScope[key] || createContext<T>(defaultValue)
+  globalScope[symbol] = globalScope[symbol] || createContext<T>(defaultValue)
 
-  return globalScope[key]
+  return globalScope[symbol]
 }

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

@@ -10,7 +10,7 @@ import {
   Tooltip,
 } from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 const PORTAL_OPTIONS = {
@@ -30,13 +30,15 @@ export default function CustomPortalStory() {
 
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+    }),
+    [portal1Element],
+  )
 
   return (
-    <PortalProvider
-      __unstable_elements={{
-        portal1: portal1Element,
-      }}
-    >
+    <PortalProvider __unstable_elements={__unstable_elements}>
       <Flex align="center" height="fill" justify="center">
         <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
           <Card

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

@@ -1,10 +1,11 @@
 import {createGlobalScopedContext} from '../../../lib/createGlobalScopedContext'
 import {TooltipDelayGroupContextValue} from './types'
 
-const key = Symbol.for('@sanity/ui/context/tooltipDelayGroup')
-
 /**
  * @beta
  */
 export const TooltipDelayGroupContext =
-  createGlobalScopedContext<TooltipDelayGroupContextValue | null>(key, null)
+  createGlobalScopedContext<TooltipDelayGroupContextValue | null>(
+    '@sanity/ui/context/tooltipDelayGroup',
+    null,
+  )

package/src/core/theme/themeContext.ts

@@ -1,9 +1,10 @@
 import {createGlobalScopedContext} from '../lib/createGlobalScopedContext'
 import {ThemeContextValue} from './types'
 
-const key = Symbol.for('@sanity/ui/context/theme')
-
 /**
  * @internal
  */
-export const ThemeContext = createGlobalScopedContext<ThemeContextValue | null>(key, null)
+export const ThemeContext = createGlobalScopedContext<ThemeContextValue | null>(
+  '@sanity/ui/context/theme',
+  null,
+)

package/src/core/utils/boundaryElement/boundaryElementContext.ts

@@ -1,9 +1,7 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {BoundaryElementContextValue} from './types'
 
-const key = Symbol.for('@sanity/ui/context/boundaryElement')
-
 export const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(
-  key,
+  '@sanity/ui/context/boundaryElement',
   null,
 )

package/src/core/utils/layer/layerContext.ts

@@ -1,6 +1,7 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {LayerContextValue} from './types'
 
-const key = Symbol.for('@sanity/ui/context/layer')
-
-export const LayerContext = createGlobalScopedContext<LayerContextValue | null>(key, null)
+export const LayerContext = createGlobalScopedContext<LayerContextValue | null>(
+  '@sanity/ui/context/layer',
+  null,
+)

package/src/core/utils/portal/__workshop__/named.tsx

@@ -1,19 +1,21 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 
 export default function NamedStory() {
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [portal2Element, setPortal2Element] = useState<HTMLDivElement | null>(null)
   const [portal3Element, setPortal3Element] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+      portal2: portal2Element,
+      portal3: portal3Element,
+    }),
+    [portal1Element, portal2Element, portal3Element],
+  )
 
   return (
-    <PortalProvider
-      __unstable_elements={{
-        portal1: portal1Element,
-        portal2: portal2Element,
-        portal3: portal3Element,
-      }}
-    >
+    <PortalProvider __unstable_elements={__unstable_elements}>
       <Container width={1}>
         <Card height="fill" padding={4}>
           <Stack space={2}>

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

@@ -2,8 +2,8 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {globalScope} from '../../lib/globalScope'
 import {PortalContextValue} from './types'
 
-const key = Symbol.for('@sanity/ui/context/portal')
-const elementKey = Symbol.for('@sanity/ui/context/portal/element')
+const key = '@sanity/ui/context/portal'
+const elementKey = Symbol.for(`${key}/element`)
 
 globalScope[elementKey] = null