@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/core/components/menu/menuItem.tsx

@@ -1,180 +0,0 @@
-import {
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {Box, Flex, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {_getArrayProp} from '../../styles'
-import {useRootTheme} from '../../theme'
-import {SelectableTone} from '../../types/selectable'
-import {Hotkeys} from '../hotkeys'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  pressed?: boolean
-  selected?: boolean
-  space?: number | number[]
-  text?: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export const MenuItem = forwardRef(function MenuItem(
-  props: MenuItemProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    as = 'button',
-    children,
-    disabled,
-    fontSize = 1,
-    hotkeys,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClick,
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pressed,
-    radius = 2,
-    selected: selectedProp,
-    space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const {scheme} = useRootTheme()
-  const menu = useMenu()
-  const {
-    activeElement,
-    mount,
-    onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
-    onItemMouseLeave: _onItemMouseLeave,
-  } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const active = Boolean(activeElement) && activeElement === rootElement
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (disabled) return
-      if (onClick) onClick(event)
-      if (onItemClick) onItemClick()
-    },
-    [disabled, onClick, onItemClick],
-  )
-
-  const paddingProps = useMemo(
-    () => ({
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-    }),
-    [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
-  )
-
-  const hotkeysFontSize = _getArrayProp(fontSize).map((s) => s - 1)
-
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setRootElement(el)
-  }, [])
-
-  return (
-    <Selectable
-      data-ui="MenuItem"
-      role="menuitem"
-      {...restProps}
-      data-pressed={as !== 'button' && pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      forwardedAs={as}
-      $radius={_getArrayProp(radius)}
-      $padding={_getArrayProp(0)}
-      $tone={disabled ? 'default' : tone}
-      $scheme={scheme}
-      disabled={disabled}
-      onClick={handleClick}
-      onMouseEnter={onItemMouseEnter}
-      onMouseLeave={onItemMouseLeave}
-      ref={setRef}
-      tabIndex={-1}
-      type={as === 'button' ? 'button' : undefined}
-    >
-      {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={space} align="center" {...paddingProps}>
-          {IconComponent && (
-            <Text size={fontSize}>
-              {isValidElement(IconComponent) && IconComponent}
-              {isValidElementType(IconComponent) && <IconComponent />}
-            </Text>
-          )}
-
-          {text && (
-            <Box flex={1}>
-              <Text size={fontSize} textOverflow="ellipsis" weight="medium">
-                {text}
-              </Text>
-            </Box>
-          )}
-
-          {hotkeys && (
-            <Hotkeys
-              fontSize={hotkeysFontSize}
-              keys={hotkeys}
-              style={{marginTop: -4, marginBottom: -4}}
-            />
-          )}
-
-          {IconRightComponent && (
-            <Text size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          )}
-        </Flex>
-      )}
-      {children && (
-        <Box as="span" {...paddingProps}>
-          {children}
-        </Box>
-      )}
-    </Selectable>
-  )
-})
-MenuItem.displayName = 'ForwardRef(MenuItem)'

package/src/core/components/menu/useMenu.ts

