@sanity/ui 4.0.0-v4.1 → 4.0.1

package/src/core/utils/boundaryElement/__workshop__/Plain.tsx

@@ -1,19 +0,0 @@
-import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
-import {useState} from 'react'
-
-export default function PlainStory(): React.JSX.Element {
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Card padding={7} ref={setBoundaryElement}>
-      <BoundaryElementProvider element={boundaryElement}>
-        <Tooltip
-          content={<Text size={1}>Test aldsakm alkdmal dmalskdm alkdmlakds</Text>}
-          placement="top"
-        >
-          <Button text={<>Hover me</>} />
-        </Tooltip>
-      </BoundaryElementProvider>
-    </Card>
-  )
-}

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

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

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

@@ -1,5 +0,0 @@
-/** @public */
-export interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
-}

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

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
-
-const DEFAULT_VALUE: BoundaryElementContextValue = {
-  version: 0.0,
-  element: null,
-}
-
-/** @public */
-export function useBoundaryElement(): BoundaryElementContextValue {
-  const value = useContext(BoundaryElementContext)
-
-  // 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 (value && (!isRecord(value) || value.version !== 0.0)) {
-    throw new Error('useBoundaryElement(): the context value is not compatible')
-  }
-
-  return value || DEFAULT_VALUE
-}

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

@@ -1,75 +0,0 @@
-import {BREAKPOINTS} from '@sanity/ui/css'
-import {useImperativeHandle, useMemo, useState} from 'react'
-
-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 type ElementQueryOwnProps = {
-  media?: number[]
-}
-
-/** @beta */
-export type ElementQueryElementType = 'div' | ComponentType
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-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(breakpoints, width)
-
-    return eq.length ? eq.join(' ') : undefined
-  }, [breakpoints, width])
-
-  const min = useMemo(() => {
-    const eq = findMinBreakpoints(breakpoints, width)
-
-    return eq.length ? eq.join(' ') : undefined
-  }, [breakpoints, width])
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
-    element,
-  ])
-
-  return (
-    <Element data-ui="ElementQuery" {...rest} data-eq-max={max} data-eq-min={min} ref={setElement}>
-      {children}
-    </Element>
-  )
-}

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

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

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

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'utils/elementQuery',
-  title: 'ElementQuery',
-  stories: [
-    {
-      name: 'custom-media',
-      title: 'Custom media',
-      component: lazy(() => import('./CustomMedia')),
-    },
-  ],
-}
-
-export default scope

package/src/core/utils/elementQuery/helpers.ts

@@ -1,27 +0,0 @@
-export function findMaxBreakpoints(media: number[], width: number): number[] {
-  const ret: number[] = []
-
-  for (let i = 0; i < media.length; i += 1) {
-    const bp = media[i]
-
-    if (bp > width) {
-      ret.push(i)
-    }
-  }
-
-  return ret
-}
-
-export function findMinBreakpoints(media: number[], width: number): number[] {
-  const ret: number[] = []
-
-  for (let i = 0; i < media.length; i += 1) {
-    const bp = media[i]
-
-    if (bp <= width) {
-      ret.push(i)
-    }
-  }
-
-  return ret
-}

package/src/core/utils/getElementRef.ts

@@ -1,29 +0,0 @@
-/* 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): React.Ref<unknown> | undefined {
-  // React <=18 in DEV
-  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
-  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return (element as any).ref
-  }
-
-  // React 19 in DEV
-  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
-  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return (element.props as {ref?: React.Ref<unknown>}).ref
-  }
-
-  // Not DEV
-  return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref
-}

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

@@ -1,105 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {PortalContext} from './PortalContext'
-import type {PortalContextValue} from './types'
-import {usePortal} from './usePortal'
-
-describe('utils/portal', () => {
-  describe('usePortal', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootPortal = usePortal()
-
-        log(rootPortal)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: PortalContextValue = {
-          version: 0.0,
-          boundaryElement: null,
-          element: null,
-        }
-
-        return (
-          <PortalContext.Provider value={value}>
-            <Debug />
-          </PortalContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].boundaryElement).toBe(null)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          usePortal()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <PortalContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </PortalContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('usePortal(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          usePortal()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-
-        return (
-          <PortalContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </PortalContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'usePortal(): the context value is not compatible',
-      )
-    })
-  })
-})

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

@@ -1,36 +0,0 @@
-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,37 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {globalScope} from '../../lib/globalScope'
-import type {PortalContextValue} from './types'
-
-const key = '@sanity/ui/v3/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/core/utils/portal/PortalProvider.tsx

@@ -1,70 +0,0 @@
-import {type ReactNode, useContext, useMemo, useRef, 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: elementsProp} = props
-  const elements = useUnique(elementsProp)
-  const parentPortal = useContext(PortalContext)
-  const fallbackElement = useSyncExternalStore(
-    emptySubscribe,
-    () => elements?.['default'] ?? (parentPortal.element || document.body),
-    () => null,
-  )
-
-  const value: PortalContextValue = useMemo(() => {
-    return {
-      version: 0.0,
-      boundaryElement: null,
-      element: element || fallbackElement,
-      elements,
-    }
-  }, [element, elements, fallbackElement])
-
-  return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
-}
-
-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/utils/portal/__workshop__/Named.tsx

@@ -1,63 +0,0 @@
-import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useMemo, useState} from 'react'
-
-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}>
-      <Container width={1}>
-        <Card height="fill" padding={4}>
-          <Stack gap={2}>
-            <Text size={1} weight="medium">
-              Portal 1
-            </Text>
-            <Card border padding={3} ref={setPortal1Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack gap={2}>
-            <Text size={1} weight="medium">
-              Portal 2
-            </Text>
-            <Card border padding={3} ref={setPortal2Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack gap={2}>
-            <Text size={1} weight="medium">
-              Portal 3
-            </Text>
-            <Card border padding={3} ref={setPortal3Element} />
-          </Stack>
-        </Card>
-      </Container>
-
-      <Portal __unstable_name="portal1">
-        <Text>Portal 1</Text>
-      </Portal>
-
-      <Portal __unstable_name="portal2">
-        <Text>Portal 2</Text>
-      </Portal>
-
-      <Portal __unstable_name="portal3">
-        <Text>Portal 3A</Text>
-      </Portal>
-
-      <Portal __unstable_name="portal3">
-        <Text>Portal 3B</Text>
-      </Portal>
-    </PortalProvider>
-  )
-}

package/src/core/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/core/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/core/utils/portal/usePortal.ts

@@ -1,23 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './PortalContext'
-import type {PortalContextValue} from './types'
-
-/** @public */
-export function usePortal(): PortalContextValue {
-  const value = useContext(PortalContext)
-
-  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')
-  }
-
-  return value
-}

package/src/css/_assign.ts

@@ -1,3 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/** @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)
-}