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

package/src/core/components/toast/toast.test.tsx

@@ -0,0 +1,102 @@
+/** @jest-environment jsdom */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {render} from '../../../../test'
+import {ToastContext} from './toastContext'
+import {ToastContextValue} from './types'
+import {useToast} from './useToast'
+
+describe('components/toast', () => {
+  describe('useToast', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootToast = useToast()
+
+        log(rootToast)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: ToastContextValue = {
+          version: 0.0,
+          push: () => '',
+        }
+
+        return (
+          <ToastContext.Provider value={value}>
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(typeof log.mock.calls[0][0].push).toBe('function')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useToast()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <ToastContext.Provider value={value as any}>
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useToast(): missing context value')
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useToast()
+        } 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 (
+          <ToastContext.Provider value={value as any}>
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useToast(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/core/components/toast/toast.tsx

@@ -0,0 +1,95 @@
+import {CloseIcon} from '@sanity/icons'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
+import styled from 'styled-components'
+import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
+
+/**
+ * @public
+ */
+export interface ToastProps {
+  closable?: boolean
+  description?: React.ReactNode
+  onClose?: () => void
+  radius?: number | number[]
+  title?: React.ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+}
+
+const STATUS_CARD_TONE: {[key: string]: ThemeColorToneKey} = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'primary',
+}
+
+const ROLES = {
+  error: 'alert',
+  warning: 'alert',
+  success: 'alert',
+  info: 'alert',
+}
+
+const Root = styled(Card)`
+  pointer-events: all;
+`
+
+const TextBox = styled(Flex)`
+  overflow-x: auto;
+`
+
+/**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
+ * @public
+ */
+export function Toast(
+  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+): React.ReactElement {
+  const {closable, description, onClose, radius = 3, title, status, ...restProps} = props
+  const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
+  const role = status ? ROLES[status] : 'status'
+
+  return (
+    <Root
+      data-ui="Toast"
+      role={role}
+      {...restProps}
+      marginTop={3}
+      radius={radius}
+      shadow={2}
+      tone={cardTone}
+    >
+      <Flex align="flex-start">
+        <TextBox flex={1} padding={3}>
+          <Stack space={3}>
+            {title && (
+              <Text size={1} weight="medium">
+                {title}
+              </Text>
+            )}
+            {description && (
+              <Text muted size={1}>
+                {description}
+              </Text>
+            )}
+          </Stack>
+        </TextBox>
+
+        {closable && (
+          <Box padding={1}>
+            <Button
+              as="button"
+              icon={CloseIcon}
+              mode="bleed"
+              padding={2}
+              onClick={onClose}
+              style={{verticalAlign: 'top'}}
+            />
+          </Box>
+        )}
+      </Flex>
+    </Root>
+  )
+}

package/src/core/components/tree/__workshop__/tabFromElement.tsx

@@ -0,0 +1,83 @@
+import {LinkIcon} from '@sanity/icons'
+import {Box, TextInput, Tree, TreeItem, Text} from '@sanity/ui'
+import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
+import {useCallback, useState} from 'react'
+import {perfTests} from './basic.perf'
+
+export default function BasicStory() {
+  const {ref, Wrapper} = usePerfTest(perfTests[0])
+
+  const [id, setId] = useState('')
+  const [focus, setFocus] = useState('')
+
+  const handleClick = useCallback((event: React.MouseEvent) => {
+    event.preventDefault()
+
+    const testid = event.currentTarget.getAttribute('data-testid')
+
+    if (testid) setId(testid)
+  }, [])
+
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+    const elementFocus = event.target.getAttribute('data-testid')
+    if (elementFocus) setFocus(elementFocus)
+  }, [])
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Box paddingY={3}>
+        <Text muted size={1}>
+          This example is to demonstrate that when you tab from an outside element (using the
+          keyboard to navigate), you can still access the tree and tree item. Press the input
+          beneath and start tabbing / using the arrow.
+        </Text>
+      </Box>
+      <Box paddingY={3}>
+        <Text>Focus: {focus}</Text>
+      </Box>
+      <Wrapper>
+        <TextInput />
+        <Tree ref={ref} space={1} onFocus={handleFocus}>
+          <TreeItem data-testid="fruit" onClick={handleClick} expanded text="Fruit">
+            <TreeItem
+              data-testid="oranges"
+              onClick={handleClick}
+              selected={id === 'oranges'}
+              text="Oranges"
+            />
+            <TreeItem
+              data-testid="pineapples"
+              onClick={handleClick}
+              text="Pineapples"
+              selected={id === 'pineapples'}
+            />
+            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
+              <TreeItem
+                data-testid="apples/macintosh"
+                onClick={handleClick}
+                href="/apples/macintosh"
+                icon={LinkIcon}
+                text="Macintosh"
+              />
+              <TreeItem
+                data-testid="apples/granny-smith"
+                onClick={handleClick}
+                text="Granny Smith"
+              />
+              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
+            </TreeItem>
+            <TreeItem data-testid="bananas" onClick={handleClick} text="Bananas" />
+            <TreeItem data-testid="pears" onClick={handleClick} text="Pears">
+              <TreeItem data-testid="pears/anjou" onClick={handleClick} text="Anjou" />
+              <TreeItem data-testid="pears/bartlett" onClick={handleClick} text="Bartlett" />
+              <TreeItem data-testid="pears/bosc" onClick={handleClick} text="Bosc" />
+              <TreeItem data-testid="pears/concorde" onClick={handleClick} text="Concorde" />
+              <TreeItem data-testid="pears/seckel" onClick={handleClick} text="Seckel" />
+              <TreeItem data-testid="pears/starkrimson" onClick={handleClick} text="Starkrimson" />
+            </TreeItem>
+          </TreeItem>
+        </Tree>
+      </Wrapper>
+    </Box>
+  )
+}

package/src/core/components/tree/style.ts

@@ -0,0 +1,104 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+import {rem, ThemeProps} from '../../styles'
+import {_cardColorStyle} from '../../styles/card'
+
+export function treeItemRootStyle(): ReturnType<typeof css> {
+  return css`
+    &[role='none'] > [role='treeitem'] {
+      outline: none;
+      cursor: default;
+      border-radius: 3px;
+
+      background-color: var(--card-bg-color);
+      color: var(--treeitem-fg-color);
+
+      &:focus {
+        position: relative;
+      }
+    }
+
+    &[role='treeitem'] {
+      outline: none;
+
+      & > div {
+        cursor: default;
+        border-radius: 3px;
+
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
+      }
+
+      &:focus > div {
+        position: relative;
+      }
+    }
+  `
+}
+
+export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
+  const $tone = 'default'
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.selectable[$tone]
+
+  return css`
+    &[role='none'] {
+      & > [role='treeitem'] {
+        ${_cardColorStyle(color, tone.enabled)}
+      }
+
+      &[data-selected] > [role='treeitem'] {
+        ${_cardColorStyle(color, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
+          ${_cardColorStyle(color, tone.hovered)}
+        }
+
+        & > [role='treeitem']:focus {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+      }
+    }
+
+    &[role='treeitem'] {
+      & > [data-ui='TreeItem__box'] {
+        ${_cardColorStyle(color, tone.enabled)}
+      }
+
+      &[data-selected] > [data-ui='TreeItem__box'] {
+        ${_cardColorStyle(color, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+          ${_cardColorStyle(color, tone.hovered)}
+        }
+
+        &:focus > [data-ui='TreeItem__box'] {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+      }
+    }
+  `
+}
+
+export interface TreeItemBoxStyleProps {
+  $level: number
+}
+
+export function treeItemBoxStyle(
+  props: TreeItemBoxStyleProps & ThemeProps,
+): ReturnType<typeof css> {
+  const {$level} = props
+  const {space} = getTheme_v2(props.theme)
+
+  return css`
+    padding-left: ${rem(space[2] * $level)};
+
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `
+}

