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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.10",
   "description": "Sanity UI Library",
   "keywords": [
     "components",
@@ -30,11 +30,14 @@
   ],
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./src/polyfills.ts",
+    "./dist/polyfills.js"
   ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
+    "./polyfills": "./dist/polyfills.js",
     "./package.json": "./package.json",
     "./styles.css": {
       "types": "./src/styles.css.d.ts",
@@ -46,9 +49,11 @@
   },
   "dependencies": {
     "@sanity-labs/design-tokens": "0.0.2-alpha.4",
-    "@sanity/icons": "^3.7.4",
+    "@sanity/icons": "^5.2.1",
     "clsx": "^2.1.1",
     "comment-json": "^5.0.0",
+    "dialog-closedby-polyfill": "^1.3.0",
+    "interestfor": "^1.0.8",
     "react-refractor": "^4.0.0"
   },
   "devDependencies": {
@@ -59,6 +64,7 @@
     "@types/postcss-import": "^14.0.3",
     "@types/postcss-prefix-selector": "^1.16.3",
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.27",
     "babel-plugin-react-compiler": "^1.0.0",
     "concurrently": "^9.2.1",

package/src/cli/install.ts

@@ -36,7 +36,8 @@ function exactFromRange(range: string | undefined): string | null {
  *
  * Icons is already a dependency, so the package manager installs it either way.
  * It is listed explicitly because apps import icons directly to pass to
- * components (`<Button iconStart={AddIcon} />`), and under pnpm an import that
+ * components (`import {AddIcon} from '@sanity/icons/Add'`, then
+ * `<Button iconStart={AddIcon} />`), and under pnpm an import that
  * isn't in the app's own package.json doesn't resolve. Dependencies the app
  * never imports itself (react-refractor, clsx) are left to the package manager.
  * React/react-dom are peers that belong to the host app, so they are left out

package/src/components/badge/Badge.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx'
+import {isValidElement, type ComponentPropsWithRef, type ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Icon} from '../icon/Icon'
+import {Text} from '../text/Text'
+import {type BadgeProps, badgeProps} from './badge.props'
+
+const badgeClassName = suffixClassName('sui-Badge')
+
+/** @public */
+export function Badge<T extends ElementType = 'span'>({
+  tone = 'neutral',
+  ...props
+}: BadgeProps<T> & Omit<ComponentPropsWithRef<T>, keyof BadgeProps<T>>) {
+  const {
+    as,
+    children,
+    className,
+    style,
+    iconStart: IconStart,
+    text,
+    ...rest
+  } = getProps({tone, ...props}, badgeProps)
+  const Component = as || 'span'
+
+  const paddingClasses = IconStart ? 'sui-p1' : 'sui-px2 sui-py1'
+
+  const badgeClasses = clsx(
+    badgeClassName,
+    `${paddingClasses} sui-radius-full sui-display-inline-flex sui-align-items-center sui-gap1`,
+  )
+
+  return (
+    <Component className={clsx(badgeClasses, className)} style={style} data-ui="Badge" {...rest}>
+      {IconStart &&
+        (isValidElement(IconStart) ? (
+          IconStart
+        ) : (
+          <Icon icon={IconStart} marginX={-1} marginY={-2} size={0} />
+        ))}
+      {text && (
+        <Text size={1} trim>
+          {text}
+        </Text>
+      )}
+      {children}
+    </Component>
+  )
+}
+
+export type {BadgeProps}

package/src/components/badge/badge.css

@@ -0,0 +1,6 @@
+.sui-Badge {
+  --badge-background: var(--background-high);
+  --badge-color: var(--foreground-high);
+  background-color: var(--badge-background);
+  color: var(--badge-color);
+}

package/src/components/badge/badge.props.ts

@@ -0,0 +1,31 @@
+import {type ToneProps, toneProps} from '../../props/tone'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface BadgeProps<T extends React.ElementType = 'span'> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
+  iconStart?: React.ElementType | React.ReactNode
+  /**
+   * Sets Badge's text label. Use instead of children unless you have a special use case.
+   */
+  text?: string
+}
+
+export const badgeProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  iconStart: {
+    type: 'string',
+  },
+  text: {
+    type: 'string',
+  },
+  ...toneProps,
+}

package/src/components/box/Box.tsx