@@ -1,21 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {MenuContext, MenuContextValue} from './menuContext'
-
-export function useMenu(): MenuContextValue {
-  const value = useContext(MenuContext)
-
-  if (!value) {
-    throw new Error('useMenu(): 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: 2`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 2) {
-    throw new Error('useMenu(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/core/components/menu/useMenuController.ts

@@ -1,231 +0,0 @@
-import {useCallback, useEffect, useRef, useState} from 'react'
-
-import {_getFocusableElements, _sortElements} from './helpers'
-
-/**
- * @internal
- */
-export interface MenuController {
-  activeElement: HTMLElement | null
-  activeIndex: number
-  handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
-  handleItemMouseLeave: () => void
-  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
-  mount: (element: HTMLElement | null, selected?: boolean) => () => void
-}
-
-/**
- * This controller is responsible for controlling UI menu state.
- *
- * @internal
- */
-export function useMenuController(props: {
-  onKeyDown?: React.KeyboardEventHandler
-  originElement?: HTMLElement | null
-  shouldFocus: 'first' | 'last' | null
-  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
-}): MenuController {
-  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
-  const elementsRef = useRef<HTMLElement[]>([])
-  const [activeIndex, _setActiveIndex] = useState(-1)
-  const activeIndexRef = useRef(activeIndex)
-  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null)
-
-  const setActiveIndex = useCallback((nextActiveIndex: number) => {
-    _setActiveIndex(nextActiveIndex)
-    activeIndexRef.current = nextActiveIndex
-    setActiveElement(elementsRef.current[nextActiveIndex] || null)
-  }, [])
-
-  const mount = useCallback(
-    (element: HTMLElement | null, selected?: boolean): (() => void) => {
-      if (!element) return () => undefined
-
-      if (elementsRef.current.indexOf(element) === -1) {
-        elementsRef.current.push(element)
-        _sortElements(rootElementRef.current, elementsRef.current)
-      }
-
-      if (selected) {
-        const selectedIndex = elementsRef.current.indexOf(element)
-
-        setActiveIndex(selectedIndex)
-      }
-
-      return () => {
-        const idx = elementsRef.current.indexOf(element)
-
-        if (idx > -1) {
-          elementsRef.current.splice(idx, 1)
-        }
-      }
-    },
-    [rootElementRef, setActiveIndex],
-  )
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      // Move focus to the element that opened the menu before handling the `Tab` press
-      if (event.key === 'Tab') {
-        if (originElement) {
-          originElement.focus()
-        }
-
-        return
-      }
-
-      // Move focus to the first focusable menuitem
-      if (event.key === 'Home') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const el = focusableElements[0]
-
-        if (!el) return
-
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-
-        return
-      }
-
-      // Move focus to the last focusable menuitem
-      if (event.key === 'End') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const el = focusableElements[focusableElements.length - 1]
-
-        if (!el) return
-
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-
-        return
-      }
-
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const focusableLen = focusableElements.length
-
-        if (focusableLen === 0) return
-
-        const focusedElement = elementsRef.current[activeIndexRef.current]
-
-        let focusedIndex = focusableElements.indexOf(focusedElement)
-
-        focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen
-
-        const el = focusableElements[focusedIndex]
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-
-        return
-      }
-
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const focusableLen = focusableElements.length
-
-        if (focusableLen === 0) return
-
-        const focusedElement = elementsRef.current[activeIndexRef.current]
-
-        let focusedIndex = focusableElements.indexOf(focusedElement)
-
-        focusedIndex = (focusedIndex + 1) % focusableLen
-
-        const el = focusableElements[focusedIndex]
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-
-        return
-      }
-
-      if (onKeyDown) {
-        onKeyDown(event)
-      }
-    },
-    [onKeyDown, originElement, setActiveIndex],
-  )
-
-  const handleItemMouseEnter = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      const element = event.currentTarget
-      const currentIndex = elementsRef.current.indexOf(element)
-
-      setActiveIndex(currentIndex)
-    },
-    [setActiveIndex],
-  )
-
-  const handleItemMouseLeave = useCallback(() => {
-    // Set the active index to -2 to deactivate all menu items
-    // when the user moves the mouse away from the menu item.
-    // We avoid using -1 because it would focus the first menu item,
-    // which would be incorrect when the user hovers over a gap
-    // between two menu items or a menu divider.
-    setActiveIndex(-2)
-    rootElementRef.current?.focus()
-  }, [rootElementRef, setActiveIndex])
-
-  // Set focus on the currently active element
-  useEffect(() => {
-    if (!rootElementRef.current) return
-
-    const rafId = requestAnimationFrame(() => {
-      if (activeIndex === -1) {
-        if (shouldFocus === 'first') {
-          const focusableElements = _getFocusableElements(elementsRef.current)
-          const el = focusableElements[0]
-
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el)
-
-            setActiveIndex(currentIndex)
-          }
-        }
-
-        if (shouldFocus === 'last') {
-          const focusableElements = _getFocusableElements(elementsRef.current)
-          const el = focusableElements[focusableElements.length - 1]
-
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el)
-
-            setActiveIndex(currentIndex)
-          }
-        }
-
-        return
-      }
-
-      const element = elementsRef.current[activeIndex] || null
-
-      element?.focus()
-    })
-
-    return () => cancelAnimationFrame(rafId)
-  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
-
-  return {
-    activeElement,
-    activeIndex,
-    handleItemMouseEnter,
-    handleItemMouseLeave,
-    handleKeyDown,
-    mount,
-  }
-}

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -1,70 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  Text,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function SkeletonDelayStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Text muted>Delayed by 2000ms</Text>
-        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
-          <Flex align="center">
-            <Skeleton
-              style={{width: 90, height: 90}}
-              radius={2}
-              animated={animated}
-              marginRight={3}
-              delay={1000}
-            />
-            <Stack space={2} flex={1}>
-              <HeadingSkeleton
-                size={4}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <TextSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <LabelSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <CodeSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-            </Stack>
-          </Flex>
-        </Card>
-      </Container>
-    </Box>
-  )
-}

