@sanity/ui 2.13.5 → 2.14.1

package/dist/_legacy/refractor.esm.js

@@ -12,7 +12,7 @@ function LazyRefractor(props) {
   let t1;
   $[2] !== language || $[3] !== registered || $[4] !== value ? (t1 = !(language && registered) && /* @__PURE__ */ jsx("code", { children: value }), $[2] = language, $[3] = registered, $[4] = value, $[5] = t1) : t1 = $[5];
   let t2;
-  $[6] !== language || $[7] !== registered || $[8] !== value ? (t2 = language && registered && /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value }), $[6] = language, $[7] = registered, $[8] = value, $[9] = t2) : t2 = $[9];
+  $[6] !== language || $[7] !== registered || $[8] !== value ? (t2 = language && registered && /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value: String(value) }), $[6] = language, $[7] = registered, $[8] = value, $[9] = t2) : t2 = $[9];
   let t3;
   return $[10] !== t1 || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Fragment, { children: [
     t1,

package/dist/_legacy/refractor.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"refractor.esm.js","sources":["../../src/core/primitives/code/refractor.tsx"],"sourcesContent":["import Refractor from 'react-refractor'\n\nexport default function LazyRefractor(\n  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> &\n    Pick<React.ComponentProps<typeof Refractor>, 'value'>,\n) {\n  const {language: languageProp, value} = props\n  const language = typeof languageProp === 'string' ? languageProp : undefined\n  const registered = language ? Refractor.hasLanguage(language as any) : false\n\n  return (\n    <>\n      {!(language && registered) && <code>{value}</code>}\n      {language && registered && <Refractor inline language={language} value={value} />}\n    </>\n  )\n}\n\nLazyRefractor.displayName = 'LazyRefractor'\n"],"names":["LazyRefractor","props","$","_c","language","languageProp","value","undefined","t0","Refractor","hasLanguage","registered","t1","t2","t3","displayName"],"mappings":";;;AAEA,SAAeA,cAAAC,OAAA;AAAAC,QAAAA,IAAAC,EAAA,EAAA,GAIb;AAAA,IAAAC,UAAAC;AAAAA,IAAAC;AAAAA,EAAAA,IAAwCL,OACxCG,WAAiB,OAAOC,gBAAiB,WAAWA,eAAYE;AAAYC,MAAAA;AAAAN,WAAAE,YACzDI,KAAAJ,WAAWK,UAAAC,YAAsBN,QAAe,IAAS,IAAAF,OAAAE,UAAAF,OAAAM,MAAAA,KAAAN,EAAA,CAAA;AAA5E,QAAAS,aAAmBH;AAAyDI,MAAAA;AAAAV,IAAAE,CAAAA,MAAAA,YAAAF,SAAAS,cAAAT,EAAA,CAAA,MAAAI,SAIvEM,KAAA,EAAER,YAAYO,2CAAsBL,EAAAA,UAAAA,MAAAA,CAAM,GAAOJ,OAAAE,UAAAF,OAAAS,YAAAT,OAAAI,OAAAJ,OAAAU,MAAAA,KAAAV,EAAA,CAAA;AAAAW,MAAAA;AAAAX,IAAAE,CAAAA,MAAAA,YAAAF,SAAAS,cAAAT,EAAA,CAAA,MAAAI,SACjDO,KAAAT,YAAYO,cAAe,oBAAA,WAAA,EAAU,QAAA,IAAiBP,UAAiBE,OAAS,GAAAJ,OAAAE,UAAAF,OAAAS,YAAAT,OAAAI,OAAAJ,OAAAW,MAAAA,KAAAX,EAAA,CAAA;AAAAY,MAAAA;AAAAZ,SAAAA,EAAAU,EAAAA,MAAAA,MAAAV,UAAAW,MAFnFC,KACGF,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA;AAAAA,IACAC;AAAAA,EAAAA,EAAgF,CAAA,GAChFX,QAAAU,IAAAV,QAAAW,IAAAX,QAAAY,MAAAA,KAAAZ,EAAA,EAAA,GAHHY;AAGG;AAIPd,cAAce,cAAc;"}
+{"version":3,"file":"refractor.esm.js","sources":["../../src/core/primitives/code/refractor.tsx"],"sourcesContent":["import Refractor from 'react-refractor'\n\nexport default function LazyRefractor(\n  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {\n    value: React.ReactNode\n  },\n) {\n  const {language: languageProp, value} = props\n  const language = typeof languageProp === 'string' ? languageProp : undefined\n  const registered = language ? Refractor.hasLanguage(language as any) : false\n\n  return (\n    <>\n      {!(language && registered) && <code>{value}</code>}\n      {language && registered && <Refractor inline language={language} value={String(value)} />}\n    </>\n  )\n}\n\nLazyRefractor.displayName = 'LazyRefractor'\n"],"names":["LazyRefractor","props","$","_c","language","languageProp","value","undefined","t0","Refractor","hasLanguage","registered","t1","t2","String","t3","displayName"],"mappings":";;;AAEA,SAAeA,cAAAC,OAAA;AAAAC,QAAAA,IAAAC,EAAA,EAAA,GAKb;AAAA,IAAAC,UAAAC;AAAAA,IAAAC;AAAAA,EAAAA,IAAwCL,OACxCG,WAAiB,OAAOC,gBAAiB,WAAWA,eAAYE;AAAYC,MAAAA;AAAAN,WAAAE,YACzDI,KAAAJ,WAAWK,UAAAC,YAAsBN,QAAe,IAAS,IAAAF,OAAAE,UAAAF,OAAAM,MAAAA,KAAAN,EAAA,CAAA;AAA5E,QAAAS,aAAmBH;AAAyDI,MAAAA;AAAAV,IAAAE,CAAAA,MAAAA,YAAAF,SAAAS,cAAAT,EAAA,CAAA,MAAAI,SAIvEM,KAAA,EAAER,YAAYO,2CAAsBL,EAAAA,UAAAA,MAAAA,CAAM,GAAOJ,OAAAE,UAAAF,OAAAS,YAAAT,OAAAI,OAAAJ,OAAAU,MAAAA,KAAAV,EAAA,CAAA;AAAAW,MAAAA;AAAAX,IAAAE,CAAAA,MAAAA,YAAAF,SAAAS,cAAAT,EAAA,CAAA,MAAAI,SACjDO,KAAAT,YAAYO,kCAAe,WAAU,EAAA,QAAK,IAAYP,UAAiB,OAAAU,OAAOR,KAAK,EAAA,CAAK,GAAAJ,OAAAE,UAAAF,OAAAS,YAAAT,OAAAI,OAAAJ,OAAAW,MAAAA,KAAAX,EAAA,CAAA;AAAAa,MAAAA;AAAAb,SAAAA,EAAAU,EAAAA,MAAAA,MAAAV,UAAAW,MAF3FE,KACGH,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA;AAAAA,IACAC;AAAAA,EAAAA,EAAwF,CAAA,GACxFX,QAAAU,IAAAV,QAAAW,IAAAX,QAAAa,MAAAA,KAAAb,EAAA,EAAA,GAHHa;AAGG;AAIPf,cAAcgB,cAAc;"}

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.1",
   "keywords": [
     "sanity",
     "ui",

package/src/core/primitives/code/code.tsx

@@ -31,7 +31,7 @@ export const Code = forwardRef(function Code(
   return (
     <StyledCode data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
       <Suspense fallback={<code>{children}</code>}>
-        <LazyRefractor language={language} value={String(children)} />
+        <LazyRefractor language={language} value={children} />
       </Suspense>
     </StyledCode>
   )

package/src/core/primitives/code/refractor.tsx

@@ -1,8 +1,9 @@
 import Refractor from 'react-refractor'
 
 export default function LazyRefractor(
-  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> &
-    Pick<React.ComponentProps<typeof Refractor>, 'value'>,
+  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {
+    value: React.ReactNode
+  },
 ) {
   const {language: languageProp, value} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
@@ -11,7 +12,7 @@ export default function LazyRefractor(
   return (
     <>
       {!(language && registered) && <code>{value}</code>}
-      {language && registered && <Refractor inline language={language} value={value} />}
+      {language && registered && <Refractor inline language={language} value={String(value)} />}
     </>
   )
 }

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}