flexlayout-react 0.9.1 → 0.9.2

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * flexlayout-react
- * @version 0.9.1
+ * @version 0.9.2
  */
 import * as React from "react";
 import { useEffect, useImperativeHandle, useRef } from "react";
@@ -1161,6 +1161,13 @@ var TabNode = class TabNode extends Node {
 	getMoveableElement() {
 		return this.moveableElement;
 	}
+	/** 
+	* @internal
+	* This method is exposed to allow the workaround for issue: #524  
+	*/
+	setMoveableElement(element) {
+		this.moveableElement = element;
+	}
 	/** @internal */
 	setRenderedName(name) {
 		this.renderedName = name;
@@ -2163,7 +2170,7 @@ function adjustSelectedIndex(parent, removedIndex) {
 	}
 }
 function randomUUID() {
-	return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+	return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 }
 //#endregion
 //#region src/model/BorderNode.ts
@@ -4596,13 +4603,13 @@ var DragDropManager = class DragDropManager {
 	}
 	addTabWithDragAndDrop(event, json, onDrop) {
 		const tempNode = TabNode.fromJson(json, this._controller.getModel(), false);
-		DragDropManager.dragState = new DragState(this._controller.getMainController(), DragSource.Add, tempNode, json, onDrop);
+		DragDropManager.dragState = new DragState(this._controller.getMainController(), "add", tempNode, json, onDrop);
 	}
 	moveTabWithDragAndDrop(event, node) {
 		this.setDragNode(event, node);
 	}
 	setDragNode = (event, node) => {
-		DragDropManager.dragState = new DragState(this._controller.getMainController(), DragSource.Internal, node, void 0, void 0);
+		DragDropManager.dragState = new DragState(this._controller.getMainController(), "internal", node, void 0, void 0);
 		event.dataTransfer.setData("text/plain", "--flexlayout--");
 		event.dataTransfer.effectAllowed = "copyMove";
 		event.dataTransfer.dropEffect = "move";
@@ -4727,7 +4734,7 @@ var DragDropManager = class DragDropManager {
 			const externalDrag = this._controller.getProps().onExternalDrag(event);
 			if (externalDrag) {
 				const tempNode = TabNode.fromJson(externalDrag.json, this._controller.getModel(), false);
-				DragDropManager.dragState = new DragState(this._controller.getMainController(), DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);
+				DragDropManager.dragState = new DragState(this._controller.getMainController(), "external", tempNode, externalDrag.json, externalDrag.onDrop);
 			}
 		}
 		if (this._mainController !== DragDropManager.dragState?.mainLayoutController) return;
@@ -4807,12 +4814,6 @@ var DragDropManager = class DragDropManager {
 		return this._dragging;
 	}
 };
-var DragSource = /* @__PURE__ */ function(DragSource) {
-	DragSource["Internal"] = "internal";
-	DragSource["External"] = "external";
-	DragSource["Add"] = "add";
-	return DragSource;
-}({});
 var DragState = class {
 	mainLayoutController;
 	dragSource;
@@ -4961,15 +4962,7 @@ var PopoutWindow = (props) => {
 			popoutWindow.current?.close();
 			popoutWindow.current = null;
 		};
-	}, [
-		controller,
-		layout,
-		url,
-		title,
-		onCloseLayout,
-		onSetLayout,
-		styleMap
-	]);
+	}, []);
 	if (content !== void 0) return createPortal(children, content);
 	else return null;
 };
@@ -5006,17 +4999,6 @@ function copyStyle(popoutDoc, element, styleMap, promises) {
 }
 //#endregion
 //#region src/view/FloatWindow.tsx
-var FloatWindowResizeDirection = /* @__PURE__ */ function(FloatWindowResizeDirection) {
-	FloatWindowResizeDirection["North"] = "n";
-	FloatWindowResizeDirection["South"] = "s";
-	FloatWindowResizeDirection["East"] = "e";
-	FloatWindowResizeDirection["West"] = "w";
-	FloatWindowResizeDirection["NorthWest"] = "nw";
-	FloatWindowResizeDirection["NorthEast"] = "ne";
-	FloatWindowResizeDirection["SouthWest"] = "sw";
-	FloatWindowResizeDirection["SouthEast"] = "se";
-	return FloatWindowResizeDirection;
-}(FloatWindowResizeDirection || {});
 var RESIZE_ZINDEX = 10;
 var RESIZE_MARGIN = -4;
 var RESIZE_EDGE_SIZE = 8;
