@react-three/fiber 8.0.0-beta.4 → 8.0.0-beta.7

package/dist/{index-3d7af2b7.esm.js → index-6a8cc5a4.esm.js}

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { suspend, preload, clear } from 'suspend-react';
 import * as THREE from 'three';
+import * as React from 'react';
 import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import create from 'zustand';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
+import { suspend, preload, clear } from 'suspend-react';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -15,6 +15,15 @@ const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
 }
+/**
+ * Returns instance root state
+ */
+
+const getRootState = obj => {
+  var _r3f;
+
+  return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
+};
 /**
  * Picks or omits keys from an object
  * `omit` will filter out keys, and otherwise cherry-pick them.
@@ -24,11 +33,7 @@ function filterKeys(obj, omit, ...keys) {
   const keysToSelect = new Set(keys);
   return Object.entries(obj).reduce((acc, [key, value]) => {
     const shouldInclude = !omit;
-
-    if (keysToSelect.has(key) === shouldInclude) {
-      acc[key] = value;
-    }
-
+    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
     return acc;
   }, {});
 }
@@ -66,7 +71,7 @@ const is = {
     const isArr = is.arr(a);
     if (isArr && arrays === 'reference') return a === b; // Array or Object, shallow compare first to see if it's a match
 
-    if ((isArr || isObj) && a == b) return true; // Last resort, go through keys
+    if ((isArr || isObj) && a === b) return true; // Last resort, go through keys
 
     let i;
 
@@ -74,7 +79,13 @@ const is = {
 
     for (i in strict ? b : a) if (a[i] !== b[i]) return false;
 
-    return is.und(i) ? a === b : true;
+    if (is.und(i)) {
+      if (isArr && a.length === 0 && b.length === 0) return true;
+      if (isObj && Object.keys(a).length === 0 && Object.keys(b).length === 0) return true;
+      if (a !== b) return false;
+    }
+
+    return true;
   }
 
 }; // Collects nodes and materials from a THREE.Object3D
@@ -110,30 +121,8 @@ function prepare(object, state) {
   if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
       type: '',
-      context: {
-        current: null
-      },
-      getContext: () => {
-        const injects = [];
-        let inject = instance.__r3f.context.current;
-
-        while (inject) {
-          var _inject$memoizedProps, _inject, _inject$context;
-
-          const {
-            children,
-            args,
-            ...props
-          } = (_inject$memoizedProps = (_inject = inject) == null ? void 0 : _inject.memoizedProps) != null ? _inject$memoizedProps : {};
-          injects.push(props);
-          inject = (_inject$context = inject.context) == null ? void 0 : _inject$context.current;
-        }
-
-        return injects.reverse().reduce((prev, cur) => ({ ...prev,
-          ...cur
-        }), {});
-      },
       root: null,
+      previousAttach: null,
       memoizedProps: {},
       eventCount: 0,
       handlers: {},
@@ -161,32 +150,42 @@ function resolve(instance, key) {
     target,
     key
   };
-}
+} // Checks if a dash-cased string ends with an integer
 
+
+const INDEX_REGEX = /-\d+$/;
 function attach(parent, child, type) {
   if (is.str(type)) {
+    // If attaching into an array (foo-0), create one
+    if (INDEX_REGEX.test(type)) {
+      const root = type.replace(INDEX_REGEX, '');
+      const {
+        target,
+        key
+      } = resolve(parent, root);
+      if (!Array.isArray(target[key])) target[key] = [];
+    }
+
     const {
       target,
       key
     } = resolve(parent, type);
-    parent.__r3f.previousAttach = target[key];
+    child.__r3f.previousAttach = target[key];
     target[key] = child;
-  } else if (is.arr(type)) {
-    const [attach] = type;
-    if (is.str(attach)) parent[attach](child);else if (is.fun(attach)) attach(parent, child);
-  }
+  } else child.__r3f.previousAttach = type(parent, child);
 }
 function detach(parent, child, type) {
+  var _child$__r3f, _child$__r3f2;
+
   if (is.str(type)) {
     const {
       target,
       key
     } = resolve(parent, type);
-    target[key] = parent.__r3f.previousAttach;
-  } else if (is.arr(type)) {
-    const [, detach] = type;
-    if (is.str(detach)) parent[detach](child);else if (is.fun(detach)) detach(parent, child);
-  }
+    target[key] = child.__r3f.previousAttach;
+  } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
+
+  (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
 } // This function prepares a set of changes to be applied to the instance
 
 function diffProps(instance, {
@@ -306,20 +305,10 @@ function applyProps$1(instance, data) {
 
               if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
               else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+                else targetProp.set(value);
             } // Else, just overwrite the value
 
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
-        // https://github.com/pmndrs/react-three-fiber/issues/344
-
-        if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
-          currentInstance[key].encoding = THREE.sRGBEncoding;
-        }
-      }
+      } else currentInstance[key] = value;
 
     invalidateInstance(instance);
     return instance;
@@ -398,6 +387,7 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
+    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -405,6 +395,7 @@ function removeInteractivity(store, object) {
   internal.initialHits = internal.initialHits.filter(o => o !== object);
   internal.hovered.forEach((value, key) => {
     if (value.eventObject === object || value.object === object) {
+      // Clear out intersects, they are outdated by now
       internal.hovered.delete(key);
     }
   });
@@ -414,31 +405,8 @@ function removeInteractivity(store, object) {
 }
 function createEvents(store) {
   const temp = new THREE.Vector3();
-  /** Sets up defaultRaycaster */
-
-  function prepareRay(event) {
-    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
-
-    const state = store.getState();
-    const {
-      raycaster,
-      mouse,
-      camera,
-      size
-    } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
-    // Events trigger outside of canvas when moved
-
-    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
-    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
-    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
-    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
-    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
-    mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
-    raycaster.setFromCamera(mouse, camera);
-  }
   /** Calculates delta */
 
