@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -0,0 +1,217 @@
+import {ChevronRightIcon} from '@sanity/icons'
+import {isValidElement, useCallback, useEffect, useState} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {useArrayProp} from '../../hooks'
+import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
+import {Selectable} from '../../primitives/_selectable'
+import {useRootTheme} from '../../theme'
+import {Radius, SelectableTone} from '../../types'
+import {Menu, MenuProps} from './menu'
+import {useMenu} from './useMenu'
+
+/**
+ * @public
+ */
+export interface MenuGroupProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  icon?: React.ElementType | React.ReactNode
+  menu?: Omit<
+    MenuProps,
+    | 'onClickOutside'
+    | 'onEscape'
+    | 'onItemClick'
+    | 'onKeyDown'
+    | 'onMouseEnter'
+    | 'registerElement'
+    | 'shouldFocus'
+    | 'onBlurCapture'
+  >
+  padding?: number | number[]
+  popover?: Omit<PopoverProps, 'content' | 'open'>
+  radius?: Radius | Radius[]
+  space?: number | number[]
+  text: React.ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export function MenuGroup(
+  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
+    MenuGroupProps,
+): React.JSX.Element {
+  const {
+    as = 'button',
+    children,
+    fontSize = 1,
+    icon: IconComponent,
+    menu: menuProps,
+    onClick,
+    padding = 3,
+    popover,
+    radius = 2,
+    space = 3,
+    text,
+    tone = 'default',
+    ...restProps
+  } = props
+  const menu = useMenu()
+  const {scheme} = useRootTheme()
+  const {
+    activeElement,
+    mount,
+    onClickOutside,
+    onEscape,
+    onItemClick,
+    onItemMouseEnter: _onItemMouseEnter,
+    registerElement,
+  } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
+  const [open, setOpen] = useState(false)
+  const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+  const [withinMenu, setWithinMenu] = useState(false)
+
+  const handleMouseEnter = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      setWithinMenu(false)
+      onItemMouseEnter(event)
+      setOpen(true)
+    },
+    [onItemMouseEnter],
+  )
+
+  const handleMenuKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.stopPropagation()
+
+        setOpen(false)
+
+        requestAnimationFrame(() => {
+          rootElement?.focus()
+        })
+      }
+    },
+    [rootElement],
+  )
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      onClick?.(event)
+
+      setShouldFocus('first')
+      setOpen(true)
+    },
+    [onClick],
+  )
+
+  const handleChildItemClick = useCallback(() => {
+    setOpen(false)
+    onItemClick?.()
+  }, [onItemClick])
+
+  const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
+
+  // Register the menu item element
+  useEffect(() => mount(rootElement), [mount, rootElement])
+
+  // Close child menu when a sibling item becomes active
+  useEffect(() => {
+    if (!active) setOpen(false)
+  }, [active])
+
+  // Update state when child menu is no longer open
+  useEffect(() => {
+    if (!open) setWithinMenu(false)
+  }, [open])
+
+  // Reset the shouldFocus state after it has been used
+  useEffect(() => {
+    if (!shouldFocus) return
+    // The useMenuController effect that handles `shouldFocus` schedules a request animation frame where it's processed.
+    // By doing the same here, we ensure that the reset is processed after the focus change.
+    const rafId = requestAnimationFrame(() => setShouldFocus(null))
+
+    return () => cancelAnimationFrame(rafId)
+  }, [shouldFocus])
+
+  const childMenu = (
+    <Menu
+      {...menuProps}
+      onClickOutside={onClickOutside}
+      onEscape={onEscape}
+      onItemClick={handleChildItemClick}
+      onKeyDown={handleMenuKeyDown}
+      onMouseEnter={handleMenuMouseEnter}
+      registerElement={registerElement}
+      shouldFocus={shouldFocus}
+    >
+      {children}
+    </Menu>
+  )
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = event.currentTarget
+
+    if (document.activeElement !== target) {
+      return
+    }
+
+    if (event.key === 'ArrowRight') {
+      setShouldFocus('first')
+      setOpen(true)
+      setWithinMenu(true)
+
+      return
+    }
+  }, [])
+
+  return (
+    <Popover {...popover} content={childMenu} data-ui="MenuGroup__popover" open={open}>
+      <Selectable
+        data-as={as}
+        data-ui="MenuGroup"
+        forwardedAs={as}
+        {...restProps}
+        aria-pressed={as === 'button' ? withinMenu : undefined}
+        data-pressed={as !== 'button' ? withinMenu : undefined}
+        data-selected={!withinMenu && active ? '' : undefined}
+        $radius={useArrayProp(radius)}
+        $tone={tone}
+        $scheme={scheme}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onMouseEnter={handleMouseEnter}
+        ref={setRootElement}
+        tabIndex={-1}
+        type={as === 'button' ? 'button' : undefined}
+      >
+        <Flex gap={space} padding={padding}>
+          {IconComponent && (
+            <Text size={fontSize}>
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
+            </Text>
+          )}
+
+          <Box flex={1}>
+            <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+              {text}
+            </Text>
+          </Box>
+
+          <Text size={fontSize}>
+            <ChevronRightIcon />
+          </Text>
+        </Flex>
+      </Selectable>
+    </Popover>
+  )
+}
+
+MenuGroup.displayName = 'MenuGroup'

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

