@react-three/fiber 8.0.26 → 8.2.0

package/dist/{index-1301c9b6.cjs.prod.js → index-ca47b633.cjs.prod.js}

@@ -855,7 +855,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1071,10 +1071,10 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
       const scene = container.getState().scene; // Link current root to the default scene
@@ -1093,10 +1093,10 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1113,7 +1113,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1124,13 +1124,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1143,13 +1143,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1177,20 +1175,23 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
+    createTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree.');
+    },
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
     unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1211,7 +1212,9 @@ const createStore = (invalidate, advance) => {
     function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
       const {
         width,
-        height
+        height,
+        top,
+        left
       } = size;
       const aspect = width / height;
       if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
@@ -1221,6 +1224,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1234,6 +1239,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1250,7 +1257,7 @@ const createStore = (invalidate, advance) => {
     }));
 
     const pointer = new THREE__namespace.Vector2();
-    return {
+    const rootState = {
       set,
       get,
       // Mock objects that have to be configured
@@ -1293,6 +1300,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1300,6 +1309,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1310,11 +1321,13 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height, updateStyle) => {
+      setSize: (width, height, updateStyle, top, left) => {
         const camera = get().camera;
         const size = {
           width,
           height,
+          top: top || 0,
+          left: left || 0,
           updateStyle
         };
         set(state => ({
@@ -1388,6 +1401,7 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
   const state = rootState.getState();
   let oldSize = state.size;
@@ -1429,15 +1443,17 @@ const createStore = (invalidate, advance) => {
 };
 
 function createSubs(callback, subs) {
-  const index = subs.length;
-  subs.push(callback);
-  return () => void subs.splice(index, 1);
+  const sub = {
+    callback
+  };
+  subs.add(sub);
+  return () => void subs.delete(sub);
 }
 
 let i;
-let globalEffects = [];
-let globalAfterEffects = [];
-let globalTailEffects = [];
+let globalEffects = new Set();
+let globalAfterEffects = new Set();
+let globalTailEffects = new Set();
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -1458,7 +1474,9 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
-  for (i = 0; i < effects.length; i++) effects[i](timestamp);
+  effects.forEach(({
+    callback
+  }) => callback(timestamp));
 }
 
 let subscribers;
@@ -1500,7 +1518,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1512,11 +1530,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
+      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1695,8 +1713,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1765,12 +1781,10 @@ function createRoot(canvas) {
 
 
         const handleSessionChange = () => {
-          const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
-          // WebXRManager's signature is incorrect.
-          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+          const state = store.getState();
+          state.gl.xr.enabled = state.gl.xr.isPresenting;
+          state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+          if (!state.gl.xr.isPresenting) invalidate(state);
         }; // WebXR session manager
 
 
@@ -1836,11 +1850,22 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || {
-        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-      };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
+      size = size || (canvas.parentElement ? {
+        width: canvas.parentElement.clientWidth,
+        height: canvas.parentElement.clientHeight,
+        top: canvas.parentElement.clientTop,
+        left: canvas.parentElement.clientLeft
+      } : {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      });
+
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
+      } // Check frameloop
+
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-7af14ac8.cjs.dev.js');
+var index = require('./index-0499a96a.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -144,10 +144,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure__default["default"]({
+  const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -168,7 +165,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (error) throw error;
   const root = React__namespace.useRef(null);
 
-  if (width > 0 && height > 0 && canvas) {
+  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({
       gl,
@@ -183,10 +180,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
-      size: {
-        width,
-        height
-      },
+      size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
@@ -241,6 +235,7 @@ exports.addTail = index.addTail;
 exports.advance = index.advance;
 exports.applyProps = index.applyProps;
 exports.context = index.context;
+exports.createEvents = index.createEvents;
 exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-1301c9b6.cjs.prod.js');
+var index = require('./index-ca47b633.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -144,10 +144,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure__default["default"]({
+  const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -168,7 +165,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (error) throw error;
   const root = React__namespace.useRef(null);
 
-  if (width > 0 && height > 0 && canvas) {
+  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({
       gl,
@@ -183,10 +180,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
-      size: {
-        width,
-        height
-      },
+      size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
@@ -241,6 +235,7 @@ exports.addTail = index.addTail;
 exports.advance = index.advance;
 exports.applyProps = index.applyProps;
 exports.context = index.context;
+exports.createEvents = index.createEvents;
 exports.createPortal = index.createPortal;
 exports.createRoot = index.createRoot;
 exports.dispose = index.dispose;

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-bfdbf5d7.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-bfdbf5d7.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-6279214a.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-6279214a.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -117,10 +117,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure({
+  const [containerRef, containerRect] = useMeasure({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -141,7 +138,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (error) throw error;
   const root = React.useRef(null);
 
-  if (width > 0 && height > 0 && canvas) {
+  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
     root.current.configure({
       gl,
@@ -156,10 +153,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       performance,
       raycaster,
       camera,
-      size: {
-        width,
-        height
-      },
+      size: containerRect,
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-7af14ac8.cjs.dev.js');
+var index = require('../../dist/index-0499a96a.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -258,10 +258,14 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
   const [{
     width,
-    height
+    height,
+    top,
+    left
   }, setSize] = React__namespace.useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
@@ -280,11 +284,15 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
-      height
+      height,
+      x,
+      y
     } = e.nativeEvent.layout;
     setSize({
       width,
-      height
+      height,
+      top: y,
+      left: x
     });
   }, []); // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
@@ -321,7 +329,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       dpr: reactNative.PixelRatio.get(),
       size: {
         width,
-        height
+        height,
+        top,
+        left
       },
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-1301c9b6.cjs.prod.js');
+var index = require('../../dist/index-ca47b633.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -258,10 +258,14 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
   const [{
     width,
-    height
+    height,
+    top,
+    left
   }, setSize] = React__namespace.useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
@@ -280,11 +284,15 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
-      height
+      height,
+      x,
+      y
     } = e.nativeEvent.layout;
     setSize({
       width,
-      height
+      height,
+      top: y,
+      left: x
     });
   }, []); // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
@@ -321,7 +329,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       dpr: reactNative.PixelRatio.get(),
       size: {
         width,
-        height
+        height,
+        top,
+        left
       },
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-bfdbf5d7.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-bfdbf5d7.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-6279214a.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-6279214a.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -231,10 +231,14 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   React.useMemo(() => extend(THREE), []);
   const [{
     width,
-    height
+    height,
+    top,
+    left
   }, setSize] = React.useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0
   });
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
@@ -253,11 +257,15 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   const onLayout = React.useCallback(e => {
     const {
       width,
-      height
+      height,
+      x,
+      y
     } = e.nativeEvent.layout;
     setSize({
       width,
-      height
+      height,
+      top: y,
+      left: x
     });
   }, []); // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
@@ -294,7 +302,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       dpr: PixelRatio.get(),
       size: {
         width,
-        height
+        height,
+        top,
+        left
       },
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.26",
+  "version": "8.2.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",