@@ -10,9 +10,14 @@ const boxClassName = suffixClassName('sui-Box')
 /** @public */
 export function Box<T extends ElementType = 'div'>({
   display = 'block',
+  minHeight = '0',
+  minWidth = '0',
   ...props
 }: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>) {
-  const {as, children, className, style, ...rest} = getProps({display, ...props}, boxProps)
+  const {as, children, className, style, ...rest} = getProps(
+    {display, minHeight, minWidth, ...props},
+    boxProps,
+  )
   const Component = as || 'div'
 
   return (

package/src/components/box/box.props.ts

@@ -5,9 +5,14 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface BoxProps<T extends React.ElementType = 'div'> extends LayoutProps {
-  /** Element to render */
+  /**
+   * HTML element or component to render.
+   */
   as?: T
-  /** CSS **display** property */
+  /**
+   * CSS `display` property.
+   * @remarks Does not include `'flex'` or `'grid'`. Use the Flex or Grid components for those.
+   */
   display?: Responsive<DisplayBlock>
 }
 

package/src/components/button/button.props.ts

@@ -16,23 +16,41 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface ButtonProps<T extends React.ElementType = 'button'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: InteractiveAs<T>
-  /** Composite prop for setting padding and gap */
+  /**
+   * Sets padding and gap together to specify size.
+   */
   density?: ButtonDensity
-  /** Set CSS **width** property to 100% */
+  /**
+   * Sets Button to fill the width of its container.
+   */
   fullWidth?: Responsive<boolean>
-  /** Starting icon */
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
   iconStart?: React.ElementType | React.ReactNode
-  /** Ending icon */
+  /**
+   * Shows an icon in the end position (right side in left-to-right languages).
+   */
   iconEnd?: React.ElementType | React.ReactNode
-  /** Button level */
+  /**
+   * Sets the importance of Button's action.
+   */
   level?: ButtonLevel
-  /** Loading state */
+  /**
+   * Places Button into a loading state.
+   */
   loading?: boolean
-  /** Button text */
+  /**
+   * Sets Button's text label.
+   */
   text?: string
-  /** Button tone */
+  /**
+   * Sets Button's semantic meaning and related color.
+   */
   tone?: ButtonTone
 }
 

package/src/components/card/card.props.ts

@@ -9,9 +9,13 @@ import {type Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface CardProps<T extends React.ElementType = 'div'> extends MarginProps, ToneProps {
-  /** Element to render */
+  /**
+   * HTML element or component to render.
+   */
   as?: T
-  /** Composite prop for setting padding and border radius */
+  /**
+   * Sets padding, gap, and border-radius together to specify size. This prop is used in place of separate `padding`, `gap`, and `border-radius` props.
+   */
   density?: Responsive<Density>
 }
 

package/src/components/checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
-import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
+import {CheckmarkIcon} from '@sanity/icons/Checkmark'
+import {RemoveIcon} from '@sanity/icons/Remove'
 import clsx from 'clsx'
 import {useEffect, useRef} from 'react'
 
@@ -29,7 +30,7 @@ export function Checkbox(props: CheckboxProps) {
 
   return (
     <Label
-      className={clsx(checkboxClassName, className)}
+      className={clsx(checkboxClassName, 'sui-position-relative', className)}
       style={style}
       data-ui="Checkbox"
       disabled={disabled}

package/src/components/checkbox/checkbox.props.ts

@@ -3,11 +3,19 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface CheckboxProps extends React.ComponentProps<'input'>, MarginProps {
-  /** Error state */
+  /**
+   * Applies error styling to the checkbox mark.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean
-  /** Indeterminate state */
+  /**
+   * Renders the "mixed state" mark (a horizontal line).
+   * @remarks Use when the checkbox controls a group with some-but-not-all children checked.
+   */
   indeterminate?: boolean
-  /** Input label */
+  /**
+   * Visible label next to the checkbox.
+   */
   label: React.ReactNode
 }
 

package/src/components/code/code.props.ts

@@ -9,11 +9,18 @@ export interface CodeProps<T extends CodeTag = 'pre'> extends Omit<
   TypographyProps,
   'align' | 'truncate' | 'tone'
 > {
-  /** Element to render */
+  /**
+   * HTML element or component to render.
+   * @remarks The defined element wraps an inner `<code>` tag.
+   */
   as?: T
-  /** Refractor language for syntax highlighting */
+  /**
+   * Refractor language for syntax highlighting.
+   */
   language?: string
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   */
   size?: Responsive<CodeSize>
 }
 

package/src/components/container/container.props.ts

@@ -5,9 +5,13 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface ContainerProps<T extends React.ElementType = 'div'> extends LayoutProps {
-  /** Element to render */
+  /**
+   * HTML element or component to render.
+   */
   as?: T
-  /** CSS **max-width** property */
+  /**
+   * Maximum width of the container.
+   */
   size?: Responsive<ContainerSize>
 }
 

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,139 @@
+import {CloseIcon} from '@sanity/icons/Close'
+import clsx from 'clsx'
+import {type ComponentProps, useEffect, useId, useRef} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Box} from '../box/Box'
+import {Flex} from '../flex/Flex'
+import {Heading} from '../heading/Heading'
+import {IconButton} from '../icon-button/IconButton'
+import {type DialogProps, dialogProps} from './dialog.props'
+
+const dialogClassName = suffixClassName('sui-Dialog')
+const dialogContentClassName = suffixClassName('sui-DialogContent')
+const dialogFooterClassName = suffixClassName('sui-DialogFooter')
+
+function DialogRoot({open = false, size = 0, ...props}: DialogProps) {
+  const {children, className, style, header, onClose, ...rest} = getProps(
+    {size, ...props},
+    dialogProps,
+  )
+
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const headerId = useId()
+
+  const dialogClasses = clsx(
+    dialogClassName,
+    `${props.topAnchor ? 'sui-mx-auto' : 'sui-m-auto'} sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto`,
+  )
+
+  useEffect(() => {
+    const dialogElement = dialogRef.current
+    if (!dialogElement) return
+
+    // `open` = `open` prop
+    // dialogElement.open = the `open` attribute on the HTML dialog element
+    // The prop and the attribute are manipulated independently, thus they
+    // can get out of sync if not handled within this effect.
+    if (open) {
+      if (!dialogElement.open) {
+        dialogElement.showModal()
+      }
+    } else {
+      if (dialogElement.open) {
+        dialogElement.close()
+      }
+    }
+
+    // Ensure the dialog is closed (and thus its `open` attribute updated)
+    // when the component is unmounted.
+    return () => {
+      dialogElement.close()
+    }
+  }, [open])
+
+  return (
+    <dialog
+      {...rest}
+      ref={dialogRef}
+      closedby="any"
+      aria-labelledby={header ? headerId : undefined}
+      onClose={onClose}
+      className={clsx(dialogClasses, className)}
+      style={style}
+      data-ui="Dialog"
+    >
+      <Flex flexShrink={0} justifyContent="space-between" alignItems="center">
+        {header ? (
+          <Heading trim size={1} id={headerId}>
+            {header}
+          </Heading>
+        ) : (
+          <div />
+        )}
+        <IconButton
+          aria-label="Close"
+          level="tertiary"
+          icon={CloseIcon}
+          onClick={() => dialogRef.current?.close()}
+        />
+      </Flex>
+      {children}
+    </dialog>
+  )
+}
+
+function DialogContent(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(dialogContentClassName, className)}
+      style={style}
+      data-ui="DialogContent"
+      flexGrow={1}
+      overflowY="auto"
+    >
+      {children}
+    </Box>
+  )
+}
+
+function DialogFooter(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(dialogFooterClassName, className)}
+      style={style}
+      data-ui="DialogFooter"
+      flexShrink={0}
+    >
+      {children}
+    </Box>
+  )
+}
+
+DialogRoot.displayName = 'Dialog'
+
+/**
+ * @beta
+ *
+ * Renders a modal dialog element — should not be used for nonmodal dialogs.
+ * Modal dialogs make their containing documents inert, and render on the topmost
+ * layer within that containing document; they must be dimissed before the containing
+ * document and its contents become unblocked. They also trap focus within the bounds
+ * of the dialog element and its descendants.
+ *
+ * For more on dialogs and modality, refer to the HTML specification for the dialog element:
+ * https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
+ */
+export const Dialog = DialogRoot
+
+DialogRoot.Content = DialogContent
+DialogRoot.Footer = DialogFooter
+
+export type {DialogProps}

