use div to determine window

leoc4e · Vlad Shilov · commit 0afe804e0f96 · 2021-11-16T18:32:38.000+03:00
diff --git a/src/components/common/AlphaColorPicker.tsx b/src/components/common/AlphaColorPicker.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 
 import { Hue } from "./Hue";
 import { Saturation } from "./Saturation";
@@ -20,14 +20,15 @@ export const AlphaColorPicker = <T extends AnyColor>({
   onChange,
   ...rest
 }: Props<T>): JSX.Element => {
-  useStyleSheet();
+  const containerRef = useRef<HTMLDivElement>(null);
+  useStyleSheet(containerRef);
 
   const [hsva, updateHsva] = useColorManipulation<T>(colorModel, color, onChange);
 
   const nodeClassName = formatClassName(["react-colorful", className]);
 
   return (
-    <div {...rest} className={nodeClassName}>
+    <div {...rest} ref={containerRef} className={nodeClassName}>
       <Saturation hsva={hsva} onChange={updateHsva} />
       <Hue hue={hsva.h} onChange={updateHsva} />
       <Alpha hsva={hsva} onChange={updateHsva} className="react-colorful__last-control" />
diff --git a/src/components/common/ColorPicker.tsx b/src/components/common/ColorPicker.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 
 import { Hue } from "./Hue";
 import { Saturation } from "./Saturation";
@@ -19,14 +19,15 @@ export const ColorPicker = <T extends AnyColor>({
   onChange,
   ...rest
 }: Props<T>): JSX.Element => {
-  useStyleSheet();
+  const containerRef = useRef<HTMLDivElement>(null);
+  useStyleSheet(containerRef);
 
   const [hsva, updateHsva] = useColorManipulation<T>(colorModel, color, onChange);
 
   const nodeClassName = formatClassName(["react-colorful", className]);
 
   return (
-    <div {...rest} className={nodeClassName}>
+    <div {...rest} ref={containerRef} className={nodeClassName}>
       <Saturation hsva={hsva} onChange={updateHsva} />
       <Hue hue={hsva.h} onChange={updateHsva} className="react-colorful__last-control" />
     </div>
diff --git a/src/components/common/Interactive.tsx b/src/components/common/Interactive.tsx
@@ -28,10 +28,11 @@ const getRelativePosition = (
 
   // Get user's pointer position from `touches` array if it's a `TouchEvent`
   const pointer = isTouch(event) ? getTouchPoint(event.touches, touchId) : (event as MouseEvent);
+  const nodeWindow = node.ownerDocument.defaultView || window;
 
   return {
-    left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
+    left: clamp((pointer.pageX - (rect.left + nodeWindow.pageXOffset)) / rect.width),
+    top: clamp((pointer.pageY - (rect.top + nodeWindow.pageYOffset)) / rect.height),
   };
 };
 
@@ -120,8 +121,13 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
 
     function toggleDocumentEvents(state?: boolean) {
       const touch = hasTouch.current;
+      const el = container.current;
+      const containerWindow = (el && el.ownerDocument.defaultView) || self;
+
       // add or remove additional pointer event listeners
-      const toggleEvent = state ? self.addEventListener : self.removeEventListener;
+      const toggleEvent = state
+        ? containerWindow.addEventListener
+        : containerWindow.removeEventListener;
       toggleEvent(touch ? "touchmove" : "mousemove", handleMove);
       toggleEvent(touch ? "touchend" : "mouseup", handleMoveEnd);
     }
diff --git a/src/hooks/useStyleSheet.ts b/src/hooks/useStyleSheet.ts
@@ -3,23 +3,27 @@ import { getNonce } from "../utils/nonce";
 
 // Bundler is configured to load this as a processed minified CSS-string
 import styles from "../css/styles.css";
+import { RefObject } from "react";
 
-let styleElement: HTMLStyleElement | undefined;
+const styleElementMap: Map<Document, HTMLStyleElement> = new Map();
 
 /**
  * Injects CSS code into the document's <head>
  */
-export const useStyleSheet = (): void => {
+export const useStyleSheet = (containerRef?: RefObject<HTMLDivElement>): void => {
   useIsomorphicLayoutEffect(() => {
-    if (typeof document !== "undefined" && !styleElement) {
-      styleElement = document.createElement("style");
+    const containerDocument =
+      containerRef && containerRef.current ? containerRef.current.ownerDocument : document;
+    if (typeof containerDocument !== "undefined" && !styleElementMap.has(containerDocument)) {
+      const styleElement = containerDocument.createElement("style");
       styleElement.innerHTML = styles;
+      styleElementMap.set(containerDocument, styleElement);
 
       // Conform to CSP rules by setting `nonce` attribute to the inline styles
       const nonce = getNonce();
       if (nonce) styleElement.setAttribute("nonce", nonce);
 
-      document.head.appendChild(styleElement);
+      containerDocument.head.appendChild(styleElement);
     }
   }, []);
 };
