@linzjs/windows 7.2.0 → 8.0.0

package/dist/panel/Panel.tsx

@@ -3,7 +3,7 @@ import './PanelBlue.scss';
 import '@linzjs/lui/dist/scss/base.scss';
 
 import clsx from 'clsx';
-import { NumberSize } from 're-resizable';
+import { isEqual, pick } from 'lodash-es';
 import {
   forwardRef,
   PropsWithChildren,
@@ -21,21 +21,25 @@ import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelsContext } from './PanelsContext';
 import { PopinWindow } from './PopinWIndow';
 import { PopoutWindow } from './PopoutWindow';
-import { PanelPosition } from './types';
+import { PanelPosition } from './types/PanelPosition';
 import { PanelProps } from './types/PanelProps';
+import { PanelSize } from './types/PanelSize';
 import { useRestoreStateFrom } from './usePanelStateHandler';
 
 const defaultInitialSize = { width: 320, height: 200 };
 
 export const Panel = (props: PanelProps): ReactElement => {
   const panelRef = useRef<HTMLDivElement>(null);
-  const { title, size = defaultInitialSize, className, ignoreSavedState, children } = props;
+  const { title, size = defaultInitialSize, className, dynamicBounds, children } = props;
 
   const { dockElements, nextStackPosition } = useContext(PanelsContext);
   const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
 
   const savedState = useRestoreStateFrom({ uniqueId, panelPoppedOut: false });
 
+  const lastPanelHeightRef = useRef(panelRef.current?.clientHeight);
+  lastPanelHeightRef.current = panelRef.current?.clientHeight ?? lastPanelHeightRef.current ?? 400;
+
   useEffect(() => {
     setTitle(title);
   }, [setTitle, title]);
@@ -51,63 +55,52 @@ export const Panel = (props: PanelProps): ReactElement => {
   }, [title]);
 
   const [panelPosition, setPanelPosition] = useState((): PanelPosition => {
-    const pos = props.position;
-    if (!ignoreSavedState && savedState?.panelPosition) {
-      return savedState.panelPosition;
+    if (dynamicBounds) {
+      const result = dynamicBounds();
+      if (result) {
+        return pick(result, ['x', 'y']);
+      }
     }
 
-    // PanelPosition
-    if (pos && typeof pos === 'object' && 'selector' in pos) {
-      const b = document.querySelector(pos.selector)?.getBoundingClientRect();
-      if (b) {
-        return { x: b[pos.edgeX ?? 'left'] + (pos.offsetX ?? 0), y: b[pos.edgeY ?? 'bottom'] + (pos.offsetY ?? 0) };
-      }
+    const pos = props.position;
+    if (savedState?.panelPosition) {
+      return savedState.panelPosition;
     }
 
     if (pos === 'center') {
+      const height = size.height === 'auto' ? 400 : size.height;
       return {
         x: Math.max((window.innerWidth - size.width) / 2, 0),
-        y: Math.max((window.innerHeight - size.height) / 2, 0),
+        y: Math.max((window.innerHeight - height) / 2, 0),
       };
     }
 
     if (pos != null && pos !== 'tile') {
-      return pos as PanelPosition;
+      return pos;
     }
 
     return nextStackPosition();
   });
 
-  useInterval(
-    () => {
-      const pos = props.position;
-      if (pos && typeof pos === 'object' && 'selector' in pos) {
-        const b = document.querySelector(pos.selector)?.getBoundingClientRect();
-        if (b) {
-          const newPos = {
-            x: b[pos.edgeX ?? 'left'] + (pos.offsetX ?? 0),
-            y: b[pos.edgeY ?? 'bottom'] + (pos.offsetY ?? 0),
-          };
-          if (newPos.x !== panelPosition.x || newPos.y !== panelPosition.y) {
-            setPanelPosition(newPos);
-          }
-        }
-      }
-    },
-    props.position && typeof props.position === 'object' && 'selector' in props.position ? 250 : null,
-  );
-
-  const cropSizeToWindow = useCallback((size: NumberSize) => {
+  const cropSizeToWindow = useCallback((size: PanelSize): PanelSize => {
     return typeof window !== 'undefined' && window.innerWidth && window.innerHeight
       ? {
           width: Math.min(window.document.body?.clientWidth ?? window.innerWidth, size.width),
-          height: Math.min(window.document.body?.clientHeight ?? window.innerHeight, size.height),
+          height:
+            size.height === 'auto'
+              ? 'auto'
+              : Math.min(window.document.body?.clientHeight ?? window.innerHeight, size.height),
         }
       : size;
   }, []);
 
-  const [panelSize, _setPanelSize] = useState<NumberSize>(() => {
-    if (!ignoreSavedState && savedState?.panelSize) {
+  const [panelSize, _setPanelSize] = useState<PanelSize>(() => {
+    const result = dynamicBounds?.();
+    if (result) {
+      return pick(result, ['width', 'height']);
+    }
+
+    if (savedState?.panelSize) {
       return cropSizeToWindow(savedState.panelSize);
     }
 
@@ -115,14 +108,14 @@ export const Panel = (props: PanelProps): ReactElement => {
   });
 
   const setPanelSize = useCallback(
-    (size: NumberSize) => {
+    (size: PanelSize) => {
       _setPanelSize(cropSizeToWindow(size));
     },
     [cropSizeToWindow],
   );
 
   const setInitialPanelSize = useCallback(
-    (size: NumberSize) => {
+    (size: PanelSize) => {
       // If panel was already sized from state, then don't resize
       if (savedState?.panelSize) {
         return;
@@ -133,8 +126,32 @@ export const Panel = (props: PanelProps): ReactElement => {
     [savedState?.panelSize, setPanelSize],
   );
 
-  const dockElement = docked && dockId && dockElements[dockId];
+  const dynamicResize = useCallback(() => {
+    const bounds = dynamicBounds?.();
+    if (!bounds) {
+      return;
+    }
+    const newPosition = pick(bounds, ['x', 'y']);
+    if (!isEqual(newPosition, panelPosition)) {
+      setPanelPosition(newPosition);
+    }
+    const newSize = pick(bounds, ['width', 'height']);
+    if (!isEqual(newSize, panelSize)) {
+      setPanelSize(newSize);
+    }
+  }, [dynamicBounds, panelPosition, panelSize, setPanelSize]);
 
+  useEffect(() => {
+    window.addEventListener('resize', dynamicResize);
+
+    return () => {
+      window.removeEventListener('resize', dynamicResize);
+    };
+  }, [dynamicResize]);
+
+  useInterval(dynamicResize, dynamicBounds ? 250 : null);
+
+  const dockElement = docked && dockId && dockElements[dockId];
   return (
     <>
       {dockElement && dockElement.isConnected ? (
@@ -143,9 +160,12 @@ export const Panel = (props: PanelProps): ReactElement => {
         <PopoutWindow
           name={uniqueId}
           title={title}
-          size={size}
+          size={{ width: size.width, height: lastPanelHeightRef.current }}
           popInPanelPosition={panelPosition}
-          popInPanelSize={panelSize}
+          popInPanelSize={{
+            width: panelSize.width,
+            height: panelSize.height === 'auto' ? lastPanelHeightRef.current : panelSize.height,
+          }}
         >
           <div
             ref={panelRef}

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -37,25 +37,27 @@ export const PanelInstanceContextProvider = ({
 
   const undock = useCallback(() => setDockId(undefined), []);
 
+  const uniqueId = panelInstance.uniqueId;
+
   return (
     <PanelInstanceContext.Provider
       value={{
         title,
         setTitle,
-        uniqueId: panelInstance.uniqueId,
+        uniqueId,
         bounds,
-        panelName: panelInstance.uniqueId,
+        panelName: uniqueId,
         panelClose: () => {
           panelInstance.window?.close();
           panelInstance.window = null;
-          closePanel(panelInstance.uniqueId);
+          closePanel(uniqueId);
         },
         panelTogglePopout: togglePopOut,
         panelPoppedOut: poppedOut,
         setPanelWindow: (w: Window) => {
           panelInstance.window = w;
         },
-        bringPanelToFront: () => bringPanelToFront(panelInstance),
+        bringPanelToFront: () => bringPanelToFront(uniqueId),
         zIndex: panelInstance.zIndex,
         docked: !poppedOut && !!dockId && !!dockElements[dockId],
         dockId,

package/dist/panel/PanelsContext.tsx

@@ -24,7 +24,7 @@ export interface PanelsContextType {
   // returns unique id of panel that was created/or arleady found, otherwise null on error.
   openPanel: (args: OpenPanelOptions) => string | null;
   closePanel: (uniqueId: string) => void;
-  bringPanelToFront: (panelInstance: PanelInstance) => void;
+  bringPanelToFront: (panelUniqueId: string) => void;
   nextStackPosition: () => PanelPosition;
   dockElements: Record<string, HTMLDivElement>;
   setDockElement: (id: string, element: HTMLDivElement) => void;

package/dist/panel/PanelsContextProvider.tsx

@@ -50,7 +50,12 @@ export const PanelsContextProvider = ({
   );
 
   const bringPanelToFront = useCallback(
-    (panelInstance: PanelInstance) => {
+    (panelUniqueId: string) => {
+      const panelInstance = panelInstances.find((panelInstance) => panelInstance.uniqueId === panelUniqueId);
+      if (!panelInstance) {
+        console.warn(`bringPanelToFront cannot find panel with uniqueId: ${panelUniqueId}`);
+        return;
+      }
       if (panelInstance.window) {
         panelInstance.window.focus();
       } else {
@@ -74,7 +79,7 @@ export const PanelsContextProvider = ({
           if (existingPanelInstance.window) {
             existingPanelInstance.window?.focus();
           } else {
-            bringPanelToFront(existingPanelInstance);
+            bringPanelToFront(uniqueId);
           }
           return existingPanelInstance.uniqueId;
         }

package/dist/panel/PopinWIndow.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { pick } from 'lodash-es';
 import { Dispatch, ReactElement, useCallback, useContext, useEffect, useRef } from 'react';
 import { Rnd } from 'react-rnd';
 
@@ -37,9 +38,14 @@ export function PopinWindow({
 
   const centerWindow = useCallback(() => {
     const b = panelRef.current?.getSelfElement()?.getBoundingClientRect();
+    let height = b?.height ?? size.height;
+    // You can't auto height a centered panel
+    if (height === 'auto') {
+      height = 400;
+    }
     setPanelPosition({
       x: Math.max((window.innerWidth - (b?.width ?? size.width)) / 2, 0),
-      y: Math.max((window.innerHeight - (b?.height ?? size.height)) / 2, 0),
+      y: Math.max((window.innerHeight - height) / 2, 0),
     });
   }, [setPanelPosition, size.height, size.width]);
 
@@ -106,7 +112,7 @@ export function PopinWindow({
         minWidth={minWidth}
         minHeight={minHeight}
         position={panelPosition}
-        size={panelSize}
+        size={panelSize.height === 'auto' ? (pick(panelSize, 'width') as PanelSize) : panelSize}
         style={{ zIndex }}
         disableDragging={!resizeable}
         enableResizing={resizeable}

package/dist/panel/PopoutWindow.tsx

@@ -6,15 +6,15 @@ import ReactDOM from 'react-dom';
 import { makePopoutId } from './generateId';
 import { openExternalWindow, OpenExternalWindowResponse } from './openExternalWindow';
 import { PanelInstanceContext } from './PanelInstanceContext';
-import { PanelPosition, PanelSize } from './types';
+import { PanelPosition, PanelSizeExact } from './types';
 import { useRestoreStateFrom, useSaveStateIn } from './usePanelStateHandler';
 
 interface _PopoutWindowProps {
   name: string;
   title?: string; // The title of the popout window
-  size: PanelSize;
+  size: PanelSizeExact;
   popInPanelPosition: PanelPosition;
-  popInPanelSize: PanelSize;
+  popInPanelSize: PanelSizeExact;
 
   //says if we want to watch for any dynamic style changes
   //only needed when using UI libraries like MUI
@@ -62,7 +62,7 @@ export const PopoutWindow = ({
       const oew = openExternalWindowFn ?? openExternalWindow;
       const { externalWindow, onCloseExternalWindow } = oew({
         title,
-        size: panelSize,
+        size: panelSize.height === 'auto' ? { ...panelSize, height: 400 } : (panelSize as PanelSizeExact),
         setContainerElement,
         setHeadElement,
         observeStyleChanges,

package/dist/panel/openExternalWindow.ts

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 
 import { makePopoutId, popoutWindowDivId } from './generateId';
 import { copyStyleSheets, observeStyleSheetChanges } from './handleStyleSheetsChanges';
-import { PanelPosition } from './types';
+import { PanelPosition, PanelSizeExact } from './types';
 
 export type OpenExternalWindowResponse = {
   externalWindow: Window | null;
@@ -26,7 +26,7 @@ export const openExternalWindow = ({
   position,
 }: {
   title: string;
-  size: { width: number; height: number };
+  size: PanelSizeExact;
   setContainerElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
   setHeadElement: Dispatch<SetStateAction<HTMLElement | undefined>>;
   observeStyleChanges?: boolean;

package/dist/panel/types/PanelProps.ts

@@ -3,13 +3,7 @@ import { PropsWithChildren } from 'react';
 import { PanelPosition } from './PanelPosition';
 import { PanelSize } from './PanelSize';
 
-export interface PanelRelativePositon {
-  selector: string;
-  edgeX?: 'left' | 'right';
-  edgeY?: 'top' | 'bottom';
-  offsetX?: number;
-  offsetY?: number;
-}
+export type PanelBounds = PanelPosition & PanelSize;
 
 interface _PanelProps {
   className?: string;
@@ -18,11 +12,11 @@ interface _PanelProps {
   minHeight?: number | string;
   minWidth?: number | string;
   modal?: boolean;
-  position?: PanelPosition | PanelRelativePositon | 'tile' | 'center';
+  dynamicBounds?: () => PanelBounds | null;
+  position?: PanelPosition | 'tile' | 'center';
   resizeable?: boolean;
   size?: PanelSize;
   title: string;
-  ignoreSavedState?: boolean;
 }
 
 export type PanelProps = PropsWithChildren<_PanelProps>;

package/dist/panel/types/PanelSize.ts

@@ -1,4 +1,9 @@
-export interface PanelSize {
+export interface PanelSizeExact {
   height: number;
   width: number;
 }
+
+export interface PanelSize {
+  height: number | 'auto';
+  width: number;
+}

package/package.json

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