@linzjs/windows 5.4.3 → 5.5.0

package/dist/LuiModalAsync/LuiModalAsync.scss

@@ -101,7 +101,7 @@ dialog.LuiModalAsync, div.LuiModalAsync {
   .LuiModalAsync-main {
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex: 1 1 auto;
     gap: lui.$unit-rg;
     overflow: hidden;
   }

package/dist/panel/Panel.tsx

@@ -3,7 +3,7 @@ import './PanelBlue.scss';
 import '@linzjs/lui/dist/scss/base.scss';
 
 import clsx from 'clsx';
-import { PropsWithChildren, ReactElement, useContext, useEffect, useMemo, useRef } from 'react';
+import { PropsWithChildren, ReactElement, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useConstFunction } from '../common';
@@ -12,12 +12,13 @@ import { PanelsContext } from './PanelsContext';
 import { PopinWindow } from './PopinWIndow';
 import { PopoutWindow } from './PopoutWindow';
 import { PanelProps } from './types/PanelProps';
+import { useRestoreStateFrom } from './usePanelStateHandler';
 
 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);
+  const { dockElements } = useContext(PanelsContext);
   const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
 
   const onCloseConstFn = useConstFunction(onClose ?? (() => {}));
@@ -42,30 +43,51 @@ export const Panel = (props: PanelProps): ReactElement => {
     }
   }, [title]);
 
-  const dockElement = docked && dockId && dockElements[dockId];
+  const { nextStackPosition } = useContext(PanelsContext);
 
-  /**
-   * This needs to be here, otherwise, every time PopinWindow is rendered, nextStackPosition is recalculated.
-   */
+  const savedState = useRestoreStateFrom({ uniqueId, panelPoppedOut: false });
 
