@sanity/ui 5.0.0-alpha.5 → 5.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.5",
+  "version": "5.0.0-alpha.7",
   "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",
@@ -49,6 +52,8 @@
     "@sanity/icons": "^3.7.4",
     "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/components/checkbox/Checkbox.tsx

@@ -29,7 +29,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/{modal/Modal.tsx → dialog/Dialog.tsx}

@@ -8,33 +8,28 @@ import {Box} from '../box/Box'
 import {Flex} from '../flex/Flex'
 import {Heading} from '../heading/Heading'
 import {IconButton} from '../icon-button/IconButton'
-import {type ModalProps, modalProps} from './modal.props'
-
-const modalClassName = suffixClassName('sui-Modal')
-const modalContentClassName = suffixClassName('sui-ModalContent')
-const modalFooterClassName = suffixClassName('sui-ModalFooter')
-
-function ModalRoot(props: ModalProps) {
-  const {
-    children,
-    className,
-    style,
-    header,
-    open = false,
-    onClose,
-    ...rest
-  } = getProps(props, modalProps)
-
-  const modalRef = useRef<HTMLDialogElement>(null)
+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 modalClasses = clsx(
-    modalClassName,
+  const dialogClasses = clsx(
+    dialogClassName,
     'sui-inset0 sui-m-auto sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto',
   )
 
   useEffect(() => {
-    const dialogElement = modalRef.current
+    const dialogElement = dialogRef.current
     if (!dialogElement) return
 
     // `open` = `open` prop
@@ -51,7 +46,7 @@ function ModalRoot(props: ModalProps) {
       }
     }
 
-    // Ensure the modal is closed (and thus its `open` attribute updated)
+    // Ensure the dialog is closed (and thus its `open` attribute updated)
     // when the component is unmounted.
     return () => {
       dialogElement.close()
@@ -61,13 +56,13 @@ function ModalRoot(props: ModalProps) {
   return (
     <dialog
       {...rest}
-      ref={modalRef}
+      ref={dialogRef}
       closedby="any"
       aria-labelledby={header ? headerId : undefined}
       onClose={onClose}
-      className={clsx(modalClasses, className)}
+      className={clsx(dialogClasses, className)}
       style={style}
-      data-ui="Modal"
+      data-ui="Dialog"
     >
       <Flex flexShrink={0} justifyContent="space-between" alignItems="center">
         {header ? (
@@ -81,7 +76,7 @@ function ModalRoot(props: ModalProps) {
           aria-label="Close"
           level="tertiary"
           icon={CloseIcon}
-          onClick={() => modalRef.current?.close()}
+          onClick={() => dialogRef.current?.close()}
         />
       </Flex>
       {children}
@@ -89,15 +84,15 @@ function ModalRoot(props: ModalProps) {
   )
 }
 
-function ModalContent(props: ComponentProps<'div'>) {
+function DialogContent(props: ComponentProps<'div'>) {
   const {children, className, style, ...rest} = getProps(props, {})
 
   return (
     <Box
       {...rest}
-      className={clsx(modalContentClassName, className)}
+      className={clsx(dialogContentClassName, className)}
       style={style}
-      data-ui="ModalContent"
+      data-ui="DialogContent"
       flexGrow={1}
       overflowY="auto"
     >
@@ -106,15 +101,15 @@ function ModalContent(props: ComponentProps<'div'>) {
   )
 }
 
-function ModalFooter(props: ComponentProps<'div'>) {
+function DialogFooter(props: ComponentProps<'div'>) {
   const {children, className, style, ...rest} = getProps(props, {})
 
   return (
     <Box
       {...rest}
-      className={clsx(modalFooterClassName, className)}
+      className={clsx(dialogFooterClassName, className)}
       style={style}
-      data-ui="ModalFooter"
+      data-ui="DialogFooter"
       flexShrink={0}
     >
       {children}
@@ -122,7 +117,7 @@ function ModalFooter(props: ComponentProps<'div'>) {
   )
 }
 
-ModalRoot.displayName = 'Modal'
+DialogRoot.displayName = 'Dialog'
 
 /**
  * @beta
@@ -131,14 +126,14 @@ ModalRoot.displayName = 'Modal'
  * 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 modal element and its descendants.
+ * 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 Modal = ModalRoot
+export const Dialog = DialogRoot
 
-ModalRoot.Content = ModalContent
-ModalRoot.Footer = ModalFooter
+DialogRoot.Content = DialogContent
+DialogRoot.Footer = DialogFooter
 
-export type {ModalProps}
+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,29 @@
+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 to be displayed as the dialog's heading; optional but recommended for optimal accessibility and presentation */
+  header?: string
+  /** Used to set the value of open to false. Fires whenever the dialog is closed, either programmatically or by the user (via Esc key, clicking background, clicking the dialog's close button, or any other means.)  */
+  onClose: React.ReactEventHandler<HTMLDialogElement>
+  /** Whether the dialog is open; defaults to false. */
+  open?: boolean
+  /** Max width of the dialog */
+  size?: Responsive<ContainerSize>
+}
+
+export const dialogProps: Record<string, PropDef> = {
+  header: {
+    type: 'string',
+  },
+  open: {
+    type: 'boolean',
+  },
+  size: {
+    type: 'union',
+    className: 'container',
+    values: CONTAINER_SIZE,
+  },
+}

package/src/components/index.css

@@ -4,6 +4,7 @@
 @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,7 +16,7 @@
 @import './label/label.css';
 @import './link/link.css';
 @import './list/list.css';
-@import './modal/modal.css';
+@import './popover/popover.css';
 @import './press-area/press-area.css';
 @import './radio/radio.css';
 @import './spinner/spinner.css';

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,28 @@
+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 {
+  /** Anchor name for positioning */
+  anchorName?: React.ReactNode
+  /** Focusable trigger element */
+  children: React.ReactElement<Record<string, unknown>>
+  /** Popover content */
+  content?: React.ReactNode
+  /** Render tooltip in portal */
+  portal?: boolean
+}
+
+export const popoverProps: Record<string, PropDef> = {
+  anchorName: {
+    type: 'string',
+  },
+  content: {
+    type: 'string',
+  },
+  portal: {
+    type: 'boolean',
+  },
+  ...placementProps,
+}

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/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/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}

package/src/components/tooltip/tooltip.css

@@ -1,52 +1,31 @@
+[interestfor] {
+  --tooltip-delay: var(--tooltip-delay-group, 500ms);
+  /* The interestfor polyfill looks for intereset delay variables */
+  --interest-delay-start: var(--tooltip-delay);
+  --interest-delay-end: 0ms;
+  interest-delay-start: var(--tooltip-delay);
+  interest-delay-end: 0ms;
+}
+
 .sui-Tooltip {
-  --tooltip-delay-open: var(--tooltip-delay-group, 500ms);
-  --tooltip-delay-close: var(--tooltip-delay-group, 100ms);
   background: var(--backdrop);
+  visibility: hidden;
   opacity: 0;
   scale: 0.9;
-  visibility: hidden;
-  transition:
-    opacity 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-close),
-    scale 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-close),
-    visibility 0s linear calc(var(--tooltip-delay-close) + 200ms);
+  transition: none;
 }
 
-[aria-describedby]:is(:hover, :focus-visible) + [role="tooltip"]:not(.sui-Tooltip-Dismissed) {
+.sui-Tooltip:popover-open {
   visibility: visible;
   opacity: 1;
   scale: 1;
-  transition:
-    opacity 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-open),
-    scale 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-open),
-    visibility 0s linear var(--tooltip-delay-open);
-}
-
-[aria-describedby]:is(:hover, :focus-visible) + .sui-Tooltip-Dismissed[role="tooltip"] {
-  transition: none;
-}
-
-.sui-Tooltip[class*='placement-bottom'],
-.sui-Tooltip[class*='placement-top'] {
-  margin-block: var(--space-1);
-}
-
-.sui-Tooltip[class*='placement-left'],
-.sui-Tooltip[class*='placement-right'] {
-  margin-inline: var(--space-1);
-}
-
-.sui-Tooltip[class*='bottom'] {
-  transform-origin: center top;
-}
-
-.sui-Tooltip[class*='top'] {
-  transform-origin: center bottom;
-}
-
-.sui-Tooltip[class*='left'] {
-  transform-origin: right center;
+  transition: var(--fade-in-transition);
 }
 
-.sui-Tooltip[class*='right'] {
-  transform-origin: left center;
+@starting-style {
+  .sui-Tooltip:popover-open {
+    visibility: hidden;
+    opacity: 0;
+    scale: 0.9;
+  }
 }