@sanity/ui 0.36.17 → 0.37.3

package/src/components/menu/helpers.ts

@@ -1,82 +0,0 @@
-import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers'
-
-/**
- * @internal
- */
-function _isFocusable(element: HTMLElement) {
-  return (
-    (isHTMLAnchorElement(element) && element.getAttribute('data-disabled') !== 'true') ||
-    (isHTMLButtonElement(element) && !element.disabled)
-  )
-}
-
-/**
- * @internal
- */
-export function _getFocusableElements(elements: HTMLElement[]): HTMLElement[] {
-  return elements.filter(_isFocusable)
-}
-
-/**
- * @internal
- */
-export function _getDOMPath(rootElement: HTMLElement, el: HTMLElement): number[] {
-  const path: number[] = []
-
-  let e = el
-
-  while (e !== rootElement) {
-    const parentElement = e.parentElement
-
-    if (!parentElement) return path
-
-    const children = Array.from(parentElement.childNodes)
-    const index = children.indexOf(e)
-
-    path.unshift(index)
-
-    if (parentElement === rootElement) {
-      return path
-    }
-
-    e = parentElement
-  }
-
-  return path
-}
-
-const EMPTY_PATH: number[] = []
-
-/**
- * @internal
- */
-export function _sortElements(rootElement: HTMLElement | null, elements: HTMLElement[]): void {
-  if (!rootElement) return
-
-  const map = new WeakMap<HTMLElement, number[]>()
-
-  for (const el of elements) {
-    map.set(el, _getDOMPath(rootElement, el))
-  }
-
-  const _sort = (a: HTMLElement, b: HTMLElement) => {
-    const _a = map.get(a) || EMPTY_PATH
-    const _b = map.get(b) || EMPTY_PATH
-
-    const len = Math.max(_a.length, _b.length)
-
-    // Loop until there are different indexes
-    for (let i = 0; i < len; i += 1) {
-      const aIndex = _a[i] || -1
-      const bIndex = _b[i] || -1
-
-      if (aIndex !== bIndex) {
-        return aIndex - bIndex
-      }
-    }
-
-    return 0
-  }
-
-  elements.sort(_sort)
-}

package/src/components/menu/index.ts

@@ -1,5 +0,0 @@
-export * from './menu'
-export * from './menuButton'
-export * from './menuDivider'
-export * from './menuGroup'
-export * from './menuItem'

package/src/components/menu/menu.test.tsx

@@ -1,108 +0,0 @@
-/* eslint-disable no-console */
-
-import React from 'react'
-import {render} from '../../../test'
-import {MenuContext, MenuContextValue} from './menuContext'
-import {useMenu} from './useMenu'
-
-describe('components/menu', () => {
-  describe('useMenu', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootMenu = useMenu()
-
-        log(rootMenu)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: MenuContextValue = {
-          version: 0.0,
-          activeElement: null,
-          activeIndex: 0,
-          mount: (element: HTMLElement | null) => () => console.log(element),
-          onItemClick: () => undefined,
-          onMouseEnter: (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          onMouseLeave: (event: React.MouseEvent<HTMLElement>) => console.log(event),
-        }
-
-        return (
-          <MenuContext.Provider value={value}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].activeIndex).toBe(0)
-      expect(typeof log.mock.calls[0][0].mount).toBe('function')
-      expect(typeof log.mock.calls[0][0].onItemClick).toBe('function')
-      expect(typeof log.mock.calls[0][0].onMouseEnter).toBe('function')
-      expect(typeof log.mock.calls[0][0].onMouseLeave).toBe('function')
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useMenu()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <MenuContext.Provider value={value as any}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useMenu(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useMenu()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          <MenuContext.Provider value={value as any}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useMenu(): the context value is not compatible')
-    })
-  })
-})

package/src/components/menu/menu.tsx

