@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

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

@@ -0,0 +1,17 @@
+import {Code, useLayer} from '@sanity/ui'
+
+export function LayerDebugInfo(props: {id?: string}) {
+  const {id} = props
+  const layer = useLayer()
+
+  return (
+    <Code id={id} size={1}>
+      {[
+        //
+        `isTopLayer=${layer.isTopLayer}`,
+        `size=${layer.size}`,
+        `zIndex=${layer.zIndex}`,
+      ].join('\n')}
+    </Code>
+  )
+}

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

@@ -0,0 +1,109 @@
+/** @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/portal/__workshop__/named.tsx

@@ -0,0 +1,61 @@
+import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
+import {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="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/portal.test.tsx

@@ -0,0 +1,104 @@
+/** @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/virtualList/virtualList.tsx

@@ -0,0 +1,167 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
+import styled from 'styled-components'
+import {_isScrollable} from '../../helpers'
+import {useForwardedRef} from '../../hooks'
+import {_ResizeObserver} from '../../observers'
+import {StackProps} from '../../primitives'
+import {useTheme_v2} from '../../theme'
+
+/**
+ * @beta
+ */
+export interface VirtualListChangeOpts {
+  fromIndex: number
+  gap: number
+  itemHeight: number
+  scrollHeight: number
+  scrollTop: number
+  toIndex: number
+}
+
+/**
+ * @beta
+ */
+export interface VirtualListProps<Item = any> {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  gap?: number
+  getItemKey?: (item: Item, itemIndex: number) => string
+  items?: Item[]
+  onChange?: (opts: VirtualListChangeOpts) => void
+  renderItem?: (item: Item) => React.ReactNode
+}
+
+const Root = styled.div`
+  position: relative;
+`
+
+const ItemWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+`
+
+/**
+ * @beta
+ */
+export const VirtualList = forwardRef(function VirtualList(
+  props: VirtualListProps &
+    StackProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+): React.ReactElement {
+  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
+  const {space} = useTheme_v2()
+  const forwardedRef = useForwardedRef(ref)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const [itemHeight, setItemHeight] = useState(-1)
+
+  useEffect(() => {
+    if (!wrapperRef.current) return
+
+    const firstElement = wrapperRef.current.firstChild
+
+    if (firstElement instanceof HTMLElement) {
+      setItemHeight(firstElement.offsetHeight)
+    }
+  }, [renderItem])
+
+  useEffect(() => {
+    if (!forwardedRef.current) return
+
+    let _scrollEl = forwardedRef.current.parentNode
+
+    while (_scrollEl && !_isScrollable(_scrollEl)) {
+      _scrollEl = _scrollEl.parentNode
+    }
+
+    if (_scrollEl) {
+      const scrollEl = _scrollEl
+
+      if (!(scrollEl instanceof HTMLElement)) return
+
+      const handleScroll = () => {
+        setScrollTop(scrollEl.scrollTop)
+      }
+
+      scrollEl.addEventListener('scroll', handleScroll, {passive: true})
+
+      const ro = new _ResizeObserver((entries) => {
+        setScrollHeight(entries[0].contentRect.height)
+      })
+
+      ro.observe(scrollEl)
+
+      handleScroll()
+
+      return () => {
+        scrollEl.removeEventListener('scroll', handleScroll)
+
+        ro.unobserve(scrollEl)
+        ro.disconnect()
+      }
+    }
+
+    const handleScroll = () => {
+      setScrollTop(window.scrollY)
+    }
+
+    const handleResize = () => {
+      setScrollHeight(window.innerHeight)
+    }
+
+    window.addEventListener('scroll', handleScroll, {passive: true})
+    window.addEventListener('resize', handleResize)
+
+    setScrollHeight(window.innerHeight)
+
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [forwardedRef])
+
+  const len = items.length
+  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
+  const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
+  const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
+
+  useEffect(() => {
+    if (!onChange) return
+    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
+  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
+
+  const children = useMemo(() => {
+    if (!renderItem || items.length === 0) return null
+
+    if (itemHeight === -1) {
+      return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
+    }
+
+    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex
+      const node = renderItem(item)
+      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+      return (
+        <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
+          {node}
+        </ItemWrapper>
+      )
+    })
+  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
+
+  const wrapperStyle = useMemo(() => ({height}), [height])
+
+  return (
+    <Root as={as} data-ui="VirtualList" {...restProps} ref={forwardedRef}>
+      <div ref={wrapperRef} style={wrapperStyle}>
+        {children}
+      </div>
+    </Root>
+  )
+})

package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts

@@ -0,0 +1,76 @@
+import {
+  ThemeColorBase,
+  ThemeColorMuted,
+  ThemeColorSelectable,
+  ThemeColorSelectableStates,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createSelectableTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorSelectable {
+  return {
+    default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
+    primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),
+    positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),
+    caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),
+    critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical'),
+  }
+}
+
+function _createSelectableStates(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
+): ThemeColorSelectableStates {
+  return {
+    enabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'enabled',
+      tone,
+    }),
+    hovered: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'hovered',
+      tone,
+    }),
+    pressed: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'pressed',
+      tone,
+    }),
+    selected: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'selected',
+      tone,
+    }),
+    disabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'disabled',
+      tone,
+    }),
+  }
+}

package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts

@@ -0,0 +1,54 @@
+import {ThemeColorBase, ThemeColorSolid, ThemeColorName} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createSolidTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName,
+): ThemeColorSolid {
+  return {
+    default: {
+      enabled: opts.solid({base, dark, tone: 'default', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'default', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'default', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'default', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'default', name, state: 'selected'}),
+    },
+    transparent: {
+      enabled: opts.solid({base, dark, tone: 'transparent', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'transparent', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'transparent', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'transparent', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'transparent', name, state: 'selected'}),
+    },
+    primary: {
+      enabled: opts.solid({base, dark, tone: 'primary', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'primary', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'primary', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'primary', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'primary', name, state: 'selected'}),
+    },
+    positive: {
+      enabled: opts.solid({base, dark, tone: 'positive', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'positive', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'positive', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'positive', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'positive', name, state: 'selected'}),
+    },
+    caution: {
+      enabled: opts.solid({base, dark, tone: 'caution', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'caution', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'caution', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'caution', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'caution', name, state: 'selected'}),
+    },
+    critical: {
+      enabled: opts.solid({base, dark, tone: 'critical', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'critical', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'critical', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'critical', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'critical', name, state: 'selected'}),
+    },
+  }
+}

package/src/theme/build/_deprecated/color/button/createButtonModes.ts

@@ -0,0 +1,22 @@
+import {
+  ThemeColorBase,
+  ThemeColorButton,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+import {createButtonTones} from './createButtonTones'
+
+export function createButtonModes(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorButton {
+  return {
+    default: createButtonTones(opts, base, dark, solid, muted, 'default'),
+    ghost: createButtonTones(opts, base, dark, solid, muted, 'ghost'),
+    bleed: createButtonTones(opts, base, dark, solid, muted, 'bleed'),
+  }
+}

package/src/theme/build/_deprecated/color/button/createButtonTones.ts

@@ -0,0 +1,55 @@
+import {
+  ThemeColorBase,
+  ThemeColorButtonModeKey,
+  ThemeColorButtonTones,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createButtonTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  mode: ThemeColorButtonModeKey,
+): ThemeColorButtonTones {
+  return {
+    default: opts.button({
+      base,
+      dark,
+      solid: solid.default,
+      muted: muted.default,
+      mode,
+    }),
+    primary: opts.button({
+      base,
+      dark,
+      solid: solid.primary,
+      muted: muted.primary,
+      mode,
+    }),
+    positive: opts.button({
+      base,
+      dark,
+      solid: solid.positive,
+      muted: muted.positive,
+      mode,
+    }),
+    caution: opts.button({
+      base,
+      dark,
+      solid: solid.caution,
+      muted: muted.caution,
+      mode,
+    }),
+    critical: opts.button({
+      base,
+      dark,
+      solid: solid.critical,
+      muted: muted.critical,
+      mode,
+    }),
+  }
+}