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

package/src/components/grid/grid.css

@@ -1,3 +1,8 @@
+.sui-Grid {
+  min-width: 0;
+  min-height: 0;
+}
+
 .sui-Grid[class*='sui-tone'] {
   --grid-background: var(--background-low);
   background-color: var(--grid-background);

package/src/components/grid/grid.props.ts

@@ -8,9 +8,13 @@ import type {Responsive} from '../../types/Responsive'
 /** @public */
 export interface GridProps<T extends React.ElementType = 'div'>
   extends GridParentProps, GapProps, LayoutProps {
-  /** Element to render */
+  /**
+   * HTML element or component to render.
+   */
   as?: T
-  /** CSS **display** property */
+  /**
+   * CSS `display` property.
+   */
   display?: Responsive<DisplayGrid>
 }
 

package/src/components/h-stack/HStack.tsx

@@ -1,33 +1,27 @@
 import clsx from 'clsx'
 import type {ComponentPropsWithRef, ElementType} from 'react'
 
-import {getProps} from '../../utils/getProps'
+import {type ComponentProps} from '../../utils/getProps'
 import {suffixClassName} from '../../utils/suffixClassName'
 import {Flex} from '../flex/Flex'
-import {type HStackProps, hStackProps} from './hStack.props'
+import {type HStackProps} from './hStack.props'
 
 const hStackClassName = suffixClassName('sui-HStack')
 
 /** @public */
-export function HStack<T extends ElementType = 'div'>(
-  props: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>,
-) {
-  const {as, children, className, style, ...rest} = getProps(props, hStackProps)
-  const Component = as || 'div'
-
+export function HStack<T extends ElementType = 'div'>({
+  className,
+  ...props
+}: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>) {
   return (
     <Flex
-      as={Component}
       className={clsx(hStackClassName, className)}
-      style={style}
       data-ui="HStack"
       display="inline-flex"
       alignItems="center"
       flexWrap="wrap"
-      {...rest}
-    >
-      {children}
-    </Flex>
+      {...(props as ComponentProps)}
+    />
   )
 }
 

package/src/components/h-stack/hStack.props.ts

@@ -1,15 +1,7 @@
-import {type GapProps, gapProps} from '../../props/gap'
-import {type PropDef} from '../../types/PropDef'
+import type {FlexProps} from '../flex/flex.props'
 
 /** @public */
-export interface HStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
-  /** Element to render */
-  as?: T
-}
-
-export const hStackProps: Record<string, PropDef> = {
-  as: {
-    type: 'string',
-  },
-  gap: gapProps['gap'] as PropDef,
-}
+export interface HStackProps<T extends React.ElementType = 'div'> extends Pick<
+  FlexProps<T>,
+  'as' | 'gap'
+> {}

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,8 +17,10 @@
 @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 './select/select.css';
 @import './spinner/spinner.css';
 @import './skip-to-content/skip-to-content.css';
 @import './switch/switch.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/select/Select.tsx

@@ -0,0 +1,47 @@
+import SelectIcon from '@sanity/icons/Select'
+import clsx from 'clsx'
+import {useId} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Icon} from '../icon/Icon'
+import {type SelectProps, selectProps} from './select.props'
+
+const selectClassName = suffixClassName('sui-Select')
+
+/** @public */
+export function Select({density = 'regular', hasError = false, ...props}: SelectProps) {
+  const {children, className, style, ...rest} = getProps({density, ...props}, selectProps)
+
+  const anchorId = useId()
+  const anchorName = `--anchor-${anchorId}`
+
+  const selectClasses = clsx(
+    selectClassName,
+    hasError && 'sui-error',
+    'sui-radius2',
+    'sui-width-full',
+    className,
+  )
+
+  const iconClasses = `sui-position-absolute sui-display-flex sui-align-items-center sui-px1`
+
+  return (
+    <>
+      <select
+        data-ui="Select"
+        className={selectClasses}
+        style={{...style, anchorName}}
+        {...rest}
+        aria-invalid={hasError || undefined}
+      >
+        {children}
+      </select>
+      <div className={iconClasses} data-ui="Select-icon" style={{positionAnchor: anchorName}}>
+        <Icon icon={SelectIcon} size={1} />
+      </div>
+    </>
+  )
+}
+
+export type {SelectProps}

package/src/components/select/select.css

@@ -0,0 +1,67 @@
+.sui-Select {
+  --background-color: var(--backdrop);
+  --border-color: var(--separator-high);
+  --color: var(--foreground-high);
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  font: var(--form-element-text);
+  color: var(--color);
+}
+
+[data-ui="Select-icon"] {
+  --background-color: var(--backdrop);
+  background-color: var(--background-color);
+  pointer-events: none;
+  /* reduce block size by 1px at each end and inset from right to not interrupt Select’s border */
+  top: calc(anchor(top) + 1px);
+  bottom: calc(anchor(bottom) + 1px);
+  right: calc(anchor(right) + 2px);
+}
+
+/**
+  * Error
+  */
+.sui-Select.sui-error {
+  --border-color: var(--error-separator);
+  --color: var(--error-foreground);
+}
+
+.sui-Select.sui-error + [data-ui="Select-icon"] svg {
+  color: var(--error-foreground);
+}
+
+/**
+  * Hover - uses relative border/background colours to darken/lighten in both normal & error state
+  */
+.sui-Select:hover {
+  border-color: light-dark(
+    oklch(from var(--border-color) calc(l - var(--hover-lightness-delta)) c h),
+    oklch(from var(--border-color) calc(l + var(--hover-lightness-delta)) c h)
+  );
+}
+
+/**
+  * Disabled
+  */
+.sui-Select:disabled {
+  --background-color: var(--inert-background);
+  --border-color: var(--separator-low);
+  --color: var(--inert-foreground);
+  pointer-events: none;
+}
+
+.sui-Select:disabled + [data-ui="Select-icon"] {
+  --background-color: var(--inert-background);
+}
+
+.sui-Select:disabled + [data-ui="Select-icon"] svg {
+  color: var(--inert-foreground);
+}
+
+/**
+  * Focus
+  */
+.sui-Select:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}

package/src/components/select/select.props.ts

@@ -0,0 +1,25 @@
+import {formElementDensityProps, type FormElementDensityProps} from '../../props/formElement'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export type SelectProps = React.ComponentProps<'select'> &
+  FormElementDensityProps & {
+    /**
+     * Disables the select element, blocking interactions and hiding it from screen readers.
+     */
+    disabled?: boolean
+    /**
+     * Used to trigger styling for invalid states.
+     */
+    hasError?: boolean
+  }
+
+export const selectProps: Record<string, PropDef> = {
+  disabled: {
+    type: 'boolean',
+  },
+  hasError: {
+    type: 'boolean',
+  },
+  ...formElementDensityProps,
+}

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
 }