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

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

@@ -1,109 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {RadiusStyleProps} from '@sanity/ui/css'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from '../../lib/styled'
-import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
-import {ThemeProps} from '../../styles'
-import type {ButtonTone} from '../../types'
-import {rootStyles, TextBox} from './styles'
-
-/**
- * @public
- */
-export interface ToastProps extends RadiusStyleProps {
-  closable?: boolean
-  description?: React.ReactNode
-  onClose?: () => void
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
-}
-
-const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'primary',
-} as const
-
-const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'primary',
-} satisfies {[key: string]: ButtonTone}
-
-const ROLES = {
-  error: 'alert',
-  warning: 'alert',
-  success: 'alert',
-  info: 'alert',
-} as const
-
-const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
-  rootStyles,
-)
-
-/**
- * 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' | 'width' | 'wrap'>,
-): React.ReactElement {
-  const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
-  const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
-  const buttonTone = status ? BUTTON_TONE[status] : 'default'
-  const role = status ? ROLES[status] : 'status'
-
-  return (
-    <Root
-      data-ui="Toast"
-      role={role}
-      {...restProps}
-      marginTop={3}
-      pointerEvents="auto"
-      radius={radius}
-      shadow={2}
-      tone={cardTone}
-      $duration={duration}
-    >
-      <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}
-              tone={buttonTone}
-              onClick={onClose}
-              style={{verticalAlign: 'top'}}
-            />
-          </Box>
-        )}
-      </Flex>
-    </Root>
-  )
-}
-
-Toast.displayName = 'Toast'

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

@@ -1,202 +0,0 @@
-import {AnimatePresence, motion, type Variants} from 'framer-motion'
-import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
-import {useMounted} from '../../hooks/useMounted'
-import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-// import {styled} from '../../lib/styled'
-import {Box} from '../../primitives'
-import {Layer} from '../../utils'
-import {Toast} from './toast'
-import {ToastContext} from './toastContext'
-import {ToastContextValue, ToastParams} from './types'
-
-type ToastState = {
-  dismiss: () => void
-  id: string
-  params: ToastParams
-}[]
-
-/**
- * @public
- */
-export interface ToastProviderProps {
-  children?: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  zOffset?: number | number[]
-}
-
-// const ToastContainer = styled.div`
-//   box-sizing: border-box;
-//   position: absolute;
-//   right: 0;
-//   bottom: 0;
-//   max-width: 420px;
-//   width: 100%;
-// `
-
-let toastId = 0
-
-/**
- * @public
- */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement {
-  const {children, padding = 4, paddingX, paddingY, zOffset} = props
-  const [state, _setState] = useState<ToastState>([])
-  const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
-  const mounted = useMounted()
-  const prefersReducedMotion = usePrefersReducedMotion()
-  const variants = useMemo<Variants>(
-    () => ({
-      initial: {
-        opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
-        y: 32,
-        scale: 0.25,
-        willChange: 'transform',
-      },
-      animate: {
-        opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
-        y: 0,
-        scale: 1,
-      },
-      exit: {
-        opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
-        scale: 0.5,
-        transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
-      },
-    }),
-    [prefersReducedMotion],
-  )
-
-  const value: ToastContextValue = useMemo(() => {
-    const push = (params: ToastParams) => {
-      // Wrap setState in startTransition to allow React to give input state updates higher priority
-      const setState: typeof _setState = (state) => startTransition(() => _setState(state))
-
-      const id = params.id || String(toastId++)
-      const duration = params.duration || 5000
-
-      const dismiss = () => {
-        const timeoutId = toastsRef.current[id]?.timeoutId
-
-        setState((prevState): ToastState => {
-          const idx = prevState.findIndex((t) => t.id === id)
-
-          if (idx > -1) {
-            const toasts = prevState.slice(0)
-
-            toasts.splice(idx, 1)
-
-            return toasts
-          }
-
-          return prevState
-        })
-
-        if (timeoutId !== undefined) {
-          clearTimeout(timeoutId)
-          delete toastsRef.current[id]
-        }
-      }
-
-      setState((prevState): ToastState => {
-        return prevState
-          .filter((t) => t.id !== id)
-          .concat([
-            {
-              dismiss,
-              id,
-              params: {...params, duration},
-            },
-          ])
-      })
-
-      if (toastsRef.current[id]) {
-        clearTimeout(toastsRef.current[id].timeoutId)
-        delete toastsRef.current[id]
-      }
-
-      toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
-
-      return id
-    }
-
-    return {version: 0.0, push}
-  }, [])
-
-  // clear timeouts on unmount
-  useEffect(
-    () => () => {
-      for (const {timeoutId} of Object.values(toastsRef.current)) {
-        clearTimeout(timeoutId)
-      }
-
-      toastsRef.current = {}
-    },
-    [],
-  )
-
-  return (
-    <ToastContext.Provider value={value}>
-      {children}
-      {mounted && (
-        <Layer
-          className={undefined /* root */}
-          data-ui="ToastProvider"
-          inset={0}
-          pointerEvents="none"
-          position="fixed"
-          zOffset={zOffset}
-          width="fill"
-        >
-          <Box
-            className={undefined /* container */}
-            position="absolute"
-            sizing="border"
-            style={{
-              // todo: move to css
-              right: 0,
-              bottom: 0,
-              maxWidth: 420,
-            }}
-          >
-            <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
-              <AnimatePresence initial={false}>
-                {state.map(({dismiss, id, params}) => (
-                  <motion.div
-                    key={id}
-                    layout="position"
-                    initial="initial"
-                    animate="animate"
-                    exit="exit"
-                    variants={variants}
-                    transition={
-                      prefersReducedMotion
-                        ? {duration: 0}
-                        : {type: 'spring', damping: 30, stiffness: 400}
-                    }
-                  >
-                    <Toast
-                      closable={params.closable}
-                      description={params.description}
-                      onClose={dismiss}
-                      status={params.status}
-                      title={params.title}
-                      duration={params.duration}
-                    />
-                  </motion.div>
-                ))}
-              </AnimatePresence>
-            </Box>
-          </Box>
-        </Layer>
-      )}
-    </ToastContext.Provider>
-  )
-}
-
-ToastProvider.displayName = 'ToastProvider'