@@ -1,347 +0,0 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {useClickOutside, useGlobalKeyDown} from '../../hooks'
-import {Box, Stack} from '../../primitives'
-import {ResponsivePaddingProps} from '../../primitives/types'
-import {useLayer} from '../../utils'
-import {_getFocusableElements, _sortElements} from './helpers'
-import {MenuContext, MenuContextValue} from './menuContext'
-
-/**
- * @public
- */
-export interface MenuProps extends ResponsivePaddingProps {
-  /**
-   * @deprecated Use `shouldFocus="first"` instead.
-   */
-  focusFirst?: boolean
-  /**
-   * @deprecated Use `shouldFocus="last"` instead.
-   */
-  focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
-  onEscape?: () => void
-  onItemClick?: () => void
-  onItemSelect?: (index: number) => void
-  originElement?: HTMLElement | null
-  registerElement?: (el: HTMLElement) => () => void
-  shouldFocus?: 'first' | 'last' | null
-  space?: number | number[]
-}
-
-const Root = styled(Box)`
-  outline: none;
-  overflow: auto;
-`
-
-/**
- * @public
- */
-export const Menu = forwardRef(function Menu(
-  props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  ref
-) {
-  const {
-    children,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusFirst,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusLast,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemSelect,
-    onKeyDown,
-    originElement,
-    padding = 1,
-    registerElement,
-    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
-    space = 1,
-    ...restProps
-  } = props
-
-  const {isTopLayer} = useLayer()
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const elementsRef = useRef<HTMLElement[]>([])
-  const [activeIndex, setActiveIndex] = useState(-1)
-  const activeIndexRef = useRef(activeIndex)
-  const activeElement = elementsRef.current[activeIndex] || null
-  const activeElementRef = useRef<HTMLElement | null>(activeElement)
-  const mounted = Boolean(rootElement)
-
-  const setRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      setRootElement(el)
-      if (typeof ref === 'function') ref(el)
-      else if (ref) ref.current = el
-    },
-    [ref]
-  )
-
-  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)
-        activeIndexRef.current = selectedIndex
-      }
-
-      return () => {
-        const idx = elementsRef.current.indexOf(element)
-
-        if (idx > -1) {
-          elementsRef.current.splice(idx, 1)
-        }
-      }
-    },
-    [rootElement]
-  )
-
-  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)
-        activeIndexRef.current = 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)
-        activeIndexRef.current = 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)
-        activeIndexRef.current = 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)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      if (onKeyDown) {
-        onKeyDown(event)
-      }
-    },
-    [activeIndex, onKeyDown, originElement]
-  )
-
-  const handleItemMouseEnter = useCallback((event: React.MouseEvent<HTMLElement>) => {
-    const element = event.currentTarget
-    const currentIndex = elementsRef.current.indexOf(element)
-
-    setActiveIndex(currentIndex)
-    activeIndexRef.current = currentIndex
-  }, [])
-
-  const handleItemMouseLeave = useCallback(() => {
-    rootElement?.focus()
-    setActiveIndex(-1)
-    activeIndexRef.current = -1
-  }, [rootElement])
-
-  // Trigger `onItemSelect` when active index changes
-  useEffect(() => {
-    if (onItemSelect) onItemSelect(activeIndex)
-  }, [activeIndex, onItemSelect])
-
-  useEffect(() => {
-    activeElementRef.current = activeElement
-  }, [activeElement])
-
-  // 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, shouldFocus])
-
-  useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside]
-    ),
-    [rootElement]
-  )
-
-  useGlobalKeyDown(
-    useCallback(
-      (event) => {
-        if (!isTopLayer) return
-
-        if (event.key === 'Escape') {
-          event.stopPropagation()
-          if (onEscape) onEscape()
-        }
-      },
-      [isTopLayer, onEscape]
-    )
-  )
-
-  useEffect(() => {
-    if (!rootElement || !registerElement) return
-
-    return registerElement(rootElement)
-  }, [registerElement, rootElement])
-
-  const value: MenuContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      activeElement,
-      activeIndex,
-      mount,
-      onClickOutside,
-      onEscape,
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
-      onItemClick,
-      registerElement,
-    }),
-    [
-      activeElement,
-      activeIndex,
-      mount,
-      handleItemMouseEnter,
-      handleItemMouseLeave,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      registerElement,
-    ]
-  )
-
-  return (
-    <MenuContext.Provider value={value}>
-      <Root
-        data-ui="Menu"
-        {...restProps}
-        onKeyDown={handleKeyDown}
-        padding={padding}
-        ref={setRef}
-        role="menu"
-        tabIndex={-1}
-      >
-        <Stack space={space}>{children}</Stack>
-      </Root>
-    </MenuContext.Provider>
-  )
-})