@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/core/utils/layer/layer.tsx

@@ -1,98 +0,0 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-import {LayerProvider} from './layerProvider'
-import {useLayer} from './useLayer'
-
-/**
- * @public
- */
-export interface LayerProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
-  onActivate?: (props: {activeElement: HTMLElement | null}) => void
-  zOffset?: number | number[]
-}
-
-interface LayerChildrenProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  onActivate?: LayerProps['onActivate']
-}
-
-const StyledLayer = styled.div({position: 'relative'})
-
-const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  forwardedRef: React.Ref<HTMLDivElement>,
-) {
-  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
-  const {zIndex, isTopLayer} = useLayer()
-  const lastFocusedRef = useRef<HTMLElement | null>(null)
-  const ref = useRef<HTMLDivElement | null>(null)
-  const isTopLayerRef = useRef<boolean>(isTopLayer)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  // When the layer very first mounts, it will be the top layer, but we don't want to fire
-  // the callback in that case. We use a ref to track the previous value of isTopLayer to
-  // determine if the layer has become the top layer since the last render.
-  useEffect(() => {
-    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer
-
-    if (becameTopLayer) {
-      onActivate?.({activeElement: lastFocusedRef.current})
-    }
-
-    isTopLayerRef.current = isTopLayer
-  }, [isTopLayer, onActivate])
-
-  const handleFocus = useCallback(
-    (event: FocusEvent<HTMLDivElement, Element>) => {
-      // Call the user-provided onFocus handler if any
-      onFocus?.(event)
-
-      const rootElement = ref.current
-      const target = document.activeElement
-
-      if (!isTopLayer || !rootElement || !target) return
-
-      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
-        lastFocusedRef.current = target
-      }
-    },
-    [isTopLayer, onFocus],
-  )
-
-  return (
-    <StyledLayer
-      {...restProps}
-      data-ui="Layer"
-      onFocus={handleFocus}
-      ref={ref}
-      style={{...style, zIndex}}
-    >
-      {children}
-    </StyledLayer>
-  )
-})
-
-/**
- * @public
- */
-export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {children, zOffset = 1, ...restProps} = props
-
-  return (
-    <LayerProvider zOffset={zOffset}>
-      <LayerChildren {...restProps} ref={ref}>
-        {children}
-      </LayerChildren>
-    </LayerProvider>
-  )
-})
-Layer.displayName = 'ForwardRef(Layer)'

package/src/core/utils/layer/layerContext.ts

@@ -1,7 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {LayerContextValue} from './types'
-
-export const LayerContext = createGlobalScopedContext<LayerContextValue | null>(
-  '@sanity/ui/context/layer',
-  null,
-)

package/src/core/utils/layer/layerProvider.tsx

@@ -1,111 +0,0 @@
-import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-
-import {useMediaIndex} from '../../hooks'
-import {_getArrayProp} from '../../styles'
-import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
-
-/**
- * @public
- */
-export interface LayerProviderProps {
-  children?: React.ReactNode
-  zOffset?: number | number[]
-}
-
-/**
- * @public
- */
-export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
-  const {children, zOffset: zOffsetProp = 0} = props
-
-  // Get parent context values
-  const parentContextValue = useContext(LayerContext)
-  const parent = parentContextValue && getLayerContext(parentContextValue)
-  const parentRegisterChild = parent?.registerChild
-  const parentLevel = parent?.level ?? 0
-
-  // Get level
-  const level = parentLevel + 1
-
-  // Get z-index offset
-  const zOffset = _getArrayProp(zOffsetProp)
-
-  // Get responsive z-index value
-  const maxMediaIndex = zOffset.length - 1
-  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
-  const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]
-
-  // A state value that is used to keep track of the number of child layers on each level
-  const [, setChildLayers] = useState<Record<number, number>>({})
-
-  // A state value that is used to keep track of the number of child levels
-  const [size, setSize] = useState(0)
-
-  const isTopLayer = size === 0
-
-  const registerChild = useCallback(
-    (childLevel?: number) => {
-      // Register child layers to the parent layer
-      const parentDispose = parentRegisterChild?.(childLevel)
-
-      if (childLevel !== undefined) {
-        setChildLayers((state) => {
-          const prevLen = state[childLevel] ?? 0
-          const nextState = {...state, [childLevel]: prevLen + 1}
-
-          setSize(Object.keys(nextState).length)
-
-          return nextState
-        })
-      } else {
-        // Legacy behavior: if no child level is provided, increment the size by 1
-        setSize((v) => v + 1)
-      }
-
-      return () => {
-        if (childLevel !== undefined) {
-          setChildLayers((state) => {
-            const nextState = {...state}
-
-            if (nextState[childLevel] === 1) {
-              delete nextState[childLevel]
-
-              setSize(Object.keys(nextState).length)
-            } else {
-              nextState[childLevel] -= 1
-            }
-
-            return nextState
-          })
-        } else {
-          // Legacy behavior: if no child level is provided, decrement the size by 1
-          setSize((v) => v - 1)
-        }
-
-        parentDispose?.()
-      }
-    },
-    [parentRegisterChild, setSize, setChildLayers],
-  )
-
-  // Register this layer on mount
-  useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
-
-  const value: LayerContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      isTopLayer,
-      level,
-      registerChild,
-      size,
-      zIndex,
-    }),
-    [isTopLayer, level, registerChild, size, zIndex],
-  )
-
-  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
-}
-
-LayerProvider.displayName = 'LayerProvider'