@@ -0,0 +1,180 @@
+import {
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {useArrayProp} from '../../hooks'
+import {Box, Flex, Text} from '../../primitives'
+import {Selectable} from '../../primitives/_selectable'
+import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
+import {useRootTheme} from '../../theme'
+import {SelectableTone} from '../../types/selectable'
+import {Hotkeys} from '../hotkeys'
+import {useMenu} from './useMenu'
+
+/**
+ * @public
+ */
+export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  hotkeys?: string[]
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
+  pressed?: boolean
+  selected?: boolean
+  space?: number | number[]
+  text?: React.ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export const MenuItem = forwardRef(function MenuItem(
+  props: MenuItemProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    as = 'button',
+    children,
+    disabled,
+    fontSize = 1,
+    hotkeys,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    onClick,
+    padding = 3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    pressed,
+    radius = 2,
+    selected: selectedProp,
+    space = 3,
+    text,
+    tone = 'default',
+    ...restProps
+  } = props
+  const {scheme} = useRootTheme()
+  const menu = useMenu()
+  const {
+    activeElement,
+    mount,
+    onItemClick,
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave,
+  } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+
+  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (disabled) return
+      if (onClick) onClick(event)
+      if (onItemClick) onItemClick()
+    },
+    [disabled, onClick, onItemClick],
+  )
+
+  const paddingProps = useMemo(
+    () => ({
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+    }),
+    [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
+  )
+
+  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
+
+  const setRef = useCallback((el: HTMLDivElement | null) => {
+    ref.current = el
+    setRootElement(el)
+  }, [])
+
+  return (
+    <Selectable
+      data-ui="MenuItem"
+      role="menuitem"
+      {...restProps}
+      data-pressed={as !== 'button' && pressed ? '' : undefined}
+      data-selected={active ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+      forwardedAs={as}
+      $radius={useArrayProp(radius)}
+      $padding={useArrayProp(0)}
+      $tone={disabled ? 'default' : tone}
+      $scheme={scheme}
+      disabled={disabled}
+      onClick={handleClick}
+      onMouseEnter={onItemMouseEnter}
+      onMouseLeave={onItemMouseLeave}
+      ref={setRef}
+      tabIndex={-1}
+      type={as === 'button' ? 'button' : undefined}
+    >
+      {(IconComponent || text || IconRightComponent) && (
+        <Flex as="span" gap={space} align="center" {...paddingProps}>
+          {IconComponent && (
+            <Text size={fontSize}>
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
+            </Text>
+          )}
+
+          {text && (
+            <Box flex={1}>
+              <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+                {text}
+              </Text>
+            </Box>
+          )}
+
+          {hotkeys && (
+            <Hotkeys
+              fontSize={hotkeysFontSize}
+              keys={hotkeys}
+              style={{marginTop: -4, marginBottom: -4}}
+            />
+          )}
+
+          {IconRightComponent && (
+            <Text size={fontSize}>
+              {isValidElement(IconRightComponent) && IconRightComponent}
+              {isValidElementType(IconRightComponent) && <IconRightComponent />}
+            </Text>
+          )}
+        </Flex>
+      )}
+      {children && (
+        <Box as="span" {...paddingProps}>
+          {children}
+        </Box>
+      )}
+    </Selectable>
+  )
+})
+MenuItem.displayName = 'ForwardRef(MenuItem)'

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

@@ -0,0 +1,231 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
+import {_getFocusableElements, _sortElements} from './helpers'
+
+/**
+ * @internal
+ */
+export interface MenuController {
+  activeElement: HTMLElement | null
+  activeIndex: number
+  handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  handleItemMouseLeave: () => void
+  handleKeyDown: (event: React.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?: React.KeyboardEventHandler
+  originElement?: HTMLElement | null
+  shouldFocus: 'first' | 'last' | null
+  rootElementRef: React.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 = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
+  const mounted = Boolean(rootElementRef.current)
+
+  const setActiveIndex = useCallback((nextActiveIndex: number) => {
+    _setActiveIndex(nextActiveIndex)
+    activeIndexRef.current = nextActiveIndex
+  }, [])
+
+  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: React.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: React.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 (!mounted) return
+
+    const rafId = requestAnimationFrame(() => {
+      if (activeIndex === -1) {
+        if (shouldFocus === 'first') {
+          const focusableElements = _getFocusableElements(elementsRef.current)
+          const el = focusableElements[0]
+
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el)
+
+            setActiveIndex(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)
+          }
+        }
+
+        return
+      }
+
+      const element = elementsRef.current[activeIndex] || null
+
+      element?.focus()
+    })
+
+    return () => cancelAnimationFrame(rafId)
+  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
+
+  return {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+  }
+}

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -0,0 +1,70 @@
+import {
+  Box,
+  Card,
+  CodeSkeleton,
+  Container,
+  Flex,
+  HeadingSkeleton,
+  LabelSkeleton,
+  Skeleton,
+  Stack,
+  Text,
+  TextSkeleton,
+} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function SkeletonDelayStory() {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+  const animated = useBoolean('Animated', true)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Container width={1}>
+        <Text muted>Delayed by 2000ms</Text>
+        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
+          <Flex align="center">
+            <Skeleton
+              style={{width: 90, height: 90}}
+              radius={2}
+              animated={animated}
+              marginRight={3}
+              delay={1000}
+            />
+            <Stack space={2} flex={1}>
+              <HeadingSkeleton
+                size={4}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+              <TextSkeleton
+                size={1}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+              <LabelSkeleton
+                size={1}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+              <CodeSkeleton
+                size={1}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+            </Stack>
+          </Flex>
+        </Card>
+      </Container>
+    </Box>
+  )
+}