@react-three/fiber 8.0.0-beta.5 → 8.0.0-beta.6

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

@@ -5,17 +5,16 @@ export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
 }
 export interface IntersectionEvent<TSourceEvent> extends Intersection {
+    eventObject: THREE.Object3D;
     intersections: Intersection[];
-    stopped: boolean;
     unprojectedPoint: THREE.Vector3;
+    pointer: THREE.Vector2;
+    delta: number;
     ray: THREE.Ray;
     camera: Camera;
     stopPropagation: () => void;
-    sourceEvent: TSourceEvent;
     nativeEvent: TSourceEvent;
-    delta: number;
-    spaceX: number;
-    spaceY: number;
+    stopped: boolean;
 }
 export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
 export declare type ThreeEvent<TEvent> = IntersectionEvent<TEvent>;
@@ -47,8 +46,14 @@ export declare type EventHandlers = {
     onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
     onWheel?: (event: ThreeEvent<WheelEvent>) => void;
 };
+export declare type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
+export declare type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;
 export interface EventManager<TTarget> {
-    connected: TTarget | boolean;
+    enabled: boolean;
+    priority: number;
+    compute?: ComputeFunction;
+    filter?: FilterFunction;
+    connected?: TTarget;
     handlers?: Events;
     connect?: (target: TTarget) => void;
     disconnect?: () => void;

package/dist/declarations/src/core/hooks.d.ts

@@ -1,6 +1,5 @@
 import * as THREE from 'three';
-import * as React from 'react';
-import { StateSelector, EqualityChecker, UseBoundStore } from 'zustand';
+import { StateSelector, EqualityChecker } from 'zustand';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback } from './store';
 import { ObjectMap } from './utils';
@@ -11,15 +10,16 @@ export declare type Extensions = (loader: THREE.Loader) => void;
 export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
 export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
 export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
-export declare function useStore(): UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
+declare type noop = (...args: any[]) => any;
+declare type PickFunction<T extends noop> = (...args: Parameters<T>) => ReturnType<T>;
+export declare function useStore(): import("zustand").UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
-export declare function useInject(state: Partial<RootState>): [React.FC<{
-    children: React.ReactNode;
-}>, UseBoundStore<RootState, import("zustand").StoreApi<RootState>>];
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
+export declare function useMemoizedFn<T extends noop>(fn?: T): PickFunction<T>;
 export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
     var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
     var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
 }
+export {};

package/dist/declarations/src/core/index.d.ts

@@ -5,8 +5,8 @@ import { UseBoundStore } from 'zustand';
 import { Renderer, StoreProps, context, RootState, Size } from './store';
 import { extend, Root } from './renderer';
 import { addEffect, addAfterEffect, addTail } from './loop';
-import { EventManager } from './events';
-import { dispose } from './utils';
+import { EventManager, ComputeFunction } from './events';
+import { dispose, getRootState } from './utils';
 declare const roots: Map<Element, Root>;
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
 declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("./utils").applyProps;
@@ -28,7 +28,15 @@ export declare type ReconcilerRoot<TCanvas extends Element> = {
 declare function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
 declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, config?: RenderProps<TCanvas>): UseBoundStore<RootState>;
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: Partial<RootState>): React.ReactNode;
+export declare type InjectState = Partial<Omit<RootState, 'set' | 'get' | 'setSize' | 'setFrameloop' | 'setDpr' | 'events' | 'invalidate' | 'advance' | 'performance' | 'internal'> & {
+    events: {
+        enabled?: boolean;
+        priority?: number;
+        compute?: ComputeFunction;
+        connected?: any;
+    };
+}>;
+declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode;
 declare const act: any;
 export * from './hooks';
-export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, act, roots as _roots, };
+export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, getRootState, act, roots as _roots, };

package/dist/declarations/src/core/store.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import * as ReactThreeFiber from '../three-types';
-import { GetState, SetState, UseBoundStore } from 'zustand';
+import { GetState, SetState, StoreApi, UseBoundStore } from 'zustand';
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
@@ -23,11 +23,6 @@ export declare type Viewport = Size & {
     aspect: number;
 };
 export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
