v0.8.2

ChangeLog.txt

@@ -1,3 +1,10 @@
+0.8.2
+Updated dependencies 
+Enabled use with React 19
+Removed strict mode from demo due to bug in React 19 (https://github.com/facebook/react/issues/29585) causing
+  tabs to re-mount when moved
+Used CodeSandbox in README.md since react 19 doesn't create UMD versions needed by JSFiddle.
+
 0.8.1
 Fixed enableDrag on tab and tabset nodes.
 Fixed calc for min/max tabset height from min/max tab height.

README.md

@@ -10,7 +10,7 @@ FlexLayout is a layout manager that arranges React components in multiple tab se
 
 [Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.8/demo/index.html)
 
-Try it now using [JSFiddle](https://jsfiddle.net/fvd9btea/)
+Try it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)
 
 [API Doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.8/typedoc/index.html)
 
@@ -104,7 +104,7 @@ var json = {
                     {
                         type: "tab",
                         name: "One",
-                        component: "button",
+                        component: "placeholder",
                     }
                 ]
             },
@@ -115,7 +115,7 @@ var json = {
                     {
                         type: "tab",
                         name: "Two",
-                        component: "button",
+                        component: "placeholder",
                     }
                 ]
             }
@@ -134,8 +134,8 @@ function App() {
   const factory = (node) => {
     var component = node.getComponent();
 
-    if (component === "button") {
-      return <button>{node.getName()}</button>;
+    if (component === "placeholder") {
+      return <div>{node.getName()}</div>;
     }
   }
 
@@ -149,7 +149,7 @@ function App() {
 
 The above code would render two tab sets horizontally each containing a single tab that hosts a button component. The tabs could be moved and resized by dragging and dropping. Additional grids could be added to the layout by sending actions to the model.
 
-Try it now using [JSFiddle](https://jsfiddle.net/fvd9btea/)
+Try it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)
 
 A simple Typescript example can be found here:
 

examples/demo/App.tsx

@@ -28,7 +28,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
     nextGridIndex: number = 1;
     showingPopupMenu: boolean = false;
     htmlTimer?: any = null;
-    layoutRef: React.RefObject<Layout>;
+    layoutRef: React.RefObject<Layout | null>;
 
     constructor(props: any) {
         super(props);
@@ -466,7 +466,8 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
         }
 
         return (
-            <React.StrictMode>
+            // commented out strictmode until: extra effect in strict mode is fixed see: https://github.com/facebook/react/issues/29585
+            // <React.StrictMode> 
                 <ContextExample.Provider value="from context">
                     <div className="app">
                         <div className="toolbar" dir="ltr">
@@ -526,7 +527,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
                         </div>
                     </div>
                 </ContextExample.Provider>
-            </React.StrictMode>
+            //</React.StrictMode>
         );
     }
 

examples/demo/aggrid.tsx

@@ -2,9 +2,15 @@ import * as React from 'react';
 import { useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import type { ColDef } from 'ag-grid-community';
+import { ModuleRegistry, ClientSideRowModelModule, ColumnAutoSizeModule } from 'ag-grid-community';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 
+ModuleRegistry.registerModules([
+    ColumnAutoSizeModule,
+    ClientSideRowModelModule,
+]);
+
 // Row Data Interface
 interface IRow {
     make: string;
@@ -41,7 +47,7 @@ export const AGGridExample = () => {
         flex: 1,
     };
 
-    React.useEffect(()=> {
+    React.useEffect(() => {
         // fix resizing in popouts, since resize observer will be lost
         if (gridRef.current!.api) {
             const newWidth = selfRef.current!.getBoundingClientRect().width;
@@ -55,7 +61,7 @@ export const AGGridExample = () => {
     // Container: Defines the grid's theme & dimensions.
     return (
         <div ref={selfRef} className={"ag-theme-alpine"} style={{ width: '100%', height: '100%' }}>
-            <AgGridReact ref={gridRef}  rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} />
+            <AgGridReact ref={gridRef} rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} />
         </div>
     );
 };

examples/demo/dark.css

@@ -52,6 +52,8 @@ html,body
     margin:2px;
     display: flex;
     align-items:center;
+    flex-wrap: wrap;
+
 }
 
 .contents

examples/demo/gray.css

@@ -65,6 +65,8 @@ body {
     margin: 2px;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+
 }
 
 .contents {

examples/demo/light.css

@@ -43,13 +43,16 @@ html,body
     display:flex;
     flex-direction: column;
     flex-grow:1;
+    flex-wrap: wrap;
 }
 
 .toolbar
 {
     margin:2px;
     display: flex;
     align-items:center;
+    flex-wrap: wrap;
+
 }
 
 .contents

examples/demo/rounded.css

@@ -53,6 +53,8 @@ html,body
     align-items:center;
     padding-left:5px;
     padding-right:5px;
+    flex-wrap: wrap;
+
 }
 
 .contents

examples/demo/underline.css

@@ -50,6 +50,8 @@ html,body
     margin:2px;
     display: flex;
     align-items:center;
+    flex-wrap: wrap;
+
 }
 
 .contents

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.8.1",
+    "version": "0.8.2",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
@@ -38,45 +38,43 @@
     "repository": "https://github.com/caplin/FlexLayout",
     "license": "ISC",
     "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
     },
     "eslintConfig": {
         "extends": "react-app"
     },
     "devDependencies": {
-        "@emotion/react": "^11.13.3",
-        "@emotion/styled": "^11.13.0",
-        "@fontsource/roboto": "^5.0.14",
-        "@mui/material": "^6.0.1",
-        "@types/node": "^22.5.0",
-        "@types/prismjs": "^1.26.4",
-        "@types/react": "^18.3.4",
-        "@types/react-dom": "^18.3.0",
-        "ag-grid-community": "^32.1.0",
-        "ag-grid-react": "^32.1.0",
-        "chart.js": "^4.4.4",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@fontsource/roboto": "^5.1.1",
+        "@mui/material": "^6.4.4",
+        "@mui/x-data-grid": "^7.26.0",
+        "@types/node": "^22.13.4",
+        "@types/prismjs": "^1.26.5",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "ag-grid-community": "^33.1.0",
+        "ag-grid-react": "^33.1.0",
+        "chart.js": "^4.4.7",
         "css-loader": "^7.1.2",
-        "html-webpack-plugin": "^5.6.0",
-        "ol": "^10.1.0",
-        "prettier": "^3.3.3",
+        "html-webpack-plugin": "^5.6.3",
+        "ol": "^10.4.0",
+        "prettier": "^3.5.1",
         "prismjs": "^1.29.0",
-        "react": "^18.3.1",
-        "react-chartjs-2": "^5.2.0",
-        "react-dom": "^18.3.1",
+        "react": "^19.0.0",
+        "react-chartjs-2": "^5.3.0",
+        "react-dom": "^19.0.0",
         "react-scripts": "5.0.1",
-        "sass": "^1.77.8",
+        "sass": "^1.85.0",
         "source-map-loader": "^5.0.0",
         "style-loader": "^4.0.0",
-        "styled-components": "^6.1.13",
-        "ts-loader": "~9.5.1",
-        "typedoc": "^0.26.6",
-        "typescript": "^5.5.4",
-        "webpack": "^5.94.0",
-        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4",
-        "@mui/x-data-grid": "^7.15.0"
-    },
-    "dependencies": {
+        "styled-components": "^6.1.15",
+        "ts-loader": "~9.5.2",
+        "typedoc": "^0.27.7",
+        "typescript": "^5.7.3",
+        "webpack": "^5.98.0",
+        "webpack-cli": "^6.0.1",
+        "webpack-dev-server": "^5.2.0"
     }
 }