@linzjs/windows 6.1.0 → 7.0.0

package/dist/panel/OpenPanelIcon.tsx

@@ -3,17 +3,17 @@ import './OpenPanelIcon.scss';
 import { LuiIcon } from '@linzjs/lui';
 import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
 import clsx from 'clsx';
-import { ReactNode, useContext } from 'react';
+import { PropsWithChildren, useContext } from 'react';
 
 import { OpenPanelOptions, PanelsContext } from './PanelsContext';
 
-export const ButtonIconHorizontalGroup = ({ children }: { children: ReactNode }) => (
+export const ButtonIconHorizontalGroup = ({ children }: PropsWithChildren) => (
   <div>
     <div className={'OpenPanelIcon-horizontalGroup'}>{children}</div>
   </div>
 );
 
-export const ButtonIconVerticalGroup = ({ children }: { children: ReactNode }) => (
+export const ButtonIconVerticalGroup = ({ children }: PropsWithChildren) => (
   <div>
     <div className={'OpenPanelIcon-verticalGroup'}>{children}</div>
   </div>

package/dist/panel/PanelHeader.tsx

@@ -1,7 +1,7 @@
 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 { ReactElement, useContext, useState } from 'react';
 
 import { PanelContext } from './PanelContext';
 import { PanelHeaderButton } from './PanelHeaderButton';
@@ -9,8 +9,8 @@ import { PanelInstanceContext } from './PanelInstanceContext';
 
 export interface PanelHeaderProps {
   icon?: LuiIconName;
-  extraLeft?: ReactNode;
-  extraRight?: ReactNode;
+  extraLeft?: ReactElement;
+  extraRight?: ReactElement;
   helpUrl?: string;
   onHelpClick?: () => void;
   onDockClick?: () => void;

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useCallback, useContext, useState } from 'react';
+import { PropsWithChildren, ReactElement, useCallback, useContext, useState } from 'react';
 
 import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelInstance, PanelsContext } from './PanelsContext';
@@ -11,11 +11,10 @@ export const PanelInstanceContextProvider = ({
   panelInstance,
   bounds,
   children,
-}: {
+}: PropsWithChildren<{
   bounds: string | Element | undefined;
   panelInstance: PanelInstance;
-  children: ReactNode;
-}): ReactElement => {
+}>): ReactElement => {
   const { closePanel, bringPanelToFront, dockElements } = useContext(PanelsContext);
   const [title, setTitle] = useState('');
   const [dockId, setDockId] = useState<string>();

package/dist/panel/PopinWIndow.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Dispatch, ReactNode, useCallback, useContext, useEffect, useRef } from 'react';
+import { Dispatch, ReactElement, useCallback, useContext, useEffect, useRef } from 'react';
 import { Rnd } from 'react-rnd';
 
 import { PanelContext } from './PanelContext';
@@ -30,7 +30,7 @@ export function PopinWindow({
   panelSize: PanelSize;
   setPanelSize: Dispatch<PanelSize>;
   setInitialPanelSize: Dispatch<PanelSize>;
-}): ReactNode {
+}): ReactElement {
   const panelRef = useRef<Rnd>(null);
 
   const { bounds, zIndex, bringPanelToFront, uniqueId } = useContext(PanelInstanceContext);

package/dist/panel/PopoutWindow.tsx

@@ -1,6 +1,6 @@
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
-import { ReactElement, ReactNode, useContext, useEffect, useState } from 'react';
+import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { makePopoutId } from './generateId';
@@ -9,10 +9,9 @@ import { PanelInstanceContext } from './PanelInstanceContext';
 import { PanelPosition, PanelSize } from './types';
 import { useRestoreStateFrom, useSaveStateIn } from './usePanelStateHandler';
 
-interface PopoutWindowProps {
+interface _PopoutWindowProps {
   name: string;
   title?: string; // The title of the popout window
-  children: ReactNode; // what to render inside the window
   size: PanelSize;
   popInPanelPosition: PanelPosition;
   popInPanelSize: PanelSize;
@@ -26,6 +25,8 @@ interface PopoutWindowProps {
   className?: string;
 }
 
+export type PopoutWindowProps = PropsWithChildren<_PopoutWindowProps>;
+
 export const PopoutWindow = ({
   name,
   title = name,

package/dist/panel/types/PanelProps.ts

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 
 import { PanelPosition } from './PanelPosition';
 import { PanelSize } from './PanelSize';
 
-export interface PanelProps {
-  children: ReactNode;
+interface _PanelProps {
   className?: string;
   maxHeight?: number | string;
   maxWidth?: number | string;
@@ -16,3 +15,5 @@ export interface PanelProps {
   size?: PanelSize;
   title: string;
 }
+
+export type PanelProps = PropsWithChildren<_PanelProps>;

package/package.json

@@ -13,12 +13,12 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "peerDependencies": {
     "@linzjs/lui": ">=21",
     "lodash-es": ">=4",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "files": [
     "dist"
@@ -60,8 +60,8 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
-    "@linzjs/lui": "^23.14.2",
-    "@linzjs/step-ag-grid": "^28.5.1",
+    "@linzjs/lui": "^23.14.3",
+    "@linzjs/step-ag-grid": "^29.5.1",
     "@linzjs/style": "^5.4.0",
     "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
@@ -73,22 +73,21 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
-    "@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.2.0",
-    "ag-grid-react": "^34.2.0",
-    "babel-preset-react-app": "^10.1.0",
+    "@types/node": "^22.18.12",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react-swc": "^4.1.0",
+    "@vitest/ui": "^4.0.1",
+    "ag-grid-community": "^34.3.0",
+    "ag-grid-react": "^34.3.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-storybook": "9.1.13",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.0.1",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "^18.3.1",
+    "react": "^19.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.0",
     "rollup": "^4.52.5",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.93.2",
@@ -97,16 +96,16 @@
     "storybook": "^9.1.13",
     "style-loader": "^4.0.0",
     "stylelint": "^16.25.0",
-    "stylelint-config-recommended": "^15.0.0",
-    "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-recommended-scss": "^16.0.2",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-prettier": "5.0.3",
     "stylelint-scss": "6.12.1",
     "typescript": "^5.9.3",
     "vite": "^7.1.11",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.1"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.52.5",