@sanity/ui 3.0.0-static.1 → 3.0.0-static.10

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

@@ -1,48 +0,0 @@
-import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
-import {LayerDebugInfo} from './_debug'
-
-export default function MultipleRootsStory() {
-  return (
-    <Stack space={4}>
-      <LayerProvider zOffset={100}>
-        <Card padding={3} shadow={1}>
-          <Stack space={3}>
-            <LayerDebugInfo />
-            <Layer>
-              <Card padding={3} shadow={1}>
-                <Stack space={3}>
-                  <LayerDebugInfo />
-                  <Layer>
-                    <Card padding={3} shadow={1}>
-                      <LayerDebugInfo />
-                    </Card>
-                  </Layer>
-                </Stack>
-              </Card>
-            </Layer>
-          </Stack>
-        </Card>
-      </LayerProvider>
-
-      <LayerProvider zOffset={200}>
-        <Card as={Layer} padding={3} shadow={5} style={{top: -50, left: 30}}>
-          <Stack space={3}>
-            <LayerDebugInfo />
-            <Layer>
-              <Card padding={3} shadow={1}>
-                <Stack space={3}>
-                  <LayerDebugInfo />
-                  <Layer>
-                    <Card padding={3} shadow={1}>
-                      <LayerDebugInfo />
-                    </Card>
-                  </Layer>
-                </Stack>
-              </Card>
-            </Layer>
-          </Stack>
-        </Card>
-      </LayerProvider>
-    </Stack>
-  )
-}

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

@@ -1,97 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-import {LayerDebugInfo} from './_debug'
-
-export default function PlainStory() {
-  return (
-    <Box padding={3}>
-      <Root />
-      <Root />
-      <Root />
-    </Box>
-  )
-}
-
-function Root() {
-  const [open, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <LayerProvider>
-      <Card radius={2} shadow={1}>
-        <Box padding={3}>
-          <Text>
-            <strong>Root layer</strong>
-          </Text>
-        </Box>
-        <Box padding={3}>
-          <Stack space={3}>
-            <LayerDebugInfo id="layer-debug-info-1" />
-            <Button id="open-layer-1" 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 id="open-layer-2" 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/core/utils/layer/__workshop__/responsiveZOffset.tsx

@@ -1,12 +0,0 @@
-import {Card, Layer} from '@sanity/ui'
-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/core/utils/layer/index.ts

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

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

@@ -1,109 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-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,
-          level: 0,
-          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/core/utils/layer/layer.tsx

@@ -1,108 +0,0 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-// import {styled} from '../../lib/styled'
-import {Box, BoxProps} from '../../primitives'
-import {LayerProvider} from './layerProvider'
-import {useLayer} from './useLayer'
-
-/**
- * @public
- */
-export interface LayerProps extends BoxProps {
-  // as?: React.ElementType | keyof 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 extends BoxProps {
-  // as?: React.ElementType | keyof JSX.IntrinsicElements
-  onActivate?: LayerProps['onActivate']
-}
-
-// const Root = styled.div({position: 'relative'})
-
-const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
-  forwardedRef: React.Ref<HTMLDivElement>,
-) {
-  const {
-    children,
-    onActivate,
-    onFocus,
-    position = 'relative',
-    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 (
-    <Box
-      data-ui="Layer"
-      {...restProps}
-      onFocus={handleFocus}
-      position={position}
-      ref={ref}
-      style={{...style, zIndex}}
-    >
-      {children}
-    </Box>
-  )
-})
-
-/**
- * @public
- */
-export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'rows' | 'width' | 'wrap'>,
-  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/layerProvider.tsx

@@ -1,109 +0,0 @@
-import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useArrayProp} from '../../hooks'
-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.ReactElement {
-  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 = useArrayProp(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],
-  )
-
-  // 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,25 +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__/.eslintrc

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

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

@@ -1,104 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-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,31 +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'