package/src/core/components/toast/types.ts

@@ -1,20 +0,0 @@
-/**
- * @public
- */
-export interface ToastParams {
-  closable?: boolean
-  description?: React.ReactNode
-  duration?: number
-  id?: string
-  onClose?: () => void
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-}
-
-/**
- * @public
- */
-export interface ToastContextValue {
-  version: 0.0
-  push: (params: ToastParams) => string
-}

package/src/core/components/toast/useToast.ts

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
-
-/**
- * @public
- */
-export function useToast(): ToastContextValue {
-  const value = useContext(ToastContext)
-
-  if (!value) {
-    throw new Error('useToast(): 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('useToast(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/core/components/tree/__workshop__/.eslintrc

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

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

@@ -1,104 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, Tree, TreeItem} 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 handleClick = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-
-    const testid = event.currentTarget.getAttribute('data-testid')
-
-    if (testid) setId(testid)
-  }, [])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Wrapper>
-        <Tree ref={ref} space={1}>
-          <TreeItem 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 onClick={handleClick} text="Bananas" />
-            <TreeItem onClick={handleClick} text="Pears">
-              <TreeItem onClick={handleClick} text="Anjou" />
-              <TreeItem onClick={handleClick} text="Bartlett" />
-              <TreeItem onClick={handleClick} text="Bosc" />
-              <TreeItem onClick={handleClick} text="Concorde" />
-              <TreeItem onClick={handleClick} text="Seckel" />
-              <TreeItem onClick={handleClick} text="Starkrimson" />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem onClick={handleClick} text="Vegetables">
-            <TreeItem onClick={handleClick} text="Podded vegetables">
-              <TreeItem onClick={handleClick} text="Lentil" />
-              <TreeItem onClick={handleClick} text="Pea" />
-              <TreeItem onClick={handleClick} text="Peanut" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Bulb and stem vegetables">
-              <TreeItem onClick={handleClick} text="Asparagus" />
-              <TreeItem onClick={handleClick} text="Celery" />
-              <TreeItem onClick={handleClick} text="Leek" />
-              <TreeItem onClick={handleClick} text="Onion" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Root and tuberous vegetables">
-              <TreeItem onClick={handleClick} text="Carrot" />
-              <TreeItem onClick={handleClick} text="Ginger" />
-              <TreeItem onClick={handleClick} text="Parsnip" />
-              <TreeItem onClick={handleClick} text="Potato" />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem onClick={handleClick} text="Grains">
-            <TreeItem onClick={handleClick} text="Cereal grains">
-              <TreeItem onClick={handleClick} text="Barley" />
-              <TreeItem onClick={handleClick} text="Oats" />
-              <TreeItem onClick={handleClick} text="Rice" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Pseudocereal grains">
-              <TreeItem onClick={handleClick} text="Amaranth" />
-              <TreeItem onClick={handleClick} text="Buckwheat" />
-              <TreeItem onClick={handleClick} text="Chia" />
-              <TreeItem onClick={handleClick} text="Quinoa" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Oilseeds">
-              <TreeItem onClick={handleClick} text="India mustard" />
-              <TreeItem onClick={handleClick} text="Safflower" />
-              <TreeItem onClick={handleClick} text="Flax seed" />
-              <TreeItem onClick={handleClick} text="Poppy seed" />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}

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

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

@@ -1,104 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../lib/styled'
-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;
-    }
-  `
-}