flexlayout-react 0.8.0 → 0.8.2

package/ChangeLog.txt

@@ -1,3 +1,15 @@
+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.
+Modified style sheet code in demo to reduce flash.
+
 0.8.0
 New:
   * Wrap tabs option

package/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:
 

package/declarations/view/Layout.d.ts

@@ -96,6 +96,7 @@ export declare class Layout extends React.Component<ILayoutProps> {
     /** Get the root div element of the layout */
     getRootDiv(): HTMLDivElement | null;
 }
+export declare const FlexLayoutVersion = "0.8.1";
 export type DragRectRenderCallback = (content: React.ReactNode | undefined, node?: Node, json?: IJsonTabNode) => React.ReactNode | undefined;
 export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 export type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {