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

package/src/components/menu/menuButton.tsx

@@ -1,268 +0,0 @@
-import {cloneElement, forwardRef, useCallback, useMemo, useState, useEffect, useRef} from 'react'
-import {isElement} from 'react-is'
-import {Popover, PopoverProps} from '../../primitives'
-import {ThemeColorSchemeKey} from '../../theme'
-import {Placement, Radius} from '../../types'
-import {MenuProps} from './menu'
-
-/**
- * @public
- */
-export interface MenuButtonProps {
-  /**
-   * @beta Do not use in production.
-   */
-  __unstable_disableRestoreFocusOnClose?: boolean
-  /**
-   * @deprecated Use `popover={{boundaryElement: element}}` instead.
-   */
-  boundaryElement?: HTMLElement
-  button: React.ReactElement
-  id: string
-  menu?: React.ReactElement
-  onClose?: () => void
-  onOpen?: () => void
-  /**
-   * @deprecated Use `popover={{placement: 'top'}}` instead.
-   */
-  placement?: Placement
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  /**
-   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
-   */
-  popoverScheme?: ThemeColorSchemeKey
-  /**
-   * @deprecated Use `popover={{radius: 2}}` instead.
-   */
-  popoverRadius?: Radius | Radius[]
-  /**
-   * @beta Do not use in production.
-   * @deprecated Use `popover={{portal: true}}` instead.
-   */
-  portal?: boolean
-  /**
-   * @deprecated Use `popover={{preventOverflow: true}}` instead.
-   */
-  preventOverflow?: boolean
-}
-
-/**
- * @public
- */
-export const MenuButton = forwardRef(function MenuButton(
-  props: MenuButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement | null>,
-) {
-  const {
-    __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
-    boundaryElement: deprecated_boundaryElement,
-    button: buttonProp,
-    id,
-    menu: menuProp,
-    onClose,
-    onOpen,
-    placement: deprecated_placement,
-    popoverScheme: deprecated_popoverScheme,
-    portal: deprecated_portal = true,
-    popover,
-    popoverRadius: deprecated_popoverRadius,
-    preventOverflow: deprecated_preventOverflow,
-  } = props
-  const [open, setOpen] = useState(false)
-  const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
-  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
-  const [menuElements, setChildMenuElements] = useState<HTMLElement[]>([])
-  const openRef = useRef<boolean>(open)
-
-  // Notify consumers when the menu opens
-  useEffect(() => {
-    if (onOpen && open && !openRef.current) {
-      onOpen()
-    }
-  }, [onOpen, open])
-
-  // Notify consumers when the menu closes
-  useEffect(() => {
-    if (onClose && !open && openRef.current) {
-      onClose()
-    }
-  }, [onClose, open])
-
-  useEffect(() => {
-    openRef.current = open
-  }, [open])
-
-  const handleButtonClick = useCallback(() => {
-    setOpen((v) => !v)
-    setShouldFocus(null)
-  }, [])
-
-  const handleButtonKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
-    // On `ArrowDown`, `Enter` and `Space`
-    // - Opens menu and moves focus to first menuitem
-    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault()
-      setOpen(true)
-      setShouldFocus('first')
-
-      return
-    }
-
-    // On `ArrowUp`
-    // - 	Opens menu and moves focus to last menuitem
-    if (event.key === 'ArrowUp') {
-      event.preventDefault()
-      setOpen(true)
-      setShouldFocus('last')
-
-      return
-    }
-  }, [])
-
-  const handleMenuClickOutside = useCallback(
-    (event: MouseEvent) => {
-      const target = event.target
-
-      if (!(target instanceof Node)) {
-        return
-      }
-
-      if (buttonElement && (target === buttonElement || buttonElement.contains(target))) {
-        return
-      }
-
-      for (const el of menuElements) {
-        if (target === el || el.contains(target)) {
-          return
-        }
-      }
-
-      setOpen(false)
-    },
-    [buttonElement, menuElements],
-  )
-
-  const handleMenuEscape = useCallback(() => {
-    setOpen(false)
-    if (disableRestoreFocusOnClose) return
-    if (buttonElement) buttonElement.focus()
-  }, [buttonElement, disableRestoreFocusOnClose])
-
-  const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
-      const target = event.relatedTarget
-
-      if (!(target instanceof Node)) {
-        return
-      }
-
-      for (const el of menuElements) {
-        if (el === target || el.contains(target)) {
-          return
-        }
-      }
-
-      setOpen(false)
-    },
-    [menuElements],
-  )
-
-  const handleItemClick = useCallback(() => {
-    setOpen(false)
-    if (disableRestoreFocusOnClose) return
-    if (buttonElement) buttonElement.focus()
-  }, [buttonElement, disableRestoreFocusOnClose])
-
-  const registerElement = useCallback((el: HTMLElement) => {
-    setChildMenuElements((els) => els.concat([el]))
-
-    return () => {
-      setChildMenuElements((els) => {
-        return els.filter((_el) => _el !== el)
-      })
-    }
-  }, [])
-
-  const menuProps: MenuProps = useMemo(
-    () => ({
-      'aria-labelledby': id,
-      onBlurCapture: handleBlur,
-      onClickOutside: handleMenuClickOutside,
-      onEscape: handleMenuEscape,
-      onItemClick: handleItemClick,
-      originElement: buttonElement,
-      registerElement,
-      shouldFocus,
-    }),
-    [
-      buttonElement,
-      handleMenuClickOutside,
-      handleMenuEscape,
-      handleItemClick,
-      id,
-      handleBlur,
-      registerElement,
-      shouldFocus,
-    ],
-  )
-
-  const menu = isElement(menuProp) ? cloneElement(menuProp, menuProps) : null
-
-  const setButtonRef = useCallback(
-    (el: HTMLButtonElement | null) => {
-      if (typeof ref === 'function') {
-        ref(el)
-      } else if (ref) {
-        ref.current = el
-      }
-
-      setButtonElement(el)
-    },
-    [ref],
-  )
-
-  const button = useMemo(
-    () =>
-      isElement(buttonProp)
-        ? cloneElement(buttonProp, {
-            'data-ui': 'MenuButton',
-            id,
-            onClick: handleButtonClick,
-            onKeyDown: handleButtonKeyDown,
-            'aria-haspopup': true,
-            'aria-expanded': open,
-            ref: setButtonRef,
-            selected: open,
-          })
-        : null,
-    [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef],
-  )
-
-  const popoverProps: MenuButtonProps['popover'] = useMemo(
-    () => ({
-      boundaryElement: deprecated_boundaryElement,
-      overflow: 'auto',
-      placement: deprecated_placement,
-      portal: deprecated_portal,
-      preventOverflow: deprecated_preventOverflow,
-      radius: deprecated_popoverRadius,
-      scheme: deprecated_popoverScheme,
-      ...(popover || {}),
-    }),
-    [
-      deprecated_boundaryElement,
-      deprecated_placement,
-      deprecated_popoverRadius,
-      deprecated_popoverScheme,
-      deprecated_portal,
-      deprecated_preventOverflow,
-      popover,
-    ],
-  )
-
-  return (
-    <Popover data-ui="MenuButton__popover" {...popoverProps} content={menu} open={open}>
-      {button || <></>}
-    </Popover>
-  )
-})