-
   function calculateDistance(event) {
     const {
       internal
@@ -458,55 +426,70 @@ function createEvents(store) {
     }));
   }
 
-  function intersect(filter) {
+  function intersect(event, filter) {
     const state = store.getState();
-    const {
-      raycaster,
-      internal
-    } = state; // Skip event handling when noEvents is set
-
-    if (!raycaster.enabled) return [];
-    const seen = new Set();
+    const duplicates = new Set();
     const intersections = []; // Allow callers to eliminate event objects
 
-    const eventsObjects = filter ? filter(internal.interaction) : internal.interaction; // Intersect known handler objects and filter against duplicates
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
+
+    eventsObjects.forEach(obj => {
+      const state = getRootState(obj);
+
+      if (state) {
+        state.raycaster.camera = undefined;
+      }
+    }); // Collect events
+
+    let hits = eventsObjects // Intersect objects
+    .flatMap(obj => {
+      const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
+
+      if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
+
+      if (state.raycaster.camera === undefined) {
+        var _state$previousRoot;
 
-    let intersects = raycaster.intersectObjects(eventsObjects, true).filter(item => {
+        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState()); // If the camera is still undefined we have to skip this layer entirely
+
+        if (state.raycaster.camera === undefined) state.raycaster.camera = null;
+      } // Intersect object by object
+
+
+      return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
+    }) // Sort by event priority and distance
+    .sort((a, b) => {
+      const aState = getRootState(a.object);
+      const bState = getRootState(b.object);
+      if (!aState || !bState) return 0;
+      return bState.events.priority - aState.events.priority || a.distance - b.distance;
+    }) // Filter out duplicates
+    .filter(item => {
       const id = makeId(item);
-      if (seen.has(id)) return false;
-      seen.add(id);
+      if (duplicates.has(id)) return false;
+      duplicates.add(id);
       return true;
     }); // https://github.com/mrdoob/three.js/issues/16031
-    // Allow custom userland intersect sort order
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
 
-    if (raycaster.filter) intersects = raycaster.filter(intersects, state);
+    if (state.events.filter) hits = state.events.filter(hits, state); // Bubble up the events, find the event source (eventObject)
 
-    for (const intersect of intersects) {
-      let eventObject = intersect.object; // Bubble event up
+    for (const hit of hits) {
+      let eventObject = hit.object; // Bubble event up
 
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...hit,
           eventObject
         });
         eventObject = eventObject.parent;
       }
-    }
-
-    return intersections;
-  }
-  /**  Creates filtered intersects and returns an array of positive hits */
+    } // If the interaction is captured, make all capturing targets part of the intersect.
 
 
-  function patchIntersects(intersections, event) {
-    const {
-      internal
-    } = store.getState(); // If the interaction is captured, make all capturing targets  part of the
-    // intersect.
-
-    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+    if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         intersections.push(captureData.intersection);
       }
     }
