@linzjs/windows 4.1.1 → 4.1.3

package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx

@@ -17,6 +17,7 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";
 import { useInterval } from "usehooks-ts";
+import { v4 } from "uuid";
 
 export interface LuiModalAsyncInstance {
   uuid: string;
@@ -106,7 +107,7 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
       args: any,
       showModalProps?: ShowModalProps,
     ): PromiseWithResolve<any> => {
-      const uuid = crypto.randomUUID();
+      const uuid = v4();
       let extResolve: PromiseWithResolve<any>["resolve"];
       const promise = new Promise((resolve) => {
         extResolve = resolve;

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/PanelsContextProvider.tsx

@@ -5,6 +5,7 @@ import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo,
 import { useInterval } from "usehooks-ts";
 import { PanelStateOptions } from "./types/PanelStateOptions";
 import { PanelPosition } from "./types";
+import { v4 } from "uuid";
 
 export interface PanelsContextProviderProps {
   baseZIndex?: number;
@@ -58,7 +59,7 @@ export const PanelsContextProvider = ({
   );
 
   const openPanel = useCallback(
-    ({ componentFn, poppedOut = false, uniqueId = crypto.randomUUID() }: OpenPanelOptions): void => {
+    ({ componentFn, poppedOut = false, uniqueId = v4() }: OpenPanelOptions): void => {
       try {
         const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
         if (existingPanelInstance) {

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.1",
+  "version": "4.1.3",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
@@ -49,9 +49,11 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@types/uuid": "^10.0.0",
     "lodash-es": ">=4",
     "react-rnd": "^10.4.13",
-    "usehooks-ts": "^3.1.0"
+    "usehooks-ts": "^3.1.0",
+    "uuid": "^11.0.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",