[DropZone] Fixed document being referenced

UNRELEASED.md

@@ -8,6 +8,7 @@
 
 - Fixed `TextField` to no longer render `aria-invalid="false"` ([#2282](https://github.com/Shopify/polaris-react/pull/2282))
 - Fixed `TextField` to only render `min` ,`max` and `step` attributes when explicitly passed ([#2282](https://github.com/Shopify/polaris-react/pull/2282))
+- Removed reference to `document` in `DropZone` ([#2560](https://github.com/Shopify/polaris-react/pull/2560))
 
 ### Documentation
 

src/components/DropZone/DropZone.tsx

@@ -7,6 +7,10 @@ import React, {
   useEffect,
 } from 'react';
 import debounce from 'lodash/debounce';
+import {
+  addEventListener,
+  removeEventListener,
+} from '@shopify/javascript-utilities/events';
 import {
   DragDropMajorMonotone,
   CircleAlertMajorMonotone,
@@ -21,7 +25,7 @@ import {DisplayText} from '../DisplayText';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {Labelled, Action} from '../Labelled';
 import {useI18n} from '../../utilities/i18n';
-import {useEventListener} from '../../utilities/use-event-listener';
+import {isServer} from '../../utilities/target';
 import {useUniqueId} from '../../utilities/unique-id';
 import {useComponentDidMount} from '../../utilities/use-component-did-mount';
 import {useToggle} from '../../utilities/use-toggle';
@@ -180,7 +184,6 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
   const [measuring, setMeasuring] = useState(true);
 
   const i18n = useI18n();
-  const dropNode = dropOnPage ? document : node;
 
   const getValidatedFiles = useCallback(
     (files: File[] | DataTransferItem[]) => {
@@ -282,8 +285,8 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
       if (disabled || (!allowMultiple && numFiles > 0)) return;
 
       dragTargets.current = dragTargets.current.filter((el: Node) => {
-        const compareNode =
-          dropNode && 'current' in dropNode ? dropNode.current : document;
+        const compareNode = dropOnPage && !isServer ? document : node.current;
+
         return el !== event.target && compareNode && compareNode.contains(el);
       });
 
@@ -294,14 +297,35 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
 
       onDragLeave && onDragLeave();
     },
-    [allowMultiple, disabled, dropNode, numFiles, onDragLeave],
+    [allowMultiple, dropOnPage, disabled, numFiles, onDragLeave],
   );
 
-  useEventListener(dropNode, 'drop', handleDrop);
-  useEventListener(dropNode, 'dragover', handleDragOver);
-  useEventListener(dropNode, 'dragenter', handleDragEnter);
-  useEventListener(dropNode, 'dragleave', handleDragLeave);
-  useEventListener(null, 'resize', adjustSize, {}, {defaultToWindow: true});
+  useEffect(() => {
+    const dropNode = dropOnPage ? document : node.current;
+
+    if (!dropNode) return;
+
+    addEventListener(dropNode, 'drop', handleDrop);
+    addEventListener(dropNode, 'dragover', handleDragOver);
+    addEventListener(dropNode, 'dragenter', handleDragEnter);
+    addEventListener(dropNode, 'dragleave', handleDragLeave);
+    addEventListener(window, 'resize', adjustSize);
+
+    return () => {
+      removeEventListener(dropNode, 'drop', handleDrop);
+      removeEventListener(dropNode, 'dragover', handleDragOver);
+      removeEventListener(dropNode, 'dragenter', handleDragEnter);
+      removeEventListener(dropNode, 'dragleave', handleDragLeave);
+      removeEventListener(window, 'resize', adjustSize);
+    };
+  }, [
+    dropOnPage,
+    handleDrop,
+    handleDragOver,
+    handleDragEnter,
+    handleDragLeave,
+    adjustSize,
+  ]);
 
   useComponentDidMount(() => {
     adjustSize();