@aptre/flex-layout 0.2.0 → 0.2.1

package/dist/Attribute.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/AttributeDefinitions.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/DockLocation.d.ts

@@ -0,0 +1,12 @@
+import { Orientation } from "./Orientation";
+export declare class DockLocation {
+    static values: Record<string, DockLocation>;
+    static TOP: DockLocation;
+    static BOTTOM: DockLocation;
+    static LEFT: DockLocation;
+    static RIGHT: DockLocation;
+    static CENTER: DockLocation;
+    getName(): string;
+    getOrientation(): Orientation;
+    toString(): string;
+}

package/dist/DragDrop.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export declare class DragDrop {
+    static instance: DragDrop;
+    addGlass(fCancel: ((wasDragging: boolean) => void) | undefined): void;
+    resizeGlass(): void;
+    hideGlass(): void;
+    setGlassCursorOverride(cursor: string | undefined): void;
+    startDrag(event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement> | React.DragEvent<Element> | undefined, fDragStart: ((pos: {
+        clientX: number;
+        clientY: number;
+    }) => boolean) | undefined, fDragMove: ((event: React.MouseEvent<Element>) => void) | undefined, fDragEnd: ((event: Event) => void) | undefined, fDragCancel?: ((wasDragging: boolean) => void) | undefined, fClick?: ((event: Event) => void) | undefined, fDblClick?: ((event: Event) => void) | undefined, currentDocument?: Document, rootElement?: HTMLDivElement): void;
+    isDragging(): boolean;
+    isActive(): boolean;
+    toString(): string;
+}

package/dist/DropInfo.d.ts

@@ -0,0 +1,12 @@
+import { DockLocation } from "./DockLocation";
+import { IDropTarget } from "./model/IDropTarget";
+import { Node } from "./model/Node";
+import { Rect } from "./Rect";
+export declare class DropInfo {
+    node: Node & IDropTarget;
+    rect: Rect;
+    location: DockLocation;
+    index: number;
+    className: string;
+    constructor(node: Node & IDropTarget, rect: Rect, location: DockLocation, index: number, className: string);
+}

package/dist/I18nLabel.d.ts

@@ -0,0 +1,14 @@
+export declare enum I18nLabel {
+    Close_Tab = "Close",
+    Close_Tabset = "Close tabset",
+    Move_Tab = "Move: ",// no longer used
+    Move_Tabset = "Move tabset",
+    Maximize = "Maximize tabset",
+    Restore = "Restore tabset",
+    Float_Tab = "Show selected tab in floating window",
+    Overflow_Menu_Tooltip = "Hidden tabs",
+    Floating_Window_Message = "This panel is shown in a floating window",
+    Floating_Window_Show_Window = "Show window",
+    Floating_Window_Dock_Window = "Dock window",
+    Error_rendering_component = "Error rendering component"
+}

package/dist/Orientation.d.ts

@@ -0,0 +1,7 @@
+export declare class Orientation {
+    static HORZ: Orientation;
+    static VERT: Orientation;
+    static flip(from: Orientation): Orientation;
+    getName(): string;
+    toString(): string;
+}

package/dist/PopupMenu.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Rect.d.ts

@@ -0,0 +1,28 @@
+export declare class Rect {
+    static empty(): Rect;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    constructor(x: number, y: number, width: number, height: number);
+    static fromElement(element: Element): Rect;
+    clone(): Rect;
+    equals(rect: Rect | null | undefined): boolean;
+    getBottom(): number;
+    getRight(): number;
+    getCenter(): {
+        x: number;
+        y: number;
+    };
+    positionElement(element: HTMLElement, position?: string): void;
+    styleWithPosition(style: Record<string, any>, position?: string): Record<string, any>;
+    contains(x: number, y: number): boolean;
+    removeInsets(insets: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    }): Rect;
+    centerInRect(outerRect: Rect): void;
+    toString(): string;
+}

package/dist/Types.d.ts

