@sanity/ui 2.13.5 → 2.14.0

package/dist/_visual-editing.d.mts

@@ -526,6 +526,13 @@ declare 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[]

package/dist/_visual-editing.d.ts

@@ -526,6 +526,13 @@ declare 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[]

package/dist/index.d.mts

@@ -1585,6 +1585,13 @@ export declare 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[]

package/dist/index.d.ts

@@ -1585,6 +1585,13 @@ export declare 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[]

package/package.json

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

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}