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

package/src/components/spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import {SpinnerIcon} from '@sanity/icons'
+import {SpinnerIcon} from '@sanity/icons/Spinner'
 import clsx from 'clsx'
 
 import {getProps} from '../../utils/getProps'

package/src/components/spinner/spinner.props.ts

@@ -4,6 +4,9 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface SpinnerProps extends React.ComponentProps<'svg'> {
+  /**
+   * Size of the spinner icon.
+   */
   size?: Responsive<IconSize>
 }
 

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

@@ -3,9 +3,14 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
-  /** Error state */
+  /**
+   * Applies error styling to the switch track.
+   * @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 switch.
+   */
   label: React.ReactNode
 }
 

package/src/components/text/Text.tsx

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

package/src/components/text/text.props.ts

@@ -5,9 +5,13 @@ import {TEXT_SIZE, type TextSize} from '../../types/Text'
 
 /** @public */
 export interface TextProps<T extends React.ElementType = 'span'> extends TypographyProps {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   */
   size?: Responsive<TextSize>
 }
 

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,35 @@
 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 {
+  /**
+   * Shared anchor identifier.
+   */
+  anchorName?: React.ReactNode
+  /**
+   * The trigger element.
+   */
+  children: React.ReactElement<Record<string, unknown>>
+  /**
+   * The tooltip label.
+   */
+  content?: React.ReactNode
+  /**
+   * Renders the label into `document.body` through a React portal instead of inline.
+   */
+  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/components/tooltip-group/tooltipGroup.props.ts

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

package/src/components/v-stack/VStack.tsx

@@ -1,31 +1,25 @@
 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 VStackProps, vStackProps} from './vStack.props'
+import {type VStackProps} from './vStack.props'
 
 const vStackClassName = suffixClassName('sui-VStack')
 
 /** @public */
-export function VStack<T extends ElementType = 'div'>(
-  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
-) {
-  const {as, children, className, style, ...rest} = getProps(props, vStackProps)
-  const Component = as || 'div'
-
+export function VStack<T extends ElementType = 'div'>({
+  className,
+  ...props
+}: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>) {
   return (
     <Flex
-      as={Component}
       className={clsx(vStackClassName, className)}
-      style={style}
       data-ui="VStack"
       flexDirection="column"
-      {...rest}
-    >
-      {children}
-    </Flex>
+      {...(props as ComponentProps)}
+    />
   )
 }
 

package/src/components/v-stack/vStack.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 VStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
-  /** Element to render */
-  as?: T
-}
-
-export const vStackProps: Record<string, PropDef> = {
-  as: {
-    type: 'string',
-  },
-  gap: gapProps['gap'] as PropDef,
-}
+export interface VStackProps<T extends React.ElementType = 'div'> extends Pick<
+  FlexProps<T>,
+  'as' | 'gap'
+> {}

package/src/components/visually-hidden/visuallyHidden.props.ts

@@ -2,9 +2,13 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @public */
 export interface VisuallyHiddenProps<T extends React.ElementType = 'span'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** If true, element is visible on :focus-visible */
+  /**
+   * If true, the element becomes visible on `:focus-visible`.
+   */
   visibleOnFocus?: boolean
 }
 

package/src/css/classes/generic/display.css

@@ -1,10 +1,10 @@
 @breakpoints {
-  .sui-display-block { display: block; }
-  .sui-display-inline-block { display: inline-block; }
-  .sui-display-inline { display: inline; }
-  .sui-display-flex { display: flex; }
-  .sui-display-inline-flex { display: inline-flex; }
-  .sui-display-grid { display: grid; }
-  .sui-display-inline-grid { display: inline-grid; }
-  .sui-display-none { display: none; }
+  .sui-display-block:not([hidden]) { display: block; }
+  .sui-display-inline-block:not([hidden]) { display: inline-block; }
+  .sui-display-inline:not([hidden]) { display: inline; }
+  .sui-display-flex:not([hidden]) { display: flex; }
+  .sui-display-inline-flex:not([hidden]) { display: inline-flex; }
+  .sui-display-grid:not([hidden]) { display: grid; }
+  .sui-display-inline-grid:not([hidden]) { display: inline-grid; }
+  .sui-display-none:not([hidden]) { display: none; }
 }

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/classes/local/animation.css

