@linzjs/windows 5.6.0 → 6.0.0

package/README.md

@@ -15,7 +15,11 @@ based boilerplate / inline-components.
 
 So you can simply do this in your react-app:
 ```
-const result = await showModal(TestModal)
+const result = await showModal(TestModal, { props... })
+
+<button onClick={() => openPanel({ componentFn: () => <Panel.../>, onClose=onClose)}>
+    Open panel
+</button>
 ```
 
 ## Features

package/dist/panel/Panel.tsx

@@ -4,10 +4,18 @@ import '@linzjs/lui/dist/scss/base.scss';
 
 import clsx from 'clsx';
 import { NumberSize } from 're-resizable';
-import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  PropsWithChildren,
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
-import { useConstFunction } from '../common';
 import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelsContext } from './PanelsContext';
 import { PopinWindow } from './PopinWIndow';
@@ -16,26 +24,16 @@ 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 = defaultInitialSize, className, children, onClose } = props;
+  const { title, size = defaultInitialSize, className, children } = props;
 
   const { dockElements, nextStackPosition } = useContext(PanelsContext);
   const { panelPoppedOut, uniqueId, setTitle, dockId, docked } = useContext(PanelInstanceContext);
 
   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 () => {
-      onCloseConstFn?.();
-    };
-  }, [onCloseConstFn]);
-
   useEffect(() => {
     setTitle(title);
   }, [setTitle, title]);
@@ -136,6 +134,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/PanelsContext.tsx

@@ -9,12 +9,14 @@ export interface PanelInstance {
   zIndex: number;
   poppedOut: boolean;
   window: Window | null;
+  onClose?: () => void;
 }
 
 export interface OpenPanelOptions {
   uniqueId?: string;
   componentFn: () => ReactElement;
   poppedOut?: boolean;
+  onClose?: () => void;
 }
 
 export interface PanelsContextType {

package/dist/panel/PanelsContextProvider.tsx

@@ -1,4 +1,4 @@
-import { castArray, maxBy, sortBy } from 'lodash-es';
+import { castArray, isEmpty, maxBy, partition, sortBy } from 'lodash-es';
 import React, { Fragment, PropsWithChildren, ReactElement, useCallback, useMemo, useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 import { v4 } from 'uuid';
@@ -67,7 +67,7 @@ export const PanelsContextProvider = ({
   );
 
   const openPanel = useCallback(
-    ({ componentFn, poppedOut = false, uniqueId = v4() }: OpenPanelOptions): void => {
+    ({ componentFn, poppedOut = false, uniqueId = v4(), onClose }: OpenPanelOptions): void => {
       try {
         const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
         if (existingPanelInstance) {
@@ -88,6 +88,7 @@ export const PanelsContextProvider = ({
             zIndex: baseZIndex + panelInstances.length,
             poppedOut,
             window: null,
+            onClose,
           },
         ]);
       } catch (e) {
@@ -98,10 +99,17 @@ export const PanelsContextProvider = ({
   );
 
   const closePanel = useCallback(
-    (panelInstance: PanelInstance | PanelInstance[]) => {
-      const panelNames = castArray(panelInstance).map((pi) => pi.uniqueId);
-      const newPanelInstances = panelInstances.filter((pi) => !panelNames.includes(pi.uniqueId));
-      if (panelInstances.length !== newPanelInstances.length) setPanelInstances(newPanelInstances);
+    (closePanelInstance: PanelInstance | PanelInstance[]) => {
+      const panelNames = castArray(closePanelInstance).map((pi) => pi.uniqueId);
+      const [closedPanelInstances, stillOpenPanelInstances] = partition(panelInstances, (pi) =>
+        panelNames.includes(pi.uniqueId),
+      );
+      if (!isEmpty(closedPanelInstances)) {
+        closedPanelInstances.forEach(({ onClose }) => {
+          onClose?.();
+        });
+        setPanelInstances(stillOpenPanelInstances);
+      }
     },
     [panelInstances],
   );

package/dist/panel/types/PanelProps.ts

@@ -11,7 +11,6 @@ export interface PanelProps {
   minHeight?: number | string;
   minWidth?: number | string;
   modal?: boolean;
-  onClose?: () => void;
   position?: PanelPosition | 'tile' | 'center';
   resizeable?: boolean;
   size?: PanelSize;

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "5.6.0",
+  "version": "6.0.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
@@ -52,65 +52,65 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "11.14.1",
-    "@types/uuid": "^10.0.0",
+    "@types/uuid": "^11.0.0",
     "lodash-es": ">=4",
     "react-rnd": "^10.5.2",
     "usehooks-ts": "^3.1.1",
-    "uuid": "^11.1.0"
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
-    "@linzjs/lui": "^23.11.1",
+    "@linzjs/lui": "^23.14.2",
     "@linzjs/step-ag-grid": "^28.5.1",
     "@linzjs/style": "^5.4.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/addon-links": "^9.1.4",
-    "@storybook/react-vite": "^9.1.4",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.34",
-    "@types/react": "^18.3.23",
+    "@types/node": "^22.18.11",
+    "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "@vitest/ui": "^3.2.4",
-    "ag-grid-community": "^34.1.2",
-    "ag-grid-react": "^34.1.2",
+    "ag-grid-community": "^34.2.0",
+    "ag-grid-react": "^34.2.0",
     "babel-preset-react-app": "^10.1.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "9.1.4",
+    "eslint-plugin-storybook": "9.1.13",
     "jsdom": "^26.1.0",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.50.0",
+    "rollup": "^4.52.5",
     "rollup-plugin-copy": "^3.5.0",
-    "sass": "^1.92.0",
+    "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
-    "semantic-release": "^24.2.7",
-    "storybook": "^9.1.4",
+    "semantic-release": "^24.2.9",
+    "storybook": "^9.1.13",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.23.1",
+    "stylelint": "^16.25.0",
     "stylelint-config-recommended": "^15.0.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-prettier": "5.0.3",
     "stylelint-scss": "6.12.1",
-    "typescript": "^5.9.2",
-    "vite": "^6.3.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.11",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.50.0",
-    "@swc/core-linux-x64-gnu": "^1.13.5"
+    "@rollup/rollup-linux-x64-gnu": "^4.52.5",
+    "@swc/core-linux-x64-gnu": "^1.13.20"
   },
   "browserslist": {
     "production": [