@linzjs/windows 3.0.0 → 3.1.0

package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx

@@ -1,10 +1,21 @@
 import { ComponentType, LuiModalAsyncContext, PromiseWithResolve } from "./LuiModalAsyncContext";
 import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
-import React, { MutableRefObject, PropsWithChildren, ReactElement, useCallback, useState } from "react";
+import React, {
+  createRef,
+  MutableRefObject,
+  PropsWithChildren,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { useInterval } from "usehooks-ts";
 import { v4 as makeUuid } from "uuid";
 
+export const openModalOnAllWindows = createRef<HTMLDivElement>();
+
 export interface LuiModalAsyncInstance {
   uuid: string;
   ownerRef: MutableRefObject<HTMLElement | null>;
@@ -58,6 +69,24 @@ export interface LuiModalAsyncInstance {
  */
 export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unknown>): ReactElement => {
   const [modals, setModals] = useState<LuiModalAsyncInstance[]>([]);
+  const openWindowsRef = useRef([window]);
+
+  // hook window open for opening dialogs across multiple windows
+  useEffect(() => {
+    const oldWindowOpen = window.open;
+    window.open = (...props) => {
+      const r = oldWindowOpen(...props);
+      // We don't want to track non app-windows, e.g. help screens
+      if (!props[0]) {
+        r && openWindowsRef.current.push(r as typeof window);
+      }
+      return r;
+    };
+
+    return () => {
+      window.open = oldWindowOpen;
+    };
+  }, []);
 
   /**
    * Inserts the modal into the page, and removes once modal has a result.
@@ -104,18 +133,28 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
    * Check modal is still attached to a window.
    */
   const modalHasView = useCallback(
-    (modalInstance: LuiModalAsyncInstance): boolean => !!modalInstance.ownerRef.current?.ownerDocument?.defaultView,
+    (modalInstance: LuiModalAsyncInstance): boolean =>
+      modalInstance.ownerRef === openModalOnAllWindows || !!modalInstance.ownerRef.current?.ownerDocument?.defaultView,
     [],
   );
 
+  const windowIsOpen = useCallback((w: typeof window): boolean => !w.closed, []);
+
   /**
    * Tidy up modals that have closed because of an external window closing
    */
   useInterval(() => {
     const newModals = modals.filter(modalHasView);
     newModals.length !== modals.length && setModals(newModals);
+    // We could do this with window close listeners, but they are unreliable
+    openWindowsRef.current = openWindowsRef.current.filter((w) => !w.closed);
   }, 500);
 
+  const portalOwners = (modalInstance: LuiModalAsyncInstance) =>
+    modalInstance.ownerRef == openModalOnAllWindows
+      ? openWindowsRef.current.filter(windowIsOpen).map((frame) => frame.document.body)
+      : [(modalInstance.ownerRef.current?.ownerDocument ?? document).body];
+
   return (
     <LuiModalAsyncContext.Provider
       value={{
@@ -123,20 +162,20 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
       }}
     >
       <>
-        {modals.filter(modalHasView).map((modalInstance) =>
-          createPortal(
-            <LuiModalAsyncInstanceContext.Provider
-              value={{
-                ownerRef: modalInstance.ownerRef,
-                close: () => modalInstance.resolve(undefined),
-                resolve: modalInstance.resolve,
-              }}
-            >
-              {modalInstance.componentInstance}
-            </LuiModalAsyncInstanceContext.Provider>,
-            (modalInstance.ownerRef.current?.ownerDocument ?? document).body,
-          ),
-        )}
+        {modals.filter(modalHasView).map((modalInstance) => (
+          <LuiModalAsyncInstanceContext.Provider
+            key={modalInstance.uuid}
+            value={{
+              ownerRef: modalInstance.ownerRef,
+              close: () => modalInstance.resolve(undefined),
+              resolve: modalInstance.resolve,
+            }}
+          >
+            {portalOwners(modalInstance).map((element) =>
+              createPortal(<>{modalInstance.componentInstance}</>, element),
+            )}
+          </LuiModalAsyncInstanceContext.Provider>
+        ))}
       </>
       <>{children}</>
     </LuiModalAsyncContext.Provider>

package/dist/LuiModalAsync/useLuiModalPrefab.tsx

@@ -23,6 +23,7 @@ export interface LuiModalAsyncPrefabButton<RT> {
 }
 
 export interface useLuiModalPrefabProps<RT extends any = string> extends LuiModalAsyncProps {
+  showOnAllWindows?: boolean;
   level: PrefabType;
   title: string;
   helpLink?: string;
@@ -186,8 +187,7 @@ export const useLuiModalPrefab = () => {
       if (props.dontShowAgainSessionKey && LuiModalDontShowSessionCheck(props.dontShowAgainSessionKey)) {
         return Promise.resolve(undefined);
       }
-
-      return showModal(LuiModalPrefab, props) as PromiseWithResolve<RT>;
+      return showModal(LuiModalPrefab, props, { showOnAllWindows: props.showOnAllWindows }) as PromiseWithResolve<RT>;
     },
     [showModal],
   );

package/dist/LuiModalAsync/useShowAsyncModal.ts

@@ -1,5 +1,10 @@
 import { ComponentType, LuiModalAsyncContext, PromiseWithResolve } from "./LuiModalAsyncContext";
 import { ComponentProps, useCallback, useContext, useMemo, useRef } from "react";
+import { openModalOnAllWindows } from "./LuiModalAsyncContextProvider";
+
+export interface ShowModalProps {
+  showOnAllWindows?: boolean;
+}
 
 export const useShowAsyncModal = () => {
   const { showModal } = useContext(LuiModalAsyncContext);
@@ -10,7 +15,9 @@ export const useShowAsyncModal = () => {
     <CT extends ComponentType>(
       component: CT,
       args: Omit<ComponentProps<CT>, "resolve" | "close">,
-    ): PromiseWithResolve<Parameters<ComponentProps<CT>["resolve"]>[0]> => showModal(modalOwnerRef, component, args),
+      props?: ShowModalProps,
+    ): PromiseWithResolve<Parameters<ComponentProps<CT>["resolve"]>[0]> =>
+      showModal(props?.showOnAllWindows ? openModalOnAllWindows : modalOwnerRef, component, args),
     [showModal],
   );
 

package/dist/panel/OpenPanelIcon.tsx

@@ -29,9 +29,18 @@ interface OpenPanelIconProps {
   component: () => ReactElement;
   disabled?: boolean;
   className?: string;
+  testId?: string;
 }
 
-export const OpenPanelIcon = ({ iconTitle, uniqueId, icon, component, className, disabled }: OpenPanelIconProps) => {
+export const OpenPanelIcon = ({
+  iconTitle,
+  uniqueId,
+  icon,
+  component,
+  className,
+  disabled,
+  testId,
+}: OpenPanelIconProps) => {
   const { openPanel, openPanels } = useContext(PanelsContext);
   const id = useRef(uniqueId ?? uuid());
 
@@ -47,6 +56,7 @@ export const OpenPanelIcon = ({ iconTitle, uniqueId, icon, component, className,
       title={iconTitle}
       onClick={() => openPanel(id.current, component)}
       disabled={disabled}
+      data-testid={testId}
     >
       <LuiIcon name={icon} alt={iconTitle} size={"md"} />
     </button>

package/package.json

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