-export declare type Raycaster = THREE.Raycaster & {
-    enabled: boolean;
-    filter?: FilterFunction;
-    computeOffsets?: ComputeOffsetsFunction;
-};
 export declare type RenderCallback = (state: RootState, delta: number, frame?: THREE.XRFrame) => void;
 export declare type Performance = {
     current: number;
@@ -59,7 +54,7 @@ export declare type RootState = {
     camera: Camera & {
         manual?: boolean;
     };
-    raycaster: Raycaster;
+    raycaster: THREE.Raycaster;
     events: EventManager<any>;
     xr: {
         connect: () => void;
@@ -67,7 +62,7 @@ export declare type RootState = {
     };
     scene: THREE.Scene;
     controls: THREE.EventDispatcher | null;
-    mouse: THREE.Vector2;
+    pointer: THREE.Vector2;
     clock: THREE.Clock;
     linear: boolean;
     flat: boolean;
@@ -75,7 +70,7 @@ export declare type RootState = {
     performance: Performance;
     size: Size;
     viewport: Viewport & {
-        getCurrentViewport: (camera?: Camera, target?: THREE.Vector3, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
+        getCurrentViewport: (camera?: Camera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
     };
     set: SetState<RootState>;
     get: GetState<RootState>;
@@ -85,15 +80,9 @@ export declare type RootState = {
     setDpr: (dpr: Dpr) => void;
     setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
     onPointerMissed?: (event: MouseEvent) => void;
+    previousRoot?: UseBoundStore<RootState, StoreApi<RootState>>;
     internal: InternalState;
 };
-export declare type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
-export declare type ComputeOffsetsFunction = (event: any, state: RootState) => {
-    offsetX: number;
-    offsetY: number;
-    width?: number;
-    height?: number;
-};
 export declare type StoreProps = {
     gl: THREE.WebGLRenderer;
     size: Size;
@@ -104,12 +93,12 @@ export declare type StoreProps = {
     frameloop?: 'always' | 'demand' | 'never';
     performance?: Partial<Omit<Performance, 'regress'>>;
     dpr?: Dpr;
-    raycaster?: Partial<Raycaster>;
+    raycaster?: Partial<THREE.Raycaster>;
     camera?: (Camera | Partial<ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> & ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>) & {
         manual?: boolean;
     };
     onPointerMissed?: (event: MouseEvent) => void;
 };
-declare const context: React.Context<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>>;
+declare const context: React.Context<UseBoundStore<RootState, StoreApi<RootState>>>;
 declare const createStore: (invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void) => UseBoundStore<RootState>;
 export { createStore, context };

package/dist/declarations/src/core/utils.d.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
-import { Dpr } from './store';
+import { Dpr, RootState } from './store';
 export declare const DEFAULT = "__default";
 export declare type DiffSet = {
     memoized: {
@@ -21,6 +21,7 @@ export declare type ObjectMap = {
     };
 };
 export declare function calculateDpr(dpr: Dpr): number;
+export declare const getRootState: (obj: THREE.Object3D) => RootState | undefined;
 export declare function filterKeys<TObj extends {
     [key: string]: any;
 }, TOmit extends boolean, TKey extends keyof TObj>(obj: TObj, omit: TOmit, ...keys: TKey[]): TOmit extends true ? Omit<TObj, TKey> : Pick<TObj, TKey>;

package/dist/{index-e2a317e2.cjs.prod.js → index-45f5b2a2.cjs.prod.js}

@@ -44,6 +44,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.
@@ -53,11 +62,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;
   }, {});
 }
@@ -411,6 +416,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
 
@@ -418,6 +424,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);
     }
   });
@@ -427,31 +434,8 @@ function removeInteractivity(store, object) {
 }
 function createEvents(store) {
   const temp = new THREE__namespace.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
@@ -471,55 +455,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;
+
+        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
 
-    let intersects = raycaster.intersectObjects(eventsObjects, true).filter(item => {
+        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;
       }
-    }
+    } // If the interaction is captured, make all capturing targets part of the intersect.
 
-    return intersections;
-  }
-  /**  Creates filtered intersects and returns an array of positive hits */
-
-
-  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);
       }
     }
