@react-three/fiber 8.0.15 → 8.0.18

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-208291a3.esm.js → index-acedf326.esm.js}

@@ -335,7 +335,7 @@ function applyProps$1(instance, data) {
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        const supportsColorManagement = THREE.ColorManagement;
+        const supportsColorManagement = ('ColorManagement' in THREE);
         if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       } // Else, just overwrite the value
 
@@ -391,6 +391,15 @@ function updateCamera(camera, size) {
     camera.updateMatrixWorld();
   }
 }
+/**
+ * Safely sets a deeply-nested value on an object.
+ */
+
+function setDeep(obj, value, keys) {
+  const key = keys.pop();
+  const target = keys.reduce((acc, key) => acc[key], obj);
+  return target[key] = value;
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -857,7 +866,7 @@ function createRenderer(roots, getEventPriority) {
         type,
         root,
         attach,
-        // TODO: Figure out what this is for
+        // Save args in case we need to reconstruct later for HMR
         memoizedProps: {
           args
         }
@@ -878,10 +887,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent
-      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent.
+      // That is handled at commit to avoid duplication during Suspense
+      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -947,7 +955,7 @@ function createRenderer(roots, getEventPriority) {
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
-      } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
+      } // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
@@ -1058,7 +1066,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return !!localState.handlers || !!localState.attach;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1104,6 +1112,11 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
+      } // The attach attribute implies that the object attaches itself on the parent
+
+
+      if (localState.attach) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 
@@ -1117,27 +1130,11 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
-      var _instance$__r3f5;
-
-      // Deatch while the instance is hidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
-      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f6;
-
-      // Re-attach when the instance is unhidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f6 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f6 : {};
-      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1566,14 +1563,13 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
-
-
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1641,7 +1637,7 @@ function createRoot(canvas) {
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,
@@ -1762,11 +1758,12 @@ function createRoot(canvas) {
           if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
           if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
         }
-      } // Set color management
+      } // Safely set color management if available.
+      // Avoid accessing THREE.ColorManagement to play nice with older versions
 
 
-      if (THREE.ColorManagement) {
-        THREE.ColorManagement.legacyMode = legacy;
+      if ('ColorManagement' in THREE) {
+        setDeep(THREE, legacy, ['ColorManagement', 'legacyMode']);
       }
 
       const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;

package/dist/{index-606d3385.cjs.dev.js → index-c937c162.cjs.dev.js}

@@ -362,7 +362,7 @@ function applyProps$1(instance, data) {
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        const supportsColorManagement = THREE__namespace.ColorManagement;
+        const supportsColorManagement = ('ColorManagement' in THREE__namespace);
         if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       } // Else, just overwrite the value
 
@@ -418,6 +418,15 @@ function updateCamera(camera, size) {
     camera.updateMatrixWorld();
   }
 }
