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

package/package.json

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

@@ -16,6 +16,7 @@
 @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

@@ -14,16 +14,11 @@ 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)
+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()

package/src/components/modal/modal.css

@@ -1,7 +1,7 @@
 .sui-Modal {
-  min-width: 320px;
-  max-width: 80dvw;
-  max-height: 80dvh;
+  /* 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,

package/src/components/modal/modal.props.ts

@@ -1,4 +1,6 @@
+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'> {
@@ -8,6 +10,8 @@ export interface ModalProps extends Omit<React.ComponentProps<'dialog'>, 'open'>
   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> = {
@@ -17,4 +21,9 @@ export const modalProps: Record<string, PropDef> = {
   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;
+  }
 }

package/src/components/tooltip/tooltip.props.ts

@@ -1,19 +1,27 @@
 import {type PlacementProps, placementProps} from '../../props/placement'
 import {type PropDef} from '../../types/PropDef'
 
-/** @public */
-export interface TooltipProps extends React.ComponentProps<'div'>, PlacementProps {
-  /** Tooltip text */
-  text?: React.ReactNode
-  /** Disabled state */
-  disabled?: boolean
+/** @beta */
+export interface TooltipProps
+  extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
+  /** Anchor name for positioning */
+  anchorName?: React.ReactNode
+  /** Focusable trigger element */
+  children: React.ReactElement<Record<string, unknown>>
+  /** Tooltip content */
+  content?: React.ReactNode
+  /** Render tooltip in portal */
+  portal?: boolean
 }
 
 export const tooltipProps: Record<string, PropDef> = {
-  text: {
+  anchorName: {
     type: 'string',
   },
-  disabled: {
+  content: {
+    type: 'string',
+  },
+  portal: {
     type: 'boolean',
   },
   ...placementProps,

package/src/components/tooltip-group/TooltipGroup.tsx

@@ -23,10 +23,7 @@ export function TooltipGroup<T extends ElementType = 'div'>(
       return
     }
 
-    if (
-      e.propertyName === 'visibility' &&
-      window.getComputedStyle(tooltip).visibility !== 'hidden'
-    ) {
+    if (e.propertyName === 'opacity' && window.getComputedStyle(tooltip).opacity !== '0') {
       setIsActive(true)
     }
   }
@@ -49,7 +46,7 @@ export function TooltipGroup<T extends ElementType = 'div'>(
       style={{
         ...style,
         ...(isActive && {
-          '--tooltip-delay-group': 0,
+          '--tooltip-delay-group': '0ms',
         }),
       }}
       data-ui="TooltipGroup"

package/src/css/classes/generic/placement.css

@@ -1,3 +1,8 @@
+[class*='placement-'] {
+  inset: auto;
+  margin: 0;
+}
+
 @position-try --top-center {
   top: auto;
   right: auto;
@@ -169,3 +174,29 @@
   bottom: anchor(bottom);
   position-try-fallbacks: --left-end;
 }
+
+[class*="placement-bottom"],
+[class*="placement-top"] {
+  margin-block: var(--space-1);
+}
+
+[class*="placement-left"],
+[class*="placement-right"] {
+  margin-inline: var(--space-1);
+}
+
+[class*="placement-bottom"] {
+  transform-origin: center top;
+}
+
+[class*="placement-top"] {
+  transform-origin: center bottom;
+}
+
+[class*="placement-left"] {
+  transform-origin: right center;
+}
+
+[class*="placement-right"] {
+  transform-origin: left center;
+}

package/src/css/tokens/semantic.css

@@ -18,4 +18,8 @@
   --hover-transition: border-color 100ms linear, background-color 100ms linear;
   --inert-background: light-dark(var(--gray-50), var(--gray-950));
   --inert-foreground: light-dark(var(--gray-400), var(--gray-600));
+  --fade-in-transition:
+    opacity 200ms cubic-bezier(0.34, 1.2, 0.64, 1),
+    scale 200ms cubic-bezier(0.34, 1.2, 0.64, 1), visibility 0s linear,
+    display 200ms linear allow-discrete;
 }

package/src/hooks/useIsClient.ts

@@ -0,0 +1,10 @@
+import {useSyncExternalStore} from 'react'
+
+/** @public */
+export function useIsClient() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  )
+}

package/src/index.ts

@@ -19,6 +19,7 @@ export * from './components/label/Label'
 export * from './components/link/Link'
 export * from './components/list/List'
 export * from './components/modal/Modal'
+export * from './components/popover/Popover'
 export * from './components/press-area/PressArea'
 export * from './components/radio/Radio'
 export * from './components/skip-to-content/SkipToContent'
@@ -30,6 +31,8 @@ export * from './components/tooltip-group/TooltipGroup'
 export * from './components/v-stack/VStack'
 export * from './components/visually-hidden/VisuallyHidden'
 
+export * from './hooks/useIsClient'
+
 export type {FlexParentProps} from './props/flexParent'
 export type {GapProps} from './props/gap'
 export type {GridParentProps} from './props/gridParent'

package/src/polyfills.ts

@@ -0,0 +1,15 @@
+import {
+  apply as applyClosedByPolyfill,
+  isSupported as isClosedBySupported,
+} from 'dialog-closedby-polyfill'
+
+if (
+  typeof HTMLButtonElement !== 'undefined' &&
+  !('interestForElement' in HTMLButtonElement.prototype)
+) {
+  void import('interestfor')
+}
+
+if (typeof HTMLDialogElement !== 'undefined' && !isClosedBySupported()) {
+  applyClosedByPolyfill()
+}