package/src/components/dialog/dialog.css

@@ -0,0 +1,49 @@
+.sui-Dialog {
+  /* Computed width is moderated by Dialog's size prop, which controls max-width */
+  width: calc(100dvw - 2rem);
+  max-height: calc(100dvh - 2rem);
+  transition:
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete,
+    opacity 150ms var(--timing-linear),
+    scale 150ms var(--timing-curve);
+}
+
+.sui-Dialog:not([open]) {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.sui-Dialog[open] {
+  display: flex;
+  opacity: 1;
+  scale: 1;
+}
+
+.sui-Dialog::backdrop {
+  --dialog-backdrop: hsl(from var(--separator-high) h s l / var(--overlay-opacity));
+  background-color: var(--dialog-backdrop);
+  transition:
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete,
+    opacity 150ms var(--timing-linear);
+}
+
+.sui-Dialog:not([open])::backdrop {
+  opacity: 0;
+}
+
+.sui-Dialog[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  .sui-Dialog[open] {
+    opacity: 0;
+    scale: 0.9;
+  }
+
+  .sui-Dialog[open]::backdrop {
+    opacity: 0;
+  }
+}

package/src/components/dialog/dialog.props.ts

@@ -0,0 +1,45 @@
+import {CONTAINER_SIZE, type ContainerSize} from '../../types/Container'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @beta */
+export interface DialogProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
+  /**
+   * Text for the dialog heading.
+   * @remarks Recommended for accessibility. The component sets `aria-labelledby` to the heading when you give this prop.
+   */
+  header?: string
+  /**
+   * A function to call alongside the native `close` event.
+   * @remarks Use it to set `open` back to `false`. It runs for every close cause: the Escape key, a backdrop click, the close button, or a programmatic close.
+   */
+  onClose: React.ReactEventHandler<HTMLDialogElement>
+  /**
+   * Toggles the dialog's open state.
+   * @remarks `true` calls `showModal()` on the element. `false` calls `close()`.
+   */
+  open?: boolean
+  /** Sets the max width of the dialog */
+  size?: Responsive<ContainerSize>
+  /** CSS length value used to set the Dialog’s distance from the top of the viewport; Dialog is centered if not provided */
+  topAnchor?: string
+}
+
+export const dialogProps: Record<string, PropDef> = {
+  header: {
+    type: 'string',
+  },
+  open: {
+    type: 'boolean',
+  },
+  size: {
+    type: 'union',
+    className: 'container',
+    values: CONTAINER_SIZE,
+  },
+  topAnchor: {
+    type: 'string',
+    className: 'top-anchor',
+    variable: '--top-anchor',
+  },
+}

