@sanity/ui 5.0.0-alpha.4 → 5.0.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.6",
   "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/index.css

@@ -15,6 +15,8 @@
 @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/modal/Modal.tsx

@@ -0,0 +1,139 @@
+import {CloseIcon} from '@sanity/icons'
+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 ModalProps, modalProps} from './modal.props'
+
+const modalClassName = suffixClassName('sui-Modal')
+const modalContentClassName = suffixClassName('sui-ModalContent')
+const modalFooterClassName = suffixClassName('sui-ModalFooter')
+
+function ModalRoot({open = false, size = 0, ...props}: ModalProps) {
+  const {children, className, style, header, onClose, ...rest} = getProps(
+    {size, ...props},
+    modalProps,
+  )
+
+  const modalRef = useRef<HTMLDialogElement>(null)
+  const headerId = useId()
+
+  const modalClasses = clsx(
+    modalClassName,
+    '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
+    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 modal is closed (and thus its `open` attribute updated)
+    // when the component is unmounted.
+    return () => {
+      dialogElement.close()
+    }
+  }, [open])
+
+  return (
+    <dialog
+      {...rest}
+      ref={modalRef}
+      closedby="any"
+      aria-labelledby={header ? headerId : undefined}
+      onClose={onClose}
+      className={clsx(modalClasses, className)}
+      style={style}
+      data-ui="Modal"
+    >
+      <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={() => modalRef.current?.close()}
+        />
+      </Flex>
+      {children}
+    </dialog>
+  )
+}
+
+function ModalContent(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(modalContentClassName, className)}
+      style={style}
+      data-ui="ModalContent"
+      flexGrow={1}
+      overflowY="auto"
+    >
+      {children}
+    </Box>
+  )
+}
+
+function ModalFooter(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(modalFooterClassName, className)}
+      style={style}
+      data-ui="ModalFooter"
+      flexShrink={0}
+    >
+      {children}
+    </Box>
+  )
+}
+
+ModalRoot.displayName = 'Modal'
+
+/**
+ * @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 modal 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
+
+ModalRoot.Content = ModalContent
+ModalRoot.Footer = ModalFooter
+
+export type {ModalProps}

package/src/components/modal/modal.css

@@ -0,0 +1,49 @@
+.sui-Modal {
+  /* Computed width is moderated by Modal'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-Modal:not([open]) {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.sui-Modal[open] {
+  display: flex;
+  opacity: 1;
+  scale: 1;
+}
+
+.sui-Modal::backdrop {
+  --modal-backdrop: hsl(from var(--separator-high) h s l / var(--overlay-opacity));
+  background-color: var(--modal-backdrop);
+  transition:
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete,
+    opacity 150ms var(--timing-linear);
+}
+
+.sui-Modal:not([open])::backdrop {
+  opacity: 0;
+}
+
+.sui-Modal[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  .sui-Modal[open] {
+    opacity: 0;
+    scale: 0.9;
+  }
+
+  .sui-Modal[open]::backdrop {
+    opacity: 0;
+  }
+}

package/src/components/modal/modal.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 ModalProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
+  /** Text to be displayed as the modal's heading; optional but recommended for optimal accessibility and presentation */
+  header?: string
+  /** Used to set the value of open to false. Fires whenever the modal is closed, either programmatically or by the user (via Esc key, clicking background, clicking the modal's close button, or any other means.)  */
+  onClose: React.ReactEventHandler<HTMLDialogElement>
+  /** Whether the modal is open; defaults to false. */
+  open?: boolean
+  /** Max width of the modal */
+  size?: Responsive<ContainerSize>
+}
+
+export const modalProps: Record<string, PropDef> = {
+  header: {
+    type: 'string',
+  },
+  open: {
+    type: 'boolean',
+  },
+  size: {
+    type: 'union',
+    className: 'container',
+    values: CONTAINER_SIZE,
+  },
+}

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;
+  }
 }