@sanity/ui 4.0.0-beta.8 → 4.0.0-next.2

package/src/utils/portal/Portal.tsx

@@ -1,42 +0,0 @@
-import {type ReactNode, type ReactPortal, use} from 'react'
-import {createPortal} from 'react-dom'
-
-import {CardContext} from '../../primitives/card/CardContext'
-import {CardInternalProvider} from '../../primitives/card/CardInternalProvider'
-import {CardProvider} from '../../primitives/card/CardProvider'
-import {assertCardContext} from '../../primitives/card/useCard'
-import {usePortal} from './usePortal'
-
-/** @public */
-export interface PortalProps {
-  children: ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
-}
-
-/** @public */
-export function Portal(props: PortalProps): ReactPortal | null {
-  const {children, __unstable_name: name} = props
-  const portal = usePortal()
-  const portalElement =
-    (name ? portal.elements && portal.elements[name] : portal.element) ||
-    portal.elements?.['default']
-
-  if (!portalElement) {
-    return null
-  }
-
-  const card = use(CardContext)
-  assertCardContext(card)
-
-  return createPortal(
-    <CardInternalProvider root>
-      <CardProvider scheme={card.scheme} tone={card.tone}>
-        {children}
-      </CardProvider>
-    </CardInternalProvider>,
-    portalElement,
-  )
-}

package/src/utils/portal/PortalContext.ts

@@ -1,37 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
-import {globalScope} from '../../core/lib/globalScope'
-import type {PortalContextValue} from './types'
-
-const key = '@sanity/ui/v4/portal'
-const elementKey = Symbol.for(`${key}/element`)
-
-// Use the global scope as a map of symbols to elements
-const elementMap = globalScope as Record<symbol, HTMLDivElement | null>
-
-elementMap[elementKey] = null
-
-export const defaultContextValue: PortalContextValue = {
-  version: 0.0,
-  boundaryElement: null,
-  get element() {
-    if (typeof document === 'undefined') {
-      return null
-    }
-
-    if (elementMap[elementKey]) {
-      return elementMap[elementKey]
-    }
-
-    elementMap[elementKey] = document.createElement('div')
-    elementMap[elementKey].setAttribute('data-portal', '')
-
-    document.body.appendChild(elementMap[elementKey])
-
-    return elementMap[elementKey]
-  },
-}
-
-export const PortalContext: Context<PortalContextValue> =
-  createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)

package/src/utils/portal/PortalProvider.tsx

@@ -1,38 +0,0 @@
-import {type ReactNode, use, useMemo, useSyncExternalStore} from 'react'
-
-import {PortalContext} from './PortalContext'
-import type {PortalContextValue} from './types'
-
-/** @public */
-export interface PortalProviderProps {
-  children: ReactNode
-  element?: HTMLElement | null
-  /**
-   * @beta
-   */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>
-}
-
-/** @public */
-export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
-  const {children, element, __unstable_elements: elements} = props
-  const parentPortal = use(PortalContext)
-  const fallbackElement = useSyncExternalStore(
-    emptySubscribe,
-    () => elements?.['default'] ?? (parentPortal.element || document.body),
-    () => null,
-  )
-
-  const value = useMemo(() => {
-    return {
-      version: 0.0,
-      boundaryElement: null,
-      element: element || fallbackElement,
-      elements,
-    } satisfies PortalContextValue
-  }, [element, elements, fallbackElement])
-
-  return <PortalContext value={value}>{children}</PortalContext>
-}
-
-const emptySubscribe = () => () => {}

package/src/utils/portal/__workshop__/Named.tsx

@@ -1,69 +0,0 @@
-import {Card, Label, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useMemo, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-export default function NamedStory(): React.JSX.Element {
-  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={__unstable_elements}>
-      <CardWrapper gap={5} tone="default">
-        <Stack gap={3}>
-          <Label muted size={1} weight="medium">
-            Portal 1
-          </Label>
-          <div ref={setPortal1Element} />
-        </Stack>
-
-        <Stack gap={3}>
-          <Label muted size={1} weight="medium">
-            Portal 2
-          </Label>
-          <div ref={setPortal2Element} />
-        </Stack>
-
-        <Stack gap={3}>
-          <Label muted size={1} weight="medium">
-            Portal 3
-          </Label>
-          <div ref={setPortal3Element} />
-        </Stack>
-
-        <Portal __unstable_name="portal1">
-          <Card muted padding={4} radius={3} shadow={1}>
-            <Text size={1}>Card A in portal 1</Text>
-          </Card>
-        </Portal>
-
-        <Portal __unstable_name="portal2">
-          <Card muted padding={4} radius={3} shadow={1}>
-            <Text size={1}>Card B in portal 2</Text>
-          </Card>
-        </Portal>
-
-        <Portal __unstable_name="portal3">
-          <Card muted padding={4} radius={3} shadow={1}>
-            <Text size={1}>Card C in portal 3</Text>
-          </Card>
-        </Portal>
-
-        <Portal __unstable_name="portal3">
-          <Card muted padding={4} radius={3} shadow={1}>
-            <Text size={1}>Card D in portal 3</Text>
-          </Card>
-        </Portal>
-      </CardWrapper>
-    </PortalProvider>
-  )
-}

package/src/utils/portal/__workshop__/index.ts

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'utils/portal',
-  title: 'Portal',
-  stories: [
-    {
-      name: 'named',
-      title: 'Named portals',
-      component: lazy(() => import('./Named')),
-    },
-  ],
-}
-
-export default scope

package/src/utils/portal/types.ts

@@ -1,7 +0,0 @@
-/** @public */
-export interface PortalContextValue {
-  version: 0.0
-  boundaryElement: HTMLElement | null
-  element: HTMLElement | null
-  elements?: Record<string, HTMLElement | null | undefined>
-}

package/src/utils/portal/usePortal.ts

@@ -1,30 +0,0 @@
-import {use} from 'react'
-
-import {isRecord} from '../../core/lib/isRecord'
-import {PortalContext} from './PortalContext'
-import type {PortalContextValue} from './types'
-
-/** @public */
-export function usePortal(): PortalContextValue {
-  const value = use(PortalContext)
-
-  assertPortalContext(value)
-
-  return value
-}
-
-/** @internal */
-export function assertPortalContext(
-  value: PortalContextValue | null,
-): asserts value is PortalContextValue {
-  if (!value) {
-    throw new Error('usePortal(): missing context value')
-  }
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('usePortal(): the context value is not compatible')
-  }
-}