package/src/core/components/tree/treeItem.tsx

@@ -0,0 +1,200 @@
+import {ToggleArrowRightIcon} from '@sanity/icons'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
+import styled from 'styled-components'
+import {Box, BoxProps, Flex, Text} from '../../primitives'
+import {
+  treeItemRootStyle,
+  treeItemRootColorStyle,
+  treeItemBoxStyle,
+  TreeItemBoxStyleProps,
+} from './style'
+import {TreeContext} from './treeContext'
+import {TreeGroup} from './treeGroup'
+import {useTree} from './useTree'
+
+/**
+ * @beta
+ */
+export interface TreeItemProps {
+  expanded?: boolean
+  fontSize?: number | number[]
+  icon?: React.ElementType
+  /**
+   * Allows passing a custom element type to the link component
+   */
+  linkAs?: BoxProps['as']
+  padding?: number | number[]
+  space?: number | number[]
+  text?: React.ReactNode
+  weight?: ThemeFontWeightKey
+}
+
+const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+
+const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
+
+const ToggleArrowText = styled(Text)`
+  & > svg {
+    transition: transform 100ms;
+  }
+`
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const TreeItem = memo(function TreeItem(
+  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
+): React.ReactElement {
+  const {
+    children,
+    expanded: expandedProp = false,
+    fontSize = 1,
+    href,
+    icon,
+    id: idProp,
+    linkAs,
+    muted,
+    onClick,
+    padding = 2,
+    selected = false,
+    space = 2,
+    text,
+    weight,
+    ...restProps
+  } = props
+  const rootRef = useRef<HTMLLIElement | null>(null)
+  const treeitemRef = useRef<HTMLDivElement | null>(null)
+  const tree = useTree()
+  const {path, registerItem, setExpanded, setFocusedElement} = tree
+  const _id = useId()
+  const id = idProp || _id
+  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
+  const itemKey = itemPath.join('/')
+  const itemState = tree.state[itemKey]
+  const focused = tree.focusedElement === rootRef.current
+  const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
+  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
+  const contextValue = useMemo(
+    () => ({...tree, level: tree.level + 1, path: itemPath}),
+    [itemPath, tree],
+  )
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLLIElement>) => {
+      if (onClick) onClick(event)
+
+      const target = event.target
+
+      if (
+        target instanceof HTMLElement &&
+        (target.getAttribute('data-ui') === 'TreeItem' ||
+          target.closest('[data-ui="TreeItem__box"]'))
+      ) {
+        event.stopPropagation()
+        setExpanded(itemKey, !expanded)
+        setFocusedElement(rootRef.current)
+      }
+    },
+    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (focused && event.key === 'Enter') {
+        const el = treeitemRef.current || rootRef.current
+
+        el?.click()
+      }
+    },
+    [focused],
+  )
+
+  useEffect(() => {
+    if (!rootRef.current) return
+
+    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
+  }, [expanded, itemPath, registerItem, selected])
+
+  const content = (
+    <Flex padding={padding}>
+      <Box
+        marginRight={space}
+        style={{visibility: icon || children ? 'visible' : 'hidden', pointerEvents: 'none'}}
+      >
+        {icon && (
+          <Text muted={muted} size={fontSize} weight={weight}>
+            {createElement(icon)}
+          </Text>
+        )}
+        {!icon && (
+          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
+            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
+          </ToggleArrowText>
+        )}
+      </Box>
+      <Box flex={1}>
+        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
+          {text}
+        </Text>
+      </Box>
+    </Flex>
+  )
+
+  if (href) {
+    return (
+      <Root
+        data-selected={selected ? '' : undefined}
+        data-tree-id={id}
+        data-tree-key={itemKey}
+        data-ui="TreeItem"
+        {...restProps}
+        onClick={handleClick}
+        ref={rootRef}
+        role="none"
+      >
+        <TreeItemBox
+          $level={tree.level}
+          aria-expanded={expanded}
+          as={linkAs}
+          data-ui="TreeItem__box"
+          href={href}
+          ref={treeitemRef}
+          role="treeitem"
+          tabIndex={tabIndex}
+        >
+          {content}
+        </TreeItemBox>
+
+        <TreeContext.Provider value={contextValue}>
+          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
+        </TreeContext.Provider>
+      </Root>
+    )
+  }
+
+  return (
+    <Root
+      data-selected={selected ? '' : undefined}
+      data-ui="TreeItem"
+      data-tree-id={id}
+      data-tree-key={itemKey}
+      {...restProps}
+      aria-expanded={expanded}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      ref={rootRef}
+      role="treeitem"
+      tabIndex={tabIndex}
+    >
+      <TreeItemBox $level={tree.level} as="div" data-ui="TreeItem__box">
+        {content}
+      </TreeItemBox>
+
+      <TreeContext.Provider value={contextValue}>
+        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
+      </TreeContext.Provider>
+    </Root>
+  )
+})

