@sanity/ui 2.13.4 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.13.4",
+  "version": "2.14.0",
   "keywords": [
     "sanity",
     "ui",

package/src/core/components/toast/styles.ts

@@ -51,6 +51,9 @@ export function rootStyles(
       animation-name: ${loadingAnimation};
       animation-duration: ${props.$duration}ms;
       animation-fill-mode: both;
+      animation-timing-function: linear;
+      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+      will-change: width;
     }
 
     & > * {

package/src/core/components/toast/toastProvider.tsx

@@ -57,6 +57,12 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const prefersReducedMotion = usePrefersReducedMotion()
   const variants = useMemo<Variants>(
     () => ({
+      /**
+       * These variants makes use of special timing, by using a negative opacity as a starting position,
+       * as well as double opacity as the end position.
+       * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
+       * we want the content to disappear faster than the container.
+       */
       initial: {
         opacity: 0,
         [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,

package/src/core/constants.ts

@@ -25,8 +25,15 @@ export const POPOVER_MOTION_PROPS: {
   exit: Variant
   transition: Transition
 } = {
+  /**
+   * These variants makes use of special timing, by using a negative opacity as a starting position,
+   * as well as double opacity as the end position.
+   * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
+   * we want the content to disappear faster than the container.
+   */
   initial: {
     opacity: 0.5,
+    // the nagative opacity here, as well as the double opacity further down, are to make the content appear after the backgdrop, and when exiting the content should disappear first.
     [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: -1,
     scale: 0.97,
     willChange: 'transform',

package/src/core/primitives/popover/popover.tsx

@@ -27,7 +27,7 @@ import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} fr
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
+import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
 import {getElementRef} from '../../utils/getElementRef'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
@@ -86,6 +86,13 @@ export interface PopoverProps
    * @defaultValue false
    */
   matchReferenceWidth?: boolean
+  /**
+   * When true, blocks all pointer interaction with elements beneath the popover until closed.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  modal?: boolean
   open?: boolean
   overflow?: BoxOverflow
   padding?: number | number[]
@@ -108,6 +115,12 @@ export interface PopoverProps
   width?: PopoverWidth | PopoverWidth[]
 }
 
+const ViewportOverlay = () => {
+  const {zIndex} = useLayer()
+
+  return <div style={{height: '100vh', inset: 0, position: 'fixed', width: '100vw', zIndex}} />
+}
+
 /**
  * The `Popover` component is used to display some content on top of another.
  *
@@ -135,6 +148,7 @@ export const Popover = memo(
         DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      modal,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -395,6 +409,9 @@ export const Popover = memo(
 
     const popover = (
       <LayerProvider zOffset={zOffset}>
+        {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned before the below popover card. */}
+        {modal && <ViewportOverlay />}
+
         <PopoverCard
           {...restProps}
           __unstable_margins={margins}