@react-three/fiber 8.12.0 → 8.12.1

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

@@ -1,11 +1,11 @@
-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;
-    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
-    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
-}
-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;
+    eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>;
+    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+}
+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-8e3d9f5f.cjs.dev.js → index-12cac964.cjs.dev.js}

@@ -619,7 +619,7 @@ function diffProps(instance, {
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
-    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
+    if (/^on(LostPointer|Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
     // Split dashed props
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
@@ -1086,25 +1086,6 @@ function createEvents(store) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
-      case 'onLostPointerCapture':
-        return event => {
-          const {
-            internal
-          } = store.getState();
-          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-            // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed. We call it on the next frame because onLostPointerCapture
-            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
-            // happen in the object it originated from, leaving components in a in-between state.
-            requestAnimationFrame(() => {
-              // Only release if pointer-up didn't do it already
-              if (internal.capturedMap.has(event.pointerId)) {
-                internal.capturedMap.delete(event.pointerId);
-                cancelPointer([]);
-              }
-            });
-          }
-        };
     }
 
     // Any other pointer goes here ...
@@ -1119,6 +1100,7 @@ function createEvents(store) {
 
       // Get fresh intersects
       const isPointerMove = name === 'onPointerMove';
+      const isLostPointerCapture = name === 'onLostPointerCapture';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
       const filter = isPointerMove ? filterPointerEvents : undefined;
       const hits = intersect(event, filter);
@@ -1138,6 +1120,7 @@ function createEvents(store) {
           if (onPointerMissed) onPointerMissed(event);
         }
       }
+
       // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
       function onIntersect(data) {
@@ -1181,6 +1164,24 @@ function createEvents(store) {
           }
           // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
+        } else if (isLostPointerCapture) {
+          const {
+            internal
+          } = store.getState();
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+                handlers.onLostPointerCapture == null ? void 0 : handlers.onLostPointerCapture(data);
+              }
+            });
+          }
         } else {
           // All other events ...
           const handler = handlers[name];

package/dist/{index-7373fbbd.cjs.prod.js → index-ca508128.cjs.prod.js}

@@ -619,7 +619,7 @@ function diffProps(instance, {
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
-    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
+    if (/^on(LostPointer|Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
     // Split dashed props
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
@@ -1086,25 +1086,6 @@ function createEvents(store) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
-      case 'onLostPointerCapture':
-        return event => {
-          const {
-            internal
-          } = store.getState();
-          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-            // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed. We call it on the next frame because onLostPointerCapture
-            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
-            // happen in the object it originated from, leaving components in a in-between state.
-            requestAnimationFrame(() => {
-              // Only release if pointer-up didn't do it already
-              if (internal.capturedMap.has(event.pointerId)) {
-                internal.capturedMap.delete(event.pointerId);
-                cancelPointer([]);
-              }
-            });
-          }
-        };
     }
 
     // Any other pointer goes here ...
@@ -1119,6 +1100,7 @@ function createEvents(store) {
 
       // Get fresh intersects
       const isPointerMove = name === 'onPointerMove';
+      const isLostPointerCapture = name === 'onLostPointerCapture';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
       const filter = isPointerMove ? filterPointerEvents : undefined;
       const hits = intersect(event, filter);
@@ -1138,6 +1120,7 @@ function createEvents(store) {
           if (onPointerMissed) onPointerMissed(event);
         }
       }
+
       // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
       function onIntersect(data) {
@@ -1181,6 +1164,24 @@ function createEvents(store) {
           }
           // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
+        } else if (isLostPointerCapture) {
+          const {
+            internal
+          } = store.getState();
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+                handlers.onLostPointerCapture == null ? void 0 : handlers.onLostPointerCapture(data);
+              }
+            });
+          }
         } else {
           // All other events ...
           const handler = handlers[name];

package/dist/{index-bb759d07.esm.js → index-faa0fc56.esm.js}

@@ -592,7 +592,7 @@ function diffProps(instance, {
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
-    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
+    if (/^on(LostPointer|Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
     // Split dashed props
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
@@ -1059,25 +1059,6 @@ function createEvents(store) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
-      case 'onLostPointerCapture':
-        return event => {
-          const {
-            internal
-          } = store.getState();
-          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-            // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed. We call it on the next frame because onLostPointerCapture
-            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
-            // happen in the object it originated from, leaving components in a in-between state.
-            requestAnimationFrame(() => {
-              // Only release if pointer-up didn't do it already
-              if (internal.capturedMap.has(event.pointerId)) {
-                internal.capturedMap.delete(event.pointerId);
-                cancelPointer([]);
-              }
-            });
-          }
-        };
     }
 
     // Any other pointer goes here ...
@@ -1092,6 +1073,7 @@ function createEvents(store) {
 
       // Get fresh intersects
       const isPointerMove = name === 'onPointerMove';
+      const isLostPointerCapture = name === 'onLostPointerCapture';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
       const filter = isPointerMove ? filterPointerEvents : undefined;
       const hits = intersect(event, filter);
@@ -1111,6 +1093,7 @@ function createEvents(store) {
           if (onPointerMissed) onPointerMissed(event);
         }
       }
+
       // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
       function onIntersect(data) {
@@ -1154,6 +1137,24 @@ function createEvents(store) {
           }
           // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
+        } else if (isLostPointerCapture) {
+          const {
+            internal
+          } = store.getState();
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+                handlers.onLostPointerCapture == null ? void 0 : handlers.onLostPointerCapture(data);
+              }
+            });
+          }
         } else {
           // All other events ...
           const handler = handlers[name];

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-8e3d9f5f.cjs.dev.js');
+var index = require('./index-12cac964.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-7373fbbd.cjs.prod.js');
+var index = require('./index-ca508128.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-bb759d07.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-bb759d07.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-faa0fc56.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-faa0fc56.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-8e3d9f5f.cjs.dev.js');
+var index = require('../../dist/index-12cac964.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-7373fbbd.cjs.prod.js');
+var index = require('../../dist/index-ca508128.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-bb759d07.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-bb759d07.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-faa0fc56.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-faa0fc56.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.12.0",
+  "version": "8.12.1",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",