@linzjs/windows 4.0.2 → 4.1.1

package/dist/index.ts

@@ -1,3 +1,4 @@
 export * from "./common";
 export * from "./LuiModalAsync";
 export * from "./panel";
+export * from "./panel/types";

package/dist/panel/OpenPanelButton.tsx

@@ -7,11 +7,11 @@ interface OpenPanelButtonProps extends OpenPanelOptions {
   buttonText: string;
 }
 
-export const OpenPanelButton = ({ buttonText, ...openPanelOptions }: OpenPanelButtonProps) => {
+export const OpenPanelButton = ({ buttonText, uniqueId = buttonText, ...openPanelOptions }: OpenPanelButtonProps) => {
   const { openPanel, openPanels } = useContext(PanelsContext);
 
   return (
-    <button onClick={() => openPanel(openPanelOptions)}>
+    <button onClick={() => openPanel({ uniqueId, ...openPanelOptions })}>
       Show {buttonText} {openPanels.has(buttonText) ? "(Open)" : ""}
     </button>
   );

package/dist/panel/OpenPanelIcon.tsx

@@ -2,7 +2,7 @@ import "./OpenPanelIcon.scss";
 
 import { OpenPanelOptions, PanelsContext } from "./PanelsContext";
 import clsx from "clsx";
-import { ReactNode, useContext, useRef } from "react";
+import { ReactNode, useContext } from "react";
 
 import { LuiIcon } from "@linzjs/lui";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
@@ -35,10 +35,10 @@ export const OpenPanelIcon = ({
   className,
   disabled,
   testId,
+  uniqueId = iconTitle,
   ...openPanelOptions
 }: OpenPanelIconProps) => {
   const { openPanel, openPanels } = useContext(PanelsContext);
-  const id = useRef(openPanelOptions.uniqueId ?? crypto.randomUUID());
 
   return (
     <button
@@ -46,11 +46,11 @@ export const OpenPanelIcon = ({
       className={clsx(
         className,
         "lui-button lui-button-secondary lui-button-toolbar panel-button",
-        openPanels.has(id.current) && "OpenPanelIcon-selected",
+        openPanels.has(uniqueId) && "OpenPanelIcon-selected",
         disabled && "OpenPanelIcon-disabled",
       )}
       title={iconTitle}
-      onClick={() => openPanel(openPanelOptions)}
+      onClick={() => openPanel({ uniqueId, ...openPanelOptions })}
       disabled={disabled}
       data-testid={testId}
     >

package/dist/panel/Panel.tsx

@@ -2,59 +2,21 @@ import "./Panel.scss";
 import "./PanelBlue.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { PanelContext } from "./PanelContext";
-import { PanelInstanceContext, PanelSize } from "./PanelInstanceContext";
-import { PanelPosition, PanelsContext } from "./PanelsContext";
+import { PanelInstanceContext } from "./PanelInstanceContext";
+import { PanelsContext } from "./PanelsContext";
 import { PopoutWindow } from "./PopoutWindow";
 import clsx from "clsx";
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { PropsWithChildren, ReactElement, useContext, useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { Rnd } from "react-rnd";
-import { useConstFunction } from "../common/useConstFunction";
+import { PopinWindow } from "./PopinWIndow";
+import { PanelProps } from "./types/PanelProps";
+import { useConstFunction } from "../common";
 
-export interface PanelProps {
-  title: string;
-  position?: PanelPosition | "tile" | "center";
-  size?: PanelSize;
-  className?: string;
-  children: ReactNode;
-  maxHeight?: number | string;
-  maxWidth?: number | string;
-  minHeight?: number | string;
-  minWidth?: number | string;
-  modal?: boolean;
-  resizeable?: boolean;
-  onClose?: () => void;
-}
-
-export const Panel = ({
-  title,
-  onClose,
-  size = { width: 320, height: 200 },
-  maxHeight,
-  maxWidth,
-  minHeight = 100,
-  minWidth = 100,
-  modal,
-  className,
-  position = modal ? "center" : "tile",
-  resizeable = modal !== true,
-  children,
-}: PanelProps): ReactElement => {
-  const panelRef = useRef<Rnd>(null);
+export const Panel = (props: PanelProps): ReactElement => {
+  const { title, size = { width: 320, height: 200 }, className, children, onClose } = props;
 
-  const { nextStackPosition, dockElements } = useContext(PanelsContext);
-  const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle, dockId, docked } =
-    useContext(PanelInstanceContext);
+  const { dockElements, nextStackPosition } = useContext(PanelsContext);
+  const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
 
   const onCloseConstFn = useConstFunction(onClose ?? (() => {}));
 
@@ -64,60 +26,34 @@ export const Panel = ({
     };
   }, [onCloseConstFn]);
 
-  const [panelPosition, setPanelPosition] = useState(() => {
-    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 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]);
-
-  useEffect(() => {
-    if (!panelPoppedOut && position === "center" && !resizeable) {
-      centerWindow();
-
-      window.addEventListener("resize", centerWindow);
-      return () => window.removeEventListener("resize", centerWindow);
-    }
-    return;
-  }, [centerWindow, panelPoppedOut, position, resizeable]);
-
-  const [panelSize, setPanelSize] = useState(size ?? { width: 320, height: 200 });
-
-  const resizePanel = (newPanelSize: Partial<PanelSize>) => {
-    if (panelPoppedOut) return;
-    const newSize = { ...panelSize, ...newPanelSize };
-    if (newSize.width !== panelSize.width || newSize.height !== panelSize.height) {
-      setPanelSize(newSize);
-    }
-  };
-
   useEffect(() => {
     setTitle(title);
   }, [setTitle, title]);
 
   const dockElement = docked && dockId && dockElements[dockId];
 
+  /**
+   * This needs to be here, otherwise, every time PopinWindow is rendered, nextStackPosition is recalculated.
+   */
+
+  const memoizeNextStackPosition = useMemo(
+    () => {
+      if (props.position === undefined || props.position === "tile") {
+        return nextStackPosition();
+      }
+
+      return { x: 0, y: 0 };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
   return (
-    <PanelContext.Provider value={{ resizePanel, resizeable }}>
+    <>
       {dockElement && dockElement.isConnected ? (
         createPortal(children, dockElement)
       ) : panelPoppedOut ? (
-        <PopoutWindow name={uniqueId} title={title} size={panelSize}>
+        <PopoutWindow name={uniqueId} title={title} size={size}>
           <div
             style={{
               display: "flex",
@@ -131,60 +67,11 @@ export const Panel = ({
           </div>
         </PopoutWindow>
       ) : (
-        <>
-          {modal && (
-            <div
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-                backgroundColor: "rgb(0,0,0,0.1)",
-                zIndex,
-              }}
-            />
-          )}
-          <Rnd
-            ref={panelRef}
-            className={clsx("WindowPanel", className)}
-            dragHandleClassName={"draggable-handle"}
-            maxHeight={maxHeight}
-            maxWidth={maxWidth}
-            minWidth={minWidth}
-            minHeight={minHeight}
-            position={panelPosition}
-            size={panelSize}
-            style={{ zIndex }}
-            disableDragging={!resizeable}
-            enableResizing={resizeable}
-            bounds={bounds ?? document.body}
-            onDragStop={(_evt, data) => {
-              setPanelPosition({ x: data.x, y: data.y });
-            }}
-            onResizeStop={(_evt, _dir, ref, _delta, position) => {
-              setPanelPosition(position);
-              setPanelSize({
-                width: parseInt(ref.style.width),
-                height: parseInt(ref.style.height),
-              });
-            }}
-            onMouseDown={bringPanelToFront}
-          >
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                width: "100%",
-                height: "100%",
-              }}
-            >
-              {children}
-            </div>
-          </Rnd>
-        </>
+        <PopinWindow {...props} nextStackPosition={() => memoizeNextStackPosition}>
+          {children}
+        </PopinWindow>
       )}
-    </PanelContext.Provider>
+    </>
   );
 };
 

package/dist/panel/PanelContext.ts

@@ -1,5 +1,5 @@
-import { PanelSize } from "./PanelInstanceContext";
 import { createContext } from "react";
+import { PanelSize } from "./types";
 
 export interface PanelContextType {
   resizePanel: (size: Partial<PanelSize>) => void;

package/dist/panel/PanelInstanceContext.ts

@@ -1,10 +1,5 @@
 import { createContext } from "react";
 
-export interface PanelSize {
-  width: number;
-  height: number;
-}
-
 export interface PanelInstanceContextType {
   title: string;
   setTitle: (title: string) => void;

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -1,6 +1,7 @@
 import { PanelInstanceContext } from "./PanelInstanceContext";
 import { PanelInstance, PanelsContext } from "./PanelsContext";
 import { ReactElement, ReactNode, useCallback, useContext, useState } from "react";
+import { useRestoreStateFrom } from "./usePanelStateHandler";
 
 /**
  * Provides access to closing/popping panels
@@ -18,7 +19,8 @@ export const PanelInstanceContextProvider = ({
   const [title, setTitle] = useState("");
   const [dockId, setDockId] = useState<string>();
 
-  const [poppedOut, setPoppedOut] = useState(panelInstance.poppedOut);
+  const savedState = useRestoreStateFrom({ uniqueId: panelInstance.uniqueId });
+  const [poppedOut, setPoppedOut] = useState(savedState?.panelPoppedOut ?? panelInstance.poppedOut);
 
   const togglePopOut = useCallback(() => {
     panelInstance.window = null;

package/dist/panel/PanelsContext.tsx

@@ -1,9 +1,6 @@
 import { ReactElement, createContext } from "react";
-
-export interface PanelPosition {
-  x: number;
-  y: number;
-}
+import { PanelStateOptions } from "./types/PanelStateOptions";
+import { PanelPosition } from "./types";
 
 export interface PanelInstance {
   uniqueId: string;
@@ -27,6 +24,7 @@ export interface PanelsContextType {
   nextStackPosition: () => PanelPosition;
   dockElements: Record<string, HTMLDivElement>;
   setDockElement: (id: string, element: HTMLDivElement) => void;
+  panelStateOptions?: PanelStateOptions;
 }
 
 const NoContext = () => {

package/dist/panel/PanelsContextProvider.tsx

@@ -1,12 +1,15 @@
 import { PanelInstanceContextProvider } from "./PanelInstanceContextProvider";
-import { OpenPanelOptions, PanelInstance, PanelPosition, PanelsContext } from "./PanelsContext";
+import { OpenPanelOptions, PanelInstance, PanelsContext } from "./PanelsContext";
 import { castArray, maxBy, sortBy } from "lodash-es";
 import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo, useRef, useState } from "react";
 import { useInterval } from "usehooks-ts";
+import { PanelStateOptions } from "./types/PanelStateOptions";
+import { PanelPosition } from "./types";
 
 export interface PanelsContextProviderProps {
   baseZIndex?: number;
   bounds?: string | Element;
+  panelStateOptions?: PanelStateOptions;
   tilingStart?: PanelPosition;
   tilingOffset?: PanelPosition;
   tilingMax?: PanelPosition;
@@ -16,6 +19,7 @@ export const PanelsContextProvider = ({
   bounds,
   baseZIndex = 500,
   children,
+  panelStateOptions,
   tilingStart = { x: 30, y: 30 },
   tilingOffset = { x: 30, y: 50 },
   tilingMax = { x: 200, y: 300 },
@@ -126,6 +130,7 @@ export const PanelsContextProvider = ({
         nextStackPosition,
         dockElements,
         setDockElement,
+        panelStateOptions,
       }}
     >
       <Fragment key={"panels"}>

package/dist/panel/PopinWIndow.tsx

@@ -0,0 +1,143 @@
+import { Rnd } from "react-rnd";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { PanelInstanceContext } from "./PanelInstanceContext";
+import { PanelProps } from "./types/PanelProps";
+import { PanelPosition, PanelSize } from "./types";
+import { PanelContext } from "./PanelContext";
+import { useRestoreStateFrom, useSaveStateIn } from "./usePanelStateHandler";
+
+export function PopinWindow({
+  children,
+  className,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  modal,
+  nextStackPosition,
+  position = modal ? "center" : "tile",
+  resizeable = modal !== true,
+  size = { height: 200, width: 320 },
+}: PanelProps & { nextStackPosition: () => PanelPosition }): 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]);
+
+  useEffect(() => {
+    if (position === "center" && !resizeable) {
+      centerWindow();
+
+      window.addEventListener("resize", centerWindow);
+      return () => window.removeEventListener("resize", centerWindow);
+    }
+    return;
+  }, [centerWindow, position, resizeable]);
+
+  const resizePanel = (newPanelSize: Partial<PanelSize>) => {
+    const newSize = { ...panelSize, ...newPanelSize };
+    if (newSize.width !== panelSize.width || newSize.height !== panelSize.height) {
+      setPanelSize(newSize);
+    }
+  };
+
+  const saveStateIn = useSaveStateIn({ uniqueId });
+
+  useEffect(() => {
+    saveStateIn({
+      panelPosition,
+      panelSize,
+    });
+  }, [panelPosition, panelSize, saveStateIn]);
+
+  return (
+    <PanelContext.Provider value={{ resizePanel, resizeable }}>
+      {modal && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            backgroundColor: "rgb(0,0,0,0.1)",
+            zIndex,
+          }}
+        />
+      )}
+      <Rnd
+        ref={panelRef}
+        className={clsx("WindowPanel", className)}
+        dragHandleClassName={"draggable-handle"}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        position={panelPosition}
+        size={panelSize}
+        style={{ zIndex }}
+        disableDragging={!resizeable}
+        enableResizing={resizeable}
+        bounds={bounds ?? document.body}
+        onDragStop={(_evt, data) => {
+          setPanelPosition({ x: data.x, y: data.y });
+        }}
+        onResizeStop={(_evt, _dir, ref, _delta, position) => {
+          setPanelPosition(position);
+          setPanelSize({
+            width: parseInt(ref.style.width),
+            height: parseInt(ref.style.height),
+          });
+        }}
+        onMouseDown={bringPanelToFront}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          {children}
+        </div>
+      </Rnd>
+    </PanelContext.Provider>
+  );
+}

package/dist/panel/PopoutWindow.tsx

@@ -5,14 +5,14 @@ import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import { Dispatch, ReactElement, ReactNode, SetStateAction, useContext, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-
-export type FloatingWindowSize = { height: number; width: number };
+import { useRestoreStateFrom, useSaveStateIn } from "./usePanelStateHandler";
+import { PanelPosition, PanelSize } from "./types";
 
 interface PopoutWindowProps {
   name: string;
   title?: string; // The title of the popout window
   children: ReactNode; // what to render inside the window
-  size: FloatingWindowSize;
+  size: PanelSize;
 
   //says if we want to watch for any dynamic style changes
   //only needed when using UI libraries like MUI
@@ -43,6 +43,7 @@ const openExternalWindow = ({
   setHeadElement,
   observeStyleChanges = false,
   className,
+  position,
 }: {
   title: string;
   size: { width: number; height: number };
@@ -50,6 +51,7 @@ const openExternalWindow = ({
   setHeadElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
   observeStyleChanges?: boolean;
   className?: string;
+  position: PanelPosition;
 }): OpenExternalWindowResponse => {
   const response: OpenExternalWindowResponse = { externalWindow: null, onCloseExternalWindow: null };
 
@@ -59,7 +61,7 @@ const openExternalWindow = ({
   // 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=300,top=200`;
+    `width=${size.width},height=${size.height},left=${position.x},top=${position.y}`;
   response.externalWindow = window.open("", makePopoutId(title), features);
 
   if (response.externalWindow) {
@@ -138,17 +140,25 @@ export const PopoutWindow = ({
     }
   }, [title]);
 
+  const savedState = useRestoreStateFrom({ panelPoppedOut: true, uniqueId: name });
+
+  const panelPosition = savedState?.panelPosition ?? { x: 300, y: 200 };
+  const panelSize = savedState?.panelSize ?? size;
+
+  const saveStateIn = useSaveStateIn({ panelPoppedOut: true, uniqueId: name });
+
   // When we create this component, open a new window
   useEffect(
     () => {
       const oew = openExternalWindowFn ?? openExternalWindow;
       const { externalWindow, onCloseExternalWindow } = oew({
         title,
-        size,
+        size: panelSize,
         setContainerElement,
         setHeadElement,
         observeStyleChanges,
         className,
+        position: panelPosition,
       });
 
       if (!externalWindow) return;
@@ -159,6 +169,24 @@ export const PopoutWindow = ({
         externalWindow.close();
       };
 
+      const savePanelState = ({ currentTarget }: Event) => {
+        const extWindow = currentTarget as Window;
+
+        saveStateIn({
+          panelPosition: {
+            x: extWindow.screenX,
+            y: extWindow.screenY,
+          },
+          panelSize: {
+            height: extWindow.innerHeight,
+            width: extWindow.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/index.ts

@@ -1,3 +1,5 @@
+export * from "./types";
+
 export * from "./OpenPanelButton";
 export * from "./OpenPanelIcon";
 export * from "./Panel";

package/dist/panel/types/PanelPosition.ts

@@ -0,0 +1,4 @@
+export interface PanelPosition {
+  x: number;
+  y: number;
+}

package/dist/panel/types/PanelProps.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { PanelPosition } from "./PanelPosition";
+import { PanelSize } from "./PanelSize";
+
+export interface PanelProps {
+  children: ReactNode;
+  className?: string;
+  maxHeight?: number | string;
+  maxWidth?: number | string;
+  minHeight?: number | string;
+  minWidth?: number | string;
+  modal?: boolean;
+  onClose?: () => void;
+  position?: PanelPosition | "tile" | "center";
+  resizeable?: boolean;
+  size?: PanelSize;
+  title: string;
+}

package/dist/panel/types/PanelRestoredState.ts

@@ -0,0 +1,8 @@
+import { PanelPosition } from "./PanelPosition";
+import { PanelSize } from "./PanelSize";
+
+export interface PanelRestoredState {
+  panelPoppedOut: boolean;
+  panelPosition?: PanelPosition;
+  panelSize?: PanelSize;
+}

package/dist/panel/types/PanelSize.ts

@@ -0,0 +1,4 @@
+export interface PanelSize {
+  height: number;
+  width: number;
+}

package/dist/panel/types/PanelState.ts

@@ -0,0 +1,15 @@
+import { PanelPosition } from "./PanelPosition";
+import { PanelSize } from "./PanelSize";
+
+export type PanelMode = "poppedIn" | "poppedOut";
+
+export interface PanelLayout {
+  panelPosition?: PanelPosition;
+  panelSize?: PanelSize;
+}
+
+export interface PanelState {
+  mode: PanelMode;
+  poppedIn?: PanelLayout;
+  poppedOut?: PanelLayout;
+}

package/dist/panel/types/PanelStateOptions.ts

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

package/dist/panel/types/index.ts

@@ -0,0 +1,6 @@
+export * from "./PanelPosition";
+export * from "./PanelProps";
+export * from "./PanelRestoredState";
+export * from "./PanelSize";
+export * from "./PanelState";
+export * from "./PanelStateOptions";

package/dist/panel/usePanelStateHandler.tsx

@@ -0,0 +1,101 @@
+import { useContext, useMemo } from "react";
+import { PanelsContext } from "./PanelsContext";
+import { PanelLayout, PanelMode, PanelRestoredState, PanelState } from "./types";
+
+type HookArgs = {
+  panelPoppedOut?: boolean;
+  uniqueId: string;
+};
+
+export const useRestoreStateFrom = ({ panelPoppedOut, uniqueId }: HookArgs) => {
+  const { panelStateOptions } = useContext(PanelsContext);
+
+  return useMemo((): PanelRestoredState | null | undefined => {
+    if (!panelStateOptions) {
+      return;
+    }
+
+    if (panelStateOptions.saveStateIn === "external") {
+      return panelStateOptions.onRestoreState?.();
+    }
+
+    const uniqueKey = createUniqueKey({
+      saveStateKey: panelStateOptions.saveStateKey,
+      uniqueId,
+    });
+
+    try {
+      const storedState = localStorage.getItem(uniqueKey);
+      if (storedState) {
+        const { mode, ...state } = JSON.parse(storedState) as PanelState;
+
+        const currentMode: PanelMode = panelPoppedOut === undefined ? mode : panelPoppedOut ? "poppedOut" : "poppedIn";
+        const panelLayout = state[currentMode];
+
+        return {
+          panelPoppedOut: currentMode === "poppedOut",
+          ...panelLayout,
+        };
+      }
+    } catch (e) {
+      console.error("Failed to read stored panel state!", e);
+    }
+
+    return null;
+  }, [panelPoppedOut, panelStateOptions, uniqueId]);
+};
+
+export const useSaveStateIn = ({ panelPoppedOut = false, uniqueId }: HookArgs) => {
+  const { panelStateOptions } = useContext(PanelsContext);
+  return (panelLayout: PanelLayout) => {
+    if (!panelStateOptions) {
+      return;
+    }
+
+    const uniqueKey = createUniqueKey({
+      saveStateKey: panelStateOptions.saveStateKey,
+      uniqueId,
+    });
+
+    const mode: PanelMode = panelPoppedOut ? "poppedOut" : "poppedIn";
+
+    if (panelStateOptions.saveStateIn === "external") {
+      panelStateOptions.onSaveState?.({
+        mode,
+        [mode]: panelLayout,
+      });
+      return;
+    }
+
+    const storedState = localStorage.getItem(uniqueKey);
+
+    let panelState: PanelState = {
+      mode,
+      [mode]: panelLayout,
+    };
+
+    if (storedState) {
+      try {
+        panelState = JSON.parse(storedState) as PanelState;
+
+        panelState.mode = mode;
+        panelState[mode] = {
+          ...panelState[mode],
+          ...panelLayout,
+        };
+      } catch (e) {
+        console.error("Failed to read existing panel state!", e);
+      }
+    }
+
+    try {
+      localStorage.setItem(uniqueKey, JSON.stringify(panelState));
+    } catch (e) {
+      console.error("Failed to save panel state!", e);
+    }
+  };
+};
+
+function createUniqueKey({ saveStateKey, uniqueId }: { saveStateKey: string; uniqueId: string }): string {
+  return `panel-${saveStateKey}-${uniqueId}`;
+}

package/package.json

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