package/src/components/eyebrow/Eyebrow.tsx

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

package/src/components/eyebrow/eyebrow.props.ts

@@ -5,9 +5,13 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface EyebrowProps<T extends React.ElementType = 'span'> extends TypographyProps {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** CSS **font-size** property */
+  /**
+   * Sets font size. Uses the same scale as Label.
+   */
   size?: Responsive<EyebrowSize>
 }
 

package/src/components/flex/Flex.tsx

@@ -10,9 +10,14 @@ const flexClassName = suffixClassName('sui-Flex')
 /** @public */
 export function Flex<T extends ElementType = 'div'>({
   display = 'flex',
+  minHeight = '0',
+  minWidth = '0',
   ...props
 }: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>) {
-  const {as, children, className, style, ...rest} = getProps({display, ...props}, flexProps)
+  const {as, children, className, style, ...rest} = getProps(
+    {display, minHeight, minWidth, ...props},
+    flexProps,
+  )
   const Component = as || 'div'
 
   return (

package/src/components/flex/flex.props.ts

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

package/src/components/grid/Grid.tsx

@@ -10,9 +10,14 @@ const gridClassName = suffixClassName('sui-Grid')
 /** @public */
 export function Grid<T extends ElementType = 'div'>({
   display = 'grid',
+  minHeight = '0',
+  minWidth = '0',
   ...props
 }: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>) {
-  const {as, children, className, style, ...rest} = getProps({display, ...props}, gridProps)
+  const {as, children, className, style, ...rest} = getProps(
+    {display, minHeight, minWidth, ...props},
+    gridProps,
+  )
   const Component = as || 'div'
 
   return (

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.props.ts

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