+/**
+ * Safely sets a deeply-nested value on an object.
+ */
+
+function setDeep(obj, value, keys) {
+  const key = keys.pop();
+  const target = keys.reduce((acc, key) => acc[key], obj);
+  return target[key] = value;
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -884,7 +893,7 @@ function createRenderer(roots, getEventPriority) {
         type,
         root,
         attach,
-        // TODO: Figure out what this is for
+        // Save args in case we need to reconstruct later for HMR
         memoizedProps: {
           args
         }
@@ -905,10 +914,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent
-      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent.
+      // That is handled at commit to avoid duplication during Suspense
+      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -974,7 +982,7 @@ function createRenderer(roots, getEventPriority) {
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
-      } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
+      } // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
@@ -1085,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return !!localState.handlers || !!localState.attach;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1131,6 +1139,11 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
+      } // The attach attribute implies that the object attaches itself on the parent
+
+
+      if (localState.attach) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 
@@ -1144,27 +1157,11 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
-      var _instance$__r3f5;
-
-      // Deatch while the instance is hidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
-      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f6;
-
-      // Re-attach when the instance is unhidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f6 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f6 : {};
-      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1593,14 +1590,13 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
-
-
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1668,7 +1664,7 @@ function createRoot(canvas) {
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,
@@ -1789,11 +1785,12 @@ function createRoot(canvas) {
           if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
           if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
         }
-      } // Set color management
+      } // Safely set color management if available.
+      // Avoid accessing THREE.ColorManagement to play nice with older versions
 
 
-      if (THREE__namespace.ColorManagement) {
-        THREE__namespace.ColorManagement.legacyMode = legacy;
+      if ('ColorManagement' in THREE__namespace) {
+        setDeep(THREE__namespace, legacy, ['ColorManagement', 'legacyMode']);
       }
 
       const outputEncoding = linear ? THREE__namespace.LinearEncoding : THREE__namespace.sRGBEncoding;

package/dist/{index-05d06e15.cjs.prod.js → index-e2e71da1.cjs.prod.js}

@@ -362,7 +362,7 @@ function applyProps$1(instance, data) {
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
 
-        const supportsColorManagement = THREE__namespace.ColorManagement;
+        const supportsColorManagement = ('ColorManagement' in THREE__namespace);
         if (!supportsColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       } // Else, just overwrite the value
 
@@ -418,6 +418,15 @@ function updateCamera(camera, size) {
     camera.updateMatrixWorld();
   }
 }
+/**
+ * Safely sets a deeply-nested value on an object.
+ */
+
+function setDeep(obj, value, keys) {
+  const key = keys.pop();
+  const target = keys.reduce((acc, key) => acc[key], obj);
+  return target[key] = value;
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -884,7 +893,7 @@ function createRenderer(roots, getEventPriority) {
         type,
         root,
         attach,
-        // TODO: Figure out what this is for
+        // Save args in case we need to reconstruct later for HMR
         memoizedProps: {
           args
         }
@@ -905,10 +914,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent
-      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent.
+      // That is handled at commit to avoid duplication during Suspense
+      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -974,7 +982,7 @@ function createRenderer(roots, getEventPriority) {
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
           removeInteractivity(child.__r3f.root, child);
         }
-      } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
+      } // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
       // Never dispose of primitives because their state may be kept outside of React!
       // In order for an object to be able to dispose it has to have
       //   - a dispose method,
@@ -1085,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return !!localState.handlers || !!localState.attach;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1131,6 +1139,11 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
+      } // The attach attribute implies that the object attaches itself on the parent
+
+
+      if (localState.attach) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 
@@ -1144,27 +1157,11 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
-      var _instance$__r3f5;
-
-      // Deatch while the instance is hidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
-      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f6;
-
-      // Re-attach when the instance is unhidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f6 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f6 : {};
-      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1593,14 +1590,13 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
-
-
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1668,7 +1664,7 @@ function createRoot(canvas) {
 
   const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, null, logRecoverableError, null); // Map it
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, null, false, null, '', logRecoverableError, null); // Map it
 
   if (!prevRoot) roots.set(canvas, {
     fiber,
@@ -1789,11 +1785,12 @@ function createRoot(canvas) {
           if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
           if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
         }
-      } // Set color management
+      } // Safely set color management if available.
+      // Avoid accessing THREE.ColorManagement to play nice with older versions
 
 
-      if (THREE__namespace.ColorManagement) {
-        THREE__namespace.ColorManagement.legacyMode = legacy;
+      if ('ColorManagement' in THREE__namespace) {
+        setDeep(THREE__namespace, legacy, ['ColorManagement', 'legacyMode']);
       }
 
       const outputEncoding = linear ? THREE__namespace.LinearEncoding : THREE__namespace.sRGBEncoding;

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

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-606d3385.cjs.dev.js');
+var index = require('./index-c937c162.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-05d06e15.cjs.prod.js');
+var index = require('./index-e2e71da1.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
-var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
 require('react-reconciler/constants');
 require('zustand');
@@ -36,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
 const DOM_EVENTS = {
@@ -158,8 +156,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
-  const meshRef = React__namespace.useRef(null);
+  const divRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
+  React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -191,7 +190,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -211,7 +210,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: mergeRefs__default["default"]([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -219,12 +218,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React__namespace.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -1,9 +1,8 @@
-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-208291a3.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-208291a3.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-acedf326.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-acedf326.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import mergeRefs from 'react-merge-refs';
 import useMeasure from 'react-use-measure';
 import 'react-reconciler/constants';
 import 'zustand';
@@ -130,8 +129,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React.useRef(null);
-  const meshRef = React.useRef(null);
+  const divRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
+  React.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
@@ -163,7 +163,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
         onCreated == null ? void 0 : onCreated(state);
       }
     });
@@ -183,7 +183,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     if (canvas) return () => unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: mergeRefs([meshRef, containerRef]),
+    ref: divRef,
     style: {
       position: 'relative',
       width: '100%',
@@ -191,12 +191,18 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, props), /*#__PURE__*/React.createElement("canvas", {
-    ref: mergeRefs([canvasRef, forwardedRef]),
+  }, props), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
     style: {
       display: 'block'
     }
-  }, fallback));
+  }, fallback)));
 });
 
 export { Canvas, createPointerEvents as events };