@sanity/ui 2.6.8 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.6.8",
+  "version": "2.7.0",
   "keywords": [
     "sanity",
     "ui",
@@ -65,7 +65,7 @@
     "pkg:build": "pkg build --strict",
     "pkg:check": "pkg --strict",
     "prepare": "husky install",
-    "prepublishOnly": "pnpm build",
+    "prepack": "pnpm build",
     "release": "semantic-release",
     "storybook:build": "storybook build",
     "storybook:dev": "storybook dev -p 6006",
@@ -114,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",
@@ -149,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",
@@ -161,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",
@@ -173,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",
@@ -181,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": {

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
 

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

@@ -1,5 +1,4 @@
-import {useMemo, useSyncExternalStore} from 'react'
-import {useUnique} from '../../hooks/_internal'
+import {useMemo, useRef, useSyncExternalStore} from 'react'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -44,3 +43,34 @@ export function PortalProvider(props: PortalProviderProps): React.ReactElement {
 }
 
 const emptySubscribe = () => () => {}
+
+/**
+ * This is a React hook to make sure that a record identity is the same on every render. Uses strict
+ * equality comparison (eg by identity), and only goes one level deep.
+ */
+function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
+  const valueRef = useRef<ValueType>(value)
+
+  if (!_isEqual(valueRef.current, value)) {
+    valueRef.current = value
+  }
+
+  return valueRef.current
+}
+
+function _isEqual(objA: Comparable, objB: Comparable): boolean {
+  if (!objA || !objB) {
+    return objA === objB
+  }
+
+  const keysA = Object.keys(objA)
+  const keysB = Object.keys(objB)
+
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+
+  return keysA.every((key) => objA[key] === objB[key])
+}
+
+type Comparable = Record<string | number | symbol, unknown> | undefined | null

package/src/core/hooks/_internal/index.ts

@@ -1 +0,0 @@
-export * from './useUnique'

package/src/core/hooks/_internal/useUnique.ts

@@ -1,34 +0,0 @@
-import {useRef} from 'react'
-
-/**
- * This is a React hook to make sure that a record identity is the same on every render. Uses strict
- * equality comparison (eg by identity), and only goes one level deep.
- *
- * @internal
- */
-type Comparable = Record<string | number | symbol, unknown> | undefined | null
-
-export function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
-
-  if (!_isEqual(valueRef.current, value)) {
-    valueRef.current = value
-  }
-
-  return valueRef.current
-}
-
-function _isEqual(objA: Comparable, objB: Comparable): boolean {
-  if (!objA || !objB) {
-    return objA === objB
-  }
-
-  const keysA = Object.keys(objA)
-  const keysB = Object.keys(objB)
-
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-
-  return keysA.every((key) => objA[key] === objB[key])
-}