@linzjs/windows 5.5.1 → 5.7.0

package/dist/panel/Panel.tsx

@@ -3,7 +3,17 @@ import './PanelBlue.scss';
 import '@linzjs/lui/dist/scss/base.scss';
 
 import clsx from 'clsx';
-import { PropsWithChildren, ReactElement, useContext, useEffect, useRef, useState } from 'react';
+import { NumberSize } from 're-resizable';
+import {
+  forwardRef,
+  PropsWithChildren,
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
 import { useConstFunction } from '../common';
@@ -14,14 +24,20 @@ import { PopoutWindow } from './PopoutWindow';
 import { PanelProps } from './types/PanelProps';
 import { useRestoreStateFrom } from './usePanelStateHandler';
 
+const defaultInitialSize = { width: 320, height: 200 };
+const nullOpFunction = () => {};
+
 export const Panel = (props: PanelProps): ReactElement => {
   const panelRef = useRef<HTMLDivElement>(null);
-  const { title, size = { width: 320, height: 200 }, className, children, onClose } = props;
+  const { title, size = defaultInitialSize, className, children, onClose } = props;
 
-  const { dockElements } = useContext(PanelsContext);
+  const { dockElements, nextStackPosition } = useContext(PanelsContext);
   const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
 
-  const onCloseConstFn = useConstFunction(onClose ?? (() => {}));
+  const savedState = useRestoreStateFrom({ uniqueId, panelPoppedOut: false });
+
+  // The function has to be const as the panel must no re-render as that would cause popout windows to close
+  const onCloseConstFn = useConstFunction(onClose ?? nullOpFunction);
 
   useEffect(() => {
     return () => {
@@ -43,10 +59,6 @@ export const Panel = (props: PanelProps): ReactElement => {
     }
   }, [title]);
 
-  const { nextStackPosition } = useContext(PanelsContext);
-
-  const savedState = useRestoreStateFrom({ uniqueId, panelPoppedOut: false });
-
   const [panelPosition, setPanelPosition] = useState(() => {
     if (savedState?.panelPosition) {
       return savedState.panelPosition;
@@ -66,7 +78,7 @@ export const Panel = (props: PanelProps): ReactElement => {
     return nextStackPosition();
   });
 
-  const [panelSize, setPanelSize] = useState(() => {
+  const [panelSize, setPanelSize] = useState<NumberSize>(() => {
     if (savedState?.panelSize) {
       return savedState.panelSize;
     }
@@ -74,6 +86,18 @@ export const Panel = (props: PanelProps): ReactElement => {
     return size ?? { width: 320, height: 200 };
   });
 
+  const setInitialPanelSize = useCallback(
+    (size: NumberSize) => {
+      // If panel was already sized from state, then don't resize
+      if (savedState?.panelSize) {
+        return;
+      }
+
+      setPanelSize(size);
+    },
+    [savedState?.panelSize],
+  );
+
   const dockElement = docked && dockId && dockElements[dockId];
 
   return (
@@ -108,6 +132,7 @@ export const Panel = (props: PanelProps): ReactElement => {
           setPanelPosition={setPanelPosition}
           panelSize={panelSize}
           setPanelSize={setPanelSize}
+          setInitialPanelSize={setInitialPanelSize}
         >
           {children}
         </PopinWindow>
@@ -120,6 +145,13 @@ export interface PanelContentProps {
   className?: string | undefined;
 }
 
-export const PanelContent = ({ children, className }: PropsWithChildren<PanelContentProps>) => (
-  <div className={clsx(`WindowPanel-content`, className)}>{children}</div>
-);
+export const PanelContent = forwardRef<HTMLDivElement, PropsWithChildren<PanelContentProps>>(function PanelContentFr(
+  { children, className },
+  ref,
+) {
+  return (
+    <div className={clsx(`WindowPanel-content`, className)} ref={ref}>
+      {children}
+    </div>
+  );
+});

package/dist/panel/PanelContext.ts

@@ -4,6 +4,7 @@ import { PanelSize } from './types';
 
 export interface PanelContextType {
   resizePanel: (size: Partial<PanelSize>) => void;
+  initialResizePanel: (size: Partial<PanelSize>) => void;
   resizeable: boolean;
 }
 
@@ -16,5 +17,6 @@ const NoContextError = () => {
  */
 export const PanelContext = createContext<PanelContextType>({
   resizePanel: NoContextError,
+  initialResizePanel: NoContextError,
   resizeable: true,
 });

package/dist/panel/PopinWIndow.tsx

@@ -23,11 +23,13 @@ export function PopinWindow({
   setPanelPosition,
   panelSize,
   setPanelSize,
+  setInitialPanelSize,
 }: PanelProps & {
   panelPosition: PanelPosition;
   setPanelPosition: Dispatch<PanelPosition>;
   panelSize: PanelSize;
   setPanelSize: Dispatch<PanelSize>;
+  setInitialPanelSize: Dispatch<PanelSize>;
 }): ReactNode {
   const panelRef = useRef<Rnd>(null);
 
@@ -51,12 +53,25 @@ export function PopinWindow({
     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 resizePanel = useCallback(
+    (newPanelSize: Partial<PanelSize>) => {
+      const newSize = { ...panelSize, ...newPanelSize };
+      if (newSize.width !== panelSize.width || newSize.height !== panelSize.height) {
+        setPanelSize(newSize);
+      }
+    },
+    [panelSize, setPanelSize],
+  );
+
+  const initialResizePanel = useCallback(
+    (newPanelSize: Partial<PanelSize>) => {
+      const newSize = { ...panelSize, ...newPanelSize };
+      if (newSize.width !== panelSize.width || newSize.height !== panelSize.height) {
+        setInitialPanelSize(newSize);
+      }
+    },
+    [panelSize, setInitialPanelSize],
+  );
 
   const saveStateIn = useSaveStateIn({ uniqueId });
 
@@ -68,7 +83,7 @@ export function PopinWindow({
   }, [panelPosition, panelSize, saveStateIn]);
 
   return (
-    <PanelContext.Provider value={{ resizePanel, resizeable }}>
+    <PanelContext.Provider value={{ resizePanel, initialResizePanel, resizeable }}>
       {modal && (
         <div
           style={{

package/package.json

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