-  const memoizeNextStackPosition = useMemo(
-    () => {
-      if (props.position === undefined || props.position === 'tile') {
-        return nextStackPosition();
-      }
+  const [panelPosition, setPanelPosition] = useState(() => {
+    if (savedState?.panelPosition) {
+      return savedState.panelPosition;
+    }
 
-      return { x: 0, y: 0 };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
+    if (props.position === 'center') {
+      return {
+        x: Math.max((window.innerWidth - size.width) / 2, 0),
+        y: Math.max((window.innerHeight - size.height) / 2, 0),
+      };
+    }
+
+    if (props.position != null && props.position !== 'tile') {
+      return props.position;
+    }
+
+    return nextStackPosition();
+  });
+
+  const [panelSize, setPanelSize] = useState(() => {
+    if (savedState?.panelSize) {
+      return savedState.panelSize;
+    }
+
+    return size ?? { width: 320, height: 200 };
+  });
+
+  const dockElement = docked && dockId && dockElements[dockId];
 
   return (
     <>
       {dockElement && dockElement.isConnected ? (
         createPortal(children, dockElement)
       ) : panelPoppedOut ? (
-        <PopoutWindow name={uniqueId} title={title} size={size}>
+        <PopoutWindow
+          name={uniqueId}
+          title={title}
+          size={size}
+          popInPanelPosition={panelPosition}
+          popInPanelSize={panelSize}
+        >
           <div
             ref={panelRef}
             style={{
@@ -80,7 +102,13 @@ export const Panel = (props: PanelProps): ReactElement => {
           </div>
         </PopoutWindow>
       ) : (
-        <PopinWindow {...props} nextStackPosition={() => memoizeNextStackPosition}>
+        <PopinWindow
+          {...props}
+          panelPosition={panelPosition}
+          setPanelPosition={setPanelPosition}
+          panelSize={panelSize}
+          setPanelSize={setPanelSize}
+        >
           {children}
         </PopinWindow>
       )}

package/dist/panel/PanelsContext.tsx

@@ -25,7 +25,7 @@ export interface PanelsContextType {
   nextStackPosition: () => PanelPosition;
   dockElements: Record<string, HTMLDivElement>;
   setDockElement: (id: string, element: HTMLDivElement) => void;
-  panelStateOptions?: PanelStateOptions;
+  panelStateOptions?: PanelStateOptions | null;
 }
 
 const NoContext = () => {

package/dist/panel/PanelsContextProvider.tsx

@@ -11,21 +11,28 @@ import { PanelStateOptions } from './types/PanelStateOptions';
 export interface PanelsContextProviderProps {
   baseZIndex?: number;
   bounds?: string | Element;
-  panelStateOptions?: PanelStateOptions;
+  panelStateOptions?: PanelStateOptions | null;
   tilingStart?: PanelPosition;
   tilingOffset?: PanelPosition;
   tilingMax?: PanelPosition;
 }
 
+const defaultPanelStateOptions: PanelStateOptions = {
+  saveStateIn: 'localStorage',
+  saveStateKey: 'userId',
+};
+
 export const PanelsContextProvider = ({
   bounds,
   baseZIndex = 500,
   children,
-  panelStateOptions,
+  panelStateOptions: _panelStateOptions,
   tilingStart = { x: 30, y: 30 },
   tilingOffset = { x: 30, y: 50 },
   tilingMax = { x: 200, y: 300 },
 }: PropsWithChildren<PanelsContextProviderProps>): ReactElement => {
+  const panelStateOptions = _panelStateOptions === undefined ? defaultPanelStateOptions : _panelStateOptions;
+
   const stackPositionRef = useRef(tilingStart);
 
   // Can't use a map here as we need to retain render order for performance

package/dist/panel/PopinWIndow.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Dispatch, useCallback, useContext, useEffect, useRef } from 'react';
 import { Rnd } from 'react-rnd';
 
 import { PanelContext } from './PanelContext';
 import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelPosition, PanelSize } from './types';
 import { PanelProps } from './types/PanelProps';
-import { useRestoreStateFrom, useSaveStateIn } from './usePanelStateHandler';
+import { useSaveStateIn } from './usePanelStateHandler';
 
 export function PopinWindow({
   children,
@@ -16,50 +16,30 @@ export function PopinWindow({
   minHeight,
   minWidth,
   modal,
-  nextStackPosition,
   position = modal ? 'center' : 'tile',
   resizeable = modal !== true,
   size = { height: 200, width: 320 },
-}: PanelProps & { nextStackPosition: () => PanelPosition }): JSX.Element {
+  panelPosition,
+  setPanelPosition,
+  panelSize,
+  setPanelSize,
+}: PanelProps & {
+  panelPosition: PanelPosition;
+  setPanelPosition: Dispatch<PanelPosition>;
+  panelSize: PanelSize;
+  setPanelSize: Dispatch<PanelSize>;
+}): JSX.Element {
   const panelRef = useRef<Rnd>(null);
 
   const { bounds, zIndex, bringPanelToFront, uniqueId } = useContext(PanelInstanceContext);
 
-  const savedState = useRestoreStateFrom({ uniqueId, panelPoppedOut: false });
-
-  const [panelPosition, setPanelPosition] = useState(() => {
-    if (savedState?.panelPosition) {
-      return savedState.panelPosition;
-    }
-
-    switch (position) {
-      case 'center':
-        return {
-          x: Math.max((window.innerWidth - size.width) / 2, 0),
-          y: Math.max((window.innerHeight - size.height) / 2, 0),
-        };
-      case 'tile':
-        return nextStackPosition();
-      default:
-        return position ?? nextStackPosition();
-    }
-  });
-
-  const [panelSize, setPanelSize] = useState(() => {
-    if (savedState?.panelSize) {
-      return savedState.panelSize;
-    }
-
-    return size ?? { width: 320, height: 200 };
-  });
-
   const centerWindow = useCallback(() => {
     const b = panelRef.current?.getSelfElement()?.getBoundingClientRect();
     setPanelPosition({
       x: Math.max((window.innerWidth - (b?.width ?? size.width)) / 2, 0),
       y: Math.max((window.innerHeight - (b?.height ?? size.height)) / 2, 0),
     });
-  }, [size]);
+  }, [setPanelPosition, size.height, size.width]);
 
   useEffect(() => {
     if (position === 'center' && !resizeable) {

package/dist/panel/PopoutWindow.tsx

@@ -1,10 +1,10 @@
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
-import { Dispatch, ReactElement, ReactNode, SetStateAction, useContext, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useContext, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import { makePopoutId, popoutWindowDivId } from './generateId';
-import { copyStyleSheets, observeStyleSheetChanges } from './handleStyleSheetsChanges';
+import { makePopoutId } from './generateId';
+import { openExternalWindow, OpenExternalWindowResponse } from './openExternalWindow';
 import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelPosition, PanelSize } from './types';
 import { useRestoreStateFrom, useSaveStateIn } from './usePanelStateHandler';
@@ -14,6 +14,8 @@ interface PopoutWindowProps {
   title?: string; // The title of the popout window
   children: ReactNode; // what to render inside the window
   size: PanelSize;
+  popInPanelPosition: PanelPosition;
+  popInPanelSize: PanelSize;
 
   //says if we want to watch for any dynamic style changes
   //only needed when using UI libraries like MUI
@@ -24,104 +26,12 @@ interface PopoutWindowProps {
   className?: string;
 }
 
-type OpenExternalWindowResponse = {
-  externalWindow: Window | null;
-  onCloseExternalWindow: (() => void) | null;
-};
-
-/**
- * Open and scaffold the new external window.
- *
- * The main motivation for extracting these procedures into a function is for testing ease. JSDOM does not mock out the
- * entire window object, making the PopoutWindow component difficult to unit test without extensive mocking. Instead, we
- * can avoid mocking most of the window methods entirely by conditionally calling an alternative to `openExternalWindow`
- * during unit testing by providing a truthy `openExternalWindowFn` prop.
- */
-const openExternalWindow = ({
-  title,
-  size,
-  setContainerElement,
-  setHeadElement,
-  observeStyleChanges = false,
-  className,
-  position,
-}: {
-  title: string;
-  size: { width: number; height: number };
-  setContainerElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
-  setHeadElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
-  observeStyleChanges?: boolean;
-  className?: string;
-  position: PanelPosition;
-}): OpenExternalWindowResponse => {
-  const response: OpenExternalWindowResponse = { externalWindow: null, onCloseExternalWindow: null };
-
-  // NOTE:
-  // 1/ Edge ignores the left and top settings
-  // 2/ Chrome has a bug that screws up the window size by a factor dependent on your windows scaling settings
-  // if you open the browser in a window with a scaling and drag it to a window with a different scaling
-  const features =
-    `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,` +
-    `width=${size.width},height=${size.height},left=${position.x},top=${position.y}`;
-  response.externalWindow = window.open('', makePopoutId(title), features);
-
-  if (response.externalWindow) {
-    const { externalWindow } = response;
-
-    // Reset the default body style applied by the browser
-    externalWindow.document.body.style.margin = '0';
-    externalWindow.document.body.style.padding = '0';
-
-    // Remove any existing body HTML from this window
-    const existingBodyMountElement = externalWindow.document.body?.firstChild;
-    if (existingBodyMountElement) {
-      externalWindow.document.body.removeChild(existingBodyMountElement);
-    }
-    // Create a new HTML element to hang our rendering off
-    const newMountElement = externalWindow.document.createElement('div');
-    newMountElement.className = `PopoutWindowContainer ${className}`;
-    setContainerElement(newMountElement);
-    externalWindow.document.body.appendChild(newMountElement);
-
-    // Do the same for the head node (where all the styles are added)
-    const existingHeadMountElement = externalWindow.document.head?.firstChild;
-    if (existingHeadMountElement) {
-      externalWindow.document.head.removeChild(existingHeadMountElement);
-    }
-    // and an HTML element to hang our copied styles off
-    const newHeadMountElement = externalWindow.document.createElement('div');
-    externalWindow.document.head.appendChild(newHeadMountElement);
-    setHeadElement(newHeadMountElement);
-
-    // Set External window title
-    externalWindow.document.title = title;
-
-    // Set an id to the external window div to be queried and used by react-modal as parentSelector
-    // so the modal shows up in the popped out window instead the main window
-    newMountElement.id = popoutWindowDivId(title);
-
-    copyStyleSheets(newHeadMountElement);
-
-    let observer: MutationObserver | null = null;
-    if (observeStyleChanges) {
-      observer = observeStyleSheetChanges(newHeadMountElement);
-    }
-
-    externalWindow.onbeforeunload = () => observer?.disconnect();
-
-    response.onCloseExternalWindow = () => {
-      // Make sure the window closes when the component unmounts
-      externalWindow.close();
-    };
-  }
-
-  return response;
-};
-
 export const PopoutWindow = ({
   name,
   title = name,
   size,
+  popInPanelPosition,
+  popInPanelSize,
   observeStyleChanges,
   className,
   openExternalWindowFn,
@@ -132,10 +42,16 @@ export const PopoutWindow = ({
   const [containerElement, setContainerElement] = useState<HTMLElement>();
   const [headElement, setHeadElement] = useState<HTMLElement>();
 
-  const savedState = useRestoreStateFrom({ panelPoppedOut: true, uniqueId: name });
+  const savedState = useRestoreStateFrom({ uniqueId: name, panelPoppedOut: true });
 
-  const panelPosition = savedState?.panelPosition ?? { x: 300, y: 200 };
-  const panelSize = savedState?.panelSize ?? size;
+  // If we use a popped in position as a popped out position we must adjust for which screen the window is on.
+  const poppedInPosition = popInPanelPosition;
+  const poppedInPositionAdjusted = {
+    x: window.screenX + poppedInPosition.x,
+    y: window.screenY + poppedInPosition.y,
+  };
+  const position = savedState?.panelPosition ?? poppedInPositionAdjusted;
+  const panelSize = savedState?.panelSize ?? popInPanelSize ?? size;
 
   const saveStateIn = useSaveStateIn({ panelPoppedOut: true, uniqueId: name });
 
@@ -150,7 +66,7 @@ export const PopoutWindow = ({
         setHeadElement,
         observeStyleChanges,
         className,
-        position: panelPosition,
+        position,
       });
 
       if (!externalWindow) return;
@@ -161,23 +77,20 @@ export const PopoutWindow = ({
         externalWindow.close();
       };
 
-      const savePanelState = ({ currentTarget }: Event) => {
-        const extWindow = currentTarget as Window;
-
+      const savePanelState = () => {
         saveStateIn({
           panelPosition: {
-            x: extWindow.screenX,
-            y: extWindow.screenY,
+            x: externalWindow.screenX,
+            y: externalWindow.screenY,
           },
           panelSize: {
-            height: extWindow.innerHeight,
-            width: extWindow.innerWidth,
+            height: externalWindow.innerHeight,
+            width: externalWindow.innerWidth,
           },
         });
       };
 
       externalWindow.addEventListener('beforeunload', savePanelState);
-      externalWindow.addEventListener('resize', savePanelState);
 
       // When the main window closes or reloads, close the popout
       window.addEventListener('beforeunload', closeExternalWindow, { once: true });

package/dist/panel/openExternalWindow.ts

@@ -0,0 +1,98 @@
+import { Dispatch, SetStateAction } from 'react';
+
+import { makePopoutId, popoutWindowDivId } from './generateId';
+import { copyStyleSheets, observeStyleSheetChanges } from './handleStyleSheetsChanges';
+import { PanelPosition } from './types';
+
+export type OpenExternalWindowResponse = {
+  externalWindow: Window | null;
+  onCloseExternalWindow: (() => void) | null;
+};
+/**
+ * Open and scaffold the new external window.
+ *
+ * The main motivation for extracting these procedures into a function is for testing ease. JSDOM does not mock out the
+ * entire window object, making the PopoutWindow component difficult to unit test without extensive mocking. Instead, we
+ * can avoid mocking most of the window methods entirely by conditionally calling an alternative to `openExternalWindow`
+ * during unit testing by providing a truthy `openExternalWindowFn` prop.
+ */
+export const openExternalWindow = ({
+  title,
+  size,
+  setContainerElement,
+  setHeadElement,
+  observeStyleChanges = false,
+  className,
+  position,
+}: {
+  title: string;
+  size: { width: number; height: number };
+  setContainerElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
+  setHeadElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
+  observeStyleChanges?: boolean;
+  className?: string;
+  position: PanelPosition;
+}): OpenExternalWindowResponse => {
+  const response: OpenExternalWindowResponse = { externalWindow: null, onCloseExternalWindow: null };
+
+  // NOTE:
+  // 1/ Edge ignores the left and top settings
+  // 2/ Chrome has a bug that screws up the window size by a factor dependent on your windows scaling settings
+  // if you open the browser in a window with a scaling and drag it to a window with a different scaling
+  const features =
+    `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,` +
+    `width=${size.width},height=${size.height},left=${position.x},top=${position.y}`;
+  response.externalWindow = window.open('', makePopoutId(title), features);
+
+  if (response.externalWindow) {
+    const { externalWindow } = response;
+
+    // Reset the default body style applied by the browser
+    externalWindow.document.body.style.margin = '0';
+    externalWindow.document.body.style.padding = '0';
+
+    // Remove any existing body HTML from this window
+    const existingBodyMountElement = externalWindow.document.body?.firstChild;
+    if (existingBodyMountElement) {
+      externalWindow.document.body.removeChild(existingBodyMountElement);
+    }
+    // Create a new HTML element to hang our rendering off
+    const newMountElement = externalWindow.document.createElement('div');
+    newMountElement.className = `PopoutWindowContainer ${className}`;
+    setContainerElement(newMountElement);
+    externalWindow.document.body.appendChild(newMountElement);
+
+    // Do the same for the head node (where all the styles are added)
+    const existingHeadMountElement = externalWindow.document.head?.firstChild;
+    if (existingHeadMountElement) {
+      externalWindow.document.head.removeChild(existingHeadMountElement);
+    }
+    // and an HTML element to hang our copied styles off
+    const newHeadMountElement = externalWindow.document.createElement('div');
+    externalWindow.document.head.appendChild(newHeadMountElement);
+    setHeadElement(newHeadMountElement);
+
+    // Set External window title
+    externalWindow.document.title = title;
+
+    // Set an id to the external window div to be queried and used by react-modal as parentSelector
+    // so the modal shows up in the popped out window instead the main window
+    newMountElement.id = popoutWindowDivId(title);
+
+    copyStyleSheets(newHeadMountElement);
+
+    let observer: MutationObserver | null = null;
+    if (observeStyleChanges) {
+      observer = observeStyleSheetChanges(newHeadMountElement);
+    }
+
+    externalWindow.onbeforeunload = () => observer?.disconnect();
+
+    response.onCloseExternalWindow = () => {
+      // Make sure the window closes when the component unmounts
+      externalWindow.close();
+    };
+  }
+
+  return response;
+};

package/dist/panel/types/PanelStateOptions.ts

@@ -3,9 +3,9 @@ import { PanelState } from './PanelState';
 
 export type SaveStateInOption = 'external' | 'localStorage';
 
-export type PanelStateOptions = {
+export interface PanelStateOptions {
   onRestoreState?: () => PanelRestoredState;
   onSaveState?: (panelState: PanelState) => void;
   saveStateIn: SaveStateInOption;
   saveStateKey: string;
-};
+}

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "5.4.3",
+  "version": "5.5.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
@@ -51,7 +51,7 @@
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@types/uuid": "^10.0.0",
     "lodash-es": ">=4",
     "react-rnd": "^10.5.2",
@@ -59,17 +59,17 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@linzjs/lui": "^23.3.0",
-    "@linzjs/step-ag-grid": "^27.3.3",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@linzjs/lui": "^23.11.1",
+    "@linzjs/step-ag-grid": "^28.5.1",
     "@linzjs/style": "^5.4.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-docs": "^9.0.14",
-    "@storybook/addon-links": "^9.0.14",
-    "@storybook/react-vite": "^9.0.14",
-    "@testing-library/dom": "^10.4.0",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-links": "^9.1.4",
+    "@storybook/react-vite": "^9.1.4",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
@@ -78,39 +78,39 @@
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "@vitest/ui": "^3.2.4",
-    "ag-grid-community": "^33.3.2",
-    "ag-grid-react": "^33.3.2",
+    "ag-grid-community": "^34.1.2",
+    "ag-grid-react": "^34.1.2",
     "babel-preset-react-app": "^10.1.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "9.0.14",
+    "eslint-plugin-storybook": "9.1.4",
     "jsdom": "^26.1.0",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.44.1",
+    "rollup": "^4.50.0",
     "rollup-plugin-copy": "^3.5.0",
-    "sass": "^1.89.2",
+    "sass": "^1.92.0",
     "sass-loader": "^16.0.5",
-    "semantic-release": "^24.2.6",
-    "storybook": "^9.0.14",
+    "semantic-release": "^24.2.7",
+    "storybook": "^9.1.4",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.21.0",
+    "stylelint": "^16.23.1",
     "stylelint-config-recommended": "^15.0.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-prettier": "5.0.3",
     "stylelint-scss": "6.12.1",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vite": "^6.3.5",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.44.1",
-    "@swc/core-linux-x64-gnu": "^1.12.7"
+    "@rollup/rollup-linux-x64-gnu": "^4.50.0",
+    "@swc/core-linux-x64-gnu": "^1.13.5"
   },
   "browserslist": {
     "production": [