@@ -0,0 +1,79 @@
+export declare enum CLASSES {
+    FLEXLAYOUT__BORDER = "flexlayout__border",
+    FLEXLAYOUT__BORDER_ = "flexlayout__border_",
+    FLEXLAYOUT__BORDER_BUTTON = "flexlayout__border_button",
+    FLEXLAYOUT__BORDER_BUTTON_ = "flexlayout__border_button_",
+    FLEXLAYOUT__BORDER_BUTTON_CONTENT = "flexlayout__border_button_content",
+    FLEXLAYOUT__BORDER_BUTTON_LEADING = "flexlayout__border_button_leading",
+    FLEXLAYOUT__BORDER_BUTTON_TRAILING = "flexlayout__border_button_trailing",
+    FLEXLAYOUT__BORDER_BUTTON__SELECTED = "flexlayout__border_button--selected",
+    FLEXLAYOUT__BORDER_BUTTON__UNSELECTED = "flexlayout__border_button--unselected",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW = "flexlayout__border_toolbar_button_overflow",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ = "flexlayout__border_toolbar_button_overflow_",
+    FLEXLAYOUT__BORDER_INNER = "flexlayout__border_inner",
+    FLEXLAYOUT__BORDER_INNER_ = "flexlayout__border_inner_",
+    FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER = "flexlayout__border_inner_tab_container",
+    FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ = "flexlayout__border_inner_tab_container_",
+    FLEXLAYOUT__BORDER_TAB_DIVIDER = "flexlayout__border_tab_divider",
+    FLEXLAYOUT__BORDER_SIZER = "flexlayout__border_sizer",
+    FLEXLAYOUT__BORDER_TOOLBAR = "flexlayout__border_toolbar",
+    FLEXLAYOUT__BORDER_TOOLBAR_ = "flexlayout__border_toolbar_",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON = "flexlayout__border_toolbar_button",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT = "flexlayout__border_toolbar_button-float",
+    FLEXLAYOUT__DRAG_RECT = "flexlayout__drag_rect",
+    FLEXLAYOUT__EDGE_RECT = "flexlayout__edge_rect",
+    FLEXLAYOUT__EDGE_RECT_TOP = "flexlayout__edge_rect_top",
+    FLEXLAYOUT__EDGE_RECT_LEFT = "flexlayout__edge_rect_left",
+    FLEXLAYOUT__EDGE_RECT_BOTTOM = "flexlayout__edge_rect_bottom",
+    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__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
+    FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
+    FLEXLAYOUT__LAYOUT = "flexlayout__layout",
+    FLEXLAYOUT__OUTLINE_RECT = "flexlayout__outline_rect",
+    FLEXLAYOUT__OUTLINE_RECT_EDGE = "flexlayout__outline_rect_edge",
+    FLEXLAYOUT__SPLITTER = "flexlayout__splitter",
+    FLEXLAYOUT__SPLITTER_EXTRA = "flexlayout__splitter_extra",
+    FLEXLAYOUT__SPLITTER_ = "flexlayout__splitter_",
+    FLEXLAYOUT__SPLITTER_BORDER = "flexlayout__splitter_border",
+    FLEXLAYOUT__SPLITTER_DRAG = "flexlayout__splitter_drag",
+    FLEXLAYOUT__TAB = "flexlayout__tab",
+    FLEXLAYOUT__TABSET = "flexlayout__tabset",
+    FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
+    FLEXLAYOUT__TABSET_HEADER_SIZER = "flexlayout__tabset_header_sizer",
+    FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
+    FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
+    FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
+    FLEXLAYOUT__TABSET_SIZER = "flexlayout__tabset_sizer",
+    FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
+    FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
+    FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
+    FLEXLAYOUT__TABSET_TABBAR_INNER_ = "flexlayout__tabset_tabbar_inner_",
+    FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER = "flexlayout__tabset_tabbar_inner_tab_container",
+    FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ = "flexlayout__tabset_tabbar_inner_tab_container_",
+    FLEXLAYOUT__TABSET_TABBAR_OUTER = "flexlayout__tabset_tabbar_outer",
+    FLEXLAYOUT__TABSET_TABBAR_OUTER_ = "flexlayout__tabset_tabbar_outer_",
+    FLEXLAYOUT__TAB_BORDER = "flexlayout__tab_border",
+    FLEXLAYOUT__TAB_BORDER_ = "flexlayout__tab_border_",
+    FLEXLAYOUT__TAB_BUTTON = "flexlayout__tab_button",
+    FLEXLAYOUT__TAB_BUTTON_STRETCH = "flexlayout__tab_button_stretch",
+    FLEXLAYOUT__TAB_BUTTON_CONTENT = "flexlayout__tab_button_content",
+    FLEXLAYOUT__TAB_BUTTON_LEADING = "flexlayout__tab_button_leading",
+    FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",
+    FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT = "flexlayout__tab_button_overflow_count",
+    FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
+    FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
+    FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
+    FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
+    FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",
+    FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
+    FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
+    FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ = "flexlayout__tab_toolbar_button-",
+    FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT = "flexlayout__tab_toolbar_button-float",
+    FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
+    FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
+    FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",
+    FLEXLAYOUT__POPUP_MENU_ITEM = "flexlayout__popup_menu_item",
+    FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu"
+}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export * from "./view/Layout";
+export * from "./model/Action";
+export * from "./model/Actions";
+export * from "./model/BorderNode";
+export * from "./model/BorderSet";
+export * from "./model/ICloseType";
+export * from "./model/IDraggable";
+export * from "./model/IDropTarget";
+export * from "./model/IJsonModel";
+export * from "./model/Model";
+export * from "./model/Node";
+export * from "./model/RowNode";
+export * from "./model/SplitterNode";
+export * from "./model/TabNode";
+export * from "./model/TabSetNode";
+export * from "./DockLocation";
+export * from "./DragDrop";
+export * from "./DropInfo";
+export * from "./I18nLabel";
+export * from "./Orientation";
+export * from "./Rect";
+export * from "./Types";

