Update helpers to support multi-window use cases (#509)

.changeset/multi-window-support.md

@@ -0,0 +1,28 @@
+---
+"@dnd-kit/core": patch
+"@dnd-kit/utilities": patch
+---
+
+Helpers have been updated to support rendering in foreign `window` contexts (via `ReactDOM.render` or  `ReactDOM.createPortal`). 
+
+For example, checking if an element is an instance of an `HTMLElement` is normally done like so:
+
+```ts
+if (element instanceof HTMLElement)
+```
+
+However, when rendering in a different window, this can return false even if the element is indeed an HTMLElement, because this code is equivalent to:
+
+```ts
+if (element instanceof window.HTMLElement)
+```
+
+And in this case, the `window` of the `element` is different from the main execution context `window`, because we are rendering via a portal into another window.
+
+This can be solved by finding the local window of the element:
+
+```ts
+const elementWindow = element.ownerDocument.defaultView;
+
+if (element instanceof elementWindow.HTMLElement)
+```

packages/core/src/components/DragOverlay/DragOverlay.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useRef} from 'react';
-import {CSS, useLazyMemo} from '@dnd-kit/utilities';
+import {CSS, isKeyboardEvent, useLazyMemo} from '@dnd-kit/utilities';
 
 import {getRelativeTransformOrigin} from '../../utilities';
 import {applyModifiers, Modifiers} from '../../modifiers';
@@ -25,7 +25,7 @@ export interface Props {
 }
 
 const defaultTransition: TransitionGetter = (activatorEvent) => {
-  const isKeyboardActivator = activatorEvent instanceof KeyboardEvent;
+  const isKeyboardActivator = isKeyboardEvent(activatorEvent);
 
   return isKeyboardActivator ? 'transform 250ms ease' : undefined;
 };

packages/core/src/hooks/utilities/useRect.ts

@@ -1,5 +1,5 @@
 import {useRef} from 'react';
-import {useLazyMemo} from '@dnd-kit/utilities';
+import {isHTMLElement, useLazyMemo} from '@dnd-kit/utilities';
 
 import {getBoundingClientRect, getViewRect} from '../../utilities';
 import type {LayoutRect} from '../../types';
@@ -10,7 +10,10 @@ export const useViewRect = createUseRectFn(getViewRect);
 export const useClientRect = createUseRectFn(getBoundingClientRect);
 export const useClientRects = createUseRectsFn(getBoundingClientRect);
 