package/src/core/constants.ts

@@ -0,0 +1,38 @@
+import {Transition, Variant} from 'framer-motion'
+
+/**
+ * @internal
+ */
+export const EMPTY_ARRAY: never[] = []
+
+/**
+ * @internal
+ */
+export const EMPTY_RECORD: Record<string, never> = {}
+
+/**
+ * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
+ * @internal
+ */
+export const POPOVER_MOTION_PROPS: {
+  animate: Variant
+  initial: Variant
+  exit: Variant
+  transition: Transition
+} = {
+  initial: {opacity: 0.5, scale: 0.97},
+  animate: {opacity: 1, scale: 1},
+  exit: {opacity: 0, scale: 0.97},
+  transition: {duration: 0.4, type: 'spring'},
+}
+
+/**
+ * @internal
+ * @deprecated No longer used.
+ */
+export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right',
+}

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -0,0 +1,31 @@
+import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
+import {useMemo, useState} from 'react'
+import {Grid} from '../../../primitives'
+
+export default function ExampleStory() {
+  const [element, setElement] = useState<HTMLElement | null>(null)
+  const rect = useElementRect(element)
+  const size = useMemo(() => ({width: rect?.width || 0, height: rect?.height || 0}), [rect])
+
+  return (
+    <Box padding={[3, 4, 5]}>
+      <Container width={1}>
+        <Stack space={4}>
+          <Grid columns={[1, 2, 3]}>
+            <Card ref={setElement} tone="transparent">
+              <Text>rect</Text>
+            </Card>
+          </Grid>
+
+          <div style={{height: 11}}>
+            <Card scheme="dark" style={{position: 'absolute', ...size}} />
+          </div>
+
+          <Code language="json" size={1}>
+            {JSON.stringify(size)}
+          </Code>
+        </Stack>
+      </Container>
+    </Box>
+  )
+}

