@sanity/ui 5.0.0-alpha.1 → 5.0.0-alpha.10

package/src/components/heading/Heading.tsx

@@ -41,7 +41,7 @@ export function Heading<T extends ElementType = 'h2'>({
 
   return (
     <Component
-      className={clsx(headingClassName, 'sui-overflow-hidden', className)}
+      className={clsx(headingClassName, props.truncate && 'sui-overflow-hidden', className)}
       style={style}
       data-ui="Heading"
       {...rest}

package/src/components/heading/heading.props.ts

@@ -5,9 +5,15 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface HeadingProps extends TypographyProps {
-  /** Element to render */
+  /**
+   * Semantic heading element to render.
+   * @remarks Always set this explicitly.
+   */
   as?: HeadingTag
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   * @remarks Independent of `as`.
+   */
   size?: Responsive<HeadingSize>
 }
 

package/src/components/icon/icon.props.ts

@@ -10,9 +10,13 @@ import type {Responsive} from '../../types/Responsive'
 /** @public */
 export interface IconProps
   extends ComponentProps<'svg'>, Pick<TypographyProps, 'muted'>, MarginProps, ToneProps {
-  /** Icon to render */
+  /**
+   * The icon component to render.
+   */
   icon: React.ComponentType<SVGProps<SVGSVGElement>>
-  /** CSS **font-size** property */
+  /**
+   * Sets icon size.
+   */
   size?: Responsive<IconSize>
 }
 

package/src/components/icon-button/iconButton.props.ts

@@ -9,9 +9,14 @@ export interface IconButtonProps<T extends React.ElementType = 'button'> extends
   ButtonProps<T>,
   'as' | 'density' | 'level' | 'loading' | 'tone'
 > {
-  /** Button label */
+  /**
+   * Accessible name for the button.
+   * @remarks Because IconButtons have no visible text, this is required.
+   */
   'aria-label': string
-  /** Icon */
+  /**
+   * Icon to render.
+   */
   'icon': React.ComponentType<SVGProps<SVGSVGElement>>
 }
 

package/src/components/index.css

@@ -1,9 +1,11 @@
+@import './badge/badge.css';
 @import './box/box.css';
 @import './button/button.css';
 @import './card/card.css';
 @import './checkbox/checkbox.css';
 @import './code/code.css';
 @import './container/container.css';
+@import './dialog/dialog.css';
 @import './eyebrow/eyebrow.css';
 @import './flex/flex.css';
 @import './grid/grid.css';
@@ -15,6 +17,7 @@
 @import './label/label.css';
 @import './link/link.css';
 @import './list/list.css';
+@import './popover/popover.css';
 @import './press-area/press-area.css';
 @import './radio/radio.css';
 @import './spinner/spinner.css';

package/src/components/indicator/indicator.props.ts

@@ -3,9 +3,13 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface IndicatorProps<T extends React.ElementType = 'span'> extends ToneProps {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** Label for aria-label attribute */
+  /**
+   * Accessible label.
+   */
   label?: string
 }
 

package/src/components/indicator-stack/indicatorStack.props.ts

@@ -2,7 +2,9 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @public */
 export interface IndicatorStackProps<T extends React.ElementType = 'div'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
 }
 

package/src/components/inline/inline.props.ts

@@ -7,9 +7,13 @@ import {SPACE, type SpaceInherit} from '../../types/Space'
 /** @deprecated Use HStack component instead */
 /** @public */
 export interface InlineProps<T extends React.ElementType = 'div'> extends PaddingProps {
-  /** Element to render */
+  /**
+   * HTML element or component to render.
+   */
   as?: T
-  /** CSS **gap** property */
+  /**
+   * Space between children.
+   */
   gap?: Responsive<SpaceInherit>
 }
 

package/src/components/label/label.props.ts

@@ -3,8 +3,14 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface LabelProps extends React.ComponentProps<'label'>, MarginProps {
-  /** Element to render */
+  /**
+   * Renders the label in a muted color.
+   */
   disabled?: boolean
+  /**
+   * Renders the label in the error color.
+   * @remarks Use when the linked input has a validation error.
+   */
   error?: boolean
 }
 

package/src/components/link/link.props.ts

@@ -2,12 +2,12 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface LinkProps extends React.ComponentProps<'a'> {
-  /** If true, sets `target="_blank"` and `rel="noopener noreferrer"` */
+  /**
+   * Sets the link to `target="_blank"` and `rel="noopener noreferrer"`.
+   */
   openInNewTab?: boolean
   /**
-   * If true, sets `text-decoration: underline`
-   *
-   * @defaultValue true
+   * Underlines the link.
    */
   underlined?: boolean
 }

package/src/components/list/list.props.ts

@@ -11,7 +11,9 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @beta */
 export interface ListProps<T extends ListTag = 'ul'> extends Pick<GapProps, 'gap'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
 }
 
@@ -24,11 +26,17 @@ export const listProps: Record<string, PropDef> = {
 
 /** @beta */
 export interface ListItemProps extends React.ComponentProps<'li'> {
-  /** Composite prop for setting padding and gap */
+  /**
+   * Sets horizontal padding, gap, and minimum row height together.
+   */
   density?: Responsive<Density>
-  /** Starting slot */
+  /**
+   * Slot at the left edge of the row.
+   */
   start?: React.ReactNode
-  /** Ending slot */
+  /**
+   * Slot at the right edge of the row.
+   */
   end?: React.ReactNode
 }
 
@@ -73,9 +81,13 @@ export const listItemProps: Record<string, PropDef> = {
 
 /** @beta */
 export interface ListButtonItemProps<T extends React.ElementType = 'button'> extends ListItemProps {
-  /** Element to render */
+  /**
+   * Element or component to render for the press target.
+   */
   as?: InteractiveAs<T>
-  /** Selected state */
+  /**
+   * Marks the row as the current selection.
+   */
   selected?: boolean
 }
 
@@ -91,11 +103,17 @@ export const listButtonItemProps: Record<string, PropDef> = {
 
 /** @beta */
 export interface ListItemTextProps<T extends React.ElementType = 'div'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** Title text */
+  /**
+   * Main label.
+   */
   title?: React.ReactNode
-  /** Subtitle text */
+  /**
+   * Text below the title.
+   */
   subtitle?: React.ReactNode
 }
 

package/src/components/popover/Popover.tsx

@@ -0,0 +1,85 @@
+import clsx from 'clsx'
+import {Activity, cloneElement, useId, useState, type ToggleEvent} from 'react'
+
+import {useIsClient} from '../../hooks/useIsClient'
+import {getProps} from '../../utils/getProps'
+import {mergeTriggerProps} from '../../utils/mergeTriggerProps'
+import {renderPortal} from '../../utils/renderPortal'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type PopoverProps, popoverProps} from './popover.props'
+
+const popoverClassName = suffixClassName('sui-PopoverContent')
+
+function PopoverRoot({
+  placement = 'bottom',
+  ...props
+}: PopoverProps & {
+  triggerProps?: Record<string, unknown>
+}) {
+  const {
+    children,
+    className,
+    style,
+    id: idProp,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
+    ...rest
+  } = getProps({placement, ...props}, popoverProps)
+  const reactId = useId()
+  const id = idProp || reactId
+  const [open, setOpen] = useState(false)
+  const isClient = useIsClient()
+
+  const handleToggle = (e: ToggleEvent) => {
+    setOpen(e.newState === 'open')
+  }
+
+  const triggerProps = {
+    popoverTarget: id,
+    style: {anchorName: `--anchor-${anchorName || id}`},
+  }
+
+  const trigger = children.type.forwardsTriggerProps
+    ? cloneElement(children, {triggerProps})
+    : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps))
+
+  return (
+    <>
+      {trigger}
+
+      {renderPortal(
+        <Activity mode={open ? 'visible' : 'hidden'}>
+          <div
+            className={clsx(
+              popoverClassName,
+              'sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2',
+              className,
+            )}
+            style={{
+              ...style,
+              positionAnchor: `--anchor-${anchorName || id}`,
+            }}
+            data-ui="Popover"
+            popover="auto"
+            id={id}
+            onToggle={handleToggle}
+            {...rest}
+          >
+            {content}
+          </div>
+        </Activity>,
+        isClient,
+        portal,
+      )}
+    </>
+  )
+}
+
+/** @beta */
+export const Popover = Object.assign(PopoverRoot, {
+  forwardsTriggerProps: true,
+})
+
+export type {PopoverProps}

