@sanity/ui 0.37.2 → 0.37.3

package/src/utils/layer/__workshop__/plain.tsx

@@ -1,87 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
-import {LayerDebugInfo} from './_debug'
-
-export default function PlainStory() {
-  const [open, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <LayerProvider>
-      <Card radius={2}>
-        <Box padding={3}>
-          <Text>
-            <strong>Root layer</strong>
-          </Text>
-        </Box>
-        <Box padding={3}>
-          <Stack space={3}>
-            <LayerDebugInfo />
-            <Button mode="ghost" onClick={handleOpen} text="Open layer 1" />
-            {open && (
-              <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                <Layer1 onClose={handleClose} />
-              </Layer>
-            )}
-          </Stack>
-        </Box>
-      </Card>
-    </LayerProvider>
-  )
-}
-
-function Layer1({onClose}: {onClose: () => void}) {
-  const [open, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <Card radius={2} shadow={3}>
-      <Flex>
-        <Box flex={1} padding={3}>
-          <Text>
-            <strong>Layer 1</strong>
-          </Text>
-        </Box>
-        <Box padding={1}>
-          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
-        </Box>
-      </Flex>
-      <Box padding={3}>
-        <Stack space={3}>
-          <LayerDebugInfo />
-          <Button mode="ghost" onClick={handleOpen} text="Open layer 2" />
-          {open && (
-            <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-              <Layer2 onClose={handleClose} />
-            </Layer>
-          )}
-        </Stack>
-      </Box>
-    </Card>
-  )
-}
-
-function Layer2({onClose}: {onClose: () => void}) {
-  return (
-    <Card radius={2} shadow={3}>
-      <Flex>
-        <Box flex={1} padding={3}>
-          <Text>
-            <strong>Layer 2</strong>
-          </Text>
-        </Box>
-        <Box padding={1}>
-          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
-        </Box>
-      </Flex>
-      <Box padding={3}>
-        <Stack space={3}>
-          <LayerDebugInfo />
-        </Stack>
-      </Box>
-    </Card>
-  )
-}

package/src/utils/layer/__workshop__/responsiveZOffset.tsx

@@ -1,13 +0,0 @@
-import {Card, Layer} from '@sanity/ui'
-import React from 'react'
-import {LayerDebugInfo} from './_debug'
-
-export default function ResponsiveZOffsetStory() {
-  return (
-    <Layer id="responsive-layer" zOffset={[1, 2, 3, 4, 5, 6, 7]}>
-      <Card padding={[1, 2, 3, 4, 5, 6, 7]} shadow={1}>
-        <LayerDebugInfo />
-      </Card>
-    </Layer>
-  )
-}

package/src/utils/layer/index.ts

@@ -1,4 +0,0 @@
-export * from './useLayer'
-export * from './layer'
-export * from './layerProvider'
-export * from './types'

package/src/utils/layer/layer.test.tsx

@@ -1,106 +0,0 @@
-import React from 'react'
-import {render} from '../../../test'
-import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
-import {useLayer} from './useLayer'
-
-describe('utils/layer', () => {
-  describe('useLayer', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootLayer = useLayer()
-
-        log(rootLayer)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: LayerContextValue = {
-          version: 0.0,
-          isTopLayer: true,
-          registerChild: () => () => undefined,
-          size: 0,
-          zIndex: 0,
-        }
-
-        return (
-          <LayerContext.Provider value={value}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].isTopLayer).toBe(true)
-      expect(typeof log.mock.calls[0][0].registerChild).toBe('function')
-      expect(log.mock.calls[0][0].size).toBe(0)
-      expect(log.mock.calls[0][0].zIndex).toBe(0)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <LayerContext.Provider value={value as any}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useLayer(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } 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 (
-          <LayerContext.Provider value={value as any}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useLayer(): the context value is not compatible'
-      )
-    })
-  })
-})

package/src/utils/layer/layer.tsx