@@ -5221,7 +5203,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_EDGE_SIZE,
 					cursor: "ns-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.North)
+				onPointerDown: (e) => onPointerDownResize(e, "n")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: sRef,
@@ -5234,7 +5216,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_EDGE_SIZE,
 					cursor: "ns-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.South)
+				onPointerDown: (e) => onPointerDownResize(e, "s")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: eRef,
@@ -5247,7 +5229,7 @@ var FloatWindow = (props) => {
 					width: RESIZE_EDGE_SIZE,
 					cursor: "ew-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.East)
+				onPointerDown: (e) => onPointerDownResize(e, "e")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: wRef,
@@ -5260,7 +5242,7 @@ var FloatWindow = (props) => {
 					width: RESIZE_EDGE_SIZE,
 					cursor: "ew-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.West)
+				onPointerDown: (e) => onPointerDownResize(e, "w")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: nwRef,
@@ -5273,7 +5255,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_CORNER_SIZE,
 					cursor: "nwse-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.NorthWest)
+				onPointerDown: (e) => onPointerDownResize(e, "nw")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: neRef,
@@ -5286,7 +5268,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_CORNER_SIZE,
 					cursor: "nesw-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.NorthEast)
+				onPointerDown: (e) => onPointerDownResize(e, "ne")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: swRef,
@@ -5299,7 +5281,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_CORNER_SIZE,
 					cursor: "nesw-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.SouthWest)
+				onPointerDown: (e) => onPointerDownResize(e, "sw")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: seRef,
@@ -5312,7 +5294,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_SE_CORNER_SIZE,
 					cursor: "nwse-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.SouthEast)
+				onPointerDown: (e) => onPointerDownResize(e, "se")
 			})
 		]
 	});
@@ -6552,7 +6534,7 @@ var Layout = React.forwardRef((props, ref) => {
 		parentRedrawRevision: renderRevision.current++
 	}, key.current);
 });
-var FlexLayoutVersion = "0.9.1";
+var FlexLayoutVersion = "0.9.2";
 //#endregion
 //#region src/view/TabLayout.tsx
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexlayout-react",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "A multi-tab docking layout manager",
   "author": "Caplin Systems Ltd",
   "repository": {
@@ -65,35 +65,35 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^10.0.1",
-    "@mui/material": "^9.0.0",
-    "@mui/x-data-grid": "^9.0.3",
-    "@playwright/test": "^1.59.1",
-    "@types/node": "^25.6.0",
+    "@mui/material": "^9.1.2",
+    "@mui/x-data-grid": "^9.7.0",
+    "@playwright/test": "^1.61.1",
+    "@types/node": "^25.9.4",
     "@types/prismjs": "^1.26.6",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "ag-grid-community": "^35.2.1",
-    "ag-grid-react": "^35.2.1",
+    "@vitejs/plugin-react": "^6.0.3",
+    "ag-grid-community": "^35.3.1",
+    "ag-grid-react": "^35.3.1",
     "chart.js": "^4.5.1",
-    "eslint": "^10.2.1",
+    "eslint": "^10.6.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.5.0",
+    "globals": "^17.7.0",
     "ol": "^10.9.0",
-    "prettier": "^3.8.3",
+    "prettier": "^3.9.1",
     "prismjs": "^1.30.0",
-    "react": "^19.2.5",
+    "react": "^19.2.7",
     "react-chartjs-2": "^5.3.1",
-    "react-dom": "^19.2.5",
+    "react-dom": "^19.2.7",
     "react-scripts": "5.0.1",
     "rimraf": "^6.1.3",
-    "sass": "^1.99.0",
-    "styled-components": "^6.4.1",
+    "sass": "^1.101.0",
+    "styled-components": "^6.4.3",
     "typedoc": "^0.28.19",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.1",
-    "vite": "^8.0.10",
-    "vitest": "^4.1.5"
+    "typescript-eslint": "^8.62.0",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9"
   }
 }

package/types/model/TabNode.d.ts