package/src/components/popover/popover.css

@@ -0,0 +1,21 @@
+.sui-PopoverContent {
+  visibility: hidden;
+  opacity: 0;
+  scale: 0.9;
+  transition: none;
+}
+
+.sui-PopoverContent:popover-open {
+  visibility: visible;
+  opacity: 1;
+  scale: 1;
+  transition: var(--fade-in-transition);
+}
+
+@starting-style {
+  .sui-PopoverContent:popover-open {
+    visibility: hidden;
+    opacity: 0;
+    scale: 0.9;
+  }
+}

package/src/components/popover/popover.props.ts

@@ -0,0 +1,38 @@
+import {type PlacementProps, placementProps} from '../../props/placement'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface PopoverProps
+  extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
+  /**
+   * Shared anchor identifier.
+   * @remarks Set the same value on a Tooltip and a Popover to point both at one trigger.
+   */
+  anchorName?: React.ReactNode
+  /**
+   * The trigger element.
+   * @remarks Popover clones it and attaches the `popovertarget` attribute that opens the floating layer.
+   */
+  children: React.ReactElement<Record<string, unknown>>
+  /**
+   * The floating content.
+   */
+  content?: React.ReactNode
+  /**
+   * Renders the content into `document.body` through a React portal instead of inline.
+   */
+  portal?: boolean
+}
+
+export const popoverProps: Record<string, PropDef> = {
+  anchorName: {
+    type: 'string',
+  },
+  content: {
+    type: 'string',
+  },
+  portal: {
+    type: 'boolean',
+  },
+  ...placementProps,
+}