package/src/core/utils/layer/useLayer.ts

@@ -1,26 +0,0 @@
-import {useContext} from 'react'
-
-import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
-
-/**
- * @public
- */
-export function useLayer(): LayerContextValue {
-  const value = useContext(LayerContext)
-
-  if (!value) {
-    throw new Error('useLayer(): missing context value')
-  }
-
-  try {
-    return getLayerContext(value)
-  } catch (err) {
-    if (err instanceof Error) {
-      throw new Error(`useLayer(): ${err.message}`)
-    } else {
-      throw new Error(`useLayer(): ${err}`)
-    }
-  }
-}

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

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

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() {
-  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 space={2}>
-            <Text size={1} weight="medium">
-              Portal 1
-            </Text>
-            <Card border padding={3} ref={setPortal1Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack space={2}>
-            <Text size={1} weight="medium">
-              Portal 2
-            </Text>
-            <Card border padding={3} ref={setPortal2Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack space={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/index.ts

@@ -1,4 +0,0 @@
-export * from './portal'
-export * from './portalProvider'
-export * from './types'
-export * from './usePortal'

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

@@ -1,103 +0,0 @@
-/** @jest-environment jsdom */
-
-import {render} from '../../../../test'
-import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
-import {usePortal} from './usePortal'
-
-describe('utils/portal', () => {
-  describe('usePortal', () => {
-    it('should get context value', async () => {
-      const log = jest.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 = jest.fn()
-
-      function Debug() {
-        try {
-          usePortal()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <PortalContext.Provider value={value as any}>
-            <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 = jest.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
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          <PortalContext.Provider value={value as any}>
-            <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.ts

@@ -1,32 +0,0 @@
-import {createPortal} from 'react-dom'
-
-import {usePortal} from './usePortal'
-
-/**
- * @public
- */
-export interface PortalProps {
-  children: React.ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
-}
-
-/**
- * @public
- */
-export function Portal(props: PortalProps): React.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
-  }
-
-  return createPortal(children, portalElement)
-}
-
-Portal.displayName = 'Portal'

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

@@ -1,31 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {globalScope} from '../../lib/globalScope'
-import {PortalContextValue} from './types'
-
-const key = '@sanity/ui/context/portal'
-const elementKey = Symbol.for(`${key}/element`)
-
-globalScope[elementKey] = null
-
-export const defaultContextValue: PortalContextValue = {
-  version: 0.0,
-  boundaryElement: null,
-  get element() {
-    if (typeof document === 'undefined') {
-      return null
-    }
-
-    if (globalScope[elementKey]) {
-      return globalScope[elementKey]
-    }
-
-    globalScope[elementKey] = document.createElement('div')
-    globalScope[elementKey].setAttribute('data-portal', '')
-
-    document.body.appendChild(globalScope[elementKey])
-
-    return globalScope[elementKey]
-  },
-}
-
-export const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)

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

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

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

@@ -1,9 +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,25 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
-import {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/core/utils/spanWithTextOverflow.tsx

@@ -1,10 +0,0 @@
-import {styled} from 'styled-components'
-
-/** @internal */
-export const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`

package/src/core/utils/srOnly/index.ts

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

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,36 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-/**
- * @public
- */
-export interface SrOnlyProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  children?: React.ReactNode
-}
-
-const StyledSrOnly = styled.div`
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  overflow: hidden;
-  overflow: clip;
-`
-
-/**
- * @public
- */
-export const SrOnly = forwardRef(function SrOnly(
-  props: SrOnlyProps & Omit<React.HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {as, children} = props
-
-  return (
-    <StyledSrOnly aria-hidden as={as} data-ui="SrOnly" ref={ref}>
-      {children}
-    </StyledSrOnly>
-  )
-})
-SrOnly.displayName = 'ForwardRef(SrOnly)'

package/src/core/utils/virtualList/__workshop__/changingProps.tsx

@@ -1,36 +0,0 @@
-import {Box, Card, Text, VirtualList} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-const data = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function ChangingProps() {
-  const [expanded, setExpanded] = useState(false)
-
-  const toggleExpand = useCallback(() => setExpanded((v) => !v), [])
-
-  const renderItem = useCallback(
-    (item: {key: number}) => (
-      <Card
-        as="button"
-        onClick={toggleExpand}
-        paddingX={4}
-        paddingY={expanded ? 5 : 4}
-        radius={2}
-        tone="primary"
-      >
-        <Text>Item #{item.key}</Text>
-      </Card>
-    ),
-    [expanded, toggleExpand],
-  )
-
-  return (
-    <Box padding={4}>
-      <Box marginBottom={5}>
-        <Text size={1}>Click any item to toggle expanded view</Text>
-      </Box>
-
-      <VirtualList gap={expanded ? 4 : 2} items={data} renderItem={renderItem} />
-    </Box>
-  )
-}