@linzjs/windows 4.1.2 → 5.0.0

package/dist/panel/OpenPanelIcon.scss

@@ -1,5 +1,4 @@
-@use "node_modules/@linzjs/lui/dist/scss/Core" as lui;
-@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .lui-button.lui-button-toolbar {
   border-color: transparent;
@@ -53,7 +52,7 @@
     margin: 6px 0;
     height: 2px;
     width: 100%;
-    background-color: colours.$grey-10;
+    background-color: lui.$grey-10;
   }
 }
 
@@ -68,6 +67,6 @@
     margin-top: -3px;
     padding-bottom: 8px;
     width: 2px;
-    background-color: colours.$grey-10;
+    background-color: lui.$grey-10;
   }
 }

package/dist/panel/OpenPanelIcon.tsx

@@ -1,21 +1,21 @@
-import "./OpenPanelIcon.scss";
+import './OpenPanelIcon.scss';
 
-import { OpenPanelOptions, PanelsContext } from "./PanelsContext";
-import clsx from "clsx";
-import { ReactNode, useContext } from "react";
+import { LuiIcon } from '@linzjs/lui';
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import clsx from 'clsx';
+import { ReactNode, useContext } from 'react';
 
-import { LuiIcon } from "@linzjs/lui";
-import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { OpenPanelOptions, PanelsContext } from './PanelsContext';
 
 export const ButtonIconHorizontalGroup = ({ children }: { children: ReactNode }) => (
   <div>
-    <div className={"OpenPanelIcon-horizontalGroup"}>{children}</div>
+    <div className={'OpenPanelIcon-horizontalGroup'}>{children}</div>
   </div>
 );
 
 export const ButtonIconVerticalGroup = ({ children }: { children: ReactNode }) => (
   <div>
-    <div className={"OpenPanelIcon-verticalGroup"}>{children}</div>
+    <div className={'OpenPanelIcon-verticalGroup'}>{children}</div>
   </div>
 );
 
@@ -45,16 +45,16 @@ export const OpenPanelIcon = ({
       type="button"
       className={clsx(
         className,
-        "lui-button lui-button-secondary lui-button-toolbar panel-button",
-        openPanels.has(uniqueId) && "OpenPanelIcon-selected",
-        disabled && "OpenPanelIcon-disabled",
+        'lui-button lui-button-secondary lui-button-toolbar panel-button',
+        openPanels.has(uniqueId) && 'OpenPanelIcon-selected',
+        disabled && 'OpenPanelIcon-disabled',
       )}
       title={iconTitle}
       onClick={() => openPanel({ uniqueId, ...openPanelOptions })}
       disabled={disabled}
       data-testid={testId}
     >
-      <LuiIcon name={icon} alt={iconTitle} size={"md"} />
+      <LuiIcon name={icon} alt={iconTitle} size={'md'} />
     </button>
   );
 };

package/dist/panel/Panel.scss

@@ -1,4 +1,4 @@
-@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .panelDock > .panelDock-content:not(:empty) + .panelDock-empty {
   display: none;
@@ -14,12 +14,12 @@
 .WindowPanel-header {
   height: 48px;
   line-height: 48px;
-  color: colours.$charcoal;
+  color: lui.$charcoal;
   padding: 0 16px;
   display: flex;
   overflow: hidden;
   justify-content: space-between;
-  border-bottom: 2px colours.$lily solid;
+  border-bottom: 2px lui.$lily solid;
   font-size: 1em;
   font-weight: 600;
   flex-direction: row;
@@ -69,8 +69,8 @@
 }
 
 %WindowPanel-divider {
-  border-left: 2px solid colours.$lily;
-  background-color: colours.$lily;
+  border-left: 2px solid lui.$lily;
+  background-color: lui.$lily;
   width: 0;
   height: 19px;
 }
@@ -110,7 +110,7 @@
 }
 
 .WindowPanel-header-title-icon {
-  fill: colours.$fuscous !important;
+  fill: lui.$fuscous !important;
   margin-right: 8px;
 }
 

package/dist/panel/Panel.tsx

@@ -1,18 +1,20 @@
-import "./Panel.scss";
-import "./PanelBlue.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import './Panel.scss';
+import './PanelBlue.scss';
+import '@linzjs/lui/dist/scss/base.scss';
 