package/src/components/press-area/pressArea.props.ts

@@ -3,7 +3,9 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @public */
 export interface PressAreaProps<T extends React.ElementType = 'button'> {
-  /** Element to render */
+  /**
+   * Element or component to render.
+   */
   as?: InteractiveAs<T>
 }
 

package/src/components/radio/Radio.tsx

@@ -17,7 +17,7 @@ export function Radio(props: RadioProps) {
 
   return (
     <Label
-      className={clsx(radioClassName, className)}
+      className={clsx(radioClassName, 'sui-position-relative', className)}
       style={style}
       data-ui="Radio"
       disabled={disabled}

package/src/components/radio/radio.props.ts

@@ -3,9 +3,14 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
-  /** Error state */
+  /**
+   * Applies error styling to the radio mark.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean
-  /** Input label */
+  /**
+   * Visible label next to the radio.
+   */
   label: React.ReactNode
 }
 

package/src/components/skip-to-content/skipToContent.props.ts

@@ -3,12 +3,18 @@ import {type PropDef} from '../../types/PropDef'
 /** @beta */
 export interface SkipToContentProps extends React.ComponentProps<'a'> {
   /**
-   * Anchor href. The target element should be focusable or have `tabindex="-1"`.
+   * Same-page fragment to jump to.
+   * @remarks Note: The hash character # is required for proper linking.
    */
   href: string
-  /** Visible/announced label */
+  /**
+   * Visible and announced text.
+   */
   label: string
-  /** Use label instead */
+  /**
+   * Not accepted.
+   * @remarks Pass text via `label`.
+   */
   children?: never
 }
 

package/src/components/spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import {SpinnerIcon} from '@sanity/icons'
+import {SpinnerIcon} from '@sanity/icons/Spinner'
 import clsx from 'clsx'
 
 import {getProps} from '../../utils/getProps'

package/src/components/spinner/spinner.props.ts

@@ -4,6 +4,9 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface SpinnerProps extends React.ComponentProps<'svg'> {
+  /**
+   * Size of the spinner icon.
+   */
   size?: Responsive<IconSize>
 }
 

package/src/components/switch/Switch.tsx

@@ -17,7 +17,7 @@ export function Switch(props: SwitchProps) {
 
   return (
     <Label
-      className={clsx(switchClassName, className)}
+      className={clsx(switchClassName, 'sui-position-relative', className)}
       style={style}
       data-ui="Switch"
       disabled={props.disabled}

package/src/components/switch/switch.props.ts

@@ -3,9 +3,14 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
-  /** Error state */
+  /**
+   * Applies error styling to the switch track.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean
-  /** Input label */
+  /**
+   * Visible label next to the switch.
+   */
   label: React.ReactNode
 }
 

package/src/components/text/Text.tsx

@@ -40,7 +40,7 @@ export function Text<T extends ElementType = 'span'>({
 
   return (
     <Component
-      className={clsx(textClassName, 'sui-overflow-hidden', className)}
+      className={clsx(textClassName, props.truncate && 'sui-overflow-hidden', className)}
       style={style}
       data-ui="Text"
       {...rest}

package/src/components/text/text.props.ts

@@ -5,9 +5,13 @@ import {TEXT_SIZE, type TextSize} from '../../types/Text'
 
 /** @public */
 export interface TextProps<T extends React.ElementType = 'span'> extends TypographyProps {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   */
   size?: Responsive<TextSize>
 }
 

package/src/components/tooltip/Tooltip.tsx

@@ -1,93 +1,97 @@
 import clsx from 'clsx'
-import {cloneElement, useEffect, useId, useState} from 'react'
+import {cloneElement, useId, useState, type ToggleEvent} from 'react'
 
+import {useIsClient} from '../../hooks/useIsClient'
 import {getProps} from '../../utils/getProps'
+import {mergeTriggerProps} from '../../utils/mergeTriggerProps'
+import {renderPortal} from '../../utils/renderPortal'
 import {suffixClassName} from '../../utils/suffixClassName'
-import {Box} from '../box/Box'
 import {type TooltipProps, tooltipProps} from './tooltip.props'
 
 const tooltipClassName = suffixClassName('sui-Tooltip')
-const tooltipDismissedClassName = suffixClassName('sui-Tooltip-Dismissed')
 
-/** @public */
-export function Tooltip({placement = 'bottom', ...props}: TooltipProps) {
+function TooltipRoot({
+  placement = 'bottom',
+  ...props
+}: TooltipProps & {
+  triggerProps?: Record<string, unknown>
+}) {
   const {
     children,
     className,
     style,
-    disabled,
     id: idProp,
-    text,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
     ...rest
   } = getProps({placement, ...props}, tooltipProps)
   const reactId = useId()
   const id = idProp || reactId
   const [dismissed, setDismissed] = useState(false)
+  const isClient = useIsClient()
 
-  useEffect(() => {
-    if (dismissed) {
-      return
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setDismissed(true)
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [dismissed])
-
-  const trigger = cloneElement(children, {
+  const triggerProps = {
     'aria-describedby': id,
-    'onMouseEnter': (e) => {
+    'interestfor': id,
+    'style': {anchorName: `--anchor-${anchorName || id}`},
+    'onMouseLeave': () => {
       setDismissed(false)
-      children.props.onMouseEnter?.(e)
     },
-    'onFocus': (e) => {
+    'onBlur': () => {
       setDismissed(false)
-      children.props.onFocus?.(e)
     },
-    'onClick': (e) => {
+    'onClick': () => {
       setDismissed(true)
-      children.props.onClick?.(e)
+      document.getElementById(id)?.hidePopover()
     },
-    'style': {
-      ...children.props.style,
-      anchorName: `--tooltip-anchor-${id}`,
-    },
-  })
+  }
+
+  const trigger = children.type.forwardsTriggerProps
+    ? cloneElement(children, {triggerProps})
+    : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps))
 
-  if (disabled) {
-    return children
+  const handleBeforeToggle = (e: ToggleEvent) => {
+    if (e.newState === 'open' && dismissed) {
+      e.preventDefault()
+    }
   }
 
   return (
     <>
       {trigger}
 
-      <Box
-        className={clsx(tooltipClassName, dismissed ? tooltipDismissedClassName : '', className)}
-        role="tooltip"
-        style={{
-          ...style,
-          positionAnchor: `--tooltip-anchor-${id}`,
-        }}
-        data-ui="Tooltip"
-        id={id}
-        paddingX={2}
-        paddingY={1}
-        radius={2}
-        position="fixed"
-        zIndex={9999}
-        shadow={2}
-        {...rest}
-      >
-        {text}
-      </Box>
+      {renderPortal(
+        <div
+          className={clsx(
+            tooltipClassName,
+            'sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2',
+            className,
+          )}
+          style={{
+            ...style,
+            positionAnchor: `--anchor-${anchorName || id}`,
+          }}
+          data-ui="Tooltip"
+          role="tooltip"
+          popover="hint"
+          id={id}
+          onBeforeToggle={handleBeforeToggle}
+          {...rest}
+        >
+          {content}
+        </div>,
+        isClient,
+        portal,
+      )}
     </>
   )
 }
 
+/** @beta */
+export const Tooltip = Object.assign(TooltipRoot, {
+  forwardsTriggerProps: true,
+}) as typeof TooltipRoot
+
 export type {TooltipProps}