@@ -1,53 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {EMPTY_RECORD} from '../../constants'
-import {LayerProvider} from './layerProvider'
-import {useLayer} from './useLayer'
-
-/**
- * @public
- */
-export interface LayerProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  zOffset?: number | number[]
-}
-
-interface LayerChildrenProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-}
-
-const Root = styled.div`
-  position: relative;
-`
-
-const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const {children, style = EMPTY_RECORD, ...restProps} = props
-  const {zIndex} = useLayer()
-
-  return (
-    <Root {...restProps} ref={ref} style={{...style, zIndex}}>
-      {children}
-    </Root>
-  )
-})
-
-/**
- * @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>
-  )
-})

package/src/utils/layer/layerContext.ts

@@ -1,9 +0,0 @@
-import {createContext} from 'react'
-import {globalScope} from '../../lib/globalScope'
-import {LayerContextValue} from './types'
-
-const key = Symbol.for('@sanity/ui/context/layer')
-
-globalScope[key] = globalScope[key] || createContext<LayerContextValue | null>(null)
-
-export const LayerContext: React.Context<LayerContextValue | null> = globalScope[key]

package/src/utils/layer/layerProvider.tsx

@@ -1,46 +0,0 @@
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useResponsiveProp} from '../../hooks'
-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.ReactElement {
-  const {children, zOffset: zOffsetProp = 0} = props
-  const parent = useContext(LayerContext)
-  const zOffset = useResponsiveProp(zOffsetProp)
-  const maxMediaIndex = zOffset.length - 1
-  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
-  const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]
-  const [size, setSize] = useState(0)
-
-  const registerChild = useCallback(() => {
-    setSize((v) => v + 1)
-
-    return () => setSize((v) => v - 1)
-  }, [])
-
-  const parentRegisterChild = parent?.registerChild
-
-  useEffect(() => {
-    if (!parentRegisterChild) return
-
-    return parentRegisterChild()
-  }, [parentRegisterChild])
-
-  const value: LayerContextValue = useMemo(
-    () => ({version: 0.0, isTopLayer: size === 0, registerChild, size, zIndex}),
-    [size, registerChild, zIndex]
-  )
-
-  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
-}

package/src/utils/layer/types.ts

@@ -1,10 +0,0 @@
-/**
- * @public
- */
-export interface LayerContextValue {
-  version: 0.0
-  isTopLayer: boolean
-  registerChild: () => () => void
-  size: number
-  zIndex: number
-}

package/src/utils/layer/useLayer.ts

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-import {isRecord} from '../../lib/isRecord'
-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')
-  }
-
-  // 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('useLayer(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/utils/portal/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

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

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

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

@@ -1,61 +0,0 @@
-import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import React, {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)
-
-  return (
-    <PortalProvider
-      __unstable_elements={{
-        portal1: portal1Element,
-        portal2: portal2Element,
-        portal3: portal3Element,
-      }}
-    >
-      <Container width={1}>
-        <Card height="fill" padding={4}>
-          <Stack space={2}>
-            <Text size={1} weight="semibold">
-              Portal 1
-            </Text>
-            <Card border padding={3} ref={setPortal1Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack space={2}>
-            <Text size={1} weight="semibold">
-              Portal 2
-            </Text>
-            <Card border padding={3} ref={setPortal2Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack space={2}>
-            <Text size={1} weight="semibold">
-              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/utils/portal/index.ts

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

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

@@ -1,102 +0,0 @@
-import React from 'react'
-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/utils/portal/portal.ts

@@ -1,30 +0,0 @@
-import React from 'react'
-import ReactDOM 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 ReactDOM.createPortal(children, portalElement)
-}

package/src/utils/portal/portalContext.ts

@@ -1,33 +0,0 @@
-import {createContext} from 'react'
-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')
-
-globalScope[elementKey] = null
-
-export const defaultContextValue: PortalContextValue = {
-  version: 0.0,
-  boundaryElement: null,
-  get element() {
-    if (typeof window === '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]
-  },
-}
-
-globalScope[key] = globalScope[key] || createContext<PortalContextValue>(defaultContextValue)
-
-export const PortalContext: React.Context<PortalContextValue> = globalScope[key]

package/src/utils/portal/portalProvider.tsx

@@ -1,41 +0,0 @@
-import React, {useMemo} from 'react'
-import {useUnique} from '../../hooks/_internal'
-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>
-}
-
-const __BROWSER__ = typeof window !== 'undefined'
-
-/**
- * @public
- */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
-
-  const value: PortalContextValue = useMemo(() => {
-    return {
-      version: 0.0,
-      boundaryElement: boundaryElement || null,
-      element: element || (__BROWSER__ && document.body) || null,
-      elements,
-    }
-  }, [boundaryElement, element, elements])
-
-  return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
-}

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

@@ -1,24 +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
-}