-import { PanelInstanceContext } from "./PanelInstanceContext";
-import { PanelsContext } from "./PanelsContext";
-import { PopoutWindow } from "./PopoutWindow";
-import clsx from "clsx";
-import { PropsWithChildren, ReactElement, useContext, useEffect, useMemo } from "react";
-import { createPortal } from "react-dom";
-import { PopinWindow } from "./PopinWIndow";
-import { PanelProps } from "./types/PanelProps";
-import { useConstFunction } from "../common";
+import clsx from 'clsx';
+import { PropsWithChildren, ReactElement, useContext, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useConstFunction } from '../common';
+import { PanelInstanceContext } from './PanelInstanceContext';
+import { PanelsContext } from './PanelsContext';
+import { PopinWindow } from './PopinWIndow';
+import { PopoutWindow } from './PopoutWindow';
+import { PanelProps } from './types/PanelProps';
 
 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);
@@ -30,6 +32,16 @@ export const Panel = (props: PanelProps): ReactElement => {
     setTitle(title);
   }, [setTitle, title]);
 
+  // We only want to update the title when it changes
+  useEffect(() => {
+    if (panelRef.current) {
+      const doc = panelRef.current.ownerDocument;
+      if (doc) {
+        doc.title = title;
+      }
+    }
+  }, [title]);
+
   const dockElement = docked && dockId && dockElements[dockId];
 
   /**
@@ -38,7 +50,7 @@ export const Panel = (props: PanelProps): ReactElement => {
 
   const memoizeNextStackPosition = useMemo(
     () => {
-      if (props.position === undefined || props.position === "tile") {
+      if (props.position === undefined || props.position === 'tile') {
         return nextStackPosition();
       }
 
@@ -55,11 +67,12 @@ export const Panel = (props: PanelProps): ReactElement => {
       ) : panelPoppedOut ? (
         <PopoutWindow name={uniqueId} title={title} size={size}>
           <div
+            ref={panelRef}
             style={{
-              display: "flex",
-              flexDirection: "column",
-              width: "100%",
-              height: "100%",
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              height: '100%',
             }}
             className={className}
           >

package/dist/panel/PanelBlue.scss

@@ -1,4 +1,4 @@
-@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .WindowPanel-blue.WindowPanel-header, .WindowPanel-blue .WindowPanel-header {
   background: linear-gradient(270deg,#007198,#00425b 100%);
@@ -10,9 +10,9 @@
 }
 
 .WindowPanel-blue .LuiTab {
-  color: colours.$iceberg
+  color: lui.$iceberg
 }
 
 .WindowPanel-blue .LuiTab.LuiTab--active {
-  color: colours.$downy
+  color: lui.$downy
 }

package/dist/panel/PanelContext.ts

@@ -1,5 +1,6 @@
-import { createContext } from "react";
-import { PanelSize } from "./types";
+import { createContext } from 'react';
+
+import { PanelSize } from './types';
 
 export interface PanelContextType {
   resizePanel: (size: Partial<PanelSize>) => void;
@@ -7,7 +8,7 @@ export interface PanelContextType {
 }
 
 const NoContextError = () => {
-  console.error("Missing PanelContext Provider");
+  console.error('Missing PanelContext Provider');
 };
 
 /**

package/dist/panel/PanelDock.tsx

@@ -1,5 +1,6 @@
-import { PanelsContext } from "./PanelsContext";
-import { PropsWithChildren, ReactElement, useContext } from "react";
+import { PropsWithChildren, ReactElement, useContext } from 'react';
+
+import { PanelsContext } from './PanelsContext';
 
 export interface PanelDockProps {
   id: string;
@@ -11,9 +12,9 @@ export const PanelDock = ({ id, children }: PropsWithChildren<PanelDockProps>):
   const setElement = (element: HTMLDivElement) => setDockElement(id, element);
 
   return (
-    <div className={"panelDock"}>
-      <div ref={setElement} className={"panelDock-content"} />
-      <div className={"panelDock-empty"}>{children}</div>
+    <div className={'panelDock'}>
+      <div ref={setElement} className={'panelDock-content'} />
+      <div className={'panelDock-empty'}>{children}</div>
     </div>
   );
 };

package/dist/panel/PanelHeader.tsx

@@ -1,11 +1,11 @@
-import { PanelHeaderButton } from "./PanelHeaderButton";
-import { PanelInstanceContext } from "./PanelInstanceContext";
-import { ReactNode, useContext, useState } from "react";
+import { LuiIcon } from '@linzjs/lui';
+import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
+import clsx from 'clsx';
+import { ReactNode, useContext, useState } from 'react';
 
-import { LuiIcon } from "@linzjs/lui";
-import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
-import { PanelContext } from "./PanelContext";
-import clsx from "clsx";
+import { PanelContext } from './PanelContext';
+import { PanelHeaderButton } from './PanelHeaderButton';
+import { PanelInstanceContext } from './PanelInstanceContext';
 
 export interface PanelHeaderProps {
   icon?: LuiIconName;
@@ -33,49 +33,49 @@ export const PanelHeader = ({
   const { resizeable } = useContext(PanelContext);
   const { panelClose, panelTogglePopout, panelPoppedOut, title, dock, undock, docked } =
     useContext(PanelInstanceContext);
-  const [cursor, setCursor] = useState<"grab" | "grabbing">("grab");
+  const [cursor, setCursor] = useState<'grab' | 'grabbing'>('grab');
 
   const headerMouseDown = () => {
-    !panelPoppedOut && setCursor("grabbing");
+    !panelPoppedOut && setCursor('grabbing');
   };
 
   return (
     <div
-      className={clsx("WindowPanel-header", resizeable && "draggable-handle")}
+      className={clsx('WindowPanel-header', resizeable && 'draggable-handle')}
       onMouseDown={headerMouseDown}
-      onMouseUp={() => !panelPoppedOut && setCursor("grab")}
+      onMouseUp={() => !panelPoppedOut && setCursor('grab')}
       style={resizeable ? { cursor } : {}}
     >
-      <div className={"WindowPanel-header-title"}>
-        {icon && <LuiIcon name={icon} alt={"icon"} size={"md"} className={"WindowPanel-header-title-icon"} />}
+      <div className={'WindowPanel-header-title'}>
+        {icon && <LuiIcon name={icon} alt={'icon'} size={'md'} className={'WindowPanel-header-title-icon'} />}
         {title}
       </div>
-      {extraLeft && <div className={"WindowPanel-divider-left"} />}
-      <div className={"WindowPanel-children"}>{extraLeft}</div>
-      <div className={"WindowPanel-buttons"}>
+      {extraLeft && <div className={'WindowPanel-divider-left'} />}
+      <div className={'WindowPanel-children'}>{extraLeft}</div>
+      <div className={'WindowPanel-buttons'}>
         {extraRight}
         {(helpUrl || onHelpClick) && (
-          <PanelHeaderButton aria-label={"Help"} href={helpUrl} onClick={onHelpClick} icon={"ic_help_outline"} />
+          <PanelHeaderButton aria-label={'Help'} href={helpUrl} onClick={onHelpClick} icon={'ic_help_outline'} />
         )}
       </div>
-      {(dockTo || !disablePopout || !disableClose) && <div className={"WindowPanel-divider-right"} />}
-      <div className={"WindowPanel-buttons"}>
-        {onDockClick && <PanelHeaderButton aria-label={"Dock"} onClick={() => onDockClick()} icon={"ic_left_col"} />}
+      {(dockTo || !disablePopout || !disableClose) && <div className={'WindowPanel-divider-right'} />}
+      <div className={'WindowPanel-buttons'}>
+        {onDockClick && <PanelHeaderButton aria-label={'Dock'} onClick={() => onDockClick()} icon={'ic_left_col'} />}
         {!onDockClick &&
           dockTo &&
           (docked ? (
-            <PanelHeaderButton aria-label={"Undock"} onClick={undock} icon={"ic_close_list"} />
+            <PanelHeaderButton aria-label={'Undock'} onClick={undock} icon={'ic_close_list'} />
           ) : (
-            <PanelHeaderButton aria-label={"Dock"} onClick={() => dock(dockTo)} icon={"ic_left_col"} />
+            <PanelHeaderButton aria-label={'Dock'} onClick={() => dock(dockTo)} icon={'ic_left_col'} />
           ))}
         {!disablePopout && (
           <PanelHeaderButton
-            aria-label={panelPoppedOut ? "Pop-in" : "Pop-out"}
+            aria-label={panelPoppedOut ? 'Pop-in' : 'Pop-out'}
             onClick={panelTogglePopout}
-            icon={panelPoppedOut ? "ic_pop_back" : "ic_launch_new window_open"}
+            icon={panelPoppedOut ? 'ic_pop_back' : 'ic_launch_new window_open'}
           />
         )}
-        {!disableClose && <PanelHeaderButton aria-label={"Close"} onClick={panelClose} icon={"ic_clear"} />}
+        {!disableClose && <PanelHeaderButton aria-label={'Close'} onClick={panelClose} icon={'ic_clear'} />}
       </div>
     </div>
   );

package/dist/panel/PanelHeaderButton.tsx

@@ -1,18 +1,18 @@
-import { LuiButton, LuiIcon } from "@linzjs/lui";
-import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
+import { LuiButton, LuiIcon } from '@linzjs/lui';
+import { LuiIconName } from '@linzjs/lui/dist/assets/svg-content';
 
 export interface PanelHeaderButtonProps {
-  "aria-label": string;
+  'aria-label': string;
   href?: string;
   icon: LuiIconName;
   onClick?: () => void;
 }
 
-export const PanelHeaderButton = ({ "aria-label": ariaLabel, href, icon, onClick }: PanelHeaderButtonProps) => (
+export const PanelHeaderButton = ({ 'aria-label': ariaLabel, href, icon, onClick }: PanelHeaderButtonProps) => (
   <LuiButton
-    level={"plain-text"}
-    className={"lui-button-icon-only"}
-    size={"sm"}
+    level={'plain-text'}
+    className={'lui-button-icon-only'}
+    size={'sm'}
     href={href}
     onClick={onClick}
     openInNewTab={!!href}
@@ -20,6 +20,6 @@ export const PanelHeaderButton = ({ "aria-label": ariaLabel, href, icon, onClick
       onTouchStart: onClick,
     }}
   >
-    <LuiIcon name={icon} alt={ariaLabel} size={"md"} />
+    <LuiIcon name={icon} alt={ariaLabel} size={'md'} />
   </LuiButton>
 );

package/dist/panel/PanelInstanceContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export interface PanelInstanceContextType {
   title: string;
@@ -19,16 +19,16 @@ export interface PanelInstanceContextType {
 }
 
 const NoContextError = () => {
-  console.error("Missing PanelInstanceContext Provider");
+  console.error('Missing PanelInstanceContext Provider');
 };
 
 /**
  * Provides access to closing/popping panels
  */
 export const PanelInstanceContext = createContext<PanelInstanceContextType>({
-  title: "Missing PanelInstanceContext Provider: title",
-  uniqueId: "Missing PanelInstanceContext Provider: uniqueId",
-  panelName: "Missing PanelInstanceContext Provider: panelName",
+  title: 'Missing PanelInstanceContext Provider: title',
+  uniqueId: 'Missing PanelInstanceContext Provider: uniqueId',
+  panelName: 'Missing PanelInstanceContext Provider: panelName',
   bounds: document.body,
   setTitle: NoContextError,
   panelTogglePopout: NoContextError,

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -1,7 +1,8 @@
-import { PanelInstanceContext } from "./PanelInstanceContext";
-import { PanelInstance, PanelsContext } from "./PanelsContext";
-import { ReactElement, ReactNode, useCallback, useContext, useState } from "react";
-import { useRestoreStateFrom } from "./usePanelStateHandler";
+import { ReactElement, ReactNode, useCallback, useContext, useState } from 'react';
+
+import { PanelInstanceContext } from './PanelInstanceContext';
+import { PanelInstance, PanelsContext } from './PanelsContext';
+import { useRestoreStateFrom } from './usePanelStateHandler';
 
 /**
  * Provides access to closing/popping panels
@@ -16,7 +17,7 @@ export const PanelInstanceContextProvider = ({
   children: ReactNode;
 }): ReactElement => {
   const { closePanel, bringPanelToFront, dockElements } = useContext(PanelsContext);
-  const [title, setTitle] = useState("");
+  const [title, setTitle] = useState('');
   const [dockId, setDockId] = useState<string>();
 
   const savedState = useRestoreStateFrom({ uniqueId: panelInstance.uniqueId });

package/dist/panel/PanelsContext.tsx

@@ -1,6 +1,7 @@
-import { ReactElement, createContext } from "react";
-import { PanelStateOptions } from "./types/PanelStateOptions";
-import { PanelPosition } from "./types";
+import { createContext, ReactElement } from 'react';
+
+import { PanelPosition } from './types';
+import { PanelStateOptions } from './types/PanelStateOptions';
 
 export interface PanelInstance {
   uniqueId: string;
@@ -28,7 +29,7 @@ export interface PanelsContextType {
 }
 
 const NoContext = () => {
-  console.error("Missing PanelContext Provider");
+  console.error('Missing PanelContext Provider');
 };
 
 export const PanelsContext = createContext<PanelsContextType>({

package/dist/panel/PanelsContextProvider.tsx

@@ -1,11 +1,12 @@
-import { PanelInstanceContextProvider } from "./PanelInstanceContextProvider";
-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";
-import { v4 } from "uuid";
+import { castArray, maxBy, sortBy } from 'lodash-es';
+import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo, useRef, useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+import { v4 } from 'uuid';
+
+import { PanelInstanceContextProvider } from './PanelInstanceContextProvider';
+import { OpenPanelOptions, PanelInstance, PanelsContext } from './PanelsContext';
+import { PanelPosition } from './types';
+import { PanelStateOptions } from './types/PanelStateOptions';
 
 export interface PanelsContextProviderProps {
   baseZIndex?: number;
@@ -46,7 +47,7 @@ export const PanelsContextProvider = ({
       if (panelInstance.window) {
         panelInstance.window.focus();
       } else {
-        const maxZIndexPanelInstance = maxBy(panelInstances, "zIndex");
+        const maxZIndexPanelInstance = maxBy(panelInstances, 'zIndex');
         // Prevent unnecessary state updates
         if (maxZIndexPanelInstance === panelInstance) return;
         sortBy(panelInstances, (pi) => (panelInstance === pi ? 32768 : pi.zIndex)).forEach(
@@ -134,14 +135,14 @@ export const PanelsContextProvider = ({
         panelStateOptions,
       }}
     >
-      <Fragment key={"panels"}>
+      <Fragment key={'panels'}>
         {panelInstances.map((panelInstance) => (
           <PanelInstanceContextProvider key={panelInstance.uniqueId} panelInstance={panelInstance} bounds={bounds}>
             {panelInstance.componentInstance}
           </PanelInstanceContextProvider>
         ))}
       </Fragment>
-      <Fragment key={"children"}>{children}</Fragment>
+      <Fragment key={'children'}>{children}</Fragment>
     </PanelsContext.Provider>
   );
 };

package/dist/panel/PopinWIndow.tsx

@@ -1,11 +1,12 @@
-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";
+import clsx from 'clsx';
+import { useCallback, useContext, useEffect, useRef, useState } 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';
 
 export function PopinWindow({
   children,
@@ -16,7 +17,7 @@ export function PopinWindow({
   minWidth,
   modal,
   nextStackPosition,
-  position = modal ? "center" : "tile",
+  position = modal ? 'center' : 'tile',
   resizeable = modal !== true,
   size = { height: 200, width: 320 },
 }: PanelProps & { nextStackPosition: () => PanelPosition }): JSX.Element {
@@ -32,12 +33,12 @@ export function PopinWindow({
     }
 
     switch (position) {
-      case "center":
+      case 'center':
         return {
           x: Math.max((window.innerWidth - size.width) / 2, 0),
           y: Math.max((window.innerHeight - size.height) / 2, 0),
         };
-      case "tile":
+      case 'tile':
         return nextStackPosition();
       default:
         return position ?? nextStackPosition();
@@ -61,11 +62,11 @@ export function PopinWindow({
   }, [size]);
 
   useEffect(() => {
-    if (position === "center" && !resizeable) {
+    if (position === 'center' && !resizeable) {
       centerWindow();
 
-      window.addEventListener("resize", centerWindow);
-      return () => window.removeEventListener("resize", centerWindow);
+      window.addEventListener('resize', centerWindow);
+      return () => window.removeEventListener('resize', centerWindow);
     }
     return;
   }, [centerWindow, position, resizeable]);
@@ -91,20 +92,20 @@ export function PopinWindow({
       {modal && (
         <div
           style={{
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
-            backgroundColor: "rgb(0,0,0,0.1)",
+            backgroundColor: 'rgb(0,0,0,0.1)',
             zIndex,
           }}
         />
       )}
       <Rnd
         ref={panelRef}
-        className={clsx("WindowPanel", className)}
-        dragHandleClassName={"draggable-handle"}
+        className={clsx('WindowPanel', className)}
+        dragHandleClassName={'draggable-handle'}
         maxHeight={maxHeight}
         maxWidth={maxWidth}
         minWidth={minWidth}
@@ -129,10 +130,10 @@ export function PopinWindow({
       >
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            width: "100%",
-            height: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
           }}
         >
           {children}