@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

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

@@ -0,0 +1,200 @@
+import {ChevronRightIcon} from '@sanity/icons'
+import {createElement, isValidElement, useCallback, useEffect, useRef, 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} from './menu'
+import {useMenu} from './useMenu'
+
+/**
+ * @public
+ */
+export interface MenuGroupProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  fontSize?: number | number[]
+  icon?: React.ElementType | React.ReactNode
+  padding?: number | number[]
+  popover?: Omit<PopoverProps, 'content' | 'open'>
+  radius?: Radius | Radius[]
+  space?: number | number[]
+  text: React.ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export function MenuGroup(
+  props: MenuGroupProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>,
+): React.ReactElement {
+  const {
+    as = 'button',
+    children,
+    fontSize = 1,
+    icon,
+    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 = menu.onMouseEnter,
+    registerElement,
+  } = menu
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
+  const [open, setOpen] = useState(false)
+  const shouldFocusRef = useRef<'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>) => {
+      if (onClick) onClick(event)
+
+      shouldFocusRef.current = 'first'
+
+      setOpen(true)
+
+      requestAnimationFrame(() => {
+        shouldFocusRef.current = null
+      })
+    },
+    [onClick],
+  )
+
+  const handleChildItemClick = useCallback(() => {
+    setOpen(false)
+    if (onItemClick) 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])
+
+  const childMenu = (
+    <Menu
+      onClickOutside={onClickOutside}
+      onEscape={onEscape}
+      onItemClick={handleChildItemClick}
+      onKeyDown={handleMenuKeyDown}
+      onMouseEnter={handleMenuMouseEnter}
+      registerElement={registerElement}
+      shouldFocus={shouldFocusRef.current}
+    >
+      {children}
+    </Menu>
+  )
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = event.currentTarget
+
+    if (document.activeElement !== target) {
+      return
+    }
+
+    if (event.key === 'ArrowRight') {
+      shouldFocusRef.current = 'first'
+
+      setOpen(true)
+      setWithinMenu(true)
+
+      requestAnimationFrame(() => {
+        shouldFocusRef.current = null
+      })
+
+      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}>
+          {icon && (
+            <Text size={fontSize}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          )}
+
+          <Box flex={1}>
+            <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+              {text}
+            </Text>
+          </Box>
+
+          <Text size={fontSize}>
+            <ChevronRightIcon />
+          </Text>
+        </Flex>
+      </Selectable>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,178 @@
+import {
+  createElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import {isValidElementType} from 'react-is'
+import {useArrayProp, useForwardedRef} 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 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,
+    iconRight,
+    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 = menu.onMouseEnter,
+    onItemMouseLeave = menu.onMouseLeave,
+  } = menu
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+
+  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
+
+  const ref = useForwardedRef(forwardedRef)
+
+  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)
+    },
+    [ref],
+  )
+
+  return (
+    <Selectable
+      data-ui="MenuItem"
+      {...restProps}
+      aria-pressed={as === 'button' && pressed}
+      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}
+      role="menuitem"
+      tabIndex={-1}
+      type={as === 'button' ? 'button' : undefined}
+    >
+      {(icon || text || iconRight) && (
+        <Flex as="span" gap={space} align="center" {...paddingProps}>
+          {icon && (
+            <Text size={fontSize}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </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}}
+            />
+          )}
+
+          {iconRight && (
+            <Text size={fontSize}>
+              {isValidElement(iconRight) && iconRight}
+              {isValidElementType(iconRight) && createElement(iconRight)}
+            </Text>
+          )}
+        </Flex>
+      )}
+      {children && (
+        <Box as="span" {...paddingProps}>
+          {children}
+        </Box>
+      )}
+    </Selectable>
+  )
+})

package/src/core/components/skeleton/styles.ts

@@ -0,0 +1,50 @@
+import {css, keyframes} from 'styled-components'
+
+const keyframe = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`
+
+const animation = css`
+  background-image: linear-gradient(
+    to right,
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-to),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from)
+  );
+  background-position: 100%;
+  background-size: 200% 100%;
+  background-attachment: fixed;
+  animation-name: ${keyframe};
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-duration: 2000ms;
+`
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
+  opacity: ${({$visible}) => ($visible ? 1 : 0)};
+  transition: opacity 200ms ease-in;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    ${({$animated}) =>
+      $animated
+        ? animation
+        : css`
+            background-color: var(--card-skeleton-color-from);
+          `}
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    background-color: var(--card-skeleton-color-from);
+  }
+`