package/dist/model/Action.d.ts

@@ -0,0 +1,5 @@
+export declare class Action {
+    type: string;
+    data: Record<string, any>;
+    constructor(type: string, data: Record<string, any>);
+}

package/dist/model/Actions.d.ts

@@ -0,0 +1,110 @@
+import { DockLocation } from "../DockLocation";
+import { Action } from "./Action";
+/**
+ * The Action creator class for FlexLayout model actions
+ */
+export declare class Actions {
+    static ADD_NODE: string;
+    static MOVE_NODE: string;
+    static DELETE_TAB: string;
+    static DELETE_TABSET: string;
+    static RENAME_TAB: string;
+    static SELECT_TAB: string;
+    static SET_ACTIVE_TABSET: string;
+    static ADJUST_SPLIT: string;
+    static ADJUST_BORDER_SPLIT: string;
+    static MAXIMIZE_TOGGLE: string;
+    static UPDATE_MODEL_ATTRIBUTES: string;
+    static UPDATE_NODE_ATTRIBUTES: string;
+    static FLOAT_TAB: string;
+    static UNFLOAT_TAB: string;
+    /**
+     * Adds a tab node to the given tabset node
+     * @param json the json for the new tab node e.g {type:"tab", component:"table"}
+     * @param toNodeId the new tab node will be added to the tabset with this node id
+     * @param location the location where the new tab will be added, one of the DockLocation enum values.
+     * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
+     * @param select (optional) whether to select the new tab, overriding autoSelectTab
+     * @returns {Action} the action
+     */
+    static addNode(json: any, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action;
+    /**
+     * Moves a node (tab or tabset) from one location to another
+     * @param fromNodeId the id of the node to move
+     * @param toNodeId the id of the node to receive the moved node
+     * @param location the location where the moved node will be added, one of the DockLocation enum values.
+     * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
+     * @param select (optional) whether to select the moved tab(s) in new tabset, overriding autoSelectTab
+     * @returns {Action} the action
+     */
+    static moveNode(fromNodeId: string, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action;
+    /**
+     * Deletes a tab node from the layout
+     * @param tabsetNodeId the id of the tab node to delete
+     * @returns {Action} the action
+     */
+    static deleteTab(tabNodeId: string): Action;
+    /**
+     * Deletes a tabset node and all it's child tab nodes from the layout
+     * @param tabsetNodeId the id of the tabset node to delete
+     * @returns {Action} the action
+     */
+    static deleteTabset(tabsetNodeId: string): Action;
+    /**
+     * Change the given nodes tab text
+     * @param tabNodeId the id of the node to rename
+     * @param text the test of the tab
+     * @returns {Action} the action
+     */
+    static renameTab(tabNodeId: string, text: string): Action;
+    /**
+     * Selects the given tab in its parent tabset
+     * @param tabNodeId the id of the node to set selected
+     * @returns {Action} the action
+     */
+    static selectTab(tabNodeId: string): Action;
+    /**
+     * Set the given tabset node as the active tabset
+     * @param tabsetNodeId the id of the tabset node to set as active
+     * @returns {Action} the action
+     */
+    static setActiveTabset(tabsetNodeId: string | undefined): Action;
+    /**
+     * Adjust the splitter between two tabsets
+     * @example
+     *  Actions.adjustSplit({node1: "1", weight1:30, pixelWidth1:300, node2: "2", weight2:70, pixelWidth2:700});
+     *
+     * @param splitSpec an object the defines the new split between two tabsets, see example below.
+     * @returns {Action} the action
+     */
+    static adjustSplit(splitSpec: {
+        node1Id: string;
+        weight1: number;
+        pixelWidth1: number;
+        node2Id: string;
+        weight2: number;
+        pixelWidth2: number;
+    }): Action;
+    static adjustBorderSplit(nodeId: string, pos: number): Action;
+    /**
+     * Maximizes the given tabset
+     * @param tabsetNodeId the id of the tabset to maximize
+     * @returns {Action} the action
+     */
+    static maximizeToggle(tabsetNodeId: string): Action;
+    /**
+     * Updates the global model jsone attributes
+     * @param attributes the json for the model attributes to update (merge into the existing attributes)
+     * @returns {Action} the action
+     */
+    static updateModelAttributes(attributes: any): Action;
+    /**
+     * Updates the given nodes json attributes
+     * @param nodeId the id of the node to update
+     * @param attributes the json attributes to update (merge with the existing attributes)
+     * @returns {Action} the action
+     */
+    static updateNodeAttributes(nodeId: string, attributes: any): Action;
+    static floatTab(nodeId: string): Action;
+    static unFloatTab(nodeId: string): Action;
+}

package/dist/model/BorderNode.d.ts

@@ -0,0 +1,34 @@
+import { DockLocation } from "../DockLocation";
+import { Orientation } from "../Orientation";
+import { Rect } from "../Rect";
+import { IDropTarget } from "./IDropTarget";
+import { IJsonBorderNode } from "./IJsonModel";
+import { Node } from "./Node";
+export declare class BorderNode extends Node implements IDropTarget {
+    static readonly TYPE = "border";
+    getLocation(): DockLocation;
+    getTabHeaderRect(): Rect | undefined;
+    getRect(): Rect;
+    getContentRect(): Rect | undefined;
+    isEnableDrop(): boolean;
+    isAutoSelectTab(whenOpen?: boolean): boolean;
+    getClassName(): string | undefined;
+    getBorderBarSize(): number;
+    getSize(): any;
+    getMinSize(): number;
+    getSelected(): number;
+    getSelectedNode(): Node | undefined;
+    getOrientation(): Orientation;
+    /**
+     * 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
+     * than directly, for example:
+     * this.state.model.doAction(
+     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
+     */
+    getConfig(): any;
+    isMaximized(): boolean;
+    isShowing(): boolean;
+    isAutoHide(): boolean;
+    toJson(): IJsonBorderNode;
+}

package/dist/model/BorderSet.d.ts

@@ -0,0 +1,4 @@
+import { BorderNode } from "./BorderNode";
+export declare class BorderSet {
+    getBorders(): BorderNode[];
+}

package/dist/model/ICloseType.d.ts

@@ -0,0 +1,5 @@
+export declare enum ICloseType {
+    Visible = 1,// close if selected or hovered, i.e. when x is visible (will only close selected on mobile, where css hover is not available)
+    Always = 2,// close always (both selected and unselected when x rect tapped e.g where a custom image has been added for close)
+    Selected = 3
+}

package/dist/model/IDraggable.d.ts

@@ -0,0 +1,2 @@
+export interface IDraggable {
+}

package/dist/model/IDropTarget.d.ts

@@ -0,0 +1,2 @@
+export interface IDropTarget {
+}

package/dist/model/IJsonModel.d.ts

@@ -0,0 +1,149 @@
+import { ICloseType } from "./ICloseType";
+export type IBorderLocation = "top" | "bottom" | "left" | "right";
+export type ITabLocation = "top" | "bottom";
+export type IInsets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export interface IJsonModel {
+    global?: IGlobalAttributes;
+    borders?: IJsonBorderNode[];
+    layout: IJsonRowNode;
+}
+export interface IJsonBorderNode extends IBorderAttributes {
+    location: IBorderLocation;
+    children: IJsonTabNode[];
+}
+export interface IJsonRowNode extends IRowAttributes {
+    children: (IJsonRowNode | IJsonTabSetNode)[];
+}
+export interface IJsonTabSetNode extends ITabSetAttributes {
+    active?: boolean;
+    maximized?: boolean;
+    children: IJsonTabNode[];
+}
+export interface IJsonTabNode extends ITabAttributes {
+}
+export interface IGlobalAttributes {
+    borderAutoSelectTabWhenClosed?: boolean;
+    borderAutoSelectTabWhenOpen?: boolean;
+    borderBarSize?: number;
+    borderClassName?: string;
+    borderEnableAutoHide?: boolean;
+    borderEnableDrop?: boolean;
+    borderMinSize?: number;
+    borderSize?: number;
+    enableEdgeDock?: boolean;
+    enableRotateBorderIcons?: boolean;
+    enableUseVisibility?: boolean;
+    legacyOverflowMenu?: boolean;
+    marginInsets?: IInsets;
+    rootOrientationVertical?: boolean;
+    splitterExtra?: number;
+    splitterSize?: number;
+    tabBorderHeight?: number;
+    tabBorderWidth?: number;
+    tabClassName?: string;
+    tabCloseType?: ICloseType;
+    tabContentClassName?: string;
+    tabDragSpeed?: number;
+    tabEnableClose?: boolean;
+    tabEnableDrag?: boolean;
+    tabEnableFloat?: boolean;
+    tabEnableRename?: boolean;
+    tabEnableRenderOnDemand?: boolean;
+    tabIcon?: string;
+    tabSetAutoSelectTab?: boolean;
+    tabSetBorderInsets?: IInsets;
+    tabSetClassNameHeader?: string;
+    tabSetClassNameTabStrip?: string;
+    tabSetEnableClose?: boolean;
+    tabSetEnableDeleteWhenEmpty?: boolean;
+    tabSetEnableDivide?: boolean;
+    tabSetEnableDrag?: boolean;
+    tabSetEnableDrop?: boolean;
+    tabSetEnableMaximize?: boolean;
+    tabSetEnableSingleTabStretch?: boolean;
+    tabSetEnableTabStrip?: boolean;
+    tabSetHeaderHeight?: number;
+    tabSetMarginInsets?: IInsets;
+    tabSetMinHeight?: number;
+    tabSetMinWidth?: number;
+    tabSetTabLocation?: ITabLocation;
+    tabSetTabStripHeight?: number;
+}
+export interface IRowAttributes {
+    height?: number;
+    id?: string;
+    type: "row";
+    weight?: number;
+    width?: number;
+}
+export interface ITabSetAttributes {
+    autoSelectTab?: boolean;
+    borderInsets?: IInsets;
+    classNameHeader?: string;
+    classNameTabStrip?: string;
+    config?: any;
+    enableClose?: boolean;
+    enableDeleteWhenEmpty?: boolean;
+    enableDivide?: boolean;
+    enableDrag?: boolean;
+    enableDrop?: boolean;
+    enableMaximize?: boolean;
+    enableSingleTabStretch?: boolean;
+    enableTabStrip?: boolean;
+    headerHeight?: number;
+    height?: number;
+    id?: string;
+    marginInsets?: IInsets;
+    minHeight?: number;
+    minWidth?: number;
+    name?: string;
+    selected?: number;
+    tabLocation?: ITabLocation;
+    tabStripHeight?: number;
+    type: "tabset";
+    weight?: number;
+    width?: number;
+    maximized?: boolean;
+    active?: boolean;
+}
+export interface ITabAttributes {
+    altName?: string;
+    borderHeight?: number;
+    borderWidth?: number;
+    className?: string;
+    closeType?: ICloseType;
+    component?: string;
+    config?: any;
+    contentClassName?: string;
+    tabsetClassName?: string;
+    enableClose?: boolean;
+    enableDrag?: boolean;
+    enableFloat?: boolean;
+    enableRename?: boolean;
+    enableRenderOnDemand?: boolean;
+    floating?: boolean;
+    helpText?: string;
+    icon?: string;
+    id?: string;
+    name?: string;
+    type?: string;
+}
+export interface IBorderAttributes {
+    autoSelectTabWhenClosed?: boolean;
+    autoSelectTabWhenOpen?: boolean;
+    barSize?: number;
+    className?: string;
+    config?: any;
+    enableAutoHide?: boolean;
+    enableDrop?: boolean;
+    minSize?: number;
+    selected?: number;
+    show?: boolean;
+    size?: number;
+    type: "border";
+}

package/dist/model/Model.d.ts

@@ -0,0 +1,86 @@
+import { DropInfo } from "../DropInfo";
+import { Action } from "./Action";
+import { BorderSet } from "./BorderSet";
+import { IJsonModel, ITabSetAttributes } from "./IJsonModel";
+import { Node } from "./Node";
+import { RowNode } from "./RowNode";
+import { TabNode } from "./TabNode";
+import { TabSetNode } from "./TabSetNode";
+/**
+ * Class containing the Tree of Nodes used by the FlexLayout component
+ */
+export declare class Model {
+    /**
+     * Loads the model from the given json object
+     * @param json the json model to load
+     * @returns {Model} a new Model object
+     */
+    static fromJson(json: IJsonModel): Model;
+    /**
+     * Get the currently active tabset node
+     */
+    getActiveTabset(): TabSetNode | undefined;
+    /**
+     * Get the currently maximized tabset node
+     */
+    getMaximizedTabset(): TabSetNode | undefined;
+    /**
+     * Gets the root RowNode of the model
+     * @returns {RowNode}
+     */
+    getRoot(): RowNode;
+    isRootOrientationVertical(): boolean;
+    isUseVisibility(): boolean;
+    isEnableRotateBorderIcons(): boolean;
+    /**
+     * Gets the
+     * @returns {BorderSet|*}
+     */
+    getBorderSet(): BorderSet;
+    /**
+     * Visits all the nodes in the model and calls the given function for each
+     * @param fn a function that takes visited node and a integer level as parameters
+     */
+    visitNodes(fn: (node: Node, level: number) => void): void;
+    /**
+     * Gets a node by its id
+     * @param id the id to find
+     */
+    getNodeById(id: string): Node | undefined;
+    /**
+     * Finds the first/top left tab set of the given node.
+     * @param node The top node you want to begin searching from, deafults to the root node
+     * @returns The first Tab Set
+     */
+    getFirstTabSet(node?: Node): Node;
+    /**
+     * Update the node tree by performing the given action,
+     * Actions should be generated via static methods on the Actions class
+     * @param action the action to perform
+     * @returns added Node for Actions.addNode; undefined otherwise
+     */
+    doAction(action: Action): Node | undefined;
+    /**
+     * Converts the model to a json object
+     * @returns {IJsonModel} json object that represents this model
+     */
+    toJson(): IJsonModel;
+    getSplitterSize(): number;
+    isLegacyOverflowMenu(): boolean;
+    getSplitterExtra(): number;
+    isEnableEdgeDock(): boolean;
+    /**
+     * Sets a function to allow/deny dropping a node
+     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed
+     */
+    setOnAllowDrop(onAllowDrop: (dragNode: Node, dropInfo: DropInfo) => boolean): void;
+    /**
+     * set callback called when a new TabSet is created.
+     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last
+     * tab is deleted, the root tabset can be recreated)
+     * @param onCreateTabSet
+     */
+    setOnCreateTabSet(onCreateTabSet: (tabNode?: TabNode) => ITabSetAttributes): void;
+    static toTypescriptInterfaces(): void;
+    toString(): string;
+}

package/dist/model/Node.d.ts

@@ -0,0 +1,17 @@
+import { Orientation } from "../Orientation";
+import { Rect } from "../Rect";
+import { IJsonBorderNode, IJsonRowNode, IJsonTabNode, IJsonTabSetNode } from "./IJsonModel";
+import { Model } from "./Model";
+export declare abstract class Node {
+    getId(): string;
+    getModel(): Model;
+    getType(): string;
+    getParent(): Node | undefined;
+    getChildren(): Node[];
+    getRect(): Rect;
+    isVisible(): boolean;
+    getOrientation(): Orientation;
+    setEventListener(event: string, callback: (params: any) => void): void;
+    removeEventListener(event: string): void;
+    abstract toJson(): IJsonRowNode | IJsonBorderNode | IJsonTabSetNode | IJsonTabNode | undefined;
+}

package/dist/model/RowNode.d.ts

@@ -0,0 +1,11 @@
+import { IDropTarget } from "./IDropTarget";
+import { IJsonRowNode } from "./IJsonModel";
+import { Node } from "./Node";
+export declare class RowNode extends Node implements IDropTarget {
+    static readonly TYPE = "row";
+    getWeight(): number;
+    getWidth(): number | undefined;
+    getHeight(): number | undefined;
+    toJson(): IJsonRowNode;
+    isEnableDrop(): boolean;
+}

package/dist/model/SplitterNode.d.ts

@@ -0,0 +1,5 @@
+import { Node } from "./Node";
+export declare class SplitterNode extends Node {
+    static readonly TYPE: string;
+    toJson(): undefined;
+}

package/dist/model/TabNode.d.ts

@@ -0,0 +1,37 @@
+import { Rect } from "../Rect";
+import { IDraggable } from "./IDraggable";
+import { IJsonTabNode } from "./IJsonModel";
+import { Node } from "./Node";
+export declare class TabNode extends Node implements IDraggable {
+    static readonly TYPE = "tab";
+    getWindow(): Window | undefined;
+    getTabRect(): Rect | undefined;
+    getName(): string;
+    getHelpText(): string | undefined;
+    getComponent(): 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
+     * than directly, for example:
+     * this.state.model.doAction(
+     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
+     */
+    getConfig(): any;
+    /**
+     * Returns an object that can be used to store transient node specific data that will
+     * NOT be saved in the json.
+     */
+    getExtraData(): Record<string, any>;
+    isFloating(): boolean;
+    getIcon(): string | undefined;
+    isEnableClose(): boolean;
+    getCloseType(): number;
+    isEnableFloat(): boolean;
+    isEnableDrag(): boolean;
+    isEnableRename(): boolean;
+    getClassName(): string | undefined;
+    getContentClassName(): string | undefined;
+    getTabSetClassName(): string | undefined;
+    isEnableRenderOnDemand(): boolean;
+    toJson(): IJsonTabNode;
+}

package/dist/model/TabSetNode.d.ts

@@ -0,0 +1,41 @@
+import { IDraggable } from "./IDraggable";
+import { IDropTarget } from "./IDropTarget";
+import { IJsonTabSetNode } from "./IJsonModel";
+import { Node } from "./Node";
+export declare class TabSetNode extends Node implements IDraggable, IDropTarget {
+    static readonly TYPE = "tabset";
+    getName(): string | undefined;
+    getSelected(): number;
+    getSelectedNode(): Node | undefined;
+    getWeight(): number;
+    getWidth(): number | undefined;
+    getMinWidth(): number;
+    getHeight(): number | undefined;
+    getMinHeight(): number;
+    /**
+     * 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
+     * than directly, for example:
+     * this.state.model.doAction(
+     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
+     */
+    getConfig(): any;
+    isMaximized(): boolean;
+    isActive(): boolean;
+    isEnableDeleteWhenEmpty(): boolean;
+    isEnableDrop(): boolean;
+    isEnableDrag(): boolean;
+    isEnableDivide(): boolean;
+    isEnableMaximize(): boolean;
+    isEnableClose(): boolean;
+    isEnableSingleTabStretch(): boolean;
+    canMaximize(): boolean;
+    isEnableTabStrip(): boolean;
+    isAutoSelectTab(): boolean;
+    getClassNameTabStrip(): string | undefined;
+    getClassNameHeader(): string | undefined;
+    getHeaderHeight(): number;
+    getTabStripHeight(): number;
+    getTabLocation(): string;
+    toJson(): IJsonTabSetNode;
+}

package/dist/model/Utils.d.ts

@@ -0,0 +1 @@
+export declare function randomUUID(): any;

package/dist/view/BorderButton.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/BorderTabSet.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/ErrorBoundary.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/FloatingWindow.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/FloatingWindowTab.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/Icons.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare const CloseIcon: () => React.JSX.Element;
+export declare const MaximizeIcon: () => React.JSX.Element;
+export declare const OverflowIcon: () => React.JSX.Element;
+export declare const EdgeIcon: () => React.JSX.Element;
+export declare const PopoutIcon: () => React.JSX.Element;
+export declare const RestoreIcon: () => React.JSX.Element;

package/dist/view/Layout.d.ts

@@ -0,0 +1,161 @@
+import * as React from "react";
+import { DockLocation } from "../DockLocation";
+import { I18nLabel } from "../I18nLabel";
+import { Action } from "../model/Action";
+import { BorderNode } from "../model/BorderNode";
+import { Model } from "../model/Model";
+import { Node } from "../model/Node";
+import { TabNode } from "../model/TabNode";
+import { TabSetNode } from "../model/TabSetNode";
+import { Rect } from "../Rect";
+import { IJsonTabNode } from "../model/IJsonModel";
+export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
+export type DragRectRenderCallback = (content: React.ReactElement | undefined, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
+export type FloatingTabPlaceholderRenderCallback = (dockPopout: () => void, showPopout: () => void) => React.ReactElement | 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 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?: IconFactory;
+    titleFactory?: TitleFactory;
+    icons?: IIcons;
+    onAction?: (action: Action) => Action | undefined;
+    onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
+    onRenderTabSet?: (tabSetNode: TabSetNode | BorderNode, renderValues: ITabSetRenderValues) => void;
+    onModelChange?: (model: Model, action: Action) => void;
+    onExternalDrag?: (event: React.DragEvent<HTMLDivElement>) => undefined | {
+        dragText: string;
+        json: any;
+        onDrop?: (node?: Node, event?: Event) => void;
+    };
+    classNameMapper?: (defaultClassName: string) => string;
+    i18nMapper?: (id: I18nLabel, param?: string) => string | undefined;
+    supportsPopout?: boolean | undefined;
+    popoutURL?: string | undefined;
+    realtimeResize?: boolean | undefined;
+    onTabDrag?: (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation, refresh: () => void) => undefined | {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        callback: CustomDragCallback;
+        invalidated?: () => void;
+        cursor?: string | undefined;
+    };
+    onRenderDragRect?: DragRectRenderCallback;
+    onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
+    onContextMenu?: NodeMouseEvent;
+    onAuxMouseClick?: NodeMouseEvent;
+    onShowOverflowMenu?: ShowOverflowMenuCallback;
+    onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
+}
+export interface IFontValues {
+    size?: string;
+    family?: string;
+    style?: string;
+    weight?: string;
+}
+export interface ITabSetRenderValues {
+    headerContent?: React.ReactNode;
+    centerContent?: React.ReactNode;
+    stickyButtons: React.ReactNode[];
+    buttons: React.ReactNode[];
+    headerButtons: React.ReactNode[];
+    overflowPosition: number | undefined;
+}
+export interface ITabRenderValues {
+    leading: React.ReactNode;
+    content: React.ReactNode;
+    name: string;
+    buttons: React.ReactNode[];
+}
+export interface ITitleObject {
+    titleContent: React.ReactNode;
+    name: string;
+}
+export interface ILayoutState {
+    rect: Rect;
+    calculatedHeaderBarSize: number;
+    calculatedTabBarSize: number;
+    calculatedBorderBarSize: number;
+    editingTab?: TabNode;
+    showHiddenBorder: DockLocation;
+    portal?: React.ReactPortal;
+    showEdges?: boolean;
+}
+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;
+}
+export interface ICustomDropDestination {
+    rect: Rect;
+    callback: CustomDragCallback;
+    invalidated: (() => void) | undefined;
+    dragging: TabNode | IJsonTabNode;
+    over: TabNode;
+    x: number;
+    y: number;
+    location: DockLocation;
+    cursor: string | undefined;
+}
+/**
+ * A React component that hosts a multi-tabbed layout
+ */
+export declare class Layout extends React.Component<ILayoutProps, ILayoutState> {
+    constructor(props: ILayoutProps);
+    /**
+     * 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 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;
+    /**
+     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
+     * @param dragText the text to show on the drag panel
+     * @param json the json for the new tab node
+     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
+     */
+    addTabWithDragAndDrop(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
+    /**
+     * Move a tab/tabset using drag and drop
+     * @param node the tab or tabset to drag
+     * @param dragText the text to show on the drag panel
+     */
+    moveTabWithDragAndDrop(node: TabNode | TabSetNode, dragText?: string): void;
+    /**
+     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
+     * mouse down on the panel
+     *
+     * @param dragText the text to show on the drag panel
+     * @param json the json for the new tab node
+     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
+     */
+    addTabWithDragAndDropIndirect(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
+}

package/dist/view/Splitter.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/Tab.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabButton.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabButtonStamp.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabFloating.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabOverflowHook.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabSet.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/Utils.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -2,7 +2,7 @@
     "name": "@aptre/flex-layout",
     "author": "Caplin Systems Ltd",
     "description": "A multi-tab docking layout manager",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "license": "ISC",
     "repository": {
         "type": "git",
@@ -29,7 +29,7 @@
     ],
     "main": "./dist/index.mjs",
     "module": "./dist/index.mjs",
-    "types": "./declarations/index.d.ts",
+    "types": "./dist/index.d.ts",
     "exports": {
         ".": "./dist/index.mjs",
         "./style": "./style/",
@@ -57,12 +57,13 @@
         "dist/"
     ],
     "scripts": {
-        "build": "npm run build:style && npm run build:doc && npm run build:lib",
-        "build:min": "npm run build:style && npm run build:doc && npm run build:lib:min",
+        "build": "npm run build:style && npm run build:doc && npm run build:lib && npm run build:types",
+        "build:min": "npm run build:style && npm run build:doc && npm run build:lib:min && npm run build:types",
         "build:lib": "rimraf ./dist && esbuild --bundle --external:react --external:react-dom --format=esm --target=es2022 --platform=browser --outfile=./dist/index.mjs ./src/index.ts",
         "build:lib:min": "npm run build:lib -- --minify",
         "build:doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
         "build:style": "sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/dark.scss style/dark.css",
+        "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist/",
         "test": "tsc --project tsconfig.json --noEmit",
         "lint": "eslint src/*",
         "format": "prettier --write './style/*.scss' './{src,declarations}/**/(*.ts|*.tsx|*.html)' package.json"
@@ -85,7 +86,6 @@
         "prismjs": "^1.28.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-scripts": "5.0.1",
         "rimraf": "^5.0.5",
         "sass": "^1.50.0",
         "typedoc": "^0.25.0",