-export function useRect<T = LayoutRect, U = HTMLElement>(
+export function useRect<
+  T = LayoutRect,
+  U extends Element | Window = HTMLElement
+>(
   element: U | null,
   getRect: (element: U) => T,
   forceRecompute?: boolean
@@ -28,7 +31,7 @@ export function useRect<T = LayoutRect, U = HTMLElement>(
         (!previousValue && element) ||
         element !== previousElement.current
       ) {
-        if (element instanceof HTMLElement && element.parentNode == null) {
+        if (isHTMLElement(element) && element.parentNode == null) {
           return null;
         }
 
@@ -41,9 +44,10 @@ export function useRect<T = LayoutRect, U = HTMLElement>(
   );
 }
 
-export function createUseRectFn<T = LayoutRect, U = HTMLElement>(
-  getRect: RectFn<T, U>
-) {
+export function createUseRectFn<
+  T = LayoutRect,
+  U extends Element | Window = HTMLElement
+>(getRect: RectFn<T, U>) {
   return (element: U | null, forceRecompute?: boolean) =>
     useRect(element, getRect, forceRecompute);
 }

packages/core/src/sensors/keyboard/KeyboardSensor.ts

@@ -1,14 +1,14 @@
 import {
   add as getAdjustedCoordinates,
   subtract as getCoordinatesDelta,
+  getOwnerDocument,
+  getWindow,
 } from '@dnd-kit/utilities';
 
 import type {Coordinates} from '../../types';
 import {
   defaultCoordinates,
   getBoundingClientRect,
-  getOwnerDocument,
-  getWindow,
   getScrollPosition,
   getScrollElementRect,
 } from '../../utilities';

packages/core/src/sensors/mouse/MouseSensor.ts

@@ -1,6 +1,6 @@
 import type {MouseEvent} from 'react';
+import {getOwnerDocument} from '@dnd-kit/utilities';
 
-import {getOwnerDocument} from '../../utilities';
 import type {SensorProps} from '../types';
 import {
   AbstractPointerSensor,

packages/core/src/sensors/pointer/AbstractPointerSensor.ts

@@ -1,15 +1,15 @@
 import {
   subtract as getCoordinatesDelta,
   getEventCoordinates,
+  getOwnerDocument,
+  getWindow,
 } from '@dnd-kit/utilities';
 
 import {
   getEventListenerTarget,
   hasExceededDistance,
   Listeners,
 } from '../utilities';
-
-import {getOwnerDocument, getWindow} from '../../utilities';
 import {EventName, preventDefault, stopPropagation} from '../events';
 import {KeyboardCode} from '../keyboard';
 import type {SensorInstance, SensorProps, SensorOptions} from '../types';

packages/core/src/sensors/pointer/PointerSensor.ts

@@ -1,6 +1,6 @@
 import type {PointerEvent} from 'react';
+import {getOwnerDocument} from '@dnd-kit/utilities';
 
-import {getOwnerDocument} from '../../utilities';
 import type {SensorProps} from '../types';
 import {
   AbstractPointerSensor,

packages/core/src/sensors/utilities/getEventListenerTarget.ts

@@ -1,12 +1,15 @@
-import {getOwnerDocument} from '../../utilities';
+import {getOwnerDocument, getWindow} from '@dnd-kit/utilities';
 
 export function getEventListenerTarget(
-  element: EventTarget | null
+  target: EventTarget | null
 ): EventTarget | Document {
   // If the `event.target` element is removed from the document events will still be targeted
   // at it, and hence won't always bubble up to the window or document anymore.
   // If there is any risk of an element being removed while it is being dragged,
   // the best practice is to attach the event listeners directly to the target.
   // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
-  return element instanceof EventTarget ? element : getOwnerDocument(element);
+
+  const {EventTarget} = getWindow(target);
+
+  return target instanceof EventTarget ? target : getOwnerDocument(target);
 }

packages/core/src/utilities/coordinates/getRelativeTransformOrigin.ts

@@ -1,10 +1,10 @@
-import {getEventCoordinates} from '@dnd-kit/utilities';
+import {getEventCoordinates, isKeyboardEvent} from '@dnd-kit/utilities';
 
 export function getRelativeTransformOrigin(
   event: MouseEvent | TouchEvent | KeyboardEvent,
   rect: ClientRect
 ) {
-  if (event instanceof KeyboardEvent) {
+  if (isKeyboardEvent(event)) {
     return '0 0';
   }
 

packages/core/src/utilities/index.ts

@@ -18,8 +18,6 @@ export {
   isViewRect,
 } from './rect';
 
-export {getOwnerDocument, getWindow} from './document';
-
 export {noop} from './other';
 
 export {

packages/core/src/utilities/nodes/getMeasurableNode.ts

@@ -1,3 +1,5 @@
+import {isHTMLElement} from '@dnd-kit/utilities';
+
 export function getMeasurableNode(
   node: HTMLElement | undefined | null
 ): HTMLElement | null {
@@ -10,5 +12,5 @@ export function getMeasurableNode(
   }
   const firstChild = node.children[0];
 
-  return firstChild instanceof HTMLElement ? firstChild : node;
+  return isHTMLElement(firstChild) ? firstChild : node;
 }

packages/core/src/utilities/rect/getRect.ts

@@ -1,3 +1,5 @@
+import {isHTMLElement, isWindow} from '@dnd-kit/utilities';
+
 import type {Coordinates, ClientRect, LayoutRect, ViewRect} from '../../types';
 import {getScrollableAncestors, getScrollOffsets} from '../scroll';
 import {defaultCoordinates} from '../coordinates';
@@ -7,7 +9,7 @@ function getEdgeOffset(
   parent: (Node & ParentNode) | null,
   offset = defaultCoordinates
 ): Coordinates {
-  if (!node || !(node instanceof HTMLElement)) {
+  if (!node || !isHTMLElement(node)) {
     return offset;
   }
 
@@ -49,9 +51,9 @@ export function getViewportLayoutRect(element: HTMLElement): LayoutRect {
 }
 
 export function getBoundingClientRect(
-  element: HTMLElement | Window
+  element: HTMLElement | typeof window
 ): ClientRect {
-  if (element instanceof Window) {
+  if (isWindow(element)) {
     const width = window.innerWidth;
     const height = window.innerHeight;
 

packages/core/src/utilities/scroll/getScrollCoordinates.ts

@@ -1,9 +1,11 @@
+import {isWindow} from '@dnd-kit/utilities';
+
 import type {Coordinates} from '../../types';
 
 export function getScrollCoordinates(
   element: Element | typeof window
 ): Coordinates {
-  if (element instanceof Window) {
+  if (isWindow(element)) {
     return {
       x: element.scrollX,
       y: element.scrollY,

packages/core/src/utilities/scroll/getScrollableAncestors.ts

@@ -1,3 +1,5 @@
+import {isDocument, isHTMLElement, isSVGElement} from '@dnd-kit/utilities';
+
 import {isFixed} from './isFixed';
 import {isScrollable} from './isScrollable';
 
@@ -10,7 +12,7 @@ export function getScrollableAncestors(element: Node | null): Element[] {
     }
 
     if (
-      node instanceof Document &&
+      isDocument(node) &&
       node.scrollingElement != null &&
       !scrollParents.includes(node.scrollingElement)
     ) {
@@ -19,7 +21,7 @@ export function getScrollableAncestors(element: Node | null): Element[] {
       return scrollParents;
     }
 
-    if (!(node instanceof HTMLElement) || node instanceof SVGElement) {
+    if (!isHTMLElement(node) || isSVGElement(node)) {
       return scrollParents;
     }
 

packages/core/src/utilities/scroll/getScrollableElement.ts

@@ -1,15 +1,33 @@
-import {canUseDOM} from '@dnd-kit/utilities';
+import {
+  canUseDOM,
+  isHTMLElement,
+  isDocument,
+  getOwnerDocument,
+  isNode,
+  isWindow,
+} from '@dnd-kit/utilities';
 
 export function getScrollableElement(element: EventTarget | null) {
-  if (!canUseDOM) {
+  if (!canUseDOM || !element) {
     return null;
   }
 
-  if (element === document.scrollingElement || element instanceof Document) {
+  if (isWindow(element)) {
+    return element;
+  }
+
+  if (!isNode(element)) {
+    return null;
+  }
+
+  if (
+    isDocument(element) ||
+    element === getOwnerDocument(element).scrollingElement
+  ) {
     return window;
   }
 
-  if (element instanceof HTMLElement) {
+  if (isHTMLElement(element)) {
     return element;
   }
 

packages/utilities/src/event/index.ts

@@ -1,2 +1,3 @@
 export {hasViewportRelativeCoordinates} from './hasViewportRelativeCoordinates';
+export {isKeyboardEvent} from './isKeyboardEvent';
 export {isTouchEvent} from './isTouchEvent';

packages/utilities/src/event/isKeyboardEvent.ts

@@ -0,0 +1,13 @@
+import {getWindow} from '../execution-context';
+
+export function isKeyboardEvent(
+  event: Event | undefined | null
+): event is KeyboardEvent {
+  if (!event) {
+    return false;
+  }
+
+  const {KeyboardEvent} = getWindow(event.target);
+
+  return KeyboardEvent && event instanceof KeyboardEvent;
+}

packages/utilities/src/event/isTouchEvent.ts

@@ -1,3 +1,13 @@
-export function isTouchEvent(event: Event): event is TouchEvent {
-  return window?.TouchEvent && event instanceof TouchEvent;
+import {getWindow} from '../execution-context';
+
+export function isTouchEvent(
+  event: Event | undefined | null
+): event is TouchEvent {
+  if (!event) {
+    return false;
+  }
+
+  const {TouchEvent} = getWindow(event.target);
+
+  return TouchEvent && event instanceof TouchEvent;
 }

packages/utilities/src/execution-context/getOwnerDocument.ts

@@ -0,0 +1,25 @@
+import {isWindow, isHTMLElement, isDocument, isNode} from '../type-guards';
+
+export function getOwnerDocument(target: Event['target']): Document {
+  if (!target) {
+    return document;
+  }
+
+  if (isWindow(target)) {
+    return target.document;
+  }
+
+  if (!isNode(target)) {
+    return document;
+  }
+
+  if (isDocument(target)) {
+    return target;
+  }
+
+  if (isHTMLElement(target)) {
+    return target.ownerDocument;
+  }
+
+  return document;
+}

packages/utilities/src/execution-context/getWindow.ts

@@ -0,0 +1,18 @@
+import {isWindow} from '../type-guards/isWindow';
+import {isNode} from '../type-guards/isNode';
+
+export function getWindow(target: Event['target']): typeof window {
+  if (!target) {
+    return window;
+  }
+
+  if (isWindow(target)) {
+    return target;
+  }
+
+  if (!isNode(target)) {
+    return window;
+  }
+
+  return target.ownerDocument?.defaultView ?? window;
+}

packages/core/src/utilities/document/index.ts → packages/utilities/src/execution-context/index.ts

@@ -1,2 +1,3 @@
+export {canUseDOM} from './canUseDOM';
 export {getOwnerDocument} from './getOwnerDocument';
 export {getWindow} from './getWindow';