@sanity/ui 3.0.0-static.9 → 3.0.0

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

@@ -1,228 +0,0 @@
-import {ChevronRightIcon} from '@sanity/icons'
-import {GapStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {
-  ElementType,
-  isValidElement,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {Props, Radius, SelectableTone} from '../../types'
-import {Menu, MenuProps} from './menu'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuGroupProps extends GapStyleProps {
-  disabled?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType | ReactNode
-  menu?: Omit<
-    MenuProps,
-    | 'onClickOutside'
-    | 'onEscape'
-    | 'onItemClick'
-    | 'onKeyDown'
-    | 'onMouseEnter'
-    | 'registerElement'
-    | 'shouldFocus'
-    | 'onBlurCapture'
-  >
-  padding?: ResponsiveProp<Space>
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  text: ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
-  const {
-    as = 'button',
-    children,
-    fontSize = 1,
-    gap,
-    gapX,
-    gapY,
-    icon: IconComponent,
-    menu: menuProps,
-    onClick,
-    padding = 3,
-    popover,
-    radius = 2,
-    space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const menu = useMenu()
-
-  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: MouseEvent<HTMLElement>) => {
-      setWithinMenu(false)
-      onItemMouseEnter(event)
-      setOpen(true)
-    },
-    [onItemMouseEnter],
-  )
-
-  const handleMenuKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.stopPropagation()
-
-        setOpen(false)
-
-        requestAnimationFrame(() => {
-          rootElement?.focus()
-        })
-      }
-    },
-    [rootElement],
-  )
-
-  const handleClick = useCallback(
-    (event: 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: 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}
-        as={as}
-        data-pressed={as !== 'button' ? withinMenu : undefined}
-        data-selected={!withinMenu && active ? '' : undefined}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        onMouseEnter={handleMouseEnter}
-        radius={radius}
-        ref={setRootElement}
-        tabIndex={-1}
-        tone={tone}
-        type={as === 'button' ? 'button' : undefined}
-      >
-        <Flex gap={gap ?? space} gapX={gapX} gapY={gapY} 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/ui/components/menu/menuItem.tsx

@@ -1,180 +0,0 @@
-import {GapStyleProps, PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {
-  ElementType,
-  ForwardedRef,
-  forwardRef,
-  isValidElement,
-  MouseEvent,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {Box, Flex, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {Props, SelectableTone} from '../../types'
-import {Hotkeys} from '../hotkeys'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuItemProps extends GapStyleProps, PaddingStyleProps, RadiusStyleProps {
-  disabled?: boolean
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
-  pressed?: boolean
-  selected?: boolean
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export const MenuItem = forwardRef(function MenuItem(
-  props: Props<MenuItemProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    as = 'button',
-    children,
-    disabled,
-    fontSize = 1,
-    gap,
-    gapX,
-    gapY,
-    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 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: 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 setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setRootElement(el)
-  }, [])
-
-  return (
-    <Selectable
-      data-ui="MenuItem"
-      role="menuitem"
-      {...restProps}
-      as={as}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      radius={radius}
-      disabled={disabled}
-      onClick={handleClick}
-      onMouseEnter={onItemMouseEnter}
-      onMouseLeave={onItemMouseLeave}
-      ref={setRef}
-      tabIndex={-1}
-      tone={tone}
-      type={as === 'button' ? 'button' : undefined}
-    >
-      {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={gap ?? space} gapX={gapX} gapY={gapY} align="center" {...paddingProps}>
-          {IconComponent && (
-            <Text muted 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 gap={0.5} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
-          )}
-
-          {IconRightComponent && (
-            <Text muted size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          )}
-        </Flex>
-      )}
-
-      {children && (
-        <Box as="span" {...paddingProps}>
-          {children}
-        </Box>
-      )}
-    </Selectable>
-  )
-})
-
-MenuItem.displayName = 'ForwardRef(MenuItem)'

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

@@ -1,241 +0,0 @@
-import {
-  KeyboardEvent,
-  KeyboardEventHandler,
-  MouseEvent,
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  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 = 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: 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 (!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/ui/components/skeleton/__workshop__/delay.tsx

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