@@ -91,6 +91,11 @@ export declare class TabNode extends Node implements IDraggable {
     setTabStamp(stamp: HTMLElement | null): void;
     /** @internal */
     getMoveableElement(): HTMLElement;
+    /**
+     * @internal
+     * This method is exposed to allow the workaround for issue: #524
+    */
+    setMoveableElement(element: HTMLElement): void;
     /** @internal */
     setRenderedName(name: string): void;
     /** @internal */

package/types/view/BorderButton.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { TabNode } from "../model/TabNode";
 import { IIcons } from "../view/layout/LayoutTypes";
 import { LayoutController } from "../view/layout/LayoutInternal";
@@ -11,4 +12,4 @@ export interface IBorderButtonProps {
     path: string;
 }
 /** @internal */
-export declare const BorderButton: (props: IBorderButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BorderButton: (props: IBorderButtonProps) => React.JSX.Element;

package/types/view/BorderTab.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { LayoutController } from "./layout/LayoutInternal";
 import { BorderNode } from "../model/BorderNode";
 /** @internal */
@@ -6,4 +7,4 @@ export interface IBorderTabProps {
     borderNode: BorderNode;
     show: boolean;
 }
-export declare function BorderTab(props: IBorderTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function BorderTab(props: IBorderTabProps): React.JSX.Element;

package/types/view/BorderTabSet.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { BorderNode } from "../model/BorderNode";
 import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
@@ -7,4 +8,4 @@ export interface IBorderTabSetProps {
     size: number;
 }
 /** @internal */
-export declare const BorderTabSet: (props: IBorderTabSetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BorderTabSet: (props: IBorderTabSetProps) => React.JSX.Element;

package/types/view/DragTabButton.d.ts

@@ -8,4 +8,4 @@ export interface IDragTabButton {
     dragging: boolean;
 }
 /** @internal */
-export declare const DragTabButton: React.MemoExoticComponent<(props: IDragTabButton) => import("react/jsx-runtime").JSX.Element>;
+export declare const DragTabButton: React.MemoExoticComponent<(props: IDragTabButton) => React.JSX.Element>;

package/types/view/ErrorBoundary.d.ts

@@ -18,5 +18,5 @@ export declare class ErrorBoundary extends React.Component<IErrorBoundaryProps,
     };
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     retry: () => void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 }

package/types/view/FloatWindow.d.ts

@@ -9,4 +9,4 @@ export interface IFloatWindowProps {
     onCloseLayout: (layout: Layout) => void;
 }
 /** @internal */
-export declare const FloatWindow: (props: React.PropsWithChildren<IFloatWindowProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const FloatWindow: (props: React.PropsWithChildren<IFloatWindowProps>) => React.JSX.Element;

package/types/view/Icons.d.ts

@@ -1,11 +1,11 @@
-export declare const CloseIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const MaximizeIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const OverflowIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const EdgeIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const PopoutIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const PopoutFloatIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const RestoreIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const AsterickIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const AddIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const MenuIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const SettingsIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon: () => import("react").JSX.Element;
+export declare const MaximizeIcon: () => import("react").JSX.Element;
+export declare const OverflowIcon: () => import("react").JSX.Element;
+export declare const EdgeIcon: () => import("react").JSX.Element;
+export declare const PopoutIcon: () => import("react").JSX.Element;
+export declare const PopoutFloatIcon: () => import("react").JSX.Element;
+export declare const RestoreIcon: () => import("react").JSX.Element;
+export declare const AsterickIcon: () => import("react").JSX.Element;
+export declare const AddIcon: () => import("react").JSX.Element;
+export declare const MenuIcon: () => import("react").JSX.Element;
+export declare const SettingsIcon: (props: React.SVGProps<SVGSVGElement>) => import("react").JSX.Element;

package/types/view/Overlay.d.ts

@@ -5,4 +5,4 @@ export interface IOverlayProps {
     show: boolean;
 }
 /** @internal */
-export declare const Overlay: (props: IOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Overlay: (props: IOverlayProps) => import("react").JSX.Element;

package/types/view/Row.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { RowNode } from "../model/RowNode";
 import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
@@ -6,4 +7,4 @@ export interface IRowProps {
     rowNode: RowNode;
 }
 /** @internal */
-export declare const Row: (props: IRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: (props: IRowProps) => React.JSX.Element;

package/types/view/Splitter.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { BorderNode } from "../model/BorderNode";
 import { RowNode } from "../model/RowNode";
 import { LayoutController } from "./layout/LayoutInternal";
@@ -9,4 +10,4 @@ export interface ISplitterProps {
     horizontal: boolean;
 }
 /** @internal */
-export declare const Splitter: (props: ISplitterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Splitter: (props: ISplitterProps) => React.JSX.Element;

package/types/view/Tab.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { TabNode } from "../model/TabNode";
 import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
@@ -7,4 +8,4 @@ export interface ITabProps {
     selected: boolean;
 }
 /** @internal */
-export declare const Tab: (props: ITabProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: (props: ITabProps) => React.JSX.Element;

package/types/view/TabButton.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { TabNode } from "../model/TabNode";
 import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
@@ -8,4 +9,4 @@ export interface ITabButtonProps {
     path: string;
 }
 /** @internal */
-export declare const TabButton: (props: ITabButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabButton: (props: ITabButtonProps) => React.JSX.Element;

package/types/view/TabButtonStamp.d.ts

@@ -6,4 +6,4 @@ export interface ITabButtonStampProps {
     controller: LayoutController;
 }
 /** @internal */
-export declare const TabButtonStamp: (props: ITabButtonStampProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabButtonStamp: (props: ITabButtonStampProps) => import("react").JSX.Element;

package/types/view/TabContentRenderer.d.ts

@@ -11,4 +11,4 @@ export interface ITabContentRenderProps {
     fullRedrawRevision: number;
     parentRedrawRevision: number;
 }
-export declare const TabContentRenderer: React.MemoExoticComponent<({ controller, tabNode }: ITabContentRenderProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TabContentRenderer: React.MemoExoticComponent<({ controller, tabNode }: ITabContentRenderProps) => React.JSX.Element>;

package/types/view/TabLayout.d.ts

@@ -9,4 +9,4 @@ export interface ITabLayoutProps {
  * @category Components
  * @group Main Layout
  */
-export declare const TabLayout: (props: ITabLayoutProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const TabLayout: (props: ITabLayoutProps) => import("react").JSX.Element | undefined;

package/types/view/TabSet.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { TabSetNode } from "../model/TabSetNode";
 import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
@@ -6,4 +7,4 @@ export interface ITabSetProps {
     tabsetNode: TabSetNode;
 }
 /** @internal */
-export declare const TabSet: (props: ITabSetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabSet: (props: ITabSetProps) => React.JSX.Element;

package/types/view/Utils.d.ts

@@ -7,7 +7,7 @@ import { Layout } from "../model/Layout";
 export declare function isDesktop(): boolean;
 /** @internal */
 export declare function getRenderStateEx(controller: LayoutController, tabNode: TabNode, iconAngle?: number): {
-    leading: import("react/jsx-runtime").JSX.Element | undefined;
+    leading: React.JSX.Element | undefined;
     content: string | Iterable<React.ReactNode>;
     name: string;
     buttons: React.ReactNode[];

package/types/view/layout/BorderContainer.d.ts

@@ -4,4 +4,4 @@ export interface IBorderContainerProps {
     controller: LayoutController;
     inner: React.ReactNode;
 }
-export declare const BorderContainer: ({ controller, inner }: IBorderContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BorderContainer: ({ controller, inner }: IBorderContainerProps) => React.JSX.Element;

package/types/view/layout/EdgeIndicators.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { LayoutController } from "./LayoutInternal";
 export interface IEdgeIndicatorsProps {
     controller: LayoutController;
 }
-export declare const EdgeIndicators: ({ controller }: IEdgeIndicatorsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EdgeIndicators: ({ controller }: IEdgeIndicatorsProps) => React.JSX.Element;

package/types/view/layout/FloatingWindowContainer.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { LayoutController } from "./LayoutInternal";
 export interface IFloatingWindowContainerProps {
     controller: LayoutController;
 }
-export declare const FloatingWindowContainer: ({ controller }: IFloatingWindowContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FloatingWindowContainer: ({ controller }: IFloatingWindowContainerProps) => React.JSX.Element;

package/types/view/layout/LayoutInternal.d.ts

@@ -60,7 +60,7 @@ export declare class LayoutController {
     private _cachedLayoutDOMRect;
     private _reLayout;
     constructor(props: ILayoutInternalProps, state: ILayoutInternalState, setState: (update: Partial<ILayoutInternalState> | ((prevState: ILayoutInternalState, props: ILayoutInternalProps) => Partial<ILayoutInternalState>)) => void);
-    renderLayout(): import("react/jsx-runtime").JSX.Element;
+    renderLayout(): React.JSX.Element;
     renderTabContainers(): Map<string, React.ReactNode>;
     renderTabContents(): Map<string, React.ReactNode>;
     renderDragTabButtons(): React.ReactNode[];