@sanity/ui 0.37.2 → 0.37.3

package/src/components/menu/menuContext.ts

@@ -1,31 +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
-  onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
-  onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void
-  registerElement?: (el: HTMLElement) => () => void
-
-  /**
-   * @deprecated Use `onItemMouseEnter` instead
-   */
-  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
-
-  /**
-   * @deprecated Use `onItemMouseLeave` instead
-   */
-  onMouseLeave: (event: React.MouseEvent<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,200 +0,0 @@
-import {ChevronRightIcon} from '@sanity/icons'
-import React, {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
-import {isValidElementType} from 'react-is'
-import {Box, Flex, 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[]
-  icon?: React.ComponentType | React.ReactNode
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: number | number[]
-  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,
-    icon,
-    onClick,
-    padding = 3,
-    popover = {},
-    radius = 2,
-    space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const menu = useMenu()
-  const {
-    activeElement,
-    mount,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    registerElement,
-  } = menu
-  const [rootElement, setRootElement] = useState<HTMLButtonElement | 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={radius}
-        $tone={tone}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        onMouseEnter={handleMouseEnter}
-        ref={setRootElement}
-        tabIndex={-1}
-        type={as === 'button' ? 'button' : undefined}
-      >
-        <Box padding={padding}>
-          <Flex>
-            {icon && (
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-            )}
-
-            <Box flex={1} marginLeft={icon ? space : undefined}>
-              <Text size={fontSize} textOverflow="ellipsis">
-                {text}
-              </Text>
-            </Box>
-
-            <Box marginLeft={space}>
-              <Text size={fontSize}>
-                <ChevronRightIcon />
-              </Text>
-            </Box>
-          </Flex>
-        </Box>
-      </Selectable>
-    </Popover>
-  )
-}

package/src/components/menu/menuItem.tsx

@@ -1,179 +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 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-as={as}
-      data-ui="MenuItem"
-      forwardedAs={as}
-      {...restProps}
-      aria-pressed={as === 'button' && pressed}
-      data-pressed={as !== 'button' && pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      $radius={radius}
-      $tone={tone}
-      disabled={disabled}
-      onClick={handleClick}
-      onMouseEnter={onItemMouseEnter}
-      onMouseLeave={onItemMouseLeave}
-      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/menu/useMenuController.ts

@@ -1,239 +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
-  rootElement: HTMLDivElement | null
-  setRootElement: (el: HTMLDivElement | null) => 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
-}): MenuController {
-  const {onKeyDown, originElement, shouldFocus} = props
-
-  const elementsRef = useRef<HTMLElement[]>([])
-
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const [activeIndex, _setActiveIndex] = useState(-1)
-
-  const activeElement = elementsRef.current[activeIndex] || null
-  const activeIndexRef = useRef(activeIndex)
-
-  const mounted = Boolean(rootElement)
-
-  const setActiveIndex = useCallback((nextActiveIndex) => {
-    _setActiveIndex(nextActiveIndex)
-    activeIndexRef.current = nextActiveIndex
-  }, [])
-
-  const mount = useCallback(
-    (element: HTMLElement | null, selected?: boolean): (() => void) => {
-      if (!element) return () => undefined
-
-      if (elementsRef.current.indexOf(element) === -1) {
-        elementsRef.current.push(element)
-        _sortElements(rootElement, 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)
-        }
-      }
-    },
-    [rootElement, 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[activeIndex]
-
-        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[activeIndex]
-
-        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)
-      }
-    },
-    [activeIndex, 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(() => {
-    rootElement?.focus()
-    setActiveIndex(-1)
-  }, [rootElement, setActiveIndex])
-
-  // Set focus on the currently active element
-  useEffect(() => {
-    if (!mounted) return
-
-    const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current
-
-      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)
-            activeIndexRef.current = 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)
-            activeIndexRef.current = currentIndex
-          }
-        }
-
-        return
-      }
-
-      const element = elementsRef.current[_activeIndex] || null
-
-      element?.focus()
-    })
-
-    return () => {
-      window.cancelAnimationFrame(rafId)
-    }
-  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
-
-  return {
-    activeElement,
-    activeIndex,
-    handleItemMouseEnter,
-    handleItemMouseLeave,
-    handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement,
-  }
-}

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

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