@react-three/fiber 8.15.13 → 8.15.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.15.14
+
+### Patch Changes
+
+- 0afc9c12: fix: portal events, update examples
+
 ## 8.15.13
 
 ### Patch Changes

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

@@ -127,7 +127,7 @@ export declare type RootState = {
     setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
     /** When the canvas was clicked but nothing was hit */
     onPointerMissed?: (event: MouseEvent) => void;
-    /** If this state model is layerd (via createPortal) then this contains the previous layer */
+    /** If this state model is layered (via createPortal) then this contains the previous layer */
     previousRoot?: UseBoundStore<RootState, StoreApi<RootState>>;
     /** Internals */
     internal: InternalState;

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

@@ -1,6 +1,7 @@
 /// <reference types="webxr" />
 import * as THREE from 'three';
 import * as React from 'react';
+import { UseBoundStore } from 'zustand';
 import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
 import { Dpr, Renderer, RootState, Size } from './store';
 /** @ts-ignore */
@@ -85,6 +86,10 @@ export declare function calculateDpr(dpr: Dpr): number;
  * Returns instance root state
  */
 export declare const getRootState: (obj: THREE.Object3D) => RootState | undefined;
+/**
+ * Returns the instances initial (outmost) root
+ */
+export declare function findInitialRoot(child: Instance): UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
 export declare type EquConfig = {
     /** Compare arrays by reference equality a === b (default), or by shallow equality */
     arrays?: 'reference' | 'shallow';

package/dist/{index-710fb441.esm.js → index-29b7121b.esm.js}

@@ -123,9 +123,10 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // Remove interactivity
+        // @ts-ignore
+        // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
-          removeInteractivity(child.__r3f.root, child);
+          removeInteractivity(findInitialRoot(child), child);
         }
       }
 
@@ -197,9 +198,9 @@ function createRenderer(_roots, _getEventPriority) {
     }
     appendChild(parent, newInstance);
 
-    // Re-bind event handlers
+    // Re-bind event handlers on the initial root
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
-      const rootState = newInstance.__r3f.root.getState();
+      const rootState = findInitialRoot(newInstance).getState();
       rootState.internal.interaction.push(newInstance);
     }
     [fiber, fiber.alternate].forEach(fiber => {
@@ -299,10 +300,10 @@ function createRenderer(_roots, _getEventPriority) {
     commitMount(instance, _type, _props, _int) {
       var _instance$__r3f4;
       // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
+      // This will make sure events are only added once to the central container on the initial root
       const localState = (_instance$__r3f4 = instance.__r3f) != null ? _instance$__r3f4 : {};
       if (instance.raycast && localState.handlers && localState.eventCount) {
-        instance.__r3f.root.getState().internal.interaction.push(instance);
+        findInitialRoot(instance).getState().internal.interaction.push(instance);
       }
     },
     getPublicInstance: instance => instance,
@@ -427,6 +428,15 @@ const getRootState = obj => {
   var _r3f;
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
+
+/**
+ * Returns the instances initial (outmost) root
+ */
+function findInitialRoot(child) {
+  let root = child.__r3f.root;
+  while (root.getState().previousRoot) root = root.getState().previousRoot;
+  return root;
+}
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -744,12 +754,14 @@ function applyProps$1(instance, data) {
     }
     invalidateInstance(instance);
   }
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
+    // Get the initial root state's internals
+    const internal = findInitialRoot(instance).getState().internal;
     // Pre-emptively remove the instance from the interaction manager
-    const index = rootState.internal.interaction.indexOf(instance);
-    if (index > -1) rootState.internal.interaction.splice(index, 1);
+    const index = internal.interaction.indexOf(instance);
+    if (index > -1) internal.interaction.splice(index, 1);
     // Add the instance to the interaction manager only when it has handlers
-    if (localState.eventCount) rootState.internal.interaction.push(instance);
+    if (localState.eventCount) internal.interaction.push(instance);
   }
 
   // Call the update lifecycle when it is being updated, but only when it is part of the scene.

package/dist/{index-0ee5ddc9.cjs.dev.js → index-54c0bb16.cjs.dev.js}

@@ -150,9 +150,10 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // Remove interactivity
+        // @ts-ignore
+        // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
-          removeInteractivity(child.__r3f.root, child);
+          removeInteractivity(findInitialRoot(child), child);
         }
       }
 
@@ -224,9 +225,9 @@ function createRenderer(_roots, _getEventPriority) {
     }
     appendChild(parent, newInstance);
 
