@sanity/ui 0.37.3 → 0.37.4

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

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

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

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

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

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

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

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

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

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

package/src/utils/layer/useLayer.ts

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

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

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

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

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

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

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

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

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

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

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

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

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