package/src/components/menu/menuDivider.ts

@@ -1,12 +0,0 @@
-import styled from 'styled-components'
-import {cssVars} from '../../theme'
-
-/**
- * @public
- */
-export const MenuDivider = styled.hr`
-  height: 1px;
-  border: 0;
-  background: ${cssVars.default['border-base']};
-  margin: 0;
-`

package/src/components/menu/menuGroup.tsx

@@ -1,200 +0,0 @@
-import {ChevronRightIcon} from '@sanity/icons'
-import {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
-import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
-import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
-import {Radius, SelectableTone} from '../../types'
-import {Menu} from './menu'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuGroupProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
-  space?: number | number[]
-  text: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export function MenuGroup(
-  props: MenuGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>,
-): React.ReactElement {
-  const {
-    as = 'button',
-    children,
-    fontSize = 1,
-    icon,
-    onClick,
-    padding = 3,
-    popover,
-    radius = 2,
-    space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const {scheme} = useToneContext()
-  const menu = useMenu()
-  const {
-    activeElement,
-    mount,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    registerElement,
-  } = menu
-  const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
-  const [open, setOpen] = useState(false)
-  const shouldFocusRef = useRef<'first' | 'last' | null>(null)
-  const active = Boolean(activeElement) && activeElement === rootElement
-  const [withinMenu, setWithinMenu] = useState(false)
-
-  const handleMouseEnter = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      setWithinMenu(false)
-      onItemMouseEnter(event)
-      setOpen(true)
-    },
-    [onItemMouseEnter],
-  )
-
-  const handleMenuKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.stopPropagation()
-
-        setOpen(false)
-
-        requestAnimationFrame(() => {
-          rootElement?.focus()
-        })
-      }
-    },
-    [rootElement],
-  )
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (onClick) onClick(event)
-
-      shouldFocusRef.current = 'first'
-
-      setOpen(true)
-
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
-    },
-    [onClick],
-  )
-
-  const handleChildItemClick = useCallback(() => {
-    setOpen(false)
-    if (onItemClick) onItemClick()
-  }, [onItemClick])
-
-  const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
-
-  // Register the menu item element
-  useEffect(() => mount(rootElement), [mount, rootElement])
-
-  // Close child menu when a sibling item becomes active
-  useEffect(() => {
-    if (!active) setOpen(false)
-  }, [active])
-
-  // Update state when child menu is no longer open
-  useEffect(() => {
-    if (!open) setWithinMenu(false)
-  }, [open])
-
-  const childMenu = (
-    <Menu
-      onClickOutside={onClickOutside}
-      onEscape={onEscape}
-      onItemClick={handleChildItemClick}
-      onKeyDown={handleMenuKeyDown}
-      onMouseEnter={handleMenuMouseEnter}
-      registerElement={registerElement}
-      shouldFocus={shouldFocusRef.current}
-    >
-      {children}
-    </Menu>
-  )
-
-  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    const target = event.currentTarget
-
-    if (document.activeElement !== target) {
-      return
-    }
-
-    if (event.key === 'ArrowRight') {
-      shouldFocusRef.current = 'first'
-
-      setOpen(true)
-      setWithinMenu(true)
-
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
-
-      return
-    }
-  }, [])
-
-  return (
-    <Popover {...popover} content={childMenu} data-ui="MenuGroup__popover" open={open}>
-      <Selectable
-        data-as={as}
-        data-ui="MenuGroup"
-        forwardedAs={as}
-        {...restProps}
-        aria-pressed={as === 'button' ? withinMenu : undefined}
-        data-pressed={as !== 'button' ? withinMenu : undefined}
-        data-selected={!withinMenu && active ? '' : undefined}
-        $radius={useArrayProp(radius)}
-        $tone={tone}
-        $scheme={scheme}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        onMouseEnter={handleMouseEnter}
-        ref={setRootElement}
-        tabIndex={-1}
-        type={as === 'button' ? 'button' : undefined}
-      >
-        <Flex gap={space} padding={padding}>
-          {icon && (
-            <Text size={fontSize}>
-              {isValidElement(icon) && icon}
-              {isValidElementType(icon) && createElement(icon)}
-            </Text>
-          )}
-
-          <Box flex={1}>
-            <Text size={fontSize} textOverflow="ellipsis" weight="medium">
-              {text}
-            </Text>
-          </Box>
-
-          <Text size={fontSize}>
-            <ChevronRightIcon />
-          </Text>
-        </Flex>
-      </Selectable>
-    </Popover>
-  )
-}

