flexlayout-react 0.6.8 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.6.8",
+    "version": "0.7.0",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
@@ -36,35 +36,33 @@
     "repository": "https://github.com/caplin/FlexLayout",
     "license": "ISC",
     "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
     "eslintConfig": {
         "extends": "react-app"
     },
     "devDependencies": {
-        "@cypress/react": "^5.10.3",
-        "@cypress/webpack-dev-server": "^1.7.0",
-        "@types/node": "^16.11.12",
-        "@types/react": "^17.0.37",
-        "@types/react-dom": "^17.0.11",
+        "@types/react": "^18.0.5",
+        "@types/react-dom": "^18.0.1",
+        "@cypress/react": "^5.12.4",
+        "@cypress/webpack-dev-server": "^1.8.4",
+        "@types/node": "^17.0.24",
         "@types/uuid": "^8.3.3",
-        "css-loader": "^6.5.1",
-        "cypress": "^9.1.1",
+        "css-loader": "^6.7.1",
+        "cypress": "^9.5.4",
         "html-webpack-plugin": "^5.5.0",
-        "prettier": "^2.5.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "5.0.0",
-        "sass": "^1.45.0",
+        "prettier": "^2.6.2",
+        "react-scripts": "5.0.1",
+        "sass": "^1.50.0",
         "source-map-loader": "^3.0.0",
         "style-loader": "^3.3.1",
-        "ts-loader": "~9.2.6",
-        "typedoc": "^0.22.10",
-        "typescript": "^4.5.4",
-        "webpack": "^5.65.0",
+        "ts-loader": "~9.2.8",
+        "typedoc": "^0.22.15",
+        "typescript": "^4.6.3",
+        "webpack": "^5.72.0",
         "webpack-cli": "^4.9.1",
-        "webpack-dev-server": "^4.6.0"
+        "webpack-dev-server": "^4.8.1"
     },
     "dependencies": {
         "uuid": "^8.3.2"

package/src/PopupMenu.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { DragDrop } from "./DragDrop";
 import { TabNode } from "./model/TabNode";
 import { CLASSES } from "./Types";
-import { ILayoutCallbacks } from "./view/Layout";
+import { IconFactory, ILayoutCallbacks, TitleFactory } from "./view/Layout";
 import { TabButtonStamp } from "./view/TabButtonStamp";
 
 /** @internal */
@@ -11,8 +11,8 @@ export function showPopup(
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
     layout: ILayoutCallbacks,
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined,
+    iconFactory?: IconFactory,
+    titleFactory?: TitleFactory,
 ) {
     const layoutDiv = layout.getRootDiv();
     const classNameMapper = layout.getClassName;
@@ -77,8 +77,8 @@ interface IPopupMenuProps {
     onSelect: (item: { index: number; node: TabNode }) => void;
     classNameMapper: (defaultClassName: string) => string;
     layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
 }
 
 /** @internal */

package/src/model/Node.ts

@@ -179,13 +179,17 @@ export abstract class Node {
     _findDropTargetNode(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined {
         let rtn: DropInfo | undefined;
         if (this._rect.contains(x, y)) {
-            rtn = this.canDrop(dragNode, x, y);
-            if (rtn === undefined) {
-                if (this._children.length !== 0) {
-                    for (const child of this._children) {
-                        rtn = child._findDropTargetNode(dragNode, x, y);
-                        if (rtn !== undefined) {
-                            break;
+            if (this._model.getMaximizedTabset() !== undefined) {
+                rtn = this._model.getMaximizedTabset()!.canDrop(dragNode, x, y);
+            } else {
+                rtn = this.canDrop(dragNode, x, y);
+                if (rtn === undefined) {
+                    if (this._children.length !== 0) {
+                        for (const child of this._children) {
+                            rtn = child._findDropTargetNode(dragNode, x, y);
+                            if (rtn !== undefined) {
+                                break;
+                            }
                         }
                     }
                 }

package/src/model/TabSetNode.ts

@@ -274,7 +274,10 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
             const outlineRect = this._tabHeaderRect;
             dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
         } else if (this._contentRect!.contains(x, y)) {
-            const dockLocation = DockLocation.getLocation(this._contentRect!, x, y);
+            let dockLocation = DockLocation.CENTER;
+            if (this._model.getMaximizedTabset() === undefined) {
+                dockLocation = DockLocation.getLocation(this._contentRect!, x, y);
+            }
             const outlineRect = dockLocation.getDockRect(this._rect);
             dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
         } else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {

package/src/view/BorderButton.tsx

@@ -3,7 +3,7 @@ import { I18nLabel } from "../I18nLabel";
 import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { Rect } from "../Rect";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IconFactory, IIcons, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
@@ -14,8 +14,8 @@ export interface IBorderButtonProps {
     node: TabNode;
     selected: boolean;
     border: string;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons: IIcons;
     path: string;
 }

package/src/view/BorderTabSet.tsx

@@ -3,7 +3,7 @@ import { DockLocation } from "../DockLocation";
 import { BorderNode } from "../model/BorderNode";
 import { TabNode } from "../model/TabNode";
 import { BorderButton } from "./BorderButton";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { showPopup } from "../PopupMenu";
 import { Actions } from "../model/Actions";
 import { I18nLabel } from "../I18nLabel";
@@ -16,8 +16,8 @@ import { isAuxMouseEvent } from "./Utils";
 export interface IBorderTabSetProps {
     border: BorderNode;
     layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: (node: TabNode) => (React.ReactNode | undefined);
+    titleFactory?: (node: TabNode) => (ITitleObject | React.ReactNode | undefined);
     icons: IIcons;
     path: string;
 }
@@ -114,7 +114,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     // allow customization of tabset right/bottom buttons
     let buttons: any[] = [];
-    const renderState = { headerContent: {}, buttons, stickyButtons: [], headerButtons: [] };
+    const renderState = { headerContent: undefined, buttons, stickyButtons: [], headerButtons: [] };
     layout.customizeTabSet(border, renderState);
     buttons = renderState.buttons;
 

package/src/view/ErrorBoundary.tsx

@@ -5,6 +5,7 @@ import { CLASSES } from "../Types";
 /** @internal */
 export interface IErrorBoundaryProps {
     message: string;
+    children: React.ReactNode;
 }
 /** @internal */
 export interface IErrorBoundaryState {

package/src/view/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import { DockLocation } from "../DockLocation";
 import { DragDrop } from "../DragDrop";
 import { DropInfo } from "../DropInfo";
@@ -40,14 +40,16 @@ export type ShowOverflowMenuCallback = (
     onSelect: (item: { index: number; node: TabNode }) => void,
 ) => void;
 export type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
+export type IconFactory = (node: TabNode) => React.ReactNode;
+export type TitleFactory = (node: TabNode) => ITitleObject | React.ReactNode;
 
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
     font?: IFontValues;
     fontFamily?: string;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => ITitleObject | React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (
@@ -120,7 +122,7 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
-    portal?: React.ReactNode;
+    portal?: React.ReactPortal;
 }
 
 export interface IIcons {
@@ -742,7 +744,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.dragDiv = this.currentDocument!.createElement("div");
         this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
         this.dragDiv.addEventListener("mousedown", this.onDragDivMouseDown);
-        this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown);
+        this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown, {passive: false});
 
         this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {
             if (this.dragDiv) {
@@ -833,7 +835,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         onClick?: (event: Event) => void,
         onDoubleClick?: (event: Event) => void
     ) => {
-        if (this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {
+        if (!allowDrag) {
             DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, this.selfRef.current!);
         } else {
             this.dragNode = node;
@@ -883,7 +885,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
     /** @internal */
     showPortal = (control: React.ReactNode, element: HTMLElement) => {
-        const portal = ReactDOM.createPortal(control, element);
+        const portal = createPortal(control, element) as React.ReactPortal;
         this.setState({ portal });
     };
 
@@ -911,7 +913,9 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             rootdiv.appendChild(this.dragDiv);
         }
         // add edge indicators
-        this.showEdges(rootdiv);
+        if (this.props.model.getMaximizedTabset() === undefined) {
+            this.showEdges(rootdiv);
+        }
 
         if (this.dragNode !== undefined && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== undefined) {
             this.dragNode.getTabRect()!.positionElement(this.outlineDiv);

package/src/view/TabButton.tsx

@@ -4,7 +4,7 @@ import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { Rect } from "../Rect";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IconFactory, IIcons, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
@@ -14,8 +14,8 @@ export interface ITabButtonProps {
     layout: ILayoutCallbacks;
     node: TabNode;
     selected: boolean;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons: IIcons;
     path: string;
 }

package/src/view/TabButtonStamp.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { ILayoutCallbacks } from "./Layout";
+import { IconFactory, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { CLASSES } from "../Types";
 import { getRenderStateEx } from "./Utils";
 
@@ -8,8 +8,8 @@ import { getRenderStateEx } from "./Utils";
 export interface ITabButtonStampProps {
     node: TabNode;
     layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
 }
 
 /** @internal */

package/src/view/TabOverflowHook.tsx

@@ -33,7 +33,7 @@ export const useTabOverflow = (
 
     React.useEffect(() => {
         const instance = selfRef.current!;
-        instance.addEventListener('wheel', onWheel);
+        instance.addEventListener('wheel', onWheel, { passive: false });
         return () => {
             instance.removeEventListener('wheel', onWheel);
         }

package/src/view/TabSet.tsx

@@ -4,7 +4,7 @@ import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { showPopup } from "../PopupMenu";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import { Orientation } from "../Orientation";
@@ -15,8 +15,8 @@ import { hideElement, isAuxMouseEvent } from "./Utils";
 export interface ITabSetProps {
     layout: ILayoutCallbacks;
     node: TabSetNode;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: (node: TabNode) => (React.ReactNode | undefined);
+    titleFactory?: (node: TabNode) => (ITitleObject | React.ReactNode | undefined);
     icons: IIcons;
     editingTab?: TabNode;
     path?: string;
@@ -67,7 +67,11 @@ export const TabSet = (props: ITabSetProps) => {
             layout.doAction(Actions.setActiveTabset(node.getId()));
             if (!layout.getEditingTab()) {
                 const message = layout.i18nName(I18nLabel.Move_Tabset, name);
-                layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+                if (node.getModel().getMaximizedTabset() !== undefined) {
+                    layout.dragStart(event, message, node, false, (event2: Event) => undefined, onDoubleClick);
+                } else {
+                    layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+                }
             }
         }
     };

package/src/view/Utils.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IconFactory, ILayoutCallbacks, ITitleObject, TitleFactory } from "./Layout";
 
 /** @internal */
 export function getRenderStateEx(
     layout: ILayoutCallbacks,
     node: TabNode,
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined
+    iconFactory?: IconFactory,
+    titleFactory?: TitleFactory
 ) {
     let leadingContent = iconFactory ? iconFactory(node) : undefined;
     let titleContent: React.ReactNode = node.getName();

package/style/dark.css

@@ -8,8 +8,8 @@
   --color-4: #333333;
   --color-5: #404040;
   --color-6: #4d4d4d;
-  --color-drag1: #cfe8ff;
-  --color-drag2: #b7d1b5;
+  --color-drag1: rgb(207, 232, 255);
+  --color-drag2: rgb(183, 209, 181);
   --color-drag1-background: rgba(128, 128, 128, 0.15);
   --color-drag2-background: rgba(128, 128, 128, 0.15);
   --font-size: medium;

package/style/gray.css

@@ -8,8 +8,8 @@
   --color-4: #cccccc;
   --color-5: #bfbfbf;
   --color-6: #b3b3b3;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;

package/style/light.css

@@ -8,8 +8,8 @@
   --color-4: #e2e2e2;
   --color-5: #dbdbdb;
   --color-6: #d4d4d4;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;

package/style/underline.css

@@ -8,8 +8,8 @@
   --color-4: #e6e6e6;
   --color-5: #e0e0e0;
   --color-6: #d9d9d9;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;