@xh/hoist 75.0.0-SNAPSHOT.1753454795132 → 75.0.0-SNAPSHOT.1753458616250

package/build/types/desktop/cmp/panel/impl/dragger/DraggerModel.d.ts

@@ -13,7 +13,7 @@ export declare class DraggerModel extends HoistModel {
     maxSize: any;
     throttledSetSize: any;
     onLinked(): void;
-    private addListeners;
+    private toggleListeners;
     private onDragStart;
     private onDrag;
     private onDragEnd;
@@ -24,9 +24,11 @@ export declare class DraggerModel extends HoistModel {
     private parseEventPositions;
     private isValidMouseEvent;
     private isValidTouchEvent;
+    private get isFirefox();
     /**
      * @param v - Workaround to allow dragging over iframe, which is its own
      *  separate document and cannot listen for events from main document.
      */
     setIframePointerEvents(v: 'none' | 'auto'): void;
+    destroy(): void;
 }

package/desktop/cmp/panel/impl/dragger/DraggerModel.ts

@@ -30,25 +30,34 @@ export class DraggerModel extends HoistModel {
     override onLinked() {
         this.throttledSetSize = throttle(size => (this.panelModel.size = size), 50);
 
-        // Add listeners to el to ensure we can get non-passive handlers than can preventDefault()
+        // maintain listeners on el to ensure we can get non-passive handlers than can preventDefault()
         // React synthetic touch events on certain browsers (e.g. airwatch) don't yield that
         this.addReaction({
             track: () => this.ref.current,
-            run: current => {
-                if (current) this.addListeners(current);
+            run: (current, old) => {
+                this.toggleListeners(old, false);
+                this.toggleListeners(current, true);
             }
         });
     }
 
-    private addListeners(el) {
+    private toggleListeners(el, add: boolean) {
+        if (!el) return;
+        const fn = (element, event, handler, options = undefined) => {
+            add
+                ? element.addEventListener(event, handler, options)
+                : element.removeEventListener(event, handler, options);
+        };
         if (XH.isDesktop) {
-            el.addEventListener('dragstart', this.onDragStart);
-            el.addEventListener('drag', this.onDrag);
-            el.addEventListener('dragend', this.onDragEnd);
+            fn(el, 'dragstart', this.onDragStart);
+            fn(el, 'dragend', this.onDragEnd);
+            this.isFirefox // drag co-ordinates not impl in firefox -- use 'dragover' on doc
+                ? fn(document, `dragover`, this.onDrag)
+                : fn(el, 'drag', this.onDrag);
         } else {
-            el.addEventListener('touchstart', this.onDragStart);
-            el.addEventListener('touchmove', this.onDrag, {passive: false});
-            el.addEventListener('touchend', this.onDragEnd);
+            fn(el, 'touchstart', this.onDragStart);
+            fn(el, 'touchmove', this.onDrag, {passive: false});
+            fn(el, 'touchend', this.onDragEnd);
         }
     }
 
@@ -263,6 +272,10 @@ export class DraggerModel extends HoistModel {
         return e.touches && e.touches.length > 0;
     }
 
+    private get isFirefox(): boolean {
+        return navigator.userAgent.toLowerCase().includes('firefox');
+    }
+
     /**
      * @param v - Workaround to allow dragging over iframe, which is its own
      *  separate document and cannot listen for events from main document.
@@ -272,4 +285,9 @@ export class DraggerModel extends HoistModel {
             el.style['pointer-events'] = v;
         }
     }
+
+    override destroy() {
+        this.toggleListeners(this.ref.current, false);
+        super.destroy();
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "75.0.0-SNAPSHOT.1753454795132",
+  "version": "75.0.0-SNAPSHOT.1753458616250",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",