flexlayout-react 0.8.18 → 0.9.0

package/types/model/TabNode.d.ts

@@ -1,38 +1,30 @@
-import { AttributeDefinitions } from "../AttributeDefinitions";
-import { Rect } from "../Rect";
+import { Attributes } from "./Attributes";
+import { Rect } from "./Rect";
 import { IDraggable } from "./IDraggable";
-import { IJsonTabNode } from "./IJsonModel";
+import { IJsonTabNode, ITabAttributes } from "./IJsonModel";
 import { Model } from "./Model";
 import { Node } from "./Node";
 export declare class TabNode extends Node implements IDraggable {
     static readonly TYPE = "tab";
     /** @internal */
-    static fromJson(json: any, model: Model, addToModel?: boolean): TabNode;
-    /** @internal */
+    static fromJson(json: IJsonTabNode, model: Model, addToModel?: boolean): TabNode;
     private tabRect;
-    /** @internal */
     private moveableElement;
-    /** @internal */
-    private tabStamp;
-    /** @internal */
     private renderedName?;
-    /** @internal */
     private extra;
-    /** @internal */
     private visible;
-    /** @internal */
     private rendered;
-    /** @internal */
     private scrollTop?;
-    /** @internal */
     private scrollLeft?;
+    private tabStamp;
     /** @internal */
-    constructor(model: Model, json: any, addToModel?: boolean);
+    constructor(model: Model, json: IJsonTabNode, addToModel?: boolean);
     getName(): string;
+    getIcon(): string | undefined;
+    getSubLayoutId(): string | undefined;
     getHelpText(): string | undefined;
     getComponent(): string | undefined;
-    getWindowId(): string;
-    getWindow(): Window | undefined;
+    getWindowId(): string | undefined;
     /**
      * Returns the config attribute that can be used to store node specific data that
      * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather
@@ -48,11 +40,13 @@ export declare class TabNode extends Node implements IDraggable {
     getExtraData(): Record<string, any>;
     isPoppedOut(): boolean;
     isSelected(): boolean;
-    getIcon(): string | undefined;
+    isCloseable(): boolean;
+    isAllowedInWindow(): boolean;
     isEnableClose(): boolean;
     getCloseType(): number;
     isEnablePopout(): boolean;
     isEnablePopoutIcon(): boolean;
+    isEnablePopoutFloatIcon(): boolean;
     isEnablePopoutOverlay(): boolean;
     isEnableDrag(): boolean;
     isEnableRename(): boolean;
@@ -108,15 +102,15 @@ export declare class TabNode extends Node implements IDraggable {
     /** @internal */
     delete(): void;
     /** @internal */
-    updateAttrs(json: any): void;
+    updateAttrs(json: ITabAttributes): void;
     /** @internal */
-    getAttributeDefinitions(): AttributeDefinitions;
+    getAttributeDefinitions(): Attributes;
     /** @internal */
     setBorderWidth(width: number): void;
     /** @internal */
     setBorderHeight(height: number): void;
     /** @internal */
-    static getAttributeDefinitions(): AttributeDefinitions;
+    static getAttributeDefinitions(): Attributes;
     /** @internal */
     private static attributeDefinitions;
     /** @internal */

package/types/model/TabSetNode.d.ts

@@ -1,35 +1,28 @@
-import { AttributeDefinitions } from "../AttributeDefinitions";
-import { DockLocation } from "../DockLocation";
-import { DropInfo } from "../DropInfo";
-import { Orientation } from "../Orientation";
-import { Rect } from "../Rect";
+import { Attributes } from "./Attributes";
+import { DockLocation } from "./DockLocation";
+import { DropInfo } from "./DropInfo";
+import { Orientation } from "./Orientation";
+import { Rect } from "./Rect";
 import { IDraggable } from "./IDraggable";
 import { IDropTarget } from "./IDropTarget";
-import { IJsonTabSetNode } from "./IJsonModel";
-import { LayoutWindow } from "./LayoutWindow";
+import { IJsonTabSetNode, ITabSetAttributes } from "./IJsonModel";
+import { Layout } from "./Layout";
 import { Model } from "./Model";
 import { Node } from "./Node";
 import { TabNode } from "./TabNode";
 export declare class TabSetNode extends Node implements IDraggable, IDropTarget {
     static readonly TYPE = "tabset";
     /** @internal */
-    static fromJson(json: any, model: Model, layoutWindow: LayoutWindow): TabSetNode;
-    /** @internal */
+    static fromJson(json: IJsonTabSetNode, model: Model, layout: Layout): TabSetNode;
     private static attributeDefinitions;
-    /** @internal */
     private tabStripRect;
-    /** @internal */
     private contentRect;
-    /** @internal */
     private calculatedMinHeight;
-    /** @internal */
     private calculatedMinWidth;
-    /** @internal */
     private calculatedMaxHeight;
-    /** @internal */
     private calculatedMaxWidth;
     /** @internal */
-    constructor(model: Model, json: any);
+    constructor(model: Model, json: IJsonTabSetNode);
     getName(): string | undefined;
     isEnableActiveIcon(): boolean;
     getSelected(): number;
@@ -47,6 +40,7 @@ export declare class TabSetNode extends Node implements IDraggable, IDropTarget
     getMaxHeight(): number;
     /** @internal */
     getMaxSize(orientation: Orientation): number;
+    isCloseable(): boolean;
     /**
      * Returns the config attribute that can be used to store node specific data that
      * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather
@@ -59,13 +53,14 @@ export declare class TabSetNode extends Node implements IDraggable, IDropTarget
     isActive(): boolean;
     isEnableDeleteWhenEmpty(): boolean;
     isEnableDrop(): boolean;
+    isEnableTabStrip(): boolean;
     isEnableTabWrap(): boolean;
     isEnableDrag(): boolean;
     isEnableDivide(): boolean;
     isEnableMaximize(): boolean;
     isEnableClose(): boolean;
+    isEnableCloseButton(): boolean;
     isEnableSingleTabStretch(): boolean;
-    isEnableTabStrip(): boolean;
     isAutoSelectTab(): boolean;
     isEnableTabScrollbar(): boolean;
     getClassNameTabStrip(): string | undefined;
@@ -85,7 +80,6 @@ export declare class TabSetNode extends Node implements IDraggable, IDropTarget
     setWeight(weight: number): void;
     /** @internal */
     setSelected(index: number): void;
-    getWindowId(): string;
     /** @internal */
     canDrop(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined;
     /** @internal */
@@ -95,11 +89,11 @@ export declare class TabSetNode extends Node implements IDraggable, IDropTarget
     /** @internal */
     drop(dragNode: Node, location: DockLocation, index: number, select?: boolean): void;
     /** @internal */
-    updateAttrs(json: any): void;
+    updateAttrs(json: ITabSetAttributes): void;
     /** @internal */
-    getAttributeDefinitions(): AttributeDefinitions;
+    getAttributeDefinitions(): Attributes;
     /** @internal */
-    static getAttributeDefinitions(): AttributeDefinitions;
+    static getAttributeDefinitions(): Attributes;
     /** @internal */
     private static createAttributeDefinitions;
 }

package/types/view/BorderButton.d.ts

@@ -1,9 +1,10 @@
 import { TabNode } from "../model/TabNode";
-import { IIcons, LayoutInternal } from "./Layout";
+import { IIcons } from "../view/layout/LayoutTypes";
+import { LayoutController } from "../view/layout/LayoutInternal";
 /** @internal */
 export interface IBorderButtonProps {
-    layout: LayoutInternal;
-    node: TabNode;
+    controller: LayoutController;
+    tabNode: TabNode;
     selected: boolean;
     border: string;
     icons: IIcons;

package/types/view/BorderTab.d.ts

@@ -1,9 +1,9 @@
-import { LayoutInternal } from "./Layout";
+import { LayoutController } from "./layout/LayoutInternal";
 import { BorderNode } from "../model/BorderNode";
 /** @internal */
 export interface IBorderTabProps {
-    layout: LayoutInternal;
-    border: BorderNode;
+    controller: LayoutController;
+    borderNode: BorderNode;
     show: boolean;
 }
 export declare function BorderTab(props: IBorderTabProps): import("react/jsx-runtime").JSX.Element;

package/types/view/BorderTabSet.d.ts

@@ -1,9 +1,9 @@
 import { BorderNode } from "../model/BorderNode";
-import { LayoutInternal } from "./Layout";
+import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
 export interface IBorderTabSetProps {
-    border: BorderNode;
-    layout: LayoutInternal;
+    borderNode: BorderNode;
+    controller: LayoutController;
     size: number;
 }
 /** @internal */

package/types/{Types.d.ts → view/CSSClassNames.d.ts}

@@ -30,6 +30,9 @@ export declare enum CLASSES {
     FLEXLAYOUT__EDGE_RECT_RIGHT = "flexlayout__edge_rect_right",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER = "flexlayout__error_boundary_container",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
+    FLEXLAYOUT__FLOAT_WINDOW = "flexlayout__float_window",
+    FLEXLAYOUT__FLOAT_WINDOW_HEADER = "flexlayout__float_window_header",
+    FLEXLAYOUT__FLOAT_WINDOW_CONTENT = "flexlayout__float_window_content",
     FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
     FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
@@ -53,13 +56,17 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_POSITION = "flexlayout__tab_position",
     FLEXLAYOUT__TAB_MOVEABLE = "flexlayout__tab_moveable",
     FLEXLAYOUT__TAB_OVERLAY = "flexlayout__tab_overlay",
+    FLEXLAYOUT__TAB_LAYOUT_CONTAINER = "flexlayout__tab_layout_container",
+    FLEXLAYOUT__TAB_LAYOUT_CONTAINER_USER = "flexlayout__tab_layout_container_user",
     FLEXLAYOUT__TABSET = "flexlayout__tabset",
     FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
-    FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
-    FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
     FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
     FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
+    FLEXLAYOUT__TABSET_TAB_SPACER = "flexlayout__tabset_tab_spacer",
     FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
+    FLEXLAYOUT__TABSET_TAB_DIVIDER_SELECTED_BEFORE = "flexlayout__tabset_tab_divider_selected_before",
+    FLEXLAYOUT__TABSET_TAB_DIVIDER_SELECTED_AFTER = "flexlayout__tabset_tab_divider_selected_after",
+    FLEXLAYOUT__TABSET_TAB_DIVIDER_INNER = "flexlayout__tabset_tab_divider_inner",
     FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
     FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
     FLEXLAYOUT__TABSET_TABBAR_INNER_ = "flexlayout__tabset_tabbar_inner_",

package/types/view/DragContainer.d.ts

@@ -1,9 +1,11 @@
+import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { LayoutInternal } from "./Layout";
+import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
 export interface IDragContainerProps {
-    node: TabNode;
-    layout: LayoutInternal;
+    tabNode: TabNode;
+    controller: LayoutController;
+    dragging: boolean;
 }
 /** @internal */
-export declare const DragContainer: (props: IDragContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DragContainer: React.MemoExoticComponent<(props: IDragContainerProps) => import("react/jsx-runtime").JSX.Element>;

package/types/view/FloatWindow.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { LayoutController } from "./layout/LayoutInternal";
+import { Layout } from "../model/Layout";
+/** @internal */
+export interface IFloatWindowProps {
+    controller: LayoutController;
+    layout: Layout;
+    onCloseLayout: (layout: Layout) => void;
+}
+/** @internal */
+export declare const FloatWindow: (props: React.PropsWithChildren<IFloatWindowProps>) => import("react/jsx-runtime").JSX.Element;

package/types/{I18nLabel.d.ts → view/I18nLabel.d.ts}

@@ -7,6 +7,7 @@ export declare enum I18nLabel {
     Maximize = "Maximize tab set",
     Restore = "Restore tab set",
     Popout_Tab = "Popout selected tab",
+    Popout_Tab_Float = "Float selected tab",
     Overflow_Menu_Tooltip = "Hidden tabs",
     Error_rendering_component = "Error rendering component",
     Error_rendering_component_retry = "Retry"

package/types/view/Icons.d.ts

@@ -3,6 +3,7 @@ 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;

package/types/view/Layout.d.ts

@@ -1,16 +1,13 @@
 import * as React from "react";
-import { DockLocation } from "../DockLocation";
-import { I18nLabel } from "../I18nLabel";
-import { Rect } from "../Rect";
-import { Action } from "../model/Action";
-import { BorderNode } from "../model/BorderNode";
-import { IDraggable } from "../model/IDraggable";
-import { IJsonTabNode } from "../model/IJsonModel";
-import { Model } from "../model/Model";
-import { Node } from "../model/Node";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
-import { LayoutWindow } from "../model/LayoutWindow";
+import { IJsonTabNode } from "../model/IJsonModel";
+import { Node } from "../model/Node";
+import { Action } from "../model/Actions";
+import { BorderNode } from "../model/BorderNode";
+import { Model } from "../model/Model";
+import { I18nLabel } from "./I18nLabel";
+import { DragRectRenderCallback, NodeMouseEvent, ShowOverflowMenuCallback, TabSetPlaceHolderCallback, ITabSetRenderValues, ITabRenderValues, IIcons } from "./layout/LayoutTypes";
 export interface ILayoutProps {
     /** the model for this layout */
     model: Model;
@@ -30,7 +27,7 @@ export interface ILayoutProps {
     onModelChange?: (model: Model, action: Action) => void;
     /** function called when an external object (not a tab) gets dragged onto the layout, with a single dragenter argument. Should return either undefined to reject the drag/drop or an object with keys dragText, jsonDrop, to create a tab via drag (similar to a call to addTabToTabSet). Function onDropis passed the added tabNodeand thedrop DragEvent`, unless the drag was canceled. */
     onExternalDrag?: (event: React.DragEvent<HTMLElement>) => undefined | {
-        json: any;
+        json: IJsonTabNode;
         onDrop?: (node?: Node, event?: React.DragEvent<HTMLElement>) => void;
     };
     /** function called with default css class name, return value is class name that will be used. Mainly for use with css modules. */
@@ -55,25 +52,18 @@ export interface ILayoutProps {
     onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
     /** Name given to popout windows, defaults to 'Popout Window' */
     popoutWindowName?: string;
+    /** the transition speed of the drag rectangle from one position to another, default is 0.3 secs */
+    tabDragSpeed?: number;
 }
-/**
- * A React component that hosts a multi-tabbed layout
- */
-export declare class Layout extends React.Component<ILayoutProps> {
-    /** @internal */
-    private selfRef;
-    /** @internal */
-    private revision;
-    /** @internal */
-    constructor(props: ILayoutProps);
+export interface ILayoutApi {
     /** re-render the layout */
     redraw(): void;
     /**
-     * Adds a new tab to the given tabset
-     * @param tabsetId the id of the tabset where the new tab will be added
-     * @param json the json for the new tab node
-     * @returns the added tab node or undefined
-     */
+ * Adds a new tab to the given tabset
+ * @param tabsetId the id of the tabset where the new tab will be added
+ * @param json the json for the new tab node
+ * @returns the added tab node or undefined
+ */
     addTabToTabSet(tabsetId: string, json: IJsonTabNode): TabNode | undefined;
     /**
      * Adds a new tab by dragging an item to the drop location, must be called from within an HTML
@@ -92,195 +82,27 @@ export declare class Layout extends React.Component<ILayoutProps> {
      */
     moveTabWithDragAndDrop(event: DragEvent, node: (TabNode | TabSetNode)): void;
     /**
-     * Adds a new tab to the active tabset (if there is one)
-     * @param json the json for the new tab node
-     * @returns the added tab node or undefined
-     */
+ * Adds a new tab to the active tabset (if there is one)
+ * @param json the json for the new tab node
+ * @returns the added tab node or undefined
+ */
     addTabToActiveTabSet(json: IJsonTabNode): TabNode | undefined;
     /**
-     * Sets the drag image from a react component for a drag event
-     * @param event the drag event
-     * @param component the react component to be used for the drag image
-     * @param x the x position of the drag cursor on the image
-     * @param y the x position of the drag cursor on the image
-     */
+ * Sets the drag image from a react component for a drag event
+ * @param event the drag event
+ * @param component the react component to be used for the drag image
+ * @param x the x position of the drag cursor on the image
+ * @param y the x position of the drag cursor on the image
+ */
     setDragComponent(event: DragEvent, component: React.ReactNode, x: number, y: number): void;
     /** Get the root div element of the layout */
-    getRootDiv(): HTMLDivElement | null;
-    /** @internal */
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-/** @internal */
-interface ILayoutInternalProps extends ILayoutProps {
-    renderRevision: number;
-    windowId?: string;
-    mainLayout?: LayoutInternal;
-}
-/** @internal */
-interface ILayoutInternalState {
-    rect: Rect;
-    editingTab?: TabNode;
-    portal?: React.ReactPortal;
-    showEdges: boolean;
-    showOverlay: boolean;
-    calculatedBorderBarSize: number;
-    layoutRevision: number;
-    forceRevision: number;
-    showHiddenBorder: DockLocation;
-}
-/** @internal */
-export declare class LayoutInternal extends React.Component<ILayoutInternalProps, ILayoutInternalState> {
-    static dragState: DragState | undefined;
-    private selfRef;
-    private moveablesRef;
-    private findBorderBarSizeRef;
-    private mainRef;
-    private previousModel?;
-    private orderedTabIds;
-    private orderedTabMoveableIds;
-    private moveableElementMap;
-    private dropInfo;
-    private outlineDiv?;
-    private currentDocument?;
-    private currentWindow?;
-    private supportsPopout;
-    private popoutURL;
-    private icons;
-    private resizeObserver?;
-    private dragEnterCount;
-    private dragging;
-    private windowId;
-    private layoutWindow;
-    private mainLayout;
-    private isMainWindow;
-    private isDraggingOverWindow;
-    private styleObserver;
-    private popoutWindowName;
-    constructor(props: ILayoutInternalProps);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    renderBorders(inner: React.ReactNode): import("react/jsx-runtime").JSX.Element;
-    renderLayout(): import("react/jsx-runtime").JSX.Element;
-    renderEdgeIndicators(): React.ReactNode[];
-    renderWindows(): React.ReactNode[];
-    renderTabMoveables(): Map<string, React.ReactNode>;
-    renderTabStamps(): React.ReactNode[];
-    renderTabs(): Map<string, React.ReactNode>;
-    renderMetricsElements(): import("react/jsx-runtime").JSX.Element;
-    checkForBorderToShow(x: number, y: number): void;
-    updateLayoutMetrics: () => void;
-    tidyMoveablesMap(): void;
-    reorderComponents(components: Map<string, React.ReactNode>, ids: string[]): React.ReactNode[];
-    onModelChange: (action: Action) => void;
-    redraw(type?: string): void;
-    redrawInternal(type: string): void;
-    doAction(action: Action): Node | undefined;
-    updateRect: () => void;
-    getBoundingClientRect(div: HTMLElement): Rect;
-    getMoveableContainer(): HTMLDivElement | null;
-    getMoveableElement(id: string): HTMLElement;
-    getMainLayout(): LayoutInternal;
-    getClassName: (defaultClassName: string) => string;
-    getCurrentDocument(): Document | undefined;
-    getDomRect(): Rect;
-    getWindowId(): string;
-    getRootDiv(): HTMLDivElement | null;
-    getMainElement(): HTMLDivElement | null;
-    getFactory(): (node: TabNode) => React.ReactNode;
-    isSupportsPopout(): boolean;
-    isRealtimeResize(): boolean;
-    getPopoutURL(): string;
-    setEditingTab(tabNode?: TabNode): void;
-    getEditingTab(): TabNode | undefined;
-    getModel(): Model;
-    onCloseWindow: (windowLayout: LayoutWindow) => void;
-    onSetWindow: (windowLayout: LayoutWindow, window: Window) => void;
-    getScreenRect(inRect: Rect): Rect;
-    addTabToTabSet(tabsetId: string, json: IJsonTabNode): TabNode | undefined;
-    addTabToActiveTabSet(json: IJsonTabNode): TabNode | undefined;
-    showControlInPortal: (control: React.ReactNode, element: HTMLElement) => void;
-    hideControlInPortal: () => void;
-    getIcons: () => IIcons;
-    maximize(tabsetNode: TabSetNode): void;
-    customizeTab(tabNode: TabNode, renderValues: ITabRenderValues): void;
-    customizeTabSet(tabSetNode: TabSetNode | BorderNode, renderValues: ITabSetRenderValues): void;
-    i18nName(id: I18nLabel, param?: string): string;
-    getShowOverflowMenu(): ShowOverflowMenuCallback | undefined;
-    getTabSetPlaceHolderCallback(): TabSetPlaceHolderCallback | undefined;
-    showContextMenu(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>): void;
-    auxMouseClick(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>): void;
-    showOverlay(show: boolean): void;
-    addTabWithDragAndDrop(event: DragEvent, json: IJsonTabNode, onDrop?: (node?: Node, event?: React.DragEvent<HTMLElement>) => void): void;
-    moveTabWithDragAndDrop(event: DragEvent, node: (TabNode | TabSetNode)): void;
-    setDragNode: (event: DragEvent, node: Node & IDraggable) => void;
-    setDragComponent(event: DragEvent, component: React.ReactNode, x: number, y: number): void;
-    setDraggingOverWindow(overWindow: boolean): void;
-    onDragEnterRaw: (event: React.DragEvent<HTMLElement>) => void;
-    onDragLeaveRaw: (event: React.DragEvent<HTMLElement>) => void;
-    clearDragMain(): void;
-    clearDragLocal(): void;
-    onDragEnter: (event: React.DragEvent<HTMLElement>) => void;
-    onDragOver: (event: React.DragEvent<HTMLElement>) => void;
-    onDragLeave: (event: React.DragEvent<HTMLElement>) => void;
-    onDrop: (event: React.DragEvent<HTMLElement>) => void;
+    getRootDiv(): HTMLDivElement | null | undefined;
 }
+/**
+ * A React component that hosts a multi-tabbed layout.
+ * @category Components
+ * @group Main Layout
+ */
+declare const Layout: React.ForwardRefExoticComponent<ILayoutProps & React.RefAttributes<ILayoutApi>>;
+export { Layout };
 export declare const FlexLayoutVersion: string;
-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: {
-    index: number;
-    node: TabNode;
-}[], onSelect: (item: {
-    index: number;
-    node: TabNode;
-}) => void) => void;
-export type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
-export interface ITabSetRenderValues {
-    /** a component to be placed before the tabs */
-    leading: React.ReactNode;
-    /** components that will be added after the tabs */
-    stickyButtons: React.ReactNode[];
-    /** components that will be added at the end of the tabset */
-    buttons: React.ReactNode[];
-    /** position to insert overflow button within [...stickyButtons, ...buttons]
-     * if left undefined position will be after the sticky buttons (if any)
-     */
-    overflowPosition: number | undefined;
-}
-export interface ITabRenderValues {
-    /** the icon or other leading component */
-    leading: React.ReactNode;
-    /** the main tab text/component */
-    content: React.ReactNode;
-    /** a set of react components to add to the tab after the content */
-    buttons: React.ReactNode[];
-}
-export interface IIcons {
-    close?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
-    closeTabset?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
-    popout?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
-    maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
-    restore?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
-    more?: (React.ReactNode | ((tabSetNode: (TabSetNode | BorderNode), hiddenTabs: {
-        node: TabNode;
-        index: number;
-    }[]) => React.ReactNode));
-    edgeArrow?: React.ReactNode;
-    activeTabset?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
-}
-declare enum DragSource {
-    Internal = "internal",
-    External = "external",
-    Add = "add"
-}
-declare class DragState {
-    readonly mainLayout: LayoutInternal;
-    readonly dragSource: DragSource;
-    readonly dragNode: Node & IDraggable | undefined;
-    readonly dragJson: IJsonTabNode | undefined;
-    readonly fnNewNodeDropped: ((node?: Node, event?: React.DragEvent<HTMLElement>) => void) | undefined;
-    constructor(mainLayout: LayoutInternal, dragSource: DragSource, dragNode: Node & IDraggable | undefined, dragJson: IJsonTabNode | undefined, fnNewNodeDropped: ((node?: Node, event?: React.DragEvent<HTMLElement>) => void) | undefined);
-}
-export {};

package/types/view/Overlay.d.ts

@@ -1,7 +1,7 @@
-import { LayoutInternal } from "./Layout";
+import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
 export interface IOverlayProps {
-    layout: LayoutInternal;
+    controller: LayoutController;
     show: boolean;
 }
 /** @internal */

package/types/view/PopoutWindow.d.ts

@@ -1,14 +1,14 @@
 import * as React from "react";
-import { LayoutInternal } from "./Layout";
-import { LayoutWindow } from "../model/LayoutWindow";
+import { LayoutController } from "./layout/LayoutInternal";
+import { Layout } from "../model/Layout";
 /** @internal */
 export interface IPopoutWindowProps {
     title: string;
-    layout: LayoutInternal;
-    layoutWindow: LayoutWindow;
+    controller: LayoutController;
+    layout: Layout;
     url: string;
-    onCloseWindow: (layoutWindow: LayoutWindow) => void;
-    onSetWindow: (layoutWindow: LayoutWindow, window: Window) => void;
+    onCloseLayout: (layout: Layout) => void;
+    onSetWindow: (layout: Layout, window: Window) => void;
 }
 /** @internal */
 export declare const PopoutWindow: (props: React.PropsWithChildren<IPopoutWindowProps>) => React.ReactPortal | null;

package/types/view/PopupMenu.d.ts

@@ -1,5 +1,5 @@
 import { TabNode } from "../model/TabNode";
-import { LayoutInternal } from "./Layout";
+import { LayoutController } from "./layout/LayoutInternal";
 import { TabSetNode } from "../model/TabSetNode";
 import { BorderNode } from "../model/BorderNode";
 /** @internal */
@@ -9,4 +9,4 @@ export declare function showPopup(triggerElement: Element, parentNode: TabSetNod
 }[], onSelect: (item: {
     index: number;
     node: TabNode;
-}) => void, layout: LayoutInternal): void;
+}) => void, controller: LayoutController): void;

package/types/view/Row.d.ts

@@ -1,9 +1,9 @@
 import { RowNode } from "../model/RowNode";
-import { LayoutInternal } from "./Layout";
+import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
 export interface IRowProps {
-    layout: LayoutInternal;
-    node: RowNode;
+    controller: LayoutController;
+    rowNode: RowNode;
 }
 /** @internal */
 export declare const Row: (props: IRowProps) => import("react/jsx-runtime").JSX.Element;

package/types/view/Splitter.d.ts

@@ -1,14 +1,12 @@
 import { BorderNode } from "../model/BorderNode";
 import { RowNode } from "../model/RowNode";
-import { LayoutInternal } from "./Layout";
+import { LayoutController } from "./layout/LayoutInternal";
 /** @internal */
 export interface ISplitterProps {
-    layout: LayoutInternal;
+    controller: LayoutController;
     node: RowNode | BorderNode;
     index: number;
     horizontal: boolean;
 }
 /** @internal */
-export declare let splitterDragging: boolean;
-/** @internal */
 export declare const Splitter: (props: ISplitterProps) => import("react/jsx-runtime").JSX.Element;