@sanity/ui 0.36.17 → 0.37.3

package/src/components/menu/menuButton.tsx

@@ -1,256 +0,0 @@
-import React, {
-  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} 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
-  /**
-   * @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?: number | number[]
-  /**
-   * @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,
-    button: buttonProp,
-    id,
-    menu: menuProp,
-    onClose,
-    placement,
-    popoverScheme,
-    portal,
-    popover,
-    popoverRadius,
-    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)
-
-  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: PopoverProps = useMemo(() => {
-    return {
-      boundaryElement,
-      placement,
-      portal,
-      radius: popoverRadius,
-      overflow: preventOverflow,
-      scheme: popoverScheme,
-      ...(popover || {}),
-    }
-  }, [boundaryElement, placement, popover, popoverRadius, portal, preventOverflow, popoverScheme])
-
-  return (
-    <Popover {...popoverProps} content={menu} data-ui="MenuButton__popover" open={open}>
-      {button || <></>}
-    </Popover>
-  )
-})

package/src/components/menu/menuContext.ts

@@ -1,21 +0,0 @@
-import {createContext} from 'react'
-import {globalScope} from '../../lib/globalScope'
-
-export interface MenuContextValue {
-  version: 0.0
-  activeElement: HTMLElement | null
-  activeIndex: number
-  mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  onClickOutside?: (event: MouseEvent) => void
-  onEscape?: () => void
-  onItemClick?: () => void
-  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
-  onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
-  registerElement?: (el: HTMLElement) => () => void
-}
-
-const key = Symbol.for('@sanity/ui/context/menu')
-
-globalScope[key] = globalScope[key] || createContext<MenuContextValue | null>(null)
-
-export const MenuContext: React.Context<MenuContextValue | null> = globalScope[key]

package/src/components/menu/menuDivider.ts

@@ -1,12 +0,0 @@
-import styled, {StyledComponent} from 'styled-components'
-import {Theme} from '../../theme'
-
-/**
- * @public
- */
-export const MenuDivider: StyledComponent<'hr', Theme> = styled.hr`
-  height: 1px;
-  border: 0;
-  background: var(--card-hairline-soft-color);
-  margin: 0;
-`

package/src/components/menu/menuGroup.tsx

@@ -1,222 +0,0 @@
-import {ChevronRightIcon} from '@sanity/icons'
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {Box, Popover, PopoverProps, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {SelectableTone} from '../../types/selectable'
-import {Menu} from './menu'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuGroupProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: number | number[]
-  text: React.ReactNode
-  tone?: SelectableTone
-}
-
-const MOUSE_LEAVE_TIMEOUT = 1000
-
-const TextContainer = styled.span`
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  & > div:first-child {
-    flex: 1;
-    min-width: 0;
-  }
-`
-
-/**
- * @public
- */
-export function MenuGroup(
-  props: MenuGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>
-): React.ReactElement {
-  const {
-    as = 'button',
-    children,
-    fontSize,
-    onClick,
-    padding = 3,
-    popover = {},
-    radius = 2,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const [open, setOpen] = useState(false)
-  const {
-    activeElement,
-    mount,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onMouseEnter,
-    onMouseLeave,
-    registerElement,
-  } = useMenu()
-  const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
-  const mouseLeaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const shouldFocusRef = useRef<'first' | 'last' | null>(null)
-  const active = Boolean(activeElement) && activeElement === rootElement
-  // const selected = active || open
-
-  // Register the element
-  useEffect(() => mount(rootElement), [mount, rootElement])
-
-  const handleMouseEnter = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      if (mouseLeaveTimeoutRef.current) {
-        clearTimeout(mouseLeaveTimeoutRef.current)
-        mouseLeaveTimeoutRef.current = null
-      }
-
-      onMouseEnter(event)
-      setOpen(true)
-    },
-    [onMouseEnter]
-  )
-
-  const handleMouseLeave = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      onMouseLeave(event)
-
-      mouseLeaveTimeoutRef.current = setTimeout(() => {
-        setOpen(false)
-      }, MOUSE_LEAVE_TIMEOUT)
-    },
-    [onMouseLeave]
-  )
-
-  const handleMenuKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.stopPropagation()
-
-        setOpen(false)
-
-        requestAnimationFrame(() => {
-          rootElement?.focus()
-        })
-      }
-    },
-    [rootElement]
-  )
-
-  const handleMenuMouseEnter = useCallback(() => {
-    if (mouseLeaveTimeoutRef.current) {
-      clearTimeout(mouseLeaveTimeoutRef.current)
-      mouseLeaveTimeoutRef.current = null
-    }
-  }, [])
-
-  const handleMenuMouseLeave = useCallback(() => {
-    mouseLeaveTimeoutRef.current = setTimeout(() => {
-      setOpen(false)
-    }, MOUSE_LEAVE_TIMEOUT)
-  }, [])
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (onClick) onClick(event)
-
-      shouldFocusRef.current = 'first'
-
-      setOpen(true)
-
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
-    },
-    [onClick]
-  )
-
-  const handleItemClick = useCallback(() => {
-    setOpen(false)
-    if (onItemClick) onItemClick()
-  }, [onItemClick])
-
-  useEffect(() => {
-    return () => {
-      if (mouseLeaveTimeoutRef.current !== null) {
-        clearTimeout(mouseLeaveTimeoutRef.current)
-        mouseLeaveTimeoutRef.current = null
-      }
-    }
-  }, [])
-
-  const content = (
-    <Menu
-      onClickOutside={onClickOutside}
-      onEscape={onEscape}
-      onItemClick={handleItemClick}
-      onKeyDown={handleMenuKeyDown}
-      onMouseEnter={handleMenuMouseEnter}
-      onMouseLeave={handleMenuMouseLeave}
-      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)
-
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
-
-      return
-    }
-  }, [])
-
-  return (
-    <Popover {...popover} content={content} data-ui="MenuGroup__popover" open={open}>
-      <Selectable
-        data-as={as}
-        data-ui="MenuGroup"
-        forwardedAs={as}
-        {...restProps}
-        aria-pressed={as === 'button' ? !active && open : undefined}
-        data-pressed={as !== 'button' ? !active && open : undefined}
-        data-selected={active ? '' : undefined}
-        $radius={radius}
-        $tone={tone}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        ref={setRootElement}
-        tabIndex={-1}
-        type={as === 'button' ? 'button' : undefined}
-      >
-        <Box padding={padding}>
-          <TextContainer>
-            <Text size={fontSize}>{text}</Text>
-            <Text size={fontSize}>
-              <ChevronRightIcon />
-            </Text>
-          </TextContainer>
-        </Box>
-      </Selectable>
-    </Popover>
-  )
-}