@@ -519,13 +502,13 @@ function createEvents(store) {
   function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
-      mouse,
+      pointer,
       camera,
       internal
     } = store.getState(); // If anything has been found, forward it to the event listeners
 
     if (intersections.length) {
-      const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
+      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
@@ -576,8 +559,7 @@ function createEvents(store) {
 
         let raycastEvent = { ...hit,
           ...extractEventProps,
-          spaceX: mouse.x,
-          spaceY: mouse.y,
+          pointer,
           intersections,
           stopped: localState.stopped,
           delta,
@@ -614,8 +596,6 @@ function createEvents(store) {
             setPointerCapture,
             releasePointerCapture
           },
-          sourceEvent: event,
-          // deprecated
           nativeEvent: event
         }; // Call subscribers
 
@@ -680,14 +660,15 @@ function createEvents(store) {
       const {
         onPointerMissed,
         internal
-      } = store.getState();
-      prepareRay(event);
+      } = store.getState(); //prepareRay(event)
+
       internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
-      const filter = isPointerMove ? filterPointerEvents : undefined;
-      const hits = patchIntersects(intersect(filter), event);
+      const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
+
+      const hits = intersect(event, filter);
       const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
 
       if (name === 'onPointerDown') {
@@ -770,54 +751,20 @@ function createEvents(store) {
   };
 }
 
-// Type guard to tell a store from a portal
-const isStore = def => def && !!def.getState;
-
-const getContainer = (container, child) => {
-  var _container$__r3f$root, _container$__r3f;
-
-  return {
-    // If the container is not a root-store then it must be a THREE.Object3D into which part of the
-    // scene is portalled into. Now there can be two variants of this, either that object is part of
-    // the regular jsx tree, in which case it already has __r3f with a valid root attached, or it lies
-    // outside react, in which case we must take the root of the child that is about to be attached to it.
-    root: isStore(container) ? container : (_container$__r3f$root = (_container$__r3f = container.__r3f) == null ? void 0 : _container$__r3f.root) != null ? _container$__r3f$root : child.__r3f.root,
-    // The container is the eventual target into which objects are mounted, it has to be a THREE.Object3D
-    container: isStore(container) ? container.getState().scene : container
-  };
-};
-
 let catalogue = {};
 
 let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-extend({
-  Inject: THREE.Group
-});
-
 function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
     ...props
-  }, root, context, internalInstanceHandle) {
+  }, root) {
     let name = `${type[0].toUpperCase()}${type.slice(1)}`;
-    let instance; // https://github.com/facebook/react/issues/17147
-    // Portals do not give us a root, they are themselves treated as a root by the reconciler
-    // In order to figure out the actual root we have to climb through fiber internals :(
-
-    if (!isStore(root) && internalInstanceHandle) {
-      const fn = node => {
-        if (!node.return) return node.stateNode && node.stateNode.containerInfo;else return fn(node.return);
-      };
-
-      root = fn(internalInstanceHandle);
-    } // Assert that by now we have a valid root
-
-
-    if (!root || !isStore(root)) throw `No valid root for ${name}!`; // Auto-attach geometries and materials
+    let instance; // Auto-attach geometries and materials
 
     if (attach === undefined) {
       if (name.endsWith('Geometry')) attach = 'geometry';else if (name.endsWith('Material')) attach = 'material';
@@ -829,7 +776,6 @@ function createRenderer(roots, getEventPriority) {
       instance = prepare(object, {
         type,
         root,
-        context,
         attach,
         primitive: true
       });
@@ -847,7 +793,6 @@ function createRenderer(roots, getEventPriority) {
       instance = prepare(new target(...args), {
         type,
         root,
-        context,
         attach,
         // TODO: Figure out what this is for
         memoizedProps: {
@@ -865,15 +810,6 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function appendChild(parentInstance, child) {
-    // https://github.com/facebook/react/issues/24138
-    // Injects are special purpose "onion layers" that inject contextual information into the scene graph.
-    // Since react-reconciler does not allow us to access the current host context we trick it by leading
-    // back to it from the first child that is added to it. We just connect the inject to it's own host context.
-    if ((parentInstance == null ? void 0 : parentInstance.__r3f.type) === 'inject') {
-      const context = child == null ? void 0 : child.__r3f.context;
-      if (context) context.current = parentInstance.__r3f;
-    }
-
     let added = false;
 
     if (child) {
@@ -969,7 +905,6 @@ function createRenderer(roots, getEventPriority) {
 
       if (child.__r3f) {
         delete child.__r3f.root;
-        delete child.__r3f.context;
         delete child.__r3f.objects;
         delete child.__r3f.handlers;
         delete child.__r3f.memoizedProps;
@@ -992,11 +927,11 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f;
+    var _instance$__r3f, _instance$__r3f2;
 
     const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
     if (!parent) return;
-    const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
+    const newInstance = createInstance(type, newProps, (_instance$__r3f2 = instance.__r3f) == null ? void 0 : _instance$__r3f2.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
     // This can not include primitives, which should not have declarative children
@@ -1039,46 +974,28 @@ function createRenderer(roots, getEventPriority) {
     supportsMutation: true,
     isPrimaryRenderer: false,
     noTimeout: -1,
-    appendChildToContainer: (parentInstance, child) => {
-      const {
-        container,
-        root
-      } = getContainer(parentInstance, child); // Link current root to the default scene
+    appendChildToContainer: (container, child) => {
+      const scene = container.getState().scene; // Link current root to the default scene
 
-      container.__r3f.root = root;
-      appendChild(container, child);
-    },
-    removeChildFromContainer: (parentInstance, child) => removeChild(getContainer(parentInstance, child).container, child),
-    insertInContainerBefore: (parentInstance, child, beforeChild) => insertBefore(getContainer(parentInstance, child).container, child, beforeChild),
-    getRootHostContext: () => ({
-      current: null
-    }),
-    getChildHostContext: (parentHostContext, type) => {
-      // This is a little misleading, this function does not determine the host context for the element at hand,
-      // but rather for all the children of it. The context for an inject is and will be the scene, everything
-      // within an inject is contextual to it.
-      if (type === 'inject') return {
-        current: null
-      };
-      return parentHostContext;
+      scene.__r3f.root = container;
+      appendChild(scene, child);
     },
+    removeChildFromContainer: (container, child) => removeChild(container.getState().scene, child),
+    insertInContainerBefore: (container, child, beforeChild) => insertBefore(container.getState().scene, child, beforeChild),
+    getRootHostContext: () => null,
+    getChildHostContext: parentHostContext => parentHostContext,
 
     finalizeInitialChildren(instance) {
-      var _instance$__r3f2;
+      var _instance$__r3f3;
 
-      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
+      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;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
-      // Injects are special purpose "onion layers" that inject contextual information into the scene graph
-      // Because the context of an inject is still the scene we have to rely on children to give us the inject-context
-      // so that we can set up props.
-      if (type === 'inject' && instance.children.length) ; // Create diff-sets
-
-
+      // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
       } else {
@@ -1112,11 +1029,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     commitMount(instance, type, props, int) {
-      var _instance$__r3f3;
+      var _instance$__r3f4;
 
       // https://github.com/facebook/react/issues/20271
       // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
@@ -1126,7 +1043,7 @@ function createRenderer(roots, getEventPriority) {
     getPublicInstance: instance => instance,
     shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
-    preparePortalMount: containerInfo => prepare(containerInfo),
+    preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
@@ -1134,26 +1051,26 @@ function createRenderer(roots, getEventPriority) {
     createTextInstance: () => {},
 
     hideInstance(instance) {
-      var _instance$__r3f4;
+      var _instance$__r3f5;
 
       // Deatch while the instance is hidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      } = (_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$__r3f5;
+      var _instance$__r3f6;
 
       // Re-attach when the instance is unhidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+      } = (_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);
@@ -1231,16 +1148,18 @@ const createStore = (invalidate, advance) => {
     }));
 
     return {
+      set,
+      get,
       // Mock objects that have to be configured
       gl: null,
       camera: null,
       raycaster: null,
       events: {
+        priority: 1,
+        enabled: true,
         connected: false
       },
       xr: null,
-      set,
-      get,
       invalidate: () => invalidate(get()),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       linear: false,
@@ -1248,7 +1167,7 @@ const createStore = (invalidate, advance) => {
       scene: prepare(new THREE.Scene()),
       controls: null,
       clock: new THREE.Clock(),
-      mouse: new THREE.Vector2(),
+      pointer: new THREE.Vector2(),
       frameloop: 'always',
       onPointerMissed: undefined,
       performance: {
@@ -1317,6 +1236,7 @@ const createStore = (invalidate, advance) => {
           frameloop
         }));
       },
+      previousRoot: undefined,
       internal: {
         active: false,
         priority: 0,
@@ -1544,6 +1464,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React.useRef(fn);
+  React.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1643,9 +1568,7 @@ function createRoot(canvas) {
         params,
         ...options
       } = raycastOptions || {};
-      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
-        enabled: true,
-        ...options
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options
       });
       if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
         params: { ...raycaster.params,
@@ -1681,7 +1604,7 @@ function createRoot(canvas) {
 
         const handleSessionChange = () => {
           const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+          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
 
@@ -1723,6 +1646,7 @@ function createRoot(canvas) {
       } // Set color management
 
 
+      if (THREE.ColorManagement) THREE.ColorManagement.legacyMode = false;
       const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
       const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
       if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
@@ -1759,14 +1683,14 @@ function createRoot(canvas) {
       return this;
     },
 
-    render(element) {
+    render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
       reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
         store: store,
-        element: element,
+        children: children,
         onCreated: onCreated,
-        target: canvas
+        rootElement: canvas
       }), fiber, null, () => undefined);
       return store;
     },
@@ -1778,35 +1702,36 @@ function createRoot(canvas) {
   };
 }
 
-function render(element, canvas, config = {}) {
+function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
-  return root.render(element);
+  return root.render(children);
 }
 
 function Provider({
   store,
-  element,
+  children,
   onCreated,
-  target
+  rootElement
 }) {
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
-    state.events.connect == null ? void 0 : state.events.connect(target); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(context.Provider, {
     value: store
-  }, element);
+  }, children);
 }
 
 function unmountComponentAtNode(canvas, callback) {
@@ -1838,10 +1763,67 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 
-const act = React.unstable_act;
+function createPortal(children, container, state) {
+  return /*#__PURE__*/React.createElement(Portal, {
+    children: children,
+    container: container,
+    state: state
+  });
+}
 
-function createPortal(children, container) {
-  return reconciler.createPortal(children, container, null, null);
+function Portal({
+  state = {},
+  children,
+  container
+}) {
+  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
+   *  the "R3F hooks can only be used within the Canvas component!" warning:
+   *  <Canvas>
+   *    {createPortal(...)} */
+  const {
+    events,
+    ...rest
+  } = state;
+  const previousRoot = useStore();
+  const [raycaster] = React.useState(() => new THREE.Raycaster());
+  const inject = React.useCallback((state, injectState) => {
+    const intersect = { ...state
+    };
+
+    if (injectState) {
+      // Only the fields of "state" that do not differ from injectState
+      Object.keys(state).forEach(key => {
+        if ( // Some props should be off-limits
+        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        state[key] !== injectState[key]) delete intersect[key];
+      });
+    }
+
+    return { ...intersect,
+      scene: container,
+      previousRoot,
+      raycaster,
+      events: { ...state.events,
+        ...events
+      },
+      ...rest
+    };
+  }, [state]);
+  const [useInjectStore] = React.useState(() => {
+    const store = create((set, get) => ({ ...inject(previousRoot.getState()),
+      set,
+      get
+    }));
+    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
+    return store;
+  });
+  React.useEffect(() => {
+    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+  }, [inject]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1849,5 +1831,6 @@ reconciler.injectIntoDevTools({
   rendererPackageName: '@react-three/fiber',
   version: '18.0.0'
 });
+const act = React.unstable_act;
 
-export { createRoot as a, context as b, createEvents as c, createPortal as d, extend as e, reconciler as f, applyProps as g, dispose as h, invalidate as i, advance as j, addEffect as k, addAfterEffect as l, addTail as m, act as n, omit as o, pick as p, roots as q, render as r, useStore as s, threeTypes as t, unmountComponentAtNode as u, useThree as v, useFrame as w, useGraph as x, useLoader as y };
+export { useLoader as A, createRoot as a, unmountComponentAtNode as b, createEvents as c, context as d, extend as e, createPortal as f, reconciler as g, applyProps as h, dispose as i, invalidate as j, advance as k, addEffect as l, addAfterEffect as m, addTail as n, omit as o, pick as p, getRootState as q, render as r, act as s, threeTypes as t, useMemoizedFn as u, roots as v, useStore as w, useThree as x, useFrame as y, useGraph as z };