@linzjs/windows 5.5.0 → 5.6.0

package/dist/panel/OpenPanelIcon.scss

@@ -1,72 +1,72 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
-
-.lui-button.lui-button-toolbar {
-  border-color: transparent;
-  padding: 4px;
-  line-height: 12px;
-  margin: 2px;
-}
-
-.OpenPanelIcon-selected {
-  cursor: pointer;
-  color: lui.$white !important;
-  background-color: lui.$blue-75 !important;
-  box-shadow: inset 0 2px 4px rgb(41 92 130);
-
-  fill: lui.$white !important;
-
-  svg * {
-    fill: lui.$white !important;
-  }
-
-  svg * {
-    color: lui.$white !important;
-    fill: lui.$white !important;
-  }
-}
-
-.OpenPanelIcon-disabled {
-  background-color: lui.$white !important;
-
-  fill: lui.$grey-20 !important;
-
-  svg * {
-    fill: lui.$grey-20 !important;
-  }
-}
-
-%OpenPanelIcon-Group {
-  background-color: white;
-  border-radius: 4px;
-  padding: 4px;
-  align-items: center;
-  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
-  display: inline-flex;
-}
-
-.OpenPanelIcon-verticalGroup {
-  @extend %OpenPanelIcon-Group;
-  flex-direction: column;
-
-  .OpenPanelIcon-separator {
-    margin: 6px 0;
-    height: 2px;
-    width: 100%;
-    background-color: lui.$grey-10;
-  }
-}
-
-.OpenPanelIcon-horizontalGroup {
-  @extend %OpenPanelIcon-Group;
-  flex-direction: row;
-
-  .OpenPanelIcon-separator {
-    height: 100%;
-    margin-left: 6px;
-    margin-right: 6px;
-    margin-top: -3px;
-    padding-bottom: 8px;
-    width: 2px;
-    background-color: lui.$grey-10;
-  }
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.lui-button.lui-button-toolbar {
+  border-color: transparent;
+  padding: 4px;
+  line-height: 12px;
+  margin: 2px;
+}
+
+.OpenPanelIcon-selected {
+  cursor: pointer;
+  color: lui.$white !important;
+  background-color: lui.$blue-75 !important;
+  box-shadow: inset 0 2px 4px rgb(41 92 130);
+
+  fill: lui.$white !important;
+
+  svg * {
+    fill: lui.$white !important;
+  }
+
+  svg * {
+    color: lui.$white !important;
+    fill: lui.$white !important;
+  }
+}
+
+.OpenPanelIcon-disabled {
+  background-color: lui.$white !important;
+
+  fill: lui.$grey-20 !important;
+
+  svg * {
+    fill: lui.$grey-20 !important;
+  }
+}
+
+%OpenPanelIcon-Group {
+  background-color: white;
+  border-radius: 4px;
+  padding: 4px;
+  align-items: center;
+  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
+  display: inline-flex;
+}
+
+.OpenPanelIcon-verticalGroup {
+  @extend %OpenPanelIcon-Group;
+  flex-direction: column;
+
+  .OpenPanelIcon-separator {
+    margin: 6px 0;
+    height: 2px;
+    width: 100%;
+    background-color: lui.$grey-10;
+  }
+}
+
+.OpenPanelIcon-horizontalGroup {
+  @extend %OpenPanelIcon-Group;
+  flex-direction: row;
+
+  .OpenPanelIcon-separator {
+    height: 100%;
+    margin-left: 6px;
+    margin-right: 6px;
+    margin-top: -3px;
+    padding-bottom: 8px;
+    width: 2px;
+    background-color: lui.$grey-10;
+  }
 }

package/dist/panel/Panel.scss

@@ -1,123 +1,123 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
-
-.panelDock > .panelDock-content:not(:empty) + .panelDock-empty {
-  display: none;
-}
-
-.WindowPanel-children {
-  display: flex;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.WindowPanel-header {
-  height: 48px;
-  line-height: 48px;
-  user-select: none;
-  color: lui.$charcoal;
-  padding: 0 16px;
-  display: flex;
-  overflow: hidden;
-  justify-content: space-between;
-  border-bottom: 2px lui.$lily solid;
-  font-size: 1em;
-  font-weight: 600;
-  flex-direction: row;
-  align-items: center;
-
-  .LuiTabsGroup {
-    margin-top: 4px;
-    line-height: 16px;
-
-    .LuiTab {
-      min-width: 0;
-      padding-left: 8px;
-      padding-right: 8px;
-      padding-bottom: 11px;
-    }
-
-    .LuiTab:not(.LuiTab--active):focus {
-      padding-top: 8px;
-      padding-bottom: 8px;
-    }
-
-    .LuiTab--active {
-      padding-left: 7px;
-      padding-right: 7px;
-    }
-
-    .LuiTab--active::after, .LuiTab--active:focus::after {
-      padding: 0;
-    }
-  }
-
-  .lui-button + .lui-button, a.lui-button + .lui-button {
-    margin-left: 0 !important;
-  }
-}
-
-.WindowPanel {
-  box-shadow: 0 1px 6px 0 #00000026, 0 6px 10px 0 #00000040;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  border-radius: 9px;
-
-  .WindowPanel-header {
-    border-radius: 9px 9px 0 0;
-  }
-}
-
-%WindowPanel-divider {
-  border-left: 2px solid lui.$lily;
-  background-color: lui.$lily;
-  width: 0;
-  height: 19px;
-}
-
-.WindowPanel-divider-left {
-  @extend %WindowPanel-divider;
-  margin-right: 15px;
-  margin-left: 19px;
-}
-
-.WindowPanel-divider-right {
-  @extend %WindowPanel-divider;
-  margin-right: 8px;
-  margin-left: 8px;
-}
-
-.WindowPanel-buttons {
-  display: flex;
-  align-items: center;
-
-  a.lui-button,
-  button.lui-button {
-    display: flex;
-    align-items: center;
-
-    span.LuiIcon {
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-}
-
-.WindowPanel-header-title {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.WindowPanel-header-title-icon {
-  fill: lui.$fuscous !important;
-  margin-right: 8px;
-}
-
-.WindowPanel-content {
-  flex: 1;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-}
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.panelDock > .panelDock-content:not(:empty) + .panelDock-empty {
+  display: none;
+}
+
+.WindowPanel-children {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.WindowPanel-header {
+  height: 48px;
+  line-height: 48px;
+  user-select: none;
+  color: lui.$charcoal;
+  padding: 0 16px;
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+  border-bottom: 2px lui.$lily solid;
+  font-size: 1em;
+  font-weight: 600;
+  flex-direction: row;
+  align-items: center;
+
+  .LuiTabsGroup {
+    margin-top: 4px;
+    line-height: 16px;
+
+    .LuiTab {
+      min-width: 0;
+      padding-left: 8px;
+      padding-right: 8px;
+      padding-bottom: 11px;
+    }
+
+    .LuiTab:not(.LuiTab--active):focus {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .LuiTab--active {
+      padding-left: 7px;
+      padding-right: 7px;
+    }
+
+    .LuiTab--active::after, .LuiTab--active:focus::after {
+      padding: 0;
+    }
+  }
+
+  .lui-button + .lui-button, a.lui-button + .lui-button {
+    margin-left: 0 !important;
+  }
+}
+
+.WindowPanel {
+  box-shadow: 0 1px 6px 0 #00000026, 0 6px 10px 0 #00000040;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border-radius: 9px;
+
+  .WindowPanel-header {
+    border-radius: 9px 9px 0 0;
+  }
+}
+
+%WindowPanel-divider {
+  border-left: 2px solid lui.$lily;
+  background-color: lui.$lily;
+  width: 0;
+  height: 19px;
+}
+
+.WindowPanel-divider-left {
+  @extend %WindowPanel-divider;
+  margin-right: 15px;
+  margin-left: 19px;
+}
+
+.WindowPanel-divider-right {
+  @extend %WindowPanel-divider;
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
+.WindowPanel-buttons {
+  display: flex;
+  align-items: center;
+
+  a.lui-button,
+  button.lui-button {
+    display: flex;
+    align-items: center;
+
+    span.LuiIcon {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
+.WindowPanel-header-title {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.WindowPanel-header-title-icon {
+  fill: lui.$fuscous !important;
+  margin-right: 8px;
+}
+
+.WindowPanel-content {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}

package/dist/panel/Panel.tsx

@@ -3,7 +3,8 @@ 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 { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useConstFunction } from '../common';
@@ -14,14 +15,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 +50,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 +69,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 +77,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 +123,7 @@ export const Panel = (props: PanelProps): ReactElement => {
           setPanelPosition={setPanelPosition}
           panelSize={panelSize}
           setPanelSize={setPanelSize}
+          setInitialPanelSize={setInitialPanelSize}
         >
           {children}
         </PopinWindow>

package/dist/panel/PanelBlue.scss

@@ -1,18 +1,18 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
-
-.WindowPanel-blue.WindowPanel-header, .WindowPanel-blue .WindowPanel-header {
-  background: linear-gradient(270deg,#007198,#00425b 100%);
-  color: #fff;
-
-  svg * {
-    fill: #fff;
-  }
-}
-
-.WindowPanel-blue .LuiTab {
-  color: lui.$iceberg
-}
-
-.WindowPanel-blue .LuiTab.LuiTab--active {
-  color: lui.$downy
-}
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.WindowPanel-blue.WindowPanel-header, .WindowPanel-blue .WindowPanel-header {
+  background: linear-gradient(270deg,#007198,#00425b 100%);
+  color: #fff;
+
+  svg * {
+    fill: #fff;
+  }
+}
+
+.WindowPanel-blue .LuiTab {
+  color: lui.$iceberg
+}
+
+.WindowPanel-blue .LuiTab.LuiTab--active {
+  color: lui.$downy
+}

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Dispatch, useCallback, useContext, useEffect, useRef } from 'react';
+import { Dispatch, ReactNode, useCallback, useContext, useEffect, useRef } from 'react';
 import { Rnd } from 'react-rnd';
 
 import { PanelContext } from './PanelContext';
@@ -23,12 +23,14 @@ export function PopinWindow({
   setPanelPosition,
   panelSize,
   setPanelSize,
+  setInitialPanelSize,
 }: PanelProps & {
   panelPosition: PanelPosition;
   setPanelPosition: Dispatch<PanelPosition>;
   panelSize: PanelSize;
   setPanelSize: Dispatch<PanelSize>;
-}): JSX.Element {
+  setInitialPanelSize: Dispatch<PanelSize>;
+}): ReactNode {
   const panelRef = useRef<Rnd>(null);
 
   const { bounds, zIndex, bringPanelToFront, uniqueId } = useContext(PanelInstanceContext);
@@ -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.0",
+  "version": "5.6.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",