@sanity/ui 0.37.2 → 0.37.3

package/src/components/menu/__workshop__/tones.tsx

@@ -1,26 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function TonesStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
-
-  return (
-    <LayerProvider>
-      <Box padding={[4, 5, 6]}>
-        <Card radius={3} shadow={3} tone={parentTone}>
-          <Menu>
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Default" tone="default" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Primary" tone="primary" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Positive" tone="positive" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Caution" tone="caution" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Critical" tone="critical" />
-          </Menu>
-        </Card>
-      </Box>
-    </LayerProvider>
-  )
-}

package/src/components/menu/__workshop__/withoutArrow.tsx

@@ -1,31 +0,0 @@
-import {Box, Button, Menu, MenuButton, MenuItem, Stack} from '@sanity/ui'
-import React from 'react'
-
-export default function WithoutArrowStory() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack>
-        <MenuButton
-          button={<Button mode="ghost" text="Open menu" />}
-          id="without-arrow-example"
-          menu={
-            <Menu>
-              <MenuItem text="Item 1" />
-              <MenuItem text="Item 2" />
-              <MenuItem text="Item 3" />
-            </Menu>
-          }
-          popover={{
-            __unstable_margins: [1, 1, 1, 1],
-            arrow: false,
-            constrainSize: true,
-            fallbackPlacements: ['top-start'],
-            matchReferenceWidth: true,
-            radius: 0,
-            placement: 'bottom-start',
-          }}
-        />
-      </Stack>
-    </Box>
-  )
-}

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,127 +0,0 @@
-/* eslint-disable no-console */
-
-import React, {useCallback, useMemo} 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 handleItemMouseEnter = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          []
-        )
-
-        const handleItemMouseLeave = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          []
-        )
-
-        const value: MenuContextValue = useMemo(
-          () => ({
-            version: 0.0,
-            activeElement: null,
-            activeIndex: 0,
-            mount: (element: HTMLElement | null) => () => console.log(element),
-            onItemClick: () => undefined,
-            onItemMouseEnter: handleItemMouseEnter,
-            onItemMouseLeave: handleItemMouseLeave,
-            onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: handleItemMouseLeave,
-          }),
-          [handleItemMouseEnter, handleItemMouseLeave]
-        )
-
-        return (
-          <MenuContext.Provider value={value}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      const contextValue = log.mock.calls[0][0]
-
-      expect(contextValue.version).toBe(0.0)
-      expect(contextValue.activeIndex).toBe(0)
-      expect(typeof contextValue.mount).toBe('function')
-      expect(typeof contextValue.onItemClick).toBe('function')
-      expect(typeof contextValue.onItemMouseEnter).toBe('function')
-      expect(typeof contextValue.onItemMouseEnter).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() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const value: any = undefined
-
-        return (
-          <MenuContext.Provider value={value}>
-            <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
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const value: any = () => {
-          return {version: 1}
-        }
-
-        return (
-          <MenuContext.Provider value={value}>
-            <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,167 +0,0 @@
-import React, {forwardRef, useCallback, useEffect, useMemo} from 'react'
-import styled from 'styled-components'
-import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
-import {Box, Stack} from '../../primitives'
-import {ResponsivePaddingProps} from '../../primitives/types'
-import {useLayer} from '../../utils'
-import {MenuContext, MenuContextValue} from './menuContext'
-import {useMenuController} from './useMenuController'
-
-/**
- * @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: React.ForwardedRef<HTMLDivElement>
-) {
-  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 forwardedRef = useForwardedRef(ref)
-
-  const {isTopLayer} = useLayer()
-
-  const {
-    activeElement,
-    activeIndex,
-    handleItemMouseEnter,
-    handleItemMouseLeave,
-    handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement,
-  } = useMenuController({onKeyDown, originElement, shouldFocus})
-
-  const handleRefChange = useCallback(
-    (el: HTMLDivElement | null) => {
-      setRootElement(el)
-      forwardedRef.current = el
-    },
-    [forwardedRef, setRootElement]
-  )
-
-  // Trigger `onItemSelect` when active index changes
-  useEffect(() => {
-    if (onItemSelect) onItemSelect(activeIndex)
-  }, [activeIndex, onItemSelect])
-
-  // Close menu when clicking outside
-  useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside]
-    ),
-    [rootElement]
-  )
-
-  // Close menu when pressing Escape
-  useGlobalKeyDown(
-    useCallback(
-      (event) => {
-        if (!isTopLayer) return
-
-        if (event.key === 'Escape') {
-          event.stopPropagation()
-          if (onEscape) onEscape()
-        }
-      },
-      [isTopLayer, onEscape]
-    )
-  )
-
-  // Register root element (for nested menus)
-  useEffect(() => {
-    if (!rootElement || !registerElement) return
-
-    return registerElement(rootElement)
-  }, [registerElement, rootElement])
-
-  const value: MenuContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      activeElement,
-      activeIndex,
-      mount,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      onItemMouseEnter: handleItemMouseEnter,
-      onItemMouseLeave: handleItemMouseLeave,
-      registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
-    }),
-    [
-      activeElement,
-      activeIndex,
-      mount,
-      handleItemMouseEnter,
-      handleItemMouseLeave,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      registerElement,
-    ]
-  )
-
-  return (
-    <MenuContext.Provider value={value}>
-      <Root
-        data-ui="Menu"
-        {...restProps}
-        onKeyDown={handleKeyDown}
-        padding={padding}
-        ref={handleRefChange}
-        role="menu"
-        tabIndex={-1}
-      >
-        <Stack space={space}>{children}</Stack>
-      </Root>
-    </MenuContext.Provider>
-  )
-})

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>
-  )
-})