@sanity/ui 4.0.0-beta.8 → 4.0.0-next.0

package/src/components/menu/useMenu.ts

@@ -1,21 +0,0 @@
-import {use} from 'react'
-
-import {isRecord} from '../../core/lib/isRecord'
-import {MenuContext, type MenuContextValue} from './MenuContext'
-
-export function useMenu(): MenuContextValue {
-  const value = use(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: 2`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 2) {
-    throw new Error('useMenu(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/components/menu/useMenuController.ts

@@ -1,245 +0,0 @@
-import {
-  type KeyboardEvent,
-  type KeyboardEventHandler,
-  type MouseEvent,
-  type MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-
-import {_getFocusableElements, _sortElements} from './helpers'
-
-/**
- * @internal
- */
-export interface MenuController {
-  activeElement: HTMLElement | null
-  activeIndex: number
-  handleItemMouseEnter: (event: MouseEvent<HTMLElement>) => void
-  handleItemMouseLeave: () => void
-  handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
-  mount: (element: HTMLElement | null, selected?: boolean) => () => void
-}
-
-/**
- * This controller is responsible for controlling UI menu state.
- *
- * @internal
- */
-export function useMenuController(props: {
-  onKeyDown?: KeyboardEventHandler
-  originElement?: HTMLElement | null
-  shouldFocus: 'first' | 'last' | null
-  rootElementRef: MutableRefObject<HTMLDivElement | null>
-}): MenuController {
-  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
-  const elementsRef = useRef<HTMLElement[]>([])
-  const [activeIndex, _setActiveIndex] = useState(-1)
-  const activeIndexRef = useRef(activeIndex)
-  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null)
-
-  const setActiveIndex = useCallback((nextActiveIndex: number) => {
-    _setActiveIndex(nextActiveIndex)
-    activeIndexRef.current = nextActiveIndex
-
-    setActiveElement(elementsRef.current[nextActiveIndex] || null)
-  }, [])
-
-  const mount = useCallback(
-    (element: HTMLElement | null, selected?: boolean): (() => void) => {
-      if (!element) return () => undefined
-
-      if (elementsRef.current.indexOf(element) === -1) {
-        elementsRef.current.push(element)
-        _sortElements(rootElementRef.current, 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)
-        }
-      }
-    },
-    [rootElementRef, setActiveIndex],
-  )
-
-  const handleKeyDown = useCallback(
-    (event: 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[activeIndexRef.current]
-
-        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[activeIndexRef.current]
-
-        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)
-      }
-    },
-    [onKeyDown, originElement, setActiveIndex],
-  )
-
-  const handleItemMouseEnter = useCallback(
-    (event: MouseEvent<HTMLElement>) => {
-      const element = event.currentTarget
-      const currentIndex = elementsRef.current.indexOf(element)
-
-      setActiveIndex(currentIndex)
-    },
-    [setActiveIndex],
-  )
-
-  const handleItemMouseLeave = useCallback(() => {
-    // Set the active index to -2 to deactivate all menu items
-    // when the user moves the mouse away from the menu item.
-    // We avoid using -1 because it would focus the first menu item,
-    // which would be incorrect when the user hovers over a gap
-    // between two menu items or a menu divider.
-    setActiveIndex(-2)
-    rootElementRef.current?.focus()
-  }, [rootElementRef, setActiveIndex])
-
-  // Set focus on the currently active element
-  useEffect(() => {
-    if (!rootElementRef.current) return
-
-    const rafId = requestAnimationFrame(() => {
-      let i = activeIndex
-
-      if (i === -1) {
-        if (shouldFocus === 'first') {
-          const focusableElements = _getFocusableElements(elementsRef.current)
-          const el = focusableElements[0]
-
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el)
-
-            setActiveIndex(currentIndex)
-            i = 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)
-            i = currentIndex
-          }
-        }
-
-        return
-      }
-
-      const element = elementsRef.current[i] || null
-
-      element?.focus()
-    })
-
-    return () => cancelAnimationFrame(rafId)
-  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
-
-  return {
-    activeElement,
-    activeIndex,
-    handleItemMouseEnter,
-    handleItemMouseLeave,
-    handleKeyDown,
-    mount,
-  }
-}

package/src/components/tab/Tab.tsx

@@ -1,135 +0,0 @@
-import {use, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {Button, type ButtonOwnProps} from '../../primitives/button/Button'
-import {TabContext} from './TabListContext'
-
-/** @public */
-export const DEFAULT_TAB_ELEMENT = 'button'
-
-/** @public */
-export interface TabOwnProps extends ButtonOwnProps {
-  /**
-   * The `id` of the corresponding `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  'focused'?: boolean
-  'label'?: React.ReactNode
-  'onActivate'?: () => void
-}
-
-/** @public */
-export type TabElementType = 'button' | ComponentType
-
-/** @public */
-export type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
-
-/** @public */
-export function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
-  props: TabProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_TAB_ELEMENT,
-    id,
-    fontSize = 1,
-    label,
-    onActivate,
-    onBlur,
-    onClick,
-    onFocus,
-    padding = 2,
-    ref: forwardedRef,
-    selected: selectedProp,
-    ...rest
-  } = props as TabProps<typeof DEFAULT_TAB_ELEMENT>
-
-  const {focusTab, focusedId, activateTab, registerTab, activeId} = use(TabContext) ?? {}
-  const focused = Boolean(id && focusedId === id)
-  const active = Boolean(id && activeId === id)
-  const activeRef = useRef(active)
-  const selected = selectedProp ?? active
-  const ref = useRef<HTMLButtonElement | null>(null)
-  const focusedRef = useRef(false)
-
-  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (onClick) onClick(event)
-      activateTab?.(id)
-    },
-    [onClick, activateTab, id],
-  )
-
-  const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
-      focusedRef.current = false
-      if (onBlur) onBlur(event)
-      focusTab?.(undefined)
-    },
-    [onBlur, focusTab],
-  )
-
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
-      focusedRef.current = true
-      if (onFocus) onFocus(event)
-      focusTab?.(id)
-    },
-    [onFocus, focusTab, id],
-  )
-
-  // register the tab with the list
-  useEffect(() => {
-    const element = ref.current
-
-    if (registerTab && element) {
-      return registerTab(id, element, selectedProp)
-    }
-
-    return undefined
-  }, [registerTab, id, selected, selectedProp])
-
-  // focus the tab when using keyboard navigation
-  useEffect(() => {
-    if (focused) {
-      ref.current?.focus()
-    }
-  }, [focused])
-
-  useEffect(() => {
-    const wasActive = activeRef.current
-
-    activeRef.current = active
-
-    if (!wasActive && active) onActivate?.()
-  }, [active, selectedProp, onActivate])
-
-  return (
-    <Button
-      data-ui="Tab"
-      {...rest}
-      ref={ref}
-      aria-selected={selected ? 'true' : 'false'}
-      as={as}
-      flex="none"
-      fontSize={fontSize}
-      id={id}
-      maxWidth="fill"
-      mode="bleed"
-      padding={padding}
-      role="tab"
-      selected={selected}
-      tabIndex={selected ? 0 : -1}
-      text={label}
-      type="button"
-      onBlur={handleBlur}
-      onClick={handleClick}
-      onFocus={handleFocus}
-    />
-  )
-}