package/src/core/hooks/useMediaIndex/__workshop__/test.tsx

@@ -0,0 +1,14 @@
+import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
+
+export default function TestStory() {
+  const mediaIndex = useMediaIndex()
+
+  return (
+    <Card padding={[3, 4, 5]}>
+      <Stack space={2}>
+        <Text weight="medium">The current media index is {mediaIndex}.</Text>
+        <Text muted>Try resizing the browser.</Text>
+      </Stack>
+    </Card>
+  )
+}

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -0,0 +1,35 @@
+/** @jest-environment node */
+
+import {buildTheme} from '@sanity/ui/theme'
+import {renderToString, renderToStaticMarkup} from 'react-dom/server'
+import {ThemeProvider} from '../../theme'
+import {useMediaIndex} from './useMediaIndex'
+
+const theme = buildTheme()
+
+function Log() {
+  const mediaIndex = useMediaIndex()
+
+  return <>mediaIndex: {JSON.stringify(mediaIndex)}</>
+}
+
+describe('useMediaIndex', () => {
+  it(`SSR to static markup returns 0`, () => {
+    expect(
+      renderToStaticMarkup(
+        <ThemeProvider theme={theme}>
+          <Log />
+        </ThemeProvider>,
+      ),
+    ).toBe('mediaIndex: 0')
+  })
+  it(`SSR to markup for hydration doesn't throw`, () => {
+    expect(
+      renderToString(
+        <ThemeProvider theme={theme}>
+          <Log />
+        </ThemeProvider>,
+      ),
+    ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
+  })
+})