[components] Use ResizeObserver polyfill

sanity-io · Oct 6, 2020 · 2e8ebf2 · 2e8ebf2
1 parent 920412d
commit 2e8ebf2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/@sanity/components/src/containerQuery/containerQuery.tsx b/packages/@sanity/components/src/containerQuery/containerQuery.tsx
@@ -1,15 +1,16 @@
 import React, {useEffect, useRef, useState} from 'react'
+import {ResizeObserver} from '../resizeObserver'
 
 interface ContainerBreakpoint {
   name: string
   minWidth: number
 }
 
 const CONTAINER_BREAKPOINTS: ContainerBreakpoint[] = [
-  {name: 'medium', minWidth: 512 - 32},
-  {name: 'default', minWidth: 640 - 32},
-  {name: 'large', minWidth: 960 - 32},
-  {name: 'xlarge', minWidth: 1600 - 32}
+  {name: 'medium', minWidth: 512},
+  {name: 'default', minWidth: 640},
+  {name: 'large', minWidth: 960},
+  {name: 'xlarge', minWidth: 1600}
 ]
 
 function findMinBreakpoints(width: number) {

diff --git a/packages/@sanity/components/src/resizeObserver.ts b/packages/@sanity/components/src/resizeObserver.ts
@@ -0,0 +1,5 @@
+import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer'
+
+export const RO: typeof ResizeObserver = (window.ResizeObserver || ResizeObserverPolyfill) as any
+
+export {RO as ResizeObserver}