@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,24 +1,18 @@
-import {useMemo} from 'react'
+import {type ReactNode, useMemo} from 'react'
 
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface BoundaryElementProviderProps {
-  children: React.ReactNode
+  children: ReactNode
   element: HTMLElement | null
 }
 
-/**
- * @public
- */
+/** @public */
 export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 
   return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
 }
-
-BoundaryElementProvider.displayName = 'BoundaryElementProvider'

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

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface BoundaryElementContextValue {
   version: 0.0
   element: HTMLElement | null

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

@@ -2,16 +2,14 @@ import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
 const DEFAULT_VALUE: BoundaryElementContextValue = {
   version: 0.0,
   element: null,
 }
 
-/**
- * @public
- */
+/** @public */
 export function useBoundaryElement(): BoundaryElementContextValue {
   const value = useContext(BoundaryElementContext)
 

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,27 +1,38 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
-  --card-fg-color: orange;
-
   [data-eq-min~='0'] > & {
-    --card-fg-color: green;
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.orange[600]}, ${vars.color
+      .palette.orange[400]});
   }
 
   [data-eq-min~='1'] > & {
-    --card-fg-color: blue;
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.red[600]}, ${vars.color.palette
+      .red[400]});
+  }
+
+  [data-eq-min~='2'] > & {
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.magenta[600]}, ${vars.color
+      .palette.magenta[400]});
+  }
+
+  [data-eq-min~='3'] > & {
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.purple[600]}, ${vars.color
+      .palette.purple[400]});
   }
 `
 
-export default function CustomMediaQuery() {
+export default function CustomMediaQuery(): React.JSX.Element {
   return (
-    <Box padding={[3, 4, 5]}>
-      <Box marginBottom={[3, 4, 5]}>
+    <Box padding={4}>
+      <Box marginBottom={4}>
         <Text>Resize this frame to see the text color change:</Text>
       </Box>
 
-      <ElementQuery media={[100, 200, 300]}>
-        <TestCard padding={2} shadow={1}>
+      <ElementQuery media={[0, 100, 200, 300]}>
+        <TestCard padding={3} shadow={1}>
           <Text>This card sits inside an element query.</Text>
         </TestCard>
       </ElementQuery>

package/src/core/utils/elementQuery/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'utils/elementQuery',
   title: 'ElementQuery',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./customMedia')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,53 +1,75 @@
-import {forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+import {BREAKPOINTS} from '@sanity/ui/css'
+import {useImperativeHandle, useMemo, useState} from 'react'
 
-import {useElementSize} from '../../hooks'
-import {useTheme_v2} from '../../theme'
+import {useElementSize} from '../../hooks/useElementSize'
+import type {ComponentType, Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
+/** @beta */
+export const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface MediaQueryProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export type ElementQueryOwnProps = {
   media?: number[]
 }
 
+/** @beta */
+export type ElementQueryElementType = 'div' | ComponentType
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const ElementQuery = forwardRef(function ElementQuery(
-  props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
-  const theme = useTheme_v2()
-  const {children, media: _media, ...restProps} = props
-  const media = _media ?? theme.media
+export type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> = Props<
+  ElementQueryOwnProps,
+  E
+>
+
+const DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS)
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function ElementQuery<
+  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
+>(props: ElementQueryProps<E>): React.JSX.Element {
+  const {
+    as: Element = DEFAULT_ELEMENT_QUERY_ELEMENT,
+    children,
+    media: mediaProp,
+    ref: forwardedRef,
+    ...rest
+  } = props as ElementQueryProps<typeof DEFAULT_ELEMENT_QUERY_ELEMENT>
+
+  const breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS
 
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementSize = useElementSize(element)
   const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
   const max = useMemo(() => {
-    const eq = findMaxBreakpoints(media, width)
+    const eq = findMaxBreakpoints(breakpoints, width)
 
     return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
+  }, [breakpoints, width])
+
   const min = useMemo(() => {
-    const eq = findMinBreakpoints(media, width)
+    const eq = findMinBreakpoints(breakpoints, width)
 
     return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
+  }, [breakpoints, width])
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
     element,
   ])
 
   return (
-    <div data-ui="ElementQuery" {...restProps} data-eq-max={max} data-eq-min={min} ref={setElement}>
+    <Element data-ui="ElementQuery" {...rest} data-eq-max={max} data-eq-min={min} ref={setElement}>
       {children}
-    </div>
+    </Element>
   )
-})
-ElementQuery.displayName = 'ForwardRef(ElementQuery)'
+}

package/src/core/utils/errorBoundary.tsx

@@ -1,13 +1,13 @@
-import {Component, PropsWithChildren} from 'react'
+import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
 
-import {Code} from '../primitives/code'
+import {Code} from '../primitives/code/code'
 
 /**
  * DO NOT USE IN PRODUCTION
  * @beta
  */
 export type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
+  onCatch: (params: {error: Error; info: ErrorInfo}) => void
 }>
 
 /**
@@ -23,18 +23,20 @@ export interface ErrorBoundaryState {
  * @beta
  */
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = {error: null}
+  override state: ErrorBoundaryState = {error: null}
+
+  static displayName = 'ErrorBoundary'
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     // Update state so the next render will show the fallback UI.
     return {error}
   }
 
-  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
     this.props.onCatch({error, info})
   }
 
-  render(): React.ReactNode {
+  override render(): ReactNode {
     const {error} = this.state
 
     if (error) {

package/src/core/utils/getElementRef.ts

@@ -1,10 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/** @internal */
 // 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) {
+export function getElementRef(element: React.ReactElement): React.Ref<unknown> | undefined {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

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

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

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

@@ -1,7 +1,7 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
 import {useMemo, useState} from 'react'
 
-export default function NamedStory() {
+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)
@@ -18,7 +18,7 @@ export default function NamedStory() {
     <PortalProvider __unstable_elements={__unstable_elements}>
       <Container width={1}>
         <Card height="fill" padding={4}>
-          <Stack space={2}>
+          <Stack gap={2}>
             <Text size={1} weight="medium">
               Portal 1
             </Text>
@@ -26,7 +26,7 @@ export default function NamedStory() {
           </Stack>
         </Card>
         <Card height="fill" padding={4}>
-          <Stack space={2}>
+          <Stack gap={2}>
             <Text size={1} weight="medium">
               Portal 2
             </Text>
@@ -34,7 +34,7 @@ export default function NamedStory() {
           </Stack>
         </Card>
         <Card height="fill" padding={4}>
-          <Stack space={2}>
+          <Stack gap={2}>
             <Text size={1} weight="medium">
               Portal 3
             </Text>

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

@@ -1,14 +1,15 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
 
-import {render} from '../../../../test'
 import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
+import type {PortalContextValue} from './types'
 import {usePortal} from './usePortal'
 
 describe('utils/portal', () => {
   describe('usePortal', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootPortal = usePortal()
@@ -40,7 +41,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -53,10 +54,11 @@ describe('utils/portal', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <PortalContext.Provider value={value as any}>
+          <PortalContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </PortalContext.Provider>
         )
@@ -68,7 +70,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -82,12 +84,12 @@ describe('utils/portal', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <PortalContext.Provider value={value as any}>
+          <PortalContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </PortalContext.Provider>
         )

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

@@ -0,0 +1,36 @@
+import type {ReactNode, ReactPortal} from 'react'
+import {createPortal} from 'react-dom'
+
+import {CardProvider} from '../../primitives/card/cardProvider'
+import {useCard} 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 card = useCard()
+  const portal = usePortal()
+  const portalElement =
+    (name ? portal.elements && portal.elements[name] : portal.element) ||
+    portal.elements?.['default']
+
+  if (!portalElement) {
+    return null
+  }
+
+  return createPortal(
+    <CardProvider tone="transparent" scheme={card.scheme}>
+      {children}
+    </CardProvider>,
+    portalElement,
+  )
+}

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

@@ -1,11 +1,16 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {globalScope} from '../../lib/globalScope'
-import {PortalContextValue} from './types'
+import type {PortalContextValue} from './types'
 
-const key = '@sanity/ui/context/portal'
+const key = '@sanity/ui/v3/portal'
 const elementKey = Symbol.for(`${key}/element`)
 
-globalScope[elementKey] = null
+// 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,
@@ -15,17 +20,18 @@ export const defaultContextValue: PortalContextValue = {
       return null
     }
 
-    if (globalScope[elementKey]) {
-      return globalScope[elementKey]
+    if (elementMap[elementKey]) {
+      return elementMap[elementKey]
     }
 
-    globalScope[elementKey] = document.createElement('div')
-    globalScope[elementKey].setAttribute('data-portal', '')
+    elementMap[elementKey] = document.createElement('div')
+    elementMap[elementKey].setAttribute('data-portal', '')
 
-    document.body.appendChild(globalScope[elementKey])
+    document.body.appendChild(elementMap[elementKey])
 
-    return globalScope[elementKey]
+    return elementMap[elementKey]
   },
 }
 
-export const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)
+export const PortalContext: Context<PortalContextValue> =
+  createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)

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

@@ -1,17 +1,11 @@
-import {useMemo, useRef, useSyncExternalStore} from 'react'
+import {type ReactNode, useContext, useMemo, useRef, useSyncExternalStore} from 'react'
 
 import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
+import type {PortalContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface PortalProviderProps {
-  /**
-   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
-   */
-  boundaryElement?: HTMLElement | null
-  children: React.ReactNode
+  children: ReactNode
   element?: HTMLElement | null
   /**
    * @beta
@@ -19,32 +13,29 @@ export interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/**
- * @public
- */
+/** @public */
 export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
+  const {children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
+  const parentPortal = useContext(PortalContext)
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
-    () => document.body,
+    () => elements?.['default'] ?? (parentPortal.element || document.body),
     () => null,
   )
 
   const value: PortalContextValue = useMemo(() => {
     return {
       version: 0.0,
-      boundaryElement: boundaryElement || null,
+      boundaryElement: null,
       element: element || fallbackElement,
       elements,
     }
-  }, [boundaryElement, element, elements, fallbackElement])
+  }, [element, elements, fallbackElement])
 
   return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
 }
 
-PortalProvider.displayName = 'PortalProvider'
-
 const emptySubscribe = () => () => {}
 
 /**

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

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface PortalContextValue {
   version: 0.0
   boundaryElement: HTMLElement | null

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

@@ -2,11 +2,9 @@ import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
 import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
+import type {PortalContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function usePortal(): PortalContextValue {
   const value = useContext(PortalContext)
 

package/src/css/_assign.ts

@@ -0,0 +1,3 @@
+export function _assign<T extends object, U extends object>(target: T, source: U): T & U {
+  return Object.assign(target, source)
+}

package/src/css/_composeClassNames.ts

@@ -0,0 +1,12 @@
+import {_getClassNames} from './_getClassNames'
+
+/** @internal */
+export function _composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  return unique(_getClassNames(...classNames)).join(' ') || undefined
+}
+
+function unique<T>(array: T[]): T[] {
+  return Array.from(new Set(array))
+}

package/src/css/_fromEntries.ts

@@ -0,0 +1,3 @@
+export function _fromEntries<K extends string | number | symbol, T>(entries: [K, T][]) {
+  return Object.fromEntries(entries) as Record<K, T>
+}

package/src/css/_getClassNames.ts

@@ -0,0 +1,9 @@
+/** @internal */
+export function _getClassNames(...classNames: Array<string | false | undefined>): string[] {
+  return classNames
+    .map((n) => typeof n === 'string' && n.trim())
+    .filter(Boolean)
+    .join(' ')
+    .split(' ')
+    .filter(Boolean)
+}

package/src/css/_responsiveClassName.ts

@@ -0,0 +1,45 @@
+// import {MEDIA} from './constants'
+import {BREAKPOINTS} from './constants'
+import type {ResponsiveProp, ResponsiveRuleOptions} from './types'
+
+export function _responsiveClassName<T extends string | number>(
+  rules: ResponsiveRuleOptions<T>,
+  _value: ResponsiveProp<T | boolean> | T | undefined,
+  options?: {
+    valueWhenTrue: T
+  },
+): string | undefined {
+  let value = _value
+
+  if (value === undefined) {
+    return undefined
+  }
+
+  if (typeof value === 'boolean') {
+    if (value && options?.valueWhenTrue) {
+      value = options.valueWhenTrue
+    } else {
+      return undefined
+    }
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    return rules[value]?.[0]
+  }
+
+  const classNames: string[] = []
+
+  for (const _index of Object.keys(BREAKPOINTS)) {
+    const index = Number(_index) as keyof typeof BREAKPOINTS
+
+    const valueAtIndex = value[index]
+
+    if (valueAtIndex !== undefined && valueAtIndex !== null && typeof valueAtIndex !== 'boolean') {
+      const rule = rules[valueAtIndex]
+
+      classNames.push(rule[index])
+    }
+  }
+
+  return classNames.join(' ') || undefined
+}