@sanity/ui 3.3.2 → 3.3.4

package/src/core/components/index.ts

@@ -1,9 +0,0 @@
-export * from './autocomplete'
-export * from './breadcrumbs'
-export * from './dialog'
-export * from './hotkeys'
-export * from './menu'
-export * from './skeleton'
-export * from './tab'
-export * from './toast'
-export * from './tree'

package/src/core/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/core/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/core/components/menu/menu.spacing.test.tsx

@@ -1,68 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {Stack} from '../../primitives'
-import {Menu} from './menu'
-
-vi.mock('../../primitives', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../primitives')>()
-
-  return {
-    ...actual,
-    // oxlint-disable-next-line no-unsafe-type-assertion
-    Stack: vi.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
-  }
-})
-
-vi.mock('../../utils', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../utils')>()
-
-  return {
-    ...actual,
-    useLayer: () => ({isTopLayer: true}),
-  }
-})
-
-describe('components/menu spacing', () => {
-  const mockedStack = vi.mocked(Stack)
-
-  beforeEach(() => {
-    mockedStack.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Menu space={2}>
-        <div>Item</div>
-      </Menu>,
-    )
-    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({gap: 2}),
-    )
-
-    mockedStack.mockClear()
-    render(
-      <Menu gap={2}>
-        <div>Item</div>
-      </Menu>,
-    )
-    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({gap: 2}),
-    )
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Menu gap={3} space={1}>
-        <div>Item</div>
-      </Menu>,
-    )
-    const propsList = mockedStack.mock.calls.map(([props]) => props)
-    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
-    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
-  })
-})

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

@@ -1,128 +0,0 @@
-/** @vitest-environment jsdom */
-
-import React, {useCallback, useMemo} from 'react'
-import {describe, expect, it, vi} from 'vitest'
-
-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 = vi.fn()
-
-      function Debug() {
-        const rootMenu = useMenu()
-
-        log(rootMenu)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const handleItemMouseEnter = useCallback(
-          // oxlint-disable-next-line no-console
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          [],
-        )
-
-        const handleItemMouseLeave = useCallback(
-          // oxlint-disable-next-line no-console
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          [],
-        )
-
-        const value = useMemo(
-          () =>
-            ({
-              version: 2,
-              activeElement: null,
-              // oxlint-disable-next-line no-console
-              mount: (element: HTMLElement | null) => () => console.log(element),
-              onItemClick: () => undefined,
-              onItemMouseEnter: handleItemMouseEnter,
-              onItemMouseLeave: handleItemMouseLeave,
-            }) satisfies MenuContextValue,
-          [handleItemMouseEnter, handleItemMouseLeave],
-        )
-
-        return (
-          <MenuContext.Provider value={value}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      const contextValue = log.mock.calls[0][0]
-
-      expect(contextValue.version).toBe(2)
-      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() {
-        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 = 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
-        const value: any = () => {
-          return {version: 1}
-        }
-
-        return (
-          // oxlint-disable-next-line jsx-no-constructed-context-values
-          <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/core/components/menu/menu.tsx

@@ -1,180 +0,0 @@
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useClickOutsideEvent, 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
-  'gap'?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  'space'?: number | number[]
-  'aria-labelledby'?: string
-  'onBlurCapture'?: (event: FocusEvent) => void
-}
-
-const StyledMenu = styled(Box)`
-  outline: none;
-  overflow: auto;
-`
-
-/**
- * The `Menu` component is a building block for application menus.
- *
- * @public
- */
-export const Menu = forwardRef(function Menu(
-  props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    children,
-    // oxlint-disable-next-line no-deprecated, no-unused-vars
-    focusFirst,
-    // oxlint-disable-next-line no-deprecated, no-unused-vars
-    focusLast,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemSelect,
-    onKeyDown,
-    originElement,
-    padding = 1,
-    registerElement,
-    shouldFocus: _shouldFocus,
-    gap,
-    // oxlint-disable-next-line no-deprecated
-    space: deprecated_space = 1,
-    ...restProps
-  } = props
-  const spacing = gap === undefined ? deprecated_space : gap
-  const shouldFocus =
-    // oxlint-disable-next-line no-deprecated
-    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || 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 = useMemo(
-    () =>
-      ({
-        version: 2,
-        activeElement,
-        mount,
-        onClickOutside,
-        onEscape,
-        onItemClick,
-        onItemMouseEnter: handleItemMouseEnter,
-        onItemMouseLeave: handleItemMouseLeave,
-        registerElement,
-      }) satisfies MenuContextValue,
-    [
-      activeElement,
-      mount,
-      handleItemMouseEnter,
-      handleItemMouseLeave,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      registerElement,
-    ],
-  )
-
-  return (
-    <MenuContext.Provider value={value}>
-      <StyledMenu
-        data-ui="Menu"
-        {...restProps}
-        onKeyDown={handleKeyDown}
-        padding={padding}
-        ref={handleRefChange}
-        role="menu"
-        tabIndex={-1}
-      >
-        <Stack gap={spacing}>{children}</Stack>
-      </StyledMenu>
-    </MenuContext.Provider>
-  )
-})
-Menu.displayName = 'ForwardRef(Menu)'