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

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

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

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/global/reset.css

@@ -17,46 +17,48 @@
 }
 
 /* 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
+) {
   font: inherit;
   line-height: inherit;
   color: inherit;
 }
 
 /* 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/hooks/useIsClient.ts

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

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/card/Card'
 export * from './components/checkbox/Checkbox'
 export * from './components/code/Code'
 export * from './components/container/Container'
+export * from './components/dialog/Dialog'
 export * from './components/divider/Divider'
 export * from './components/eyebrow/Eyebrow'
 export * from './components/flex/Flex'
@@ -18,6 +19,7 @@ export * from './components/inline/Inline'
 export * from './components/label/Label'
 export * from './components/link/Link'
 export * from './components/list/List'
+export * from './components/popover/Popover'
 export * from './components/press-area/PressArea'
 export * from './components/radio/Radio'
 export * from './components/skip-to-content/SkipToContent'
@@ -29,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'
@@ -58,3 +62,4 @@ export type {TextSize} from './types/Text'
 export type {TextAlign} from './types/TextAlign'
 export type {FontWeight} from './types/FontWeight'
 export type {Tone} from './types/Tone'
+export * from './components/badge/Badge'

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()
+}

package/src/utils/mergeTriggerProps.ts

@@ -0,0 +1,66 @@
+function isReactEventHandler(key: string, value: unknown): value is (e: never) => void {
+  return /^on[A-Z]/.test(key) && typeof value === 'function'
+}
+
+function chainEventHandlers<E>(
+  ...handlers: (((e: E) => void) | undefined)[]
+): ((e: E) => void) | undefined {
+  const defined = handlers.filter(Boolean) as ((e: E) => void)[]
+
+  if (defined.length === 0) {
+    return undefined
+  }
+
+  if (defined.length === 1) {
+    return defined[0]
+  }
+
+  return (e: E) => {
+    for (const handler of defined) {
+      handler(e)
+    }
+  }
+}
+
+export function mergeTriggerProps(
+  childProps: Record<string, unknown>,
+  forwardedProps?: Record<string, unknown>,
+  ownProps?: Record<string, unknown>,
+) {
+  const result: Record<string, unknown> = {}
+
+  for (const source of [forwardedProps, ownProps]) {
+    if (!source) {
+      continue
+    }
+
+    for (const [key, value] of Object.entries(source)) {
+      if (key === 'style') {
+        continue
+      }
+
+      if (isReactEventHandler(key, value)) {
+        result[key] = chainEventHandlers(result[key] as (e: never) => void, value)
+        continue
+      }
+
+      if (value !== undefined) {
+        result[key] = value
+      }
+    }
+  }
+
+  result['style'] = {
+    ...(childProps['style'] as object),
+    ...(forwardedProps?.['style'] as object),
+    ...(ownProps?.['style'] as object),
+  }
+
+  for (const [key, value] of Object.entries(childProps)) {
+    if (isReactEventHandler(key, value)) {
+      result[key] = chainEventHandlers(result[key] as (e: never) => void, value)
+    }
+  }
+
+  return result
+}

package/src/utils/renderPortal.tsx

@@ -0,0 +1,14 @@
+import {type ReactNode} from 'react'
+import {createPortal} from 'react-dom'
+
+export function renderPortal(node: ReactNode, mounted: boolean, portal?: boolean) {
+  if (!portal) {
+    return node
+  }
+
+  if (!mounted) {
+    return null
+  }
+
+  return createPortal(node, document.body)
+}

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha1'
-export const HASH = '162541'
+export const VERSION = '500alpha10'
+export const HASH = 'ad9fa1'