package/src/components/menu/menuItem.tsx

@@ -1,172 +0,0 @@
-import React, {
-  createElement,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-import {useForwardedRef} from '../../hooks'
-import {Box, Flex, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {SelectableTone} from '../../types/selectable'
-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.ComponentType | React.ReactNode
-  iconRight?: React.ComponentType | 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 = 2,
-    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 {activeElement, mount, onItemClick, onMouseEnter, onMouseLeave} = useMenu()
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const selected = Boolean(activeElement) && rootElement === activeElement
-
-  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-as={as}
-      data-ui="MenuItem"
-      forwardedAs={as}
-      {...restProps}
-      aria-pressed={as === 'button' && pressed}
-      data-pressed={as !== 'button' && pressed ? '' : undefined}
-      data-selected={selected ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      $radius={radius}
-      $tone={tone}
-      disabled={disabled}
-      onClick={handleClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      padding={0}
-      ref={setRef}
-      role="menuitem"
-      tabIndex={-1}
-      type={as === 'button' ? 'button' : undefined}
-    >
-      {(icon || text || iconRight) && (
-        <Box as="span" {...paddingProps}>
-          <Flex as="span">
-            {icon && (
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-            )}
-
-            {text && (
-              <Box
-                flex={1}
-                marginLeft={icon ? space : undefined}
-                marginRight={iconRight ? space : undefined}
-              >
-                <Text size={fontSize} textOverflow="ellipsis">
-                  {text}
-                </Text>
-              </Box>
-            )}
-
-            {hotkeys && (
-              <Box marginLeft={space} style={{marginTop: -4, marginBottom: -4}}>
-                <Hotkeys fontSize={fontSize} keys={hotkeys} />
-              </Box>
-            )}
-
-            {iconRight && (
-              <Text size={fontSize}>
-                {isValidElement(iconRight) && iconRight}
-                {isValidElementType(iconRight) && createElement(iconRight)}
-              </Text>
-            )}
-          </Flex>
-        </Box>
-      )}
-
-      {children && (
-        <Box as="span" {...paddingProps}>
-          {children}
-        </Box>
-      )}
-    </Selectable>
-  )
-})

package/src/components/menu/useMenu.ts

@@ -1,20 +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: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('useMenu(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/components/skeleton/__workshop__/.eslintrc

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