@linzjs/windows 4.1.2 → 4.1.3

package/dist/panel/Panel.tsx

@@ -6,13 +6,14 @@ import { PanelInstanceContext } from "./PanelInstanceContext";
 import { PanelsContext } from "./PanelsContext";
 import { PopoutWindow } from "./PopoutWindow";
 import clsx from "clsx";
-import { PropsWithChildren, ReactElement, useContext, useEffect, useMemo } from "react";
+import { PropsWithChildren, ReactElement, useContext, useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { PopinWindow } from "./PopinWIndow";
 import { PanelProps } from "./types/PanelProps";
 import { useConstFunction } from "../common";
 
 export const Panel = (props: PanelProps): ReactElement => {
+  const panelRef = useRef<HTMLDivElement>(null);
   const { title, size = { width: 320, height: 200 }, className, children, onClose } = props;
 
   const { dockElements, nextStackPosition } = useContext(PanelsContext);
@@ -30,6 +31,16 @@ export const Panel = (props: PanelProps): ReactElement => {
     setTitle(title);
   }, [setTitle, title]);
 
+  // We only want to update the title when it changes
+  useEffect(() => {
+    if (panelRef.current) {
+      const doc = panelRef.current.ownerDocument;
+      if (doc) {
+        doc.title = title;
+      }
+    }
+  }, [title]);
+
   const dockElement = docked && dockId && dockElements[dockId];
 
   /**
@@ -55,6 +66,7 @@ export const Panel = (props: PanelProps): ReactElement => {
       ) : panelPoppedOut ? (
         <PopoutWindow name={uniqueId} title={title} size={size}>
           <div
+            ref={panelRef}
             style={{
               display: "flex",
               flexDirection: "column",

package/dist/panel/PopoutWindow.tsx

@@ -3,7 +3,7 @@ import { makePopoutId, popoutWindowDivId } from "./generateId";
 import { copyStyleSheets, observeStyleSheetChanges } from "./handleStyleSheetsChanges";
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { Dispatch, ReactElement, ReactNode, SetStateAction, useContext, useEffect, useRef, useState } from "react";
+import { Dispatch, ReactElement, ReactNode, SetStateAction, useContext, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import { useRestoreStateFrom, useSaveStateIn } from "./usePanelStateHandler";
 import { PanelPosition, PanelSize } from "./types";
@@ -128,18 +128,9 @@ export const PopoutWindow = ({
 }: PopoutWindowProps): ReactElement | null => {
   const { setPanelWindow } = useContext(PanelInstanceContext);
 
-  const extWindow = useRef<Window | null>(null);
-
   const [containerElement, setContainerElement] = useState<HTMLElement>();
   const [headElement, setHeadElement] = useState<HTMLElement>();
 
-  // We only want to update the title when it changes
-  useEffect(() => {
-    if (extWindow.current) {
-      extWindow.current.document.title = title;
-    }
-  }, [title]);
-
   const savedState = useRestoreStateFrom({ panelPoppedOut: true, uniqueId: name });
 
   const panelPosition = savedState?.panelPosition ?? { x: 300, y: 200 };

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",