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

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/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,3 +1,4 @@
+@import './animation.css';
 @import './border.css';
 @import './text-overflow.css';
 @import './text-trim.css';

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

@@ -18,6 +18,8 @@ export * from './components/inline/Inline'
 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'
@@ -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'

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 = '500alpha4'
-export const HASH = 'fc8b40'
+export const VERSION = '500alpha6'
+export const HASH = '71d7e5'