@@ -0,0 +1,4 @@
+:root {
+  --timing-linear: linear;
+  --timing-curve: cubic-bezier(0.34, 1.2, 0.64, 1);
+}

package/src/css/classes/local/index.css

@@ -1,4 +1,6 @@
+@import './animation.css';
 @import './border.css';
 @import './text-overflow.css';
 @import './text-trim.css';
 @import './tone.css';
+@import './top-anchor.css';

package/src/css/classes/local/top-anchor.css

@@ -0,0 +1,4 @@
+.sui-top-anchor {
+  inset-block-start: var(--top-anchor);
+  max-block-size: calc(100dvh - var(--top-anchor) * 2);
+}

package/src/css/classes/system/shadow.css

@@ -1,6 +1,6 @@
-.sui-shadow0 { box-shadow: var(--shadow0); }
-.sui-shadow1 { box-shadow: var(--shadow1); }
-.sui-shadow2 { box-shadow: var(--shadow2); }
-.sui-shadow3 { box-shadow: var(--shadow3); }
-.sui-shadow4 { box-shadow: var(--shadow4); }
-.sui-shadow5 { box-shadow: var(--shadow5); }
+.sui-shadow0 { box-shadow: var(--shadow-0); }
+.sui-shadow1 { box-shadow: var(--shadow-1); }
+.sui-shadow2 { box-shadow: var(--shadow-2); }
+.sui-shadow3 { box-shadow: var(--shadow-3); }
+.sui-shadow4 { box-shadow: var(--shadow-4); }
+.sui-shadow5 { box-shadow: var(--shadow-5); }

package/src/css/global/reset.css

@@ -17,46 +17,59 @@
 }
 
 /* Prevent adjustments of font size after orientation changes in iOS. */
-html {
+:where(html) {
   -webkit-text-size-adjust: 100%;
 }
 
-body {
+:where(body) {
   background: light-dark(var(--white), var(--black));
   font-family: var(--sans);
   -webkit-font-smoothing: antialiased;
 }
 
 /* Display multimedia as block by default */
-audio,
-canvas,
-embed,
-iframe,
-img,
-object,
-picture,
-video {
+:where(
+  audio,
+  canvas,
+  embed,
+  iframe,
+  img,
+  object,
+  picture,
+  video
+){
   display: block;
   max-width: 100%;
 }
-img,
-picture,
-video {
+:where(img, picture, video) {
   block-size: auto;
 }
 
 /* Inherit typography in form controls */
-button,
-input,
-select,
-textarea {
+:where(
+  button,
+  input,
+  select,
+  textarea
+) {
+  appearance: none;
+  color: inherit;
   font: inherit;
   line-height: inherit;
-  color: inherit;
+}
+
+/* Remove user agent reduced opacity on disabled form elements */
+:where(
+  button,
+  input,
+  select,
+  textarea
+):disabled {
+  opacity: 1;
 }
 
 /* Remove excess space for table borders */
-table {
+:where(table) {
   border-collapse: collapse;
   border-spacing: 0;
 }

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/css/tokens/surface.css

@@ -10,6 +10,8 @@
   --foreground-high-emphasized: light-dark(var(--white), var(--black));
   --foreground-low: light-dark(var(--gray-600), var(--gray-400));
   --foreground-low-emphasized: light-dark(var(--gray-100), var(--gray-900));
+  /* Used to create equivalent text + block size for form elements vs UI v3/4. Can drop once migration is complete. */
+  --form-element-text: var(--regular) 13px / 1.15 var(--sans);
 }
 
 [class*='sui-tone'] {

package/src/hooks/useIsClient.ts

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