@sanity/ui 2.1.2 → 2.1.3-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.1.2",
+  "version": "2.1.3-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -37,7 +37,6 @@
   },
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
-  "source": "./exports/index.ts",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -52,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 --quiet",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "prepublishOnly": "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"
@@ -120,23 +93,23 @@
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.1.0",
+    "@sanity/pkg-utils": "^6.4.1",
     "@sanity/semantic-release-preset": "^4.1.7",
     "@sanity/ui-workshop": "^2.0.12",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-docs": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/addon-storysource": "^8.0.6",
-    "@storybook/addon-themes": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
+    "@storybook/addon-a11y": "^8.0.7",
+    "@storybook/addon-docs": "^8.0.7",
+    "@storybook/addon-essentials": "^8.0.7",
+    "@storybook/addon-interactions": "^8.0.7",
+    "@storybook/addon-links": "^8.0.7",
+    "@storybook/addon-storysource": "^8.0.7",
+    "@storybook/addon-themes": "^8.0.7",
+    "@storybook/blocks": "^8.0.7",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
+    "@storybook/manager-api": "^8.0.7",
+    "@storybook/react": "^8.0.7",
+    "@storybook/react-vite": "^8.0.7",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.6",
+    "@storybook/theming": "^8.0.7",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.3.0",
@@ -172,7 +145,7 @@
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.2.5",
-    "prettier-plugin-packagejson": "^2.4.14",
+    "prettier-plugin-packagejson": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
@@ -180,10 +153,10 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^23.0.8",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^8.0.6",
+    "storybook": "^8.0.7",
     "styled-components": "^6.1.8",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.4.2",
+    "typescript": "5.4.5",
     "vite": "^5.2.8",
     "vite-tsconfig-paths": "^4.3.2"
   },
@@ -198,10 +171,33 @@
     "node": ">=14.0.0"
   },
   "publishConfig": {
-    "access": "public",
-    "provenance": true
+    "access": "public"
   },
   "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 --quiet",
+    "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

@@ -1,5 +1,4 @@
-import {createContext} from 'react'
-import {globalScope} from '../../lib/globalScope'
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {DialogPosition} from '../../types'
 
 /**
@@ -14,9 +13,9 @@ export interface DialogContextValue {
 
 const key = Symbol.for('@sanity/ui/context/dialog')
 
-globalScope[key] = globalScope[key] || createContext<DialogContextValue>({version: 0.0})
-
 /**
  * @internal
  */
-export const DialogContext: React.Context<DialogContextValue> = globalScope[key]
+export const DialogContext = createGlobalScopedContext<DialogContextValue>(key, {
+  version: 0.0,
+})

package/src/core/lib/createGlobalScopedContext.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+
+import {createContext, type Context} from 'react'
+import {globalScope} from './globalScope'
+
+export function createGlobalScopedContext<ContextType, const T extends ContextType = ContextType>(
+  key: symbol,
+  defaultValue: T,
+): Context<ContextType> {
+  /**
+   * Prevent errors about re-renders on React SSR on Next.js App Router
+   */
+  if (typeof document === 'undefined') {
+    return createContext<ContextType>(defaultValue)
+  }
+
+  globalScope[key] = globalScope[key] || createContext<T>(defaultValue)
+
+  return globalScope[key]
+}

package/src/core/theme/themeContext.ts

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

package/src/core/theme/themeProvider.tsx

@@ -1,8 +1,8 @@
 import {
-  RootTheme,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  Theme,
+  type RootTheme,
+  type ThemeColorCardToneKey,
+  type ThemeColorSchemeKey,
+  type Theme,
   getScopedTheme,
 } from '@sanity/ui/theme'
 import {useContext, useMemo} from 'react'

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

@@ -1,4 +1,4 @@
-import {useMemo} from 'react'
+import {useMemo, useSyncExternalStore} from 'react'
 import {useUnique} from '../../hooks/_internal'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
@@ -19,23 +19,28 @@ export interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-const __BROWSER__ = typeof document !== 'undefined'
-
 /**
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
+  const fallbackElement = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body,
+    () => null,
+  )
 
   const value: PortalContextValue = useMemo(() => {
     return {
       version: 0.0,
       boundaryElement: boundaryElement || null,
-      element: element || (__BROWSER__ && document.body) || null,
+      element: element || fallbackElement,
       elements,
     }
-  }, [boundaryElement, element, elements])
+  }, [boundaryElement, element, elements, fallbackElement])
 
   return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
 }
+
+const emptySubscribe = () => () => {}