@@ -532,13 +531,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
       };
@@ -589,8 +588,7 @@ function createEvents(store) {
 
         let raycastEvent = { ...hit,
           ...extractEventProps,
-          spaceX: mouse.x,
-          spaceY: mouse.y,
+          pointer,
           intersections,
           stopped: localState.stopped,
           delta,
@@ -627,8 +625,6 @@ function createEvents(store) {
             setPointerCapture,
             releasePointerCapture
           },
-          sourceEvent: event,
-          // deprecated
           nativeEvent: event
         }; // Call subscribers
 
@@ -693,14 +689,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') {
@@ -1180,16 +1177,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,
@@ -1197,7 +1196,7 @@ const createStore = (invalidate, advance) => {
       scene: prepare(new THREE__namespace.Scene()),
       controls: null,
       clock: new THREE__namespace.Clock(),
-      mouse: new THREE__namespace.Vector2(),
+      pointer: new THREE__namespace.Vector2(),
       frameloop: 'always',
       onPointerMissed: undefined,
       performance: {
@@ -1266,6 +1265,7 @@ const createStore = (invalidate, advance) => {
           frameloop
         }));
       },
+      previousRoot: undefined,
       internal: {
         active: false,
         priority: 0,
@@ -1467,43 +1467,6 @@ function useStore() {
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
-function useInject(state) {
-  const useOriginalStore = useStore();
-  const useInjectStore = React__namespace.useMemo(() => {
-    const useInjected = (sel = state => state) => {
-      // Execute the useStore hook with the selector once, to maintain reactivity, result doesn't matter
-      useOriginalStore(sel); // Inject data and return the result, either selected or raw
-
-      return sel({ ...useOriginalStore.getState(),
-        ...state
-      });
-    };
-
-    useInjected.setState = useOriginalStore.setState;
-    useInjected.destroy = useOriginalStore.destroy; // Patch getState
-
-    useInjected.getState = () => {
-      return { ...useOriginalStore.getState(),
-        ...state
-      };
-    }; // Patch subscribe
-
-
-    useInjected.subscribe = listener => {
-      return useOriginalStore.subscribe((current, previous) => listener({ ...current,
-        ...state
-      }, previous));
-    };
-
-    return useInjected;
-  }, [useOriginalStore, state]); // Return the patched store and a provider component
-
-  return React__namespace.useMemo(() => [({
-    children
-  }) => /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore], [useInjectStore]);
-}
 function useFrame(callback, renderPriority = 0) {
   const subscribe = useStore().getState().internal.subscribe; // Update ref
 
@@ -1530,6 +1493,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.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];
@@ -1629,9 +1597,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,
@@ -1785,9 +1751,10 @@ function Provider({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events
+    })); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    state.events.connect == null ? void 0 : state.events.connect(target); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    state.events.connect == null ? void 0 : state.events.connect(target.parentNode); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
     if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -1834,20 +1801,56 @@ function createPortal(children, container, state) {
 }
 
 function Portal({
-  state,
+  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 in in r3f's renderer but in react-dom, it would trigger
+   *  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 portalState = React__namespace.useMemo(() => ({ ...state,
-    scene: container
-  }), [state, container]);
-  const [PortalProvider, portalRoot] = useInject(portalState);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(PortalProvider, null, children), portalRoot, null));
+  const {
+    events,
+    ...rest
+  } = state;
+  const previousRoot = useStore();
+  const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
+  const inject = React__namespace.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 (state[key] !== injectState[key]) delete intersect[key];
+      });
+    }
+
+    return { ...intersect,
+      scene: container,
+      previousRoot,
+      raycaster,
+      events: { ...state.events,
+        ...events
+      },
+      ...rest
+    };
+  }, [state]);
+  const [useInjectStore] = React__namespace.useState(() => {
+    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+      set,
+      get
+    }));
+    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
+    return store;
+  });
+  React__namespace.useEffect(() => {
+    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+  }, [inject]);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1869,6 +1872,7 @@ exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
+exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.omit = omit;
 exports.pick = pick;
@@ -1879,7 +1883,7 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
-exports.useInject = useInject;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;