package/src/components/tab/TabList.tsx

@@ -1,157 +0,0 @@
-import {type KeyboardEvent, useCallback, useEffect, useRef, useState} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {Flex, type FlexOwnProps} from '../../primitives/flex/Flex'
-import {TabContext} from './TabListContext'
-import type {TabContextListValue} from './types'
-
-/** @public */
-export const DEFAULT_TAB_LIST_ELEMENT = 'div'
-
-/** @public */
-export interface TabListOwnProps extends FlexOwnProps {
-  autoActivate?: boolean
-}
-
-/** @public */
-export type TabListElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type TabListProps<E extends TabListElementType = TabListElementType> = Omit<
-  Props<TabListOwnProps, E>,
-  'role'
->
-
-/** @public */
-export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
-  props: TabListProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_TAB_LIST_ELEMENT,
-    autoActivate = false,
-    children,
-    gap = 2,
-    onKeyDown,
-    wrap = 'wrap',
-    ...rest
-  } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
-
-  const [focusedId, setFocusedId] = useState<string | undefined>(undefined)
-  const [activeId, setActiveId] = useState<string | undefined>(undefined)
-  const [tabs, setTabs] = useState<{id: string; element: HTMLElement}[]>(() => [])
-
-  const tabsRef = useRef(tabs)
-
-  useEffect(() => {
-    tabsRef.current = tabs
-  }, [tabs])
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      onKeyDown?.(event)
-
-      if (event.key === 'ArrowLeft') {
-        setFocusedId((prevId) => {
-          const numTabs = tabsRef.current.length
-          const prevIndex = prevId ? tabsRef.current.findIndex((tab) => tab.id === prevId) : -1
-          const nextIndex = (prevIndex + numTabs - 1) % numTabs
-          const nextId = tabsRef.current[nextIndex]?.id
-
-          if (autoActivate) setActiveId(nextId)
-
-          return nextId
-        })
-        return
-      }
-
-      if (event.key === 'ArrowRight') {
-        setFocusedId((prevId) => {
-          const numTabs = tabsRef.current.length
-          const prevIndex = prevId ? tabsRef.current.findIndex((tab) => tab.id === prevId) : -1
-          const nextIndex = (prevIndex + 1) % numTabs
-
-          const nextId = tabsRef.current[nextIndex]?.id
-
-          if (autoActivate) setActiveId(nextId)
-
-          return nextId
-        })
-        return
-      }
-
-      // Home (Optional): Moves focus to the first tab.
-      if (event.key === 'Home') {
-        const nextId = tabsRef.current[0]?.id
-        if (autoActivate) setActiveId(nextId)
-        setFocusedId(nextId)
-        return
-      }
-
-      // End (Optional): Moves focus to the last tab.
-      if (event.key === 'End') {
-        const nextId = tabsRef.current[tabsRef.current.length - 1]?.id
-        if (autoActivate) setActiveId(nextId)
-        setFocusedId(nextId)
-        return
-      }
-    },
-    [autoActivate, onKeyDown],
-  )
-
-  const context: TabContextListValue = {
-    version: 0.0,
-    focusedId,
-    activeId: activeId,
-    registerTab: (id, element, selectedProp) => {
-      setTabs((prevTabs) => {
-        const newTabs = [...prevTabs]
-        newTabs.push({id, element})
-        newTabs.sort((a, b) => {
-          // sort by position in DOM
-          return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING
-            ? -1
-            : 1
-        })
-        return newTabs
-      })
-
-      if (selectedProp) {
-        setActiveId(id)
-      }
-
-      return () => {
-        setTabs((prevTabs) => {
-          const newTabs = [...prevTabs]
-
-          newTabs.splice(
-            newTabs.findIndex((tab) => tab.id === id),
-            1,
-          )
-
-          return newTabs
-        })
-      }
-    },
-    focusTab: (id) => {
-      setFocusedId(id)
-      if (autoActivate) setActiveId(id)
-    },
-    activateTab: setActiveId,
-  }
-
-  return (
-    <TabContext.Provider value={context}>
-      <Flex
-        data-ui="TabList"
-        {...rest}
-        as={as}
-        gap={gap}
-        role="tablist"
-        wrap={wrap}
-        onKeyDown={handleKeyDown}
-      >
-        {children}
-      </Flex>
-    </TabContext.Provider>
-  )
-}