package/src/core/components/skeleton/__workshop__/index.ts

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/skeleton',
-  title: 'Skeleton',
-  stories: [
-    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
-  ],
-})

package/src/core/components/skeleton/__workshop__/skeleton.tsx

@@ -1,64 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  Grid,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function SkeletonStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Stack space={4}>
-          {[1, 2, 3].map((item) => (
-            <Card key={item} tone={tone} padding={2} radius={2} border>
-              <Flex align="center">
-                <Grid gap={2} columns={2} marginRight={3}>
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                </Grid>
-                <Stack space={2} flex={1}>
-                  <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <CodeSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                </Stack>
-              </Flex>
-              <Flex marginTop={2}>
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginRight={1}
-                  radius={2}
-                  animated={animated}
-                />
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginLeft={1}
-                  radius={2}
-                  animated={animated}
-                />
-              </Flex>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

package/src/core/components/skeleton/index.ts

@@ -1,2 +0,0 @@
-export * from './skeleton'
-export * from './textSkeleton'

package/src/core/components/skeleton/skeleton.tsx

@@ -1,57 +0,0 @@
-import {forwardRef, useEffect, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
-import {_getArrayProp} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {skeletonStyle} from './styles'
-
-const StyledSkeleton = styled(Box)<
-  {$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps
->(responsiveRadiusStyle, skeletonStyle)
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
-  animated?: boolean
-  delay?: number
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const Skeleton = forwardRef(function Skeleton(
-  props: SkeletonProps & React.HTMLProps<HTMLDivElement>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {animated = false, delay, radius, ...restProps} = props
-  const [visible, setVisible] = useState<boolean>(delay ? false : true)
-
-  useEffect(() => {
-    if (!delay) {
-      return undefined
-    }
-
-    const timeout = setTimeout(() => {
-      setVisible(true)
-    }, delay)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [delay])
-
-  return (
-    <StyledSkeleton
-      {...restProps}
-      $animated={animated}
-      $radius={_getArrayProp(radius)}
-      $visible={delay ? visible : true}
-      ref={ref}
-    />
-  )
-})
-Skeleton.displayName = 'ForwardRef(Skeleton)'

package/src/core/components/skeleton/styles.ts

@@ -1,50 +0,0 @@
-import {css, keyframes} from 'styled-components'
-
-const keyframe = keyframes`
-  0% {
-    background-position: 100%;
-  }
-  100% {
-    background-position: -100%;
-  }
-`
-
-const animation = css`
-  background-image: linear-gradient(
-    to right,
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-to),
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-from)
-  );
-  background-position: 100%;
-  background-size: 200% 100%;
-  background-attachment: fixed;
-  animation-name: ${keyframe};
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-  animation-duration: 2000ms;
-`
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
-  opacity: ${({$visible}) => ($visible ? 1 : 0)};
-  transition: opacity 200ms ease-in;
-
-  @media screen and (prefers-reduced-motion: no-preference) {
-    ${({$animated}) =>
-      $animated
-        ? animation
-        : css`
-            background-color: var(--card-skeleton-color-from);
-          `}
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    background-color: var(--card-skeleton-color-from);
-  }
-`