@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/src/core/components/menu/__workshop__/shouldFocus.tsx

@@ -1,42 +0,0 @@
-import {Button, Flex, LayerProvider, Menu, MenuDivider, MenuItem, Popover} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {Fragment, useCallback, useState} from 'react'
-
-const ITEMS = [...Array(8).keys()].map((num) => ({
-  title: `Item ${num + 1}`,
-  divider: num === 3,
-}))
-
-const OPTIONS = {first: 'first', last: 'last'}
-
-export default function ShouldFocusStory(): React.JSX.Element {
-  const shouldFocus = useSelect<keyof typeof OPTIONS>('Should focus', OPTIONS, 'first')
-
-  const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
-  const handleToggleOpen = useCallback(() => setPopoverOpen((v) => !v), [])
-
-  return (
-    <LayerProvider>
-      <Flex align="center" justify="center" padding={4}>
-        <Popover
-          content={
-            <Menu shouldFocus={shouldFocus}>
-              {ITEMS.map((item) => {
-                return (
-                  <Fragment key={item.title}>
-                    <MenuItem text={item.title} />
-                    {item.divider && <MenuDivider />}
-                  </Fragment>
-                )
-              })}
-            </Menu>
-          }
-          open={popoverOpen}
-          portal
-        >
-          <Button text="Open menu" onClick={handleToggleOpen} />
-        </Popover>
-      </Flex>
-    </LayerProvider>
-  )
-}

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

@@ -1,25 +0,0 @@
-import {CubeIcon} from '@sanity/icons'
-import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
-import {ELEMENT_TONES} from '@sanity/ui/theme'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
-
-export default function TonesStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
-
-  return (
-    <LayerProvider>
-      <Box padding={[4, 5, 6]}>
-        <Card radius={3} shadow={3} tone={parentTone}>
-          <Menu>
-            {ELEMENT_TONES.map((tone) => (
-              <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />
-            ))}
-          </Menu>
-        </Card>
-      </Box>
-    </LayerProvider>
-  )
-}

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

@@ -1,32 +0,0 @@
-import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  __unstable_margins: [1, 1, 1, 1],
-  arrow: false,
-  constrainSize: true,
-  fallbackPlacements: ['top-start'],
-  matchReferenceWidth: true,
-  radius: 0,
-  placement: 'bottom-start',
-}
-
-export default function WithoutArrowStory(): React.JSX.Element {
-  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={POPOVER_PROPS}
-        />
-      </Stack>
-    </Box>
-  )
-}

package/src/core/components/menu/helpers.ts

@@ -1,82 +0,0 @@
-import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers/element'
-
-/**
- * @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/core/components/menu/menu.test.tsx

@@ -1,129 +0,0 @@
-/* eslint-disable no-console */
-
-import {type MouseEvent, useCallback, useMemo} from 'react'
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {MenuContext, type MenuContextValue} from './menuContext'
-import {useMenu} from './useMenu'
-
-describe('components/menu', () => {
-  describe('useMenu', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootMenu = useMenu()
-
-        log(rootMenu)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const handleItemMouseEnter = useCallback(
-          (event: MouseEvent<HTMLElement>) => console.log(event),
-          [],
-        )
-
-        const handleItemMouseLeave = useCallback(
-          (event: 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 = vi.fn()
-
-      function Debug() {
-        try {
-          useMenu()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <MenuContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <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 = vi.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
-
-        return (
-          <MenuContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useMenu(): the context value is not compatible')
-    })
-  })
-})

package/src/core/components/menu/menu.tsx

@@ -1,179 +0,0 @@
-import {menu, type PaddingStyleProps, type ResponsiveProp} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
-import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
-
-import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
-import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
-import {Box} from '../../primitives/box/box'
-import {useLayer} from '../../primitives/layer/useLayer'
-import {Stack} from '../../primitives/stack/stack'
-import type {ComponentType, Props} from '../../types'
-import {MenuContext, type MenuContextValue} from './menuContext'
-import {useMenuController} from './useMenuController'
-
-/** @public */
-export const DEFAULT_MENU_ELEMENT = 'div'
-
-/** @public */
-export type MenuOwnProps = PaddingStyleProps & {
-  'gap'?: ResponsiveProp<Space>
-  'onClickOutside'?: (event: MouseEvent) => void
-  'onEscape'?: () => void
-  'onItemClick'?: () => void
-  'onItemSelect'?: (index: number) => void
-  'originElement'?: HTMLElement | null
-  'registerElement'?: (el: HTMLElement) => () => void
-  'shouldFocus'?: 'first' | 'last' | null
-  'aria-labelledby'?: string
-}
-
-/** @public */
-export type MenuElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
-
-/**
- * The `Menu` component is a building block for application menus.
- *
- * @public
- */
-export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
-  props: MenuProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_MENU_ELEMENT,
-    children,
-    className,
-    gap = 1,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemSelect,
-    onKeyDown,
-    originElement,
-    padding = 1,
-    ref: forwardedRef,
-    registerElement,
-    shouldFocus: _shouldFocus,
-    ...rest
-  } = props as MenuProps<typeof DEFAULT_MENU_ELEMENT>
-
-  const shouldFocus = _shouldFocus ?? null
-
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  const {isTopLayer} = useLayer()
-
-  const {
-    activeElement,
-    activeIndex,
-    handleItemMouseEnter,
-    handleItemMouseLeave,
-    handleKeyDown,
-    mount,
-  } = useMenuController({
-    onKeyDown,
-    originElement,
-    shouldFocus,
-    rootElementRef: ref,
-  })
-
-  const unregisterElementRef = useRef<(() => void) | null>(null)
-  const handleRefChange = useCallback(
-    (el: HTMLDivElement | null) => {
-      // Run cleanup of previously registered elements
-      if (unregisterElementRef.current) {
-        // The `registerElement` callback were originally used in a `useEffect`, so it returns a cleanup function that is a bit gnarly to handle in a ref callback.
-        // Since we can't change the `registerElement` implementation itself without making breaking change,
-        // that is explained in the code comments for createGlobalScopedContext.tsx,
-        // we need to handle with a ref that holds on to the cleanup function last returned when the ref callback is called.
-        unregisterElementRef.current()
-        unregisterElementRef.current = null
-      }
-
-      ref.current = el
-
-      // Register root element (for nested menus)
-      if (ref.current && registerElement) {
-        unregisterElementRef.current = registerElement(ref.current)
-      }
-    },
-    [registerElement],
-  )
-
-  // Trigger `onItemSelect` when active index changes
-  useEffect(() => {
-    if (onItemSelect) onItemSelect(activeIndex)
-  }, [activeIndex, onItemSelect])
-
-  // Close menu when clicking outside
-  useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current])
-
-  // Close menu when pressing Escape
-  useGlobalKeyDown(
-    useCallback(
-      (event) => {
-        if (!isTopLayer) return
-
-        if (event.key === 'Escape') {
-          event.stopPropagation()
-          if (onEscape) onEscape()
-        }
-      },
-      [isTopLayer, onEscape],
-    ),
-  )
-
-  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}>
-      <Box
-        data-ui="Menu"
-        {...rest}
-        as={as}
-        className={menu({className})}
-        onKeyDown={handleKeyDown}
-        overflow="auto"
-        outline="none"
-        padding={padding}
-        ref={handleRefChange}
-        role="menu"
-        tabIndex={-1}
-      >
-        <Stack gap={gap}>{children}</Stack>
-      </Box>
-    </MenuContext.Provider>
-  )
-}