package/src/components/tab/TabListContext.ts

@@ -1,10 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
-import type {TabContextListValue} from './types'
-
-/**
- * @internal
- */
-export const TabContext: Context<TabContextListValue | null> =
-  createGlobalScopedContext<TabContextListValue | null>('@sanity/ui/v4/tree', null)

package/src/components/tab/TabPanel.tsx

@@ -1,94 +0,0 @@
-import {tab_panel} from '@sanity/ui-css'
-import {useEffect, useImperativeHandle, useRef, useState} from 'react'
-
-import {isFocusable} from '../../core/helpers/focus'
-import type {ComponentType, Props} from '../../core/types'
-import {Box, type BoxOwnProps} from '../../primitives/box/Box'
-
-/** @public */
-export const DEFAULT_TAB_PANEL_ELEMENT = 'div'
-
-/** @public */
-export type TabPanelOwnProps = BoxOwnProps & {
-  /**
-   * The `id` of the corresponding `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
-}
-
-/** @public */
-export type TabPanelElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
-  TabPanelOwnProps,
-  E
->
-
-/** @public */
-export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
-  props: TabPanelProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_TAB_PANEL_ELEMENT,
-    children,
-    className,
-    ref: forwardedRef,
-    ...rest
-  } = props as TabPanelProps<typeof DEFAULT_TAB_PANEL_ELEMENT>
-
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  const [hasFocusableChildren, setHasFocusableChildren] = useState(false)
-
-  useEffect(() => {
-    const el = ref.current
-
-    if (!el) return undefined
-
-    const mo = new MutationObserver(() => {
-      setHasFocusableChildren(_hasFocusableChildren(el))
-    })
-
-    mo.observe(el, {
-      childList: true,
-      subtree: true,
-    })
-
-    return () => {
-      mo.disconnect()
-    }
-  }, [])
-
-  return (
-    <Box
-      data-ui="TabPanel"
-      {...rest}
-      ref={ref}
-      as={as}
-      className={tab_panel({className})}
-      role="tabpanel"
-      tabIndex={hasFocusableChildren ? undefined : 0}
-    >
-      {children}
-    </Box>
-  )
-}
-
-// check if children has focusable elements
-function _hasFocusableChildren(element: HTMLElement) {
-  for (let i = 0; i < element.childNodes.length; i++) {
-    const child = element.childNodes[i]
-
-    if (child instanceof HTMLElement) {
-      if (isFocusable(child) || _hasFocusableChildren(child)) {
-        return true
-      }
-    }
-  }
-
-  return false
-}