-    // Re-bind event handlers
+    // Re-bind event handlers on the initial root
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
-      const rootState = newInstance.__r3f.root.getState();
+      const rootState = findInitialRoot(newInstance).getState();
       rootState.internal.interaction.push(newInstance);
     }
     [fiber, fiber.alternate].forEach(fiber => {
@@ -326,10 +327,10 @@ function createRenderer(_roots, _getEventPriority) {
     commitMount(instance, _type, _props, _int) {
       var _instance$__r3f4;
       // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
+      // This will make sure events are only added once to the central container on the initial root
       const localState = (_instance$__r3f4 = instance.__r3f) != null ? _instance$__r3f4 : {};
       if (instance.raycast && localState.handlers && localState.eventCount) {
-        instance.__r3f.root.getState().internal.interaction.push(instance);
+        findInitialRoot(instance).getState().internal.interaction.push(instance);
       }
     },
     getPublicInstance: instance => instance,
@@ -454,6 +455,15 @@ const getRootState = obj => {
   var _r3f;
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
+
+/**
+ * Returns the instances initial (outmost) root
+ */
+function findInitialRoot(child) {
+  let root = child.__r3f.root;
+  while (root.getState().previousRoot) root = root.getState().previousRoot;
+  return root;
+}
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -771,12 +781,14 @@ function applyProps$1(instance, data) {
     }
     invalidateInstance(instance);
   }
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
+    // Get the initial root state's internals
+    const internal = findInitialRoot(instance).getState().internal;
     // Pre-emptively remove the instance from the interaction manager
-    const index = rootState.internal.interaction.indexOf(instance);
-    if (index > -1) rootState.internal.interaction.splice(index, 1);
+    const index = internal.interaction.indexOf(instance);
+    if (index > -1) internal.interaction.splice(index, 1);
     // Add the instance to the interaction manager only when it has handlers
-    if (localState.eventCount) rootState.internal.interaction.push(instance);
+    if (localState.eventCount) internal.interaction.push(instance);
   }
 
   // Call the update lifecycle when it is being updated, but only when it is part of the scene.

package/dist/{index-2003c0bb.cjs.prod.js → index-8eb7ac4a.cjs.prod.js}

@@ -150,9 +150,10 @@ function createRenderer(_roots, _getEventPriority) {
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f4;
         parentInstance.remove(child);
-        // Remove interactivity
+        // @ts-ignore
+        // Remove interactivity on the initial root
         if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
-          removeInteractivity(child.__r3f.root, child);
+          removeInteractivity(findInitialRoot(child), child);
         }
       }
 
@@ -224,9 +225,9 @@ function createRenderer(_roots, _getEventPriority) {
     }
     appendChild(parent, newInstance);
 
-    // Re-bind event handlers
+    // Re-bind event handlers on the initial root
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
-      const rootState = newInstance.__r3f.root.getState();
+      const rootState = findInitialRoot(newInstance).getState();
       rootState.internal.interaction.push(newInstance);
     }
     [fiber, fiber.alternate].forEach(fiber => {
@@ -326,10 +327,10 @@ function createRenderer(_roots, _getEventPriority) {
     commitMount(instance, _type, _props, _int) {
       var _instance$__r3f4;
       // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
+      // This will make sure events are only added once to the central container on the initial root
       const localState = (_instance$__r3f4 = instance.__r3f) != null ? _instance$__r3f4 : {};
       if (instance.raycast && localState.handlers && localState.eventCount) {
-        instance.__r3f.root.getState().internal.interaction.push(instance);
+        findInitialRoot(instance).getState().internal.interaction.push(instance);
       }
     },
     getPublicInstance: instance => instance,
@@ -454,6 +455,15 @@ const getRootState = obj => {
   var _r3f;
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
+
+/**
+ * Returns the instances initial (outmost) root
+ */
+function findInitialRoot(child) {
+  let root = child.__r3f.root;
+  while (root.getState().previousRoot) root = root.getState().previousRoot;
+  return root;
+}
 // A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -771,12 +781,14 @@ function applyProps$1(instance, data) {
     }
     invalidateInstance(instance);
   }
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && instance.raycast && prevHandlers !== localState.eventCount) {
+    // Get the initial root state's internals
+    const internal = findInitialRoot(instance).getState().internal;
     // Pre-emptively remove the instance from the interaction manager
-    const index = rootState.internal.interaction.indexOf(instance);
-    if (index > -1) rootState.internal.interaction.splice(index, 1);
+    const index = internal.interaction.indexOf(instance);
+    if (index > -1) internal.interaction.splice(index, 1);
     // Add the instance to the interaction manager only when it has handlers
-    if (localState.eventCount) rootState.internal.interaction.push(instance);
+    if (localState.eventCount) internal.interaction.push(instance);
   }
 
   // Call the update lifecycle when it is being updated, but only when it is part of the scene.

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-0ee5ddc9.cjs.dev.js');
+var index = require('./index-54c0bb16.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-2003c0bb.cjs.prod.js');
+var index = require('./index-8eb7ac4a.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-710fb441.esm.js';
-export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-710fb441.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-29b7121b.esm.js';
+export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-29b7121b.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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-0ee5ddc9.cjs.dev.js');
+var index = require('../../dist/index-54c0bb16.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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-2003c0bb.cjs.prod.js');
+var index = require('../../dist/index-8eb7ac4a.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-710fb441.esm.js';
-export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-710fb441.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-29b7121b.esm.js';
+export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/index-29b7121b.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

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