@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/components/menu/useMenu.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,245 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,94 @@
+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
+}