@linzjs/windows 4.1.2 → 5.0.0

package/dist/panel/PopoutWindow.tsx

@@ -1,12 +1,13 @@
-import { PanelInstanceContext } from "./PanelInstanceContext";
-import { makePopoutId, popoutWindowDivId } from "./generateId";
-import { copyStyleSheets, observeStyleSheetChanges } from "./handleStyleSheetsChanges";
-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";
-import { useRestoreStateFrom, useSaveStateIn } from "./usePanelStateHandler";
-import { PanelPosition, PanelSize } from "./types";
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { Dispatch, ReactElement, ReactNode, SetStateAction, useContext, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import { makePopoutId, popoutWindowDivId } from './generateId';
+import { copyStyleSheets, observeStyleSheetChanges } from './handleStyleSheetsChanges';
+import { PanelInstanceContext } from './PanelInstanceContext';
+import { PanelPosition, PanelSize } from './types';
+import { useRestoreStateFrom, useSaveStateIn } from './usePanelStateHandler';
 
 interface PopoutWindowProps {
   name: string;
@@ -62,14 +63,14 @@ const openExternalWindow = ({
   const features =
     `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,` +
     `width=${size.width},height=${size.height},left=${position.x},top=${position.y}`;
-  response.externalWindow = window.open("", makePopoutId(title), features);
+  response.externalWindow = window.open('', makePopoutId(title), features);
 
   if (response.externalWindow) {
     const { externalWindow } = response;
 
     // Reset the default body style applied by the browser
-    externalWindow.document.body.style.margin = "0";
-    externalWindow.document.body.style.padding = "0";
+    externalWindow.document.body.style.margin = '0';
+    externalWindow.document.body.style.padding = '0';
 
     // Remove any existing body HTML from this window
     const existingBodyMountElement = externalWindow.document.body?.firstChild;
@@ -77,7 +78,7 @@ const openExternalWindow = ({
       externalWindow.document.body.removeChild(existingBodyMountElement);
     }
     // Create a new HTML element to hang our rendering off
-    const newMountElement = externalWindow.document.createElement("div");
+    const newMountElement = externalWindow.document.createElement('div');
     newMountElement.className = `PopoutWindowContainer ${className}`;
     setContainerElement(newMountElement);
     externalWindow.document.body.appendChild(newMountElement);
@@ -88,7 +89,7 @@ const openExternalWindow = ({
       externalWindow.document.head.removeChild(existingHeadMountElement);
     }
     // and an HTML element to hang our copied styles off
-    const newHeadMountElement = externalWindow.document.createElement("div");
+    const newHeadMountElement = externalWindow.document.createElement('div');
     externalWindow.document.head.appendChild(newHeadMountElement);
     setHeadElement(newHeadMountElement);
 
@@ -128,18 +129,9 @@ export const PopoutWindow = ({
 }: PopoutWindowProps): ReactElement | null => {
   const { setPanelWindow } = useContext(PanelInstanceContext);
 
-  const extWindow = useRef<Window | null>(null);
-
   const [containerElement, setContainerElement] = useState<HTMLElement>();
   const [headElement, setHeadElement] = useState<HTMLElement>();
 
-  // We only want to update the title when it changes
-  useEffect(() => {
-    if (extWindow.current) {
-      extWindow.current.document.title = title;
-    }
-  }, [title]);
-
   const savedState = useRestoreStateFrom({ panelPoppedOut: true, uniqueId: name });
 
   const panelPosition = savedState?.panelPosition ?? { x: 300, y: 200 };
@@ -184,11 +176,11 @@ export const PopoutWindow = ({
         });
       };
 
-      externalWindow.addEventListener("beforeunload", savePanelState);
-      externalWindow.addEventListener("resize", savePanelState);
+      externalWindow.addEventListener('beforeunload', savePanelState);
+      externalWindow.addEventListener('resize', savePanelState);
 
       // When the main window closes or reloads, close the popout
-      window.addEventListener("beforeunload", closeExternalWindow, { once: true });
+      window.addEventListener('beforeunload', closeExternalWindow, { once: true });
 
       return () => {
         onCloseExternalWindow?.();

package/dist/panel/generateId.ts

@@ -5,18 +5,18 @@
 export const makePopoutId = (str: string): string =>
   str
     .toLowerCase()
-    .replaceAll(/[^a-z0-9-]/g, "-")
-    .replaceAll("0", "-zero-")
-    .replaceAll("1", "-one-")
-    .replaceAll("2", "-two-")
-    .replaceAll("3", "-three-")
-    .replaceAll("4", "-four-")
-    .replaceAll("5", "-five-")
-    .replaceAll("6", "-six-")
-    .replaceAll("7", "-seven-")
-    .replaceAll("8", "-eight-")
-    .replaceAll("9", "-nine-")
-    .replaceAll(/-+/g, "-")
+    .replaceAll(/[^a-z0-9-]/g, '-')
+    .replaceAll('0', '-zero-')
+    .replaceAll('1', '-one-')
+    .replaceAll('2', '-two-')
+    .replaceAll('3', '-three-')
+    .replaceAll('4', '-four-')
+    .replaceAll('5', '-five-')
+    .replaceAll('6', '-six-')
+    .replaceAll('7', '-seven-')
+    .replaceAll('8', '-eight-')
+    .replaceAll('9', '-nine-')
+    .replaceAll(/-+/g, '-')
     .toLowerCase();
 
 export const popoutWindowDivId = (windowTitle: string): string => `popoutWindow-${makePopoutId(windowTitle)}`;

package/dist/panel/handleStyleSheetsChanges.ts

@@ -1,4 +1,4 @@
-import { throttle } from "lodash-es";
+import { throttle } from 'lodash-es';
 
 // Copy the app's styles into the new window
 export const copyStyleSheets = (newHeadMountElement: HTMLDivElement) => {
@@ -6,14 +6,14 @@ export const copyStyleSheets = (newHeadMountElement: HTMLDivElement) => {
 
   stylesheets.forEach((stylesheet) => {
     if (stylesheet.href) {
-      const newStyleElement = document.createElement("link");
-      newStyleElement.rel = "stylesheet";
+      const newStyleElement = document.createElement('link');
+      newStyleElement.rel = 'stylesheet';
       newStyleElement.href = stylesheet.href;
       newHeadMountElement.appendChild(newStyleElement);
     } else {
-      const css = stylesheet as CSSStyleSheet;
+      const css = stylesheet;
       if (css && css.cssRules && css.cssRules.length > 0) {
-        const newStyleElement = document.createElement("style");
+        const newStyleElement = document.createElement('style');
         Array.from(css.cssRules).forEach((rule) => {
           newStyleElement.appendChild(document.createTextNode(rule.cssText));
         });
@@ -30,7 +30,7 @@ export const copyStyleSheets = (newHeadMountElement: HTMLDivElement) => {
  * @param newHeadMountElement
  */
 export const observeStyleSheetChanges = (newHeadMountElement: HTMLDivElement) => {
-  const targetNode = document.querySelector("head");
+  const targetNode = document.querySelector('head');
 
   if (!targetNode) {
     return null;
@@ -46,7 +46,7 @@ export const observeStyleSheetChanges = (newHeadMountElement: HTMLDivElement) =>
   // Callback function to execute when mutations are observed
   const callback: MutationCallback = function (mutationList) {
     for (const mutation of mutationList) {
-      if (mutation.type === "childList") {
+      if (mutation.type === 'childList') {
         // console.log("A child node has been added or removed.", mutation);
         //naive way up updating style sheets
         //the observer tells us what has been added and removed, but syncing the changes with the

package/dist/panel/index.ts

@@ -1,13 +1,12 @@
-export * from "./types";
-
-export * from "./OpenPanelButton";
-export * from "./OpenPanelIcon";
-export * from "./Panel";
-export * from "./PanelContext";
-export * from "./PanelDock";
-export * from "./PanelHeader";
-export * from "./PanelHeaderButton";
-export * from "./PanelInstanceContext";
-export * from "./PanelInstanceContextProvider";
-export * from "./PanelsContext";
-export * from "./PanelsContextProvider";
+export * from './OpenPanelButton';
+export * from './OpenPanelIcon';
+export * from './Panel';
+export * from './PanelContext';
+export * from './PanelDock';
+export * from './PanelHeader';
+export * from './PanelHeaderButton';
+export * from './PanelInstanceContext';
+export * from './PanelInstanceContextProvider';
+export * from './PanelsContext';
+export * from './PanelsContextProvider';
+export * from './types';

package/dist/panel/types/PanelProps.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from "react";
-import { PanelPosition } from "./PanelPosition";
-import { PanelSize } from "./PanelSize";
+import { ReactNode } from 'react';
+
+import { PanelPosition } from './PanelPosition';
+import { PanelSize } from './PanelSize';
 
 export interface PanelProps {
   children: ReactNode;
@@ -11,7 +12,7 @@ export interface PanelProps {
   minWidth?: number | string;
   modal?: boolean;
   onClose?: () => void;
-  position?: PanelPosition | "tile" | "center";
+  position?: PanelPosition | 'tile' | 'center';
   resizeable?: boolean;
   size?: PanelSize;
   title: string;

package/dist/panel/types/PanelRestoredState.ts

@@ -1,5 +1,5 @@
-import { PanelPosition } from "./PanelPosition";
-import { PanelSize } from "./PanelSize";
+import { PanelPosition } from './PanelPosition';
+import { PanelSize } from './PanelSize';
 
 export interface PanelRestoredState {
   panelPoppedOut: boolean;

package/dist/panel/types/PanelState.ts

@@ -1,7 +1,7 @@
-import { PanelPosition } from "./PanelPosition";
-import { PanelSize } from "./PanelSize";
+import { PanelPosition } from './PanelPosition';
+import { PanelSize } from './PanelSize';
 
-export type PanelMode = "poppedIn" | "poppedOut";
+export type PanelMode = 'poppedIn' | 'poppedOut';
 
 export interface PanelLayout {
   panelPosition?: PanelPosition;

package/dist/panel/types/PanelStateOptions.ts

@@ -1,7 +1,7 @@
-import { PanelRestoredState } from "./PanelRestoredState";
-import { PanelState } from "./PanelState";
+import { PanelRestoredState } from './PanelRestoredState';
+import { PanelState } from './PanelState';
 
-export type SaveStateInOption = "external" | "localStorage";
+export type SaveStateInOption = 'external' | 'localStorage';
 
 export type PanelStateOptions = {
   onRestoreState?: () => PanelRestoredState;

package/dist/panel/types/index.ts

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

package/dist/panel/usePanelStateHandler.tsx

@@ -1,6 +1,7 @@
-import { useContext, useMemo } from "react";
-import { PanelsContext } from "./PanelsContext";
-import { PanelLayout, PanelMode, PanelRestoredState, PanelState } from "./types";
+import { useContext, useMemo } from 'react';
+
+import { PanelsContext } from './PanelsContext';
+import { PanelLayout, PanelMode, PanelRestoredState, PanelState } from './types';
 
 type HookArgs = {
   panelPoppedOut?: boolean;
@@ -15,7 +16,7 @@ export const useRestoreStateFrom = ({ panelPoppedOut, uniqueId }: HookArgs) => {
       return;
     }
 
-    if (panelStateOptions.saveStateIn === "external") {
+    if (panelStateOptions.saveStateIn === 'external') {
       return panelStateOptions.onRestoreState?.();
     }
 
@@ -29,16 +30,16 @@ export const useRestoreStateFrom = ({ panelPoppedOut, uniqueId }: HookArgs) => {
       if (storedState) {
         const { mode, ...state } = JSON.parse(storedState) as PanelState;
 
-        const currentMode: PanelMode = panelPoppedOut === undefined ? mode : panelPoppedOut ? "poppedOut" : "poppedIn";
+        const currentMode: PanelMode = panelPoppedOut === undefined ? mode : panelPoppedOut ? 'poppedOut' : 'poppedIn';
         const panelLayout = state[currentMode];
 
         return {
-          panelPoppedOut: currentMode === "poppedOut",
+          panelPoppedOut: currentMode === 'poppedOut',
           ...panelLayout,
         };
       }
     } catch (e) {
-      console.error("Failed to read stored panel state!", e);
+      console.error('Failed to read stored panel state!', e);
     }
 
     return null;
@@ -57,9 +58,9 @@ export const useSaveStateIn = ({ panelPoppedOut = false, uniqueId }: HookArgs) =
       uniqueId,
     });
 
-    const mode: PanelMode = panelPoppedOut ? "poppedOut" : "poppedIn";
+    const mode: PanelMode = panelPoppedOut ? 'poppedOut' : 'poppedIn';
 
-    if (panelStateOptions.saveStateIn === "external") {
+    if (panelStateOptions.saveStateIn === 'external') {
       panelStateOptions.onSaveState?.({
         mode,
         [mode]: panelLayout,
@@ -84,14 +85,14 @@ export const useSaveStateIn = ({ panelPoppedOut = false, uniqueId }: HookArgs) =
           ...panelLayout,
         };
       } catch (e) {
-        console.error("Failed to read existing panel state!", 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);
+      console.error('Failed to save panel state!', e);
     }
   };
 };

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "4.1.2",
+  "version": "5.0.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
@@ -32,107 +32,88 @@
   },
   "scripts": {
     "build": "run-s clean stylelint lint lint-circular-deps bundle",
-    "yalc": "run-s clean bundle && yalc publish",
+    "yalc": "run-s clean bundle && yalc push",
     "clean": "rimraf dist && mkdirp ./dist",
     "bundle": "tsc --noEmit && rollup -c",
-    "test": "jest",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
-    "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
+    "lint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
+    "lint:fix": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
     "lint-circular-deps": "npx madge --circular --extensions ts,tsx ./",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "upgrade": "npx ncu -i --format group"
   },
   "dependencies": {
-    "@emotion/cache": "^11.13.5",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@types/uuid": "^10.0.0",
     "lodash-es": ">=4",
-    "react-rnd": "^10.4.13",
+    "react-rnd": "^10.4.14",
     "usehooks-ts": "^3.1.0",
-    "uuid": "^11.0.4"
+    "uuid": "^11.0.5"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@linzjs/lui": "^22.0.1",
-    "@linzjs/step-ag-grid": "^22.3.0",
-    "@rollup/plugin-commonjs": "^28.0.1",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@linzjs/lui": "^22.4.2",
+    "@linzjs/step-ag-grid": "^24.0.0",
+    "@linzjs/style": "^5.4.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-mdx-gfm": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/jest": "^29.5.14",
+    "@storybook/addon-docs": "^8.5.2",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-links": "^8.5.2",
+    "@storybook/addon-mdx-gfm": "^8.5.2",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/test": "^8.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.12.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@vitest/ui": "^3.0.4",
     "ag-grid-community": "^32.3.3",
     "ag-grid-react": "^32.3.3",
-    "esbuild": "^0.24.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.9.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^6.3.0",
-    "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-expect-message": "^1.1.3",
+    "babel-preset-react-app": "^10.0.1",
+    "eslint-plugin-react": "^7.37.4",
+    "jsdom": "^26.0.0",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.1",
     "react": "^18.3.1",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.28.0",
+    "rollup": "^4.32.1",
     "rollup-plugin-copy": "^3.5.0",
-    "sass": "^1.83.0",
+    "sass": "^1.83.4",
     "sass-loader": "^16.0.4",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.4.7",
+    "storybook": "^8.5.2",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.11.0",
+    "stylelint": "^16.14.1",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-standard": "^36.0.1",
-    "stylelint-prettier": "5.0.2",
-    "stylelint-scss": "6.10.0",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.11"
+    "stylelint-prettier": "5.0.3",
+    "stylelint-scss": "6.10.1",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.11",
+    "vite-plugin-html": "^3.2.2",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.4"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.28.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "@rollup/rollup-linux-x64-gnu": "^4.32.1"
   },
   "browserslist": {
     "production": [