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

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

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

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 = '500alpha5'
-export const HASH = '024922'
+export const VERSION = '500alpha7'
+export const HASH = '47d232'

package/src/components/modal/modal.css

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

@@ -1,20 +0,0 @@
-import {type PropDef} from '../../types/PropDef'
-
-/** @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
-}
-
-export const modalProps: Record<string, PropDef> = {
-  header: {
-    type: 'string',
-  },
-  open: {
-    type: 'boolean',
-  },
-}