package/src/core/components/skeleton/textSkeleton.tsx

@@ -0,0 +1,118 @@
+import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {ThemeProps, _responsive} from '../../styles'
+import {Skeleton, SkeletonProps} from './skeleton'
+
+const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
+  props: {
+    $size: number[]
+    $style: ThemeFontKey
+  } & ThemeProps,
+) => {
+  const {$size, $style} = props
+  const {font, media} = getTheme_v2(props.theme)
+  const fontStyle = font[$style]
+
+  const styles = _responsive(media, $size, (sizeIndex) => {
+    const fontSize = fontStyle.sizes[sizeIndex]
+    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
+
+    return {height: capHeight}
+  })
+
+  return styles
+})
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface TextSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface LabelSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface HeadingSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface CodeSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const TextSkeleton = forwardRef(function TextSkeleton(
+  props: TextSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = useArrayProp(size)
+
+  return <Root {...restProps} $size={$size} ref={ref} $style="text" />
+})
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const LabelSkeleton = forwardRef(function TextSkeleton(
+  props: LabelSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = useArrayProp(size)
+
+  return <Root {...restProps} $size={$size} ref={ref} $style="label" />
+})
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const HeadingSkeleton = forwardRef(function TextSkeleton(
+  props: HeadingSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = useArrayProp(size)
+
+  return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
+})
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const CodeSkeleton = forwardRef(function TextSkeleton(
+  props: CodeSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = useArrayProp(size)
+
+  return <Root {...restProps} $size={$size} ref={ref} $style="code" />
+})

package/src/core/components/tab/tab.tsx

@@ -0,0 +1,102 @@
+import {forwardRef, useCallback, useEffect, useRef} from 'react'
+import styled from 'styled-components'
+import {useForwardedRef} from '../../hooks'
+import {Button} from '../../primitives'
+import {ButtonTone} from '../../types'
+
+/**
+ * @public
+ */
+export interface TabProps {
+  /**
+   * The `id` of the correlating `TabPanel` component.
+   */
+  'aria-controls': string
+  id: string
+  icon?: React.ElementType | React.ReactNode
+  focused?: boolean
+  fontSize?: number | number[]
+  label?: React.ReactNode
+  padding?: number | number[]
+  selected?: boolean
+  tone?: ButtonTone
+}
+
+const CustomButton = styled(Button)`
+  max-width: 100%;
+`
+
+/**
+ * @public
+ */
+export const Tab = forwardRef(function Tab(
+  props: TabProps &
+    Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
+    >,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    icon,
+    id,
+    focused,
+    fontSize = 1,
+    label,
+    onClick,
+    onFocus,
+    padding = 2,
+    selected,
+    ...restProps
+  } = props
+  const elementRef = useRef<HTMLButtonElement | null>(null)
+  const focusedRef = useRef(false)
+
+  const handleBlur = useCallback(() => {
+    focusedRef.current = false
+  }, [])
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLButtonElement>) => {
+      focusedRef.current = true
+      if (onFocus) onFocus(event)
+    },
+    [onFocus],
+  )
+
+  const ref = useForwardedRef(forwardedRef)
+
+  useEffect(() => {
+    if (focused && !focusedRef.current) {
+      if (elementRef.current) elementRef.current.focus()
+      focusedRef.current = true
+    }
+  }, [focused])
+
+  const setRef = (el: HTMLButtonElement | null) => {
+    elementRef.current = el
+    ref.current = el
+  }
+
+  return (
+    <CustomButton
+      data-ui="Tab"
+      {...restProps}
+      aria-selected={selected ? 'true' : 'false'}
+      fontSize={fontSize}
+      icon={icon}
+      id={id}
+      mode="bleed"
+      onClick={onClick}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      padding={padding}
+      ref={setRef}
+      role="tab"
+      selected={selected}
+      tabIndex={selected ? 0 : -1}
+      text={label}
+      type="button"
+    />
+  )
+})