@sanity/ui 3.3.2 → 3.3.4

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

@@ -1,201 +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 {ElementType, Props} from '../../types'
-import {SelectableTone} from '../../types/selectable'
-import {Hotkeys} from '../hotkeys'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  // oxlint-disable-next-line no-redundant-type-constituents
-  icon?: React.ElementType | React.ReactNode
-  // oxlint-disable-next-line no-redundant-type-constituents
-  iconRight?: React.ElementType | React.ReactNode
-  pressed?: boolean
-  selected?: boolean
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  text?: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
-
-const MenuItemComponent = forwardRef(function MenuItem(
-  props: MenuItemOwnProps & {as?: ElementType} & 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,
-    gap,
-    // oxlint-disable-next-line no-deprecated
-    space: deprecated_space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const spacing = gap === undefined ? deprecated_space : gap
-  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={spacing} 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>
-  )
-})
-MenuItemComponent.displayName = 'ForwardRef(MenuItem)'
-
-/**
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const MenuItem = MenuItemComponent as unknown as <E extends ElementType = 'button'>(
-  props: MenuItemProps<E>,
-) => React.JSX.Element

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,233 +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
-  // oxlint-disable-next-line no-deprecated
-  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()
-    })
-
-    // oxlint-disable-next-line consistent-return
-    return () => cancelAnimationFrame(rafId)
-  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
-
-  return {
-    activeElement,
-    activeIndex,
-    handleItemMouseEnter,
-    handleItemMouseLeave,
-    handleKeyDown,
-    mount,
-  }
-}

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,58 +0,0 @@
-import {forwardRef, useEffect, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {Box, BoxOwnProps, 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<BoxOwnProps, '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
-  // oxlint-disable-next-line no-unneeded-ternary
-  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);
-  }
-`

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

@@ -1,122 +0,0 @@
-import {getTheme_v2, ThemeFontKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp, _responsive, ThemeProps} from '../../styles'
-import {Skeleton, SkeletonProps} from './skeleton'
-
-const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
-  props: {
-    $size: number[]
-    $style: ThemeFontKey
-  } & ThemeProps,
-) => {
-  const {$size, $style} = props
-  const {font, media} = getTheme_v2(props.theme)
-  const fontStyle = font[$style]
-
-  const styles = _responsive(media, $size, (sizeIndex) => {
-    const fontSize = fontStyle.sizes[sizeIndex]
-    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
-
-    return {height: capHeight}
-  })
-
-  return styles
-})
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: TextSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
-})
-TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: LabelSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
-})
-LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: HeadingSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
-})
-HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: CodeSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
-})
-CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

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

@@ -1,3 +0,0 @@
-export * from './tab'
-export * from './tabList'
-export * from './tabPanel'