package/src/components/menu/menuItem.tsx

@@ -1,172 +0,0 @@
-import {
-  createElement,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-import {useArrayProp, useForwardedRef} from '../../hooks'
-import {Box, Flex, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {ThemeColorToneKey} from '../../theme'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
-import {Hotkeys} from '../hotkeys'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof 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?: ThemeColorToneKey
-}
-
-/**
- * @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,
-    iconRight,
-    onClick,
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pressed,
-    radius = 2,
-    selected: selectedProp,
-    space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const {scheme} = useToneContext()
-  const menu = useMenu()
-  const {
-    activeElement,
-    mount,
-    onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave,
-  } = menu
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const active = Boolean(activeElement) && activeElement === rootElement
-
-  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
-
-  const ref = useForwardedRef(forwardedRef)
-
-  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 setRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      ref.current = el
-      setRootElement(el)
-    },
-    [ref],
-  )
-
-  return (
-    <Selectable
-      data-ui="MenuItem"
-      {...restProps}
-      aria-pressed={as === 'button' && pressed}
-      data-pressed={as !== 'button' && pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
-      $tone={disabled ? 'default' : tone}
-      $scheme={scheme}
-      disabled={disabled}
-      onClick={handleClick}
-      onMouseEnter={onItemMouseEnter}
-      onMouseLeave={onItemMouseLeave}
-      ref={setRef}
-      role="menuitem"
-      tabIndex={-1}
-      type={as === 'button' ? 'button' : undefined}
-    >
-      {(icon || text || iconRight) && (
-        <Flex as="span" gap={space} align="center" {...paddingProps}>
-          {icon && (
-            <Text size={fontSize}>
-              {isValidElement(icon) && icon}
-              {isValidElementType(icon) && createElement(icon)}
-            </Text>
-          )}
-
-          {text && (
-            <Box flex={1}>
-              <Text size={fontSize} textOverflow="ellipsis" weight="medium">
-                {text}
-              </Text>
-            </Box>
-          )}
-
-          {hotkeys && (
-            <Hotkeys fontSize={fontSize} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
-          )}
-
-          {iconRight && (
-            <Text size={fontSize}>
-              {isValidElement(iconRight) && iconRight}
-              {isValidElementType(iconRight) && createElement(iconRight)}
-            </Text>
-          )}
-        </Flex>
-      )}
-      {children && (
-        <Box as="span" {...paddingProps}>
-          {children}
-        </Box>
-      )}
-    </Selectable>
-  )
-})

package/src/components/skeleton/styles.ts

@@ -1,51 +0,0 @@
-import {css, keyframes} from 'styled-components'
-import {cssVars} from '../../theme'
-
-const keyframe = keyframes`
-  0% {
-    background-position: 100%;
-  }
-  100% {
-    background-position: -100%;
-  }
-`
-
-const animation = css`
-  background-image: linear-gradient(
-    to right,
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-to']},
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-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: ${cssVars.default['skeleton-from']};
-          `}
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    background-color: ${cssVars.default['skeleton-from']};
-  }
-`